https://matexmotors.com/Content/assets/plugins/vertical-scroll/jquery.bootstrap.newsbox.js

1/*
2 * jQuery Bootstrap News Box v1.0.1
3 * 
4 * Copyright 2014, Dragan Mitrovic
5 * email: [email protected]
6 * Free to use and abuse under the MIT license.
7 * http://www.opensource.org/licenses/mit-license.php
8 */
9
10//Utility
11if (typeof Object.create !== 'function') {
12    //Douglas Crockford inheritance function
13    Object.create = function (obj) {
14        function F() { };
15        F.prototype = obj;
16        return new F();
17    };
18}
19
20(function ($, w, d, undefined) {
21
22    var NewsBox = {
23
24        init: function ( options, elem ) {
25            //cache the references
26            var self = this;
27            self.elem = elem;
28            self.$elem = $( elem );
29            
30            self.newsTagName = self.$elem.find(":first-child").prop('tagName');
31            self.newsClassName = self.$elem.find(":first-child").attr('class');
32
33            self.timer = null;
34            self.resizeTimer = null; // used with window.resize event 
35            self.animationStarted = false;
36            self.isHovered = false;
37
38
39            if ( typeof options === 'string' ) {
40                //string was passed
41                if(console) {
42                    console.error("String property override is not supported");
43                }
44                throw ("String property override is not supported");
45            } else {
46                //object was passed
47                //extend user options overrides
48                self.options = $.extend( {}, $.fn.bootstrapNews.options, options );
49                
50                self.prepareLayout();
51
52
53                //autostart animation
54                if(self.options.autoplay) {
55                    self.animate();
56                }
57
58                if ( self.options.navigation ) {
59                    self.buildNavigation();
60                }
61
62                //enable users to override the methods
63                if( typeof self.options.onToDo === 'function') {
64                    self.options.onToDo.apply(self, arguments);
65                }
66
67            }
68        },
69
70        prepareLayout: function() {
71            var self = this;
72
73            //checking mouse position
74                
75            $(self.elem).find('.'+self.newsClassName).on('mouseenter', function(){
76                self.onReset(true);
77            });
78
79            $(self.elem).find('.'+self.newsClassName).on('mouseout', function(){
80                self.onReset(false);
81            });
82
83            //set news visible / hidden
84            $.map(self.$elem.find(self.newsTagName), function(newsItem, index){
85                if(index > self.options.newsPerPage - 1) {
86                    $(newsItem).hide();
87                } else {
88                    $(newsItem).show();
89                }
90            });
91
92            //prevent user to select more news that it actualy have
93
94            if( self.$elem.find(self.newsTagName).length < self.options.newsPerPage ) {
95                self.options.newsPerPage = self.$elem.find(self.newsTagName).length;
96            }
97            
98            //get height of the very first self.options.newsPerPage news
99            var height = 0;
100
101            $.map(self.$elem.find(self.newsTagName), function( newsItem, index ) {
102                if ( index < self.options.newsPerPage ) {
103                    height = parseInt(height) + parseInt($(newsItem).height()) + 10;
104                }
105            });
106
107            $(self.elem).css({"overflow-y": "hidden", "height": height});
108
109            //recalculate news box height for responsive interfaces
110            $( w ).resize(function() {
111                if ( self.resizeTimer !== null ) {
112                    clearTimeout( self.resizeTimer );
113                }
114                self.resizeTimer = setTimeout( function() {
115                  self.prepareLayout();
116                }, 200 );
117            });
118
119        },
120
121        findPanelObject: function() { 
122            var panel = this.$elem;
123
124            while ( panel.parent() !== undefined ) {
125                panel = panel.parent();
126                if ( panel.parent().hasClass('panel') ) { 
127                    return panel.parent();
128                }
129            }
130
131            return undefined;
132        },
133
134        buildNavigation: function() { 
135            var panel = this.findPanelObject();
136            if( panel ) {
137                var nav = '<ul class="pagination pull-right" style="margin: 0px;">' +
138                             '<li><a href="#" class="prev"><span class="glyphicon glyphicon-chevron-down"></span></a></li>' +
139                             '<li><a href="#" class="next"><span class="glyphicon glyphicon-chevron-up"></span></a></li>' +
140                           '</ul><div class="clearfix"></div>';
141
142
143                var footer = $(panel).find(".panel-footer")[0];
144                if( footer ) {
145                    $(footer).append(nav);
146                } else {
147                    $(panel).append('<div class="panel-footer">' + nav + '</div>');
148                }
149
150                var self = this;
151                $(panel).find('.prev').on('click', function(ev){
152                    ev.preventDefault();
153                    self.onPrev();
154                });
155
156                $(panel).find('.next').on('click', function(ev){
157                    ev.preventDefault();
158                    self.onNext();
159                });
160
161            }
162        },
163
164        onStop: function() {
165            
166        },
167
168        onPause: function() {
169            var self = this;
170            self.isHovered = true;
171            if(this.options.autoplay && self.timer) {
172                clearTimeout(self.timer);
173            }
174        },
175
176        onReset: function(status) {
177            var self = this;
178            if(self.timer) {
179                clearTimeout(self.timer);
180            }
181
182            if(self.options.autoplay) {
183                self.isHovered = status;
184                self.animate();
185            }
186        },
187
188        animate: function() {
189            var self = this;
190            self.timer = setTimeout(function() {
191                
192                if ( !self.options.pauseOnHover ) {
193                    self.isHovered = false;

194                }
195
196                if (! self.isHovered) {
197                     if(self.options.direction === 'up') {
198                        self.onNext();
199                     } else {
200                        self.onPrev();
201                     }
202                } 
203            }, self.options.newsTickerInterval);
204        },
205
206        onPrev: function() {
207            
208            var self = this;
209
210            if ( self.animationStarted ) {
211                return false;
212            }
213
214            self.animationStarted = true;
215
216            var html = '<' + self.newsTagName + ' style="display:none;" class="' + self.newsClassName + '">' + $(self.$elem).find(self.newsTagName).last().html() + '</' + self.newsTagName + '>';
217            $(self.$elem).prepend(html);
218            $(self.$elem).find(self.newsTagName).first().slideDown(self.options.animationSpeed, function(){
219                $(self.$elem).find(self.newsTagName).last().remove();
220            });
221
222            $(self.$elem).find(self.newsTagName +':nth-child(' + parseInt(self.options.newsPerPage + 1) + ')').slideUp(self.options.animationSpeed, function(){
223                self.animationStarted = false;
224                self.onReset(self.isHovered);
225            });
226
227            $(self.elem).find('.'+self.newsClassName).on('mouseenter', function(){
228                self.onReset(true);
229            });
230
231            $(self.elem).find('.'+self.newsClassName).on('mouseout', function(){
232                self.onReset(false);
233            });
234        },
235
236        onNext: function() {
237            var self = this;
238
239            if ( self.animationStarted ) {
240                return false;
241            }
242
243            self.animationStarted = true;
244
245            var html = '<' + self.newsTagName + ' style="display:none;" class=' + self.newsClassName + '>' + $(self.$elem).find(self.newsTagName).first().html() + '</' + self.newsTagName + '>';
246            $(self.$elem).append(html);
247
248            $(self.$elem).find(self.newsTagName).first().slideUp(self.options.animationSpeed, function(){
249                $(this).remove();
250            });
251
252            $(self.$elem).find(self.newsTagName +':nth-child(' + parseInt(self.options.newsPerPage + 1) + ')').slideDown(self.options.animationSpeed, function(){
253                self.animationStarted = false;
254                self.onReset(self.isHovered);
255            });
256
257            $(self.elem).find('.'+self.newsClassName).on('mouseenter', function(){
258                self.onReset(true);
259            });
260
261            $(self.elem).find('.'+self.newsClassName).on('mouseout', function(){
262                self.onReset(false);
263            });
264        }
265    };
266
267    $.fn.bootstrapNews = function ( options ) {
268        //enable multiple DOM object selection (class selector) + enable chaining like $(".class").bootstrapNews().chainingMethod()
269        return this.each( function () {
270
271            var newsBox = Object.create( NewsBox );
272
273            newsBox.init( options, this );
274            //console.log(newsBox);
275
276        });
277    };
278
279    $.fn.bootstrapNews.options = {
280        newsPerPage: 4,
281        navigation: true,
282        autoplay: true,
283        direction:'up',
284        animationSpeed: 'normal',
285        newsTickerInterval: 4000, //4 secs
286        pauseOnHover: true,
287        onStop: null,
288        onPause: null,
289        onReset: null,
290        onPrev: null,
291        onNext: null,
292        onToDo: null
293    };
294
295})(jQuery, window, document);