/* SiteComponents version: 6.8.0, tag SC_6_8_0, created Tue Jun 15 10:40:42 +0200 2010 Disclaimer While we make every effort to ensure that this code is fit for its intended purpose, we make no guarantees as to its functionality. CoreTrek AS will accept no responsibility for the loss of data or any other damage or financial loss caused by use of this code. Copyright This programming code is copyright of CoreTrek AS. Permission to run this code is given to approved users of CoreTrek's publishing system CorePublish. This source code may not be copied, modified or otherwise repurposed for use by a third party without the written permission of CoreTrek AS. Contact webmaster@coretrek.com for information. */ // JSLint validation config /*jslint laxbreak: true, sub: true, white: false, browser: true, onevar: false, nomen: false, noindent: true, eqeqeq: false, plusplus: false */ /*global siteComponentsConfig: false, getSiteComponentsConfig: false, Ajax: false, $$: false, $: false, Element: false, window: false, Class: false, Effect: false, lightbox: false, PeriodicalExecuter: false, Event: false, CtCookie: false */ /* ============================================================================ IMPORTANT! This javascript is dependent on Prototype. ============================================================================ CtFontSize Class for changing the font sizes on a site. The method toggle() is used to toggle between the available font sizes. The font sizes are configurable. Instead of using the method toggle() the method setFontSize can be used to set given fontsizes (e.g. small, medium, big). This is used if we have different links each fontsize instead of one common link that toggles between a set of sizes. The class makes a couple of assumptions: - The script is dependant on Prototype. - It will only change the font size on the body tag. The rest of the site must use % or em sizes on the elements you want to alter the size on. - The default font font sizes are 10pt, 12pt and 14pt. If you would like to use other font sizes, you can do this using the siteComponentsConfig array set in site.js. Example: var siteComponentsConfig = { 'fontsize': { 'sizes': ["10pt", "15pt", "18pt"] } }; - The current font size is stored in a cookie. The cookie variable needs to be initialized to a default value for this to work 100%. This is done automatically by the link toolbar tile with the code below. If you want to use this class without using the whole tile, the initialization code need to be executed on page load. document.observe("dom:loaded", function(event) { fontSize = new CtFontSize(); fontSize.initializeFromCookie(); }); The initialization code can be put both inline (as in linktoolbar.php) or in a external javascript file included in . - This class is also dependant on the scCookie class for setting and getting cookies. */ var CtFontSize = Class.create({ initialize: function() { // Set init font sizes that could be used // DIFI requiments says that min fontsize that user can choose must be 20px this.smallFontSize = "14px"; this.mediumFontSize = "17px"; this.bigFontSize = "20px"; this.c = new CtCookie(); }, /** * Get the available font sizes. This is an array of font sizes that can be * used with a fontSize style parameter (e.g. "10pt", "12px"). * * @return array Array of font sizes */ getAvailableFontSizes: function() { return [this.smallFontSize, this.mediumFontSize, this.bigFontSize]; }, /** * Set correct fontsize based on given size parameter * * Supported sizes are: small, medium, big * And the function defaults to medium of fontsize is null. */ setFontSize: function(size) { var fontSize = null; switch(size) { case 'small': fontSize = this.smallFontSize; break; case 'medium': fontSize = this.mediumFontSize; break; case 'big': fontSize = this.bigFontSize; break; default: fontSize = this.smallFontSize; break; } this.set(fontSize); }, /** * Toggle to the next font size. * * This function toggle between fontsized returned from the * function getAvailableFontSizes */ toggle: function() { var currentIndex = this.getCurrentIndex(); var fontSizes = this.getAvailableFontSizes(); var fontSize = null; if(currentIndex + 1 >= fontSizes.size()) { fontSize = fontSizes[0]; } else if(currentIndex < 0) { fontSize = fontSizes[0]; } else { fontSize = fontSizes[currentIndex + 1]; } this.set(fontSize); }, /** * Get the currently used font size from cookie. */ getCurrentIndex: function() { var fontSizes = this.getAvailableFontSizes(); var currentFontSize = this.c.get("fontsize"); return fontSizes.indexOf(currentFontSize); }, /** * Set a font size in cookie and as body style. The provided style must * be used directly with a prototype setStyle argument. E.g. "10pt", "12px". * * @param size string The font size e.g. "10pt" */ set: function(size) { this.c.set("fontsize", size); $(document.body).setStyle({ fontSize: size }); }, setByIndex: function(index) { var fontSizes = this.getAvailableFontSizes(); if(index >= 0 && index < fontSizes.size()) { this.set(fontSizes[index]); } }, /** * Function used on body load to initialize the font size from the one * stored in cookie. Must be called on or after dom:loaded event. */ initializeFromCookie: function() { var currentIndex = this.getCurrentIndex(); var fontSizes = this.getAvailableFontSizes(); if(currentIndex < 0) { this.set(this.smallFontSize); // default value } else { this.set(fontSizes[currentIndex]); } } });