Use javascript marquee by remysharp for information lines (4411d419) · Commits · derf / db-infoscreen

cgi/public/jquery-1.9.1.min.js

0 → 100644

+5 −0

File added.

Preview size limit exceeded, changes collapsed.

cgi/public/marquee.js

0 → 100644

+155 −0

Original line number	Diff line number	Diff line
		/**
		* author Remy Sharp
		* url http://remysharp.com/tag/marquee
		*/

		(function ($) {
		$.fn.marquee = function (klass) {
		var newMarquee = [],
		last = this.length;

		// works out the left or right hand reset position, based on scroll
		// behavior, current direction and new direction
		function getReset(newDir, marqueeRedux, marqueeState) {
		var behavior = marqueeState.behavior, width = marqueeState.width, dir = marqueeState.dir;
		var r = 0;
		if (behavior == 'alternate') {
		r = newDir == 1 ? marqueeRedux[marqueeState.widthAxis] - (width*2) : width;
		} else if (behavior == 'slide') {
		if (newDir == -1) {
		r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] : width;
		} else {
		r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] - (width*2) : 0;
		}
		} else {
		r = newDir == -1 ? marqueeRedux[marqueeState.widthAxis] : 0;
		}
		return r;
		}

		// single "thread" animation
		function animateMarquee() {
		var i = newMarquee.length,
		marqueeRedux = null,
		$marqueeRedux = null,
		marqueeState = {},
		newMarqueeList = [],
		hitedge = false;

		while (i--) {
		marqueeRedux = newMarquee[i];
		$marqueeRedux = $(marqueeRedux);
		marqueeState = $marqueeRedux.data('marqueeState');

		if ($marqueeRedux.data('paused') !== true) {
		// TODO read scrollamount, dir, behavior, loops and last from data
		marqueeRedux[marqueeState.axis] += (marqueeState.scrollamount * marqueeState.dir);

		// only true if it's hit the end
		hitedge = marqueeState.dir == -1 ? marqueeRedux[marqueeState.axis] <= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState) : marqueeRedux[marqueeState.axis] >= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState);

		if ((marqueeState.behavior == 'scroll' && marqueeState.last == marqueeRedux[marqueeState.axis]) \|\| (marqueeState.behavior == 'alternate' && hitedge && marqueeState.last != -1) \|\| (marqueeState.behavior == 'slide' && hitedge && marqueeState.last != -1)) {
		if (marqueeState.behavior == 'alternate') {
		marqueeState.dir *= -1; // flip
		}
		marqueeState.last = -1;

		$marqueeRedux.trigger('stop');

		marqueeState.loops--;
		if (marqueeState.loops === 0) {
		if (marqueeState.behavior != 'slide') {
		marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
		} else {
		// corrects the position
		marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir * -1, marqueeRedux, marqueeState);
		}

		$marqueeRedux.trigger('end');
		} else {
		// keep this marquee going
		newMarqueeList.push(marqueeRedux);
		$marqueeRedux.trigger('start');
		marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
		}
		} else {
		newMarqueeList.push(marqueeRedux);
		}
		marqueeState.last = marqueeRedux[marqueeState.axis];

		// store updated state only if we ran an animation
		$marqueeRedux.data('marqueeState', marqueeState);
		} else {
		// even though it's paused, keep it in the list
		newMarqueeList.push(marqueeRedux);
		}
		}

		newMarquee = newMarqueeList;

		if (newMarquee.length) {
		setTimeout(animateMarquee, 25);
		}
		}

		// TODO consider whether using .html() in the wrapping process could lead to loosing predefined events...
		this.each(function (i) {
		var $marquee = $(this),
		width = $marquee.attr('width') \|\| $marquee.width(),
		height = $marquee.attr('height') \|\| $marquee.height(),
		$marqueeRedux = $marquee.after('<div ' + (klass ? 'class="' + klass + '" ' : '') + 'style="display: block-inline; width: ' + width + 'px; height: ' + height + 'px; overflow: hidden;"><div style="float: left; white-space: nowrap;">' + $marquee.html() + '</div></div>').next(),
		marqueeRedux = $marqueeRedux.get(0),
		hitedge = 0,
		direction = ($marquee.attr('direction') \|\| 'left').toLowerCase(),
		marqueeState = {
		dir : /down\|right/.test(direction) ? -1 : 1,
		axis : /left\|right/.test(direction) ? 'scrollLeft' : 'scrollTop',
		widthAxis : /left\|right/.test(direction) ? 'scrollWidth' : 'scrollHeight',
		last : -1,
		loops : $marquee.attr('loop') \|\| -1,
		scrollamount : $marquee.attr('scrollamount') \|\| this.scrollAmount \|\| 2,
		behavior : ($marquee.attr('behavior') \|\| 'scroll').toLowerCase(),
		width : /left\|right/.test(direction) ? width : height
		};

		// corrects a bug in Firefox - the default loops for slide is -1
		if ($marquee.attr('loop') == -1 && marqueeState.behavior == 'slide') {
		marqueeState.loops = 1;
		}

		$marquee.remove();

		// add padding
		if (/left\|right/.test(direction)) {
		$marqueeRedux.find('> div').css('padding', '0 ' + width + 'px');
		} else {
		$marqueeRedux.find('> div').css('padding', height + 'px 0');
		}

		// events
		$marqueeRedux.bind('stop', function () {
		$marqueeRedux.data('paused', true);
		}).bind('pause', function () {
		$marqueeRedux.data('paused', true);
		}).bind('start', function () {
		$marqueeRedux.data('paused', false);
		}).bind('unpause', function () {
		$marqueeRedux.data('paused', false);
		}).data('marqueeState', marqueeState); // finally: store the state

		// todo - rerender event allowing us to do an ajax hit and redraw the marquee

		newMarquee.push(marqueeRedux);

		marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
		$marqueeRedux.trigger('start');

		// on the very last marquee, trigger the animation
		if (i+1 == last) {
		animateMarquee();
		}
		});

		return $(newMarquee);
		};
		}(jQuery));
		No newline at end of file

cgi/templates/layouts/default.html.ep

+5 −0

Original line number	Diff line number	Diff line
		@@ -180,6 +180,11 @@
		}

		</style>
		%= javascript 'jquery-1.9.1.min.js'
		%= javascript 'marquee.js'
		%= javascript begin
		$(function () { $('marquee').marquee() });
		% end
		</head>
		<body>

cgi/templates/multi.html.ep

+2 −0

Original line number	Diff line number	Diff line
		@@ -33,7 +33,9 @@

		% if ($departure->{info}) {
		<div class="info">
		<marquee behaviour="scroll" scrollamount="1" direction="left">
		%= $departure->{info}
		</marquee>
		</div>
		% }

cgi/templates/single.html.ep

+2 −0

Original line number	Diff line number	Diff line
		@@ -26,7 +26,9 @@
		</div>
		% if ($departure->{info}) {
		<div class="s_info">
		<marquee behaviour="scroll" scrollamount="1" direction="left">
		%= $departure->{info}
		</marquee>
		</div>
		% }
		</div> <!-- s_display -->

Admin message