https://melfort.ca/Scripts/text-resizer.js

1/*
2jQuery Text Resizer Plugin v1.1.0
3    
4Copyright (c) 2009-2013 Mario J Vargas
5See the file MIT-LICENSE.txt for copying permission.
6    
7Website: http://angstrey.com/
8Documentation: http://angstrey.com/index.php/projects/jquery-text-resizer-plugin/
9*/
10;(function ($) {
11    "use strict";
12
13    var TextResizerPlugin, debug, stringify;
14
15    stringify = function (value) {
16        if ("object" === (typeof window.JSON) && "function" === (typeof window.JSON.stringify)) {
17            return JSON.stringify(value);
18        }
19
20        // Because of IE7 and below... Need I say more?
21        return value;
22    };
23
24    debug = function (obj) {
25        if (window.console && "function" === (typeof window.console.log)) {
26            setTimeout(function () {
27                var key,
28                    output = [],
29                    keyValuePair;
30
31                if ("string" === (typeof obj)) {
32                    output.push("jquery.textresizer => " + obj);
33                } else {
34                    output.push("jquery.textresizer => {");
35                    for (key in obj) {
36                        if (obj.hasOwnProperty(key)) {
37                            keyValuePair = [
38                                "    ", key, ": ", stringify(obj[key])
39                            ].join("");
40                            output.push(keyValuePair);
41                        }
42                    }
43                    output.push("}");
44                }
45
46                console.log(output.join("\n"));
47            }, 0);
48        }
49    };
50
51    TextResizerPlugin = function ($elements, options) {
52        this.$elements = $elements;
53        this.settings = options || TextResizerPlugin.defaults;
54    };
55
56    TextResizerPlugin.defaults = {
57        debugMode: false,                               // Disable debug mode.
58        type: "fontSize",                               // Available options: fontSize, css, cssClass.
59        target: "body",                                 // The HTML element to which the new font size will be applied.
60        selectedIndex: -1,                              // No font size option selected by default.
61        suppressClickThrough: true                      // Disables click-through of font size controls.
62    };
63
64    TextResizerPlugin.prototype.buildDefaultFontSizes = function (numElms) {
65        if (0 === numElms) {
66            return;
67        }
68
69        var size0 = 8,                // Initial size, measured in pixels
70            mySizes = [],
71            i,
72            value;
73
74        if (this.settings.debugMode) {
75            debug("In buildDefaultFontSizes: numElms = " + numElms);
76        }
77
78        if (this.settings.debugMode) {
79            for (i = 0; i < numElms; i += 1) {
80                // Append elements in increments of 2 units
81                value = (size0 + (i * 2)) / 10;
82                mySizes.push(value + "em");
83
84                debug("In buildDefaultFontSizes: mySizes[" + i + "] = " + mySizes[i]);
85            }
86        } else {
87            for (i = 0; i < numElms; i += 1) {
88                // Append elements in increments of 2 units
89                value = (size0 + (i * 2)) / 10;
90                mySizes.push(value + "em");
91            }
92        }
93
94        return mySizes;
95    };
96
97    TextResizerPlugin.prototype.serializeHash = function (dictionary) {
98        // jQuery's param() function does not replace white space correctly
99        return $.param(dictionary).replace(/\+/g, "%20");
100    };
101
102    TextResizerPlugin.prototype.deserializeHash = function (serializedValue) {
103        var i,
104            valueCount,
105            keyValuePair,
106            dictionary = {},
107            separatorPattern = /\&|\|/g,
108            dictValues = serializedValue.split(separatorPattern);
109
110        for (i = 0, valueCount = dictValues.length; i < valueCount; i += 1) {
111            // Separate key/value pair and assign to dictionary
112            keyValuePair = dictValues[i].split("=");
113            dictionary[keyValuePair[0]] = window.decodeURIComponent(keyValuePair[1]);
114        }
115
116        // Now that the object is finished, return it
117        return dictionary;
118    };
119
120    TextResizerPlugin.prototype.buildCookieID = function (selector, target, prop) {
121        return "JQUERY.TEXTRESIZER[" + selector + "," + target + "]." + prop;
122    };
123
124    TextResizerPlugin.prototype.getCookie = function (selector, target, prop) {
125        var id = this.buildCookieID(selector, target, prop),
126            cookieValue = $.cookie(id);
127
128        if ($.cookie(id + ".valueType") === "dict" && cookieValue) {
129            return this.deserializeHash(cookieValue);
130        }
131
132        return cookieValue;
133    };
134
135    TextResizerPlugin.prototype.setCookie = function (selector, target, prop, value) {
136        var id = this.buildCookieID(selector, target, prop),
137            // Cookie expires in 1 year (365 days/year)
138            cookieOpts = { expires: 365, path: "/" },
139            serializedVals;
140
141        // Serialize value if it's an object
142        if ("object" === (typeof value)) {
143            // Store type of value so we can convert it back 
144            // to a dictionary object
145            $.cookie(id + ".valueType", "dict", cookieOpts);
146
147            serializedVals = this.serializeHash(value);
148
149            $.cookie(id, serializedVals, cookieOpts);
150
151            if (this.settings.debugMode) {
152                debug("In setCookie: Cookie: " + id + ": " + serializedVals);
153            }
154        } else {
155            $.cookie(id, value, cookieOpts);
156
157            if (this.settings.debugMode) {
158                debug("In setCookie: Cookie (not hash): " + id + ": " + value);
159            }
160        }
161    };
162
163    TextResizerPlugin.prototype.applyInlineCssProperties = function ($targetElement, cssStyles) {
164        $targetElement.css(cssStyles);
165    };
166
167    TextResizerPlugin.prototype.applyCssClass = function ($targetElement, newSize, cssClasse

167s) {
168        // Remove previously assigned CSS class from
169        // target element. Iterating through matched
170        // elements ensures the class is removed
171        $.each(cssClasses, function () {
172            var className = this.toString();
173            $targetElement.each(function () {
174                var $currentElement = $(this);
175                if ($currentElement.hasClass(className)) {
176                    $currentElement.removeClass(className);
177                }
178            });
179        });
180
181        // Now apply the new CSS class
182        $targetElement.addClass(newSize);
183    };
184
185    TextResizerPlugin.prototype.applySpecificFontSize = function ($targetElement, newSize) {
186        $targetElement.css("font-size", newSize);
187    };
188
189    TextResizerPlugin.prototype.applyFontSize = function (newSize) {
190        if (this.settings.debugMode) {
191            debug([
192                "In applyFontSize(): target: ",
193                this.settings.target,
194                " | ",
195                "newSize: ",
196                stringify(newSize),
197                " | ",
198                "type: ",
199                this.settings.type
200            ].join(""));
201        }
202
203        var $targetElement = $(this.settings.target);
204        switch (this.settings.type) {
205            case "css":
206                this.applyInlineCssProperties($targetElement, newSize);
207                break;
208
209            case "cssClass":
210                this.applyCssClass($targetElement, newSize, this.settings.sizes);
211                break;
212
213            default:
214                this.applySpecificFontSize($targetElement, newSize);
215                break;
216        }
217    };
218
219    TextResizerPlugin.prototype.loadPreviousState = function () {
220        var settings = this.settings,
221            rawSelectedIndex,
222            selectedIndex,
223            prevSize;
224
225        // Determine if jquery.cookie is installed
226        if ($.cookie) {
227            if (settings.debugMode) {
228                debug("In loadPreviousState(): jquery.cookie: INSTALLED");
229            }
230
231            rawSelectedIndex = this.getCookie(settings.selector, settings.target, "selectedIndex");
232            selectedIndex = parseInt(rawSelectedIndex, 10);
233            prevSize = this.getCookie(settings.selector, settings.target, "size");
234
235            if (!isNaN(selectedIndex)) {
236                settings.selectedIndex = selectedIndex;
237            }
238
239            if (settings.debugMode) {
240                debug("In loadPreviousState: selectedIndex: " + selectedIndex + "; type: " + (typeof selectedIndex));
241
242                debug("In loadPreviousState: prevSize: " + prevSize + "; type: " + (typeof prevSize));
243            }
244
245            if (prevSize) {
246                this.applyFontSize(prevSize);
247            }
248        } else {
249            if (settings.debugMode) {
250                debug("In loadPreviousState(): jquery.cookie: NOT INSTALLED");
251            }
252        }
253    };
254
255    TextResizerPlugin.prototype.markActive = function (sizeButton) {
256        // Deactivate previous button
257        $(this.settings.selector).removeClass("textresizer-active");
258
259        // Mark this button as active
260        $(sizeButton).addClass("textresizer-active");
261    };
262
263    TextResizerPlugin.prototype.saveState = function (newSize) {
264        // Determine if jquery.cookie is installed
265        if ($.cookie) {
266            var selector = this.settings.selector,
267                target = this.settings.target,
268                selectedIndex = this.settings.selectedIndex;
269
270            if (this.settings.debugMode) {
271                debug("In saveState(): jquery.cookie: INSTALLED");
272            }
273
274            this.setCookie(selector, target, "size", newSize);
275            this.setCookie(selector, target, "selectedIndex", selectedIndex);
276        } else {
277            if (this.settings.debugMode) {
278                debug("In saveState(): jquery.cookie: NOT INSTALLED");
279            }
280        }
281    };
282
283    TextResizerPlugin.prototype.attachResizerToElement = function (element, index) {
284        var thisPlugin = this,
285            settings = thisPlugin.settings,
286            $resizeButton = $(element),                // Current resize button
287            currSizeValue = settings.sizes[index];     // Size corresponding to this resize button
288
289        // Mark this button as active if necessary
290        if (index === settings.selectedIndex) {
291            $resizeButton.addClass("textresizer-active");
292        }
293
294        // Apply the font size to target element when its 
295        // corresponding resize button is clicked
296        $resizeButton.on("click", { index: index }, function (e) {
297            var currentElement = this;
298
299            if (settings.suppressClickThrough) {
300                e.preventDefault();
301            }
302
303            settings.selectedIndex = e.data.index;
304
305            thisPlugin.applyFontSize(currSizeValue);
306            thisPlugin.saveState(currSizeValue);
307
308            thisPlugin.markActive(currentElement);
309        });
310    };
311
312    TextResizerPlugin.prototype.init = function () {
313        var numberOfElements = this.$elements.size(),
314            debugMode = TextResizerPlugin.defaults.debugMode;
315
316        if (debugMode) {
317            debug("init() => selection count: " + numberOfElements);
318        }
319
320        // Stop plugin execution if no matched elements
321        if (0 === numberOfElements) {
322            return;
323        }
324
325        // Set up main options before element iteration
326        this.settings = $.extend(
327            {
328                selector: this.$elements.selector,
329                sizes: this.buildDefaultFontSizes(numberOfElements)     // Default font sizes based on number of resize buttons.
330            },
331            $.fn.textresizer.defaults,
332            this.settings
333        );
334
335        debugMode = this.settings.debugMode;
336
337        if (debugMode) {
338            debug(this.settings);
339        }
340
341        // Ensure that the number of defined sizes is suitable
342        // for number of resize buttons.
343        if (numberOfElements > this.settings.sizes.length) {
344            if (debugMode) {
345                debug("ERROR: Number of defined sizes incompatible with number of buttons => elements: " + numberOfElements
346                        + "; defined sizes: " + this.settings.sizes.length
347                        + "; target: " + this.settings.target);
348            }
349
350            return;    // Stop execution of the plugin
351        }
352
353        this.loadPreviousState();
354
355        return this;
356    };
357
358    $.fn.textresizer = function (options) {
359        var plugin = new TextResizerPlugin(this, options).init();
360
361        // Iterate and bind click event function to each element
362        return this.each(function (i) {
363            plugin.attachResizerToElement(this, i);
364        });
365    };
366
367    $.fn.textresizer.defaults = TextResizerPlugin.defaults;
368})(window.jQuery);