r2910 - spinner: added select demo (work in progress); removed item list spinning code for now (w...
Author: pazu2k@gmail.com
Date: Thu Jul 9 23:35:01 2009
New Revision: 2910
Added:
branches/dev/spinner/tests/visual/spinner/spinner_select.html
Modified:
branches/dev/spinner/themes/base/ui.spinner.css
branches/dev/spinner/ui/ui.spinner.js
Log:
spinner: added select demo (work in progress); removed item list spinning
code for now (will be re-factored to support HTML5); fixed focus effect.
Added: branches/dev/spinner/tests/visual/spinner/spinner_select.html
==============================================================================
--- (empty file)
+++ branches/dev/spinner/tests/visual/spinner/spinner_select.html Thu Jul
9 23:35:01 2009
@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>Spinner Visual Test : Default</title>
+ <link rel="stylesheet" href="../visual.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.all.css"
type="text/css">
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.spinner.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $('#s1').spinner();
+
+ $("#disable").toggle(function() {
+ $("#s1").spinner("disable");
+ }, function() {
+ $("#s1").spinner("enable");
+ });
+ $("#destroy").toggle(function() {
+ $("#s1").spinner("destroy");
+ }, function() {
+ $("#s1").spinner();
+ });
+ $("#getvalue").click(function() {
+ alert($("#s1").spinner("value"));
+ });
+ $("#setvalue").click(function() {
+ $("#s1").spinner("value", 5);
+ });
+
+ $(".ui-button").hover(function() {
+ $(this).addClass("ui-state-hover");
+ }, function() {
+ $(this).removeClass("ui-state-hover");
+ });
+
+
+ $('#s2').spinner({ items: '#data' });
+ });
+ </script>
+</head>
+<body>
+
+<select id="s1">
+ <option value="1">item 1</option>
+ <option value="2">item 2</option>
+ <option value="3">item 3</option>
+ <option value="4">item 4</option>
+ <option value="5">item 5</option>
+ <option value="6">item 6</option>
+ <option value="7">item 7</option>
+ <option value="8">item 8</option>
+ <option value="9">item 9</option>
+ <option value="10">item 10</option>
+</select>
+
+
+<button id="disable" class="ui-button ui-state-default
ui-corner-all">Toggle disable/enable</button>
+<button id="destroy" class="ui-button ui-state-default
ui-corner-all">Toggle widget</button>
+
+
+
+<button id="getvalue" class="ui-button ui-state-default ui-corner-all">Get
value</button>
+<button id="setvalue" class="ui-button ui-state-default ui-corner-all">Set
value to 5</button>
+
+
+
+<input id="s2">
+<select id="data">
+ <option value="1">item 1</option>
+ <option value="2">item 2</option>
+ <option value="3">item 3</option>
+ <option value="4">item 4</option>
+ <option value="5">item 5</option>
+ <option value="6">item 6</option>
+ <option value="7">item 7</option>
+ <option value="8">item 8</option>
+ <option value="9">item 9</option>
+ <option value="10">item 10</option>
+</select>
+
+</body>
+</html>
\ No newline at end of file
Modified: branches/dev/spinner/themes/base/ui.spinner.css
==============================================================================
--- branches/dev/spinner/themes/base/ui.spinner.css (original)
+++ branches/dev/spinner/themes/base/ui.spinner.css Thu Jul 9 23:35:01 2009
@@ -8,8 +8,6 @@
.ui-spinner .ui-icon { position: absolute; margin-top: -8px; top: 50%;
left: 0; } /* vertical centre icon */
.ui-spinner-up { top: 0; }
.ui-spinner-down { bottom: 0; }
-.ui-spinner-list, .ui-spinner-listitem { display: block; }
-.ui-spinner-list { margin: 0; padding: .4em; height: 1.8em; }
/* ltr (default) */
.ui-spinner-ltr { direction: ltr; }
Modified: branches/dev/spinner/ui/ui.spinner.js
==============================================================================
--- branches/dev/spinner/ui/ui.spinner.js (original)
+++ branches/dev/spinner/ui/ui.spinner.js Thu Jul 9 23:35:01 2009
@@ -37,14 +37,6 @@
self._curDelay = {};
self.focused = false;
self.hovered = false;
-
- // perform data bind on generic objects
- if (options.items != null && typeof options.items[0] == 'object'
&& !self.element.is('input')) {
- var data = options.items;
- for (var i=0; i<data.length; i++) {
- self._addItem(data[i]);
- }
- }
// Create list of valid characters used to build regexs
validChars = '\\-\\' + options.radixPoint;
@@ -152,29 +144,6 @@
self._hide();
}
- // DataList: Set contraints for object length and step size.
- // Manipulate height of spinner.
- self._items = self.element.children().length;
- if (self._items > 1) {
- var margins = self.element.outerHeight(true) -
self.element.outerHeight();
- var height = self.element.outerHeight()/self._items + margins*2;
- //var height = options.height;
- self.element
- .addClass('ui-spinner-list')
- .height(height)
- .children()
- .addClass('ui-spinner-listitem')
- .height(height)
- .css('overflow', 'hidden')
- .end()
- .parent()
- .height(height)
- .end();
- options.step = 1;
- options.min = 0;
- options.max = self._items-1;
- }
-
self.element
.bind('keydown'+namespace, function(event) {
if (!self.counter) {
@@ -198,7 +167,9 @@
}
})
.bind('blur'+namespace, function(event) {
- widget.removeClass(active);
+ if (!self.hovered) {
+ widget.removeClass(active);
+ }
self.focused = false;
if (!self.hovered && typeof options.hide != 'boolean') {
self._delay(self._hide, 100, 'hide', options.hide);
@@ -215,7 +186,8 @@
self.disable();
}
- self._extend('initComplete');
+ // TODO: decide whether this is the best way to extend init
+ //self._extend('initComplete');
},
_draw: function() {
@@ -224,15 +196,16 @@
dir = options.dir,
spinnerClass = options.spinnerClass,
spinnerBoxClass = 'ui-spinner-box',
- widgetClasses = 'ui-spinner ui-state-default ui-widget
ui-widget-content ui-corner-all ui-spinner-' + dir + (spinnerClass ? ' '+
spinnerClass: ''),
- widget = self.element
- .addClass(spinnerBoxClass)
- .attr('autocomplete', 'off') // switch off autocomplete in opera
- .wrap('<div role="spinbutton">')
- .parent()
- .addClass(widgetClasses)
- .append('<a class="ui-spinner-button ui-spinner-up ui-state-default
ui-corner-t'+ dir.substr(-1,1) +'"><span
class="ui-spinner-button-inner"><span class="ui-icon
ui-icon-triangle-1-n">▲</span></span></a>')
- .append('<a class="ui-spinner-button ui-spinner-down ui-state-default
ui-corner-b'+ dir.substr(-1,1) +'"><span
class="ui-spinner-button-inner"><span class="ui-icon
ui-icon-triangle-1-s">▼</span></span></a>');
+ widgetClasses = 'ui-spinner ui-state-default ui-widget
ui-widget-content ui-corner-all ui-spinner-' + dir + (spinnerClass ? ' '+
spinnerClass: '');
+
+ var widget = self.element
+ .addClass(spinnerBoxClass)
+ .attr('autocomplete', 'off') // switch off autocomplete in opera
+ .wrap('<div role="spinbutton">')
+ .parent()
+ .addClass(widgetClasses)
+ .append('<a class="ui-spinner-button ui-spinner-up ui-state-default
ui-corner-t'+ dir.substr(-1,1) +'"><span
class="ui-spinner-button-inner"><span class="ui-icon
ui-icon-triangle-1-n">▲</span></span></a>')
+ .append('<a class="ui-spinner-button ui-spinner-down ui-state-default
ui-corner-b'+ dir.substr(-1,1) +'"><span
class="ui-spinner-button-inner"><span class="ui-icon
ui-icon-triangle-1-s">▼</span></span></a>');
// TODO: need a better way to exclude IE8 without resorting to
$.browser.version
// fix inline-block issues for IE. Since IE8 supports inline-block we
need to exclude it.
@@ -285,7 +258,6 @@
value = this.options.value;
}
this._setValue(value + (d == 'up' ? 1:-1) *(this.options.incremental &&
this.counter > 100 ? (this.counter > 200 ? 100 : 10) : 1) * step);
- this._animate(d);
this._constrain();
if (this.counter) {
this.counter++;
@@ -399,38 +371,7 @@
);
this.element.parents('.' + this.widgetBaseClass
+ ':first').attr('aria-valuenow', this._getValue());
},
- _animate: function(d) {
- if (this.element.hasClass('ui-spinner-list') && ((d == 'up' &&
this._getValue() <= this.options.max) || (d == 'down' && this._getValue()