jQuery StylesheetSwitcher Plugin

Die Grundidee stammt aus dem bereits sehr alten, aber nach wie vor gültigen, Beitrag von Paul Swoden auf A List Apart.
Ich habe das kurzerhand mal in ein jQuery-Plugin gepackt.

/**
 * jQuery StyleSheetSwitcher plugin
 *
 * Copyright (c) 2011 Sebastian Schreiber
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */
(function($) {
    $.styleSheetSwitcher = (function(options) {
        var defaults = {
            selector: 'a.switcher',
            defaultStyleSheet: 'default',
            cookieName: 'styleSheetSwitcher',
            cookieExpiresInDays: 365
        }
        var opts =  $.extend(defaults, options);
        var $styleSheets = $('link');

        var setActiveStyleSheet = function(title) {
            $styleSheets.each(function() {
                var $this = $(this);                
                if($this.attr('rel').indexOf('style') != -1 && $this.attr('title')) {
                    $this.attr('disabled', true);
                    if($this.attr('title') == title) {
                        $this.attr('disabled', false);
                        if(isCookieNameDefined()) {
                            createCookie(opts.cookieName, title, opts.cookieExpiresInDays);
                        }
                    }
                }
            })
        },
        getActiveStyleSheet = function() {
            $styleSheets.each(function() {
                var $this = $(this);
                if($this.attr('rel').indexOf('style') != -1 && $this.attr('title') && !$this.attr('disabled')) {
                    return $this.attr('title');
                }
            });
            return null;
        },
        getPreferredStyleSheet = function () {
            $styleSheets.each(function() {
                var $this = $(this);
                if($this.attr('rel').indexOf('style') != -1 && $this.attr('title') && $this.attr('rel').indexOf('alt') == -1) {
                    return $this.attr('title');
                }
            });
            return null;
        },
        isCookieNameDefined = function() {
            if(opts.cookieName) {                
                return true;
            }
            return false;
        },
        createCookie = function(name,value,expires) {
            $.cookie(name, value, {
                path: '/',
                expires: expires
            });
        },
        readCookie = function(name) {
            return $.cookie(name);
        };

        // Create the switcher function
        var $switcherElements = $(opts.selector);
        if($switcherElements.size() > 0) {
            var tag = $switcherElements.get(0).tagName.toLowerCase();
            switch(tag) {
                case 'a':
                    $switcherElements.click(function() {
                        setActiveStyleSheet($(this).attr('rel'));
                    });
                    break;
                case 'select':
                    $switcherElements.change(function() {
                        var title = $(this).val();
                        setActiveStyleSheet(title);                       
                    });
                    break;
            }
        }

        if(isCookieNameDefined()) {
            // Als erste schauen wir, ob es bereits einen Cookie gibt
            var cookie = readCookie(opts.cookieName);
            // Wenn es einen Cookie gibt, dann nehme den Inhalt des Cookie, wenn nicht dann nehmen wir den definierten Titel
            var title = cookie ? cookie : opts.defaultStyleSheet;
            // Sollte es keinen Default-Titel geben, dann schauen wir nach dem Stylesheet welches das alternate oder alternative im rel-attribut trägt
            title = title ? title : getPreferredStyleSheet();
            // Daraufhin setzen wir das Stylesheet
            setActiveStyleSheet(title);
        }
    })
})(jQuery);

Damit die Cookie-Funktionalität sauber implementiert ist, muss bei der vorgestellten Variante noch das jQuery Cookie Plugin von Klaus Hartl eingebunden werden

/**
 * jQuery Cookie plugin
 *
 * Copyright (c) 2010 Klaus Hartl (stilbuero.de)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */
jQuery.cookie = function (key, value, options) {
    // key and at least value given, set cookie...
    if (arguments.length > 1 && String(value) !== "[object Object]") {
        options = jQuery.extend({}, options);
        if (value === null || value === undefined) {
            options.expires = -1;
        }
        if (typeof options.expires === 'number') {
            var days = options.expires, t = options.expires = new Date();
            t.setDate(t.getDate() + days);
        }
        value = String(value);
        return (document.cookie = [
            encodeURIComponent(key), '=',
            options.raw ? value : encodeURIComponent(value),
            options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
            options.path ? '; path=' + options.path : '',
            options.domain ? '; domain=' + options.domain : '',
            options.secure ? '; secure' : ''
            ].join(''));
    }
    // key and possibly options given, get cookie...
    options = value || {};
    var result, decode = options.raw ? function (s) {
        return s;
    } : decodeURIComponent;
    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};

Der Aufruf des StyleSheetSwitchers erfolgt daraufhin beispielsweise folgendermaßen:

(function($) {
    $(document).ready(function() {
        $.styleSheetSwitcher({
            cookieExpiresInDays: 1,
            defaultStyleSheet: 'contrast',
            selector: 'select.switcher'
        });
    });
})(jQuery);

PS: Ob diese Art von StyleSheetSwitcher als accessible gelten kann, sei einmal dahingestellt.

Veröffentlicht von

avatar

Sebastian Schreiber

Ich bin 1980 in Bergisch Gladbach geboren. Nach dem Abitur und Zivildienst habe ich 2000 an der Fachhochschule Lippe & Höxter das Studium der Medienproduktin begonnen und nach längeren Aufenthalten in Valencia und Berlin 2003 das Studium mit dem Abschluss Bachelor of Science in Medienproduktion abgeschlossen. Nach einer Festanstellung kurz nach dem Studium in einer kleinen Webagentur in Köln mit Schwerpunkt TYPO3 bin ich nun seit 2008 freiberuflicher Webentwickler.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.