101 lines
3.1 KiB
JavaScript
101 lines
3.1 KiB
JavaScript
// vim: et:ts=4:sw=4:sts=4:ft=js
|
|
// fixme: rename!
|
|
|
|
Ox.Flipbook = function(options, self) {
|
|
|
|
var self = self || {},
|
|
frame = $('<img>').css({
|
|
'position': 'absolute',
|
|
'width': '100%',
|
|
'height': 'auto'
|
|
})
|
|
.hide(),
|
|
icon = $('<img>').css({
|
|
'position': 'absolute',
|
|
'width': '100%',
|
|
'height': 'auto'
|
|
}),
|
|
frames = {},
|
|
timestamp = $('<div>').css({
|
|
'position': 'absolute',
|
|
'text-align': 'center',
|
|
'width': '100%'
|
|
})
|
|
.hide(),
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
frames: {},
|
|
duration: 0,
|
|
icon: ''
|
|
})
|
|
.options(options || {})
|
|
.append(icon)
|
|
.append(frame)
|
|
.append(timestamp)
|
|
.mouseover(function() {
|
|
frame.show();
|
|
timestamp.show();
|
|
icon.hide();
|
|
})
|
|
.mousemove(function(event) {
|
|
var position = getPosition(event),
|
|
image = getFrame(position),
|
|
frameHeight = image?image.height:that.height();
|
|
frame.attr('src', image.src);
|
|
timestamp.html(Ox.formatDuration(position, 'short'));
|
|
|
|
var height = (that.height() - frameHeight)/2;
|
|
frame.css({'top': height + 'px'});
|
|
timestamp.css({'top': (frameHeight + height) + 'px'});
|
|
})
|
|
.mouseout(function() {
|
|
frame.hide();
|
|
timestamp.hide();
|
|
icon.show();
|
|
})
|
|
.mousedown(function(event) {
|
|
that.triggerEvent('click', {
|
|
'position': getPosition(event)
|
|
});
|
|
});
|
|
|
|
function getPosition(event) {
|
|
var position = Math.floor(event.clientX - that.offset().left);
|
|
position = (position / that.width()) * self.options.duration;
|
|
return position;
|
|
}
|
|
|
|
function getFrame(position) {
|
|
var frame;
|
|
Ox.forEach(frames, function(img, i) {
|
|
if (!frame || i <= position) {
|
|
frame = img;
|
|
}
|
|
});
|
|
return frame;
|
|
}
|
|
|
|
function cacheFrames() {
|
|
Ox.forEach(self.options.frames, function(src, i) {
|
|
frames[i] = new Image();
|
|
frames[i].onload = function() {
|
|
frameHeight = frames[i].height / frames[i].width * that.width();
|
|
};
|
|
frames[i].src = src;
|
|
});
|
|
}
|
|
|
|
self.onChange = function(key, value) {
|
|
if (key == 'frames') {
|
|
cacheFrames();
|
|
} else if (key == 'icon') {
|
|
icon.attr('src', value);
|
|
}
|
|
};
|
|
|
|
if(options.icon) {
|
|
icon.attr('src', options.icon);
|
|
}
|
|
cacheFrames();
|
|
return that;
|
|
};
|