From 27ed00f6ff1906ad54c529a0c1268f4b63ac1f41 Mon Sep 17 00:00:00 2001 From: Rolux Date: Fri, 19 Feb 2010 15:54:02 +0530 Subject: [PATCH] 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 d320935..fb8b443 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 d25a794..eecdc26 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 a06256e..74520f2 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 96b29e5..85b5496 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>