| @@ -1,144 +1,101 @@ | ||
| 1 | 1 | /* |
| 2 | - * cssUpdate - v1.0.0 | |
| 2 | + * cssUpdate - v1.1.0 | |
| 3 | 3 | */ |
| 4 | -;(function ( $, window, document, undefined ) { | |
| 5 | - var pluginName = "cssUpdate", | |
| 6 | - defaults = { | |
| 7 | - properties: ["color"], | |
| 8 | - propertyValue: "pink", | |
| 9 | - classes: "Null" | |
| 10 | - }; | |
| 11 | 4 | |
| 12 | - // Plugin constructor | |
| 13 | - function cssLiveUpdater ( element, options ) { | |
| 14 | - this.element = element; | |
| 15 | - this.settings = $.extend( {}, defaults, options ); | |
| 16 | - this._defaults = defaults; | |
| 17 | - this._name = pluginName; | |
| 18 | - this._cssproperties = CSSOM.parse($(this.element).html()); | |
| 19 | - this.init(); | |
| 20 | - } | |
| 5 | +/** @namespace customify */ | |
| 6 | +window.customify = window.customify || parent.customify || {} | |
| 21 | 7 | |
| 8 | +;(function ($, window, customify) { | |
| 9 | + const pluginName = 'cssUpdate', | |
| 10 | + defaults = { | |
| 11 | + properties: ['color'], | |
| 12 | + propertyValue: 'pink', | |
| 13 | + classes: 'Null' | |
| 14 | + } | |
| 22 | 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 | + } | |
| 23 | 25 | |
| 24 | - cssLiveUpdater.prototype = { | |
| 25 | - init: function () { | |
| 26 | - this.changeProperties(); | |
| 27 | - }, | |
| 26 | + cssLiveUpdater.prototype = { | |
| 27 | + init: function () { | |
| 28 | + this.changeProperties() | |
| 29 | + }, | |
| 28 | 30 | |
| 29 | - update_plugin: function ( options ) { | |
| 30 | - //this.element = element; | |
| 31 | - this.settings = $.extend( {}, defaults, options ); | |
| 32 | - //this._defaults = defaults; | |
| 33 | - //this._name = pluginName; | |
| 34 | - //this._cssproperties = CSSOM.parse($(this.element).html()); | |
| 35 | - this.changeProperties(); | |
| 36 | - }, | |
| 31 | + changeProperties: function () { | |
| 37 | 32 | |
| 38 | - changeProperties: function () { | |
| 33 | + const self = this, | |
| 34 | + css = this._cssproperties.cssRules | |
| 39 | 35 | |
| 40 | - var self = this, | |
| 41 | - css = this._cssproperties.cssRules; | |
| 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 | + }) | |
| 42 | 46 | |
| 43 | - if ( typeof css[0] !== "undefined" && css[0].hasOwnProperty('media') ) { | |
| 44 | - // in this case we run a media query object | |
| 45 | - $.each(css, function( key, media_query ){ | |
| 46 | - // simple object with css properties | |
| 47 | - // change them with new ones | |
| 48 | - $.each(media_query.cssRules, function(i, property){ | |
| 49 | - var property_name = property.style[0]; | |
| 50 | - css[key].cssRules[i].style[property_name] = self.updateCssRule(property_name, self.settings, css[key].cssRules[i].selectorText); | |
| 51 | - }); | |
| 52 | - }); | |
| 47 | + } else { | |
| 53 | 48 | |
| 54 | - } else { | |
| 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 | + } | |
| 55 | 58 | |
| 56 | - // simple object with css properties | |
| 57 | - // change them with new ones | |
| 58 | - $.each(css, function(i, property){ | |
| 59 | - if ( property.hasOwnProperty( 'style' ) ) { | |
| 60 | - var property_name = property.style[0]; | |
| 61 | - css[i].style[property_name] = self.updateCssRule(property_name, self.settings, css[i].selectorText); | |
| 62 | - } | |
| 63 | - }); | |
| 64 | - } | |
| 59 | + //Insert the new properties into <style> tag | |
| 60 | + $(this.element).html(this._cssproperties.toString()) | |
| 61 | + }, | |
| 65 | 62 | |
| 66 | - $(window).trigger('resize'); | |
| 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) { | |
| 67 | 71 | |
| 68 | - //Insert the new properties into <style> tag | |
| 69 | - $(this.element).html(this._cssproperties.toString()); | |
| 70 | - }, | |
| 72 | + const new_value = settings.propertyValue | |
| 73 | + // if there is a negative property ... keep it negative | |
| 74 | + const sign = settings['negative_value'] ? '-' : '' | |
| 71 | 75 | |
| 72 | - /** | |
| 73 | - * Update one css properties by the given params | |
| 74 | - * @param property_name | |
| 75 | - * @param settings | |
| 76 | - * @param selectorText | |
| 77 | - * @returns {string} | |
| 78 | - */ | |
| 79 | - updateCssRule: function(property_name, settings, selectorText){ | |
| 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 | + } | |
| 80 | 81 | |
| 81 | - var self = this, | |
| 82 | - properties = settings.properties, | |
| 83 | - new_value = settings.propertyValue, | |
| 84 | - // if there is a negative property ... keep it negative | |
| 85 | - is_negative = self.is_negative_property(property_name, properties, selectorText); | |
| 82 | + if (typeof window[settings.properties.callback] === 'function') { | |
| 83 | + window[settings.properties.callback](new_value, selectorText, property_name, unit) | |
| 84 | + return '' | |
| 85 | + } | |
| 86 | 86 | |
| 87 | - var unit = ''; | |
| 87 | + return sign + new_value + unit | |
| 88 | + }, | |
| 89 | + } | |
| 88 | 90 | |
| 89 | - if ( typeof this.settings.unit !== 'undefined' ) { | |
| 90 | - unit = this.settings.unit; | |
| 91 | - } | |
| 91 | + // Plugin wrapper | |
| 92 | + $.fn[pluginName] = function (options) { | |
| 93 | + this.each(function () { | |
| 94 | + $.data(this, 'plugin_' + pluginName, new cssLiveUpdater(this, options)) | |
| 95 | + }) | |
| 92 | 96 | |
| 93 | - if ( unit === '' && customify_settings.px_dependent_css_props.indexOf(property_name) != -1 ) { | |
| 94 | - unit = 'px'; | |
| 95 | - } | |
| 97 | + // chain jQuery functions | |
| 98 | + return this | |
| 99 | + } | |
| 96 | 100 | |
| 97 | - if ( typeof window[settings.properties.callback] === "function" ) { | |
| 98 | - window[settings.properties.callback](new_value, selectorText, property_name, unit); | |
| 99 | - } | |
| 100 | - | |
| 101 | - return is_negative + new_value + unit; | |
| 102 | - }, | |
| 103 | - | |
| 104 | - /** | |
| 105 | - * Check is the current property has a negative selector in our config | |
| 106 | - * if this is true return the sign "-" which will be put in front of the value | |
| 107 | - * @param property | |
| 108 | - * @param current_properties | |
| 109 | - * @param selectorText | |
| 110 | - * @returns {string} | |
| 111 | - */ | |
| 112 | - is_negative_property: function(property, current_properties, selectorText){ | |
| 113 | - if ( current_properties.hasOwnProperty(property) ) { | |
| 114 | - | |
| 115 | - if ( current_properties[property].hasOwnProperty('negative_selector') ) { | |
| 116 | - | |
| 117 | - if (current_properties[property].negative_selector == selectorText) { | |
| 118 | - return '-'; | |
| 119 | - } | |
| 120 | - } | |
| 121 | - } | |
| 122 | - | |
| 123 | - return ''; | |
| 124 | - } | |
| 125 | - }; | |
| 126 | - | |
| 127 | - // Plugin wrapper | |
| 128 | - $.fn[ pluginName ] = function ( options ) { | |
| 129 | - this.each(function() { | |
| 130 | - | |
| 131 | - var old_plugin = $(this).data( 'plugin_cssUpdate' ); | |
| 132 | - | |
| 133 | - if ( typeof old_plugin !== 'undefined' ) { | |
| 134 | - old_plugin.update_plugin( options ); | |
| 135 | - } else { | |
| 136 | - $.data( this, "plugin_" + pluginName, new cssLiveUpdater( this, options ) ); | |
| 137 | - } | |
| 138 | - }); | |
| 139 | - | |
| 140 | - // chain jQuery functions | |
| 141 | - return this; | |
| 142 | - }; | |
| 143 | - | |
| 144 | -})( jQuery, window, document ); | |
| 101 | +})(jQuery, window, customify) | |
