From e46ddfeb315760f9a2381f9059aa4703618f59d5 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Mon, 3 Jan 2011 12:01:38 +0000 Subject: [PATCH] misc changes --- build/css/ox.ui.classic.css | 11 +++++ build/css/ox.ui.css | 4 +- build/css/ox.ui.modern.css | 11 +++++ build/js/ox.js | 8 ++-- build/js/ox.ui.js | 92 ++++++++++++++++++++++++------------- 5 files changed, 89 insertions(+), 37 deletions(-) diff --git a/build/css/ox.ui.classic.css b/build/css/ox.ui.classic.css index 973523c..5646622 100644 --- a/build/css/ox.ui.classic.css +++ b/build/css/ox.ui.classic.css @@ -174,6 +174,11 @@ Lists background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(255, 255, 255)), color-stop(1, rgb(224, 224, 224))); } .OxThemeClassic .OxIconList .OxItem.OxSelected > .OxIcon img { + border-color: rgb(160, 160, 160); + -moz-box-shadow: 0 0 4px rgba(160, 160, 160, 1); + -webkit-box-shadow: 0 0 4px rgba(160, 160, 160, 1); +} +.OxThemeClassic .OxIconList.OxFocus .OxItem.OxSelected > .OxIcon img { border-color: rgb(128, 128, 128); -moz-box-shadow: 0 0 4px rgba(128, 128, 128, 1); -webkit-box-shadow: 0 0 4px rgba(128, 128, 128, 1); @@ -186,6 +191,12 @@ Lists text-shadow: rgb(255, 255, 255) 1px 1px 0; } .OxThemeClassic .OxIconList .OxItem.OxSelected > .OxText > div { + border-color: rgb(160, 160, 160); + background: rgba(160, 160, 160, 0.5); + -moz-box-shadow: 0 0 4px rgba(160, 160, 160, 1); + -webkit-box-shadow: 0 0 4px rgba(160, 160, 160, 1); +} +.OxThemeClassic .OxIconList.OxFocus .OxItem.OxSelected > .OxText > div { border-color: rgb(128, 128, 128); background: rgba(128, 128, 128, 0.5); -moz-box-shadow: 0 0 4px rgba(128, 128, 128, 1); diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index 7ca25bc..953c7e3 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -840,9 +840,9 @@ Lists .OxTextList .OxBar .OxSelect { position: absolute; right: 0px; - width: 10px; + width: 11px; height: 16px; - border-width: 0 1px 0 1px; + border-width: 0 1px 0 0; background: rgba(0, 0, 0, 0); font-size: 11px; text-align: center; diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css index c863a8a..aa9cb0f 100644 --- a/build/css/ox.ui.modern.css +++ b/build/css/ox.ui.modern.css @@ -152,6 +152,11 @@ Lists background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(32, 32, 32)), color-stop(1, rgb(0, 0, 0))); } .OxThemeModern .OxIconList .OxItem.OxSelected > .OxIcon img { + border-color: rgb(96, 96, 96); + -moz-box-shadow: 0 0 4px rgba(96, 96, 96, 1); + -webkit-box-shadow: 0 0 4px rgba(96, 96, 96, 1); +} +.OxThemeModern .OxIconList.OxFocus .OxItem.OxSelected > .OxIcon img { border-color: rgb(128, 128, 128); -moz-box-shadow: 0 0 4px rgba(128, 128, 128, 1); -webkit-box-shadow: 0 0 4px rgba(128, 128, 128, 1); @@ -164,6 +169,12 @@ Lists text-shadow: rgb(0, 0, 0) 1px 1px 0; } .OxThemeModern .OxIconList .OxItem.OxSelected > .OxText > div { + border-color: rgb(96, 96, 96); + background: rgba(96, 96, 96, 0.5); + -moz-box-shadow: 0 0 4px rgba(96, 96, 96, 1); + -webkit-box-shadow: 0 0 4px rgba(96, 96, 96, 1); +} +.OxThemeModern .OxIconList.OxFocus .OxItem.OxSelected > .OxText > div { border-color: rgb(128, 128, 128); background: rgba(128, 128, 128, 0.5); -moz-box-shadow: 0 0 4px rgba(128, 128, 128, 1); diff --git a/build/js/ox.js b/build/js/ox.js index d5f49a5..c5bfd67 100644 --- a/build/js/ox.js +++ b/build/js/ox.js @@ -409,9 +409,9 @@ Ox.serialize = function(obj) { */ var arr = []; Ox.each(obj, function(k, v) { - arr.push(k + "=" + v); + v !== '' && arr.push(k + '=' + v); }); - return arr.join("&"); + return arr.join('&'); }; Ox.setPropertyOnce = function(arr, str) { @@ -482,8 +482,8 @@ Ox.unique = function(arr) { Ox.unserialize = function(str) { var arr, obj = {}; - Ox.each(str.split("&"), function(i, v) { - arr = v.split("="); + Ox.each(str.split('&'), function(i, v) { + arr = v.split('='); obj[arr[0]] = arr[1]; }); return obj; diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index b055fa4..eb3ac2a 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -2689,22 +2689,7 @@ requires } if (self.options.autocomplete && self.options.autocompleteSelect) { - self.$autocompleteMenu = new Ox.Menu({ - element: self.$input, - id: self.options.id + 'Menu', // fixme: we do this in other places ... are we doing it the same way? var name?, - offset: { - left: 4, - top: 0 - }, - size: self.options.size - }) - .bindEvent('click', clickMenu); - if (self.options.autocompleteReplace) { - self.$autocompleteMenu.bindEvent({ - deselect: deselectMenu, - select: selectMenu, - }); - } + self.$autocompleteMenu = constructAutocompleteMenu(); } self.options.placeholder && setPlaceholder(); @@ -2796,6 +2781,26 @@ requires } + function constructAutocompleteMenu() { + var menu = new Ox.Menu({ + element: self.$input, + id: self.options.id + 'Menu', // fixme: we do this in other places ... are we doing it the same way? var name?, + offset: { + left: 4, + top: 0 + }, + size: self.options.size + }) + .bindEvent('click', clickMenu); + if (self.options.autocompleteReplace) { + menu.bindEvent({ + deselect: deselectMenu, + select: selectMenu, + }); + } + return menu; + } + function autovalidate() { var blur, oldCursor, oldValue; @@ -3115,7 +3120,12 @@ requires self.onChange = function(key, value) { var inputWidth, val; - if (key == 'disabled') { + if (['autocomplete', 'autocompleteReplace', 'autocompleteSelect', 'autovalidate'].indexOf(key) > -1) { + if (self.options.autocomplete && self.options.autocompleteSelect) { + self.$autocompleteMenu = constructAutocompleteMenu(); + } + self.bindKeyboard = self.options.autocomplete || self.options.autovalidate; + } else if (key == 'disabled') { self.$input.attr({ disabled: value ? 'disabled' : '' }); @@ -5769,6 +5779,7 @@ requires var self = self || {}, that = new Ox.Element({}, self) .defaults({ + centerSelection: false, id: '', item: function() {}, keys: [], @@ -5788,6 +5799,7 @@ requires }); that.$element = new Ox.List({ + centered: self.options.centered, construct: constructItem, id: self.options.id, itemHeight: self.itemHeight, @@ -5850,6 +5862,10 @@ requires that.$element.closePreview(); }; + that.scrollToSelection = function() { + that.$element.scrollToSelection(); + }; + that.size = function() { that.$element.size(); } @@ -6025,6 +6041,7 @@ requires var self = self || {}, that = new Ox.Container({}, self) .defaults({ + centered: false, construct: function() {}, itemHeight: 16, itemWidth: 16, @@ -6604,18 +6621,24 @@ requires scroll, size; if (self.options.orientation == 'horizontal') { - positions[0] = pos * itemWidth; - positions[1] = positions[0] + itemWidth + self.itemMargin; - scroll = that.scrollLeft(); - size = getWidth(); - if (positions[0] < scroll || leftOrTopAlign) { + if (self.options.centered) { that.animate({ - scrollLeft: positions[0] + 'px' - }, 0); - } else if (positions[1] > scroll + size) { - that.animate({ - scrollLeft: (positions[1] - size) + 'px' + scrollLeft: (self.listMargin / 2 + (pos + 0.5) * itemWidth - that.width() / 2) + 'px' }, 0); + } else { + positions[0] = pos * itemWidth + self.listMargin / 2; + positions[1] = positions[0] + itemWidth + self.itemMargin / 2; + scroll = that.scrollLeft(); + size = getWidth(); + if (positions[0] < scroll || leftOrTopAlign) { + that.animate({ + scrollLeft: positions[0] + 'px' + }, 0); + } else if (positions[1] > scroll + size) { + that.animate({ + scrollLeft: (positions[1] - size) + 'px' + }, 0); + } } } else { positions[0] = (self.options.orientation == 'vertical' ? pos : getRow(pos)) * itemHeight; @@ -6638,6 +6661,7 @@ requires if (!isSelected(pos) || self.selected.length > 1) { selectNone(); addToSelection(pos); + self.options.centered && scrollToPosition(pos); } } @@ -6826,7 +6850,11 @@ requires return that; }; - that.size = function() { + that.scrollToSelection = function() { + self.selected.length && scrollToPosition(self.selected[0]); + }; + + that.size = function() { // fixme: not a good function name if (self.options.orientation == 'both') { var rowLength = getRowLength(), pageLength = self.pageLengthByRowLength[rowLength], @@ -9175,7 +9203,7 @@ requires return self.options.elements[pos].collapsed; }; - that.replace = function(id, element) { + that.replace = function(id, element) { // fixme: should be replaceElement // one can pass pos instead of id var pos = Ox.isNumber(id) ? id : getPositionById(id); Ox.print('replace', pos, element); @@ -9894,13 +9922,15 @@ requires width: 0 }) .options(options || {}) - .addClass('OxEditor'); + .addClass('OxEditor') /*.css({ //height: self.options.height + 'px', overflowY: 'scroll', //width: self.options.width + 'px' });*/ + that.click(that.gainFocus) + $.extend(self, { $player: [], $timeline: [], @@ -10050,7 +10080,7 @@ requires } }); - that.gainFocus(); + // that.gainFocus(); function changePlayer(event, data) { self.options.position = data.position;