CSS Switcher jQuery plugin

[HeadShot]

Салюты.

Вот сбацал плагинчик для переключения CSS. Раньше тянулся к более функциональному программированию, но уже хочется делать более доступные и удобные вещи.

Буду рад, если кто из спецов настучит порукам за явные косяки или просто посоветует, как можно развить данное решение.

Ссылка на git: https://github.com/x029ah/style-switch

Ссылка на демку: http://www.qr.cx/zehT

там лежат функциональная версия и опп'шный плагин.

Спасибо ...

Edited January 31, 2012 by HeadShot

[s0rr0w]

Салюты.

Демо куда-то выложить можно?

[HeadShot]

Салюты.

Демо куда-то выложить можно?

Хм ... так вроде git. Обновил первый пост.

Меня немного напрягает проверка аргументов. Это конечно излишняя паранойя и можно сделать через $.extend, навешать кучу проверок, но вопрос: кому это надо? Большинство пренебрегает, вроде не сервер.

Edited January 31, 2012 by HeadShot

[s0rr0w]

Меня немного напрягает проверка аргументов. Это конечно излишняя паранойя и можно сделать через $.extend, навешать кучу проверок, но вопрос: кому это надо? Большинство пренебрегает, вроде не сервер.

Git не позволяет мне быстро посмотреть, как работает код

Меня напрягает вот это

        for( i = 1; i <= st; i++ ) {
            var marker   = 'id="st'+ i +'_'+ group + '" data-gr="'+ group +'" data-st="st'+ i + '_'+ group +'"',
                items    = items + '<li '+ marker +'>['+ i +']</li>',
                links    = links + '<link '+ marker +' rel="fake" media="screen" href="'+ sp +'st'+ i +'.css'+ unify +'">'; 
        }

Есть такая замечательная техника как HTML-темплейтинг. А вы лишаете кодера возможности выбирать, какой код использовать для выключателей.

Как бы сделал я

<a href="#" rel="cssSwitch" -data-css-link="/css/myCss1.css">Стиль 1</a>
<a href="#" rel="cssSwitch" -data-css-link="/css/myCss2.css">Стиль 2</a>
<a href="#" rel="cssSwitch:group2" -data-css-link="/css/myCss3.css">Другая группа. Стиль 1</a>
<a href="#" rel="cssSwitch:group2" -data-css-link="/css/myCss4.css">Другая группа. Стиль 2</a>

И потом на onload поставил бы простецкий скрипт, который ищет все ссылки, у которых rel содержит cssSwitch, и работал бы уже с ними.

[HeadShot]

Меня немного напрягает проверка аргументов. Это конечно излишняя паранойя и можно сделать через $.extend, навешать кучу проверок, но вопрос: кому это надо? Большинство пренебрегает, вроде не сервер.

Git не позволяет мне быстро посмотреть, как работает код

Нужно разобраться, там кажется была возможность сделать поддомен со статикой(не помню на платном аккаунте или на простом).

Меня напрягает вот это

        for( i = 1; i <= st; i++ ) {
            var marker   = 'id="st'+ i +'_'+ group + '" data-gr="'+ group +'" data-st="st'+ i + '_'+ group +'"',
                items    = items + '<li '+ marker +'>['+ i +']</li>',
                links    = links + '<link '+ marker +' rel="fake" media="screen" href="'+ sp +'st'+ i +'.css'+ unify +'">'; 
        }

Есть такая замечательная техника как HTML-темплейтинг. А вы лишаете кодера возможности выбирать, какой код использовать для выключателей.

Согласен. Тимплейтинг есть хорошо. Здесь изначально цель была оптимизировать получше: сначала все собирается и только потом крепится, чтобы избежать лишних вызовов. Тестил на 5000 css, в принципе достаточно шустро DOM строит.

Как бы сделал я

<a href="#" rel="cssSwitch" -data-css-link="/css/myCss1.css">Стиль 1</a>
<a href="#" rel="cssSwitch" -data-css-link="/css/myCss2.css">Стиль 2</a>
<a href="#" rel="cssSwitch:group2" -data-css-link="/css/myCss3.css">Другая группа. Стиль 1</a>
<a href="#" rel="cssSwitch:group2" -data-css-link="/css/myCss4.css">Другая группа. Стиль 2</a>

И потом на onload поставил бы простецкий скрипт, который ищет все ссылки, у которых rel содержит cssSwitch, и работал бы уже с ними.

Логично. Я подумывал о том, чтобы добавить еще пару аргументов вызова. Что-то вроде параметра для стиля вывода(обрамляющие теги, например) и метод присасывания к целевому селектору( after, before, возможно wrap какой-то). И на будущее возможность задать для группы @media, хотя его можно в самих CSS указать.

Спасибо. А что по коду, есть что-то, что можно улучшить?

[s0rr0w]

Спасибо. А что по коду, есть что-то, что можно улучшить?

( options.group !== undefined ) - проверка не сработает, если group = null

И еще претензия к

        for( i = 1; i <= st; i++ ) {
            var marker   = 'id="st'+ i +'_'+ group + '" data-gr="'+ group +'" data-st="st'+ i + '_'+ group +'"',
                items    = items + '<li '+ marker +'>['+ i +']</li>',
                links    = links + '<link '+ marker +' rel="fake" media="screen" href="'+ sp +'st'+ i +'.css'+ unify +'">'; 
        }

Понять, что будет в конце, довольно затруднительно

Лично я бы написал вот так

var markerID = "st" + i + "_" + group";
var marker   = 'id="'+ markerID +'" data-gr="'+ group +'" data-st="'+ markerID +'"',

Все остальное вроде читабельно и понятно

Edited January 31, 2012 by s0rr0w

[HeadShot]

Благодарю, есть над чем поработать.

[HeadShot]

Переписал.

/**
    -=[ CSS Switcher jQuery plugin version 1.1 ]=-
 *  
 * [What is the CSS Switcher?]:
 * 
 *      CSS Switcher plugin intended to build interactive sites with flexible design.
 *      Using this you can allow user to modify color schemas, font and layout variants.
 *      Switcher have a memory function based on local storage and can be used in multiple mode.
 *
 * [Arguments]: 
 *
 *      @group:     css properties group e.g. color, font or layout;
 *      @path:      path to advanced stylesheets (every group need a different path);
 *      @range:     number of styles from 1 to n;
 *      @controls:  ul, menu, plain, div, where plain = <span> wrapper;
 *      @debug:     1 for randomization query ( some.css?random ).
 *
 * [Usage example for single mode]: 
 * 
 *  $('#content').cssSwitcher({
 *      path: '/pathToCSS/', 
 *      controls: 'ul',
 *      range: 3
 *  });
 *
 *
 * [Usage example for multiply mode]: 
 *
 *  $('#content').cssSwitcher({
 *      group: 'fonts',   
 *      path: '/pathToCSS/',
 *      range: 3,
 *  });
 *
 * [Usage example in debug mode]:
 *  
 *  Sometimes you need to test your color schemas before connect layout. The browser will chache every CSS. 
 *  To prevent this effect use @debug argument in plugin call & every stylesheet
 *  will have a random query in link href.  
 *
 *  $('#content').cssSwitcher({
 *      group: 'fonts',   
 *      path: '/pathToCSS/',
 *      range: 3,
 *      debug: 1    //call with debug
 *  });
 *
 * [About this]:
 *
 *      @autor:     FroZen Code: www.Shift-Web.ru
 *      @license:   CC-BY-SA 3.0
 *      @version:   1.1    
 * 
 **/

;(function ( $, window, document, undefined ) {

    //Create the defaults
    var pluginName = 'cssSwitcher',
        defaults = {
            controls:   'ul',               //default element style
            merge:      false,              //merge controls to one wrapper?
            path:       '/schemas/base/',   //path to schemas folder
            dest:       'prepend',          //prepend, append, before, after
            group:      'base',             //schema group prefix
            range:      0,                  //number of styles in schema
            debug:      0,                  //unify parameter in link.href
        };

        /* Todo: 
            - parse dirrectory to extract styles range; 
            - merge switch controls by group;
            - method (append, prepend);
            - API for autoswitch by resolution;
            - prefixes for data attributes has dependencies by group argument;
        */

    //Plugin constructor
    function Plugin( element, options ) {
        this.element = element;
        this.options = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;

        this.init(); //execute
    }

    Plugin.prototype.init = function () {

        //rebuild cfg
        pl      = this.element;
        sp      = this.options.path;
        st      = this.options.range;
        group   = this.options.group;
        data    = $.Storage.get( group );


        //debug unifier
        unify   = ( this.options.debug === true ) ? '?' + Math.floor( Math.random( 1, 30 ) * 200 ) : '';

        //controls variants
        switch( this.options.controls ) {
            default:
            case 'ul': 
                cntwrp = $('<ul>');
                itmwrp = 'li';
                break;

            case 'menu': 
                cntwrp = $('<menu>');
                itmwrp = 'li';
                break;

            case 'plain':
                cntwrp = null; 
                itmwrp = 'span';
                break;

            case 'div':
                cntwrp = null;
                itmwrp = 'div';
                break;
        }                


        // construct DOM & switchers
        this.builder( cntwrp, itmwrp, group, unify, pl, sp, st );

        // onready activation
        if( data !== undefined ) this.activation( data, group );


        //switch engine
        $('li', '.switcher').click(function( e ) { 
            t = $(this).attr('data-st');
            g = $(this).attr('data-gr');

            //clear
            $('link[data-gr="'+ g +'"]', 'head').attr('rel','fake');
            $('li', '.switcher[data-gr="'+ g +'"]').removeClass('activ');

            //set
            $('link[data-st='+ t +']','head').attr('rel', 'stylesheet');
            $(this).addClass('activ');
            $.Storage.set( g, t );

            e.preventDefault();
        }); 

    };

    Plugin.prototype.activation = function ( data, group ) {

        //enable active css and set activ class to control
        $('link[data-st='+ data +']', 'head').attr('rel', 'stylesheet');
        $('li[data-st='+ data +']', '.switcher[data-gr="'+ group +'"]').addClass('activ');

    };

    Plugin.prototype.builder = function ( cntwrp, itmwrp, group, unify, pl, sp, st ) {

        //flush temp
        itms = lnks = '';

        for( i = 1; i <= st; i++ ) {   

            //prepare attributes
            href    = sp +'st'+ i +'.css'+ unify;
            idm     = 'st'+ i +'_'+ group;                 

            //construct style link & controls
            lnks += '<link href="'+ href +'" rel="fake" media="screen" data-st="'+ idm +'" data-gr="'+ group+'" />';
            itms += '<'+ itmwrp +' id="'+ idm +'" data-gr="'+ group +'" data-st="'+ idm +'"'+'>'+'['+ i +']'+'</'+ itmwrp +'>';

        }

        //build links
        $('head').append(lnks);


        if( cntwrp === null ) { // independent block
            cntwrp = $('<div style="display: inline" id="inline_merge_'+ group +'"></div>');
        }

        //drop
        $(pl).append( cntwrp );
        cntwrp.attr({ 'class': 'switcher', 'data-gr': group }).html( itms );    

        //memory leaks prevent
        cntwrp  = null;
        items   = null;
        links   = null;        

    }

    // Plugin logic wrapper
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName,
                new Plugin( this, options ));
            }
        });
    }

})( jQuery, window, document );