add zoom to mouse position when using scrollwheel
This commit is contained in:
parent
e02e77605f
commit
02a3b5c6a1
4 changed files with 269 additions and 64 deletions
|
@ -1646,7 +1646,7 @@ Miscellaneous
|
||||||
position: absolute;
|
position: absolute;
|
||||||
padding: 1px 2px 1px 2px;
|
padding: 1px 2px 1px 2px;
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
opacity: 0;
|
//opacity: 0;
|
||||||
z-index: 12;
|
z-index: 12;
|
||||||
-moz-border-radius: 4px;
|
-moz-border-radius: 4px;
|
||||||
-webkit-border-radius: 4px;
|
-webkit-border-radius: 4px;
|
||||||
|
|
|
@ -2484,6 +2484,31 @@ Ox.stripTags = function(str) {
|
||||||
return str.replace(/(<.*?>)/gi, '');
|
return str.replace(/(<.*?>)/gi, '');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Ox.substr = function(str, start, stop) {
|
||||||
|
/***
|
||||||
|
Ox.substr behaves like str[start:stop] in Python
|
||||||
|
(or like str.substring() with negative values for stop)
|
||||||
|
not implemented
|
||||||
|
>>> Ox.substr('foobar', 1)
|
||||||
|
"oobar"
|
||||||
|
>>> Ox.substr('foobar', -1)
|
||||||
|
"r"
|
||||||
|
>>> Ox.substr('foobar', 1, 3)
|
||||||
|
"oo"
|
||||||
|
>>> Ox.substr('foobar', -3, 5)
|
||||||
|
"ba"
|
||||||
|
>>> Ox.substr('foobar', 1, -2)
|
||||||
|
"oob"
|
||||||
|
>>> Ox.substr('foobar', -4, -1)
|
||||||
|
"oba"
|
||||||
|
***/
|
||||||
|
stop = Ox.isUndefined(stop) ? str.length : stop;
|
||||||
|
return str.substring(
|
||||||
|
start < 0 ? str.length + start : start,
|
||||||
|
stop < 0 ? str.length + stop : stop
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
Ox.toCamelCase = function(str) {
|
Ox.toCamelCase = function(str) {
|
||||||
/*
|
/*
|
||||||
>>> Ox.toCamelCase("foo-bar-baz")
|
>>> Ox.toCamelCase("foo-bar-baz")
|
||||||
|
|
|
@ -883,6 +883,13 @@ requires
|
||||||
Basic element object
|
Basic element object
|
||||||
***/
|
***/
|
||||||
|
|
||||||
|
/*
|
||||||
|
tooltip option can be any of the following:
|
||||||
|
string
|
||||||
|
function(e), returns string
|
||||||
|
{mousemove: true, title: function(e)}
|
||||||
|
*/
|
||||||
|
|
||||||
return function(options, self) {
|
return function(options, self) {
|
||||||
|
|
||||||
if (!(this instanceof arguments.callee)) {
|
if (!(this instanceof arguments.callee)) {
|
||||||
|
@ -901,8 +908,19 @@ requires
|
||||||
self.$eventHandler = $('<div>');
|
self.$eventHandler = $('<div>');
|
||||||
}
|
}
|
||||||
|
|
||||||
var that = new Ox.$Element($('<' + (self.options.element || 'div') + '>'));
|
var that = new Ox.$Element(
|
||||||
that.$element.mousedown(mousedown);
|
$('<' + (self.options.element || 'div') + '>')
|
||||||
|
)
|
||||||
|
.mousedown(mousedown);
|
||||||
|
|
||||||
|
/*
|
||||||
|
self.options.tooltip && that.bind(Ox.extend({
|
||||||
|
mouseenter: mouseenter,
|
||||||
|
mouseleave: mouseleave
|
||||||
|
}, self.options.tooltip.mousemove ? {
|
||||||
|
mousemove: mousemove
|
||||||
|
} : {}));
|
||||||
|
*/
|
||||||
|
|
||||||
function mousedown(e) {
|
function mousedown(e) {
|
||||||
/*
|
/*
|
||||||
|
@ -987,6 +1005,26 @@ requires
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
function mouseenter(e) {
|
||||||
|
self.$tooltip = new Ox.Tooltip({
|
||||||
|
title: Ox.isString(self.options.tooltip) ?
|
||||||
|
self.options.tooltip : Ox.isFunction(self.options.tooltip) ?
|
||||||
|
self.options.tooltip(e) : self.options.tooltip.title(e)
|
||||||
|
}).show();
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouseleave(e) {
|
||||||
|
self.$tooltip.hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
function mousemove(e) {
|
||||||
|
self.$tooltip.options({
|
||||||
|
title: self.options.tooltip.title(e)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
self.onChange = function() {
|
self.onChange = function() {
|
||||||
// self.onChange(key, value)
|
// self.onChange(key, value)
|
||||||
// is called when an option changes
|
// is called when an option changes
|
||||||
|
@ -10308,20 +10346,21 @@ requires
|
||||||
|
|
||||||
Ox.MapPlace = function(options) {
|
Ox.MapPlace = function(options) {
|
||||||
|
|
||||||
var options = Ox.extend({
|
options = Ox.extend({
|
||||||
east: 0,
|
east: 0,
|
||||||
editing: false,
|
editing: false,
|
||||||
geoname: '',
|
geoname: '',
|
||||||
map: null,
|
map: null,
|
||||||
name: '',
|
name: '',
|
||||||
north: 0,
|
north: 0,
|
||||||
selected: false,
|
selected: false,
|
||||||
south: 0,
|
south: 0,
|
||||||
type: [],
|
type: [],
|
||||||
visible: false,
|
visible: false,
|
||||||
west: 0
|
west: 0
|
||||||
}, options),
|
}, options);
|
||||||
that = this;
|
|
||||||
|
var that = this;
|
||||||
|
|
||||||
Ox.forEach(options, function(val, key) {
|
Ox.forEach(options, function(val, key) {
|
||||||
that[key] = val;
|
that[key] = val;
|
||||||
|
@ -10865,6 +10904,7 @@ requires
|
||||||
height: self.options.height + 'px'
|
height: self.options.height + 'px'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
self.maxZoom = 28;
|
||||||
self.overlayWidths = [Math.round(self.options.width / 16)];
|
self.overlayWidths = [Math.round(self.options.width / 16)];
|
||||||
self.overlayWidths = [
|
self.overlayWidths = [
|
||||||
Math.floor((self.options.width - self.overlayWidths[0]) / 2),
|
Math.floor((self.options.width - self.overlayWidths[0]) / 2),
|
||||||
|
@ -10984,7 +11024,11 @@ requires
|
||||||
top: '24px',
|
top: '24px',
|
||||||
bottom: '40px'
|
bottom: '40px'
|
||||||
})
|
})
|
||||||
.mousewheel(mousewheel)
|
.bind({
|
||||||
|
mouseleave: mouseleave,
|
||||||
|
mousemove: mousemove,
|
||||||
|
mousewheel: mousewheel
|
||||||
|
})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
dragstart: dragstart,
|
dragstart: dragstart,
|
||||||
drag: drag,
|
drag: drag,
|
||||||
|
@ -11041,17 +11085,16 @@ requires
|
||||||
})
|
})
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
|
|
||||||
self.$zoombar = new Ox.Bar({
|
self.$zoombar = new Ox.Element()
|
||||||
size: 16
|
|
||||||
})
|
|
||||||
.css({
|
.css({
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
bottom: 24 + 'px'
|
bottom: 24 + 'px',
|
||||||
|
height: '16px'
|
||||||
})
|
})
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
self.$zoomInput = new Ox.Range({
|
self.$zoomInput = new Ox.Range({
|
||||||
arrows: true,
|
arrows: true,
|
||||||
max: 28,
|
max: self.maxZoom,
|
||||||
min: 0,
|
min: 0,
|
||||||
size: self.options.width,
|
size: self.options.width,
|
||||||
thumbSize: 32,
|
thumbSize: 32,
|
||||||
|
@ -11063,6 +11106,24 @@ requires
|
||||||
})
|
})
|
||||||
.appendTo(self.$zoombar);
|
.appendTo(self.$zoombar);
|
||||||
|
|
||||||
|
self.$statusbar = new Ox.Bar({
|
||||||
|
size: 24
|
||||||
|
})
|
||||||
|
.css({
|
||||||
|
// fixme: no need to set position absolute with map statusbar
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: 0,
|
||||||
|
textAlign: 'center'
|
||||||
|
})
|
||||||
|
.appendTo(that);
|
||||||
|
|
||||||
|
self.$tooltip = new Ox.Tooltip({
|
||||||
|
animate: false
|
||||||
|
})
|
||||||
|
.css({
|
||||||
|
textAlign: 'center'
|
||||||
|
});
|
||||||
|
|
||||||
sortDates();
|
sortDates();
|
||||||
renderTimelines();
|
renderTimelines();
|
||||||
renderDates();
|
renderDates();
|
||||||
|
@ -11096,6 +11157,7 @@ requires
|
||||||
}
|
}
|
||||||
|
|
||||||
function dragpause(event, e) {
|
function dragpause(event, e) {
|
||||||
|
return;
|
||||||
if (self.drag) {
|
if (self.drag) {
|
||||||
Ox.print('dragpause')
|
Ox.print('dragpause')
|
||||||
dragafter();
|
dragafter();
|
||||||
|
@ -11127,6 +11189,7 @@ requires
|
||||||
}
|
}
|
||||||
|
|
||||||
function dragpauseScrollbar(event, e) {
|
function dragpauseScrollbar(event, e) {
|
||||||
|
return;
|
||||||
self.drag = {x: e.clientX};
|
self.drag = {x: e.clientX};
|
||||||
dragafter();
|
dragafter();
|
||||||
}
|
}
|
||||||
|
@ -11149,6 +11212,50 @@ requires
|
||||||
$('.OxDate').remove();
|
$('.OxDate').remove();
|
||||||
renderTimelines();
|
renderTimelines();
|
||||||
renderDates();
|
renderDates();
|
||||||
|
var calendarDate = getCalendarDate();
|
||||||
|
self.$statusbar.html(
|
||||||
|
calendarDate.start + ' | ' + self.options.date + ' | ' + calendarDate.stop
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(date) {
|
||||||
|
var isFullDays = Ox.formatDate(date.start, '%H:%M:%S') == '00:00:00' &&
|
||||||
|
Ox.formatDate(date.stop, '%H:%M:%S') == '00:00:00',
|
||||||
|
isOneDay = isFullDays && date.stop - date.start == 86400000, // fixme: wrong, DST
|
||||||
|
isSameDay = Ox.formatDate(date.start, '%Y-%m-%d') ==
|
||||||
|
Ox.formatDate(date.stop, '%Y-%m-%d'),
|
||||||
|
isSameYear = date.start.getFullYear() == date.stop.getFullYear(),
|
||||||
|
timeFormat = isFullDays ? '' : ', %H:%M:%S',
|
||||||
|
str = Ox.formatDate(date.start, '%a, %b %e');
|
||||||
|
if (isOneDay || isSameDay || !isSameYear) {
|
||||||
|
str += Ox.formatDate(date.start, ', %Y' + timeFormat);
|
||||||
|
}
|
||||||
|
if (!isOneDay && !isSameDay) {
|
||||||
|
str += Ox.formatDate(date.stop, ' - %a, %b %e, %Y' + timeFormat);
|
||||||
|
}
|
||||||
|
if (isSameDay) {
|
||||||
|
str += Ox.formatDate(date.stop, ' - ' + timeFormat.replace(', ', ''));
|
||||||
|
}
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCalendarDate() {
|
||||||
|
var ms = self.options.width * getSecondsPerPixel() * 1000;
|
||||||
|
return {
|
||||||
|
start: new Date(+self.options.date - ms / 2),
|
||||||
|
stop: new Date(+self.options.date + ms / 2)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function getDateByName(name) {
|
||||||
|
var date = {};
|
||||||
|
Ox.forEach(self.options.dates, function(v) {
|
||||||
|
if (v.name == name) {
|
||||||
|
date = v;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return date;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getDateElement(date, zoom) {
|
function getDateElement(date, zoom) {
|
||||||
|
@ -11156,24 +11263,26 @@ requires
|
||||||
width = Math.max(getPosition(date.stop, zoom) - left, 1);
|
width = Math.max(getPosition(date.stop, zoom) - left, 1);
|
||||||
return new Ox.Element()
|
return new Ox.Element()
|
||||||
.addClass('OxDate')
|
.addClass('OxDate')
|
||||||
.attr({
|
|
||||||
title: date.name
|
|
||||||
})
|
|
||||||
.css({
|
.css({
|
||||||
left: left + 'px',
|
left: left + 'px',
|
||||||
width: width + 'px'
|
width: width + 'px'
|
||||||
})
|
})
|
||||||
|
.data({
|
||||||
|
name: date.name
|
||||||
|
})
|
||||||
.html(' ' + date.name);
|
.html(' ' + date.name);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getMouseDate(e) {
|
||||||
|
return new Date(+self.options.date + (
|
||||||
|
e.clientX - that.offset().left - self.options.width / 2 - 1
|
||||||
|
) * getSecondsPerPixel() * 1000);
|
||||||
|
}
|
||||||
|
|
||||||
function getPixelsPerSecond(zoom) {
|
function getPixelsPerSecond(zoom) {
|
||||||
return Math.pow(2, (zoom || self.options.zoom) - 24);
|
return Math.pow(2, (zoom || self.options.zoom) - 24);
|
||||||
}
|
}
|
||||||
|
|
||||||
function getSecondsPerPixel(zoom) {
|
|
||||||
return 1 / getPixelsPerSecond(zoom);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getPosition(date, zoom) {
|
function getPosition(date, zoom) {
|
||||||
zoom = zoom || self.options.zoom
|
zoom = zoom || self.options.zoom
|
||||||
return Math.round(
|
return Math.round(
|
||||||
|
@ -11182,6 +11291,10 @@ requires
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getSecondsPerPixel(zoom) {
|
||||||
|
return 1 / getPixelsPerSecond(zoom);
|
||||||
|
}
|
||||||
|
|
||||||
function getTimelineElements(zoom) {
|
function getTimelineElements(zoom) {
|
||||||
var $elements = [],
|
var $elements = [],
|
||||||
pixelsPerSecond = getPixelsPerSecond(zoom),
|
pixelsPerSecond = getPixelsPerSecond(zoom),
|
||||||
|
@ -11210,10 +11323,36 @@ requires
|
||||||
return $elements;
|
return $elements;
|
||||||
}
|
}
|
||||||
|
|
||||||
function mousewheel(event, delta, deltaX, deltaY) {
|
function mouseleave() {
|
||||||
|
self.$tooltip.hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
function mousemove(e) {
|
||||||
|
var $target = $(e.target),
|
||||||
|
date, title;
|
||||||
|
if ($target.is('.OxLine > .OxDate')) {
|
||||||
|
date = getDateByName($target.data('name'));
|
||||||
|
title = '<span class="OxBright">' + date.name + '</span><br/>' +
|
||||||
|
formatDate(date);
|
||||||
|
} else {
|
||||||
|
title = Ox.formatDate(getMouseDate(e), '%a, %b %e, %Y, %H:%M:%S');
|
||||||
|
}
|
||||||
|
self.$tooltip.options({
|
||||||
|
title: title
|
||||||
|
})
|
||||||
|
.show(e.clientX, e.clientY);
|
||||||
|
}
|
||||||
|
|
||||||
|
function mousewheel(e, delta, deltaX, deltaY) {
|
||||||
Ox.print('mousewheel', delta, deltaX, deltaY);
|
Ox.print('mousewheel', delta, deltaX, deltaY);
|
||||||
if (!self.mousewheel && deltaY && Math.abs(deltaY) > Math.abs(deltaX)) {
|
if (!self.mousewheel && deltaY && Math.abs(deltaY) > Math.abs(deltaX)) {
|
||||||
self.options.zoom += deltaY < 0 ? -1 : 1;
|
self.options.date = deltaY < 0 ?
|
||||||
|
new Date(2 * +self.options.date - +getMouseDate(e)) :
|
||||||
|
new Date((+self.options.date + +getMouseDate(e)) / 2)
|
||||||
|
self.options.zoom = Ox.limit(self.options.zoom + (
|
||||||
|
deltaY < 0 ? -1 : 1
|
||||||
|
), 0, self.maxZoom);
|
||||||
|
self.$zoomInput.options({value: self.options.zoom});
|
||||||
$('.OxDate').remove();
|
$('.OxDate').remove();
|
||||||
renderTimelines();
|
renderTimelines();
|
||||||
renderDates();
|
renderDates();
|
||||||
|
@ -11294,6 +11433,32 @@ requires
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Ox.CalendarDate = function(options) {
|
||||||
|
|
||||||
|
var self = {},
|
||||||
|
that = this;
|
||||||
|
|
||||||
|
['start', 'stop'].forEach(function(v) {
|
||||||
|
var date = self.options[v];
|
||||||
|
if (Ox.isString(date)) {
|
||||||
|
date = new Date(self.options[v]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
self.duration = self.options.stop - self.options.start;
|
||||||
|
|
||||||
|
that.format = function() {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
that.formatDuration = function() {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
return that;
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
============================================================================
|
============================================================================
|
||||||
Menus
|
Menus
|
||||||
|
@ -13024,6 +13189,11 @@ requires
|
||||||
$markerPoint: [],
|
$markerPoint: [],
|
||||||
$selection: [],
|
$selection: [],
|
||||||
$subtitles: [],
|
$subtitles: [],
|
||||||
|
$tooltip: new Ox.Tooltip({
|
||||||
|
animate: false
|
||||||
|
}).css({
|
||||||
|
textAlign: 'center'
|
||||||
|
}),
|
||||||
hasSubtitles: self.options.subtitles.length,
|
hasSubtitles: self.options.subtitles.length,
|
||||||
height: 16,
|
height: 16,
|
||||||
lines: Math.ceil(self.options.duration / self.options.width),
|
lines: Math.ceil(self.options.duration / self.options.width),
|
||||||
|
@ -13245,7 +13415,7 @@ requires
|
||||||
}
|
}
|
||||||
|
|
||||||
function mouseleave(e) {
|
function mouseleave(e) {
|
||||||
self.$tooltip && self.$tooltip.hide();
|
self.$tooltip.hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
function mousemove(e) {
|
function mousemove(e) {
|
||||||
|
@ -13259,19 +13429,16 @@ requires
|
||||||
) {
|
) {
|
||||||
position = getPosition(e),
|
position = getPosition(e),
|
||||||
subtitle = getSubtitle(position);
|
subtitle = getSubtitle(position);
|
||||||
self.$tooltip = new Ox.Tooltip({
|
self.$tooltip.options({
|
||||||
title: subtitle ?
|
title: subtitle ?
|
||||||
'<span class=\'OxBright\'>' +
|
'<span class=\'OxBright\'>' +
|
||||||
Ox.highlight(subtitle.value, self.options.find).replace(/\n/g, '<br/>') + '</span><br/>' +
|
Ox.highlight(subtitle.value, self.options.find).replace(/\n/g, '<br/>') + '</span><br/>' +
|
||||||
Ox.formatDuration(subtitle['in'], 3) + ' - ' + Ox.formatDuration(subtitle['out'], 3) :
|
Ox.formatDuration(subtitle['in'], 3) + ' - ' + Ox.formatDuration(subtitle['out'], 3) :
|
||||||
Ox.formatDuration(position, 3)
|
Ox.formatDuration(position, 3)
|
||||||
})
|
})
|
||||||
.css({
|
|
||||||
textAlign: 'center'
|
|
||||||
})
|
|
||||||
.show(e.clientX, e.clientY);
|
.show(e.clientX, e.clientY);
|
||||||
} else {
|
} else {
|
||||||
self.$tooltip && self.$tooltip.hide();
|
self.$tooltip.hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -13482,7 +13649,9 @@ requires
|
||||||
$markerPoint: [],
|
$markerPoint: [],
|
||||||
$subtitles: [],
|
$subtitles: [],
|
||||||
$tiles: {},
|
$tiles: {},
|
||||||
$tooltip: new Ox.Tooltip(),
|
$tooltip: new Ox.Tooltip({
|
||||||
|
animate: false
|
||||||
|
}),
|
||||||
center: parseInt(self.options.width / 2),
|
center: parseInt(self.options.width / 2),
|
||||||
element: that.$element[0],
|
element: that.$element[0],
|
||||||
fps: 25,
|
fps: 25,
|
||||||
|
@ -13543,8 +13712,7 @@ requires
|
||||||
|
|
||||||
function click(event, e) {
|
function click(event, e) {
|
||||||
self.options.position = Ox.limit(
|
self.options.position = Ox.limit(
|
||||||
self.options.position + (e.clientX - that.$element.offset().left - self.center - 1) / self.fps,
|
getPosition(e), 0, self.options.duration
|
||||||
0, self.options.duration
|
|
||||||
);
|
);
|
||||||
setPosition();
|
setPosition();
|
||||||
triggerChangeEvent();
|
triggerChangeEvent();
|
||||||
|
@ -13564,6 +13732,10 @@ requires
|
||||||
triggerChangeEvent();
|
triggerChangeEvent();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getPosition(e) {
|
||||||
|
return self.options.position + (e.clientX - that.offset().left - self.center - 1) / self.fps
|
||||||
|
}
|
||||||
|
|
||||||
function mouseleave(e) {
|
function mouseleave(e) {
|
||||||
self.clientX = 0;
|
self.clientX = 0;
|
||||||
self.clientY = 0;
|
self.clientY = 0;
|
||||||
|
@ -13632,8 +13804,7 @@ requires
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateTooltip() {
|
function updateTooltip() {
|
||||||
// fixme: duplicated, need getPosition(e)
|
var position = getPosition(self);
|
||||||
var position = self.options.position + (self.clientX - that.offset().left - self.center - 1) / self.fps;
|
|
||||||
if (position >= 0 && position <= self.options.duration) {
|
if (position >= 0 && position <= self.options.duration) {
|
||||||
self.$tooltip
|
self.$tooltip
|
||||||
.options({
|
.options({
|
||||||
|
@ -13689,6 +13860,11 @@ requires
|
||||||
$images: [],
|
$images: [],
|
||||||
$markerPoint: [],
|
$markerPoint: [],
|
||||||
$subtitles: [],
|
$subtitles: [],
|
||||||
|
$tooltip: new Ox.Tooltip({
|
||||||
|
animate: false
|
||||||
|
}).css({
|
||||||
|
textAlign: 'center'
|
||||||
|
}),
|
||||||
hasSubtitles: self.options.subtitles.length,
|
hasSubtitles: self.options.subtitles.length,
|
||||||
height: 16,
|
height: 16,
|
||||||
margin: 8
|
margin: 8
|
||||||
|
@ -13770,7 +13946,7 @@ requires
|
||||||
}
|
}
|
||||||
|
|
||||||
function mouseleave(e) {
|
function mouseleave(e) {
|
||||||
self.$tooltip && self.$tooltip.hide();
|
self.$tooltip.hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
function mousemove(e) {
|
function mousemove(e) {
|
||||||
|
@ -13783,19 +13959,16 @@ requires
|
||||||
) {
|
) {
|
||||||
position = getPosition(e),
|
position = getPosition(e),
|
||||||
subtitle = getSubtitle(position);
|
subtitle = getSubtitle(position);
|
||||||
self.$tooltip = new Ox.Tooltip({
|
self.$tooltip.options({
|
||||||
title: subtitle ?
|
title: subtitle ?
|
||||||
'<span class=\'OxBright\'>' +
|
'<span class=\'OxBright\'>' +
|
||||||
Ox.highlight(subtitle.value, self.options.find).replace(/\n/g, '<br/>') + '</span><br/>' +
|
Ox.highlight(subtitle.value, self.options.find).replace(/\n/g, '<br/>') + '</span><br/>' +
|
||||||
Ox.formatDuration(subtitle['in'], 3) + ' - ' + Ox.formatDuration(subtitle['out'], 3) :
|
Ox.formatDuration(subtitle['in'], 3) + ' - ' + Ox.formatDuration(subtitle['out'], 3) :
|
||||||
Ox.formatDuration(position, 3)
|
Ox.formatDuration(position, 3)
|
||||||
})
|
})
|
||||||
.css({
|
|
||||||
textAlign: 'center'
|
|
||||||
})
|
|
||||||
.show(e.clientX, e.clientY);
|
.show(e.clientX, e.clientY);
|
||||||
} else {
|
} else {
|
||||||
self.$tooltip && self.$tooltip.hide();
|
self.$tooltip.hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -15207,7 +15380,7 @@ requires
|
||||||
change: changeSmallTimeline
|
change: changeSmallTimeline
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
self.$timeline.forEach(function($timeline) {
|
Ox.forEach(self.$timeline, function($timeline) {
|
||||||
$timeline.appendTo(self.$timelines);
|
$timeline.appendTo(self.$timelines);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -15440,19 +15613,22 @@ requires
|
||||||
============================================================================
|
============================================================================
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
|
||||||
*/
|
|
||||||
Ox.Tooltip = function(options, self) {
|
Ox.Tooltip = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
var self = self || {},
|
||||||
that = new Ox.Element('div', self)
|
that = new Ox.Element('div', self)
|
||||||
.defaults({
|
.defaults({
|
||||||
|
animate: true,
|
||||||
title: ''
|
title: ''
|
||||||
})
|
})
|
||||||
.options(options || {})
|
.options(options || {})
|
||||||
.addClass('OxTooltip')
|
.addClass('OxTooltip')
|
||||||
.html(self.options.title);
|
.html(self.options.title);
|
||||||
|
|
||||||
|
self.options.animate && that.css({
|
||||||
|
opacity: 0
|
||||||
|
});
|
||||||
|
|
||||||
self.onChange = function(key, value) {
|
self.onChange = function(key, value) {
|
||||||
if (key == 'title') {
|
if (key == 'title') {
|
||||||
that.html(value);
|
that.html(value);
|
||||||
|
@ -15460,29 +15636,33 @@ requires
|
||||||
};
|
};
|
||||||
|
|
||||||
that.hide = function() {
|
that.hide = function() {
|
||||||
that.animate({
|
if (self.options.animate) {
|
||||||
opacity: 0
|
that.animate({
|
||||||
}, 0, function() {
|
opacity: 0
|
||||||
|
}, 250, function() {
|
||||||
|
that.removeElement();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
that.removeElement();
|
that.removeElement();
|
||||||
});
|
}
|
||||||
return that;
|
return that;
|
||||||
};
|
};
|
||||||
|
|
||||||
that.show = function(x, y) {
|
that.show = function(x, y) {
|
||||||
var left, top, width, height;
|
var left, top, width, height;
|
||||||
$('.OxTooltip').remove(); // fixme: don't use dom
|
$('.OxTooltip').remove(); // fixme: don't use DOM
|
||||||
that.appendTo(Ox.UI.$body);
|
that.appendTo(Ox.UI.$body);
|
||||||
width = that.width();
|
width = that.width();
|
||||||
height = that.height();
|
height = that.height();
|
||||||
left = Ox.limit(x - width / 2, 0, Ox.UI.$document.width() - width);
|
left = Ox.limit(x - width / 2, 0, Ox.UI.$document.width() - width);
|
||||||
top = y > Ox.UI.$document.height() - height - 16 ? y - 32 : y + 16;
|
top = y > Ox.UI.$document.height() - height - 16 ? y - 32 : y + 16;
|
||||||
that.css({
|
that.css({
|
||||||
left: left + 'px',
|
left: left + 'px',
|
||||||
top: top + 'px'
|
top: top + 'px'
|
||||||
})
|
});
|
||||||
.animate({
|
self.options.animate && that.animate({
|
||||||
opacity: 1
|
opacity: 1
|
||||||
}, 0);
|
}, 250);
|
||||||
return that;
|
return that;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -16,7 +16,7 @@ $(function() {
|
||||||
{name: 'American Civil War', start: new Date('1861-04-12'), stop: new Date('1865-04-10')},
|
{name: 'American Civil War', start: new Date('1861-04-12'), stop: new Date('1865-04-10')},
|
||||||
{name: 'Franco-Prussian War', start: new Date('1870-07-19'), stop: new Date('1871-05-11')},
|
{name: 'Franco-Prussian War', start: new Date('1870-07-19'), stop: new Date('1871-05-11')},
|
||||||
{name: 'Paris Commune', start: new Date('1871-03-18'), stop: new Date('1871-05-29')},
|
{name: 'Paris Commune', start: new Date('1871-03-18'), stop: new Date('1871-05-29')},
|
||||||
{name: '20th century', start: new Date('1900-01-01'), stop: new Date('2000-01-01')},
|
{name: '20th century', start: new Date('1900'), stop: new Date('2000')},
|
||||||
{name: 'World War One', start: new Date('1914-07-28'), stop: new Date('1918-11-12')},
|
{name: 'World War One', start: new Date('1914-07-28'), stop: new Date('1918-11-12')},
|
||||||
{name: 'Russian Revolution', start: new Date('1917'), stop: new Date('1918')},
|
{name: 'Russian Revolution', start: new Date('1917'), stop: new Date('1918')},
|
||||||
{name: 'October Revolution', start: new Date('1917-11-07'), stop: new Date('1917-11-09')},
|
{name: 'October Revolution', start: new Date('1917-11-07'), stop: new Date('1917-11-09')},
|
||||||
|
|
Loading…
Add table
Reference in a new issue