|
@@ -10,7 +10,7 @@ function SheetView(option) {
|
|
|
this.server = option.server;
|
|
|
this.init();
|
|
|
this.markControl.on('task.get.success', this, function(event, context, eventObject) {
|
|
|
- this.render(context.task.sheetUrls);
|
|
|
+ this.render(context.task.sheetUrls);
|
|
|
});
|
|
|
this.markControl.on('task.get.none', this, function(event, context, eventObject) {
|
|
|
this.render();
|
|
@@ -21,22 +21,102 @@ function SheetView(option) {
|
|
|
}
|
|
|
|
|
|
SheetView.prototype.init = function() {
|
|
|
+ var self = this;
|
|
|
this.markControl.initMarkFunction();
|
|
|
- this.container = getDom(this.container_dom, this.markControl).appendTo(this.markControl.container.assistant).find('#sheet-list');
|
|
|
+ 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) {
|
|
|
- this.container.empty();
|
|
|
for (var i = 0; i < urls.length; i++) {
|
|
|
- this.container.append('<a href="' + (this.server + urls[i]) + '" target="_blank">' + (i + 1) + '</a>');
|
|
|
+ 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.container_dom = '<h3 class="popover-title">查看原卷</h3>\
|
|
|
+SheetView.prototype.control_dom = '<h3 class="popover-title">查看原卷</h3>\
|
|
|
<div class="popover-content"><p id="sheet-list" class="popover-list">\
|
|
|
-</p></div>';
|
|
|
+<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>';
|