some work on ListCalendar

source/Ox.UI/css/Ox.UI.css

@@ -213,9 +213,6 @@ Calendar
 }
 .OxCalendar .OxLine > .OxEvent {
     border-radius: 4px;
-    background: -moz-linear-gradient(top, rgba(255, 0, 0, 0.9), rgba(224, 0, 0, 0.9));
-    background: -o-linear-gradient(top, rgba(255, 0, 0, 0.9), rgba(224, 0, 0, 0.9));
-    background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0.9), rgba(224, 0, 0, 0.9));
 }
 .OxCalendar .OxLine > .OxEvent.OxCurrent {
     border-top-right-radius: 0;
@@ -227,14 +224,21 @@ Calendar
     background: -webkit-linear-gradient(top, rgba(192, 0, 0, 0.9), rgba(160, 0, 0, 0.9));
 }
 .OxCalendar .OxLine > .OxEvent.OxPlace {
-    //background: -moz-linear-gradient(top, rgba(255, 0, 64, 0.9), rgba(224, 0, 32, 0.9));
+    background: -moz-linear-gradient(top, rgba(255, 192, 0, 0.9), rgba(224, 160, 0, 0.9));
-    //background: -webkit-linear-gradient(top, rgba(255, 0, 64, 0.9), rgba(224, 0, 32, 0.9));
+    background: -o-linear-gradient(top, rgba(255, 192, 0, 0.9), rgba(224, 160, 0, 0.9));
+    background: -webkit-linear-gradient(top, rgba(255, 192, 0, 0.9), rgba(224, 160, 0, 0.9));
 }
 .OxCalendar .OxLine > .OxEvent.OxPerson {
     background: -moz-linear-gradient(top, rgba(255, 96, 0, 0.9), rgba(224, 80, 0, 0.9));
     background: -o-linear-gradient(top, rgba(255, 96, 0, 0.9), rgba(224, 80, 0, 0.9));
     background: -webkit-linear-gradient(top, rgba(255, 96, 0, 0.9), rgba(224, 80, 0, 0.9));
 }
+.OxCalendar .OxLine > .OxEvent.OxOther {
+    background: -moz-linear-gradient(top, rgba(255, 0, 0, 0.9), rgba(224, 0, 0, 0.9));
+    background: -o-linear-gradient(top, rgba(255, 0, 0, 0.9), rgba(224, 0, 0, 0.9));
+    background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0.9), rgba(224, 0, 0, 0.9));
+}
+
 .OxCalendar .OxLine > .OxEvent.OxSelected {
     background: -moz-linear-gradient(top, rgba(128, 128, 255, 0.9), rgba(96, 96, 224, 0.9));
     background: -o-linear-gradient(top, rgba(128, 128, 255, 0.9), rgba(96, 96, 224, 0.9));

source/Ox.UI/js/Calendar/Ox.Calendar.js

@@ -85,18 +85,7 @@ Ox.Calendar = function(options, self) {
         });
 
     self.options.events.forEach(function(event) {
-        if (!event.end) {
+        event = getEventData(event);
-            event.end = Ox.formatDate(new Date(), '%Y-%m-%d');
-            event.current = true;
-        }
-        event.id = Ox.isUndefined(event.id) ? Ox.uid() : event.id;
-        event.startTime = Ox.parseDate(event.start, true);
-        event.endTime = Ox.parseDate(event.end, true);
-        event.rangeText = Ox.formatDateRange(event.start, event.end, true);
-        event.durationText = Ox.formatDateRangeDuration(event.start, event.end, true);
-        if (event.current) {
-            event.rangeText = event.rangeText.split(' - ').shift() + ' - ...';
-        }
     });
 
     self.maxZoom = 32;
@@ -586,6 +575,22 @@ Ox.Calendar = function(options, self) {
         return new Date(+event.startTime + getEventDuration(event) / 2);
     }
 
+    function getEventData(event) {
+        if (!event.end) {
+            event.end = Ox.formatDate(new Date(), '%Y-%m-%d');
+            event.current = true;
+        }
+        event.id = Ox.isUndefined(event.id) ? Ox.uid() : event.id;
+        event.startTime = Ox.parseDate(event.start, true);
+        event.endTime = Ox.parseDate(event.end, true);
+        event.rangeText = Ox.formatDateRange(event.start, event.end, true);
+        event.durationText = Ox.formatDateRangeDuration(event.start, event.end, true);
+        if (event.current) {
+            event.rangeText = event.rangeText.split(' - ').shift() + ' - ...';
+        }
+        return event;
+    }
+
     function getEventDuration(event) {
         return event.endTime - event.startTime;
     }
@@ -626,7 +631,66 @@ Ox.Calendar = function(options, self) {
             }
         });
         return $element;
-    };
+    }
+
+    function getLines() {
+        self.lineEvents = [];
+        self.$content.find('.OxLine').remove();
+        self.options.events.filter(function(event) {
+            // filter out events with types not shown
+            // and events outside the visible area  <--  commented out to keep layout from changing
+            return self.options.showTypes.indexOf(event.type) > -1
+                /*&& overlaps(event, calendarEvent)*/;
+        }).sort(function(a, b) {
+            // sort events (dates first, people last, longer before shorter)
+            if (a.type == 'date' && b.type != 'date') {
+                return -1;
+            } else if (a.type != 'date' && b.type == 'date') {
+                return 1;
+            } else if (a.type == 'person' && b.type != 'person') {
+                return 1;
+            } else if (a.type != 'person' && b.type == 'person') {
+                return -1;
+            } else if ((b.endTime - b.startTime) != (a.endTime - a.startTime)) {
+                return (b.endTime - b.startTime) - (a.endTime - a.startTime);
+            } else /*if (a.startTime < b.startTime || a.startTime > b.startTime)*/ {
+                return a.startTime - b.startTime;
+            }
+        }).forEach(function(event, i) {
+            var line = self.lineEvents.length;
+            // traverse lines
+            Ox.forEach(self.lineEvents, function(events, line_) {
+                var fits = true;
+                // traverse events in line
+                Ox.forEach(events, function(event_) {
+                    // if overlaps, check next line
+                    if (overlaps(event, event_)) {
+                        fits = false;
+                        return false;
+                    }
+                });
+                if (fits) {
+                    line = line_;
+                    return false;
+                }
+            });
+            if (line == self.lineEvents.length) {
+                self.lineEvents[line] = [];
+                self.$lines[line] = Ox.Element()
+                    .addClass('OxLine')
+                    .css({
+                        top: (line * 16) + 'px'
+                    })
+                    .appendTo(self.$content);
+            }
+            self.lineEvents[line].push(event);            
+        });
+        self.contentHeight = Math.max(
+            self.lineEvents.length * 16,
+            self.options.height - 72 // 24 + 16 + 16 + 16
+        );
+        self.$content.css({height: self.contentHeight + 'px'});
+    }
 
     function getMouseDate(e) {
         return new Date(+self.options.date + (
@@ -825,65 +889,6 @@ Ox.Calendar = function(options, self) {
         });
     }
 
-    function getLines() {
-        self.lineEvents = [];
-        self.$content.find('.OxLine').remove();
-        self.options.events.filter(function(event) {
-            // filter out events with types not shown
-            // and events outside the visible area  <--  commented out to keep layout from changing
-            return self.options.showTypes.indexOf(event.type) > -1
-                /*&& overlaps(event, calendarEvent)*/;
-        }).sort(function(a, b) {
-            // sort events (dates first, people last, longer before shorter)
-            if (a.type == 'date' && b.type != 'date') {
-                return -1;
-            } else if (a.type != 'date' && b.type == 'date') {
-                return 1;
-            } else if (a.type == 'person' && b.type != 'person') {
-                return 1;
-            } else if (a.type != 'person' && b.type == 'person') {
-                return -1;
-            } else if ((b.endTime - b.startTime) != (a.endTime - a.startTime)) {
-                return (b.endTime - b.startTime) - (a.endTime - a.startTime);
-            } else /*if (a.startTime < b.startTime || a.startTime > b.startTime)*/ {
-                return a.startTime - b.startTime;
-            }
-        }).forEach(function(event, i) {
-            var line = self.lineEvents.length;
-            // traverse lines
-            Ox.forEach(self.lineEvents, function(events, line_) {
-                var fits = true;
-                // traverse events in line
-                Ox.forEach(events, function(event_) {
-                    // if overlaps, check next line
-                    if (overlaps(event, event_)) {
-                        fits = false;
-                        return false;
-                    }
-                });
-                if (fits) {
-                    line = line_;
-                    return false;
-                }
-            });
-            if (line == self.lineEvents.length) {
-                self.lineEvents[line] = [];
-                self.$lines[line] = Ox.Element()
-                    .addClass('OxLine')
-                    .css({
-                        top: (line * 16) + 'px'
-                    })
-                    .appendTo(self.$content);
-            }
-            self.lineEvents[line].push(event);            
-        });
-        self.contentHeight = Math.max(
-            self.lineEvents.length * 16,
-            self.options.height - 72 // 24 + 16 + 16 + 16
-        );
-        self.$content.css({height: self.contentHeight + 'px'});
-    }
-
     function renderEvents() {
         var calendarEvent = getCalendarEvent(),
             height;
@@ -1030,11 +1035,13 @@ Ox.Calendar = function(options, self) {
         }
     }
 
-    self.setOption = function(key, val) {
+    self.setOption = function(key, value) {
         if (key == 'date') {
             
         } else if (key == 'height') {
             //that.css({height: self.options.height + 'px'});
+        } else if (key == 'selected') {
+            selectEvent(value);
         } else if (key == 'width') {
             //that.css({width: self.options.width + 'px'});
             //self.$zoomInput.options({size: self.options.width});
@@ -1044,8 +1051,67 @@ Ox.Calendar = function(options, self) {
         }
     };
 
+    that.addEvent = function(event) {
+        Ox.print('CALENDAR ADD EVENT', event)
+        self.options.events.push(event);
+        getLines();
+        renderCalendar();
+        selectEvent(event.id);
+        return that;
+    };
+
+    /*@
+    that.editEvent <f> Edit event data
+        (id, key, value) -> <o> Calendar object
+        {id, {key: value, ...}} -> <o> Calendar object
+    @*/
+    that.editEvent = function() {
+        var args = Ox.makeArray(arguments),
+            id = args.shift(),
+            data = Ox.makeObject(args),
+            event = Ox.getObjectById(self.options.events, id),
+            $element = getEventElementById(id);
+        Ox.forEach(data, function(value, key) {
+            if ($element) {
+                Ox.print('ELEMENT', $element, id)
+                if (key == 'name') {
+                    $element && $element.html('&nbsp;' + value + '&nbsp;');
+                } else if (key == 'type') {
+                    $element.removeClass('Ox' + Ox.toTitleCase(event[key]))
+                        .addClass('Ox' + Ox.toTitleCase(value))
+                } else if (key == 'end') {
+                    $element[
+                        value === '' ? 'addClass' : 'removeClass'
+                    ]('OxCurrent');
+                }
+            }
+            event[key] = value;
+            event = getEventData(event);
+            Ox.print(key, value, 'EVENT:', event)
+            if ($element) {
+                getLines();
+                renderCalendar();
+            }
+        });
+        return that;
+    };
+
+    that.getBounds = function() {
+        return getCalendarEvent();
+    };
+
     that.panToEvent = function() {
         panToSelected();
+        return that;
+    };
+
+    that.removeEvent = function() {
+        Ox.print('REMOVE ... SELF.OPTIONS', self.options)
+        var index = Ox.getPositionById(self.options.events, self.selected);
+        self.options.events.splice(index, 1);
+        getLines();
+        renderCalendar();
+        return that;
     };
 
     that.resizeCalendar = function() {
@@ -1054,10 +1120,12 @@ Ox.Calendar = function(options, self) {
         self.$zoomInput.options({size: self.options.width});
         getLines();
         renderCalendar();
+        return that;
     };
 
     that.zoomToEvent = function() {
         zoomToSelected();
+        return that;
     };
 
     return that;

source/Ox.UI/js/Calendar/Ox.ListCalendar.js

@@ -9,9 +9,12 @@ Ox.ListCalendar = function(options, self) {
     self = self || {};
     var that = Ox.Element({}, self)
         .defaults({
+            addEvent: null,
+            editPlace: null,
             events: [],
             height: 256,
             pageLength: 100,
+            removePlace: null,
             selected: [],
             sort: [{key: 'name', operator: '+'}],
             width: 256
@@ -23,6 +26,8 @@ Ox.ListCalendar = function(options, self) {
             height: self.options.height + 'px'
         });
 
+    Ox.print('EVENT[0]', self.options.events[0])
+
     self.columns = [
         {
             addable: false, // fixme: implement
@@ -208,87 +213,292 @@ Ox.ListCalendar = function(options, self) {
         )
         .appendTo(self.$listStatusbar);
 
-    self.$calendar = Ox.Element();
+    self.$calendar = Ox.Calendar({
+            date: new Date(0),
+            events: self.options.events,
+            height: self.options.height,
+            width: self.options.width - 514,
+            zoom: 4
+        })
+        .bindEvent({
+            resize: function(data) {
+                // triggered by SplitPanel
+                $element.resizeCalendar();
+            },
+            select: selectEvent
+        });
 
-    self.$placeTitlebar = Ox.Bar({
+    self.$eventTitlebar = Ox.Bar({
         size: 24
     });
+    self.$eventTitle = $('<div>')
+        .hide()
+        .appendTo(self.$eventTitlebar);
+    self.$eventName = Ox.Label({
+            title: '',
+            width: 228
+        })
+        .css({float: 'left', margin: '4px'})
+        .appendTo(self.$eventTitle)
+        .bindEvent({
+            singleclick: function() {
+                self.$calendar.panToEvent();
+            },
+            doubleclick: function() {
+                self.$calendar.zoomToEvent();
+            }
+        });
+    self.$deselectEventButton = Ox.Button({
+            title: 'close',
+            tooltip: 'Done',
+            type: 'image'
+        })
+        .css({float: 'left', margin: '4px 4px 4px 0'})
+        .bindEvent({
+            click: function() {
+                self.$calendar.options({selected: null});
+            }
+        })
+        .appendTo(self.$eventTitle);
 
-    self.$placeForm = Ox.Form({
+    self.$eventForm = Ox.Form({
-            items: [],
+            items: [
+                self.$nameInput = Ox.Input({
+                    id: 'name',
+                    label: 'Name',
+                    labelWidth: 64,
+                    width: 240
+                }),
+                self.$alternativeNamesInput = Ox.ArrayInput({
+                    id: 'alternativeNames',
+                    label: 'Alternative Names',
+                    max: 10,
+                    values: [],
+                    width: 240
+                }),
+                Ox.Select({
+                    id: 'type',
+                    items: [
+                        {id: 'date', title: 'Date'},
+                        {id: 'place', title: 'Place'},
+                        {id: 'person', title: 'Person'},
+                        {id: 'other', title: 'Other'}
+                    ],
+                    label: 'Type',
+                    labelWidth: 64,
+                    width: 240
+                }),
+                self.$startInput = Ox.Input({
+                    id: 'start',
+                    label: 'Start',
+                    labelWidth: 64,
+                    width: 240
+                }),
+                self.$endInput = Ox.Input({
+                    id: 'end',
+                    label: 'End',
+                    labelWidth: 64,
+                    width: 240
+                }),
+                self.$durationInput = Ox.Input({
+                    disabled: true,
+                    id: 'durationText',
+                    label: 'Duration',
+                    labelWidth: 64,
+                    width: 240
+                })
+            ],
             width: 240
         })
         .css({margin: '8px'})
-        .hide();
+        .hide()
+        .bindEvent({
+            change: function(data) {
+                Ox.print('CHANGE', data);
+                var exists = false, values
+                if (['name', 'alternativeNames'].indexOf(data.id) > -1) {
+                    exists = '';
+                    values = data.id == 'name' ? [data.data.value] : data.data.value;
+                    Ox.forEach(self.options.events, function(event) {
+                        Ox.forEach(values, function(value) {
+                            if (
+                                event.name == data.data.value
+                                || event.alternativeNames.indexOf(data.data.value) > -1
+                            ) {
+                                exists = value;
+                                return false;
+                            }
+                        });
+                        return !exists;
+                    });
+                }
+                if (data.id == 'name') {
+                    if (!exists) {
+                        // FIXME: can we change this to data.value?
+                        editEvent('name', data.data.value);
+                    } else {
+                        self.$nameInput.addClass('OxError');
+                    }
+                } else if (data.id == 'alternativeNames') {
+                    if (!exists) {
+                        editEvent('alternativeNames', data.data.value);
+                    } else {
+                        self.$alternativeNamesInput.setErrors([exists]);
+                    }
+                } else if (data.id == 'type') {
+                    editEvent('type', data.data.selected[0].id);
+                } else if (data.id == 'start') {
+                    editEvent('start', data.data.value);
+                } else if (data.id == 'end') {
+                    editEvent('end', data.data.value);
+                }
+            }
+        });
 
-    self.$placeStatusbar = Ox.Bar({
+    self.$eventStatusbar = Ox.Bar({
         size: 24
     });
 
-    that.$element.replaceWith(
+    self.$newEventButton = Ox.Button({
-        that.$element = Ox.SplitPanel({
+            title: 'New Event',
-            elements: [
+            width: 96
-                {
+        })
-                    collapsible: true,
+        .css({float: 'left', margin: '4px 2px 4px 4px'})
-                    element: Ox.SplitPanel({
+        .bindEvent({
-                        elements: [
+            click: addEvent
-                            {
+        })
-                                element: self.$listToolbar,
+        .appendTo(self.$eventStatusbar);
-                                size: 24
-                            },
-                            {
-                                element: self.$list
-                            },
-                            {
-                                element: self.$listStatusbar,
-                                size: 16
-                            }
-                        ],
-                        orientation: 'vertical'
-                    }),
-                    resizable: true,
-                    resize: [256, 384, 512],
-                    size: 256
-                },
-                {
-                    element: self.$calendar,
-                },
-                {
-                    collapsible: true,
-                    element: Ox.SplitPanel({
-                        elements: [
-                            {
-                                element: self.$placeTitlebar,
-                                size: 24
-                            },
-                            {
-                                element: self.$placeForm
-                            },
-                            {
-                                element: self.$placeStatusbar,
-                                size: 24
-                            }
-                        ],
-                        orientation: 'vertical'
-                    })
-                    .bindEvent({
-                        resize: function(data) {
-                            self.$placeTitleName.options({width: data.size - 48});
-                            // fixme: pass width through form
-                            self.$placeFormItems.forEach(function($item) {
-                                $item.options({width: data.size - 16});
-                            });
-                        }
-                    }),
-                    resizable: true,
-                    resize: [204, 256, 384],
-                    size: 256
-                }
-            ],
-            orientation: 'horizontal'
-        }).$element
-    );
 
+    self.$removeEventButton = Ox.Button({
+            title: 'Remove Event',
+            width: 96
+        })
+        .css({float: 'right', margin: '4px 4px 4px 2px'})
+        .bindEvent({
+            click: removeEvent
+        })
+        .hide()
+        .appendTo(self.$eventStatusbar);
+
+    that.$element = Ox.SplitPanel({
+        elements: [
+            {
+                collapsible: true,
+                element: Ox.SplitPanel({
+                    elements: [
+                        {
+                            element: self.$listToolbar,
+                            size: 24
+                        },
+                        {
+                            element: self.$list
+                        },
+                        {
+                            element: self.$listStatusbar,
+                            size: 16
+                        }
+                    ],
+                    orientation: 'vertical'
+                }),
+                resizable: true,
+                resize: [256, 384, 512],
+                size: 256
+            },
+            {
+                element: self.$calendar,
+            },
+            {
+                collapsible: true,
+                element: Ox.SplitPanel({
+                    elements: [
+                        {
+                            element: self.$eventTitlebar,
+                            size: 24
+                        },
+                        {
+                            element: self.$eventForm
+                        },
+                        {
+                            element: self.$eventStatusbar,
+                            size: 24
+                        }
+                    ],
+                    orientation: 'vertical'
+                })
+                .bindEvent({
+                    resize: function(data) {
+                        self.$placeTitleName.options({width: data.size - 48});
+                        // fixme: pass width through form
+                        self.$placeFormItems.forEach(function($item) {
+                            $item.options({width: data.size - 16});
+                        });
+                    }
+                }),
+                resizable: true,
+                resize: [204, 256, 384],
+                size: 256
+            }
+        ],
+        orientation: 'horizontal'
+    });
+
+    function addEvent() {
+        Ox.print('ADD', self.$calendar.getBounds())
+        var bounds = self.$calendar.getBounds(),
+            middle = +self.$calendar.options('date'),
+            event = {},
+            i = 1;
+        event.name = 'Untitled';
+        while (nameExists(event.name)) {
+            event.name = 'Untitled [' + (++i) + ']';
+        };
+        event.alternativeNames = [];
+        event.type = 'other';
+        event.startTime = +new Date((+bounds.startTime + middle) / 2);
+        event.endTime = +new Date((+bounds.endTime + middle) / 2);
+        event.start = Ox.formatDate(event.startTime, '%Y-%m-%d %H:%M:%S', true);
+        event.end = Ox.formatDate(event.endTime, '%Y-%m-%d %H:%M:%S', true);
+        Ox.print(event);
+        self.options.addEvent(event, function(result) {
+            event.id = result.data.id;
+            self.options.events.push(event);
+            self.$list.options({
+                items: Ox.clone(self.options.events),
+                selected: [event.id]
+            });
+            self.$calendar.addEvent(event);
+            // fixme: duplicated
+            self.selectedEvent = event.id;
+            self.$eventName.options({title: event.name});
+            self.$eventTitle.show();
+            self.$eventForm.values(Ox.extend({}, event, {
+                end: event.current ? '' : event.end
+            })).show();
+            self.$removeEventButton.show();
+        });
+    }
+
+    function editEvent(key, value) {
+        var data = {id: self.selectedEvent};
+        data[key] = value;
+        if (['start', 'end'].indexOf(key) > -1) {
+            self.$durationInput.options({
+                value: Ox.formatDateRangeDuration(
+                    self.$startInput.options('value'),
+                    self.$endInput.options('value')
+                        || Ox.formatDate(new Date(), '%Y-%m-%d %H%:%M:%S'),
+                    true
+                )
+            });
+        }
+        if (['name', 'type', 'start', 'end'].indexOf(key) > -1) {
+            self.$calendar.editEvent(self.selectedEvent, key, value);
+        }
+        self.options.editEvent(data, function(result) {
+            // ...
+        });
+        
+    }
 
     function initList(data) {
         self.$status.html(
@@ -298,16 +508,71 @@ Ox.ListCalendar = function(options, self) {
         );
     }
 
-    function openItem() {
+    function nameExists(name) {
-        
+        var exists = false;
+        Ox.forEach(self.options.events, function(event) {
+            if (
+                event.name == name
+                || event.alternativeNames.indexOf(name) > -1
+            ) {
+                exists = true;
+                return false;
+            }
+        });
+        return exists;
     }
 
-    function removeItem() {
+    function openItem(data) {
-        
+        selectItem(data);
+        self.$calendar.zoomToEvent(data.ids[0]);
     }
 
-    function selectItem() {
+    function removeEvent() {
+        self.options.removeEvent({id: self.selectedEvent}, function(result) {
+            var index = Ox.getPositionById(self.options.events, self.selectedEvent);
+            self.options.events.splice(index, 1);
+            self.$list.options({items: Ox.clone(self.options.events)});
+            self.$calendar.removeEvent();
+            // fixme: duplicated
+            self.selectedEvent = null;
+            self.$eventTitle.hide();
+            self.$eventForm.hide();
+            self.$removeEventButton.hide();
+        });
+    }
 
+    function removeItem(data) {
+        var id = data.ids[0];
+        // fixme: events or callback functions??
+        that.triggerEvent('removeevent', {id: id});
+        self.$calendar.removeEvent(id);
+    }
+
+    function selectEvent(event) {
+        self.$list.options({
+            selected: event.id ? [event.id] : []
+        });
+        if (event.id) {
+            var end = event
+            self.selectedEvent = event.id;
+            self.$eventName.options({title: event.name});
+            self.$eventTitle.show();
+            self.$eventForm.values(Ox.extend({}, event, {
+                end: event.current ? '' : event.end
+            })).show();
+            self.$removeEventButton.show();
+        } else {
+            self.selectedEvent = null;
+            self.$eventTitle.hide();
+            self.$eventForm.hide();
+            self.$removeEventButton.hide();
+        }
+    }
+
+    function selectItem(data) {
+        var id = data.ids.length ? data.ids[0] : null;
+        self.$calendar.options({selected: id});
+        id && self.$calendar.panToEvent();
     }
 
     function updateList(key, value) {

source/Ox.UI/js/Form/Ox.Form.js

@@ -55,6 +55,7 @@ Ox.Form = function(options, self) {
         	    validate(i, data.valid);
             	data.valid && self.$items[i].setMessage('');
         	},
+        	/*
         	// fixme: should't inputs also trigger a change event?
         	blur: function(data) {
         	    that.triggerEvent('change', {
@@ -62,6 +63,7 @@ Ox.Form = function(options, self) {
         	        data: data
         	    });
         	},
+        	*/
         	change: function(data) {
         	    that.triggerEvent('change', {
         	        id: self.itemIds[i],

source/Ox.UI/js/List/Ox.IconList.js

@@ -115,7 +115,7 @@ Ox.IconList = function(options, self) {
     function updateKeys() {
         that.$element.options({
             keys: Ox.unique(Ox.merge(
-                self.options.sort[0].key.split(':').pop(),
+                self.options.sort[0].key,
                 self.options.keys
             ))
         });

source/Ox.UI/js/List/Ox.TextList.js

@@ -43,6 +43,7 @@ Ox.TextList <f:Ox.Element> TextList Object
 Ox.TextList = function(options, self) {
 
     // fixme: rename to TableList
+    // fixme: in columns, "operator" should be "sortOperator"
 
     self = self || {};
     var that = Ox.Element({}, self)
@@ -553,10 +554,10 @@ Ox.TextList = function(options, self) {
         if (value === null) {
             value = '';
         } else if (format) {
-            value = Ox.isObject(format) ?
+            value = Ox.isObject(format)
-                Ox['format' + Ox.toTitleCase(format.type)]
+                ? Ox['format' + Ox.toTitleCase(format.type)]
-                .apply(this, Ox.merge([value], format.args || [])) :
+                    .apply(this, Ox.merge([value], format.args || []))
-                format(value, data);
+                : format(value, data);
         } else if (Ox.isArray(value)) {
             value = value.join(', ');
         }

source/Ox.UI/js/Map/Ox.ListMap.js

@@ -58,6 +58,7 @@ Ox.ListMap = function(options, self) {
                     .css({
                         width: '14px',
                         height: '14px',
+                        borderRadius: '4px',
                         marginLeft: '-3px',
                         marginTop: 0
                     });
@@ -343,15 +344,15 @@ Ox.ListMap = function(options, self) {
     });
     self.$placeTitle = $('<div>')
         .hide()
-        .appendTo(self.$placeTitlebar.$element)
+        .appendTo(self.$placeTitlebar)
-    self.$placeTitleFlag = $('<img>')
+    self.$placeFlag = $('<img>')
         .addClass('OxFlag')
         .attr({
             src: Ox.getImageByGeoname('icon', 16, '')
         })
         .css({float: 'left', margin: '4px'})
         .appendTo(self.$placeTitle);
-    self.$placeTitleName = Ox.Label({
+    self.$placeName = Ox.Label({
             title: '',
             width: 208
         })
@@ -365,7 +366,6 @@ Ox.ListMap = function(options, self) {
                 self.$map.zoomToPlace();
             }
         });
-
     self.$deselectPlaceButton = Ox.Button({
             title: 'close',
             tooltip: 'Done',
@@ -429,10 +429,10 @@ Ox.ListMap = function(options, self) {
                 country = Ox.getCountryByGeoname(geoname),
                 countryCode = country ? country.code : '',
                 isResult = self.selectedPlace[0] == '_';
-            self.$placeTitleFlag.attr({
+            self.$placeFlag.attr({
                 src: Ox.getImageByGeoname('icon', 16, geoname)
             });
-            self.$placeTitleName.options({title: geoname});
+            self.$placeName.options({title: geoname});
             self.$placeForm.values({countryCode: countryCode});
             if (!self.isAsync) {
                 if (!isResult) {
@@ -647,7 +647,7 @@ Ox.ListMap = function(options, self) {
                     })
                     .bindEvent({
                         resize: function(data) {
-                            self.$placeTitleName.options({width: data.size - 48});
+                            self.$placeName.options({width: data.size - 48});
                             // fixme: pass width through form
                             self.$placeFormItems.forEach(function($item) {
                                 $item.options({width: data.size - 16});
@@ -706,7 +706,7 @@ Ox.ListMap = function(options, self) {
     }
 
     function editPlace(keys) {
-        values = Ox.filter(self.$placeForm.values(), function(values, key) {
+        var values = Ox.filter(self.$placeForm.values(), function(values, key) {
             return keys.indexOf(key) > -1;
         });
         values.id = self.selectedPlace;
@@ -724,10 +724,31 @@ Ox.ListMap = function(options, self) {
         });
     }
 
+    function initList(data) {
+        self.$status.html(
+            Ox.formatNumber(data.items) + ' Place' + (
+                data.items == 1 ? '' : 's'
+            )
+        );
+    }
+
+    function openItem(data) {
+        selectItem(data);
+        self.$map.zoomToPlace(data.ids[0]);
+    }
+
+    function removeItem(data) {
+        var id = data.ids[0];
+        // fixme: events or callback functions??
+        that.triggerEvent('removeplace', {id: id});
+        self.$map.removePlace(id);
+    }
+
     function removePlace() {
         var index;
         Ox.print('REMOVE PLACE', self.selectedPlace, index)
         if (!self.isAsync) {
+            // fixme: doesn't call self.options.removePlace!
             index = Ox.getPositionById(self.options.places, self.selectedPlace);
             self.options.places.splice(index, 1);
             self.$list.options({items: Ox.clone(self.options.places)});
@@ -744,34 +765,13 @@ Ox.ListMap = function(options, self) {
         that.triggerEvent('removeplace', {id: self.selectedPlace});
     }
 
-    function initList(data) {
-        self.$status.html(
-            Ox.formatNumber(data.items) + ' Place' + (
-                data.items == 1 ? '' : 's'
-            )
-        );
-    }
-
-    function openItem(data) {
-        selectItem(data);
-        self.$map.zoomToPlace(data.ids[0]);
-    }
-
-    function removeItem(data) {
-        var id = data.ids[0];
-        that.triggerEvent('removeplace', {id: id});
-        self.$map.removePlace(id);
-    }
-
     function selectItem(data) {
-        Ox.print('selectItem', data.ids[0])
         var id = data.ids.length ? data.ids[0] : null;
         self.$map.options({selected: id});
         id && self.$map.panToPlace();
     }
 
     function selectPlace(place) {
-        Ox.print('selectPlace', place.id && !isResult ? [place.id] : [])
         var isResult = place.id && place.id[0] == '_';
         self.$list.options({
             selected: place.id && !isResult ? [place.id] : []
@@ -779,10 +779,10 @@ Ox.ListMap = function(options, self) {
         if (place.id) {
             //isResult && self.options.places.push(place);
             self.selectedPlace = place.id;
-            self.$placeTitleFlag.attr({
+            self.$placeFlag.attr({
                 src: Ox.getImageByGeoname('icon', 16, place.geoname)
             });
-            self.$placeTitleName.options({title: place.geoname || ''});
+            self.$placeName.options({title: place.geoname || ''});
             self.$placeTitle.show();
             self.$placeForm.values(place).show();
             self.$areaKmInput.options({value: Ox.formatArea(place.area)});

source/Ox.UI/js/Map/Ox.Map.js

@@ -102,7 +102,7 @@ Ox.Map = function(options, self) {
 			findPlaceholder: 'Find',
             maxMarkers: 100,
             places: null,
-            selected: null,
+            selected: '',
             showControls: false,
             showLabels: false,
             showTypes: false,

source/Ox.UI/js/Menu/Ox.Menu.js

@@ -551,7 +551,7 @@ Ox.Menu = function(options, self) {
     checkItem <f>
     @*/
     that.checkItem = function(id) {
-        //Ox.print('checkItem id', id)
+        Ox.print('checkItem id', id)
         var ids = id.split('_'),
             item;
         if (ids.length == 1) {

source/Ox.UI/js/Video/Ox.VideoPlayer.js

@@ -1600,7 +1600,7 @@ Ox.VideoPlayer = function(options, self) {
 
     function rewind() {
         setTimeout(function() {
-            setPosition(self.options.playInToOut ? self.options.in : 0);
+            setPosition(self.options.playInToOut ? self.options['in'] : 0);
         }, 250);
     }