fix for dialog center/reset

build/css/ox.ui.classic.css

@@ -41,18 +41,25 @@ Dialog
 }
 
 .OxThemeClassic .OxDialog .OxBar {
-    background: -moz-linear-gradient(top, rgba(208, 208, 208, 0.96), rgba(176, 176, 176, 0.96));
+    //background: -moz-linear-gradient(top, rgba(208, 208, 208, 0.96), rgba(176, 176, 176, 0.96));
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(208, 208, 208, 0.96)), to(rgba(176, 176, 176, 0.96)));
+    //background: -webkit-gradient(linear, left top, left bottom, from(rgba(208, 208, 208, 0.96)), to(rgba(176, 176, 176, 0.96)));
+    background: -moz-linear-gradient(top, rgba(224, 224, 224, 0.96), rgba(192, 192, 192, 0.96));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(224, 224, 224, 0.96)), to(rgba(192, 192, 192, 0.96)));
 }
 
 .OxThemeClassic .OxDialog .OxContent {
-    background: rgba(224, 224, 224, 0.96);
+    //background: rgba(224, 224, 224, 0.96);
+    background: rgba(208, 208, 208, 0.96);
 }
 
 .OxThemeClassic .OxDialog .OxTitle {
     color: rgb(48, 48, 48);
 }
 
+.OxThemeClassic .OxLayer {
+    background: rgb(255, 255, 255);
+}
+
 /*
 ================================================================================
 Forms
@@ -131,7 +138,8 @@ Forms
     //-moz-box-shadow: 0 0 2px rgb(128, 128, 128);
     //-webkit-box-shadow: 0 0 2px rgb(128, 128, 128);
 }
-.OxThemeClassic div.OxInput.OxFocus {
+.OxThemeClassic div.OxInput.OxFocus,
+.OxThemeClassic .OxSelect.OxFocus {
     -moz-box-shadow: 0 0 2px rgb(128, 128, 128);
     -webkit-box-shadow: 0 0 2px rgb(128, 128, 128);
 }
@@ -173,10 +181,10 @@ Lists
     background: rgb(222, 222, 222);
 }
 .OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected:nth-child(odd) {
-    background: rgb(194, 194, 194);
+    background: rgb(210, 210, 210);
 }
 .OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected:nth-child(even) {
-    background: rgb(190, 190, 190);
+    background: rgb(206, 206, 206);
 }
 .OxThemeClassic .OxTextList .OxBar {
     background: -moz-linear-gradient(top, rgb(224, 224, 224), rgb(192, 192, 192));
@@ -200,7 +208,7 @@ Lists
     border-right: 1px solid rgb(216, 216, 216);
 }
 .OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected .OxCell {
-    border-right: 1px solid rgb(184, 184, 184);
+    border-right: 1px solid rgb(200, 200, 200);
     color: rgb(0, 0, 0);
 }
 .OxThemeClassic .OxTextList .OxBody .OxItem .OxLine {

build/css/ox.ui.css

@@ -746,14 +746,23 @@ Lists
     background: rgb(24, 24, 24);
     cursor: ew-resize;
 }
-.OxTextList .OxBar .OxButton {
+.OxTextList .OxBar .OxSelect {
     position: absolute;
     right: 0px;
-    width: 11px;
+    width: 10px;
     height: 16px;
+    border-width: 0 1px 0 1px;
+    border-color: rgb(32, 32, 32);
+    background: rgba(0, 0, 0, 0);
     font-size: 11px;
     text-align: center;
     cursor: pointer;
+    overflow: hidden;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+}
+.OxTextList .OxBar .OxSelect > input {
+    margin-right: -3px;
 }
 
 .OxTextList .OxBody {

build/css/ox.ui.modern.css

@@ -51,6 +51,10 @@ Dialog
     background: rgba(48, 48, 48, 0.96);
 }
 
+.OxThemeModern .OxLayer {
+    background: rgb(0, 0, 0);
+}
+
 
 /*
 ================================================================================
@@ -118,7 +122,8 @@ 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 div.OxInput.OxFocus,
+.OxThemeModern .OxSelect.OxFocus {
     //border: 1px solid rgb(80, 80, 80);
     -moz-box-shadow: 0 0 2px rgb(128, 128, 128);
     -webkit-box-shadow: 0 0 2px rgb(128, 128, 128);

build/js/ox.ui.js

@@ -312,12 +312,13 @@ requires
             blur: function(id) {
                 var index = stack.indexOf(id);
                 if (index == stack.length - 1) {
-                    $elements[id].removeClass('OxFocus');
-                    //$('.OxFocus').removeClass('OxFocus'); // fixme: the above is better, and should work
                     stack.length == 1 ? stack.pop() :
                             stack.splice(stack.length - 2, 0, stack.pop());
                     Ox.Event.unbindKeyboard($elements[id].options('id'));
                     stack.length && Ox.Event.bindKeyboard($elements[stack[stack.length - 1]].options('id'));
+                    //$elements[id].removeClass('OxFocus');
+                    $('.OxFocus').removeClass('OxFocus'); // fixme: the above is better, and should work
+                    stack.length && $elements[stack[stack.length - 1]].addClass('OxFocus');
                     Ox.print('blur', id, stack);
                 }
             },
@@ -327,8 +328,9 @@ requires
                     stack.length && Ox.Event.unbindKeyboard($elements[stack[stack.length - 1]].options('id'));
                     index > -1 && stack.splice(index, 1);
                     stack.push(id);
-                    $elements[id].addClass('OxFocus');
                     Ox.Event.bindKeyboard($elements[id].options('id'));
+                    $('.OxFocus').removeClass('OxFocus'); // fixme: see above
+                    $elements[id].addClass('OxFocus');
                     Ox.print('focus', id, stack);
                 }
             },
@@ -1471,6 +1473,7 @@ requires
 
         // fixme: dialog should be derived from a generic draggable
         // fixme: pass button elements directly
+        // fixme: buttons should have a close attribute, or the dialog a close id
         var self = self || {},
             that = new Ox.Element('div', self)
                 .defaults({
@@ -1483,7 +1486,12 @@ requires
                     width: 384
                 })
                 .options(options || {})
-                .addClass('OxDialog');
+                .addClass('OxDialog')
+                .addEvent({
+                    key_escape: function() {
+                        that.close();
+                    }
+                });
 
         if (!Ox.isArray(self.options.buttons[0])) {
             self.options.buttons = [[], self.options.buttons];
@@ -1496,10 +1504,12 @@ requires
             .mousedown(drag)
             .dblclick(center)
             .appendTo(that);
+
         that.$title = new Ox.Element()
             .addClass('OxTitle')
             .html(self.options.title)
             .appendTo(that.$titlebar);
+
         // fixme: should the following be a container?
         that.$content = new Ox.Element()
             .addClass('OxContent')
@@ -1508,9 +1518,11 @@ requires
                 overflow: 'auto'
             })
             .appendTo(that);
+
         that.$buttonsbar = new Ox.Bar({})
             .addClass('OxButtonsBar')
             .appendTo(that);
+
         that.$buttons = [];
         $.each(self.options.buttons[0], function(i, button) {
             that.$buttons[i] = new Ox.Button({
@@ -1522,11 +1534,13 @@ requires
                 .click(button.click) // fixme: rather use event?
                 .appendTo(that.$buttonsbar);
         });
+
         that.$resize = new Ox.Element()
             .addClass('OxResize')
             .mousedown(resize)
             .dblclick(reset)
             .appendTo(that.$buttonsbar);
+
         $.each(self.options.buttons[1].reverse(), function(i, button) {
             that.$buttons[that.$buttons.length] = new Ox.Button({
                     disabled: button.disabled || false,
@@ -1538,8 +1552,10 @@ requires
                 .click(button.click) // fixme: rather use event?
                 .appendTo(that.$buttonsbar);
         });
+
         that.$buttons[0].focus();
-        that.$layer = new Ox.Element() // fixme: Layer widget, that would handle click?
+
+        that.$layer = new Ox.Element() // fixme: Layer widget that would handle click?
             .addClass('OxLayer')
             .mousedown(mousedownLayer)
             .mouseup(mouseupLayer);
@@ -1610,9 +1626,9 @@ requires
         }
 
         function reset() {
-            that.css({
+            that/*.css({
                     left: Math.max(that.offset().left, 24 - that.width())
-                })
+                })*/
                 .width(self.options.width)
                 .height(self.options.height);
             that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
@@ -1695,6 +1711,7 @@ requires
             getButtonById(id).options({
                 disabled: true
             });
+            return that;
         };
 
         that.enable = function() {
@@ -1706,17 +1723,19 @@ requires
             getButtonById(id).options({
                 disabled: false
             });
+            return that;
         };
 
         that.open = function() {
             that.$layer.appendTo($body);
-            center();
-            reset();
             that.css({
                 opacity: 0
             }).appendTo($body).animate({
                 opacity: 1
             }, 200);
+            center();
+            reset();
+            that.gainFocus();
             $window.bind('mouseup', mouseupLayer)
             return that;
         };
@@ -2273,9 +2292,10 @@ requires
             autocompleteSelect          boolean, if true, menu is displayed
             autocompleteSelectHighlight boolean, if true, value in menu is highlighted
             autocompleteSelectSubmit    boolean, if true, submit input on menu selection
-            autovalidate                string ('email', 'float', 'integer', 'phone', 'url'), or
+            autocorrect                 string ('email', 'float', 'integer', 'phone', 'url'), or
                                         regexp(value), or
                                         function(key, value, blur, callback), returns value
+            auto validate               --remote validation--
             clear                       boolean, if true, has clear button
             disabled                    boolean, if true, is disabled
             height                      integer, px (for type='textarea' and type='range' with orientation='horizontal')
@@ -2892,7 +2912,9 @@ requires
 
         self.onChange = function(key, value) {
             var inputWidth, val;
-            if (key == 'value') {
+            if (key == 'placeholder') {
+                setPlaceholder();
+            } else if (key == 'value') {
                 val = self.$input.val();
                 self.$input.val(value);
                 setPlaceholder();
@@ -3974,6 +3996,10 @@ requires
                 )
                 .css(self.options.width == 'auto' ? {} : {
                     width: self.options.width + 'px'
+                })
+                .addEvent({
+                    key_escape: loseFocus,
+                    key_down: showMenu
                 });
 
         $.extend(self, {
@@ -4002,7 +4028,7 @@ requires
                     self.options.title ? self.options.title :
                     self.options.items[self.checked[0]].title
                 )
-                .click(clickButton)
+                .click(showMenu)
                 .appendTo(that.$element);
         }
 
@@ -4012,7 +4038,7 @@ requires
                 title: 'select',
                 type: 'image'
             })
-            .bindEvent('click', clickButton)
+            .bindEvent('click', showMenu)
             .appendTo(that);
 
         self.$menu = new Ox.Menu({
@@ -4033,11 +4059,6 @@ requires
                 hide: hideMenu
             });
 
-        function clickButton() {
-            that.addClass('OxSelected');
-            self.$menu.showMenu();
-        }
-
         function clickMenu(event, data) {
             
         }
@@ -4049,7 +4070,9 @@ requires
                 self.options.title ? self.options.title :
                         data.checked[0].title
             );
-            that.triggerEvent('change', data);
+            that.triggerEvent('change', {
+                selected: data.checked
+            });
         }
 
         function hideMenu() {
@@ -4057,6 +4080,16 @@ requires
             self.$button.removeClass('OxSelected');
         }
 
+        function loseFocus() {
+            that.loseFocus();
+        }
+
+        function showMenu() {
+            that.gainFocus();
+            that.addClass('OxSelected');
+            self.$menu.showMenu();
+        }
+
         self.onChange = function(key, value) {
             
         };
@@ -6182,8 +6215,17 @@ requires
             }
         };
 
-        that.clearCache = function() { // fixme: unused? make private?
+        that.clearCache = function() { // used by TextList resizeColumn
             self.$pages = [];
+            return that;
+        };
+
+        that.reload = function() {
+            clear();
+            that.clearCache();
+            that.$content.empty();
+            loadPages(self.page);
+            return that;
         };
 
         that.sort = function(key, operator) {
@@ -6195,6 +6237,7 @@ requires
                 that.triggerEvent('sort', self.options.sort[0]);
                 updateSort();
             }
+            return that;
         }
 
         return that;
@@ -6241,7 +6284,9 @@ requires
             that = new Ox.Element({}, self)
                 .defaults({
                     columns: [],
-                    columnWidth: [40, 800],
+                    columnsMovable: false,
+                    columnsRemovable: false,
+                    //columnWidth: [40, 800],
                     id: '',
                     request: function() {}, // {sort, range, keys, callback}
                     sort: []
@@ -6287,82 +6332,25 @@ requires
             .addClass('OxHead')
             .appendTo(that.$bar);
         that.$head.$content.addClass('OxTitles');
-        that.$titles = [];
+        constructHead();
-        $.each(self.visibleColumns, function(i, v) {
+        if (self.options.columnsRemovable) {
-            var $order, $resize, $left, $center, $right, timeout = 0;
+            that.$select = new Ox.Select({
-            self.columnWidths[i] = v.width;
+                    id: self.options.id + 'SelectColumns',
-            that.$titles[i] = $('<div>')
+                    items: $.map(self.options.columns, function(v, i) {
-                .addClass('OxTitle OxColumn' + Ox.toTitleCase(v.id))
+                        return {
-                .css({
+                            checked: v.visible,
-                    width: (v.width - 9) + 'px',
+                            disabled: v.removable === false,
-                    textAlign: v.align
+                            id: v.id,
+                            title: v.title
+                        }
+                    }),
+                    max: -1,
+                    min: 1,
+                    type: 'image'
                 })
-                .html(v.title)
+                .bindEvent('change', changeColumns)
-                .mousedown(function(e) {
+                .appendTo(that.$bar.$element);
-                    timeout = setTimeout(function() {
-                        dragColumn(v.id, e);
-                        timeout = 0;
-                    }, 250);
-                })
-                .mouseup(function() {
-                    if (timeout) {
-                        clearTimeout(timeout);
-                        timeout = 0;
-                        clickColumn(v.id);
-                    }
-                })
-                .appendTo(that.$head.$content.$element);
-            self.columnPositions[i] = Ox.sum(self.columnWidths) - self.columnWidths[i] / 2;
-            $order = $('<div>')
-                .addClass('OxOrder')
-                .html(oxui.symbols['triangle_' + (
-                    v.operator === '' ? 'up' : 'down'
-                )])
-                .click(function() {
-                    $(this).prev().trigger('click')
-                })
-                .appendTo(that.$head.$content.$element);
-            $resize = $('<div>')
-                .addClass('OxResize')
-                .mousedown(function(e) {
-                    var startWidth = self.columnWidths[i],
-                        startX = e.clientX;
-                    $window.mousemove(function(e) {
-                        var x = e.clientX,
-                            width = Ox.limit(
-                                startWidth - startX + x,
-                                self.options.columnWidth[0],
-                                self.options.columnWidth[1]
-                            );
-                            resizeColumn(v.id, width);
-                    });
-                    $window.one('mouseup', function() {
-                        $window.unbind('mousemove');
-                    });
-                })
-                .dblclick(function() {
-                    resizeColumn(v.id, v.width);
-                })
-                .appendTo(that.$head.$content.$element);
-            $left = $('<div>').addClass('OxLeft').appendTo($resize);
-            $center = $('<div>').addClass('OxCenter').appendTo($resize);
-            $right = $('<div>').addClass('OxRight').appendTo($resize);
-        });
-        that.$head.$content.css({
-            width: (Ox.sum(self.columnWidths) + 2) + 'px'
-        });
-        Ox.print('s.sC', self.selectedColumn)
-        if (getColumnPositionById(self.options.columns[self.selectedColumn].id) > -1) { // fixme: save in var
-            toggleSelected(self.options.columns[self.selectedColumn].id);
-            that.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({
-                width: (self.options.columns[self.selectedColumn].width - 25) + 'px'
-            });
         }
-        that.$select = new Ox.Button({
-            style: 'symbol',
-            title: 'select',
-            type: 'image'
-        }).appendTo(that.$bar.$element);
 
         // Body
 
@@ -6396,7 +6384,49 @@ requires
         Ox.print('s.vC', self.visibleColumns)
 
         function addColumn(id) {
+            Ox.print('addColumn', id);
+            var column,
+                index = 0;
+            $.each(self.options.columns, function(i, v) {
+                if (v.visible) {
+                    index++;
+                } else if (v.id == id) {
+                    column = v;
+                    return false;
+                }
+            });
+            column.visible = true;
+            self.visibleColumns.splice(index, 0, column);
+            that.$head.$content.empty();
+            constructHead();
+            that.$body.options({
+                keys: $.map(self.visibleColumns, function(v, i) {
+                    return v.id;
+                })
+            });
+            that.$body.reload();
+        }
 
+        function changeColumns(event, data) {
+            var add,
+                ids = [];
+            $.each(data.selected, function(i, column) {
+                var index = getColumnIndexById(column.id);
+                if (!self.options.columns[index].visible) {
+                    addColumn(column.id);
+                    add = true;
+                    return false;
+                }
+                ids.push(column.id);
+            });
+            if (!add) {
+                $.each(self.visibleColumns, function(i, column) {
+                    if (ids.indexOf(column.id) == -1) {
+                        removeColumn(column.id);
+                        return false
+                    }
+                });
+            }
         }
 
         function clickColumn(id) {
@@ -6410,10 +6440,86 @@ requires
             );
         }
 
+        function constructHead() {
+            that.$titles = [];
+            self.columnPositions = [];
+            self.columnWidths = [];
+            $.each(self.visibleColumns, function(i, v) {
+                var $order, $resize, $left, $center, $right, timeout = 0;
+                self.columnWidths[i] = v.width;
+                that.$titles[i] = $('<div>')
+                    .addClass('OxTitle OxColumn' + Ox.toTitleCase(v.id))
+                    .css({
+                        width: (v.width - 9) + 'px',
+                        textAlign: v.align
+                    })
+                    .html(v.title)
+                    .mousedown(function(e) {
+                        timeout = setTimeout(function() {
+                            dragColumn(v.id, e);
+                            timeout = 0;
+                        }, 250);
+                    })
+                    .mouseup(function() {
+                        if (timeout) {
+                            clearTimeout(timeout);
+                            timeout = 0;
+                            clickColumn(v.id);
+                        }
+                    })
+                    .appendTo(that.$head.$content.$element);
+                self.columnPositions[i] = Ox.sum(self.columnWidths) - self.columnWidths[i] / 2;
+                $order = $('<div>')
+                    .addClass('OxOrder')
+                    .html(oxui.symbols['triangle_' + (
+                        v.operator === '' ? 'up' : 'down'
+                    )])
+                    .click(function() {
+                        $(this).prev().trigger('click')
+                    })
+                    .appendTo(that.$head.$content.$element);
+                $resize = $('<div>')
+                    .addClass('OxResize')
+                    .mousedown(function(e) {
+                        var startWidth = self.columnWidths[i],
+                            startX = e.clientX;
+                        $window.mousemove(function(e) {
+                            var x = e.clientX,
+                                width = Ox.limit(
+                                    startWidth - startX + x,
+                                    self.options.columnWidth[0],
+                                    self.options.columnWidth[1]
+                                );
+                                resizeColumn(v.id, width);
+                        });
+                        $window.one('mouseup', function() {
+                            $window.unbind('mousemove');
+                        });
+                    })
+                    .dblclick(function() {
+                        resizeColumn(v.id, v.width);
+                    })
+                    .appendTo(that.$head.$content.$element);
+                $left = $('<div>').addClass('OxLeft').appendTo($resize);
+                $center = $('<div>').addClass('OxCenter').appendTo($resize);
+                $right = $('<div>').addClass('OxRight').appendTo($resize);
+            });
+            that.$head.$content.css({
+                width: (Ox.sum(self.columnWidths) + 2) + 'px'
+            });
+            Ox.print('s.sC', self.selectedColumn)
+            if (getColumnPositionById(self.options.columns[self.selectedColumn].id) > -1) { // fixme: save in var
+                toggleSelected(self.options.columns[self.selectedColumn].id);
+                that.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({
+                    width: (self.options.columns[self.selectedColumn].width - 25) + 'px'
+                });
+            }
+        }
+
         function constructItem(data) {
             var $item = $('<div>')
                     .css({
-                        width: Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize) + 'px'
+                        width: getItemWidth() + 'px'
                     });
             $.each(self.visibleColumns, function(i, v) {
                 var $cell = $('<div>')
@@ -6506,8 +6612,8 @@ requires
         }
 
         function getItemWidth() {
-            return Ox.sum(self.columnWidths)
             return Math.max(Ox.sum(self.columnWidths), that.$element.width() - oxui.scrollbarSize);
+            //return Ox.sum(self.columnWidths)
         }
 
         function moveColumn(id, pos) {
@@ -6529,7 +6635,35 @@ requires
         }
 
         function removeColumn(id) {
-            
+            Ox.print('removeColumn', id);
+            var className = '.OxColumn' + Ox.toTitleCase(id),
+                index = getColumnIndexById(id),
+                position = getColumnPositionById(id),
+                $column = $('.OxTitle' + className),
+                $order = $column.next(),
+                $resize = $order.next();
+            self.options.columns[index].visible = false;
+            self.visibleColumns.splice(position, 1);
+            self.columnWidths.splice(position, 1);
+            itemWidth = getItemWidth();
+            $column.remove();
+            $order.remove();
+            $resize.remove();
+            $.each(that.$body.find('.OxItem'), function(i, v) {
+                var $v = $(v);
+                $v.children(className).remove();
+                $v.css({
+                    width: itemWidth + 'px'
+                });
+            });
+            that.$body.$content.css({
+                width: itemWidth + 'px'
+            });
+            that.$body.options({
+                keys: $.map(self.visibleColumns, function(v, i) {
+                    return v.id;
+                })
+            });
         }
 
         function resize() {
@@ -7339,6 +7473,7 @@ requires
         function clickItem(position) {
             var item = that.items[position],
                 toggled;
+            that.hideMenu();
             if (!item.options('items').length) {
                 if (that.options('parent')) {
                     that.options('parent').hideMenu().triggerEvent('click');
@@ -7381,7 +7516,6 @@ requires
                     item.toggleTitle();
                 }
             }
-            that.hideMenu();
         }
 
         function clickSelectedItem() {