| 1 |
/* |
| 2 |
* cssUpdate - v1.1.0 |
| 3 |
*/ |
| 4 |
|
| 5 |
/** @namespace customify */ |
| 6 |
window.customify = window.customify || parent.customify || {} |
| 7 |
|
| 8 |
;(function ($, window, customify) { |
| 9 |
const pluginName = 'cssUpdate', |
| 10 |
defaults = { |
| 11 |
properties: ['color'], |
| 12 |
propertyValue: 'pink', |
| 13 |
classes: 'Null' |
| 14 |
} |
| 15 |
|
| 16 |
// Plugin constructor |
| 17 |
function cssLiveUpdater (element, options) { |
| 18 |
this.element = element |
| 19 |
this.settings = $.extend({}, defaults, options) |
| 20 |
this._defaults = defaults |
| 21 |
this._name = pluginName |
| 22 |
this._cssproperties = CSSOM.parse($(this.element).html()) |
| 23 |
this.init() |
| 24 |
} |
| 25 |
|
| 26 |
cssLiveUpdater.prototype = { |
| 27 |
init: function () { |
| 28 |
this.changeProperties() |
| 29 |
}, |
| 30 |
|
| 31 |
changeProperties: function () { |
| 32 |
|
| 33 |
const self = this, |
| 34 |
css = this._cssproperties.cssRules |
| 35 |
|
| 36 |
if (typeof css[0] !== 'undefined' && css[0].hasOwnProperty('media')) { |
| 37 |
// in this case we run a media query object |
| 38 |
$.each(css, function (key, media_query) { |
| 39 |
// simple object with css properties |
| 40 |
// change them with new ones |
| 41 |
$.each(media_query.cssRules, function (i, property) { |
| 42 |
const property_name = property.style[0] |
| 43 |
css[key].cssRules[i].style[property_name] = self.updateCssRule(property_name, self.settings, css[key].cssRules[i].selectorText) |
| 44 |
}) |
| 45 |
}) |
| 46 |
|
| 47 |
} else { |
| 48 |
|
| 49 |
// simple object with css properties |
| 50 |
// change them with new ones |
| 51 |
$.each(css, function (i, property) { |
| 52 |
if (property.hasOwnProperty('style')) { |
| 53 |
const property_name = property.style[0] |
| 54 |
css[i].style[property_name] = self.updateCssRule(property_name, self.settings, css[i].selectorText) |
| 55 |
} |
| 56 |
}) |
| 57 |
} |
| 58 |
|
| 59 |
//Insert the new properties into <style> tag |
| 60 |
$(this.element).html(this._cssproperties.toString()) |
| 61 |
}, |
| 62 |
|
| 63 |
/** |
| 64 |
* Update one css properties by the given params |
| 65 |
* @param property_name |
| 66 |
* @param settings |
| 67 |
* @param selectorText |
| 68 |
* @returns {string} |
| 69 |
*/ |
| 70 |
updateCssRule: function (property_name, settings, selectorText) { |
| 71 |
|
| 72 |
const new_value = settings.propertyValue |
| 73 |
// if there is a negative property ... keep it negative |
| 74 |
const sign = settings['negative_value'] ? '-' : '' |
| 75 |
|
| 76 |
let unit = (typeof this.settings.unit !== 'undefined') ? this.settings.unit : '' |
| 77 |
// If the unit is empty (string, not boolean false) but the property should have a unit force 'px' as it |
| 78 |
if (unit === '' && customify.config.px_dependent_css_props.indexOf(property_name) !== -1) { |
| 79 |
unit = 'px' |
| 80 |
} |
| 81 |
|
| 82 |
if (typeof window[settings.properties.callback] === 'function') { |
| 83 |
window[settings.properties.callback](new_value, selectorText, property_name, unit) |
| 84 |
return '' |
| 85 |
} |
| 86 |
|
| 87 |
return sign + new_value + unit |
| 88 |
}, |
| 89 |
} |
| 90 |
|
| 91 |
// Plugin wrapper |
| 92 |
$.fn[pluginName] = function (options) { |
| 93 |
this.each(function () { |
| 94 |
$.data(this, 'plugin_' + pluginName, new cssLiveUpdater(this, options)) |
| 95 |
}) |
| 96 |
|
| 97 |
// chain jQuery functions |
| 98 |
return this |
| 99 |
} |
| 100 |
|
| 101 |
})(jQuery, window, customify) |
| 102 |
|
