ink_ui_rails 2.1.1.0

data/vendor/assets/javascripts/ink.gallery.js

@@ -0,0 +1,757 @@
+/**
+ * @module Ink.UI.Gallery_1
+ * @author inkdev AT sapo.pt
+ * @version 1
+ */
+Ink.createModule('Ink.UI.Gallery', '1', ['Ink.UI.Aux_1','Ink.Dom.Event_1','Ink.Dom.Css_1','Ink.Dom.Element_1','Ink.Dom.Selector_1','Ink.Util.Array_1','Ink.Util.Swipe_1'], function(Aux, Event, Css, Element, Selector, InkArray, Swipe ) {
+    'use strict';
+    
+    /**
+     * Function to calculate the size based on a given max. size and image size.
+     * 
+     * @function maximizeBox
+     * @param  {Number} maxSz
+     * @param  {Number} imageSz
+     * @param  {Boolean} forceMaximize
+     * @return {Number}
+     * @private
+     */
+    var maximizeBox = function(maxSz, imageSz, forceMaximize) {
+        var w = imageSz[0];
+        var h = imageSz[1];
+
+        if (forceMaximize || (w > maxSz[0] || h > maxSz[1]) ) {
+            var arImg = w / h;
+            var arMax = maxSz[0] / maxSz[1];
+            var s = (arImg > arMax) ? maxSz[0] / w : maxSz[1] / h;
+            return [parseInt(w * s + 0.5, 10), parseInt(h * s + 0.5, 10)];
+        }
+
+        return imageSz;
+    };
+    
+    /**
+     * @function maximizeBox
+     * @param  {Object} o
+     * @param  {Function} cb Callback function to run on each image loaded.
+     * @private
+     */
+    var getDimsAsync = function(o, cb) {
+        cb = Ink.bind(cb,o);
+
+        var dims = [o.img.offsetWidth, o.img.offsetHeight];
+        if (dims[0] && dims[1]) {
+            cb(dims);
+        }
+        o.img.onload = Ink.bindEvent(function() {
+            cb([this.img.offsetWidth, this.img.offsetHeight]);
+        },o);
+    };
+
+    /**
+     * @class Ink.UI.Gallery
+     * @constructor
+     * @version 1
+     * @uses Ink.UI.Aux
+     * @uses Ink.Dom.Event
+     * @uses Ink.Dom.Css
+     * @uses Ink.Dom.Element
+     * @uses Ink.Dom.Selector
+     * @uses Ink.Util.Array
+     * @uses Ink.Util.Swipe
+     * @param {String|DOMElement} selector
+     * @param {Object} [options] Options for the gallery
+     *      @param {Number}   [options.fullImageMaxWidth]       Default value is 400.
+     *      @param {Number}   [options.thumbnailMaxWidth]       Max. width of the thumbnail. Default value is 106.
+     *      @param {Number}   [options.layout]                  This determines what layout the gallery will have. Numeric value between 0 and 3.
+     *      @param {Boolean}  [options.circular]                Determines if the gallery behaves in a circular never ending cycle.
+     *      @param {Boolean}  [options.fixImageSizes]           Specifies if the images should be forced to have the gallery size.
+     * @example
+     *     <ul class="ink-gallery-source">
+     *         <li class="hentry hmedia">
+     *             <a rel="enclosure" href="http://imgs.sapo.pt/ink/assets/imgs_gal/1.1.png">
+     *                 <img alt="s1" src="http://imgs.sapo.pt/ink/assets/imgs_gal/thumb1.png">
+     *             </a>
+     *             <a class="bookmark" href="http://imgs.sapo.pt/ink/assets/imgs_gal/1.1.png">
+     *                 <span class="entry-title">s1</span>
+     *             </a>
+     *             <span class="entry-content"><p>hello world 1</p></span>
+     *         </li>
+     *         <li class="hentry hmedia">
+     *             <a rel="enclosure" href="http://imgs.sapo.pt/ink/assets/imgs_gal/1.2.png">
+     *                 <img alt="s1" src="http://imgs.sapo.pt/ink/assets/imgs_gal/thumb2.png">
+     *             </a>
+     *             <a class="bookmark" href="http://imgs.sapo.pt/ink/assets/imgs_gal/1.2.png">
+     *                 <span class="entry-title">s2</span>
+     *             </a>
+     *             <span class="entry-content"><p>hello world 2</p></span>
+     *         </li>
+     *     </ul>
+     *     <script>
+     *         Ink.requireModules(['Ink.Dom.Selector_1','Ink.UI.Gallery_1'],function( Selector, Gallery ){
+     *             var galleryElement = Ink.s('ul.ink-gallery-source');
+     *             var galleryObj = new Gallery( galleryElement );
+     *         });
+     *     </script>
+     */
+    var Gallery = function(selector, options) {
+
+        this._element = Aux.elOrSelector(selector, '1st argument');
+
+        this._options = Ink.extendObj({
+            fullImageMaxWidth:   600,
+            fullImageMaxHeight:  400,
+            thumbnailMaxWidth:   106,
+            layout:              0,
+            circular:            false,
+            fixImageSizes:       false
+        }, Element.data(this._element));
+
+        this._options = Ink.extendObj(this._options, options || {});
+
+        this._handlers = {
+            navClick:        Ink.bindEvent(this._onNavClick,this),
+            paginationClick: Ink.bindEvent(this._onPaginationClick,this),
+            thumbsClick:     Ink.bindEvent(this._onThumbsClick,this),
+            focusBlur:       Ink.bindEvent(this._onFocusBlur,this),
+            keyDown:         Ink.bindEvent(this._onKeyDown,this)
+        };
+
+        this._isFocused = false;
+        this._model = [];
+
+        if (this._options.model instanceof Array) {
+            this._model = this._options.model;
+            this._createdFrom = 'JSON';
+        }
+        else if (this._element.nodeName.toLowerCase() === 'ul') {
+            this._createdFrom = 'DOM';
+        }
+        else {
+            throw new TypeError('You must pass a selector expression/DOM element as 1st option or provide a model on 2nd argument!');
+        }
+
+        this._index      = 0;
+        this._thumbIndex = 0;
+
+        if( !isNaN(this._options.layout) ){
+
+            this._options.layout = parseInt(this._options.layout,10);
+            if (this._options.layout === 0) {
+                this._showThumbs            = false;
+                this._showDescription       = false;
+                this._paginationHasPrevNext = false;
+            }
+            else if (this._options.layout === 1 || this._options.layout === 2 || this._options.layout === 3) {
+                this._showThumbs            = true;
+                this._showDescription       = true;
+                this._paginationHasPrevNext = true;
+            }
+            else {
+                throw new TypeError('supported layouts are 0-3!');
+            }
+        }
+
+        if (this._element.getAttribute('data-fix-image-sizes') !== null) {
+            this._options.fixImageSizes = true;
+        }
+
+        this._init();
+    };
+
+    Gallery.prototype = {
+
+        /**
+         * Init function called from the constructor.
+         *
+         * @method  _init
+         * @private
+         */
+        _init: function() {
+            // extract model
+            if (this._createdFrom === 'DOM') {
+                this._extractModelFromDOM();
+            }
+
+            // generate and apply DOM
+            var el = this._generateMarkup();
+            var parentEl = this._element.parentNode;
+
+            if (!this._notFirstInit) {
+                Aux.storeIdAndClasses(this._element, this);
+                this._notFirstInit = true;
+            }
+
+            parentEl.insertBefore(el, this._element);
+            parentEl.removeChild(this._element);
+            this._element = el;
+
+            Aux.restoreIdAndClasses(this._element, this);
+
+            // subscribe events
+            Event.observe(this._paginationEl, 'click',     this._handlers.paginationClick);
+            Event.observe(this._navEl,        'click',     this._handlers.navClick);
+
+            if (this._showThumbs) {
+                Event.observe(this._thumbsUlEl,   'click',     this._handlers.thumbsClick);
+            }
+
+            Event.observe(this._element,      'mouseover', this._handlers.focusBlur);
+            Event.observe(this._element,      'mouseout',  this._handlers.focusBlur);
+            Event.observe(document,           'keydown',   this._handlers.keyDown);
+
+            Aux.registerInstance(this, this._element, 'gallery');
+        },
+
+        /**
+         * Updates the model from the UL representation
+         *
+         * @method _extractModelFromDOM
+         * @private
+         */
+        _extractModelFromDOM: function() {
+            /*global console:false */
+            var m = [];
+            var dims;
+
+            var liEls = Selector.select('> li', this._element);
+            InkArray.each(liEls,function(liEl) {
+                try {
+                    var d = {
+                        image_full:  '',
+                        image_thumb: '',
+                        title_text:  '',
+                        title_link:  '',
+                        description: '',
+                        content_overlay: document.createDocumentFragment()
+                    };
+
+                    var enclosureAEl       = Selector.select('> a[rel=enclosure]',          liEl)[0];
+                    var thumbImgEl         = Selector.select('> img',                       enclosureAEl)[0];
+                    var bookmarkAEl        = Selector.select('> a[class=bookmark]',         liEl)[0];
+                    var titleSpanEl        = Selector.select('span[class=entry-title]',     liEl)[0];
+                    var entryContentSpanEl = Selector.select('> span[class=entry-content]', liEl)[0];
+                    var contentOverlayEl   = Selector.select('> .content-overlay',          liEl)[0];
+
+                    dims = enclosureAEl.getAttribute('data-dims');
+                    if (dims !== null) {
+                        dims = dims.split(',');
+                        dims[0] = parseInt(dims[0], 10);
+                        dims[1] = parseInt(dims[1], 10);
+                    }
+                    if (dims && !isNaN(dims[0]) && !isNaN(dims[1])) { d.dims = dims; }
+
+                    d.image_full  = enclosureAEl.getAttribute('href');
+                    d.image_thumb = thumbImgEl.getAttribute('src');
+                    if (bookmarkAEl) {
+                        d.title_link  = bookmarkAEl.getAttribute('href');
+                    }
+                    d.title_text  = titleSpanEl.innerHTML;
+                    if (entryContentSpanEl) {
+                        d.description = entryContentSpanEl.innerHTML;
+                    }
+
+                    if(contentOverlayEl){
+                        d.content_overlay.appendChild(contentOverlayEl);
+                    }
+
+                    m.push(d);
+                } catch(ex) {
+                    console.error('problematic element:');
+                    console.error(liEl);
+                    console.error(ex);
+                    throw new Error('Problem parsing gallery data from DOM!');
+                }
+            });
+
+            this._model = m;
+        },
+
+        /**
+         * Returns the top element for the gallery DOM representation
+         *
+         * @method _generateMarkup
+         * @private
+         * @return {DOMElement} Returns the Gallery element totally rendered.
+         */
+        _generateMarkup: function() {
+            /*jshint maxstatements:80 */
+            var el = document.createElement('div');
+            el.className = 'ink-gallery';
+
+            var stageEl = document.createElement('div');
+            stageEl.className = 'stage';
+
+            // nav
+            var navEl = document.createElement('nav');
+            navEl.innerHTML = [
+                '<ul class="unstyled">',
+                    '<li><a href="#" class="next"></a></li>',
+                    '<li><a href="#" class="previous"></a></li>',
+                '</ul>'
+            ].join('');
+            this._navEl = navEl;
+
+            // slider
+            var sliderEl = document.createElement('div');
+            sliderEl.className = 'slider';
+
+            var ulEl = document.createElement('ul');
+            this._sliderUlEl = ulEl;
+
+            var that = this;
+
+            var W = this._options.fullImageMaxWidth;
+            var H = this._options.fullImageMaxHeight;
+
+            InkArray.each(this._model,function(d, i) {
+                var liEl = document.createElement('li');
+                var imgEl = document.createElement('img');
+                imgEl.setAttribute('name', 'image ' + (i + 1));
+                imgEl.setAttribute('src',  d.image_full);
+                imgEl.setAttribute('alt',  d.title_text);
+                //imgEl.style.maxWidth = that._options.fullImageMaxWidth + 'px';
+                //imgEl.setAttribute('width', that._options.fullImageMaxWidth);       // TODO?
+                liEl.appendChild(imgEl);
+
+                if(d.content_overlay){
+                    if(d.content_overlay.nodeType === 1 || d.content_overlay.nodeType === 11){
+                        d.content_overlay = liEl.appendChild(d.content_overlay);
+                    } else if(typeof d.content_overlay === 'string'){
+                        var contentOverlayEl = document.createElement('div');
+
+                        contentOverlayEl.className = 'content-overlay';
+                        contentOverlayEl.innerHTML = d.content_overlay;
+
+                        d.content_overlay = liEl.appendChild(contentOverlayEl);
+                    }
+                }
+
+                ulEl.appendChild(liEl);
+
+                if (that._options.fixImageSizes) {
+                    var dimsCb = function(dims) {
+                        //console.log(this, dims);
+                        var imgEl = this.img;
+                        var data  = this.data;
+
+                        if (!data.dims) { data.dims = dims; }
+
+                        var dims2 = maximizeBox([W, H], dims);
+
+                        var w = dims2[0];
+                        var h = dims2[1];
+                        var dw = Math.floor( (W - w)/2 );
+                        var dh = Math.floor( (H - h)/2 );
+
+                        if (w !== W || h !== H) {
+                            imgEl.setAttribute('width',  w);
+                            imgEl.setAttribute('height', h);
+
+                            var s = imgEl.style;
+                            if (dw > 0) { s.paddingLeft   = dw + 'px'; }
+                            if (dh > 0) { s.paddingBottom = dh + 'px'; }
+                        }
+                    };
+
+                    if (d.dims) { dimsCb.call( {img:imgEl, data:d}, d.dims); }
+                    else {        getDimsAsync({img:imgEl, data:d}, dimsCb); }
+                }
+            });
+
+            sliderEl.appendChild(ulEl);
+            this._sliderEl = sliderEl;
+
+            // description
+            var articleTextDivEl;
+            if (this._showDescription) {
+                var d = this._model[this._index];
+                articleTextDivEl = document.createElement('div');
+                articleTextDivEl.className = ['article_text', 'example' + (this._options.layout === 3 ? 2 : this._options.layout)].join(' ');
+                if (d.title_link) {
+                    articleTextDivEl.innerHTML = ['<h1><a href="', d.title_link, '">', d.title_text, '</a></h1>', d.description].join('');
+                }
+                else {
+                    articleTextDivEl.innerHTML = ['<h1>', d.title_text, '</h1>', d.description].join('');
+                }
+                this._articleTextDivEl = articleTextDivEl;
+            }
+
+            // thumbs
+            var thumbsDivEl;
+            if (this._showThumbs) {
+                thumbsDivEl = document.createElement('div');
+                thumbsDivEl.className = 'thumbs';
+                ulEl = document.createElement('ul');
+                ulEl.className = 'unstyled';
+
+                InkArray.each(this._model,function(d, i) {
+                    var liEl = document.createElement('li');
+                    var aEl = document.createElement('a');
+                    aEl.setAttribute('href', '#');
+                    var imgEl = document.createElement('img');
+                    imgEl.setAttribute('name', 'thumb ' + (i + 1));
+                    imgEl.setAttribute('src', d.image_thumb);
+                    imgEl.setAttribute('alt', (i + 1));
+                    var spanEl = document.createElement('span');
+                    spanEl.innerHTML = d.title_text;
+                    aEl.appendChild(imgEl);
+                    aEl.appendChild(spanEl);
+                    liEl.appendChild(aEl);
+                    ulEl.appendChild(liEl);
+                });
+                thumbsDivEl.appendChild(ulEl);
+
+                this._thumbsDivEl = thumbsDivEl;
+                this._thumbsUlEl = ulEl;
+            }
+
+
+            // pagination
+            var paginationEl = document.createElement('div');
+            paginationEl.className = 'pagination';
+
+            var aEl;
+            if (this._paginationHasPrevNext) {
+                aEl = document.createElement('a');
+                aEl.setAttribute('href', '#');
+                aEl.className = 'previous';
+                paginationEl.appendChild(aEl);
+            }
+
+            InkArray.each(this._model,function(d, i) {
+                var aEl = document.createElement('a');
+                aEl.setAttribute('href', '#');
+                aEl.setAttribute('data-index', i);
+                if (i === that._index) { aEl.className = 'active'; }
+                paginationEl.appendChild(aEl);
+            });
+
+            if (this._paginationHasPrevNext) {
+                aEl = document.createElement('a');
+                aEl.setAttribute('href', '#');
+                aEl.className = 'next';
+                paginationEl.appendChild(aEl);
+            }
+
+            this._paginationEl = paginationEl;
+
+            // last appends...
+            if (this._options.layout === 0) {
+                stageEl.appendChild(navEl);
+                stageEl.appendChild(sliderEl);
+                stageEl.appendChild(paginationEl);
+                el.appendChild(stageEl);
+            }
+            else if (this._options.layout === 1 || this._options.layout === 2 || this._options.layout === 3) {
+                stageEl.appendChild(navEl);
+                stageEl.appendChild(sliderEl);
+                stageEl.appendChild(articleTextDivEl);
+                el.appendChild(stageEl);
+
+                if (this._options.layout === 3) {
+                    //this._thumbsUlEl.appendChild(paginationEl);
+                    this._thumbsUlEl.className = 'thumbs unstyled';
+                    Css.addClassName(el, 'rightNav');
+                    el.appendChild(this._thumbsUlEl);
+                }
+                else {
+                    thumbsDivEl.appendChild(paginationEl);
+                    el.appendChild(thumbsDivEl);
+                }
+            }
+
+            this._swipeDir = 'x';
+            this._swipeThumbsDir = this._options.layout === 0 ? '' : (this._options.layout === 3 ? 'y' : 'x');
+
+            if (Swipe._supported) {
+                new Swipe(el, {
+                    callback:    Ink.bind(function(sw, o) {
+                        var th =              this._isMeOrParent(o.target, this._thumbsUlEl);
+                        var sl = th ? false : this._isMeOrParent(o.target, el);//this._sliderUlEl);
+                        if ( (!th && !sl) || (th && !this._swipeThumbsDir) ) { return; }
+                        if ( (sl && o.axis !== this._swipeDir) || (th && o.axis !== this._swipeThumbsDir) ) { return; }
+                        if (o.dr[0] < 0) { if (th) { this.thumbNext();     } else { this.next();     } }
+                        else {             if (th) { this.thumbPrevious(); } else { this.previous(); } }
+                    },this),
+                    maxDuration: 0.4,
+                    minDist:     50
+                });
+            }
+
+            return el;
+        },
+
+        /**
+         * Verifies if a given element is equals to its parent
+         *
+         * @method _isMeOrParent
+         * @param  {DOMElement}  el       Element to be compared with the parent element
+         * @param  {DOMElement}  parentEl Parent element to be compared with the element
+         * @return {Boolean|undefined}          In case the 'el' variable is not defined, it returns undefined. Otherwise, it will return true or false depending on the comparison.
+         * @private
+         */
+        _isMeOrParent: function(el, parentEl) {
+            if (!el) {return;}
+            do {
+                if (el === parentEl) { return true; }
+                el = el.parentNode;
+            } while (el);
+            return false;
+        },
+
+        /**
+         * Navigation click handler
+         *
+         * @method _onNavClick
+         * @param {Event} ev
+         * @private
+         */
+        _onNavClick: function(ev) {
+            var tgtEl = Event.element(ev);
+            var delta;
+            if      (Css.hasClassName(tgtEl, 'previous')) { delta = -1; }
+            else if (Css.hasClassName(tgtEl, 'next')) {     delta =  1; }
+            else { return; }
+
+            Event.stop(ev);
+            this.goTo(delta, true);
+        },
+
+        /**
+         * Pagination click handler
+         *
+         * @method _onPaginationClick
+         * @param {Event} ev
+         * @private
+         */
+        _onPaginationClick: function(ev) {
+            var tgtEl = Event.element(ev);
+            var i = tgtEl.getAttribute('data-index');
+            var isRelative = false;
+            if      (Css.hasClassName(tgtEl, 'previous')) { i = -1; isRelative = true; }
+            else if (Css.hasClassName(tgtEl, 'next')) {     i =  1; isRelative = true; }
+            else if (i === null) { return; }
+            else { i = parseInt(i, 10); }
+            Event.stop(ev);
+
+            if (isRelative) { this.thumbGoTo(i, true); }
+            else {            this.goTo(i);            }
+        },
+
+        /**
+         * Thumbs click handler
+         *
+         * @method _onThumbsClick
+         * @param {Event} ev
+         * @private
+         */
+        _onThumbsClick: function(ev) {
+            var tgtEl = Event.element(ev);
+            if      (tgtEl.nodeName.toLowerCase() === 'img') {}
+            else if (tgtEl.nodeName.toLowerCase() === 'span') {
+                tgtEl = Selector.select('> img', tgtEl.parentNode)[0];
+            }
+            else { return; }
+
+            Event.stop(ev);
+            var i = parseInt(tgtEl.getAttribute('alt'), 10) - 1;
+            this.goTo(i);
+        },
+
+        /**
+         * Focus handler
+         *
+         * @method _onFocusBlur
+         * @param  {Event} ev
+         * @private
+         */
+        _onFocusBlur: function(ev) {
+            this._isFocused = (ev.type === 'mouseover');
+        },
+
+        /**
+         * Key handler
+         *
+         * @method _onKeyDown
+         * @param  {Event} ev
+         * @private
+         */
+        _onKeyDown: function(ev) {
+            if (!this._isFocused) { return; }
+            var kc = ev.keyCode;
+            if      (kc === 37) { this.previous(); }
+            else if (kc === 39) { this.next();     }
+            else { return; }
+            Event.stop(ev);
+        },
+
+        /**
+         * Validates the number of the item against the gallery items.
+         *
+         * @method _validateValue
+         * @param  {Number}  i  The number of the item being validated
+         * @param  {Boolean} [isRelative]
+         * @param  {Boolean} [isThumb]
+         * @return {Number|Boolean}
+         * @private
+         */
+        _validateValue: function(i, isRelative, isThumb) {
+            // check arguments
+            if (!Aux.isInteger(i)) {
+                throw new TypeError('1st parameter must be an integer number!');
+            }
+            if ( isRelative !== undefined &&
+                 isRelative !== false     &&
+                 isRelative !== true ) {
+                throw new TypeError('2nd parameter must either be boolean or ommitted!');
+            }
+
+            var val = isThumb ? this._thumbIndex : this._index;
+
+            // compute new index
+            if (isRelative) { i += val; }
+
+            if (this._options.circular) {
+                if      (i < 0) {                   i = this._model.length - 1; }
+                else if (i >= this._model.length) { i = 0;                      }
+            }
+            else {
+                if (i < 0 || i >= this._model.length || i === val) { return false; }
+            }
+
+            return i;
+        },
+
+
+
+        /**************
+         * PUBLIC API *
+         **************/
+
+        /**
+         * Returns the index of the current image
+         *
+         * @method getIndex
+         * @return {Number} Index of the current image
+         * @public
+         */
+        getIndex: function() {
+            return this._index;
+        },
+
+        /**
+         * Returns the number of images in the gallery
+         *
+         * @method getLength
+         * @return {Number} Number of images in the gallery
+         * @public
+         */
+        getLength: function() {
+            return this._model.length;
+        },
+
+        /**
+         * Moves gallery to the nth - 1 image
+         *
+         * @method goTo
+         * @param  {Number} i Absolute or relative index
+         * @param  {Boolean} [isRelative] pass true for relative movement, otherwise absolute
+         * @public
+         */
+        goTo: function(i, isRelative) {
+            i = this._validateValue(i, isRelative, false);
+            if (i === false) { return; }
+            this._index = i;
+
+            // update DOM representation
+            var paginationAEls = Selector.select('> a', this._paginationEl);
+            var that = this;
+            InkArray.each(paginationAEls,function(aEl, i) {
+                Css.setClassName(aEl, 'active', (i - (that._paginationHasPrevNext ? 1 : 0)) === that._index);
+            });
+
+            this._sliderUlEl.style.marginLeft = ['-', this._options.fullImageMaxWidth * this._index, 'px'].join('');
+
+            if (this._showDescription) {
+                var d = this._model[this._index];
+                if (d.title_link) {
+                    this._articleTextDivEl.innerHTML = ['<h1><a href="', d.title_link, '">', d.title_text, '</a></h1>', d.description].join('');
+                }
+                else {
+                    this._articleTextDivEl.innerHTML = ['<h1>', d.title_text, '</h1>', d.description].join('');
+                }
+            }
+        },
+
+        /**
+         * Moves gallery to the nth - 1 thumb
+         *
+         * @method thumbGoTo
+         * @param  {Number} i Absolute or relative index
+         * @param  {Boolean} [isRelative] pass true for relative movement, otherwise absolute
+         * @public
+         */
+        thumbGoTo: function(i, isRelative) {
+            i = this._validateValue(i, isRelative, true);
+            if (i === false) { return; }
+            this._thumbIndex = i;
+
+            // update DOM representation
+            var prop = 'margin' + (this._swipeThumbsDir === 'x' ? 'Left' : 'Top');
+            this._thumbsUlEl.style[prop] = ['-', this._options.thumbnailMaxWidth * this._thumbIndex, 'px'].join('');
+        },
+
+        /**
+         * Move to the previous image
+         *
+         * @method previous
+         * @public
+         */
+        previous: function() {
+            this.goTo(-1, true);
+        },
+
+        /**
+         * Move to the next image
+         *
+         * @method next
+         * @public
+         */
+        next: function() {
+            this.goTo(1, true);
+        },
+
+        /**
+         * Move to the previous thumb
+         *
+         * @method thumbPrevious
+         * @public
+         */
+        thumbPrevious: function() {
+            this.thumbGoTo(-1, true);
+        },
+
+        /**
+         * Move to the next thumb
+         *
+         * @method thumbNext
+         * @public
+         */
+        thumbNext: function() {
+            this.thumbGoTo(1, true);
+        },
+
+        /**
+         * Unregisters the component and removes its markup from the DOM
+         *
+         * @method destroy
+         * @public
+         */
+        destroy: Aux.destroyComponent
+
+    };
+
+    return Gallery;
+
+});