adding open and preview events to list

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;
+    margin: 4px 8px 0 8px;
-    font-size: 13px;
+    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
 --------------------------------------------------------------------------------
 */

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);

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) {

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: / /,
+                    regexp: /.*/,
-                    size: "medium",
+                    validate: null
-                    type: "text"
                 })
-                .options(options || {});
+                .options(options || {})
-
+                .addClass("OxFormItem")
-        that.$input = new OxInput();
+                .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) {
+            var ids = getSelectedIds();
-                return self.ids[v];
-            });
             setTimeout(function() {
-                var ids_ = $.map(self.selected, function(v, i) {
+                var ids_ = getSelectedIds();
-                    return self.ids[v];
-                });
                 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;