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

//查看原始题卡模块
var sheet_view = function(option, success) {
    var object = new SheetView(option);
    success();
    return object;
}

function SheetView(option) {
    this.markControl = option.markControl;
    this.server = option.server;
    this.init();
    this.markControl.on('task.get.success', this, function(event, context, eventObject) {
        this.render(context.task.sheetUrls);
    });
    this.markControl.on('task.get.none', this, function(event, context, eventObject) {
        this.render();
    });
    this.markControl.on('task.get.before', this, function(event, context, eventObject) {
        this.render();
    });
}

SheetView.prototype.init = function() {
	var self = this;
    this.markControl.initMarkFunction();
    this.container = getDom(this.container_dom, this.markControl).appendTo(this.markControl.container);
    this.container.width(this.maxWidth);
    
    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.container.header.find('.image-close').click(function () {
        self.toggle(false);
    });
    
    this.control = getDom(this.control_dom, this.markControl).appendTo(this.markControl.container.assistant);
    this.control.find('#show-sheet-button').click(function () {
        self.markControl.container.assistant.hide();
        self.toggle(true);
    });
    this.control.find('#hide-sheet-button').click(function () {
        self.markControl.container.assistant.hide();
        self.toggle(false);
    });
    self.toggle(false);
}

SheetView.prototype.render = function(urls) {
	var self = this;
    if (urls != undefined && urls.length > 0) {
        for (var i = 0; i < urls.length; i++) {
        	var url = urls[i];
        	var sheetId = "sheet"+i;
        	var nav = $('<a href="#" data-url="'+url+'" id="'+sheetId+'"><span>'+(i+1)+'</span></a>').appendTo(this.container.header.find('.image-switch'));
        }
        this.container.header.find('.image-switch a').click(function(){
        	var url = this.getAttribute("data-url");
        	var sheetId = this.getAttribute("id");
        	self.renderContent(self.container.content, sheetId);
        });
        this.container.header.find('.image-switch a').first().click();
        
    } else {
        this.container.hide();
    }
}

SheetView.prototype.renderContent = function(content, sheetId) {
	content.width(this.markControl.container.centerContent.width());
	content.height(this.markControl.container.centerContent.height());
	content.empty();
	var url =  document.getElementById(sheetId).getAttribute("data-url");
	var show  = false;
	var i = sheetId.split("sheet")[1];
	if(i%2==0){
		show = true;
	}
	content.append($('<canvas id="sheet-canvas"></canvas>'));
	var image = new Image();
	image.crossOrigin = '';
	image.src = this.server + url ;
    image.canvas = document.getElementById('sheet-canvas');
    image.content = content;
    image.onload = function() {
    	var ctx = this.canvas.getContext("2d");
    	this.canvas.width = Math.min(this.width, this.content.width());
    	this.canvas.height = this.canvas.width * this.height / this.width;
    	ctx.drawImage(image, 0,0,this.width,this.height,0, 0, this.canvas.width, this.canvas.height);
    	if(show){
    		ctx.fillStyle = "#FFFFFF";
    		ctx.fillRect(0, 0, this.canvas.width/2, this.canvas.height*3.7/10);
    	}
    	this.canvas.toDataURL("image/jpeg");
    }
}

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

SheetView.prototype.control_dom = '<h3 class="popover-title">查看原卷</h3>\
<div class="popover-content"><p id="sheet-list" class="popover-list">\
<a href="#" id="show-sheet-button">打开</a><a href="#" id="hide-sheet-button">关闭</a>\
</p></div>';

SheetView.prototype.container_dom = '<div class="image-view-popover sheet" style=" width:100%; height:100vh;"></div>';

SheetView.prototype.container_header_dom = '<div class="popover-header">\
	<p class="title">原图切换</p>\
	<p class="image-switch"></p>\
	<p class="image-close"><img src="{staticServer}/mark-new/images/images-close-b.png" /></p></div>';

SheetView.prototype.container_content_dom = '<div class="popover-cont"></div>';