https://satan-festival.com/wp-content/themes/make/js/formatting/dy…/dynamic-stylesheet.js?ver=1.10.10

1/**
2 * Script for adding dynamic style rules to a page.
3 *
4 * Most useful for adding rules that use pseudo-selectors, which can't be inlined,
5 * or other rules that can't be added to the normal stylesheet.
6 *
7 * @since 1.4.1.
8 */
9/* global jQuery, MakeDynamicStylesheet */
10var MakeDynamicStylesheet = MakeDynamicStylesheet || {};
11
12(function($, DynamicStylesheet) {
13	'use strict';
14
15	DynamicStylesheet = $.extend(DynamicStylesheet, {
16		/**
17		 * Container for caching jQuery objects.
18		 *
19		 * @since 1.4.1.
20		 */
21		cache: {
22			$document: $(document)
23		},
24
25		/**
26		 * List of selectors to use when populating the cache.
27		 *
28		 * @since 1.4.1.
29		 */
30		cacheSelector: {
31			$button: 'a.ttfmake-button[data-hover-color], a.ttfmake-button[data-hover-background-color]',
32			$list: 'ul.ttfmake-list[data-icon-color]'
33		},
34
35		/**
36		 * Container for callbacks that add rules to the dynamic stylesheet.
37		 *
38		 * @since 1.4.1.
39		 */
40		builder: {
41			button: function(self) {
42				if (self.cache.$button.length > 0) {
43					self.createStylesheet();
44
45					self.cache.$button.each(function() {
46						var buttonID = $(this).attr('id'),
47							backgroundColor = $(this).attr('data-hover-background-color'),
48							color = $(this).attr('data-hover-color');
49
50						if (buttonID) {
51							if (backgroundColor) self.addCSSRule(self.stylesheet, '#' + buttonID + ':hover', 'background-color: ' + backgroundColor + ' !important');
52							if (color) self.addCSSRule(self.stylesheet, '#' + buttonID + ':hover', 'color: ' + color + ' !important');
53						}
54					});
55				}
56			},
57			list: function(self) {
58				if (self.cache.$list.length > 0) {
59					self.createStylesheet();
60
61					self.cache.$list.each(function() {
62						var listID = $(this).attr('id'),
63							iconColor = $(this).attr('data-icon-color');
64
65						if (listID && iconColor) {
66							self.addCSSRule(self.stylesheet, '#' + listID + ' li:before', 'color: ' + iconColor);
67						}
68					});
69				}
70			}
71		},
72
73		/**
74		 * Initialize the dynamic stylesheet functionality.
75		 *
76		 * Note that this only does something if DynamicStylesheet.tinymce isn't present,
77		 * which indicates that it's not loaded in the admin.
78		 *
79		 * @since 1.4.1.
80		 *
81		 * @return void
82		 */
83		init: function() {
84			if ('undefined' === typeof DynamicStylesheet.tinymce || true !== DynamicStylesheet.tinymce) {
85				this.root = this.cache.$document;
86
87				var self = this;
88				$(function() {
89					self.cacheElements();
90					self.buildStyles();
91				} );
92			}
93		},
94
95		/**
96		 * Initialize the dynamic stylesheet functionality in a TinyMCE instance.
97		 *
98		 * @since 1.4.1.
99		 *
100		 * @param editor
101		 * @return void
102		 */
103		tinymceInit: function(editor) {
104			this.root = $(editor.getBody());
105
106			this.cacheElements();
107			this.buildStyles();
108		},
109
110		/**
111		 * Run through the list of selectors and populate the cache.
112		 *
113		 * @since 1.4.1.
114		 *
115		 * @return void
116		 */
117		cacheElements: function() {
118			var self = this;
119
120			$.each(self.cacheSelector, function(name, selector) {
121				self.cache[name] = $(selector, self.root);
122			});
123		},
124
125		/**
126		 * Run through the list of callbacks and build the dynamic stylesheet.
127		 *
128		 * @since 1.4.1.
129		 *
130		 * @return void
131		 */
132		buildStyles: function() {
133			var self = this;
134
135			$.each(this.builder, function(name, f) {
136				f(self);
137			});
138		},
139
140		/**
141		 * Create a stylesheet element and append it to the root element of the current context.
142		 *
143		 * On the front end, the context will just be document, but in TinyMCE, the context will be the body
144		 * element within the iframe.
145		 *
146		 * @since 1.4.1.
147		 *
148		 * @link http://davidwalsh.name/add-rules-stylesheets
149		 *
150		 * @return object
151		 */
152		createStylesheet: function() {
153			var self = this;
154
155			this.stylesheet = this.stylesheet || (function() {
156				// Create the <style> tag
157				var $style = $('<style type="text/css">');
158
159				// Add an id
160				$style.attr('id', 'ttfmake-dynamic-styles');
161
162				// WebKit hack :(
163				$style.html('&shy;');;
164
165				// Add the <style> element to the page
166				if (self.root.find('head').length > 0) {
167					self.root.find('head').append($style);
168				} else if (self.root.parent().find('head').length > 0) {
169					self.root.parent().find('head').append($style);
170				} else {
171					self.root.append($style);
172				}
173
174				return $style.get(0).sheet;
175			})();
176		},
177
178		/**
179		 * Remove the stylesheet element from the root and the property from the class.
180		 *
181		 * @since 1.4.1.
182		 *
183		 * @return void
184		 */
185		removeStylesheet: function() {
186			if (this.root.find('head').length > 0) {
187				$('#ttfmake-dynamic-styles', this.root).remove();
188			} else {
189				this.root.parent().find('#ttfmake-dynamic-styles').remove();
190			}
191			delete this.stylesheet;
192		},
193
194		/**
195		 * Wrapper for removing the current stylesheet and generating a new one.
196		 *
197		 * @since 1.4.1.
198		 *
199		 * @return void
200		 */
201		resetStylesheet: function() {
202			this.removeStylesheet();
203			this.cacheElements();
204			this.buildStyles();
205		},
206
207		/**
208		 * Add a rule to the dynamic stylesheet.
209		 *
210		 * @since 1.4.1.
211		 *
212		 * @link http://davidwalsh.name/add-rules-stylesheets
213		 *
214		 * @param sheet
215		 * @param selector
216		 * @param rules
217		 * @param index
218		 * @return void
219		 */
220		addCSSRule: function(sheet, selector, rules, index) {
221			var ruleIndex = index || 0;
222
223			if('insertRule' in sheet) {
224				sheet.insertRule(selector + '{' + rules + '}', ruleIndex);
225			}
226			else if('addRule' in sheet) {
227				sheet.addRule(selector, rules, ruleIndex);
228			}
229		}
230	});
231
232	DynamicStylesheet.init();
233})(jQuery, MakeDynamicStylesheet);