| 1 |
/* |
| 2 |
* cssUpdate - v1.0.0 |
| 3 |
*/ |
| 4 |
;(function ( $, window, document, undefined ) { |
| 5 |
var pluginName = "cssUpdate", |
| 6 |
defaults = { |
| 7 |
properties: ["color"], |
| 8 |
propertyValue: "pink", |
| 9 |
classes: "Null" |
| 10 |
}; |
| 11 |
|
| 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 |
} |
| 21 |
|
| 22 |
|
| 23 |
|
| 24 |
cssLiveUpdater.prototype = { |
| 25 |
init: function () { |
| 26 |
this.changeProperties(); |
| 27 |
}, |
| 28 |
|
| 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 |
}, |
| 37 |
|
| 38 |
changeProperties: function () { |
| 39 |
|
| 40 |
var self = this, |
| 41 |
css = this._cssproperties.cssRules; |
| 42 |
|
| 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 |
}); |
| 53 |
|
| 54 |
} else { |
| 55 |
|
| 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 |
} |
| 65 |
|
| 66 |
$(window).trigger('resize'); |
| 67 |
|
| 68 |
//Insert the new properties into <style> tag |
| 69 |
$(this.element).html(this._cssproperties.toString()); |
| 70 |
}, |
| 71 |
|
| 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){ |
| 80 |
|
| 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); |
| 86 |
|
| 87 |
var unit = ''; |
| 88 |
|
| 89 |
if ( typeof this.settings.unit !== 'undefined' ) { |
| 90 |
unit = this.settings.unit; |
| 91 |
} |
| 92 |
|
| 93 |
if ( unit === '' && customify_settings.px_dependent_css_props.indexOf(property_name) != -1 ) { |
| 94 |
unit = 'px'; |
| 95 |
} |
| 96 |
|
| 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 ); |
| 145 |
|
