From d51de5800942ca3bd74e59ad9fe160d152f4ea87 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Mon, 3 Oct 2011 16:14:01 +0000 Subject: [PATCH] add Ox.ListCalendar --- source/Ox.UI/js/Calendar/Ox.ListCalendar.js | 323 ++++++++++++++++++++ source/Ox.UI/js/Form/Ox.Checkbox.js | 1 - source/Ox.UI/js/Form/Ox.Form.js | 13 + source/Ox.UI/js/Map/Ox.ListMap.js | 59 ++-- 4 files changed, 364 insertions(+), 32 deletions(-) create mode 100644 source/Ox.UI/js/Calendar/Ox.ListCalendar.js diff --git a/source/Ox.UI/js/Calendar/Ox.ListCalendar.js b/source/Ox.UI/js/Calendar/Ox.ListCalendar.js new file mode 100644 index 00000000..102e2e9a --- /dev/null +++ b/source/Ox.UI/js/Calendar/Ox.ListCalendar.js @@ -0,0 +1,323 @@ +// vim: et:ts=4:sw=4:sts=4:ft=javascript + +/*@ +Ox.ListCalendar ListCalendar object +@*/ + +Ox.ListCalendar = function(options, self) { + + self = self || {}; + var that = Ox.Element({}, self) + .defaults({ + addPlace: null, + editPlace: null, + height: 256, + labels: false, + pageLength: 100, + places: null, + removePlace: null, + selected: [], + sort: [{key: 'geoname', operator: '+'}], + width: 256 + }) + .options(options || {}) + .addClass('OxListCalendar') + .css({ + width: self.options.width + 'px', + height: self.options.height + 'px' + }); + + self.columns = [ + { + addable: false, // fixme: implement + id: 'id', + title: 'Id', + unique: true, + visible: false, + width: 64 + }, + { + id: 'name', + operator: '+', + removable: false, + title: 'Name', + visible: true, + width: 144 + }, + { + editable: false, + format: function(value) { + return value.join('; '); + }, + id: 'alternativeNames', + operator: '+', + title: 'Alternative Names', + visible: true, + width: 144 + }, + { + format: function(value) { + return Ox.toTitleCase(value); + }, + id: 'type', + operator: '+', + title: 'Type', + visible: true, + width: 64 + }, + { + id: 'start', + operator: '-', + title: 'Start', + visible: true, + width: 144 + }, + { + id: 'end', + operator: '-', + title: 'End', + visible: true, + width: 144 + }, + { + id: 'duration', + operator: '-', + title: 'Duration', + visible: true, + width: 144 + }, + { + id: 'user', + operator: '+', + title: 'User', + visible: false, + width: 96 + }, + { + format: function(value) { + return value.replace('T', ' ').replace('Z', ''); + }, + id: 'created', + operator: '-', + title: 'Date Created', + visible: false, + width: 128, + }, + { + format: function(value) { + return value.replace('T', ' ').replace('Z', ''); + }, + id: 'modified', + operator: '-', + title: 'Date Modified', + visible: false, + width: 128, + }, + { + align: 'right', + id: 'matches', + operator: '-', + title: 'Matches', + visible: false, + width: 64, + } + ]; + + self.$listToolbar = Ox.Bar({ + size: 24 + }); + + self.$findElement = Ox.FormElementGroup({ + elements: [ + self.$findSelect = Ox.Select({ + items: [ + {id: 'all', title: 'Find: All'}, + {id: 'name', title: 'Find: Name'}, + {id: 'alternativeNames', title: 'Find: Alternative Names'}, + ], + overlap: 'right', + type: 'image' + }) + .bindEvent({ + change: function(data) { + var key = data.selected[0].id, + value = self.$findInput.value(); + value && updateList(key, value); + } + }), + self.$findInput = Ox.Input({ + clear: true, + placeholder: 'Find in List', + width: 234 + }) + .bindEvent({ + submit: function(data) { + var key = self.$findSelect.value(), + value = data.value; + updateList(key, value); + } + }) + ] + }) + .css({float: 'right', margin: '4px'}) + .bindEvent({ + change: function(data) { + + } + }) + .appendTo(self.$listToolbar); + + self.$list = Ox.TextList({ + columns: self.columns, + columnsRemovable: true, + columnsVisible: true, + //items: Ox.clone(self.options.places), + items: self.options.places, + pageLength: self.options.pageLength, + scrollbarVisible: true, + sort: self.options.sort + }) + .bindEvent({ + 'delete': removeItem, + init: initList, + key_0: function() { + self.$calendar.panToEvent(); + }, + key_equal: function() { + self.$calendar.zoom(1); + }, + key_minus: function() { + self.$calendar.zoom(-1); + }, + key_shift_0: function() { + self.$calendar.zoomToPlace(); + }, + load: function() { + that.triggerEvent('loadlist'); + }, + open: openItem, + select: selectItem + }); + + self.$listStatusbar = Ox.Bar({ + size: 16 + }); + + self.$status = Ox.Element() + .css({paddingTop: '2px', margin: 'auto', fontSize: '9px', textAlign: 'center'}) + .appendTo(self.$listStatusbar); + + self.$calendar = Ox.Element(); + + self.$placeTitlebar = Ox.Bar({ + size: 24 + }); + + self.$placeForm = Ox.Form({ + items: self.$placeFormItems, + width: 240 + }) + .css({margin: '8px'}) + .hide(); + + self.$placeStatusbar = Ox.Bar({ + size: 24 + }); + + that.$element.replaceWith( + 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.$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 + ); + + + function initList() { + + } + + function openItem() { + + } + + function selectItem() { + + } + + function updateList(key, value) { + var query = { + conditions: Ox.merge( + ['all', 'name'].indexOf(key) > -1 + ? [{key: 'name', value: value, operator: '='}] : [], + ['all', 'alternativeNames'].indexOf(key) > -1 + ? [{key: 'alternativeNames', value: value, operator: '='}] : [] + ), + operator: key == 'all' ? '|' : '&' + }; + self.$list.options({ + items: function(data, callback) { + return pandora.api.findEvents(Ox.extend(data, { + query: query + }), callback); + } + }); + } + +}; \ No newline at end of file diff --git a/source/Ox.UI/js/Form/Ox.Checkbox.js b/source/Ox.UI/js/Form/Ox.Checkbox.js index 0e3536fe..ddee5cee 100644 --- a/source/Ox.UI/js/Form/Ox.Checkbox.js +++ b/source/Ox.UI/js/Form/Ox.Checkbox.js @@ -45,7 +45,6 @@ Ox.Checkbox = function(options, self) { self.options.width != 'auto' && that.css({ width: self.options.width + 'px' }); - Ox.print(self.options.width - 16, self.options.label * (self.options.labelWidth - 16)) self.$title = Ox.Label({ disabled: self.options.disabled, id: self.options.id + 'Label', diff --git a/source/Ox.UI/js/Form/Ox.Form.js b/source/Ox.UI/js/Form/Ox.Form.js index b131f1eb..429e7ee6 100644 --- a/source/Ox.UI/js/Form/Ox.Form.js +++ b/source/Ox.UI/js/Form/Ox.Form.js @@ -54,6 +54,19 @@ Ox.Form = function(options, self) { data.valid = !!data.value.length; 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', { + id: self.itemIds[i], + data: data + }); + }, + change: function(data) { + that.triggerEvent('change', { + id: self.itemIds[i], + data: data + }); }, submit: function(data) { self.formIsValid && that.submit(); diff --git a/source/Ox.UI/js/Map/Ox.ListMap.js b/source/Ox.UI/js/Map/Ox.ListMap.js index d567040f..729d4a90 100644 --- a/source/Ox.UI/js/Map/Ox.ListMap.js +++ b/source/Ox.UI/js/Map/Ox.ListMap.js @@ -1,41 +1,41 @@ // vim: et:ts=4:sw=4:sts=4:ft=javascript /*@ -Ox.ListMap ListMap Object - () -> ListMap Object - (options) -> ListMap Object - (options, self) -> ListMap Object +Ox.ListMap ListMap object + () -> ListMap object + (options) -> ListMap object + (options, self) -> ListMap object options Options object - height height - labels labels - places places - selected selected - width width - self shared private variable + height Height in px + labels If true, show labels + places Array of places, or function that returns places + selected Selected places + width Width in px + self Shared private variable @*/ Ox.ListMap = function(options, self) { self = self || {}; var that = Ox.Element({}, self) - .defaults({ - addPlace: null, - editPlace: null, - height: 256, - labels: false, - pageLength: 100, - places: null, - removePlace: null, - selected: [], - sort: [{key: 'geoname', operator: '+'}], - width: 256 - }) - .addClass('OxListMap') - .options(options || {}) - .css({ - width: self.options.width + 'px', - height: self.options.height + 'px' - }); + .defaults({ + addPlace: null, + editPlace: null, + height: 256, + labels: false, + pageLength: 100, + places: null, + removePlace: null, + selected: [], + sort: [{key: 'geoname', operator: '+'}], + width: 256 + }) + .options(options || {}) + .addClass('OxListMap') + .css({ + width: self.options.width + 'px', + height: self.options.height + 'px' + }); self.isAsync = Ox.isFunction(self.options.places); @@ -72,7 +72,6 @@ Ox.ListMap = function(options, self) { width: 16 }, { - //editable: true, id: 'name', operator: '+', removable: false, @@ -81,7 +80,6 @@ Ox.ListMap = function(options, self) { width: 144 }, { - editable: false, format: function(value) { return value.join('; '); }, @@ -92,7 +90,6 @@ Ox.ListMap = function(options, self) { width: 144 }, { - //editable: true, id: 'geoname', map: function(v) { var names = v.split(', ');