stmms-ft/stmms-web/src/main/webapp/static/mark-new/js/modules/thumbnail.js

//缩略图模块
var thumbnail = function (option, success) {
    var object = new Thumbnail(option);
    success();
    return object;
}

function Thumbnail(option) {
    var self = this;

    this.markControl = option.markControl;
    this.maxWidth = option.width != undefined ? option.width : 100;
    this.show = false;
    this.loading = false;
    this.imageHeight = undefined;
    this.mousePosition = undefined;

    this.init();

    this.markControl.on('task.get.before', this, function (event, context, eventObject) {
        this.task = undefined;
        this.render();
    });
    this.markControl.on('task.get.success', this, function (event, context, eventObject) {
        this.task = context.task;
        this.render();
    });
    this.markControl.on('mark.setting.init', this, function (event, context, setting) {
        var show = setting['thumbnail.show'];
        if (show != undefined && show == true) {
            self.toggle(true);
        }
    });
}

Thumbnail.prototype.init = function () {
    var self = this;
    this.container = getDom(this.container_dom, this.markControl).appendTo(this.markControl.container);
    this.container.width(this.maxWidth);
    this.container.offset({
        top: 60,
        left: 0
    });

    this.container.header = getDom(this.container_header_dom, this.markControl).appendTo(this.container);
    this.container.header.width('100%');

    this.container.content = getDom(this.container_content_dom, this.markControl).appendTo(this.container);
    this.container.content.width('100%');
    this.imageObject = this.container.content.find('img');
    this.imageObject.width('100%');
    this.imageObject.bind('mouseover', function (e) {
        self.updatePosition(e);
    }).bind('mousemove', function (e) {
        self.updatePosition(e);
    }).bind('mouseout', function (e) {
        self.updatePosition();
    }).bind('click', function () {
        if (self.show == true && self.task != undefined && self.mousePosition != undefined) {
            self.markControl.trigger('image.position.change', self.mousePosition.y / self.imageObject.height())
        }
    });

    this.container.draggable({
        containment: "window"
    });
    this.container.header.find('#close-button').click(function () {
        self.toggle(false);
        self.markControl.trigger('mark.setting.change', {
            'thumbnail.show': false
        });
    });

    this.control = getDom(this.control_dom, this.markControl).appendTo(this.markControl.container.assistant);
    this.control.find('#show-thumbnail-button').click(function () {
        self.markControl.container.assistant.hide();
        self.toggle(true);
        self.markControl.trigger('mark.setting.change', {
            'thumbnail.show': true
        });
    });
    this.control.find('#hide-thumbnail-button').click(function () {
        self.markControl.container.assistant.hide();
        self.toggle(false);
        self.markControl.trigger('mark.setting.change', {
            'thumbnail.show': false
        });
    });
}

Thumbnail.prototype.render = function () {
    var self = this;
    var imageObject = this.imageObject;
    if (this.task != undefined && this.task.imageData != undefined) {
        imageObject[0].src = this.task.imageData.src;
        if (imageObject[0].height > (self.markControl.container.height() * 0.8)) {
            self.container.content.height(self.markControl.container.height() * 0.8);
        } else {
            self.container.content.height(imageObject[0].height);
        }
        imageObject.show();
    } else {
        imageObject[0].src = '';
        imageObject.hide();
    }
}

Thumbnail.prototype.toggle = function (show) {
    if (show == true) {
        this.show = true;
        this.container.show();
    } else {
        this.show = false;
        this.container.hide();
    }
}

Thumbnail.prototype.updatePosition = function (e) {
    var position = this.imageObject.offset();
    this.mousePosition = e != undefined ? {
        x: e.pageX - position.left,
        y: e.pageY - position.top
    } : undefined;
}

Thumbnail.prototype.container_dom = '<div class="score-board score-board-popover" style="display:none"></div>';

Thumbnail.prototype.container_header_dom = '<div class="header">\
<p class="fl" id="header" data-i18n-text="mark.thumbnail">缩略图</p>\
<a class="header-close" id="close-button" href="#"><img src="{staticServer}/images/close.png"></a>\
</div>';

Thumbnail.prototype.container_content_dom = '<div class="content" style="padding:4px;overflow:scroll"><img src=""></div>';

Thumbnail.prototype.control_dom = '<h3 class="popover-title" data-i18n-text="mark.thumbnail">缩略图</h3>\
<div class="popover-content"><p id="problem-list" class="popover-list">\
<a href="#" id="show-thumbnail-button" data-i18n-text="mark.thumbnail.open">打开</a><a href="#" id="hide-thumbnail-button" data-i18n-text="mark.thumbnail.close">关闭</a>\
</p></div>';