読者です 読者をやめる 読者になる 読者になる

のらねこの気まま暮らし

Perlについてとか、創作についてとか、発展途上の自分と向き合う記録。

jquery-slideshowの話をもうちと突っ込んでみる。

jquery-slideshowの話をもうちと突っ込んでみる。

概要

articleを羅列しただけに近いHTMLをパースし、指定スライドだけを表示する。
また表示する際に、エフェクトををかませる。

こちらで利用しているのは、jQueryの簡易アニメーションと、history.pushStateによるURL書き換え。

URLを書き換えて、スライド番号を記録しているのです。
だってほら、途中でネットワークが切れた時1番最初のページからやり直しとかやりたくないじゃない。

ちなみにコンテンツは1枚のHTMLに収まっており、かつ、このplugin中では通信を行わない(あくまで"location.pathname"からURLを取得・history.pushStateで書き換えるだけ)なので、途中で回線きれても何ら問題はない。

そのぶん、ブラウザーの制限を受けるのはわかっているんだけど。


下記に記載したソースが、当pluginの主要部分であるSlideShowクラスです。
ページの初期化、ページ番号の取得、ページの切り替え、次・前のページへの移動を担っている。

jquery-pluginとしてやっていることは、初期化と、書くコントローラへのバインドだけ。
簡単でしょ? 僕はこれに(0から考えると)2日くらいはかけたんだぜ・・・。


以下のソースはこの記事の初回投稿時のものである。

(function($){
    var SlideShow = function(){
        this.paths  = [];
        this.page   = 0;
    };
    SlideShow.prototype.init = function(config){
        this.section = $(config.section_tag);
        this.title   = this.section.children(config.title_tag);
        this.contents= $(config.content_tag);

        var contents = this.contents;
        var pages    = [this.title];
        for (var cnt=1; cnt <= contents.length; cnt++) {
            pages[cnt] = $(contents[cnt-1]).hide();
        }

        for(var cnt=0; cnt < pages.length; cnt++) {
            pages[cnt]
                .bind('slide:hide', config.hide)
                .bind('slide:show', config.show);
        }

        this.pages = pages;
    };
    SlideShow.prototype.getPage = function(path) {
        var paths = path.split('/');
        var page  = paths[4];
        paths.splice(4,1);
        this.paths = paths;
        return page;
    };
    SlideShow.prototype._setPushState = function() {
        var page = this.page;
        var push_path = this.paths.join('/')+'/'+page;
        window.history.pushState({curr_page:page}, document.title, push_path);
    };
    SlideShow.prototype.changePage = function(page, handler) {
        var pages = this.pages;

        if (!page) page = 0;
        if ((page >= pages.length) || (page < 0 && handler == 'back')) return;

        var prev_page = this.page;
        if (prev_page === undefined) prev_page = 0;

        pages[prev_page].trigger('slide:hide');
        pages[page].trigger('slide:show');

        this.page = page;
        this._setPushState();
    };
    SlideShow.prototype.backPage = function(path) {
        var curr_page = this.getPage(path);
        this.changePage(--curr_page, 'back');
    };
    SlideShow.prototype.nextPage = function(path) {
        var curr_page = this.getPage(path);
        this.changePage(++curr_page, 'next');
    };

    var sl = new SlideShow();

    $.slideShow = function(config){
        var config = $.extend({
            section_tag: 'section',
            title_tag  : ':not(article)',
            content_tag: 'article',
            hide: function(e){$(this).hide('slow');},
            show: function(e){$(this).show('slow');},
        }, config);


        sl.init(config);

        var pathname = location.pathname;
        var curr_page = sl.getPage(pathname);
        sl.changePage(curr_page);

        return sl;
    };
}(jQuery));