oxjs/source/js/Ox.SmallTimeline.js

Ox.SmallTimeline = function(options, self) {

    var self = self || {},
        that = new Ox.Element('div', self)
            .defaults({
                duration: 0,
                find: '',
                matches: [],
                points: [0, 0],
                position: 0,
                subtitles: [],
                videoId: '',
                width: 0
            })
            .options(options || {})
            .addClass('OxTimelineSmall')
            .mousedown(mousedown)
            .mouseleave(mouseleave)
            .mousemove(mousemove)
            .bindEvent({
                drag: function(event, e) {
                    mousedown(e);
                }
            });

    $.extend(self, {
        $images: [],
        $markerPoint: [],
        $subtitles: [],
        $tooltip: new Ox.Tooltip({
            animate: false
        }).css({
            textAlign: 'center'
        }),
        hasSubtitles: self.options.subtitles.length,
        height: 16,
        margin: 8
    });

	that.css({
		width: (self.options.width + self.margin) + 'px',
		height: (self.height + self.margin) + 'px'
	});

    self.$line = $('<img>')
        .addClass('OxTimelineSmallImage')
        .attr({
            src: '/' + self.options.videoId + '/timelines/timeline.16.0.png'
        })
        .css({
            position: 'absolute',
            left: '4px',
            top: '4px',
            width: self.options.width,
            height: '16px'
        })
        .appendTo(that.$element);

    self.$markerPosition = $('<img>')
        .addClass('OxMarkerPosition')
        .attr({
            src: Ox.UI.PATH + 'png/ox.ui/videoMarkerPlay.png'
        })
        .css({
            position: 'absolute',
            width: '9px',
            height: '5px',
            zIndex: 10
        })
        .appendTo(that.$element);

    setPosition();

    ['in', 'out'].forEach(function(v, i) {
        var titleCase = Ox.toTitleCase(v);
        self.$markerPoint[i] = $('<img>')
            .addClass('OxMarkerPoint' + titleCase)
            .attr({
                src: Ox.UI.PATH + 'png/ox.ui/videoMarker' + titleCase + '.png'
            })
            .appendTo(that.$element);
        setMarkerPoint(i);
    });

    function getPosition(e) {
        return e.offsetX / self.options.width * self.options.duration;
    }

    function getSubtitle(position) {
        var subtitle = null;
        Ox.forEach(self.options.subtitles, function(v) {
            if (v['in'] <= position && v['out'] >= position) {
                subtitle = v;
                return false;
            }
        });
        return subtitle;
    }

    function mousedown(e) {
        var $target = $(e.target);
        if (
            $target.hasClass('OxTimelineSmallImage') ||
            $target.hasClass('OxTimelineSmallSubtitles')
        ) {
            self.options.position = getPosition(e);
            setPosition();
            that.triggerEvent('change', {
                position: self.options.position
            });
        }
        e.preventDefault();
    }

    function mouseleave(e) {
        self.$tooltip.hide();
    }

    function mousemove(e) {
        var $target = $(e.target),
            position,
            subtitle;
        if (
            $target.hasClass('OxTimelineSmallImage') ||
            $target.hasClass('OxTimelineSmallSubtitles')
        ) {
            position = getPosition(e),
            subtitle = getSubtitle(position);
            self.$tooltip.options({
                    title: subtitle ?
                        '<span class=\'OxBright\'>' +
                        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(position, 3)
                })
                .show(e.clientX, e.clientY);
        } else {
            self.$tooltip.hide();
        }

    }

    function setMarker() {
        self.$markerPosition
            .css({
                left: parseInt(
                    self.options.position / self.options.duration * self.options.width
                ) + 'px',
                top: '2px',
            });
    }

    function setMarkerPoint(i) {
        var position = self.options.points[i];
        self.$markerPoint[i]
            .css({
                left: (position % self.options.width) + 'px',
                top: (parseInt(position / self.options.width) * (self.height + self.margin) + 16) + 'px',
            });
    }

    function setPosition() {
        self.options.position = Ox.limit(self.options.position, 0, self.options.duration);
        setMarker();
    }

    function setWidth() {
		self.$line.css({
			width: self.options.width + 'px',
		});
        setMarker();
        setMarkerPoint(0);
        setMarkerPoint(1);
    }

    self.onChange = function(key, value) {
        //Ox.print('onChange:', key, value)
        if (key == 'points') {
            //Ox.print('key', key, 'value', value)
            setMarkerPoint(0);
            setMarkerPoint(1);
        } else if (key == 'position') {
            setPosition();
        } else if (key == 'width') {
            setWidth();
        }
    };

    return that;

};