MediaWiki: Common.js: Unterschied zwischen den Versionen
Aus Krötenwanderung
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 11: | Zeile 11: | ||
(function( | /** | ||
* jQuery.marquee - scrolling text like old marquee element | |||
* @author Aamir Afridi - aamirafridi(at)gmail(dot)com / http://aamirafridi.com/jquery/jquery-marquee-plugin | |||
*/ | |||
;(function(factory) { | |||
'use strict'; | |||
if (typeof define === 'function' && define.amd) { | |||
define(['jquery'], factory); | |||
} else if (typeof exports !== 'undefined') { | |||
module.exports = factory(require('jquery')); | |||
} else { | |||
factory(jQuery); | |||
} | |||
})(function($) { | |||
$.fn.marquee = function(options) { | |||
return this.each(function() { | |||
// Extend the options if any provided | |||
var o = $.extend({}, $.fn.marquee.defaults, options), | |||
$this = $(this), | |||
$marqueeWrapper, containerWidth, animationCss, verticalDir, elWidth, | |||
loopCount = 3, | |||
playState = 'animation-play-state', | |||
css3AnimationIsSupported = false, | |||
// Private methods | |||
_prefixedEvent = function(element, type, callback) { | |||
var pfx = ["webkit", "moz", "MS", "o", ""]; | |||
for (var p = 0; p < pfx.length; p++) { | |||
if (!pfx[p]) type = type.toLowerCase(); | |||
element.addEventListener(pfx[p] + type, callback, false); | |||
} | |||
}, | |||
_objToString = function(obj) { | |||
var tabjson = []; | |||
for (var p in obj) { | |||
if (obj.hasOwnProperty(p)) { | |||
tabjson.push(p + ':' + obj[p]); | |||
} | |||
} | |||
tabjson.push(); | |||
return '{' + tabjson.join(',') + '}'; | |||
}, | |||
_startAnimationWithDelay = function() { | |||
$this.timer = setTimeout(animate, o.delayBeforeStart); | |||
}, | |||
// Public methods | |||
methods = { | |||
pause: function() { | |||
if (css3AnimationIsSupported && o.allowCss3Support) { | |||
$marqueeWrapper.css(playState, 'paused'); | |||
} else { | |||
// pause using pause plugin | |||
if ($.fn.pause) { | |||
$marqueeWrapper.pause(); | |||
} | |||
} | |||
// save the status | |||
$this.data('runningStatus', 'paused'); | |||
// fire event | |||
$this.trigger('paused'); | |||
}, | |||
resume: function() { | |||
// resume using css3 | |||
if (css3AnimationIsSupported && o.allowCss3Support) { | |||
$marqueeWrapper.css(playState, 'running'); | |||
} else { | |||
// resume using pause plugin | |||
if ($.fn.resume) { | |||
$marqueeWrapper.resume(); | |||
} | |||
} | |||
// save the status | |||
$this.data('runningStatus', 'resumed'); | |||
// fire event | |||
$this.trigger('resumed'); | |||
}, | |||
toggle: function() { | |||
methods[$this.data('runningStatus') === 'resumed' ? 'pause' : 'resume'](); | |||
}, | |||
destroy: function() { | |||
// Clear timer | |||
clearTimeout($this.timer); | |||
// Unbind all events | |||
$this.find("*").addBack().off(); | |||
// Just unwrap the elements that has been added using this plugin | |||
$this.html($this.find('.js-marquee:first').html()); | |||
} | |||
}; | |||
// Check for methods | |||
if (typeof options === 'string') { | |||
if ($.isFunction(methods[options])) { | |||
// Following two IF statements to support public methods | |||
if (!$marqueeWrapper) { | |||
$marqueeWrapper = $this.find('.js-marquee-wrapper'); | |||
} | |||
if ($this.data('css3AnimationIsSupported') === true) { | |||
css3AnimationIsSupported = true; | |||
} | |||
methods[options](); | |||
} | |||
return; | |||
} | |||
/* Check if element has data attributes. They have top priority | |||
For details https://twitter.com/aamirafridi/status/403848044069679104 - Can't find a better solution :/ | |||
jQuery 1.3.2 doesn't support $.data().KEY hence writting the following */ | |||
var dataAttributes = {}, | |||
attr; | |||
$.each(o, function(key) { | |||
// Check if element has this data attribute | |||
attr = $this.attr('data-' + key); | |||
if (typeof attr !== 'undefined') { | |||
// Now check if value is boolean or not | |||
switch (attr) { | |||
case 'true': | |||
attr = true; | |||
break; | |||
case 'false': | |||
attr = false; | |||
break; | |||
} | |||
o[key] = attr; | |||
} | |||
}); | |||
// Reintroduce speed as an option. It calculates duration as a factor of the container width | |||
// measured in pixels per second. | |||
if (o.speed) { | |||
o.duration = parseInt($this.width(), 10) / o.speed * 1000; | |||
} | |||
// Shortcut to see if direction is upward or downward | |||
verticalDir = o.direction === 'up' || o.direction === 'down'; | |||
// no gap if not duplicated | |||
o.gap = o.duplicated ? parseInt(o.gap) : 0; | |||
// wrap inner content into a div | |||
$this.wrapInner('<div class="js-marquee"></div>'); | |||
// Make copy of the element | |||
var $el = $this.find('.js-marquee').css({ | |||
'margin-right': o.gap, | |||
'float': 'left' | |||
}); | |||
if (o.duplicated) { | |||
if (o.duplicateCount <= 0) { | |||
// If duplication enabled then the duplicate count must be a positive number | |||
o.duplicateCount = 1; | |||
} | |||
for (let duplicateLoop = 0; duplicateLoop < o.duplicateCount; duplicateLoop++) { | |||
$el.clone(true).appendTo($this); | |||
} | |||
} | |||
// wrap both inner elements into one div | |||
$this.wrapInner('<div style="width:100000px" class="js-marquee-wrapper"></div>'); | |||
// Save the reference of the wrapper | |||
$marqueeWrapper = $this.find('.js-marquee-wrapper'); | |||
// If direction is up or down, get the height of main element | |||
if (verticalDir) { | |||
var containerHeight = $this.height(); | |||
$marqueeWrapper.removeAttr('style'); | |||
$this.height(containerHeight); | |||
// Change the CSS for js-marquee element | |||
$this.find('.js-marquee').css({ | |||
'float': 'none', | |||
'margin-bottom': o.gap, | |||
'margin-right': 0 | |||
}); | |||
// Remove bottom margin from 2nd element if duplicated | |||
if (o.duplicated) { | |||
$this.find('.js-marquee:last').css({ | |||
'margin-bottom': 0 | |||
}); | |||
} | |||
var elHeight = $this.find('.js-marquee:first').height() + o.gap; | |||
// adjust the animation duration according to the text length | |||
if (o.startVisible && !o.duplicated) { | |||
// Compute the complete animation duration and save it for later reference | |||
// formula is to: (Height of the text node + height of the main container / Height of the main container) * duration; | |||
o._completeDuration = ((parseInt(elHeight, 10) + parseInt(containerHeight, 10)) / parseInt(containerHeight, 10)) * o.duration; | |||
// formula is to: (Height of the text node / height of the main container) * duration | |||
o.duration = (parseInt(elHeight, 10) / parseInt(containerHeight, 10)) * o.duration; | |||
} else { | |||
// formula is to: (Height of the text node + height of the main container / Height of the main container) * duration; | |||
o.duration = ((parseInt(elHeight, 10) + parseInt(containerHeight, 10)) / parseInt(containerHeight, 10)) * o.duration; | |||
} | |||
} else { | |||
// Save the width of the each element so we can use it in animation | |||
elWidth = $this.find('.js-marquee:first').width() + o.gap; | |||
// container width | |||
containerWidth = $this.width(); | |||
// adjust the animation duration according to the text length | |||
if (o.startVisible && !o.duplicated) { | |||
// Compute the complete animation duration and save it for later reference | |||
// formula is to: (Width of the text node + width of the main container / Width of the main container) * duration; | |||
o._completeDuration = ((parseInt(elWidth, 10) + parseInt(containerWidth, 10)) / parseInt(containerWidth, 10)) * o.duration; | |||
// (Width of the text node / width of the main container) * duration | |||
o.duration = (parseInt(elWidth, 10) / parseInt(containerWidth, 10)) * o.duration; | |||
} else { | |||
// formula is to: (Width of the text node + width of the main container / Width of the main container) * duration; | |||
o.duration = ((parseInt(elWidth, 10) + parseInt(containerWidth, 10)) / parseInt(containerWidth, 10)) * o.duration; | |||
} | |||
} | |||
// if duplicated then reduce the duration | |||
if (o.duplicated) { | |||
o.duration = o.duration / 2; | |||
} | |||
if (o.allowCss3Support) { | |||
var elm = document.body || document.createElement('div'), | |||
animationName = 'marqueeAnimation-' + Math.floor(Math.random() * 10000000), | |||
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), | |||
animationString = 'animation', | |||
animationCss3Str = '', | |||
keyframeString = ''; | |||
// Check css3 support | |||
if (elm.style.animation !== undefined) { | |||
keyframeString = '@keyframes ' + animationName + ' '; | |||
css3AnimationIsSupported = true; | |||
} | |||
if (css3AnimationIsSupported === false) { | |||
for (var i = 0; i < domPrefixes.length; i++) { | |||
if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) { | |||
var prefix = '-' + domPrefixes[i].toLowerCase() + '-'; | |||
animationString = prefix + animationString; | |||
playState = prefix + playState; | |||
keyframeString = '@' + prefix + 'keyframes ' + animationName + ' '; | |||
css3AnimationIsSupported = true; | |||
break; | |||
} | |||
} | |||
} | |||
if (css3AnimationIsSupported) { | |||
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's infinite ' + o.css3easing; | |||
$this.data('css3AnimationIsSupported', true); | |||
} | |||
} | |||
var _rePositionVertically = function() { | |||
$marqueeWrapper.css('transform', 'translateY(' + (o.direction === 'up' ? containerHeight + 'px' : '-' + elHeight + 'px') + ')'); | |||
}, | |||
_rePositionHorizontally = function() { | |||
$marqueeWrapper.css('transform', 'translateX(' + (o.direction === 'left' ? containerWidth + 'px' : '-' + elWidth + 'px') + ')'); | |||
}; | |||
// if duplicated option is set to true than position the wrapper | |||
if (o.duplicated) { | |||
if (verticalDir) { | |||
if (o.startVisible) { | |||
$marqueeWrapper.css('transform', 'translateY(0)'); | |||
} else { | |||
$marqueeWrapper.css('transform', 'translateY(' + (o.direction === 'up' ? containerHeight + 'px' : '-' + ((elHeight * 2) - o.gap) + 'px') + ')'); | |||
} | |||
} else { | |||
if (o.startVisible) { | |||
$marqueeWrapper.css('transform', 'translateX(0)'); | |||
} else { | |||
$marqueeWrapper.css('transform', 'translateX(' + (o.direction === 'left' ? containerWidth + 'px' : '-' + ((elWidth * 2) - o.gap) + 'px') + ')'); | |||
} | |||
} | |||
// If the text starts out visible we can skip the two initial loops | |||
if (!o.startVisible) { | |||
loopCount = 1; | |||
} | |||
} else if (o.startVisible) { | |||
// We only have two different loops if marquee is duplicated and starts visible | |||
loopCount = 2; | |||
} else { | |||
if (verticalDir) { | |||
_rePositionVertically(); | |||
} else { | |||
_rePositionHorizontally(); | |||
} | |||
} | |||
// Animate recursive method | |||
var animate = function() { | |||
if (o.duplicated) { | |||
// When duplicated, the first loop will be scroll longer so double the duration | |||
if (loopCount === 1) { | |||
o._originalDuration = o.duration; | |||
if (verticalDir) { | |||
o.duration = o.direction === 'up' ? o.duration + (containerHeight / ((elHeight) / o.duration)) : o.duration * 2; | |||
} else { | |||
o.duration = o.direction === 'left' ? o.duration + (containerWidth / ((elWidth) / o.duration)) : o.duration * 2; | |||
} | |||
// Adjust the css3 animation as well | |||
if (animationCss3Str) { | |||
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's ' + o.css3easing; | |||
} | |||
loopCount++; | |||
} | |||
// On 2nd loop things back to normal, normal duration for the rest of animations | |||
else if (loopCount === 2) { | |||
o.duration = o._originalDuration; | |||
// Adjust the css3 animation as well | |||
if (animationCss3Str) { | |||
animationName = animationName + '0'; | |||
keyframeString = $.trim(keyframeString) + '0 '; | |||
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's 0s infinite ' + o.css3easing; | |||
} | |||
loopCount++; | |||
} | |||
} | |||
if (verticalDir) { | |||
if (o.duplicated) { | |||
// Adjust the starting point of animation only when first loops finishes | |||
if (loopCount > 2) { | |||
$marqueeWrapper.css('transform', 'translateY(' + (o.direction === 'up' ? 0 : '-' + elHeight + 'px') + ')'); | |||
} | |||
animationCss = { | |||
'transform': 'translateY(' + (o.direction === 'up' ? '-' + elHeight + 'px' : 0) + ')' | |||
}; | |||
} else if (o.startVisible) { | |||
// This loop moves the marquee out of the container | |||
if (loopCount === 2) { | |||
// Adjust the css3 animation as well | |||
if (animationCss3Str) { | |||
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's ' + o.css3easing; | |||
} | |||
animationCss = { | |||
'transform': 'translateY(' + (o.direction === 'up' ? '-' + elHeight + 'px' : containerHeight + 'px') + ')' | |||
}; | |||
loopCount++; | |||
} else if (loopCount === 3) { | |||
// Set the duration for the animation that will run forever | |||
o.duration = o._completeDuration; | |||
// Adjust the css3 animation as well | |||
if (animationCss3Str) { | |||
animationName = animationName + '0'; | |||
keyframeString = $.trim(keyframeString) + '0 '; | |||
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's 0s infinite ' + o.css3easing; | |||
} | |||
_rePositionVertically(); | |||
} | |||
} else { | |||
_rePositionVertically(); | |||
animationCss = { | |||
'transform': 'translateY(' + (o.direction === 'up' ? '-' + ($marqueeWrapper.height()) + 'px' : containerHeight + 'px') + ')' | |||
}; | |||
} | |||
} else { | |||
if (o.duplicated) { | |||
// Adjust the starting point of animation only when first loops finishes | |||
if (loopCount > 2) { | |||
$marqueeWrapper.css('transform', 'translateX(' + (o.direction === 'left' ? 0 : '-' + elWidth + 'px') + ')'); | |||
} | |||
animationCss = { | |||
'transform': 'translateX(' + (o.direction === 'left' ? '-' + elWidth + 'px' : 0) + ')' | |||
}; | |||
} else if (o.startVisible) { | |||
// This loop moves the marquee out of the container | |||
if (loopCount === 2) { | |||
// Adjust the css3 animation as well | |||
if (animationCss3Str) { | |||
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's ' + o.css3easing; | |||
} | |||
animationCss = { | |||
'transform': 'translateX(' + (o.direction === 'left' ? '-' + elWidth + 'px' : containerWidth + 'px') + ')' | |||
}; | |||
loopCount++; | |||
} else if (loopCount === 3) { | |||
// Set the duration for the animation that will run forever | |||
o.duration = o._completeDuration; | |||
// Adjust the css3 animation as well | |||
if (animationCss3Str) { | |||
animationName = animationName + '0'; | |||
keyframeString = $.trim(keyframeString) + '0 '; | |||
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's 0s infinite ' + o.css3easing; | |||
} | |||
_rePositionHorizontally(); | |||
} | |||
} else { | |||
_rePositionHorizontally(); | |||
animationCss = { | |||
'transform': 'translateX(' + (o.direction === 'left' ? '-' + elWidth + 'px' : containerWidth + 'px') + ')' | |||
}; | |||
} | |||
} | |||
// fire event | |||
$this.trigger('beforeStarting'); | |||
// If css3 support is available than do it with css3, otherwise use jQuery as fallback | |||
if (css3AnimationIsSupported) { | |||
// Add css3 animation to the element | |||
$marqueeWrapper.css(animationString, animationCss3Str); | |||
var keyframeCss = keyframeString + ' { 100% ' + _objToString(animationCss) + '}', | |||
$styles = $marqueeWrapper.find('style'); | |||
// Now add the keyframe animation to the marquee element | |||
if ($styles.length !== 0) { | |||
// Bug fixed for jQuery 1.3.x - Instead of using .last(), use following | |||
$styles.filter(":last").html(keyframeCss); | |||
} else { | |||
$('head').append('<style>' + keyframeCss + '</style>'); | |||
} | |||
// Animation iteration event | |||
_prefixedEvent($marqueeWrapper[0], "AnimationIteration", function() { | |||
$this.trigger('finished'); | |||
}); | |||
// Animation stopped | |||
_prefixedEvent($marqueeWrapper[0], "AnimationEnd", function() { | |||
animate(); | |||
$this.trigger('finished'); | |||
}); | |||
} else { | |||
// Start animating | |||
$marqueeWrapper.animate(animationCss, o.duration, o.easing, function() { | |||
// fire event | |||
$this.trigger('finished'); | |||
// animate again | |||
if (o.pauseOnCycle) { | |||
_startAnimationWithDelay(); | |||
} else { | |||
animate(); | |||
} | |||
}); | |||
} | |||
// save the status | |||
$this.data('runningStatus', 'resumed'); | |||
}; | |||
// bind pause and resume events | |||
$this.on('pause', methods.pause); | |||
$this.on('resume', methods.resume); | |||
if (o.pauseOnHover) { | |||
$this.on('mouseenter', methods.pause); | |||
$this.on('mouseleave', methods.resume); | |||
} | |||
// If css3 animation is supported than call animate method at once | |||
if (css3AnimationIsSupported && o.allowCss3Support) { | |||
animate(); | |||
} else { | |||
// Starts the recursive method | |||
_startAnimationWithDelay(); | |||
} | |||
}); | |||
}; // End of Plugin | |||
// Public: plugin defaults options | |||
$.fn.marquee.defaults = { | |||
// If you wish to always animate using jQuery | |||
allowCss3Support: true, | |||
// works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function | |||
css3easing: 'linear', | |||
// requires jQuery easing plugin. Default is 'linear' | |||
easing: 'linear', | |||
// pause time before the next animation turn in milliseconds | |||
delayBeforeStart: 1000, | |||
// 'left', 'right', 'up' or 'down' | |||
direction: 'left', | |||
// true or false - should the marquee be duplicated to show an effect of continues flow | |||
duplicated: false, | |||
// number of duplicates to create, default is 1 | |||
duplicateCount: 1, | |||
// duration in milliseconds of the marquee in milliseconds | |||
duration: 5000, | |||
// Speed allows you to set a relatively constant marquee speed regardless of the width of the containing element. Speed is measured in pixels per second. | |||
speed: 0, | |||
// gap in pixels between the tickers | |||
gap: 20, | |||
// on cycle pause the marquee | |||
pauseOnCycle: false, | |||
// on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause | |||
pauseOnHover: false, | |||
// the marquee is visible initially positioned next to the border towards it will be moving | |||
startVisible: false | |||
}; | |||
}); |
Version vom 19. Februar 2025, 16:52 Uhr
var kurs_x = 0;
function kurs() {
kurs_x++;
kurs_x = kurs_x % 992;
$('.kroeten-footer-kurs').css('background-position', kurs_x + 'px');
setTimeout(kurs, 20);
}
//kurs();
/**
* jQuery.marquee - scrolling text like old marquee element
* @author Aamir Afridi - aamirafridi(at)gmail(dot)com / http://aamirafridi.com/jquery/jquery-marquee-plugin
*/
;(function(factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof exports !== 'undefined') {
module.exports = factory(require('jquery'));
} else {
factory(jQuery);
}
})(function($) {
$.fn.marquee = function(options) {
return this.each(function() {
// Extend the options if any provided
var o = $.extend({}, $.fn.marquee.defaults, options),
$this = $(this),
$marqueeWrapper, containerWidth, animationCss, verticalDir, elWidth,
loopCount = 3,
playState = 'animation-play-state',
css3AnimationIsSupported = false,
// Private methods
_prefixedEvent = function(element, type, callback) {
var pfx = ["webkit", "moz", "MS", "o", ""];
for (var p = 0; p < pfx.length; p++) {
if (!pfx[p]) type = type.toLowerCase();
element.addEventListener(pfx[p] + type, callback, false);
}
},
_objToString = function(obj) {
var tabjson = [];
for (var p in obj) {
if (obj.hasOwnProperty(p)) {
tabjson.push(p + ':' + obj[p]);
}
}
tabjson.push();
return '{' + tabjson.join(',') + '}';
},
_startAnimationWithDelay = function() {
$this.timer = setTimeout(animate, o.delayBeforeStart);
},
// Public methods
methods = {
pause: function() {
if (css3AnimationIsSupported && o.allowCss3Support) {
$marqueeWrapper.css(playState, 'paused');
} else {
// pause using pause plugin
if ($.fn.pause) {
$marqueeWrapper.pause();
}
}
// save the status
$this.data('runningStatus', 'paused');
// fire event
$this.trigger('paused');
},
resume: function() {
// resume using css3
if (css3AnimationIsSupported && o.allowCss3Support) {
$marqueeWrapper.css(playState, 'running');
} else {
// resume using pause plugin
if ($.fn.resume) {
$marqueeWrapper.resume();
}
}
// save the status
$this.data('runningStatus', 'resumed');
// fire event
$this.trigger('resumed');
},
toggle: function() {
methods[$this.data('runningStatus') === 'resumed' ? 'pause' : 'resume']();
},
destroy: function() {
// Clear timer
clearTimeout($this.timer);
// Unbind all events
$this.find("*").addBack().off();
// Just unwrap the elements that has been added using this plugin
$this.html($this.find('.js-marquee:first').html());
}
};
// Check for methods
if (typeof options === 'string') {
if ($.isFunction(methods[options])) {
// Following two IF statements to support public methods
if (!$marqueeWrapper) {
$marqueeWrapper = $this.find('.js-marquee-wrapper');
}
if ($this.data('css3AnimationIsSupported') === true) {
css3AnimationIsSupported = true;
}
methods[options]();
}
return;
}
/* Check if element has data attributes. They have top priority
For details https://twitter.com/aamirafridi/status/403848044069679104 - Can't find a better solution :/
jQuery 1.3.2 doesn't support $.data().KEY hence writting the following */
var dataAttributes = {},
attr;
$.each(o, function(key) {
// Check if element has this data attribute
attr = $this.attr('data-' + key);
if (typeof attr !== 'undefined') {
// Now check if value is boolean or not
switch (attr) {
case 'true':
attr = true;
break;
case 'false':
attr = false;
break;
}
o[key] = attr;
}
});
// Reintroduce speed as an option. It calculates duration as a factor of the container width
// measured in pixels per second.
if (o.speed) {
o.duration = parseInt($this.width(), 10) / o.speed * 1000;
}
// Shortcut to see if direction is upward or downward
verticalDir = o.direction === 'up' || o.direction === 'down';
// no gap if not duplicated
o.gap = o.duplicated ? parseInt(o.gap) : 0;
// wrap inner content into a div
$this.wrapInner('<div class="js-marquee"></div>');
// Make copy of the element
var $el = $this.find('.js-marquee').css({
'margin-right': o.gap,
'float': 'left'
});
if (o.duplicated) {
if (o.duplicateCount <= 0) {
// If duplication enabled then the duplicate count must be a positive number
o.duplicateCount = 1;
}
for (let duplicateLoop = 0; duplicateLoop < o.duplicateCount; duplicateLoop++) {
$el.clone(true).appendTo($this);
}
}
// wrap both inner elements into one div
$this.wrapInner('<div style="width:100000px" class="js-marquee-wrapper"></div>');
// Save the reference of the wrapper
$marqueeWrapper = $this.find('.js-marquee-wrapper');
// If direction is up or down, get the height of main element
if (verticalDir) {
var containerHeight = $this.height();
$marqueeWrapper.removeAttr('style');
$this.height(containerHeight);
// Change the CSS for js-marquee element
$this.find('.js-marquee').css({
'float': 'none',
'margin-bottom': o.gap,
'margin-right': 0
});
// Remove bottom margin from 2nd element if duplicated
if (o.duplicated) {
$this.find('.js-marquee:last').css({
'margin-bottom': 0
});
}
var elHeight = $this.find('.js-marquee:first').height() + o.gap;
// adjust the animation duration according to the text length
if (o.startVisible && !o.duplicated) {
// Compute the complete animation duration and save it for later reference
// formula is to: (Height of the text node + height of the main container / Height of the main container) * duration;
o._completeDuration = ((parseInt(elHeight, 10) + parseInt(containerHeight, 10)) / parseInt(containerHeight, 10)) * o.duration;
// formula is to: (Height of the text node / height of the main container) * duration
o.duration = (parseInt(elHeight, 10) / parseInt(containerHeight, 10)) * o.duration;
} else {
// formula is to: (Height of the text node + height of the main container / Height of the main container) * duration;
o.duration = ((parseInt(elHeight, 10) + parseInt(containerHeight, 10)) / parseInt(containerHeight, 10)) * o.duration;
}
} else {
// Save the width of the each element so we can use it in animation
elWidth = $this.find('.js-marquee:first').width() + o.gap;
// container width
containerWidth = $this.width();
// adjust the animation duration according to the text length
if (o.startVisible && !o.duplicated) {
// Compute the complete animation duration and save it for later reference
// formula is to: (Width of the text node + width of the main container / Width of the main container) * duration;
o._completeDuration = ((parseInt(elWidth, 10) + parseInt(containerWidth, 10)) / parseInt(containerWidth, 10)) * o.duration;
// (Width of the text node / width of the main container) * duration
o.duration = (parseInt(elWidth, 10) / parseInt(containerWidth, 10)) * o.duration;
} else {
// formula is to: (Width of the text node + width of the main container / Width of the main container) * duration;
o.duration = ((parseInt(elWidth, 10) + parseInt(containerWidth, 10)) / parseInt(containerWidth, 10)) * o.duration;
}
}
// if duplicated then reduce the duration
if (o.duplicated) {
o.duration = o.duration / 2;
}
if (o.allowCss3Support) {
var elm = document.body || document.createElement('div'),
animationName = 'marqueeAnimation-' + Math.floor(Math.random() * 10000000),
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
animationString = 'animation',
animationCss3Str = '',
keyframeString = '';
// Check css3 support
if (elm.style.animation !== undefined) {
keyframeString = '@keyframes ' + animationName + ' ';
css3AnimationIsSupported = true;
}
if (css3AnimationIsSupported === false) {
for (var i = 0; i < domPrefixes.length; i++) {
if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
var prefix = '-' + domPrefixes[i].toLowerCase() + '-';
animationString = prefix + animationString;
playState = prefix + playState;
keyframeString = '@' + prefix + 'keyframes ' + animationName + ' ';
css3AnimationIsSupported = true;
break;
}
}
}
if (css3AnimationIsSupported) {
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's infinite ' + o.css3easing;
$this.data('css3AnimationIsSupported', true);
}
}
var _rePositionVertically = function() {
$marqueeWrapper.css('transform', 'translateY(' + (o.direction === 'up' ? containerHeight + 'px' : '-' + elHeight + 'px') + ')');
},
_rePositionHorizontally = function() {
$marqueeWrapper.css('transform', 'translateX(' + (o.direction === 'left' ? containerWidth + 'px' : '-' + elWidth + 'px') + ')');
};
// if duplicated option is set to true than position the wrapper
if (o.duplicated) {
if (verticalDir) {
if (o.startVisible) {
$marqueeWrapper.css('transform', 'translateY(0)');
} else {
$marqueeWrapper.css('transform', 'translateY(' + (o.direction === 'up' ? containerHeight + 'px' : '-' + ((elHeight * 2) - o.gap) + 'px') + ')');
}
} else {
if (o.startVisible) {
$marqueeWrapper.css('transform', 'translateX(0)');
} else {
$marqueeWrapper.css('transform', 'translateX(' + (o.direction === 'left' ? containerWidth + 'px' : '-' + ((elWidth * 2) - o.gap) + 'px') + ')');
}
}
// If the text starts out visible we can skip the two initial loops
if (!o.startVisible) {
loopCount = 1;
}
} else if (o.startVisible) {
// We only have two different loops if marquee is duplicated and starts visible
loopCount = 2;
} else {
if (verticalDir) {
_rePositionVertically();
} else {
_rePositionHorizontally();
}
}
// Animate recursive method
var animate = function() {
if (o.duplicated) {
// When duplicated, the first loop will be scroll longer so double the duration
if (loopCount === 1) {
o._originalDuration = o.duration;
if (verticalDir) {
o.duration = o.direction === 'up' ? o.duration + (containerHeight / ((elHeight) / o.duration)) : o.duration * 2;
} else {
o.duration = o.direction === 'left' ? o.duration + (containerWidth / ((elWidth) / o.duration)) : o.duration * 2;
}
// Adjust the css3 animation as well
if (animationCss3Str) {
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's ' + o.css3easing;
}
loopCount++;
}
// On 2nd loop things back to normal, normal duration for the rest of animations
else if (loopCount === 2) {
o.duration = o._originalDuration;
// Adjust the css3 animation as well
if (animationCss3Str) {
animationName = animationName + '0';
keyframeString = $.trim(keyframeString) + '0 ';
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's 0s infinite ' + o.css3easing;
}
loopCount++;
}
}
if (verticalDir) {
if (o.duplicated) {
// Adjust the starting point of animation only when first loops finishes
if (loopCount > 2) {
$marqueeWrapper.css('transform', 'translateY(' + (o.direction === 'up' ? 0 : '-' + elHeight + 'px') + ')');
}
animationCss = {
'transform': 'translateY(' + (o.direction === 'up' ? '-' + elHeight + 'px' : 0) + ')'
};
} else if (o.startVisible) {
// This loop moves the marquee out of the container
if (loopCount === 2) {
// Adjust the css3 animation as well
if (animationCss3Str) {
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's ' + o.css3easing;
}
animationCss = {
'transform': 'translateY(' + (o.direction === 'up' ? '-' + elHeight + 'px' : containerHeight + 'px') + ')'
};
loopCount++;
} else if (loopCount === 3) {
// Set the duration for the animation that will run forever
o.duration = o._completeDuration;
// Adjust the css3 animation as well
if (animationCss3Str) {
animationName = animationName + '0';
keyframeString = $.trim(keyframeString) + '0 ';
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's 0s infinite ' + o.css3easing;
}
_rePositionVertically();
}
} else {
_rePositionVertically();
animationCss = {
'transform': 'translateY(' + (o.direction === 'up' ? '-' + ($marqueeWrapper.height()) + 'px' : containerHeight + 'px') + ')'
};
}
} else {
if (o.duplicated) {
// Adjust the starting point of animation only when first loops finishes
if (loopCount > 2) {
$marqueeWrapper.css('transform', 'translateX(' + (o.direction === 'left' ? 0 : '-' + elWidth + 'px') + ')');
}
animationCss = {
'transform': 'translateX(' + (o.direction === 'left' ? '-' + elWidth + 'px' : 0) + ')'
};
} else if (o.startVisible) {
// This loop moves the marquee out of the container
if (loopCount === 2) {
// Adjust the css3 animation as well
if (animationCss3Str) {
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's ' + o.delayBeforeStart / 1000 + 's ' + o.css3easing;
}
animationCss = {
'transform': 'translateX(' + (o.direction === 'left' ? '-' + elWidth + 'px' : containerWidth + 'px') + ')'
};
loopCount++;
} else if (loopCount === 3) {
// Set the duration for the animation that will run forever
o.duration = o._completeDuration;
// Adjust the css3 animation as well
if (animationCss3Str) {
animationName = animationName + '0';
keyframeString = $.trim(keyframeString) + '0 ';
animationCss3Str = animationName + ' ' + o.duration / 1000 + 's 0s infinite ' + o.css3easing;
}
_rePositionHorizontally();
}
} else {
_rePositionHorizontally();
animationCss = {
'transform': 'translateX(' + (o.direction === 'left' ? '-' + elWidth + 'px' : containerWidth + 'px') + ')'
};
}
}
// fire event
$this.trigger('beforeStarting');
// If css3 support is available than do it with css3, otherwise use jQuery as fallback
if (css3AnimationIsSupported) {
// Add css3 animation to the element
$marqueeWrapper.css(animationString, animationCss3Str);
var keyframeCss = keyframeString + ' { 100% ' + _objToString(animationCss) + '}',
$styles = $marqueeWrapper.find('style');
// Now add the keyframe animation to the marquee element
if ($styles.length !== 0) {
// Bug fixed for jQuery 1.3.x - Instead of using .last(), use following
$styles.filter(":last").html(keyframeCss);
} else {
$('head').append('<style>' + keyframeCss + '</style>');
}
// Animation iteration event
_prefixedEvent($marqueeWrapper[0], "AnimationIteration", function() {
$this.trigger('finished');
});
// Animation stopped
_prefixedEvent($marqueeWrapper[0], "AnimationEnd", function() {
animate();
$this.trigger('finished');
});
} else {
// Start animating
$marqueeWrapper.animate(animationCss, o.duration, o.easing, function() {
// fire event
$this.trigger('finished');
// animate again
if (o.pauseOnCycle) {
_startAnimationWithDelay();
} else {
animate();
}
});
}
// save the status
$this.data('runningStatus', 'resumed');
};
// bind pause and resume events
$this.on('pause', methods.pause);
$this.on('resume', methods.resume);
if (o.pauseOnHover) {
$this.on('mouseenter', methods.pause);
$this.on('mouseleave', methods.resume);
}
// If css3 animation is supported than call animate method at once
if (css3AnimationIsSupported && o.allowCss3Support) {
animate();
} else {
// Starts the recursive method
_startAnimationWithDelay();
}
});
}; // End of Plugin
// Public: plugin defaults options
$.fn.marquee.defaults = {
// If you wish to always animate using jQuery
allowCss3Support: true,
// works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
css3easing: 'linear',
// requires jQuery easing plugin. Default is 'linear'
easing: 'linear',
// pause time before the next animation turn in milliseconds
delayBeforeStart: 1000,
// 'left', 'right', 'up' or 'down'
direction: 'left',
// true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: false,
// number of duplicates to create, default is 1
duplicateCount: 1,
// duration in milliseconds of the marquee in milliseconds
duration: 5000,
// Speed allows you to set a relatively constant marquee speed regardless of the width of the containing element. Speed is measured in pixels per second.
speed: 0,
// gap in pixels between the tickers
gap: 20,
// on cycle pause the marquee
pauseOnCycle: false,
// on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
pauseOnHover: false,
// the marquee is visible initially positioned next to the border towards it will be moving
startVisible: false
};
});