123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508 |
- /*!
- * webTicker 2.2.0
- * Examples and documentation at:
- * http://jonmifsud.com/open-source/jquery/jquery-webticker/
- * 2011 Jonathan Mifsud
- * Version: 2.2.0 (15-FEB-2016)
- * Dual licensed under the Creative Commons and DonationWare licenses:
- * http://creativecommons.org/licenses/by-nc/3.0/
- * https://github.com/jonmifsud/Web-Ticker/blob/master/licence.md
- * Requires:
- * jQuery v1.4.2 or later
- *
- */
- (function( $ ){
- var cssTransitionsSupported = (function() {
- var s = document.createElement('p').style,
- v = ['ms','O','Moz','Webkit'];
- if( s.transition === '' ){ return true; }
- while( v.length ){
- if( v.pop() + 'Transition' in s ){
- return true;
- }
- }
- return false;
- })();
- function getStripWidth($strip){
- var stripWidth=0;
- $strip.children('li').each(function(){
- stripWidth += $(this).outerWidth( true );
- });
- return stripWidth;
- }
- function getItemWidth($strip){
- return Math.max.apply(Math, $strip.children().map(function(){ return $(this).width(); }).get());
- }
- function animationSettings($strip){
- var settings = $strip.data('settings') || { direction: 'left', speed: 50 };
- var first = $strip.children().first();
- var distance = Math.abs(-$strip.css(settings.direction).replace('px','').replace('auto','0') - first.outerWidth(true));
- var timeToComplete = distance * 1000 / settings.speed;
- var animationSettings = {};
- animationSettings[settings.direction] = $strip.css(settings.direction).replace('px','').replace('auto','0') - distance;
- return {'css':animationSettings,'time':timeToComplete};
- }
- function moveFirstElement($strip){
- var settings = $strip.data('settings') || { direction: 'left' };
- $strip.css('transition-duration','0s').css(settings.direction, '0');
- var $first = $strip.children().first();
- if ($first.hasClass('webticker-init')){
- $first.remove();
- }
- else{
- $strip.children().last().after($first);
- }
- }
- function scrollitems($strip,moveFirst){
- var settings = $strip.data('settings') || { direction: 'left' };
- if (typeof moveFirst === 'undefined'){
- moveFirst = false;
- }
- if (moveFirst){
- moveFirstElement($strip);
- }
- var options = animationSettings($strip);
- $strip.animate(options.css, options.time, 'linear', function(){
- $strip.css(settings.direction, '0');
- scrollitems($strip,true);
- });
- }
- function css3Scroll($strip,moveFirst){
- if (typeof moveFirst === 'undefined'){
- moveFirst = false;
- }
- if (moveFirst){
- moveFirstElement($strip);
- }
- var options = animationSettings($strip);
- var time = options.time/1000;
- time += 's';
- $strip.css(options.css).css('transition-duration',time);
- }
- function updaterss(rssurl,type,$strip){
- var list = [];
- $.get(rssurl, function(data) {
- var $xml = $(data);
- $xml.find('item').each(function() {
- var $this = $(this),
- item = {
- title: $this.find('title').text(),
- link: $this.find('link').text()
- };
- var listItem = '<li><a href="'+item.link+'"">'+item.title+'</a></li>';
- list += listItem;
- //Do something with item here...
- });
- $strip.webTicker('update', list, type);
- });
- }
- function initialize($strip, init){
- if ($strip.children('li').length < 1) {
- if (window.console) {
- // console.log('no items to initialize');
- }
- return false;
- }
- var settings = $strip.data('settings');
- settings.duplicateLoops = settings.duplicateLoops || 0;
- $strip.width('auto');
- //Find the real width of all li elements
- var stripWidth = 0;
- $strip.children('li').each(function(){
- stripWidth += $(this).outerWidth( true );
- });
- var height = $strip.find('li:first').height();
- var itemWidth;
- // if(stripWidth < $strip.parent().width() || $strip.children().length == 1){
- //if duplicate items
- if (settings.duplicate){
- //Check how many times to duplicate depending on width.
- itemWidth = getItemWidth($strip);
- var duplicateLoops = 0;
- while (stripWidth - itemWidth < $strip.parent().width() || $strip.children().length === 1 || duplicateLoops < settings.duplicateLoops){
- var listItems = $strip.children().clone();
- $strip.append(listItems);
- stripWidth = 0;
- stripWidth = getStripWidth($strip);
- itemWidth = getItemWidth($strip);
- duplicateLoops++;
- }
- settings.duplicateLoops = duplicateLoops;
- }else {
- //if fill with empty padding
- var emptySpace = $strip.parent().width() - stripWidth;
- emptySpace += $strip.find('li:first').width();
- // $strip.append('<li class="ticker-spacer" style="width:'+emptySpace+'px;height:'+height+'px;"></li>');
- if ($strip.find('.ticker-spacer').length > 0){
- // console.log('test');
- $strip.find('.ticker-spacer').width(emptySpace);
- }
- else{
- // console.log('test2');
- $strip.append('<li class="ticker-spacer" style="float: '+settings.direction+';width:'+emptySpace+'px;height:'+height+'px;"></li>');
- }
- // }
- }
- if (settings.startEmpty && init){
- $strip.prepend('<li class="webticker-init" style="float: '+settings.direction+';width:'+$strip.parent().width()+'px;height:'+height+'px;"></li>');
- }
- //extra width to be able to move items without any jumps $strip.find("li:first").width()
- stripWidth = 0;
- stripWidth = getStripWidth($strip);
- $strip.width(stripWidth+200);
- var widthCompare = 0;
- widthCompare = getStripWidth($strip);
- //loop to find weather the items inside the list are actually bigger then the size of the whole list. Increments in 200px.
- //only required when a single item is bigger then the whole list
- while (widthCompare >= $strip.width()){
- $strip.width($strip.width()+200);
- widthCompare = 0;
- widthCompare = getStripWidth($strip);
- }
- return true;
- }
- var methods = {
- init : function( settings ) { // THIS
- settings = jQuery.extend({
- speed: 50, //pixels per second
- direction: 'left',
- moving: true,
- startEmpty: true,
- duplicate: false,
- rssurl: false,
- hoverpause: true,
- rssfrequency: 0,
- updatetype: 'reset',
- transition: 'linear',
- height: '30px',
- maskleft: '', // maskleft and maskright require a width setting in your css to work
- maskright: '',
- maskwidth: 0
- }, settings);
- //set data-ticker a unique ticker identifier if it does not exist
- return this.each(function(){
- jQuery(this).data('settings',settings);
- var $strip = jQuery(this);
- var $mask = $strip.wrap('<div class="mask"></div>');
- $mask.after('<span class="tickeroverlay-left"> </span><span class="tickeroverlay-right"> </span>');
- var $tickercontainer = $strip.parent().wrap('<div class="tickercontainer"></div>');
- var resizeEvt;
- $(window).resize(function() {
- clearTimeout(resizeEvt);
- resizeEvt = setTimeout(function() {
- console.log('window was resized');
- initialize($strip,false);
- }, 500);
- });
- //adding required css rules
-
- $strip.children('li').css('white-space','nowrap');
- $strip.children('li').css('float',settings.direction);
- $strip.children('li').css('padding','0 7px');
- $strip.children('li').css('line-height',settings.height);
- $mask.css('position','relative');
- $mask.css('overflow','hidden');
- $strip.closest('.tickercontainer').css('height', settings.height);
- $strip.closest('.tickercontainer').css('overflow', 'hidden');
- $strip.css('float',settings.direction);
- $strip.css('position','relative');
- $strip.css('font', 'bold 10px Verdana');
- $strip.css('list-style-type', 'none');
- $strip.css('margin', '0');
- $strip.css('padding', '0');
- if ((settings.maskleft !== '') && (settings.maskright !== '')){
- var backgroundimage='url("'+settings.maskleft+'")';
- $tickercontainer.find('.tickeroverlay-left').css('background-image',backgroundimage);
- $tickercontainer.find('.tickeroverlay-left').css('display','block');
- $tickercontainer.find('.tickeroverlay-left').css('pointer-events','none');
- $tickercontainer.find('.tickeroverlay-left').css('position','absolute');
- $tickercontainer.find('.tickeroverlay-left').css('z-index','30');
- $tickercontainer.find('.tickeroverlay-left').css('height',settings.height);
- $tickercontainer.find('.tickeroverlay-left').css('width',settings.maskwidth);
- $tickercontainer.find('.tickeroverlay-left').css('top','0');
- $tickercontainer.find('.tickeroverlay-left').css('left','-2px');
- backgroundimage='url("'+settings.maskright+'")';
- $tickercontainer.find('.tickeroverlay-right').css('background-image',backgroundimage);
- $tickercontainer.find('.tickeroverlay-right').css('display','block');
- $tickercontainer.find('.tickeroverlay-right').css('pointer-events','none');
- $tickercontainer.find('.tickeroverlay-right').css('position','absolute');
- $tickercontainer.find('.tickeroverlay-right').css('z-index','30');
- $tickercontainer.find('.tickeroverlay-right').css('height',settings.height);
- $tickercontainer.find('.tickeroverlay-right').css('width',settings.maskwidth);
- $tickercontainer.find('.tickeroverlay-right').css('top','0');
- $tickercontainer.find('.tickeroverlay-right').css('right','-2px');
- }
- else{
- $tickercontainer.find('.tickeroverlay-left').css('display','none');
- $tickercontainer.find('.tickeroverlay-right').css('display','none');
- }
- //adding the 'last' class will help for future duplicate functions
- $strip.children('li').last().addClass('last');
- var started = initialize($strip,true);
- if (settings.rssurl){
- updaterss(settings.rssurl,settings.type,$strip);
- if (settings.rssfrequency>0){
- window.setInterval(function(){updaterss(settings.rssurl,settings.type,$strip);},settings.rssfrequency*1000*60);
- }
- }
- if (cssTransitionsSupported){
- //fix for firefox not animating default transitions
- $strip.css('transition-timing-function',settings.transition);
- $strip.css('transition-duration','0s').css(settings.direction, '0');
- if (started){
- //if list has items and set up start scrolling
- css3Scroll($strip,false);
- }
- //started or not still bind on the transition end event so it works after update
- $strip.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend', function(event) {
- if (!$strip.is(event.target)) {
- return false;
- }
- css3Scroll($(this),true);
- });
- } else {
- if (started){
- //if list has items and set up start scrolling
- scrollitems($(this));
- }
- }
- if (settings.hoverpause){
- $strip.hover(function(){
- if (cssTransitionsSupported){
- var currentPosition = $(this).css(settings.direction);
- $(this).css('transition-duration','0s').css(settings.direction,currentPosition);
- } else{
- jQuery(this).stop();
- }
- },
- function(){
- if (jQuery(this).data('settings').moving){
- if (cssTransitionsSupported){
- css3Scroll($(this),false);
- // $(this).css("-webkit-animation-play-state", "running");
- } else {
- //usual continue stuff
- scrollitems($strip);
- }
- }
- });
- }
- });
- },
- stop : function( ) {
- var settings = $(this).data('settings');
- if (settings.moving){
- settings.moving = false;
- return this.each(function(){
- if (cssTransitionsSupported){
- var currentPosition = $(this).css(settings.direction);
- $(this).css('transition-duration','0s').css(settings.direction,currentPosition);
- } else{
- $(this).stop();
- }
- });
- }
- },
- cont : function( ) {
- var settings = $(this).data('settings');
- if (!settings.moving){
- settings.moving = true;
- return this.each(function(){
- if (cssTransitionsSupported){
- css3Scroll($(this),false);
- } else {
- scrollitems($(this));
- }
- });
- }
- },
- transition : function(transition){
- var $strip = $(this);
- if (cssTransitionsSupported){
- //fix for firefox not animating default transitions
- $strip.css('transition-timing-function',transition);
- }
- },
- update : function( list, type, insert, remove) {
- type = type || 'reset';
- if (typeof insert === 'undefined'){
- insert = true;
- }
- if (typeof remove === 'undefined'){
- remove = false;
- }
- if( typeof list === 'string' ) {
- list = $(list);
- }
- var $strip = $(this);
- $strip.webTicker('stop');
- var settings = $(this).data('settings');
- if (type === 'reset'){
- //this does a 'restart of the ticker'
- $strip.html(list);
- initialize($strip,true);
- } else if (type === 'swap'){
- var id;
- var match;
- var $listItem;
- var stripWidth;
- if (window.console) {
- // console.log('trying to update');
- }
- if ($strip.children('li').length < 1){
- //no <li> items found. Treat as new
- $strip.html(list);
- $strip.css(settings.direction, '0');
- initialize($strip,true);
- }
- else if (settings.duplicate === true)
- {
- // should the update be a 'hot-swap' or use replacement for IDs (in which case remove new ones)
- $strip.children('li').addClass('old');
- for (var i = list.length - 1; i >= 0; i--) {
- id = $(list[i]).data('update');
- match = $strip.find('[data-update="'+id+'"]');//should try find the id or data-attribute.
- if (match.length < 1){
- if (insert){
- //we need to move this item into the dom
- if ($strip.find('.ticker-spacer:first-child').length === 0 && $strip.find('.ticker-spacer').length > 0){
- $strip.children('li.ticker-spacer').before(list[i]);
- }
- else {
- //check for last class ...
- //$strip.append(list[i]));
- $listItem = $(list[i]);
- if(i===list.length-1)
- {
- $listItem.addClass('last');
- }
- $strip.find('last').after($listItem);
- $strip.find('last').removeClass('last');
- }
- }
- } else{
- $strip.find('[data-update="'+id+'"]').replaceWith(list[i]);
- }
- }
- $strip.children('li.webticker-init, li.ticker-spacer').removeClass('old');
- if (remove){
- $strip.children('li').remove('.old');
- }
- stripWidth = 0;
- stripWidth = getStripWidth($strip);
- $strip.width(stripWidth+200);
- //resetting $strip so that duplication works according to new width
-
- if ($strip.find('li.webticker-init').length < 1){ // checks if the strip's width is populated and handles the update accordingly
- settings.startEmpty=false;
- }
- $strip.html(list);
- //setting the css rules
- $strip.children('li').css('white-space','nowrap');
- $strip.children('li').css('float',settings.direction);
- $strip.children('li').css('padding','0 7px');
- $strip.children('li').css('line-height',settings.height);
- initialize($strip,true);
- }
- else
- {
- // should the update be a 'hot-swap' or use replacement for IDs (in which case remove new ones)
- $strip.children('li').addClass('old');
- for (var x = 0 ; x < list.length; x++) {
- id = $(list[x]).data('update');
- match = $strip.find('[data-update="'+id+'"]');//should try find the id or data-attribute.
- if (match.length < 1){
- if (insert){
- //we need to move this item into the dom
- if ($strip.find('.ticker-spacer:first-child').length === 0 && $strip.find('.ticker-spacer').length > 0){
- $strip.children('li.ticker-spacer').before(list[x]);
- }
- else {
- //check for last class ...
- //$strip.append(list[i]));
- $listItem = $(list[x]);
- if(x===list.length-1)
- {
- $listItem.addClass('last');
- }
- $strip.find('.old.last').after($listItem);
- $strip.find('.old.last').removeClass('last');
- }
- }
- } else {
- $strip.find('[data-update="'+id+'"]').replaceWith(list[x]);
- }
- }
- $strip.children('li.webticker-init, li.ticker-spacer').removeClass('old');
- //setting the css rules
- $strip.children('li').css('white-space','nowrap');
- $strip.children('li').css('float',settings.direction);
- $strip.children('li').css('padding','0 7px');
- $strip.children('li').css('line-height',settings.height);
- if (remove){
- $strip.children('li').remove('.old');
- }
- stripWidth = 0;
- stripWidth = getStripWidth($strip);
- $strip.width(stripWidth+200);
- }
- }
- $strip.webTicker('cont');
- }
- };
- $.fn.webTicker = function( method ) {
- // Method calling logic
- if ( methods[method] ) {
- return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
- } else if ( typeof method === 'object' || ! method ) {
- return methods.init.apply( this, arguments );
- } else {
- $.error( 'Method ' + method + ' does not exist on jQuery.webTicker' );
- }
- };
- })( jQuery );
|