From efca832c76892c85b1e9d6c3f9f7fca6bf9dd009 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Sun, 9 Oct 2011 21:13:16 +0000 Subject: [PATCH] some work on ListCalendar --- source/Ox.UI/css/Ox.UI.css | 14 +- source/Ox.UI/js/Calendar/Ox.Calendar.js | 214 ++++++---- source/Ox.UI/js/Calendar/Ox.ListCalendar.js | 415 ++++++++++++++++---- source/Ox.UI/js/Form/Ox.Form.js | 2 + source/Ox.UI/js/List/Ox.IconList.js | 2 +- source/Ox.UI/js/List/Ox.TextList.js | 9 +- source/Ox.UI/js/Map/Ox.ListMap.js | 62 +-- source/Ox.UI/js/Map/Ox.Map.js | 2 +- source/Ox.UI/js/Menu/Ox.Menu.js | 2 +- source/Ox.UI/js/Video/Ox.VideoPlayer.js | 2 +- 10 files changed, 532 insertions(+), 192 deletions(-) diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 5f73afb3..9efcb18b 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/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: -webkit-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: -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)); diff --git a/source/Ox.UI/js/Calendar/Ox.Calendar.js b/source/Ox.UI/js/Calendar/Ox.Calendar.js index d16d807b..b1dd7ab1 100644 --- a/source/Ox.UI/js/Calendar/Ox.Calendar.js +++ b/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.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() + ' - ...'; - } + event = getEventData(event); }); 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 Edit event data + (id, key, value) -> Calendar object + {id, {key: value, ...}} -> 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(' ' + value + ' '); + } 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; diff --git a/source/Ox.UI/js/Calendar/Ox.ListCalendar.js b/source/Ox.UI/js/Calendar/Ox.ListCalendar.js index 4fa02e1d..a7dee2cf 100644 --- a/source/Ox.UI/js/Calendar/Ox.ListCalendar.js +++ b/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 = $('
') + .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({ - items: [], + self.$eventForm = Ox.Form({ + 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( - 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 - ); + self.$newEventButton = Ox.Button({ + title: 'New Event', + width: 96 + }) + .css({float: 'left', margin: '4px 2px 4px 4px'}) + .bindEvent({ + click: addEvent + }) + .appendTo(self.$eventStatusbar); + 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) { diff --git a/source/Ox.UI/js/Form/Ox.Form.js b/source/Ox.UI/js/Form/Ox.Form.js index 429e7ee6..dd713141 100644 --- a/source/Ox.UI/js/Form/Ox.Form.js +++ b/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], diff --git a/source/Ox.UI/js/List/Ox.IconList.js b/source/Ox.UI/js/List/Ox.IconList.js index 9678bc7e..b4d7b284 100644 --- a/source/Ox.UI/js/List/Ox.IconList.js +++ b/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 )) }); diff --git a/source/Ox.UI/js/List/Ox.TextList.js b/source/Ox.UI/js/List/Ox.TextList.js index abd22397..512bcd45 100644 --- a/source/Ox.UI/js/List/Ox.TextList.js +++ b/source/Ox.UI/js/List/Ox.TextList.js @@ -43,6 +43,7 @@ Ox.TextList 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) ? - Ox['format' + Ox.toTitleCase(format.type)] - .apply(this, Ox.merge([value], format.args || [])) : - format(value, data); + value = Ox.isObject(format) + ? Ox['format' + Ox.toTitleCase(format.type)] + .apply(this, Ox.merge([value], format.args || [])) + : format(value, data); } else if (Ox.isArray(value)) { value = value.join(', '); } diff --git a/source/Ox.UI/js/Map/Ox.ListMap.js b/source/Ox.UI/js/Map/Ox.ListMap.js index d938dcce..c4143566 100644 --- a/source/Ox.UI/js/Map/Ox.ListMap.js +++ b/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 = $('
') .hide() - .appendTo(self.$placeTitlebar.$element) - self.$placeTitleFlag = $('') + .appendTo(self.$placeTitlebar) + self.$placeFlag = $('') .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)}); diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js index 5eeb5754..78ce7a42 100644 --- a/source/Ox.UI/js/Map/Ox.Map.js +++ b/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, diff --git a/source/Ox.UI/js/Menu/Ox.Menu.js b/source/Ox.UI/js/Menu/Ox.Menu.js index 9731022f..87182e5f 100644 --- a/source/Ox.UI/js/Menu/Ox.Menu.js +++ b/source/Ox.UI/js/Menu/Ox.Menu.js @@ -551,7 +551,7 @@ Ox.Menu = function(options, self) { checkItem @*/ that.checkItem = function(id) { - //Ox.print('checkItem id', id) + Ox.print('checkItem id', id) var ids = id.split('_'), item; if (ids.length == 1) { diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js index 9ce93cd7..ebb9a679 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js +++ b/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); }