diff --git a/AUTHORS.txt b/AUTHORS.txt index b2168655ee0..e4be5e747c4 100644 --- a/AUTHORS.txt +++ b/AUTHORS.txt @@ -28,3 +28,4 @@ Keith Wood (kbwood@virginbroadband.com.au) Maggie Costello Wachs Richard D. Worth (rdworth.org) Jörn Zaefferer (bassistance.de) +Kai Schlamp (schlamp@gmx.de) diff --git a/README.md b/README.md index 5c7d79a1335..3007bce7d3b 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,43 @@ [jQuery UI](http://jqueryui.com/) - Interactions and Widgets for the web ================================ -jQuery UI provides interactions like Drag and Drop and widgets like Autocomplete, Tabs and Slider and makes these as easy to use as jQuery itself. +This fork of jQuery UI includes a Twitter like ticker in the ticker branch. A [live demo](http://medihack.github.com/tickerdemo/) with some customized style sheets can be found [here](http://medihack.github.com/tickerdemo/). -If you want to use jQuery UI, go to [jqueryui.com](http://jqueryui.com) to get started. Or visit the [Using jQuery UI Forum](http://forum.jquery.com/using-jquery-ui) for discussions and questions. +The Ticker in its raw form is fully compatible with the jQuery UI Theming framework. It is also quite flexible and fully Unit tested (qunit). -If you are interested in helping developing jQuery UI, you are in the right place. -To discuss development with team members and the community, visit the [Developing jQuery UI Forum](http://forum.jquery.com/developing-jquery-ui). +There are several options to easily customize the visualization: + + $("#ticker").ticker({ // #ticker is the id of an diff --git a/tests/visual/ticker/ticker.html b/tests/visual/ticker/ticker.html new file mode 100644 index 00000000000..dc69960f782 --- /dev/null +++ b/tests/visual/ticker/ticker.html @@ -0,0 +1,33 @@ + + + + + Ticker Visual Test : Default + + + + + + + + + + + + + + diff --git a/tests/visual/ticker/ticker_method_destroy.html b/tests/visual/ticker/ticker_method_destroy.html new file mode 100644 index 00000000000..eff297e096d --- /dev/null +++ b/tests/visual/ticker/ticker_method_destroy.html @@ -0,0 +1,30 @@ + + + + + Ticker Visual Test : Ticker method destroy + + + + + + + + + + + + + + diff --git a/tests/visual/ticker/ticker_method_disable.html b/tests/visual/ticker/ticker_method_disable.html new file mode 100644 index 00000000000..5f2dd590ffc --- /dev/null +++ b/tests/visual/ticker/ticker_method_disable.html @@ -0,0 +1,30 @@ + + + + + Ticker Visual Test : Ticker method disable + + + + + + + + + + + + + + diff --git a/themes/base/jquery.ui.base.css b/themes/base/jquery.ui.base.css index 7634fb61e7c..2869e19aba7 100644 --- a/themes/base/jquery.ui.base.css +++ b/themes/base/jquery.ui.base.css @@ -19,3 +19,4 @@ @import url("jquery.ui.selectable.css"); @import url("jquery.ui.slider.css"); @import url("jquery.ui.tabs.css"); +@import url("jquery.ui.ticker.css"); diff --git a/themes/base/jquery.ui.ticker.css b/themes/base/jquery.ui.ticker.css new file mode 100644 index 00000000000..0affeb4505a --- /dev/null +++ b/themes/base/jquery.ui.ticker.css @@ -0,0 +1,11 @@ +/* + * jQuery UI Ticker @VERSION + * + * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Ticker#theming + */ +.ui-ticker { width: 100%; margin: 0px; padding: 0px; overflow: hidden } +.ui-ticker .ui-ticker-content { display: block; font-size: 1em; padding: .5em .5em .5em .7em; margin-bottom: 1px; } diff --git a/ui/jquery.ui.ticker.js b/ui/jquery.ui.ticker.js new file mode 100644 index 00000000000..0343aa6003b --- /dev/null +++ b/ui/jquery.ui.ticker.js @@ -0,0 +1,231 @@ +/* + * jQuery UI Ticker @VERSION + * + * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Ticker + * + * Depends: + * jquery.ui.core.js + * jquery.ui.widget.js + */ +(function($, undefined) { + +var itemClasses = "ui-ticker-content ui-widget-content ui-helper-reset ui-state-default ui-corner-all"; + +$.widget("ui.ticker", { + options: { + active: true, + initialTimeout: 4000, + mouseOnTimeout: 8000, + mouseOffTimeout: 4000, + scrollTime: 800, + fadeTime: 1000, + next: function(lastItem, nextItem) { nextItem(lastItem); } + }, + + _create: function() { + var self = this, + options = self.options; + + self.timeoutId = null; + + self.speed = options.mouseOffTimeout; + + self.element + .addClass("ui-ticker ui-widget ui-corner-all") + .bind("mouseenter.ticker", function() { + if (options.disabled) { + return; + } + self.speed = options.mouseOnTimeout; + if (options.active && self.timeoutId !== null) { + window.clearTimeout(self.timeoutId); + self.timeoutId = window.setTimeout(function() {self._scroll();}, self.speed); + } + }) + .bind("mouseleave.ticker", function() { + if (options.disabled) { + return; + } + self.speed = options.mouseOffTimeout; + if (options.active && self.timeoutId !== null) { + window.clearTimeout(self.timeoutId); + self.timeoutId = window.setTimeout(function() {self._scroll();}, self.speed); + } + }); + + self.element.find("li").addClass(itemClasses); + self._addItemBindings(self.element.find("li")); + + var style = self.element.attr("style"); + if (style === undefined || style === null) { + self.originalStyle = null; + } + else { + self.originalStyle = self.element.attr("style") + } + self.element.height(self.element.height()); + }, + + _init: function() { + var self = this, + options = self.options; + + self.readyForNext = true; + + if (options.active) { + self.timeoutId = window.setTimeout(function() {self._scroll()}, options.initialTimeout); + } + }, + + destroy: function() { + var self = this; + + if (self.timeoutId !== null) { + window.clearTimeout(self.timeoutId); + self.timeoutId = null; + } + + self.element.unbind(".ticker"); + self.element.find("li").unbind(".ticker"); + self.element.removeClass("ui-ticker ui-widget ui-corner-all"); + self.element.find("li").removeClass(itemClasses + " ui-state-hover ui-state-focus"); + + if (self.originalStyle === null) { + self.element.removeAttr("style"); + } + else { + self.element.attr("style", self.originalStyle); + } + + return $.Widget.prototype.destroy.call(self); + }, + + _addItemBindings: function(item) { + var options = this.options; + + item + .bind("mouseenter.ticker", function() { + if (options.disabled) { + return; + } + $(this).addClass("ui-state-hover"); + }) + .bind("mouseleave.ticker", function() { + if (options.disabled) { + return; + } + $(this).removeClass("ui-state-hover"); + }) + .bind("focus.ticker", function() { + if (options.disabled) { + return; + } + $(this).addClass("ui-state-focus"); + }) + .bind("blur.ticker", function() { + if (options.disabled) { + return; + } + $(this).removeClass("ui-state-focus"); + }); + }, + + _scroll: function() { + var self = this, + options = self.options; + + if (self.options.next !== null && self.readyForNext) { + var lastItem = self.element.find("li").last().clone(true); + lastItem.removeClass(itemClasses + " ui-state-hover ui-state-focus"); + self.readyForNext = false; + var nextItem = self.options.next(lastItem, function() { + self._nextItem.apply(self, arguments); + }); + if (nextItem) { + self._nextItem(nextItem); + } + } + + if (options.active) { + self.timeoutId = window.setTimeout(function() {self._scroll();}, self.speed); + } + }, + + _nextItem: function(nextItem) { + var self = this, + options = self.options; + + if (nextItem != null && nextItem.length > 0) { + self._trigger('beforeScroll'); + + var $nextItem = $(nextItem); + + $nextItem.addClass(itemClasses); + self._addItemBindings($nextItem); + $nextItem + .hide() + .prependTo(self.element) + .css('visibility', 'hidden') + .slideDown(options.scrollTime, function() { + $(this) + .fadeTo(0, 0) + .css('visibility', 'visible') + .fadeTo(options.fadeTime, 1, function() { + self._trigger('afterFade'); + }); + self.element.find("li").last().remove(); + self.readyForNext = true; + self._trigger('afterScroll'); + }); + } + else { + self.readyForNext = true; + } + }, + + _setOption: function(key, value) { + $.Widget.prototype._setOption.apply(this, arguments); + + switch (key) { + case "active": + if (value) { + this.start(); + } + else { + this.stop(); + } + break; + } + }, + + stop: function() { + var self = this, + options = self.options; + + options.active = false; + if (self.timeoutId !== null) { + window.clearTimeout(self.timeoutId); + self.timeoutId = null; + } + }, + + start: function() { + var self = this, + options = self.options; + + options.active = true; + if (self.timeoutId === null) { + self.timeoutId = window.setTimeout(function() {self._scroll();}, options.initialTimeout); + } + } +}); + +$.extend($.ui.ticker, { + version: "@VERSION" +}); + +})(jQuery);