customizer-custom-style-manager.js (11795B)
1 (function (root, CP_Customizer, $) { 2 3 var currentPageStyles = {}; 4 var styleEL = $(""); 5 var mod = null; 6 7 var mediaMap = { 8 "mobile": "@media screen and (max-width:767)", 9 "tablet": "@media screen and (min-width:768)", 10 "desktop": "@media screen and (min-width:1024)", 11 "nomedia": false 12 }; 13 14 var outputOrder = ['nomedia', 'mobile', 'tablet', 'desktop']; 15 16 function sprintf_style_array(data, media) { 17 var style = ""; 18 19 20 for (var selector in data) { 21 var props = data[selector]; 22 var propsText = ""; 23 24 for (var prop in props) { 25 var value = props[prop]; 26 propsText += "\t" + prop + ":" + value + ";\n"; 27 } 28 29 style += selector + "{\n" + propsText + "\n}"; 30 } 31 if (media) { 32 style = media + "{\n" + style + "\n}"; 33 } 34 35 return style + "\n\n"; 36 } 37 38 function setModAndUpdate() { 39 CP_Customizer.setMod(mod, _.clone(currentPageStyles), 'postMessage'); 40 41 var style = ""; 42 43 for (var i = 0; i < outputOrder.length; i++) { 44 var media = outputOrder[i]; 45 var mediaQuery = mediaMap[media]; 46 style += sprintf_style_array(currentPageStyles[media], mediaQuery); 47 } 48 styleEL.text(style); 49 } 50 51 52 CP_Customizer.on(CP_Customizer.events.PREVIEW_LOADED, function () { 53 currentPageStyles = CP_Customizer.preview.data('content_style'); 54 mod = 'custom_content_style_' + CP_Customizer.preview.data('pageID'); 55 styleEL = CP_Customizer.preview.find('#page-content-custom-styles'); 56 }); 57 58 59 CP_Customizer.contentStyle = { 60 getStyle: function (selector, media) { 61 62 if (!selector) { 63 return {}; 64 } 65 66 media = media || 'nomedia'; 67 return currentPageStyles[media][selector] || {}; 68 }, 69 70 removeSelector: function (selector, media, noUpdate) { 71 media = media || 'nomedia'; 72 73 if (media === "all") { 74 for (var m in currentPageStyles) { 75 this.removeSelector(selector, m, true); 76 } 77 setModAndUpdate(); 78 return; 79 } 80 81 if (currentPageStyles[media]) { 82 if (currentPageStyles[media][selector]) { 83 delete currentPageStyles[media][selector]; 84 } else { 85 for (var s in currentPageStyles[media]) { 86 if (s.match(selector)) { 87 delete currentPageStyles[media][s]; 88 } 89 } 90 } 91 } 92 93 if (!noUpdate) { 94 95 setModAndUpdate(); 96 } 97 98 }, 99 100 101 getProp: function (selector, pseudo, prop, defaultValue, media) { 102 pseudo = (pseudo || "").trim(); 103 selector = selector + pseudo; 104 105 var style = this.getStyle(selector, media); 106 return (style[prop] || "").toLowerCase().replace('!important', '').trim() || defaultValue; 107 108 }, 109 110 getNodeProp: function (node, selector, pseudo, prop, media) { 111 112 if (!node || node.length === 0) { 113 return ''; 114 } 115 116 node = CP_Customizer.preview.jQuery(node)[0]; 117 var defaultValue = CP_Customizer.preview.frame().getComputedStyle(node, pseudo).getPropertyValue(prop); 118 return this.getProp(selector, pseudo, prop, defaultValue, media) 119 }, 120 121 122 getNodeProps: function (node, selector, pseudo, props, media) { 123 var result = {}, 124 manager = this; 125 126 _.each(props, function (prop) { 127 result[prop] = manager.getNodeProp(node, selector, pseudo, prop, media); 128 }); 129 130 return result; 131 }, 132 133 isImportant: function (selector, pseudo, prop, media) { 134 pseudo = (pseudo || "").trim(); 135 selector = selector + pseudo; 136 137 var style = this.getStyle(selector, media); 138 var value = style[prop] || ""; 139 return value.toLowerCase().indexOf('!important') !== -1; 140 141 }, 142 143 setProp: function (selector, pseudo, prop, value, media, handeledModUpdate) { 144 media = media || 'nomedia'; 145 pseudo = (pseudo || "").trim(); 146 147 pseudo = (pseudo || "").trim(); 148 selector = selector + pseudo; 149 150 if (!currentPageStyles[media]) { 151 currentPageStyles[media] = {}; 152 } 153 154 if (_.isArray(currentPageStyles[media])) { 155 currentPageStyles[media] = _.extend({}, currentPageStyles[media]); 156 } 157 158 if (!currentPageStyles[media][selector]) { 159 currentPageStyles[media][selector] = {}; 160 } 161 162 currentPageStyles[media][selector][prop] = value; 163 164 if (!handeledModUpdate) { 165 setModAndUpdate(); 166 } 167 }, 168 169 removeProp: function (selector, pseudo, prop, media) { 170 media = media || 'nomedia'; 171 172 pseudo = (pseudo || "").trim(); 173 selector = selector + pseudo; 174 175 if (currentPageStyles[media]) { 176 if (currentPageStyles[media][selector]) { 177 if (currentPageStyles[media][selector][prop]) { 178 delete currentPageStyles[media][selector][prop]; 179 } 180 } 181 } 182 183 184 setModAndUpdate(); 185 }, 186 187 setProps: function (selector, pseudo, props, media) { 188 for (var prop in props) { 189 this.setProp(selector, pseudo, prop, props[prop], media, true); 190 } 191 192 setModAndUpdate(); 193 }, 194 195 merge: function (styles) { 196 currentPageStyles = jQuery.extend(currentPageStyles, styles); 197 setModAndUpdate(); 198 }, 199 200 recompileScssStyle: function () { 201 return; 202 var settings = CP_Customizer.options('scss_settings', {}); 203 var vars = {}; 204 205 for (var i = 0; i < settings.length; i++) { 206 var setting = settings[i]; 207 var setting_vars = CP_Customizer.hooks.applyFilters('scss_setting_vars_' + setting, {}); 208 209 if (_.isEmpty(setting_vars)) { 210 setting_vars = CP_Customizer.hooks.applyFilters('scss_setting_vars', {}, setting); 211 } 212 213 vars = _.extend(_.clone(vars), _.clone(setting_vars)); 214 } 215 216 var data = CP_Customizer.preview.data('scss', {}); 217 218 vars = _.extend(_.clone(data.vars), _.clone(vars)); 219 data.vars = vars; 220 221 var request = CP_Customizer.IO.post('compiled_style_preview', { 222 data: data 223 }); 224 225 request.done(function (content) { 226 CP_Customizer.preview.find('#ope-compiled-css').text(content); 227 }); 228 229 }, 230 231 setSectionItemColor: function (node, colorMapping, newColor) { 232 233 var $node = CP_Customizer.preview.jQuery(node), 234 colorName = CP_Customizer.getThemeColor(newColor), 235 colorClasses = Object.getOwnPropertyNames(CP_Customizer.getColorsObj()).concat(['color-white', 'color-black', 'color-gray']); 236 237 colorMapping.forEach(function (cMap) { 238 if (colorName) { 239 if (cMap.colorClass) { 240 var oldColorClasses = colorClasses.map(function (color) { 241 return cMap.colorClass.prefix + color + cMap.colorClass.suffix; 242 }); 243 244 var newClass = cMap.colorClass.prefix + colorName + cMap.colorClass.suffix; 245 var $item = $node.is(cMap.colorClass.selector || cMap.selector) ? $node : $node.find(cMap.colorClass.selector || cMap.selector); 246 $item.removeClass(oldColorClasses.join(' ')).addClass(newClass); 247 } 248 } 249 }); 250 251 }, 252 253 254 getSectionItemColor: function (node, colorMapping, defaultColor) { 255 256 if (!colorMapping) { 257 return 'rgba(0,0,0,0)'; 258 } 259 260 var $node = CP_Customizer.preview.jQuery(node), 261 firstCMap = colorMapping[0], 262 selector = colorMapping[0].selector, 263 colorClasses = Object.getOwnPropertyNames(CP_Customizer.getColorsObj()).concat(['color-white', 'color-black', 'color-gray']), 264 result = defaultColor || 'rgba(0,0,0,0)'; 265 266 if (firstCMap.colorClass) { 267 selector = firstCMap.colorClass.selector || selector; 268 var $item = $node.is(selector) ? $node : $node.find(selector); 269 270 for (var i = 0; i < colorClasses.length; i++) { 271 var colorClass = colorClasses[i], 272 nodeClass = firstCMap.colorClass.prefix + colorClass + firstCMap.colorClass.suffix; 273 if ($item.hasClass(nodeClass)) { 274 result = CP_Customizer.getColorValue(colorClass); 275 break; 276 } 277 } 278 } 279 280 return result; 281 282 } 283 }; 284 285 286 CP_Customizer.styleUtils = { 287 generateCSSLinerGradient: function (angle, colors) { 288 var colorsArray = colors.map(function (color) { 289 return color.value + " " + color.stop + '%' 290 }); 291 292 colorsText = colorsArray.join(' , '); 293 294 return 'linear-gradient(' + angle + 'deg, ' + colorsText + ')'; 295 296 }, 297 298 generateOneSideLinerGradient: function (angle, color, transpacency, from) { 299 transpacency = transpacency || 50; 300 startAlpha = transpacency / 2; 301 from = from || 50; 302 303 var fromColor = tinycolor(color).setAlpha(startAlpha / 100).toRgbString(), 304 middleColor = tinycolor(color).setAlpha(transpacency / 100).toRgbString(), 305 toColor = tinycolor(color).toHexString(); 306 307 var colors = [ 308 { 309 value: 'rgba(0,0,0,0)', 310 stop: 0 311 }, 312 { 313 value: fromColor, 314 stop: from / 2 315 }, 316 { 317 value: middleColor, 318 stop: from 319 }, 320 { 321 value: toColor, 322 stop: 100 323 } 324 ]; 325 326 return this.generateCSSLinerGradient(angle, colors); 327 328 }, 329 330 getCSSGradientColors: function (value, colorAsObject) { 331 var parts = value.match(/,((.*?)\s([0-9]+)%)/ig); 332 parts = parts.map(function (part) { 333 part = CP_Customizer.utils.phpTrim(part, ',').trim(); 334 var stop = part.match(/(\d+)%/igm)[0]; 335 var color = part.replace(stop, '').trim(); 336 337 return { 338 value: colorAsObject ? tinycolor(color) : color, 339 stop: CP_Customizer.utils.phpTrim(stop, '%').trim() 340 } 341 }); 342 343 return parts 344 }, 345 346 getRGBAStringTransparency: function (color) { 347 348 var transparency = tinycolor(color).getAlpha(); 349 350 return transparency; 351 352 } 353 354 } 355 356 357 })(window, CP_Customizer, jQuery);