From db45d4d7c45abcb09b56069ab1f6a0d665d2fac7 Mon Sep 17 00:00:00 2001 From: Rolux Date: Wed, 10 Feb 2010 22:07:26 +0530 Subject: [PATCH 01/27] misc. changes --- build/js/ox.ui.js | 46 ++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 40 insertions(+), 6 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index f22c98c0..1d20a4ab 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -827,7 +827,7 @@ requires if (arguments.length == 1) { $.each(arguments[0], function(event, fn) { Ox.Event.bind(that.id, event, fn); - }) + }); } else { Ox.Event.bind(that.id, arguments[0], arguments[1]); } @@ -897,12 +897,12 @@ requires ret = that; } return ret; - } + }; that.remove = function() { that.$element.remove(); delete elements[that.ox]; return that; - } + }; that.triggerEvent = function() { /* triggerEvent(event, fn) or triggerEvent({event0: fn0, event1: fn1, ...}) @@ -915,7 +915,7 @@ requires Ox.Event.trigger(arguments[0] + "_" + self.options.id, arguments[1] || {}); } return that; - } + }; that.unbindEvent = function() { /* unbindEvent(event, fn) or unbindEvent({event0: fn0, event1: fn1, ...}) @@ -928,7 +928,7 @@ requires Ox.Event.unbind(that.id, arguments[0], arguments[1]); } return that; - } + }; // return return that; @@ -1280,6 +1280,9 @@ requires callback(); }) } + that.disableButtons = function() { + // to be used on submit of form, like login + }; that.open = function() { if (!that.$layer.length) { that.$layer = new Ox.Element() @@ -1302,6 +1305,15 @@ requires ============================================================================ */ + Ox.Form = function(options, self) { + + var self = self || {}, + that = new Ox.Element("div", self) + .defaults() + .options(); + + }; + /* ---------------------------------------------------------------------------- Ox.Button @@ -1969,6 +1981,14 @@ requires }; + that.disableItem = function(id) { + + }; + + that.enableItem = function(id) { + + }; + that.removeMenu = function() { }; @@ -2408,6 +2428,10 @@ requires }; + that.getItem = function(id) { + + }; + that.hasEnabledItems = function() { var ret = false; $.each(that.items, function(i, item) { @@ -2608,9 +2632,15 @@ requires that.$status.html(value ? oxui.symbols.check : "") } else if (key == "disabled") { that.toggleClass("disabled"); // fixme: this will only work if onChange is only invoked on actual change + } else if (key == "title") { + } } + that.toggle = function() { + // toggle id and title + }; + that.toggleChecked = function() { }; @@ -2623,7 +2653,7 @@ requires that.options({ title: that.$title.html() == self.options.title[0] ? self.options.title[1] : self.options.title[0] - }) + }); }; return that; @@ -2791,6 +2821,10 @@ requires return that; }; + Ox.TabPanel = function(options, self) { + + }; + })(); /* From e6df18001ea0b8919b0dffa29b39670b3bc9a43e Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 11 Feb 2010 00:12:59 +0530 Subject: [PATCH 02/27] misc. changes --- build/js/ox.ui.js | 31 ++++++++++++++++++++----------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 1d20a4ab..4bcb5c1b 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -772,33 +772,42 @@ requires // private function wrapjQuery() { - $.each(oxui.jQueryFunctions, function(i, v) { + $.each(oxui.jQueryFunctions, function(i, fn) { that[v] = function() { var args = arguments, length = args.length, - id, ret; - $.each(args, function(i, v) { + id, ret, $element; + $.each(args, function(i, arg) { // if an ox object was passed // then pass its $element instead // so we can do oxObj.jqFn(oxObj) - if (v.ox) { - args[i] = v.$element; + if (arg.ox) { + if (fn == "appendTo" && arg.$content) { + args[i] = v.$content + } else { + args[i] = v.$element; + } } }); + if (v == "html" && that.$content) { + $element = that.$content; + } else { + $element = that.$element; + } // why does this not work? // ret = that.$element[v].apply(this, arguments); if (length == 0) { - ret = that.$element[v](); + ret = $element[fn](); } else if (length == 1) { - ret = that.$element[v](args[0]); + ret = $element[fn](args[0]); } else if (length == 2) { - ret = that.$element[v](args[0], args[1]); + ret = $element[fn](args[0], args[1]); } else if (length == 3) { - ret = that.$element[v](args[0], args[1], args[2]); + ret = $element[fn](args[0], args[1], args[2]); } else if (length == 4) { - ret = that.$element[v](args[0], args[1], args[2], args[3]); + ret = $element[fn](args[0], args[1], args[2], args[3]); } - if (v == "data") { + if (fn == "data") { // Ox.print("data ret", ret, $(ret)) } // if the $element of an ox object was returned From bf7fc92fc4422884061715393f0f17638b8839b2 Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 11 Feb 2010 00:22:46 +0530 Subject: [PATCH 03/27] typos --- build/js/ox.ui.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 4afd5284..ffb4103a 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -773,7 +773,7 @@ requires // private function wrapjQuery() { $.each(oxui.jQueryFunctions, function(i, fn) { - that[v] = function() { + that[fn] = function() { var args = arguments, length = args.length, id, ret, $element; @@ -781,15 +781,15 @@ requires // if an ox object was passed // then pass its $element instead // so we can do oxObj.jqFn(oxObj) - if (arg.ox) { + if (arg.ox) { // fixme: or is this too much magic? if (fn == "appendTo" && arg.$content) { - args[i] = v.$content + args[i] = arg.$content } else { - args[i] = v.$element; + args[i] = arg.$element; } } }); - if (v == "html" && that.$content) { + if (fn == "html" && that.$content) { // fixme: or is this too much magic? $element = that.$content; } else { $element = that.$element; From dbdd3e4fdbec6b79b9f5a570935d075c0eb58373 Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 11 Feb 2010 01:11:25 +0530 Subject: [PATCH 04/27] commenting out jquery magic --- build/js/ox.ui.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index ffb4103a..d924b3d6 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -781,6 +781,7 @@ requires // if an ox object was passed // then pass its $element instead // so we can do oxObj.jqFn(oxObj) + /* if (arg.ox) { // fixme: or is this too much magic? if (fn == "appendTo" && arg.$content) { args[i] = arg.$content @@ -788,12 +789,15 @@ requires args[i] = arg.$element; } } + */ }); + /* if (fn == "html" && that.$content) { // fixme: or is this too much magic? $element = that.$content; } else { $element = that.$element; } + */ // why does this not work? // ret = that.$element[v].apply(this, arguments); if (length == 0) { From cf9ecbf01bc1e2664ac5d53dac98f3bc873b83c8 Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 11 Feb 2010 01:20:10 +0530 Subject: [PATCH 05/27] commenting out jquery magic, pt. 2 --- build/js/ox.ui.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index d924b3d6..78700881 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -776,7 +776,7 @@ requires that[fn] = function() { var args = arguments, length = args.length, - id, ret, $element; + id, ret; $.each(args, function(i, arg) { // if an ox object was passed // then pass its $element instead @@ -801,15 +801,15 @@ requires // why does this not work? // ret = that.$element[v].apply(this, arguments); if (length == 0) { - ret = $element[fn](); + ret = that.$element[fn](); } else if (length == 1) { - ret = $element[fn](args[0]); + ret = that.$element[fn](args[0]); } else if (length == 2) { - ret = $element[fn](args[0], args[1]); + ret = that.$element[fn](args[0], args[1]); } else if (length == 3) { - ret = $element[fn](args[0], args[1], args[2]); + ret = that.$element[fn](args[0], args[1], args[2]); } else if (length == 4) { - ret = $element[fn](args[0], args[1], args[2], args[3]); + ret = that.$element[fn](args[0], args[1], args[2], args[3]); } if (fn == "data") { // Ox.print("data ret", ret, $(ret)) From fce8d527dc7094034b367ac0e4b3430f386069c9 Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 11 Feb 2010 01:27:15 +0530 Subject: [PATCH 06/27] commenting out jquery magic, pt. 3 --- build/js/ox.ui.js | 1 + 1 file changed, 1 insertion(+) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 78700881..237d88f5 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -781,6 +781,7 @@ requires // if an ox object was passed // then pass its $element instead // so we can do oxObj.jqFn(oxObj) + args[i] = arg.$element; /* if (arg.ox) { // fixme: or is this too much magic? if (fn == "appendTo" && arg.$content) { From 13be1d9a10e662e4894998af8d8a5700ec446876 Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 11 Feb 2010 01:29:10 +0530 Subject: [PATCH 07/27] commenting out jquery magic, pt. 4 --- build/js/ox.ui.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 237d88f5..3ffba0fb 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -781,7 +781,9 @@ requires // if an ox object was passed // then pass its $element instead // so we can do oxObj.jqFn(oxObj) - args[i] = arg.$element; + if (arg.ox) { + args[i] = arg.$element; + } /* if (arg.ox) { // fixme: or is this too much magic? if (fn == "appendTo" && arg.$content) { From 301a9759dbef56aa02926f58db4ef745c5a01d5c Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 18 Feb 2010 12:57:32 +0530 Subject: [PATCH 08/27] first steps towards autocomplete --- build/js/ox.ui.js | 170 +++++++++++++++++++++++++++--------------- demos/test/index.html | 13 ++++ 2 files changed, 123 insertions(+), 60 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 3ffba0fb..e5f9b535 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -455,12 +455,12 @@ requires $(function() { // fixme: how to do this better? if ($.browser.safari) { - $document.keydown(keydown); + $document.keydown(keypress); } else { - $document.keypress(keydown); + $document.keypress(keypress); } }); - function keydown(event) { + function keypress(event) { var key, keys = [], ret = true, @@ -1153,10 +1153,10 @@ requires orientation: "horizontal", size: 16 }) - .options(options || {}), + .options(options || {}) + .addClass("OxBar Ox" + Ox.toTitleCase(self.options.orientation)), dimensions = oxui.getDimensions(self.options.orientation); - that.addClass("OxBar Ox" + Ox.toTitleCase(self.options.orientation)) - .css(dimensions[0], "100%") + that.css(dimensions[0], "100%") .css(dimensions[1], self.options.size + "px"); return that; }; @@ -1208,6 +1208,8 @@ requires */ Ox.Dialog = function(options, self) { + // fixme: this was just pasted from previous version ... update + // fixme: dialog should be derived from a generic draggable var self = self || {}, options = $.extend({ title: "", @@ -1528,43 +1530,82 @@ requires Ox.Input = function(options, self) { var self = self || {}, - that = new Ox.Element(options.type=='textarea'?'textarea':'input', self) + that = new Ox.Element( + options.type == "textarea" ? "textarea" : "input", self + ) .defaults({ + autocomplete: null, placeholder: "", size: "medium", type: "text" }) - .options(options || {}); - if(options.type != 'textarea') { - that.attr({type: self.options.type}) + .options(options || {}) + .attr({ + placeholder: self.options.placeholder + }) + .addClass( + "OxInput Ox" + Ox.toTitleCase(self.options.size) + + " OxPlaceholder" + ) + .focus(focus) + .blur(blur) + .change(change); + if (options.autocomplete) { + self.menu = new Ox.Menu({ + element: that, + offset: { + left: 4, + top: 0 + }, + size: self.options.size + }); + } + if (options.type != "textarea") { + that.attr({ + type: self.options.type + }); + } + function autocomplete(items) { + items = $.map(items, function(title) { + return { + id: title.toLowerCase(), // fixme: need function to do lowercase, underscores etc? + title: title + } + }); + self.menu.options({ + items: items + }).showMenu(); } - that.attr({ - placeholder: self.options.placeholder - }) - .addClass("OxInput Ox" + - Ox.toTitleCase(self.options.size) + " OxPlaceholder") - //.change(change) - .focus(focus) - .blur(blur); - /* doesn't work yet function change() { - Ox.print("change", that.val(), that.hasClass("OxPlaceholder")) - if ((that.val() !== "") != that.hasClass("OxPlaceholder")) { - that.toggleClass("OxPlaceholder"); - } - } - */ - function focus() { - Ox.print("focus", that.val(), that.attr("class")) - if (that.hasClass("OxPlaceholder")) { - that.val("").removeClass("OxPlaceholder"); - } + } function blur() { - Ox.print("blur", that.val(), that.attr("class")) if (that.val() === "") { that.addClass("OxPlaceholder").val(that.attr("placeholder")); } + if (self.options.autocomplete) { + $document.unbind("keypress", keypress); + } + } + function focus() { + if (that.is(".OxPlaceholder")) { + that.val("").removeClass("OxPlaceholder"); + } + if (self.options.autocomplete) { + // fixme: different in webkit and firefox (?), see keyboard handler, need generic function + $document.bind("keypress", keypress); + } + } + function keypress() { + var val = that.val(); + if (self.options.autocomplete && val != self.options.value) { + self.options.value = val; + if (val === "") { + self.menu.hideMenu(); + } else { + self.options.autocomplete(val, autocomplete); + } + } } return that; }; @@ -2095,34 +2136,7 @@ requires that.$content = $("") .addClass("OxContent") .appendTo(that.$container); - $.each(self.options.items, function(i, item) { - var position; - if (item.id) { - that.items.push(new Ox.MenuItem($.extend(item, { - menu: that, - position: position = that.items.length - })).data("position", position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?; - if (item.items) { - that.submenus[item.id] = new Ox.Menu({ - element: that.items[position], - id: Ox.toCamelCase(self.options.id + "/" + item.id), - items: item.items, - mainmenu: self.options.mainmenu, - offset: { - left: 0, - top: -4 - }, - parent: that, - side: "right", - size: self.options.size, - }); - } - } else { - that.$content.append(constructSpace()); - that.$content.append(constructLine()); - that.$content.append(constructSpace()); - } - }); + constructItems(self.options.items); that.$scrollbars.down = constructScrollbar("down") .appendTo(that.$element); that.$bottom = $("
") @@ -2182,6 +2196,40 @@ requires } } + function constructItems(items) { + that.items = []; + that.$content.empty(); + $.each(items, function(i, item) { + var position; + if (item.id) { + that.items.push(new Ox.MenuItem($.extend(item, { + menu: that, + position: position = that.items.length + })).data("position", position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?; + if (item.items) { + that.submenus[item.id] = new Ox.Menu({ + element: that.items[position], + id: Ox.toCamelCase(self.options.id + "/" + item.id), + items: item.items, + mainmenu: self.options.mainmenu, + offset: { + left: 0, + top: -4 + }, + parent: that, + side: "right", + size: self.options.size, + }); + } + } else { + that.$content.append(constructSpace()); + that.$content.append(constructLine()); + that.$content.append(constructSpace()); + } + }); + + } + function constructLine() { return $("
").append( $("
", { @@ -2438,7 +2486,9 @@ requires } self.onChange = function(key, value) { - + if (key == "items") { + constructItems(value); + } } that.addItemAfter = function(item) { diff --git a/demos/test/index.html b/demos/test/index.html index fbbfd832..82446470 100644 --- a/demos/test/index.html +++ b/demos/test/index.html @@ -326,6 +326,19 @@ } ] }).addClass("margin").width(96).appendTo(mainPanel); + Ox.Input({ + id: "auto", + autocomplete: function(value, callback) { + callback([ + "Alabama", "Alaska", "Arizona", "California", + "Indiana", "Illinois", "Iowa", + "Kansas", "Kentucky", + "Michigan", "New York", + "Tennessee" + ]); + }, + placeholder: "State" + }).addClass("margin").width(96).appendTo(mainPanel); //*/ function switchTheme() { if (Ox.theme() == "classic") { From 2e6f3cd64b05828c3d5f86c402c4ff7740ab1341 Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 18 Feb 2010 13:26:37 +0530 Subject: [PATCH 09/27] autocomplete, continued --- build/js/ox.ui.js | 55 ++++++++++++++++++++++++++++++------------- demos/test/index.html | 30 ++++++++++++++++------- 2 files changed, 61 insertions(+), 24 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index e5f9b535..f295c405 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -1566,15 +1566,20 @@ requires }); } function autocomplete(items) { - items = $.map(items, function(title) { - return { - id: title.toLowerCase(), // fixme: need function to do lowercase, underscores etc? - title: title - } - }); - self.menu.options({ - items: items - }).showMenu(); + if (items.length) { + items = $.map(items, function(title) { + return { + id: title.toLowerCase(), // fixme: need function to do lowercase, underscores etc? + title: title + } + }); + self.menu.options({ + items: items + }).showMenu(); + that.val(self.menu.options("items")[0].title); + } else { + self.menu.hideMenu(); + } } function change() { @@ -1597,14 +1602,32 @@ requires } } function keypress() { - var val = that.val(); - if (self.options.autocomplete && val != self.options.value) { - self.options.value = val; - if (val === "") { - self.menu.hideMenu(); - } else { - self.options.autocomplete(val, autocomplete); + setTimeout(function() { + var val = that.val(); + if (self.options.autocomplete && val != self.options.value) { + self.options.value = val; + if (val === "") { + self.menu.hideMenu(); + } else { + self.options.autocomplete(val, autocomplete); + } } + }, 50); + } + function select(start, end) { + var element = that.$element[0], + range; + if (element.createTextRange) { + range = element.createTextRange(); + range.collapse(true); + range.moveStart("character", start); + range.moveEnd("character", end); + range.select(); + } else if (element.setSelectionRange) { + element.setSelectionRange(start, end); + } else if (element.selectionStart) { + element.selectionStart = start; + element.selectionEnd = end; } } return that; diff --git a/demos/test/index.html b/demos/test/index.html index 82446470..5afe429b 100644 --- a/demos/test/index.html +++ b/demos/test/index.html @@ -327,15 +327,29 @@ ] }).addClass("margin").width(96).appendTo(mainPanel); Ox.Input({ - id: "auto", + id: "state", autocomplete: function(value, callback) { - callback([ - "Alabama", "Alaska", "Arizona", "California", - "Indiana", "Illinois", "Iowa", - "Kansas", "Kentucky", - "Michigan", "New York", - "Tennessee" - ]); + value = value.toLowerCase(); + var items = []; + states = [ + "Alabama", "Alaska", "Arizona", "Arkansas", "California", + "Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida", + "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", + "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", + "Maryland", "Massachusetts", "Michigan", "Minnessota", "Mississippi", + "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", + "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", + "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", + "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", + "Vermont", "Virginia", "Washington", "West Virgina", "Wisconsin", + "Wyoming" + ], + $.each(states, function(i, state) { + if (Ox.startsWith(state.toLowerCase(), value)) { + items.push(state); + } + }); + callback(items); }, placeholder: "State" }).addClass("margin").width(96).appendTo(mainPanel); From bf73d4f181d219cbf9530cfc86a1cc598dea66cd Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 18 Feb 2010 14:41:47 +0530 Subject: [PATCH 10/27] autocomplete, continued --- build/js/ox.ui.js | 62 +++++++++++++++++++++++++++++++++++------------ 1 file changed, 46 insertions(+), 16 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index f295c405..c6b637aa 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -1535,6 +1535,7 @@ requires ) .defaults({ autocomplete: null, + id: "", placeholder: "", size: "medium", type: "text" @@ -1551,14 +1552,18 @@ requires .blur(blur) .change(change); if (options.autocomplete) { + self.element = that.$element[0]; + self.menuId = self.options.id + "_menu"; // fixme: we do this in other places ... are we doing it the same way? var name? self.menu = new Ox.Menu({ element: that, + id: self.menuId, offset: { left: 4, top: 0 }, size: self.options.size }); + that.bindEvent("select_" + self.menuId, onSelect); } if (options.type != "textarea") { that.attr({ @@ -1571,12 +1576,12 @@ requires return { id: title.toLowerCase(), // fixme: need function to do lowercase, underscores etc? title: title - } + }; }); self.menu.options({ - items: items + items: items, + selected: 0 }).showMenu(); - that.val(self.menu.options("items")[0].title); } else { self.menu.hideMenu(); } @@ -1592,6 +1597,22 @@ requires $document.unbind("keypress", keypress); } } + function cursor() { + var position, range; + if (arguments.length == 0) { + + } else { + position = arguments[0]; + if (self.element.createTextRange) { + range = self.element.createTextRange(); + range.move("character", position); + range.select(); + } else if (self.element.selectionStart) { + self.element.focus(); + self.element.setSelectionRange(position, position); + } + } + } function focus() { if (that.is(".OxPlaceholder")) { that.val("").removeClass("OxPlaceholder"); @@ -1614,20 +1635,25 @@ requires } }, 50); } - function select(start, end) { - var element = that.$element[0], - range; - if (element.createTextRange) { - range = element.createTextRange(); + function onSelect(event, data) { + var position = that.val().length; + that.val(data.title); + cursor(position); + selectCharacters(position, data.title.length); + } + function selectCharacters(start, end) { + var range; + if (self.element.createTextRange) { + range = self.element.createTextRange(); range.collapse(true); range.moveStart("character", start); range.moveEnd("character", end); range.select(); - } else if (element.setSelectionRange) { - element.setSelectionRange(start, end); - } else if (element.selectionStart) { - element.selectionStart = start; - element.selectionEnd = end; + } else if (self.element.setSelectionRange) { + self.element.setSelectionRange(start, end); + } else if (self.element.selectionStart) { + self.element.selectionStart = start; + self.element.selectionEnd = end; } } return that; @@ -2110,6 +2136,7 @@ requires change_groupId {id, value} checked item of a group has changed click_itemId item not belonging to a group was clicked hide_menuId menu was hidden + select_itemId item was selected */ @@ -2413,13 +2440,14 @@ requires return false; } }); - Ox.print("length", item.options("items").length) item.options("items").length && that.submenus[item.options("id")].showMenu(); // fixme: do we want to switch to this style? item.addClass("OxSelected"); } - that.options({ - selected: position + that.triggerEvent("select", { + id: item.options("id"), + title: item.options("title")[0] // fixme: value or title? }); + self.options.selected = position; } function selectNextItem() { @@ -2511,6 +2539,8 @@ requires self.onChange = function(key, value) { if (key == "items") { constructItems(value); + } else if (key == "selected") { + selectItem(value); } } From 966359bf99668052ad88f296a3bd22a3685d8f3c Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 18 Feb 2010 19:54:17 +0530 Subject: [PATCH 11/27] autocomplete, continued --- build/js/ox.ui.js | 127 ++++++++++++++++++++++++------------------ demos/test/index.html | 16 ++++-- 2 files changed, 83 insertions(+), 60 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index c6b637aa..10b55f0b 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -484,6 +484,7 @@ requires bufferTime = time; } Ox.Event.trigger("key_" + key); + //return false; /* $.each(stack, function(i, v) { // fixme: we dont get the return value! @@ -1563,6 +1564,9 @@ requires }, size: self.options.size }); + self.value = "", + that.bindEvent("click_" + self.menuId, onClick); + that.bindEvent("deselect_" + self.menuId, onDeselect); that.bindEvent("select_" + self.menuId, onSelect); } if (options.type != "textarea") { @@ -1579,10 +1583,10 @@ requires }; }); self.menu.options({ - items: items, - selected: 0 + items: items }).showMenu(); } else { + Ox.print("hiding") self.menu.hideMenu(); } } @@ -1594,35 +1598,22 @@ requires that.addClass("OxPlaceholder").val(that.attr("placeholder")); } if (self.options.autocomplete) { + $document.unbind("keydown", keypress); $document.unbind("keypress", keypress); } } - function cursor() { - var position, range; - if (arguments.length == 0) { - - } else { - position = arguments[0]; - if (self.element.createTextRange) { - range = self.element.createTextRange(); - range.move("character", position); - range.select(); - } else if (self.element.selectionStart) { - self.element.focus(); - self.element.setSelectionRange(position, position); - } - } - } function focus() { if (that.is(".OxPlaceholder")) { that.val("").removeClass("OxPlaceholder"); } if (self.options.autocomplete) { // fixme: different in webkit and firefox (?), see keyboard handler, need generic function + $document.bind("keydown", keypress); $document.bind("keypress", keypress); + self.options.autocomplete(that.val(), autocomplete); } } - function keypress() { + function keypress(event) { setTimeout(function() { var val = that.val(); if (self.options.autocomplete && val != self.options.value) { @@ -1635,25 +1626,29 @@ requires } }, 50); } - function onSelect(event, data) { - var position = that.val().length; + function onClick(event, data) { + Ox.print("onClick", data) that.val(data.title); - cursor(position); - selectCharacters(position, data.title.length); + self.menu.hideMenu(); } - function selectCharacters(start, end) { - var range; - if (self.element.createTextRange) { - range = self.element.createTextRange(); - range.collapse(true); - range.moveStart("character", start); - range.moveEnd("character", end); - range.select(); - } else if (self.element.setSelectionRange) { + function onDeselect(event, data) { + that.val(""); + } + function onSelect(event, data) { + self.value = that.val().substr(0, selection()[0]); + var position = self.value.length; + that.val(data.title); + selection(position); + self.element.setSelectionRange(position, data.title.length); + } + function selection() { + var start, end; + if (arguments.length == 0) { + return [self.element.selectionStart, self.element.selectionEnd]; + } else { + start = arguments[0]; + end = arguments[1] || start; self.element.setSelectionRange(start, end); - } else if (self.element.selectionStart) { - self.element.selectionStart = start; - self.element.selectionEnd = end; } } return that; @@ -2135,8 +2130,10 @@ requires events: change_groupId {id, value} checked item of a group has changed click_itemId item not belonging to a group was clicked + click_menuId {id, value} item not belonging to a group was clicked + deselect_menuId {id, value} item was deselected hide_menuId menu was hidden - select_itemId item was selected + select_menuId {id, value} item was selected */ @@ -2165,8 +2162,9 @@ requires .mouseenter(mouseenter) .mouseleave(mouseleave) .mousemove(mousemove), + hiding = false, itemHeight = self.options.size == "small" ? 12 : (self.options.size == "medium" ? 16 : 20), - menuHeight, + // menuHeight, scrollSpeed = 1, $item; // fixme: used? // fixme: attach all private vars to self? @@ -2228,6 +2226,10 @@ requires value: item.options("title")[0] // fixme: value or title? }); } else { + Ox.Event.trigger("click_" + self.options.id, { + id: item.options("id"), + title: item.options("title")[0] + }); Ox.Event.trigger("click_" + item.options("id")); } if (item.options("title").length == 2) { @@ -2249,6 +2251,7 @@ requires function constructItems(items) { that.items = []; that.$content.empty(); + scrollMenuUp(); $.each(items, function(i, item) { var position; if (item.id) { @@ -2277,7 +2280,11 @@ requires that.$content.append(constructSpace()); } }); - + if (!that.is(":hidden")) { + Ox.print("hide&show") + that.hideMenu(); + that.showMenu(); + } } function constructLine() { @@ -2428,9 +2435,15 @@ requires function selectItem(position) { var item; - Ox.print("selectItem", position) if (self.options.selected > -1) { - that.items[self.options.selected].removeClass("OxSelected"); + item = that.items[self.options.selected] + item.removeClass("OxSelected"); + if (!hiding) { + that.triggerEvent("deselect", { + id: item.options("id"), + title: item.options("title")[0] // fixme: value or title? + }); + } } if (position > -1) { item = that.items[position]; @@ -2442,11 +2455,11 @@ requires }); item.options("items").length && that.submenus[item.options("id")].showMenu(); // fixme: do we want to switch to this style? item.addClass("OxSelected"); + that.triggerEvent("select", { + id: item.options("id"), + title: item.options("title")[0] // fixme: value or title? + }); } - that.triggerEvent("select", { - id: item.options("id"), - title: item.options("title")[0] // fixme: value or title? - }); self.options.selected = position; } @@ -2574,8 +2587,13 @@ requires return false; } }); + hiding = true; selectItem(-1); + hiding = false; scrollMenuUp(); + that.$scrollbars.up.is(":visible") && that.$scrollbars.up.hide(); + that.$scrollbars.down.is(":visible") && that.$scrollbars.down.hide(); + //that.$scrollbars.down.hide(); if (self.options.parent) { self.options.element.removeClass("OxSelected"); } @@ -2615,23 +2633,24 @@ requires height = self.options.element.outerHeight(), left = offset.left + self.options.offset.left + (self.options.side == "bottom" ? 0 : width), top = offset.top + self.options.offset.top + (self.options.side == "bottom" ? height : 0), - maxHeight = Math.floor($window.height() - top - 16); - menuHeight = menuHeight || that.outerHeight(); - Ox.print("menuHeight", menuHeight, "maxHeight", maxHeight); + menuHeight = that.$content.outerHeight(); + menuMaxHeight = Math.floor($window.height() - top - 16), + Ox.print("menuHeight", menuHeight, "menuMaxHeight", menuMaxHeight); if (self.options.parent) { - if (menuHeight > maxHeight) { - top = Ox.limit(top - menuHeight + maxHeight, self.options.parent.offset().top, top); - maxHeight = Math.floor($window.height() - top - 16); + if (menuHeight > menuMaxHeight) { + top = Ox.limit(top - menuHeight + menuMaxHeight, self.options.parent.offset().top, top); + menuMaxHeight = Math.floor($window.height() - top - 16); } } that.css({ left: left + "px", top: top + "px" }).show(); - if (menuHeight > maxHeight) { - Ox.print(maxHeight - itemHeight); - that.$container.height(maxHeight - itemHeight - 8); // margin + if (menuHeight > menuMaxHeight) { + that.$container.height(menuMaxHeight - itemHeight - 8); // margin that.$scrollbars.down.show(); + } else { + that.$container.height(menuHeight); } if (!self.options.parent) { that.gainFocus(); @@ -2728,7 +2747,7 @@ requires ); function parseKeyboard(str) { - var modifiers = str.split(' '), + var modifiers = str.split(" "), key = modifiers.pop(); return { modifiers: modifiers, diff --git a/demos/test/index.html b/demos/test/index.html index 5afe429b..8f9f1eb8 100644 --- a/demos/test/index.html +++ b/demos/test/index.html @@ -343,12 +343,16 @@ "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virgina", "Wisconsin", "Wyoming" - ], - $.each(states, function(i, state) { - if (Ox.startsWith(state.toLowerCase(), value)) { - items.push(state); - } - }); + ]; + if (value === "") { + items = states; + } else { + $.each(states, function(i, state) { + if (state.toLowerCase().indexOf(value) > -1) { + items.push(state); + } + }); + } callback(items); }, placeholder: "State" From db0af09c90279deeff16b34b43a282fba1193972 Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 18 Feb 2010 20:12:53 +0530 Subject: [PATCH 12/27] autocomplete, continued --- build/js/ox.ui.js | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 10b55f0b..ae80941f 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -1625,6 +1625,11 @@ requires } } }, 50); + /* + if (event.keyCode == 38 || event.keyCode == 40) { + return false; + } + */ } function onClick(event, data) { Ox.print("onClick", data) @@ -1632,7 +1637,7 @@ requires self.menu.hideMenu(); } function onDeselect(event, data) { - that.val(""); + that.val(self.value); } function onSelect(event, data) { self.value = that.val().substr(0, selection()[0]); @@ -2623,38 +2628,46 @@ requires }; that.showMenu = function() { - Ox.print("showMenu") + Ox.print("showMenu"); if (!self.options.parent && !that.$layer.parent().length) { that.$layer.appendTo($body); } that.parent().length || that.appendTo($body); + that.css({ + left: "-1000px", + top: "-1000px", + }).show(); var offset = self.options.element.offset(), width = self.options.element.outerWidth(), height = self.options.element.outerHeight(), left = offset.left + self.options.offset.left + (self.options.side == "bottom" ? 0 : width), top = offset.top + self.options.offset.top + (self.options.side == "bottom" ? height : 0), - menuHeight = that.$content.outerHeight(); + menuHeight = that.$content.outerHeight(); // fixme: why is outerHeight 0 when hidden? menuMaxHeight = Math.floor($window.height() - top - 16), - Ox.print("menuHeight", menuHeight, "menuMaxHeight", menuMaxHeight); + Ox.print("menuHeight", menuHeight, "menuMaxHeight", menuMaxHeight, that.items.length); if (self.options.parent) { if (menuHeight > menuMaxHeight) { top = Ox.limit(top - menuHeight + menuMaxHeight, self.options.parent.offset().top, top); menuMaxHeight = Math.floor($window.height() - top - 16); } } + /* that.css({ left: left + "px", top: top + "px" }).show(); + */ + that.css({ + left: left + "px", + top: top + "px" + }); if (menuHeight > menuMaxHeight) { that.$container.height(menuMaxHeight - itemHeight - 8); // margin that.$scrollbars.down.show(); } else { that.$container.height(menuHeight); } - if (!self.options.parent) { - that.gainFocus(); - } + !self.options.parent && that.gainFocus(); that.bindEvent({ key_up: selectPreviousItem, key_down: selectNextItem, From fa042163524bd29a0ae16bbfaa159ba9bc2e5599 Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 18 Feb 2010 20:41:14 +0530 Subject: [PATCH 13/27] autocomplete, continued --- build/js/ox.ui.js | 37 ++++++++++++++----------------------- demos/test/index.html | 2 +- 2 files changed, 15 insertions(+), 24 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index ae80941f..43d282a2 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -1564,7 +1564,6 @@ requires }, size: self.options.size }); - self.value = "", that.bindEvent("click_" + self.menuId, onClick); that.bindEvent("deselect_" + self.menuId, onDeselect); that.bindEvent("select_" + self.menuId, onSelect); @@ -1575,18 +1574,22 @@ requires }); } function autocomplete(items) { + var selected = -1; if (items.length) { - items = $.map(items, function(title) { + items = $.map(items, function(title, position) { + if (that.val().toLowerCase() == title.toLowerCase()) { + selected = position; + } return { id: title.toLowerCase(), // fixme: need function to do lowercase, underscores etc? title: title }; }); self.menu.options({ - items: items + items: items, + selected: selected }).showMenu(); } else { - Ox.print("hiding") self.menu.hideMenu(); } } @@ -1615,21 +1618,12 @@ requires } function keypress(event) { setTimeout(function() { - var val = that.val(); - if (self.options.autocomplete && val != self.options.value) { - self.options.value = val; - if (val === "") { - self.menu.hideMenu(); - } else { - self.options.autocomplete(val, autocomplete); - } + var value = that.val(); + if (self.options.autocomplete && value != self.value) { + self.value = value; + self.options.autocomplete(self.value, autocomplete); } }, 50); - /* - if (event.keyCode == 38 || event.keyCode == 40) { - return false; - } - */ } function onClick(event, data) { Ox.print("onClick", data) @@ -1637,14 +1631,11 @@ requires self.menu.hideMenu(); } function onDeselect(event, data) { - that.val(self.value); + //that.val(self.value); } function onSelect(event, data) { - self.value = that.val().substr(0, selection()[0]); - var position = self.value.length; - that.val(data.title); - selection(position); - self.element.setSelectionRange(position, data.title.length); + //self.value = that.val(); + //that.val(data.title); } function selection() { var start, end; diff --git a/demos/test/index.html b/demos/test/index.html index 8f9f1eb8..19db1a10 100644 --- a/demos/test/index.html +++ b/demos/test/index.html @@ -341,7 +341,7 @@ "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", - "Vermont", "Virginia", "Washington", "West Virgina", "Wisconsin", + "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming" ]; if (value === "") { From f2608df14d38097699e7b1bce62a2c4decba88e3 Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 18 Feb 2010 20:43:23 +0530 Subject: [PATCH 14/27] autocomplete, continued --- build/js/ox.ui.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 43d282a2..a73e4171 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -1574,8 +1574,9 @@ requires }); } function autocomplete(items) { - var selected = -1; + var selected; if (items.length) { + selected = items.length == 1 ? 0 : -1; items = $.map(items, function(title, position) { if (that.val().toLowerCase() == title.toLowerCase()) { selected = position; From a26490d1d39aae02787abfa148d3403e714c447a Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 18 Feb 2010 20:45:23 +0530 Subject: [PATCH 15/27] autocomplete, continued --- build/js/ox.ui.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index a73e4171..93668a99 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -1618,13 +1618,15 @@ requires } } function keypress(event) { - setTimeout(function() { - var value = that.val(); - if (self.options.autocomplete && value != self.value) { - self.value = value; - self.options.autocomplete(self.value, autocomplete); - } - }, 50); + if (event.keyCode != 13) { + setTimeout(function() { + var value = that.val(); + if (self.options.autocomplete && value != self.value) { + self.value = value; + self.options.autocomplete(self.value, autocomplete); + } + }, 50); + } } function onClick(event, data) { Ox.print("onClick", data) From 0139ee331f29b7826fcc0b1e5745b4dea60ae04a Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 18 Feb 2010 20:49:36 +0530 Subject: [PATCH 16/27] autocomplete, continued --- build/js/ox.ui.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 93668a99..18656ef7 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -1574,9 +1574,8 @@ requires }); } function autocomplete(items) { - var selected; + var selected = 0; if (items.length) { - selected = items.length == 1 ? 0 : -1; items = $.map(items, function(title, position) { if (that.val().toLowerCase() == title.toLowerCase()) { selected = position; @@ -1625,7 +1624,7 @@ requires self.value = value; self.options.autocomplete(self.value, autocomplete); } - }, 50); + }, 25); } } function onClick(event, data) { From f023963487241747d1d3633ed7cead6275509b67 Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 18 Feb 2010 20:53:43 +0530 Subject: [PATCH 17/27] autocomplete, continued --- build/js/ox.ui.js | 21 ++++----------------- 1 file changed, 4 insertions(+), 17 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 18656ef7..0fd39726 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -1565,8 +1565,8 @@ requires size: self.options.size }); that.bindEvent("click_" + self.menuId, onClick); - that.bindEvent("deselect_" + self.menuId, onDeselect); - that.bindEvent("select_" + self.menuId, onSelect); + //that.bindEvent("deselect_" + self.menuId, onDeselect); + //that.bindEvent("select_" + self.menuId, onSelect); } if (options.type != "textarea") { that.attr({ @@ -2129,9 +2129,9 @@ requires change_groupId {id, value} checked item of a group has changed click_itemId item not belonging to a group was clicked click_menuId {id, value} item not belonging to a group was clicked - deselect_menuId {id, value} item was deselected + deselect_menuId {id, value} item was deselected not needed, not implemented hide_menuId menu was hidden - select_menuId {id, value} item was selected + select_menuId {id, value} item was selected not needed, not implemented */ @@ -2160,7 +2160,6 @@ requires .mouseenter(mouseenter) .mouseleave(mouseleave) .mousemove(mousemove), - hiding = false, itemHeight = self.options.size == "small" ? 12 : (self.options.size == "medium" ? 16 : 20), // menuHeight, scrollSpeed = 1, @@ -2436,12 +2435,6 @@ requires if (self.options.selected > -1) { item = that.items[self.options.selected] item.removeClass("OxSelected"); - if (!hiding) { - that.triggerEvent("deselect", { - id: item.options("id"), - title: item.options("title")[0] // fixme: value or title? - }); - } } if (position > -1) { item = that.items[position]; @@ -2453,10 +2446,6 @@ requires }); item.options("items").length && that.submenus[item.options("id")].showMenu(); // fixme: do we want to switch to this style? item.addClass("OxSelected"); - that.triggerEvent("select", { - id: item.options("id"), - title: item.options("title")[0] // fixme: value or title? - }); } self.options.selected = position; } @@ -2585,9 +2574,7 @@ requires return false; } }); - hiding = true; selectItem(-1); - hiding = false; scrollMenuUp(); that.$scrollbars.up.is(":visible") && that.$scrollbars.up.hide(); that.$scrollbars.down.is(":visible") && that.$scrollbars.down.hide(); From 2f233c28e48c9a5a0a524d3839e78daa7d5e7ae3 Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 18 Feb 2010 21:16:25 +0530 Subject: [PATCH 18/27] autocomplete, continued --- build/js/ox.ui.js | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 0fd39726..88a429c5 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -1629,16 +1629,9 @@ requires } function onClick(event, data) { Ox.print("onClick", data) - that.val(data.title); + that.focus().val(data.title); self.menu.hideMenu(); } - function onDeselect(event, data) { - //that.val(self.value); - } - function onSelect(event, data) { - //self.value = that.val(); - //that.val(data.title); - } function selection() { var start, end; if (arguments.length == 0) { @@ -2631,12 +2624,6 @@ requires menuMaxHeight = Math.floor($window.height() - top - 16); } } - /* - that.css({ - left: left + "px", - top: top + "px" - }).show(); - */ that.css({ left: left + "px", top: top + "px" From 8f18c726b640c2555ca3aa35bf061240785d085b Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 18 Feb 2010 23:15:37 +0530 Subject: [PATCH 19/27] autocomplete, continued --- build/css/ox.ui.classic.css | 4 ++++ build/css/ox.ui.css | 1 + build/css/ox.ui.modern.css | 4 ++++ build/js/ox.js | 8 ++++++++ build/js/ox.ui.js | 2 +- demos/test/index.html | 5 +++-- 6 files changed, 21 insertions(+), 3 deletions(-) diff --git a/build/css/ox.ui.classic.css b/build/css/ox.ui.classic.css index 5aaf4c35..d3209358 100644 --- a/build/css/ox.ui.classic.css +++ b/build/css/ox.ui.classic.css @@ -4,6 +4,10 @@ body.OxThemeClassic { .OxThemeClassic div { color: rgb(16, 16, 16); } +.OxThemeClassic .OxHighlight { + background: rgb(255, 255, 0); +} + /* ================================================================================ diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index 2cbb5bdf..d25a7944 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -20,6 +20,7 @@ div, input { td { padding: 0px; } + /* ================================================================================ Core diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css index 09854aa3..3131830f 100644 --- a/build/css/ox.ui.modern.css +++ b/build/css/ox.ui.modern.css @@ -4,6 +4,10 @@ body.OxThemeModern { .OxThemeModern div { color: rgb(240, 240, 240); } +.OxThemeModern .OxHighlight { + background: rgb(255, 255, 0); + color: rgb(0, 0, 0); +} /* ================================================================================ diff --git a/build/js/ox.js b/build/js/ox.js index a361cb04..ed0bf3da 100644 --- a/build/js/ox.js +++ b/build/js/ox.js @@ -1360,6 +1360,14 @@ Ox.startsWith = function(str, sub) { return str.substr(0, sub.length) === sub; }; +Ox.stripTags = function(str) { + /* + >>> Ox.stripTags("foo") + foo + */ + return str.replace(/(<.*?>)/gi, ""); +}; + Ox.toCamelCase = function(str) { /* >>> Ox.toCamelCase("foo-bar-baz") diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 88a429c5..8d697e76 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -1629,7 +1629,7 @@ requires } function onClick(event, data) { Ox.print("onClick", data) - that.focus().val(data.title); + that.focus().val(Ox.stripTags(data.title)); self.menu.hideMenu(); } function selection() { diff --git a/demos/test/index.html b/demos/test/index.html index 19db1a10..241d5c3f 100644 --- a/demos/test/index.html +++ b/demos/test/index.html @@ -330,7 +330,8 @@ id: "state", autocomplete: function(value, callback) { value = value.toLowerCase(); - var items = []; + var items = [], + regexp = new RegExp("(" + value + ")", "ig"), states = [ "Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida", @@ -349,7 +350,7 @@ } else { $.each(states, function(i, state) { if (state.toLowerCase().indexOf(value) > -1) { - items.push(state); + items.push(state.replace(regexp, "$1")); } }); } From 07ec8f30f7be6f6e25f84d20aea18c8a4c25a970 Mon Sep 17 00:00:00 2001 From: Rolux Date: Fri, 19 Feb 2010 00:38:41 +0530 Subject: [PATCH 20/27] autocomplete, continued --- build/js/ox.ui.js | 6 +++--- demos/test/index.html | 6 ++++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 8d697e76..a06256ea 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -1537,7 +1537,7 @@ requires .defaults({ autocomplete: null, id: "", - placeholder: "", + placeholder: "", // can be [], will result in select size: "medium", type: "text" }) @@ -1577,7 +1577,7 @@ requires var selected = 0; if (items.length) { items = $.map(items, function(title, position) { - if (that.val().toLowerCase() == title.toLowerCase()) { + if (that.val().toLowerCase() == Ox.stripTags(title.toLowerCase())) { selected = position; } return { @@ -1622,7 +1622,7 @@ requires var value = that.val(); if (self.options.autocomplete && value != self.value) { self.value = value; - self.options.autocomplete(self.value, autocomplete); + self.options.autocomplete(value, autocomplete); } }, 25); } diff --git a/demos/test/index.html b/demos/test/index.html index 241d5c3f..96b29e51 100644 --- a/demos/test/index.html +++ b/demos/test/index.html @@ -331,7 +331,6 @@ autocomplete: function(value, callback) { value = value.toLowerCase(); var items = [], - regexp = new RegExp("(" + value + ")", "ig"), states = [ "Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida", @@ -350,7 +349,10 @@ } else { $.each(states, function(i, state) { if (state.toLowerCase().indexOf(value) > -1) { - items.push(state.replace(regexp, "$1")); + items.push(state.replace( + new RegExp("(" + value + ")", "ig"), + "$1") + ); } }); } From c533678f44332b7fa0d6fe17b01dbe4f73c5c24e Mon Sep 17 00:00:00 2001 From: Rolux Date: Fri, 19 Feb 2010 15:54:02 +0530 Subject: [PATCH 21/27] autocomplete, continued --- build/css/ox.ui.classic.css | 9 +- build/css/ox.ui.css | 30 ++- build/js/ox.ui.js | 247 +++++++++++++++++++---- build/png/ox.ui.classic/buttonClear.png | Bin 0 -> 2928 bytes build/png/ox.ui.classic/buttonSelect.png | Bin 0 -> 2905 bytes demos/test/index.html | 104 +++++++--- source/psd/buttons.psd | Bin 34380 -> 35290 bytes 7 files changed, 308 insertions(+), 82 deletions(-) create mode 100644 build/png/ox.ui.classic/buttonClear.png create mode 100644 build/png/ox.ui.classic/buttonSelect.png diff --git a/build/css/ox.ui.classic.css b/build/css/ox.ui.classic.css index d3209358..fb8b443a 100644 --- a/build/css/ox.ui.classic.css +++ b/build/css/ox.ui.classic.css @@ -58,6 +58,7 @@ Forms color: rgb(64, 64, 64); } .OxThemeClassic .OxButton, +.OxThemeClassic div.OxInput, .OxThemeClassic .OxRange { //background: -moz-linear-gradient(left top, left bottom, from(rgb(192, 192, 192)), to(rgb(160, 160, 160))); //background: -webkit-gradient(linear, left top, left bottom, from(rgb(192, 192, 192)), to(rgb(160, 160, 160))); @@ -89,17 +90,17 @@ Forms border-bottom: 1px solid rgb(192, 192, 192); } -.OxThemeClassic .OxInput, +.OxThemeClassic input.OxInput, .OxThemeClassic .OxTrack { background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(255, 255, 255)); background: -webkit-gradient(linear, left top, left bottom, from(rgb(224, 224, 224)), to(rgb(255, 255, 255))); } -.OxThemeClassic .OxInput:focus { +.OxThemeClassic input.OxInput:focus { border: 1px solid rgb(160, 160, 160); -moz-box-shadow: 0 0 2px rgb(128, 128, 128); - -webkit-box-shadow: 0 2 4px rgb(128, 128, 128); + -webkit-box-shadow: 0 0 2px rgb(128, 128, 128); } -.OxThemeClassic .OxInput.OxPlaceholder { +.OxThemeClassic input.OxInput.OxPlaceholder { color: rgb(160, 160, 160) } diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index d25a7944..eecdc261 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -274,6 +274,32 @@ OxButtonGroup } /* -------------------------------------------------------------------------------- +OxInput +-------------------------------------------------------------------------------- +*/ +div.OxInput { + -moz-border-radius: 8px; + -webkit-border-radius: 8px; +} +div.OxInput.OxMedium { + height: 14px; +} +div.OxInput > .OxButton:first-child { + float: left; + margin-top: -1px; +} +div.OxInput > .OxButton:last-child { + float: left; + margin-left: -1px; + margin-top: -1px; +} +input.OxInput { + float: left; + margin-left: -1px; + margin-top: -1px; +} +/* +-------------------------------------------------------------------------------- OxRange -------------------------------------------------------------------------------- */ @@ -319,7 +345,7 @@ OxSelect -------------------------------------------------------------------------------- */ .OxSelect.OxMedium { - padding: 0 8px 0 8px; + } .OxSelect > .OxButton { text-align: left; @@ -331,7 +357,7 @@ OxSelect -webkit-user-select: none; } .OxSelect.OxMedium > .OxSymbol { - margin: -16px 8px 0 8px; + margin: -16px 0 0 8px; } /* diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index a06256ea..74520f24 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -1530,54 +1530,157 @@ requires */ Ox.Input = function(options, self) { + + /* options: + * autocomplete function, or array of values, or dict with array of values per label or placeholder + * clear boolean, clear button, or not + * highlight boolean, highlight value in autocomplete menu, or not + * id + * label string or array (select) -- label and placeholder are mutually exclusive + * labelWidth integer (px) + * placeholder string or array (select) -- label and placeholder are mutually exclusive + * selected integer, selected label or placeholder + * size "large", "medium" or "small" + * type "text", "password", "textarea", etc. + */ + var self = self || {}, - that = new Ox.Element( - options.type == "textarea" ? "textarea" : "input", self - ) + that = new Ox.Element("div", self) .defaults({ autocomplete: null, + clear: false, + highlight: false, id: "", - placeholder: "", // can be [], will result in select + label: "", + labelWidth: 0, + placeholder: "", + selected: 0, size: "medium", type: "text" }) .options(options || {}) - .attr({ - placeholder: self.options.placeholder + .addClass("OxInput Ox" + Ox.toTitleCase(self.options.size)), + autocomplete; + + if (self.options.label) { + self.options.label = Ox.makeArray(self.options.label); + self.label = self.options.label[0]; + } else if (self.options.placeholder) { + self.options.placeholder = Ox.makeArray(self.options.placeholder); + self.placeholder = self.options.placeholder[0]; + } + if (Ox.isArray(self.options.autocomplete)) { + autocomplete = self.options.autocomplete; + self.options.autocomplete = {}; + self.options.autocomplete[self.placeholder] = autocomplete; + } + + if (self.options.label) { + that.$label = "foo"; + } else if (self.options.placeholder.length > 1) { + that.$select = new Ox.Button({ + style: "symbol", + type: "image", + value: "select" }) - .addClass( - "OxInput Ox" + Ox.toTitleCase(self.options.size) + - " OxPlaceholder" - ) - .focus(focus) - .blur(blur) - .change(change); - if (options.autocomplete) { - self.element = that.$element[0]; - self.menuId = self.options.id + "_menu"; // fixme: we do this in other places ... are we doing it the same way? var name? - self.menu = new Ox.Menu({ + .click(select) + .appendTo(that); + self.placeholderId = self.options.id + "_placeholder"; + self.placeholderMenu = new Ox.Menu({ element: that, - id: self.menuId, + id: self.placeholderId, + items: $.map(self.options.placeholder, function(title, position) { + return { + checked: position == self.options.selected, + id: title.toLowerCase(), + group: self.placeholderId, // fixme: same id, works here, but should be different + title: title + }; + }) + }); + that.bindEvent("change_" + self.placeholderId, changePlaceholder); + } + + that.$input = new Ox.Element( + self.options.type == "textarea" ? "textarea" : "input", self + ) + .attr({ + placeholder: self.placeholder, + type: self.options.type == "textarea" ? null : self.options.type + }) + .addClass( + "OxInput Ox" + Ox.toTitleCase(self.options.size) + + " OxPlaceholder" + ) + .focus(focus) + .blur(blur) + .change(change) + .appendTo(that); + + if (self.options.clear) { + that.$clear = new Ox.Button({ + style: "symbol", + type: "image", + value: "clear" + }) + .click(clear) + .appendTo(that); + } + + if (options.autocomplete) { + self.autocompleteId = self.options.id + "_menu"; // fixme: we do this in other places ... are we doing it the same way? var name? + self.autocompleteMenu = new Ox.Menu({ + element: that, + id: self.autocompleteId, offset: { left: 4, top: 0 }, size: self.options.size }); - that.bindEvent("click_" + self.menuId, onClick); - //that.bindEvent("deselect_" + self.menuId, onDeselect); - //that.bindEvent("select_" + self.menuId, onSelect); + that.bindEvent("click_" + self.autocompleteId, onClick); } - if (options.type != "textarea") { - that.attr({ - type: self.options.type - }); + + that.bindEvent({ + key_enter: submit, + key_escape: cancel + }); + + function autocomplete(value, callback) { + value = value.toLowerCase(); + var items = []; + if (value === "") { + items = self.options.autocomplete[self.placeholder]; + } else { + $.each(self.options.autocomplete[self.placeholder], function(i, item) { + if (item.toLowerCase().indexOf(value) > -1) { + if (self.options.highlight) { + item = item.replace( + new RegExp("(" + value + ")", "ig"), + "$1" + ); + } + items.push(item); + } + }); + } + callback(items); } - function autocomplete(items) { + + function call() { + var value = that.$input.val(); + if (self.options.autocomplete) { + Ox.isFunction(self.options.autocomplete) ? + self.options.autocomplete(value, callback) : + autocomplete(value, callback); + } + } + + function callback(items) { var selected = 0; if (items.length) { items = $.map(items, function(title, position) { - if (that.val().toLowerCase() == Ox.stripTags(title.toLowerCase())) { + if (that.$input.val().toLowerCase() == Ox.stripTags(title.toLowerCase())) { selected = position; } return { @@ -1585,54 +1688,88 @@ requires title: title }; }); - self.menu.options({ + self.placeholderMenu.hideMenu(); + self.autocompleteMenu.options({ items: items, selected: selected }).showMenu(); } else { - self.menu.hideMenu(); + self.autocompleteMenu.hideMenu(); } } + + function cancel() { + that.$input.trigger("blur"); + } + + function clear() { + that.$input.val(""); + } + function change() { } + + function changePlaceholder(event, data) { + Ox.print("cP", event, data); + self.placeholder = data.value; // fixme: could be "title" as well + if (that.$input.is(".OxPlaceholder")) { + that.$input.val(self.placeholder); + } + call(); + } + function blur() { - if (that.val() === "") { - that.addClass("OxPlaceholder").val(that.attr("placeholder")); + that.loseFocus(); + if (that.$input.val() === "") { + that.$input.addClass("OxPlaceholder").val(that.$input.attr("placeholder")); } if (self.options.autocomplete) { $document.unbind("keydown", keypress); $document.unbind("keypress", keypress); } } + function focus() { - if (that.is(".OxPlaceholder")) { - that.val("").removeClass("OxPlaceholder"); + that.gainFocus(); + if (that.$input.is(".OxPlaceholder")) { + that.$input.val("").removeClass("OxPlaceholder"); } if (self.options.autocomplete) { // fixme: different in webkit and firefox (?), see keyboard handler, need generic function $document.bind("keydown", keypress); $document.bind("keypress", keypress); - self.options.autocomplete(that.val(), autocomplete); + Ox.isFunction(self.options.autocomplete) ? + self.options.autocomplete(that.$input.val(), callback) : + autocomplete(that.$input.val(), callback); } } + function keypress(event) { if (event.keyCode != 13) { setTimeout(function() { - var value = that.val(); - if (self.options.autocomplete && value != self.value) { + var value = that.$input.val(); + if (value != self.value) { self.value = value; - self.options.autocomplete(value, autocomplete); + call(); } }, 25); } } + function onClick(event, data) { Ox.print("onClick", data) - that.focus().val(Ox.stripTags(data.title)); - self.menu.hideMenu(); + that.$input.focus().val(Ox.stripTags(data.title)); + self.autocompleteMenu.hideMenu(); + submit(); } + + function select() { + self.placeholderMenu.showMenu(); + } + function selection() { + // fixme: not used! var start, end; if (arguments.length == 0) { return [self.element.selectionStart, self.element.selectionEnd]; @@ -1642,7 +1779,22 @@ requires self.element.setSelectionRange(start, end); } } + + function submit() { + that.$input.trigger("blur"); + that.triggerEvent("submit", that.$input.val()); + } + + that.width = function(value) { + that.$element.width(value); + that.$input.width(value - 2 - self.options.labelWidth - + (self.options.placeholder.length > 1) * 21 - + self.options.clear * 21); + return that; + } + return that; + }; /* @@ -1874,7 +2026,7 @@ requires Ox.Select = function(options, self) { var self = self || {}, - that = new Ox.Element("div", self) + that = new Ox.Element("div", self) // fixme: do we use "div", or {}, or "", by default? .defaults({ id: "", items: [], @@ -1945,7 +2097,7 @@ requires that.width = function(val) { // fixme: silly hack, and won't work for css() - that.$element.width(val); + that.$element.width(val + 16); that.$button.width(val); that.$symbol.width(val); return that; @@ -1982,14 +2134,21 @@ requires Ox.MainMenu = function(options, self) { + /* options: + * extras + * menus + * size + */ + var self = self || {}, that = new Ox.Bar({}, self) .defaults({ + extras: [], menus: [], size: "medium" }) .options(options || {}) - .addClass("OxMainMenu Ox" + Ox.toTitleCase(self.options.size)) // fixme: bar should accept small/medium/large + .addClass("OxMainMenu Ox" + Ox.toTitleCase(self.options.size)) // fixme: bar should accept small/medium/large ... like toolbar .click(click) .mousemove(mousemove); @@ -2067,11 +2226,11 @@ requires }; - that.addMenuAfter = function() { + that.addMenuAfter = function(id) { }; - that.addMenuBefore = function() { + that.addMenuBefore = function(id) { }; diff --git a/build/png/ox.ui.classic/buttonClear.png b/build/png/ox.ui.classic/buttonClear.png new file mode 100644 index 0000000000000000000000000000000000000000..620e25bdb934db9c191d4a6609571df92f468a42 GIT binary patch literal 2928 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 DQhHq; literal 0 HcmV?d00001 diff --git a/demos/test/index.html b/demos/test/index.html index 96b29e51..85b54962 100644 --- a/demos/test/index.html +++ b/demos/test/index.html @@ -290,6 +290,12 @@ type: "text", value: "Foo" }).addClass("margin").appendTo(mainPanel); + Ox.Button({ + selectable: true, + size: size, + type: "text", + value: "Bar" + }).addClass("margin").appendTo(mainPanel); Ox.Select({ id: "select1", items: [ @@ -326,40 +332,74 @@ } ] }).addClass("margin").width(96).appendTo(mainPanel); + Ox.Button({ + selectable: true, + size: size, + type: "text", + value: "Foo" + }).addClass("margin").appendTo(mainPanel); + Ox.Button({ + selectable: true, + size: size, + type: "text", + value: "Bar" + }).addClass("margin").appendTo(mainPanel); Ox.Input({ - id: "state", - autocomplete: function(value, callback) { - value = value.toLowerCase(); - var items = [], - states = [ - "Alabama", "Alaska", "Arizona", "Arkansas", "California", - "Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida", - "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", - "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", - "Maryland", "Massachusetts", "Michigan", "Minnessota", "Mississippi", - "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", - "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", - "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", - "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", - "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", - "Wyoming" - ]; - if (value === "") { - items = states; - } else { - $.each(states, function(i, state) { - if (state.toLowerCase().indexOf(value) > -1) { - items.push(state.replace( - new RegExp("(" + value + ")", "ig"), - "$1") - ); - } - }); - } - callback(items); + autocomplete: { + City: [ + "Albuquerque", + "Austin", + "Baltimore", + "Boston", + "Chicago", + "Cleveland", + "Dallas", + "Denver", + "Detroit", + "El Paso", + "Honululu", + "Houston", + "Kansas City", + "Las Vegas", + "Los Angeles", + "Memphis", + "Miami", + "Minneapolis", + "Nashville", + "New Orleans", + "New York", + "Oklahoma City", + "Philadelphia", + "Phoenix", + "Pittsburgh", + "Portland", + "San Antonio", + "San Diego", + "San Francisco", + "St. Louis", + "St. Paul", + "Seattle", + "Washington" + ], + State: [ + "Alabama", "Alaska", "Arizona", "Arkansas", "California", + "Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida", + "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", + "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", + "Maryland", "Massachusetts", "Michigan", "Minnessota", "Mississippi", + "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", + "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", + "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", + "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", + "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", + "Wyoming" + ] }, - placeholder: "State" - }).addClass("margin").width(96).appendTo(mainPanel); + clear: true, + highlight: true, + id: "citystate", + placeholder: ["City", "State"] + }).addClass("margin").width(128).appendTo(mainPanel); //*/ function switchTheme() { if (Ox.theme() == "classic") { diff --git a/source/psd/buttons.psd b/source/psd/buttons.psd index c307394fbde1407a56ca6075d94b8734266a44d7..06c894ff2ff9d61ebe775a4c1e14a2d2a29e9878 100644 GIT binary patch delta 1678 zcmdr~ZA@EL7=BwSBCf!aWdoEsHi^p^?B14s>TGCB6V^a9%9Id9h8$ zkb&FoKQYc^F-)h+upyx?h(=k*bi*wM2dHxaHLz)PM$M^Oy|M|lo#>8{--jnz1 zdCq;#`}HyD949?qEV(+ebwRq3Wy%;u8LNAmRp={}dPZ5wsPszifehwvQoiPlJ(4Y2 zMyXP$D$G@Cw#sZ_S))c_s?xD0MrE`x8ne>(m262`!fGp(RTVm=QEf4rO_dg{xl&^? znpky(T5Do;=Ert?WT!tEff}T4QyMObX)Kz@4byust1M(t&KrUn?CgOGh(7 zf~VZ~c3m`AE>9=ciHVFp?p@m^iQPA5E0KEZn$C2tD;3m zrNv+F`}x6FyYF2(GW3Y^@tH-{#Ena>OD_?S*K9t2md`oW_wD&}pH08#&-csc9ko9V z9zOh5D`*Y}=0wJR|&sdz6DDzE!h2%-Gz$)g<~Xw`e&kLp%tR#gNzV7`_aU&_+tGaK6AhLU{2S|4gy)+Lmg_R z+tzMt@ucUVz0+yOl039baDxrn(OSSGwzPNKU%JD#b$twL?QSqYy)VV-Uv~j>E0BO+A{SRkVY4QzVK?8SeIp=btg;sVo2h delta 1088 zcmcaLndwXq(*#Avij7K-nZyh%bqx)4jm$y}46F=Itqjby4GgUeCQCCL;E>v!$n3?a zU}gZ@}VQFM&YVPE0wD~m4OD0t}M<+LPS0g7AM*~-5 zCu0{=7ehx=6H`M|7e^y=Am2v6Br|RDUat7f796s^?o1X=p1v$h3?Lu`CQ%5mtN~bv zlMx0Oz@oZfQ8orfAkDLRUg&pzRUWVe4@iR92uOgW6reZ(s0zqr7TdflRh6keWKx{` z*XQfM&TIc?uxpvS=jqL&?|$2TxWp|lan*F+R&Z z%^NEi`6h2^GoGwjE;xBX6W?TkO4iBz?Glsafmpvv01umg@~w8B!}*e+nmJ)G>@DOvK6;UU9!hX4QH0?EJs-vi0tz;OBw46n~X5*&V@ ja0IeH1H<(@FnoW*Nr(tU7NQcO3t|GqG?2+4JCGp&7^p0> From 133753350bb83a87eac049c67a10db58aff73ca6 Mon Sep 17 00:00:00 2001 From: Rolux Date: Fri, 19 Feb 2010 16:04:51 +0530 Subject: [PATCH 22/27] autocomplete, continued --- build/js/ox.ui.js | 21 ++++++++++++++------- demos/test/index.html | 5 +++-- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 74520f24..647c629a 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -1564,10 +1564,10 @@ requires if (self.options.label) { self.options.label = Ox.makeArray(self.options.label); - self.label = self.options.label[0]; + self.label = self.options.label[self.options.selected]; } else if (self.options.placeholder) { self.options.placeholder = Ox.makeArray(self.options.placeholder); - self.placeholder = self.options.placeholder[0]; + self.placeholder = self.options.placeholder[self.options.selected]; } if (Ox.isArray(self.options.autocomplete)) { autocomplete = self.options.autocomplete; @@ -1596,7 +1596,11 @@ requires group: self.placeholderId, // fixme: same id, works here, but should be different title: title }; - }) + }), + offset: { + left: 4, + top: 0 + } }); that.bindEvent("change_" + self.placeholderId, changePlaceholder); } @@ -1650,7 +1654,7 @@ requires value = value.toLowerCase(); var items = []; if (value === "") { - items = self.options.autocomplete[self.placeholder]; + // items = self.options.autocomplete[self.placeholder]; } else { $.each(self.options.autocomplete[self.placeholder], function(i, item) { if (item.toLowerCase().indexOf(value) > -1) { @@ -1699,11 +1703,12 @@ requires } function cancel() { - that.$input.trigger("blur"); + that.$input.blur(); } function clear() { - that.$input.val(""); + that.$input.val("").focus(); + //call(); } function change() { @@ -1715,8 +1720,10 @@ requires self.placeholder = data.value; // fixme: could be "title" as well if (that.$input.is(".OxPlaceholder")) { that.$input.val(self.placeholder); + } else { + that.$input.focus(); + call(); } - call(); } function blur() { diff --git a/demos/test/index.html b/demos/test/index.html index 85b54962..88d15d91 100644 --- a/demos/test/index.html +++ b/demos/test/index.html @@ -398,8 +398,9 @@ clear: true, highlight: true, id: "citystate", - placeholder: ["City", "State"] - }).addClass("margin").width(128).appendTo(mainPanel); + placeholder: ["City", "State"], + selected: 1 + }).addClass("margin").width(160).appendTo(mainPanel); //*/ function switchTheme() { if (Ox.theme() == "classic") { From 111d3ca3260382308cdf3babfc0c9d2865481a40 Mon Sep 17 00:00:00 2001 From: Rolux Date: Fri, 19 Feb 2010 16:27:19 +0530 Subject: [PATCH 23/27] autocomplete, continued --- build/css/ox.ui.css | 7 +++++-- build/js/ox.ui.js | 13 +++++++++++-- demos/test/index.html | 35 +++++++++++++++++++++++++++++++++++ 3 files changed, 51 insertions(+), 4 deletions(-) diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index eecdc261..2238a037 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -430,11 +430,14 @@ Menus padding-top: 2px; font-size: 9px; } -.OxMainMenu .OxTitle.OxSelected { +.OxMainMenu > .OxTitle.OxSelected { background: rgb(48, 48, 48); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(80, 80, 80)), color-stop(1, rgb(48, 48, 48))); } - +.OxMainMenu > .OxExtras { + float: right; + padding: 4px 12px 0 0; +} .OxMenu { diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 647c629a..214b1469 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -1720,6 +1720,7 @@ requires self.placeholder = data.value; // fixme: could be "title" as well if (that.$input.is(".OxPlaceholder")) { that.$input.val(self.placeholder); + //that.$input.focus(); } else { that.$input.focus(); call(); @@ -2165,8 +2166,7 @@ requires that.titles = []; that.layer = $("
").addClass("OxLayer"); - $.each(options.menus, function(position, menu) { - var event = + $.each(self.options.menus, function(position, menu) { that.titles[position] = $("
") .addClass("OxTitle") .html(menu.title) @@ -2180,6 +2180,15 @@ requires that.bindEvent("hide_" + that.menus[position].options("id"), onHideMenu); }); + if (self.options.extras.length) { + that.extras = $("
") + .addClass("OxExtras") + .appendTo(that.$element); + $.each(self.options.extras, function(position, extra) { + extra.appendTo(that.extras); + }); + } + function click(event) { var $target = $(event.target), position = typeof $target.data("position") != "undefined" ? diff --git a/demos/test/index.html b/demos/test/index.html index 88d15d91..7f0f6aa9 100644 --- a/demos/test/index.html +++ b/demos/test/index.html @@ -60,6 +60,41 @@ })*/; var mainMenu = new Ox.MainMenu({ + extras: [ + new Ox.Input({ + autocomplete: { + "Find: Director": [ + "Luis Buñuel", + "Adam Curtis", + "Guy Debord", + "Rainer Werner Fassbinder", + "Jean-Luc Godard", + "Todd Haynes", + "Alfred Hitchcock", + "David Lynch", + "Jonas Mekas", + "Martin Scorsese" + ], + "Find: Title": [ + "A bout de souffle", + "Casino", + "Diaries, Notes and Sketches", + "L'age d'or", + "Far From Heaven", + "In girum imus nocte et consumimur igni", + "It Felt Like a Kiss", + "Mulholland Dr.", + "Querelle", + "Vertigo" + ] + }, + clear: true, + highlight: true, + id: "find", + placeholder: ["Find: Director", "Find: Title"], + selected: 1 + }).width(256) + ], menus: [ { id: "oxjs", From 45281c60a2b62558f32f85e95903d0ed39da247c Mon Sep 17 00:00:00 2001 From: Rolux Date: Fri, 19 Feb 2010 16:35:52 +0530 Subject: [PATCH 24/27] updating modern theme --- build/css/ox.ui.modern.css | 1 + build/png/ox.ui.modern/buttonClear.png | Bin 0 -> 2895 bytes build/png/ox.ui.modern/buttonSelect.png | Bin 0 -> 2888 bytes 3 files changed, 1 insertion(+) create mode 100644 build/png/ox.ui.modern/buttonClear.png create mode 100644 build/png/ox.ui.modern/buttonSelect.png diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css index 3131830f..1dea9ac2 100644 --- a/build/css/ox.ui.modern.css +++ b/build/css/ox.ui.modern.css @@ -49,6 +49,7 @@ Forms color: rgb(192, 192, 192); } .OxThemeModern .OxButton, +.OxThemeModern div.OxInput, .OxThemeModern .OxRange { background: -moz-linear-gradient(top, rgb(96, 96, 96), rgb(64, 64, 64)); background: -webkit-gradient(linear, left top, left bottom, from(rgb(96, 96, 96)), to(rgb(64, 64, 64))); diff --git a/build/png/ox.ui.modern/buttonClear.png b/build/png/ox.ui.modern/buttonClear.png new file mode 100644 index 0000000000000000000000000000000000000000..4a6a7c14e51b9fc6ead8e9e1e8fa484d57972e2e GIT binary patch literal 2895 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 literal 0 HcmV?d00001 diff --git a/build/png/ox.ui.modern/buttonSelect.png b/build/png/ox.ui.modern/buttonSelect.png new file mode 100644 index 0000000000000000000000000000000000000000..6b5b17cba369f13767d0538043db0f2e1bb81c14 GIT binary patch literal 2888 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 m%+`v>U0@IF00030{{sMyIBChD{-|sK0000 Date: Fri, 19 Feb 2010 17:17:13 +0530 Subject: [PATCH 25/27] fix for firefox keypress event --- build/js/ox.ui.js | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 214b1469..57352b71 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -454,10 +454,30 @@ requires $(function() { // fixme: how to do this better? - if ($.browser.safari) { - $document.keydown(keypress); - } else { + // in firefox, keypress doesn't fire for up/down + // if the cursor is at the start/end of an input element + if ($.browser.mozilla) { $document.keypress(keypress); + $document.keydown(function(event) { + var $element = $("input:focus"); + if ($element.length) { + console.log("@", $element[0].selectionStart, $element[0].selectionEnd) + if ( + ( + keyNames[event.keyCode] == "up" && + $element[0].selectionStart + $element[0].selectionEnd == 0 + ) || ( + keyNames[event.keyCode] == "down" && + $element[0].selectionStart == $element.val().length && + $element[0].selectionEnd == $element.val().length + ) + ) { + keypress(event); + } + } + }); + } else { + $document.keydown(keypress); } }); function keypress(event) { From ff8f286f77339f8c297b1be991ae8d32d03c65d8 Mon Sep 17 00:00:00 2001 From: Rolux Date: Fri, 19 Feb 2010 19:49:48 +0530 Subject: [PATCH 26/27] autocomplete, continued --- build/js/ox.ui.js | 8 ++++++-- demos/test/index.html | 37 ++++++++++++++++++++++++------------- 2 files changed, 30 insertions(+), 15 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 57352b71..e9f99646 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -454,8 +454,9 @@ requires $(function() { // fixme: how to do this better? - // in firefox, keypress doesn't fire for up/down + // in firefox on mac, keypress doesn't fire for up/down // if the cursor is at the start/end of an input element + // on linux, it doesn't seem to fire if the input element has focus if ($.browser.mozilla) { $document.keypress(keypress); $document.keydown(function(event) { @@ -1652,6 +1653,9 @@ requires } if (options.autocomplete) { + that.$input.attr({ + autocomplete: "off" + }); self.autocompleteId = self.options.id + "_menu"; // fixme: we do this in other places ... are we doing it the same way? var name? self.autocompleteMenu = new Ox.Menu({ element: that, @@ -1701,7 +1705,7 @@ requires } function callback(items) { - var selected = 0; + var selected = -1; if (items.length) { items = $.map(items, function(title, position) { if (that.$input.val().toLowerCase() == Ox.stripTags(title.toLowerCase())) { diff --git a/demos/test/index.html b/demos/test/index.html index 7f0f6aa9..fdd9cd85 100644 --- a/demos/test/index.html +++ b/demos/test/index.html @@ -63,6 +63,18 @@ extras: [ new Ox.Input({ autocomplete: { + "Find: Title": [ + "A bout de souffle", + "Casino", + "Diaries, Notes and Sketches", + "L'age d'or", + "Far From Heaven", + "In girum imus nocte et consumimur igni", + "It Felt Like a Kiss", + "Mulholland Dr.", + "Querelle", + "Vertigo" + ], "Find: Director": [ "Luis Buñuel", "Adam Curtis", @@ -75,24 +87,23 @@ "Jonas Mekas", "Martin Scorsese" ], - "Find: Title": [ - "A bout de souffle", - "Casino", - "Diaries, Notes and Sketches", - "L'age d'or", - "Far From Heaven", - "In girum imus nocte et consumimur igni", - "It Felt Like a Kiss", - "Mulholland Dr.", - "Querelle", - "Vertigo" + "Find: Country": [ + "Austria", + "Canada", + "France", + "Germany", + "Italy", + "Japan", + "Spain", + "Swizerland", + "UK", + "USA" ] }, clear: true, highlight: true, id: "find", - placeholder: ["Find: Director", "Find: Title"], - selected: 1 + placeholder: ["Find: Title", "Find: Director", "Find: Country"], }).width(256) ], menus: [ From 001dd19126197c45c67aaf60089b753c2916e692 Mon Sep 17 00:00:00 2001 From: Rolux Date: Fri, 19 Feb 2010 20:25:10 +0530 Subject: [PATCH 27/27] fixing css --- build/css/ox.ui.css | 7 ++++--- build/js/ox.ui.js | 6 +++--- demos/test/index.html | 4 ++-- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index 2238a037..2d15402c 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -195,9 +195,11 @@ input::-moz-focus-inner { border: none; } .OxButton.OxSymbol, -.OxButton.OxSymbol:active { +.OxButton.OxSymbol:active, +.OxButton.OxSymbol:focus { border: 1px solid rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0); + -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); } /* -------------------------------------------------------------------------------- @@ -295,8 +297,7 @@ div.OxInput > .OxButton:last-child { } input.OxInput { float: left; - margin-left: -1px; - margin-top: -1px; + margin: -1px -1px 0 -1px; } /* -------------------------------------------------------------------------------- diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index e9f99646..35bc849b 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -1705,7 +1705,7 @@ requires } function callback(items) { - var selected = -1; + var selected = items.length == 1 ? 0 : -1; if (items.length) { items = $.map(items, function(title, position) { if (that.$input.val().toLowerCase() == Ox.stripTags(title.toLowerCase())) { @@ -1820,8 +1820,8 @@ requires that.width = function(value) { that.$element.width(value); that.$input.width(value - 2 - self.options.labelWidth - - (self.options.placeholder.length > 1) * 21 - - self.options.clear * 21); + (self.options.placeholder.length > 1) * 26 - + self.options.clear * 15); return that; } diff --git a/demos/test/index.html b/demos/test/index.html index fdd9cd85..481aa51d 100644 --- a/demos/test/index.html +++ b/demos/test/index.html @@ -101,7 +101,7 @@ ] }, clear: true, - highlight: true, + highlight: false, id: "find", placeholder: ["Find: Title", "Find: Director", "Find: Country"], }).width(256) @@ -441,7 +441,7 @@ "Wyoming" ] }, - clear: true, + clear: false, highlight: true, id: "citystate", placeholder: ["City", "State"],