https://rascalpowermobility.com/js/owl.carousel.thumbs.js

1/**
2 * Thumbs Plugin
3 * @version 2.0.0
4 * @author Gijs Rogé
5 * @license The MIT License (MIT)
6 */
7(function ($, window, document, undefined) {
8    'use strict';
9
10    /**
11     * Creates the thumbs plugin.
12     * @class The thumbs Plugin
13     * @param {Owl} carousel - The Owl Carousel
14     */
15    var Thumbs = function (carousel) {
16
17
18        /**
19         * Reference to the core.
20         * @protected
21         * @type {Owl}
22         */
23        this.owl = carousel;
24
25
26        /**
27         * All DOM elements for thumbnails
28         * @protected
29         * @type {Object}
30         */
31        this._thumbcontent = [];
32
33
34        /**
35         * Instance identiefier
36         * @type {number}
37         * @private
38         */
39        this._identifier = 0;
40
41
42        /**
43         * Return current item regardless of clones
44         * @protected
45         * @type {Object}
46         */
47        this.owl_currentitem = this.owl.options.startPosition;
48
49
50        /**
51         * The carousel element.
52         * @type {jQuery}
53         */
54        this.$element = this.owl.$element;
55
56
57        /**
58         * All event handlers.
59         * @protected
60         * @type {Object}
61         */
62        this._handlers = {
63            'prepared.owl.carousel': $.proxy(function (e) {
64                if (e.namespace && this.owl.options.thumbs && !this.owl.options.thumbImage && !this.owl.options.thumbsPrerendered && !this.owl.options.thumbImage) {
65                    if ($(e.content).find('[data-thumb]').attr('data-thumb') !== undefined) {
66                        this._thumbcontent.push($(e.content).find('[data-thumb]').attr('data-thumb'));
67                    }
68                } else if (e.namespace && this.owl.options.thumbs && this.owl.options.thumbImage) {
69                    var innerImage = $(e.content).find('img');
70                    this._thumbcontent.push(innerImage);
71                }
72            }, this),
73
74            'initialized.owl.carousel': $.proxy(function (e) {
75                if (e.namespace && this.owl.options.thumbs) {
76                    this.render();
77                    this.listen();
78                    this._identifier = this.owl.$element.data('slider-id');
79                    this.setActive();
80                }
81            }, this),
82
83            'changed.owl.carousel': $.proxy(function (e) {
84                if (e.namespace && e.property.name === 'position' && this.owl.options.thumbs) {
85                    this._identifier = this.owl.$element.data('slider-id');
86                    this.setActive();
87                }
88            }, this)
89        };
90
91        // set default options
92        this.owl.options = $.extend({}, Thumbs.Defaults, this.owl.options);
93
94        // register the event handlers
95        this.owl.$element.on(this._handlers);
96    };
97
98
99    /**
100     * Default options.
101     * @public
102     */
103    Thumbs.Defaults = {
104        thumbs: true,
105        thumbImage: false,
106        thumbContainerClass: 'owl-thumbs',
107        thumbItemClass: 'owl-thumb-item',
108        moveThumbsInside: false
109    };
110
111
112    /**
113     * Listen for thumbnail click
114     * @protected
115     */
116    Thumbs.prototype.listen = function () {
117
118        //set default options
119        var options = this.owl.options;
120
121        if (options.thumbsPrerendered) {
122            this._thumbcontent._thumbcontainer = $('.' + options.thumbContainerClass);
123        }
124
125        //check what thumbitem has been clicked and move slider to that item
126        $(this._thumbcontent._thumbcontainer).on('click', this._thumbcontent._thumbcontainer.children(), $.proxy(function (e) {
127
128            // find relative slider
129            this._identifier = $(e.target).closest('.' + options.thumbContainerClass).data('slider-id');
130
131            // get index of clicked thumbnail
132            var index = $(e.target).parent().is(this._thumbcontent._thumbcontainer) ? $(e.target).index() : $(e.target).closest('.'+options.thumbItemClass).index();
133
134            if (options.thumbsPrerendered) {
135                // slide to slide :)
136                $('[data-slider-id=' + this._identifier + ']').trigger('to.owl.carousel', [index, options.dotsSpeed, true]);
137            } else {
138                this.owl.to(index, options.dotsSpeed);
139            }
140
141            e.preventDefault();
142        }, this));
143    };
144
145
146    /**
147     * Builds thumbnails
148     * @protected
149     */
150    Thumbs.prototype.render = function () {
151
152        //set default options
153        var options = this.owl.options;
154
155        //create thumbcontainer
156        if (!options.thumbsPrerendered) {
157            this._thumbcontent._thumbcontainer = $('<div>').addClass(options.thumbContainerClass).appendTo(this.$element);
158        } else {
159            this._thumbcontent._thumbcontainer = $('.' + options.thumbContainerClass + '');
160            if(options.moveThumbsInside){
161                this._thumbcontent._thumbcontainer.appendTo(this.$element);
162            }
163        }
164
165        //create thumb items
166        var i;
167        if (!options.thumbImage) {
168            for (i = 0; i < this._thumbcontent.length; ++i) {
169                this._thumbcontent._thumbcontainer.append('<button class=' + options.thumbItemClass + '>' + this._thumbcontent[i] + '</button>');
170            }
171        } else {
172            for (i = 0; i < this._thumbcontent.length; ++i) {
173                this._thumbcontent._thumbcontainer.append('<button class=' + options.thumbItemClass + '><img src="' + this._thumbcontent[i].attr('src') + '" alt="' + this._thumbcontent[i].attr('alt') + '" /></button>');
174            }
175        }
176    };
177
178
179    /**
180     * Updates active class on thumbnails
181     * @protected
182     */
183    Thumbs.prototype.setActive = function () {
184
185        // get startslide
186        this.owl_currentitem = this.owl._current - (this.owl._clones.length / 2);
187        if (this.owl_currentitem === this.owl._items.length) {
188            this.owl_currentitem = 0;
189        }
190
191        //set default options
192        var options = this.owl.options;
193
194        // set relative thumbnail container
195        var thumbContainer = options.thumbsPrerendered ? $('.' + options.thumbContainerClass + '[data-slider-id="' + this._identifier + '"]') : this._thumbcontent._thumbcontainer;
196        thumbContainer.children().filter('.active').removeClass('active');
197        thumbContainer.children().eq(this.owl_currentitem).addClass('active');
198    };
199
200
201    /**
202     * Destroys the plugin.
203     * @public
204     */
205    Thumbs.prototype.destroy = function () {
206        var handler, property;
207        for (handler in this._handlers) {
208            this.owl.$element.off(handler, this._handlers[handler]);
209        }
210        for (property in Object.getOwnPropertyNames(this)) {
211            typeof this[property] !== 'function' && (this[property] = null);
212        }
213    };
214
215    $.fn.owlCarousel.Constructor.Plugins.Thumbs = Thumbs;
216
217})(window.Zepto || window.jQuery, window, document);