From f7c45d8491cec5679d30c24003d5077a5541db97 Mon Sep 17 00:00:00 2001 From: rolux Date: Tue, 20 Jul 2010 22:04:13 +0200 Subject: [PATCH] adding open and preview events to list --- build/css/ox.ui.css | 19 ++++-- build/css/ox.ui.modern.css | 1 + build/js/ox.js | 6 +- build/js/ox.ui.js | 136 +++++++++++++++++++++++++------------ 4 files changed, 113 insertions(+), 49 deletions(-) diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index f74d1bf..da9044c 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -119,8 +119,6 @@ Dialog //padding: 3px 8px 5px 8px; //padding: 3px 0 5px 0; cursor: move; - overflow: hidden; - white-space: nowrap; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -webkit-border-top-left-radius: 8px; @@ -128,10 +126,12 @@ Dialog } .OxDialog > .OxTitleBar > .OxTitle { - margin: 3px 8px 0 8px; - font-size: 13px; + margin: 4px 8px 0 8px; + font-size: 11px; font-weight: bold; text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; } .OxDialog > .OxContent { @@ -359,6 +359,17 @@ OxButtonGroup } /* -------------------------------------------------------------------------------- +OxFormItem +-------------------------------------------------------------------------------- +*/ +.OxFormItem { + margin-top: 8px; +} +.OxFormItem:first-child { + margin-top: 0; +} +/* +-------------------------------------------------------------------------------- OxInput -------------------------------------------------------------------------------- */ diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css index eeed968..3fc7d87 100644 --- a/build/css/ox.ui.modern.css +++ b/build/css/ox.ui.modern.css @@ -95,6 +95,7 @@ Forms background: -moz-linear-gradient(top, rgb(0, 0, 0), rgb(32, 32, 32)); background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), to(rgb(32, 32, 32))); } +.OxThemeModern div.OxInput.OxFocus, .OxThemeModern .OxInput:focus { border: 1px solid rgb(80, 80, 80); -moz-box-shadow: 0 0 2px rgb(128, 128, 128); diff --git a/build/js/ox.js b/build/js/ox.js index 9a51279..250b91c 100644 --- a/build/js/ox.js +++ b/build/js/ox.js @@ -161,8 +161,12 @@ Ox.every = function(obj, fn) { false >>> Ox.every("foo", function(v) { return v == "f"; }) false + >>> Ox.every([true, true, true]) + true */ - return Ox.filter(Ox.values(obj), fn).length == Ox.length(obj); + return Ox.filter(Ox.values(obj), fn || function(v) { + return v; + }).length == Ox.length(obj); }; Ox.filter = function(arr, fn) { diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index e780117..a1173b6 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -804,6 +804,9 @@ requires length = args.length, id, ret; $.each(args, function(i, arg) { + if (Ox.isUndefined(arg)) { + Ox.print("fn", fn, "undefined argument") + } // if an ox object was passed // then pass its $element instead // so we can do oxObj.jqFn(oxObj) @@ -1372,7 +1375,6 @@ requires size: "medium" }) .addClass("OxTitleBar") - //.html(self.options.title) .mousedown(drag) .dblclick(center) .appendTo(that); @@ -1389,8 +1391,9 @@ requires that.$buttons = []; $.each(self.options.buttons[0], function(i, button) { that.$buttons[i] = new Ox.Button({ + disabled: button.disabled || false, size: "medium", - value: button.value + value: button.value // fixme: use title }) .addClass("OxLeft") .click(button.click) // fixme: rather use event? @@ -1403,6 +1406,7 @@ requires .appendTo(that.$buttonsbar); $.each(self.options.buttons[1].reverse(), function(i, button) { that.$buttons[that.$buttons.length] = new Ox.Button({ + disabled: button.disabled || false, size: "medium", value: button.value }) @@ -1417,9 +1421,10 @@ requires .mouseup(mouseupLayer); function center() { + var documentHeight = $document.height(); that.css({ left: 0, - top: parseInt(-$document.height() / 10) + "px", // fixme: don't overlap menu + top: Math.max(parseInt(-documentHeight / 10), self.options.height - documentHeight + 40) + "px", right: 0, bottom: 0, margin: "auto" @@ -1434,11 +1439,6 @@ requires x = event.clientX, y = event.clientY; $window.mousemove(function(event) { - /* - $("*").css({ - WebkitUserSelect: "none" - }); - */ that.css({ margin: 0 }); @@ -1459,11 +1459,6 @@ requires }); $window.one("mouseup", function() { $window.unbind("mousemove"); - /* - $("*").css({ - WebkitUserSelect: "auto" - }); - */ }); } @@ -1498,11 +1493,6 @@ requires x = event.clientX, y = event.clientY; $window.mousemove(function(event) { - /* - $("*").css({ - WebkitUserSelect: "none" - }); - */ that.css({ left: offset.left, top: offset.top, @@ -1522,17 +1512,18 @@ requires }); $window.one("mouseup", function() { $window.unbind("mousemove"); - /* - $("*").css({ - WebkitUserSelect: "auto" - }); - */ }); } self.onChange = function(key, value) { if (key == "title") { - that.$title.html(value); + that.$title.animate({ + opacity: 0 + }, 250, function() { + that.$title.html(value).animate({ + opacity: 1 + }, 250); + }); } } @@ -1557,10 +1548,12 @@ requires that.disable = function() { // to be used on submit of form, like login that.$layer.addClass("OxFront"); + return that; }; that.enable = function() { that.$layer.removeClass("OxFront"); + return that; } that.open = function() { @@ -1591,14 +1584,37 @@ requires var self = self || {}, that = new Ox.Element("div", self) .defaults({ + error: "", + id: "", items: [] }) .options(options || {}); // fixme: the || {} can be done once, in the options function - $.each(self.options.items, function(i, item) { - + $.extend(self, { + formIsValid: false, + itemIsValid: $.map(self.options.items, function(item, i) { + return false; + }) }); + $.each(self.options.items, function(i, item) { + item.element.change(function() { + validate(i); + }) + that.append(new Ox.FormItem(item)); + }); + + function validate(pos) { + var item = self.options.items[pos]; + self.itemIsValid[pos] = item[item.validate ? "validate" : "regexp"](item.element.$input.val()); // fixme: Input elements should overwrite / have their own val() + if (Ox.every(self.itemIsValid) != self.formIsValid) { + self.formIsValid = !self.formIsValid; + that.triggerEvent("change", { + valid: formIsValid + }); + } + } + that.values = function() { var values = {}; if (arguments.length == 0) { @@ -1621,16 +1637,16 @@ requires Ox.FormItem = function(options, self) { var self = self || {}, - that = new Ox.Element("", self) + that = new Ox.Element("div", self) .defaults({ + element: null, error: "", - regexp: / /, - size: "medium", - type: "text" + regexp: /.*/, + validate: null }) - .options(options || {}); - - that.$input = new OxInput(); + .options(options || {}) + .addClass("OxFormItem") + .append(self.options.element); return that; @@ -1835,9 +1851,9 @@ requires * 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 + * label string or array [{id, title}] (select) -- label and placeholder are mutually exclusive * labelWidth integer (px) - * placeholder string or array (select) -- label and placeholder are mutually exclusive + * placeholder string or array [{id, title}] (select) -- label and placeholder are mutually exclusive * selected integer, selected label or placeholder * size "large", "medium" or "small" * type "text", "password", "textarea", etc. @@ -1880,7 +1896,7 @@ requires that.$label = new Ox.Element() .addClass("OxInputLabel") .width(self.options.labelWidth) - .html(self.options.label[0].title) + .html(self.options.label.length == 1 ? self.options.label[0] : self.options.label[0].title) .appendTo(that); } if (self.options.label.length > 1 || self.options.placeholder.length > 1) { @@ -1986,6 +2002,7 @@ requires function blur() { that.loseFocus(); + that.removeClass("OxFocus"); if (self.options.placeholder && that.$input.val() === "") { that.$input.addClass("OxPlaceholder").val(self.option); } @@ -2074,6 +2091,7 @@ requires function focus() { var value; that.gainFocus(); + that.addClass("OxFocus"); if (that.$input.is(".OxPlaceholder")) { that.$input.val("").removeClass("OxPlaceholder"); } @@ -2713,12 +2731,15 @@ requires key_control_a: selectAll, key_control_shift_a: selectNone, key_end: scrollToFirst, + key_enter: open, key_home: scrollToLast, key_pagedown: scrollPageDown, - key_pageup: scrollPageUp + key_pageup: scrollPageUp, + key_space: preview }, page: 0, pageLength: 100, + preview: false, requests: [], selected: [] }); @@ -2899,6 +2920,13 @@ requires return pos; } + function getSelectedIds() { + // fixme: is carring self.ids around the best way? + return $.map(self.selected, function(v, i) { + return self.ids[v]; + }); + } + function getWidth() { return that.width() - (that.$content.height() > that.height() ? oxui.scrollbarSize : 0); } @@ -2998,6 +3026,23 @@ requires }); } + function open() { + that.triggerEvent("open", { + ids: getSelectedIds() + }); + } + + function preview() { + self.preview = !self.preview; + if (self.preview) { + that.triggerEvent("openpreview", { + ids: getSelectedIds() + }); + } else { + that.triggerEvent("closepreview"); + } + } + function scroll() { var page = self.page; self.page = getPage(); @@ -3121,19 +3166,18 @@ requires } function triggerSelectEvent() { - var ids = $.map(self.selected, function(v, i) { - return self.ids[v]; - }); + var ids = getSelectedIds(); setTimeout(function() { - var ids_ = $.map(self.selected, function(v, i) { - return self.ids[v]; - }); + var ids_ = getSelectedIds(); if (ids.length == ids_.length && (ids.length == 0 || ids[0] == ids_[0])) { that.triggerEvent("select", { ids: ids }); + self.preview && that.triggerEvent("openpreview", { + ids: ids + }); } else { - Ox.print("select event not triggered after timeout") + Ox.print("select event not triggered after timeout"); } }, 100); } @@ -3596,6 +3640,10 @@ requires } }; + that.closePreview = function() { + self.preview = false; + }; + that.resizeColumn = function(id, width) { resizeColumn(id, width); return that;