add calendar controls

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

@@ -284,6 +284,42 @@ Calendar
     border-radius: 4px;
 }
 
+.OxCalendar .OxCalendarControl,
+.OxCalendar .OxEventControl {
+    position: absolute;
+}
+.OxCalendar .OxCalendarControl.OxCalendarButtonCenter {
+    left: 24px;
+    bottom: 56px;
+}
+.OxCalendar .OxCalendarControl.OxCalendarButtonDown {
+    left: 24px;
+    bottom: 36px;
+}
+.OxCalendar .OxCalendarControl.OxCalendarButtonLeft {
+    left: 4px;
+    bottom: 56px;
+}
+.OxCalendar .OxCalendarControl.OxCalendarButtonRight {
+    left: 44px;
+    bottom: 56px;
+}
+.OxCalendar .OxCalendarControl.OxCalendarButtonUp {
+    left: 24px;
+    bottom: 76px;
+}
+
+.OxCalendar .OxEventControl.OxEventName {
+    right: 24px;
+    bottom: 36px;
+    width: 128px;
+    text-overflow: ellipsis;
+}
+.OxCalendar .OxEventControl.OxEventDeselectButton {
+    right: 4px;
+    bottom: 36px;
+}
+
 .OxCalendar .OxRange .OxArrow {
     border-radius: 0;
 }

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

@@ -35,6 +35,7 @@ Ox.Calendar = function(options, self) {
             height: 256,
             range: [1000, 3000],
             selected: '',
+            showControls: false,
             showTypes: ['date', 'place', 'person', 'other'],
             width: 256,
             zoom: 8
@@ -380,6 +381,112 @@ Ox.Calendar = function(options, self) {
         })
         .appendTo(that);
 
+    self.$controls = {
+        center: Ox.Button({
+                title: 'center',
+                type: 'image'
+            })
+            .addClass('OxCalendarControl OxCalendarButtonCenter')
+            .bindEvent({
+                singleclick: function() {
+                    // ...
+                },
+                doubleclick: function() {
+                    // ...
+                }
+            })
+            .appendTo(that),
+        down: Ox.Button({
+                title: 'down',
+                type: 'image'
+            })
+            .addClass('OxCalendarControl OxCalendarButtonDown')
+            .bindEvent({
+                singleclick: function() {
+                    scrollBy(1);
+                },
+                doubleclick: function() {
+                    scrollTo(1000000, true)
+                }
+            })
+            .appendTo(that),
+        left: Ox.Button({
+                title: 'left',
+                type: 'image'
+            })
+            .addClass('OxCalendarControl OxCalendarButtonLeft')
+            .bindEvent({
+                singleclick: function() {
+                    panBy(-self.$content.width() / 2 * getSecondsPerPixel() * 1000);
+                },
+                doubleclick: function() {
+                    // fixme: should pan to rightmost event
+                    panBy(-self.$content.width() * getSecondsPerPixel() * 1000);
+                }
+            })
+            .appendTo(that),
+        right: Ox.Button({
+                title: 'right',
+                type: 'image'
+            })
+            .addClass('OxCalendarControl OxCalendarButtonRight')
+            .bindEvent({
+                singleclick: function() {
+                    panBy(self.$content.width() / 2 * getSecondsPerPixel() * 1000);
+                },
+                doubleclick: function() {
+                    // fixme: should pan to rightmost event
+                    panBy(self.$content.width() * getSecondsPerPixel() * 1000);
+                }
+            })
+            .appendTo(that),
+        up: Ox.Button({
+                title: 'up',
+                type: 'image'
+            })
+            .addClass('OxCalendarControl OxCalendarButtonUp')
+            .bindEvent({
+                singleclick: function() {
+                    scrollBy(-1);
+                },
+                doubleclick: function() {
+                    scrollTo(0, true)
+                }
+            })
+            .appendTo(that)
+    };
+    !self.options.showControls && Ox.forEach(self.$controls, function($control) {
+        $control.css({opacity: 0}).hide();
+    });
+
+    self.$eventControls = {
+        name: Ox.Label()
+            .addClass('OxEventControl OxEventName')
+            .bindEvent({
+                singleclick: function() {
+                    panToSelected();
+                },
+                doubleclick: function() {
+                    zoomToSelected();
+                }
+            })
+            .appendTo(that),
+        deselectButton: Ox.Button({
+                title: 'close',
+                type: 'image',
+            })
+            .addClass('OxEventControl OxEventDeselectButton')
+            .bindEvent({
+                click: function() {
+                    selectEvent('');
+                }
+            })
+            .appendTo(that)
+    };
+    Ox.forEach(self.$eventControls, function($eventControl) {
+        $eventControl.css({opacity: 0}).hide();
+    });
+
     self.$zoomInput = Ox.Range({
             arrows: true,
             max: self.maxZoom,
@@ -889,8 +996,8 @@ Ox.Calendar = function(options, self) {
 
     function renderCalendar() {
         self.contentHeight = Math.max(
-            self.lineEvents.length * 16,
+            self.lineEvents.length * 16 + 16, // fixme: why +16 ?,
-            self.options.height // - 72 // 24 + 16 + 16 + 16
+            self.options.height - 56 // 24 + 16 + 16
         );
         self.$content.css({height: self.contentHeight + 'px'});
         $('.OxBackground').empty();
@@ -990,6 +1097,7 @@ Ox.Calendar = function(options, self) {
     }
 
     function selectEvent(id, $element) {
+        var event;
         self.$content.find('.OxSelected').removeClass('OxSelected');
         if (id) {
             self.options.selected = id;
@@ -999,16 +1107,32 @@ Ox.Calendar = function(options, self) {
             } else {
                 panToSelected();
             }
+            event = Ox.getObjectById(self.options.events, id);
             // fixme: map event should also be 'select', not 'selectplace'
-            that.triggerEvent('select', Ox.getObjectById(self.options.events, id));
+            setEventControls(event);
+            that.triggerEvent('select', event);
         } else {
             if (self.options.selected !== '') {
                 self.options.selected = '';
+                setEventControls(null);
                 that.triggerEvent('select', {id: ''});
             }
         }
     }
 
+    function setEventControls(event) {
+        var $eventControls = that.$element.find('.OxEventControl'),
+            isVisible = self.$eventControls.name.is(':visible');
+        if (event) {
+            self.$eventControls.name.options({title: event.name});
+            !isVisible && $eventControls.show().animate({opacity: 1}, 250);
+        } else {
+            isVisible && $eventControls.animate({opacity: 0}, 250, function() {
+                $eventControls.hide();
+            });
+        }
+    }
+
     function singleclick(data) {
         var $target = $(data.target),
             id = $target.data('id');
@@ -1024,6 +1148,10 @@ Ox.Calendar = function(options, self) {
         }
     }
 
+    function toggleControls() {
+        // ...
+    }
+
     function zoomBy(delta) {
         zoomTo(self.options.zoom + delta);
     }
@@ -1113,6 +1241,7 @@ Ox.Calendar = function(options, self) {
                 getLines();
                 renderCalendar();
                 panToSelected();
+                setEventControls(event);
             }
         });
         return that;

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

@@ -16,6 +16,7 @@ Ox.ListCalendar = function(options, self) {
             pageLength: 100,
             removePlace: null,
             selected: [],
+            showControls: false,
             sort: [{key: 'name', operator: '+'}],
             width: 256
         })
@@ -231,6 +232,7 @@ Ox.ListCalendar = function(options, self) {
             date: new Date(0),
             events: Ox.clone(self.options.events, true),
             height: self.options.height,
+            showControls: self.options.showControls,
             width: self.options.width - 514,
             zoom: 4
         })

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

@@ -19,7 +19,7 @@ Ox.Label = function(options, self) {
                 title: '',
                 width: 'auto'
             })
-            .options(options)
+            .options(options || {})
             .addClass(
                 'OxLabel' + (self.options.disabled ? ' OxDisabled' : '') +
                 (self.options.overlap != 'none' ?

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

@@ -28,6 +28,9 @@ Ox.ListMap = function(options, self) {
             places: null,
             removePlace: null,
             selected: [],
+            showControls: false,
+            showLabels: false,
+            showTypes: false,
             sort: [{key: 'geoname', operator: '+'}],
             width: 256
         })
@@ -310,6 +313,8 @@ Ox.ListMap = function(options, self) {
         height: self.options.height,
         places: self.options.places,
         //statusbar: true,
+        showControls: self.options.showControls,
+        showLabels: self.options.showLabels,
         showTypes: self.options.showTypes,
         toolbar: true,
         width: self.options.width - 514,//self.mapResize[1],

source/Ox.UI/themes/classic/css/classic.css

@@ -129,6 +129,13 @@ Calendar
     background-color: rgba(255, 255, 255, 0.25);
 }
 
+.OxThemeModern .OxCalendar .OxCalendarControl,
+.OxThemeModern .OxCalendar .OxEventControl {
+    border-color: rgb(64, 64, 64);
+    background: rgba(255, 255, 255, 0.75);
+    color: rgb(64, 64, 64);
+}
+
 /*
 ================================================================================
 Dialog

source/Ox.UI/themes/modern/css/modern.css

@@ -127,6 +127,12 @@ Calendar
     background-color: rgba(0, 0, 0, 0.25);
 }
 
+.OxThemeModern .OxCalendar .OxCalendarControl,
+.OxThemeModern .OxCalendar .OxEventControl {
+    border-color: rgb(192, 192, 192);
+    background: rgba(0, 0, 0, 0.75);
+    color: rgb(192, 192, 192);
+}
 
 /*
 ================================================================================