1// --------------------------------- 2// ---------- SimpleMarquee ---------- 3// --------------------------------- 4//Copyright (C) 2016 Fabian Valle 5//An easy to implement marquee plugin. I know its easy because even I can use it. 6//Forked from: https://github.com/conradfeyt/Simple-Marquee 7//Re-Written by: Fabian Valle (www.fabian-valle.com) (www.obliviocompany.com) 8// 9// ------------------------ 10// Structure // 11// 12// *********************************** - marque-container - ************************************* 13// * * 14// * ******************************* ****************************************************** * 15// * * * * * * 16// * * - marquee-content-sibling - * * - marquee-content - * * 17// * * * * * * 18// * ******************************* ****************************************************** * 19// * * 20// ********************************************************************************************** 21// 22//// Usage // 23// 24// Only need to call the createMarquee() function, 25// if desired, pass through the following paramaters: 26// 27// $1 duration: controls the speed at which the marquee moves 28// 29// $2 padding: right margin between consecutive marquees. 30// 31// $3 marquee_class: the actual div or span that will be used to create the marquee - 32// multiple marquee items may be created using this item's content. 33// This item will be removed from the dom 34// 35// $4 container_class: the container div in which the marquee content will animate. 36// 37// $5 marquee-content-sibling : (optional argument) a sibling item to the marqueed item that 38// affects the end point position and available space inside the 39// container. 40// 41// $6 hover: Boolean to indicate whether pause on hover should is required. 42 43;(function ($, window, document, undefined){ 44 var pluginName = 'SimpleMarquee'; 45 46 function Plugin (element, options) { 47 this.element = element; 48 this._name = pluginName; 49 this._defaults = $.fn.SimpleMarquee.defaults; 50 this.settings = $.extend( {}, this._defaults, options ); 51 this.marqueeSpawned = []; 52 this.marqueeHovered = false; 53 this.documentHasFocus = false; 54 // 55 this.counter = 0; 56 57 this.timeLeft = 0; 58 this.currentPos = 0; 59 this.distanceLeft = 0; 60 this.totalDistance = 0; 61 this.contentWidth = 0; 62 this.endPoint = 0; 63 this.duration = 0; 64 this.hovered = false; 65 this.padding = 0; 66 67 68 this.init(); 69 } 70 function marqueeObj(newElement){ 71 this.el=newElement; 72 this.counter=0; 73 this.name=""; 74 this.timeTop=0; 75 this.currentPos=0; 76 this.distanceTop=0; 77 this.totalDistance=0; 78 this.contentWidth=0; 79 this.endPoint=0; 80 this.duration=0; 81 this.hovered=false; 82 this.padding=0; 83 } 84 //methods for plugin 85 $.extend(Plugin.prototype, { 86 87 // Initialization logic 88 init: function () { 89 this.buildCache(); 90 this.bindEvents(); 91 var config = this.settings; 92 //init marquee 93 if($(config.marquee_class).width() == 0){ 94 console.error('FATAL: marquee css or children css not correct. Width is either set to 0 or the element is collapsing. Make sure overflow is set on the marquee, and the children are postitioned relatively'); 95 return; 96 } 97 98 if(typeof $(config.marquee_class) === 'undefined'){
99 console.error('FATAL: marquee class not valid'); 100 return; 101 } 102 103 if(typeof $(config.container_class) === 'undefined'){ 104 console.error('FATAL: marquee container class not valid'); 105 return; 106 } 107 108 if(config.sibling_class != 0 && typeof $(config.sibling_class) === 'undefined'){ 109 console.error('FATAL: sibling class container class not valid'); 110 return; 111 } 112 113 if (config.autostart) 114 { 115 this.documentHasFocus = true; 116 } 117 //create the Marquee 118 this.createMarquee(); 119 }, 120 121 // Remove plugin instance completely 122 destroy: function() { 123 this.unbindEvents(); 124 this.$element.removeData(); 125 }, 126 127 // Cache DOM nodes for performance 128 buildCache: function () { 129 this.$element = $(this.element); 130 }, 131 132 // Bind events that trigger methods 133 bindEvents: function() { 134 var plugin = this; 135 $(window).on('focus',function(){ 136 plugin.documentHasFocus = true; 137 for (var key in plugin.marqueeSpawned){ 138 plugin.marqueeManager(plugin.marqueeSpawned[key]); 139 } 140 }); 141 $(window).on('blur',function(){ 142 plugin.documentHasFocus = false; 143 for (var key in plugin.marqueeSpawned){ 144 plugin.marqueeSpawned[key].el.clearQueue().stop(); 145 plugin.marqueeSpawned[key].hovered = true; 146 } 147 }); 148 149 }, 150 151 // Unbind events that trigger methods 152 unbindEvents: function() { 153 $(window).off('blur focus'); 154 }, 155 getPosition: function(elName){ 156 var plugin = this; 157 var config = plugin.settings; 158 this.currentPos = parseInt($(elName).css(config.direction)); 159 return this.currentPos; 160 }, 161 createMarquee: function(){ 162 var plugin = this; 163 var config = plugin.settings; 164 var marqueeContent = $(config.marquee_class).html(); 165 var containerWidth = $(config.container_class).width(); 166 var contentWidth = $(config.marquee_class).width(); 167 168 var widthToIgnore = 0; 169 if (config.sibling_class != 0){ 170 widthToIgnore = $(config.sibling_class).width(); 171 } 172 173 var spawnAmount = Math.ceil(containerWidth / contentWidth); 174 175 $(config.marquee_class).remove(); 176 177 if(spawnAmount<=2){ 178 spawnAmount = 3; 179 } else { 180 spawnAmount++; 181 } 182 183 var totalContentWidth = (contentWidth + config.padding)*spawnAmount; 184 185 var endPoint = -(totalContentWidth - containerWidth); 186 187 var totalDistance = containerWidth - endPoint; 188 189 190 if (config.velocity !== 0 ) { 191 config.duration = totalDistance / config.velocity; 192 } 193 194 for (var i = 0; i < spawnAmount; i++) { 195 196 var newElement = false; 197 198 if(config.hover == true){ 199 200 201 newElement = $('<div class="marquee-' + (i+1) + '">' + marqueeContent + '</div>') 202 .mouseenter(function() { 203 204 205 if ((plugin.documentHasFocus == true) && (plugin.marqueeHovered == false)){ 206 plugin.marqueeHovered = true; 207 208 for (var key in plugin.marqueeSpawned){ 209 plugin.marqueeSpawned[key].el.clearQueue().stop(); 210 plugin.marqueeSpawned[key].hovered = true; 211 } 212 213 214 } 215 216 }) 217 .mouseleave(function() { 218 219 220 if ((plugin.documentHasFocus == true) && (plugin.marqueeHovered == true)){ 221 222 for (var key in plugin.marqueeSpawned){ 223 plugin.marqueeManager(plugin.marqueeSpawned[key]); 224 } 225 226 plugin.marqueeHovered = false;
227 } 228 }); 229 230 } else { 231 232 newElement = $('<div class="marquee-' + (i+1) + '">' + marqueeContent + '</div>') ; 233 234 } 235 236 plugin.marqueeSpawned[i] = new marqueeObj(newElement); 237 238 $(config.container_class).append(newElement); 239 240 plugin.marqueeSpawned[i].currentPos = (widthToIgnore + (contentWidth*i))+(config.padding*i); //initial positioning 241 plugin.marqueeSpawned[i].name = '.marquee-'+(i+1); 242 243 plugin.marqueeSpawned[i].totalDistance = totalDistance; 244 plugin.marqueeSpawned[i].containerWidth = containerWidth; 245 plugin.marqueeSpawned[i].contentWidth = contentWidth; 246 plugin.marqueeSpawned[i].endPoint = endPoint; 247 plugin.marqueeSpawned[i].duration = config.duration; 248 plugin.marqueeSpawned[i].padding = config.padding; 249 250 plugin.marqueeSpawned[i].el.css(config.direction, plugin.marqueeSpawned[i].currentPos+config.padding +'px'); //setting left according to postition 251 252 if (plugin.documentHasFocus == true){ 253 plugin.marqueeManager(plugin.marqueeSpawned[i]); 254 } 255 256 } 257 //end for 258 259 if(document.hasFocus()){ 260 plugin.documentHasFocus = true; 261 }else{ 262 plugin.documentHasFocus = false; 263 } 264 265 }, 266 marqueeManager: function(marqueed_el){ 267 var plugin = this; 268 var elName = marqueed_el.name; 269 var config = plugin.settings; 270 271 if (marqueed_el.hovered == false) { 272 273 if (marqueed_el.counter > 0) { //this is not the first loop 274 275 marqueed_el.timeLeft = marqueed_el.duration; 276 marqueed_el.el.css(config.direction, marqueed_el.containerWidth +'px'); //setting margin 277 marqueed_el.currentPos = marqueed_el.containerWidth; 278 marqueed_el.distanceLeft = marqueed_el.totalDistance - (marqueed_el.containerWidth - plugin.getPosition(elName)); 279 280 } else { // this is the first loop 281 282 marqueed_el.timeLeft = (((marqueed_el.totalDistance - (marqueed_el.containerWidth - plugin.getPosition(elName)))/ marqueed_el.totalDistance)) * marqueed_el.duration; 283 } 284 285 } else { 286 marqueed_el.hovered = false; 287 marqueed_el.currentPos = parseInt(marqueed_el.el.css(config.direction)); 288 marqueed_el.distanceLeft = marqueed_el.totalDistance - (marqueed_el.containerWidth - plugin.getPosition(elName)); 289 marqueed_el.timeLeft = (((marqueed_el.totalDistance - (marqueed_el.containerWidth - marqueed_el.currentPos))/ marqueed_el.totalDistance)) * marqueed_el.duration; 290 } 291 292 plugin.marqueeAnim(marqueed_el); 293 }, 294 marqueeAnim: function(marqueeObject){ 295 var plugin = this; 296 var config = plugin.settings; 297 marqueeObject.counter++; 298 marqueeObject.el.clearQueue().animate( 299 {[config.direction]: marqueeObject.endPoint+'px'}, 300 marqueeObject.timeLeft, 301 'linear', 302 function(){ 303 plugin.marqueeManager(marqueeObject); 304 }); 305 }, 306 callback: function() { 307 // Cache onComplete option 308 var onComplete = this.settings.onComplete; 309 310 if ( typeof onComplete === 'function' ) { 311 onComplete.call(this.element); 312 } 313 } 314 315 }); 316 //end methods for plugin 317 318 $.fn.SimpleMarquee = function (options) { 319 this.each(function() { 320 if ( !$.data( this, "plugin_" + pluginName ) ) { 321 $.data( this, "plugin_" + pluginName, new Plugin( this, options ) ); 322 } 323 }); 324 return this; 325 }; 326 $.fn.SimpleMarquee.defaults = { 327 autostart: true, 328 property: 'value', 329 onComplete: null, 330 duration: 20000, 331 padding: 10, 332 marquee_class: '.marquee',
333 container_class: '.simple-marquee-container', 334 sibling_class: 0, 335 hover: true, 336 velocity: 0, 337 direction: 'left' 338 }; 339 340})( jQuery, window, document );
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.