forked from 0x2620/oxjs
update video editor (places, events)
This commit is contained in:
rlx
parent
8de69b3173
commit
8384fcc913
13 changed files with 346 additions and 144 deletions
|
|
@ -38,7 +38,9 @@ Ox.Calendar = function(options, self) {
|
|||
range: [1000, 3000],
|
||||
selected: '',
|
||||
showControls: false,
|
||||
showToolbar: false,
|
||||
showTypes: ['date', 'place', 'person', 'other'],
|
||||
showZoombar: false,
|
||||
width: 256,
|
||||
zoom: 8
|
||||
})
|
||||
|
|
@ -289,61 +291,65 @@ Ox.Calendar = function(options, self) {
|
|||
}
|
||||
];
|
||||
|
||||
self.$toolbar = Ox.Bar({
|
||||
size: 24
|
||||
})
|
||||
.appendTo(that);
|
||||
if (self.options.showToolbar) {
|
||||
|
||||
self.$typeSelect = Ox.Select({
|
||||
items: [
|
||||
{id: 'date', title: 'Dates'},
|
||||
{id: 'place', title: 'Places'},
|
||||
{id: 'person', title: 'People'},
|
||||
{id: 'other', title: 'Other'}
|
||||
],
|
||||
max: -1,
|
||||
min: 1,
|
||||
title: 'Show...',
|
||||
value: self.options.showTypes,
|
||||
width: 80
|
||||
})
|
||||
.css({float: 'left', margin: '4px'})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
self.options.showTypes = data.value;
|
||||
getLines();
|
||||
renderCalendar();
|
||||
}
|
||||
})
|
||||
.appendTo(self.$toolbar);
|
||||
self.$toolbar = Ox.Bar({
|
||||
size: 24
|
||||
})
|
||||
.appendTo(that);
|
||||
|
||||
self.$dateInput = Ox.Input({
|
||||
clear: true,
|
||||
//placeholder: 'Date',
|
||||
value: Ox.formatDate(self.options.date, '%Y-%m-%d %H:%M:%S', true),
|
||||
width: 160
|
||||
})
|
||||
.css({float: 'right', margin: '4px'})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
panTo(Ox.parseDate(data.value, true))
|
||||
}
|
||||
})
|
||||
.appendTo(self.$toolbar);
|
||||
self.$typeSelect = Ox.Select({
|
||||
items: [
|
||||
{id: 'date', title: 'Dates'},
|
||||
{id: 'place', title: 'Places'},
|
||||
{id: 'person', title: 'People'},
|
||||
{id: 'other', title: 'Other'}
|
||||
],
|
||||
max: -1,
|
||||
min: 1,
|
||||
title: 'Show...',
|
||||
value: self.options.showTypes,
|
||||
width: 80
|
||||
})
|
||||
.css({float: 'left', margin: '4px'})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
self.options.showTypes = data.value;
|
||||
getLines();
|
||||
renderCalendar();
|
||||
}
|
||||
})
|
||||
.appendTo(self.$toolbar);
|
||||
|
||||
self.$dateInput = Ox.Input({
|
||||
clear: true,
|
||||
//placeholder: 'Date',
|
||||
value: Ox.formatDate(self.options.date, '%Y-%m-%d %H:%M:%S', true),
|
||||
width: 160
|
||||
})
|
||||
.css({float: 'right', margin: '4px'})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
panTo(Ox.parseDate(data.value, true))
|
||||
}
|
||||
})
|
||||
.appendTo(self.$toolbar);
|
||||
|
||||
}
|
||||
|
||||
self.$scalebar = Ox.Element()
|
||||
.addClass('OxTimeline')
|
||||
.css({
|
||||
posision: 'absolute',
|
||||
top: '24px'
|
||||
top: (self.options.showToolbar * 24) + 'px'
|
||||
})
|
||||
.appendTo(that);
|
||||
|
||||
self.$container = Ox.Element()
|
||||
.addClass('OxCalendarContainer')
|
||||
.css({
|
||||
top: '40px',
|
||||
bottom: '16px'
|
||||
top: (self.options.showToolbar * 24) + 16 + 'px',
|
||||
bottom: (self.options.showZoombar * 16) + 'px'
|
||||
})
|
||||
.bind({
|
||||
mouseleave: mouseleave,
|
||||
|
|
@ -372,17 +378,36 @@ Ox.Calendar = function(options, self) {
|
|||
.addClass('OxTimeline')
|
||||
.css({
|
||||
posision: 'absolute',
|
||||
bottom: '16px'
|
||||
bottom: (self.options.showZoombar * 16) + 'px'
|
||||
})
|
||||
.appendTo(that);
|
||||
|
||||
self.$zoombar = Ox.Element()
|
||||
.css({
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
height: '16px'
|
||||
})
|
||||
.appendTo(that);
|
||||
if (self.options.showZoombar) {
|
||||
|
||||
self.$zoombar = Ox.Element()
|
||||
.css({
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
height: '16px'
|
||||
})
|
||||
.appendTo(that);
|
||||
|
||||
self.$zoomInput = Ox.Range({
|
||||
arrows: true,
|
||||
changeOnDrag: true,
|
||||
max: self.maxZoom,
|
||||
min: 0,
|
||||
size: self.options.width,
|
||||
thumbSize: 32,
|
||||
thumbValue: true,
|
||||
value: self.options.zoom
|
||||
})
|
||||
.bindEvent({
|
||||
change: changeZoom
|
||||
})
|
||||
.appendTo(self.$zoombar);
|
||||
|
||||
}
|
||||
|
||||
self.$controls = {
|
||||
center: Ox.Button({
|
||||
|
|
@ -390,6 +415,7 @@ Ox.Calendar = function(options, self) {
|
|||
type: 'image'
|
||||
})
|
||||
.addClass('OxCalendarControl OxCalendarButtonCenter')
|
||||
.css({bottom: 40 + (self.options.showZoombar * 16) + 'px'})
|
||||
.bindEvent({
|
||||
singleclick: function() {
|
||||
// ...
|
||||
|
|
@ -404,6 +430,7 @@ Ox.Calendar = function(options, self) {
|
|||
type: 'image'
|
||||
})
|
||||
.addClass('OxCalendarControl OxCalendarButtonDown')
|
||||
.css({bottom: 20 + (self.options.showZoombar * 16) + 'px'})
|
||||
.bindEvent({
|
||||
singleclick: function() {
|
||||
scrollBy(1);
|
||||
|
|
@ -418,6 +445,7 @@ Ox.Calendar = function(options, self) {
|
|||
type: 'image'
|
||||
})
|
||||
.addClass('OxCalendarControl OxCalendarButtonLeft')
|
||||
.css({bottom: 40 + (self.options.showZoombar * 16) + 'px'})
|
||||
.bindEvent({
|
||||
singleclick: function() {
|
||||
panBy(-self.$content.width() / 2 * getSecondsPerPixel() * 1000);
|
||||
|
|
@ -433,6 +461,7 @@ Ox.Calendar = function(options, self) {
|
|||
type: 'image'
|
||||
})
|
||||
.addClass('OxCalendarControl OxCalendarButtonRight')
|
||||
.css({bottom: 40 + (self.options.showZoombar * 16) + 'px'})
|
||||
.bindEvent({
|
||||
singleclick: function() {
|
||||
panBy(self.$content.width() / 2 * getSecondsPerPixel() * 1000);
|
||||
|
|
@ -447,6 +476,7 @@ Ox.Calendar = function(options, self) {
|
|||
title: 'up',
|
||||
type: 'image'
|
||||
})
|
||||
.css({bottom: 60 + (self.options.showZoombar * 16) + 'px'})
|
||||
.addClass('OxCalendarControl OxCalendarButtonUp')
|
||||
.bindEvent({
|
||||
singleclick: function() {
|
||||
|
|
@ -465,6 +495,7 @@ Ox.Calendar = function(options, self) {
|
|||
self.$eventControls = {
|
||||
name: Ox.Label()
|
||||
.addClass('OxEventControl OxEventName')
|
||||
.css({bottom: 20 + (self.options.showZoombar * 16) + 'px'})
|
||||
.bindEvent({
|
||||
singleclick: function() {
|
||||
panToSelected();
|
||||
|
|
@ -479,6 +510,7 @@ Ox.Calendar = function(options, self) {
|
|||
type: 'image',
|
||||
})
|
||||
.addClass('OxEventControl OxEventDeselectButton')
|
||||
.css({bottom: 20 + (self.options.showZoombar * 16) + 'px'})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
selectEvent('');
|
||||
|
|
@ -490,21 +522,6 @@ Ox.Calendar = function(options, self) {
|
|||
$eventControl.css({opacity: 0}).hide();
|
||||
});
|
||||
|
||||
self.$zoomInput = Ox.Range({
|
||||
arrows: true,
|
||||
changeOnDrag: true,
|
||||
max: self.maxZoom,
|
||||
min: 0,
|
||||
size: self.options.width,
|
||||
thumbSize: 32,
|
||||
thumbValue: true,
|
||||
value: self.options.zoom
|
||||
})
|
||||
.bindEvent({
|
||||
change: changeZoom
|
||||
})
|
||||
.appendTo(self.$zoombar);
|
||||
|
||||
self.$tooltip = Ox.Tooltip({
|
||||
animate: false
|
||||
})
|
||||
|
|
@ -1008,7 +1025,8 @@ Ox.Calendar = function(options, self) {
|
|||
function renderCalendar() {
|
||||
self.contentHeight = Math.max(
|
||||
self.lineEvents.length * 16 + 16, // fixme: why +16 ?,
|
||||
self.options.height - 56 // 24 + 16 + 16
|
||||
self.options.height - (self.options.showToolbar * 24) - 16 - 16
|
||||
// self.options.height - 56 // 24 + 16 + 16
|
||||
);
|
||||
self.$content.css({height: self.contentHeight + 'px'});
|
||||
$('.OxBackground').empty();
|
||||
|
|
@ -1017,7 +1035,7 @@ Ox.Calendar = function(options, self) {
|
|||
renderTimelines();
|
||||
renderOverlay();
|
||||
renderEvents();
|
||||
self.$dateInput.value(
|
||||
self.options.showToolbar && self.$dateInput.value(
|
||||
Ox.formatDate(self.options.date, '%Y-%m-%d %H:%M:%S', true)
|
||||
);
|
||||
}
|
||||
|
|
@ -1045,7 +1063,7 @@ Ox.Calendar = function(options, self) {
|
|||
Ox.Element()
|
||||
.addClass('OxOverlay')
|
||||
.css({
|
||||
bottom: '16px'
|
||||
bottom: (self.options.showZoombar * 16) + 'px'
|
||||
})
|
||||
.append(
|
||||
$('<div>').css({
|
||||
|
|
@ -1169,7 +1187,7 @@ Ox.Calendar = function(options, self) {
|
|||
|
||||
function zoomTo(zoom) {
|
||||
self.options.zoom = Ox.limit(zoom, 0, self.maxZoom);
|
||||
self.$zoomInput.value(self.options.zoom);
|
||||
self.options.showZoombar && self.$zoomInput.value(self.options.zoom);
|
||||
renderCalendar();
|
||||
}
|
||||
|
||||
|
|
@ -1279,7 +1297,7 @@ Ox.Calendar = function(options, self) {
|
|||
that.resizeCalendar = function() {
|
||||
self.options.width = that.width();
|
||||
self.options.height = that.height();
|
||||
self.$zoomInput.options({size: self.options.width});
|
||||
self.options.showZoombar && self.$zoomInput.options({size: self.options.width});
|
||||
renderCalendar();
|
||||
return that;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue