0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add calendar controls

Browse source
This commit is contained in:
rlx 2011-10-31 12:45:08 +00:00
parent 1db1278ba2
commit a727c32836
7 changed files with 189 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
source/Ox.UI/css/Ox.UI.css
View file

@ -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;
}

135
source/Ox.UI/js/Calendar/Ox.Calendar.js
View file

@ -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.options.height // - 72 // 24 + 16 + 16 + 16
self.lineEvents.length * 16 + 16, // fixme: why +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;

2
source/Ox.UI/js/Calendar/Ox.ListCalendar.js
View file

@ -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
})

2
source/Ox.UI/js/Form/Ox.Label.js
View file

@ -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' ?

5
source/Ox.UI/js/Map/Ox.ListMap.js
View file

@ -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],

7
source/Ox.UI/themes/classic/css/classic.css
View file

@ -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

6
source/Ox.UI/themes/modern/css/modern.css
View file

@ -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);
}
/*
================================================================================