|
@@ -1,268 +0,0 @@
|
|
|
-//简单多张图片排列显示模块
|
|
|
-var multi_image_view = function(option, success) {
|
|
|
- var object = new MultiImageView(option);
|
|
|
- success();
|
|
|
- return object;
|
|
|
-}
|
|
|
-
|
|
|
-function MultiImageView(option) {
|
|
|
- this.markControl = option.markControl;
|
|
|
- this.defaultZoom = 'fit';
|
|
|
- this.init();
|
|
|
- this.markControl.on('task.get.before', this, function(event, context, eventObject) {
|
|
|
- this.task = undefined;
|
|
|
- this.imageCount = 0;
|
|
|
- this.render();
|
|
|
- });
|
|
|
- this.markControl.on('task.get.success', this, function(event, context, eventObject) {
|
|
|
- this.task = context.task;
|
|
|
- this.imageCount = this.task.pictureUrls.length;
|
|
|
- this.imageServer = context.imageServer;
|
|
|
- this.render();
|
|
|
- });
|
|
|
- this.markControl.on('step.board.show', this, function(event, context, eventObject) {
|
|
|
- this.container.removeClass('span12');
|
|
|
- this.container.addClass('span10');
|
|
|
-
|
|
|
- this.container.perfectScrollbar('update');
|
|
|
- if (this.iviewer != undefined) {
|
|
|
- this.iviewer.iviewer('update');
|
|
|
- }
|
|
|
- });
|
|
|
- this.markControl.on('step.board.hide', this, function(event, context, eventObject) {
|
|
|
- this.container.removeClass('span10');
|
|
|
- this.container.addClass('span12');
|
|
|
-
|
|
|
- this.container.perfectScrollbar('update');
|
|
|
- if (this.iviewer != undefined) {
|
|
|
- this.iviewer.iviewer('update');
|
|
|
- }
|
|
|
- });
|
|
|
- this.markControl.on('center.width.change', this, function(event, context, eventObject) {
|
|
|
- this.container.perfectScrollbar('update');
|
|
|
- if (this.iviewer != undefined) {
|
|
|
- this.iviewer.iviewer('update');
|
|
|
- }
|
|
|
- });
|
|
|
- this.markControl.on('key.press', this, function(e, context, event) {
|
|
|
- var code = event.keyCode;
|
|
|
- if (this.iviewer != undefined && this.currentConfig != undefined && this.imageCount > 0) {
|
|
|
- if (code == 91) {
|
|
|
- // [按键,切换上一张图片
|
|
|
- var number = this.currentConfig.number;
|
|
|
- if (number > 1) {
|
|
|
- this.change(number - 1);
|
|
|
- event.preventDefault();
|
|
|
- return false;
|
|
|
- }
|
|
|
- } else if (code == 93) {
|
|
|
- // ]按键,切换下一张图片
|
|
|
- var number = this.currentConfig.number;
|
|
|
- if (number < this.imageCount) {
|
|
|
- this.change(number + 1);
|
|
|
- event.preventDefault();
|
|
|
- return false;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- this.markControl.on('key.up', this, function(e, context, event) {
|
|
|
- var code = event.keyCode;
|
|
|
- if (this.iviewer != undefined && this.currentConfig != undefined && this.imageCount > 0) {
|
|
|
- if (code == 37) {
|
|
|
- // left按键,切换上一张图片
|
|
|
- var number = this.currentConfig.number;
|
|
|
- if (number > 1) {
|
|
|
- this.change(number - 1);
|
|
|
- event.preventDefault();
|
|
|
- return false;
|
|
|
- }
|
|
|
- } else if (code == 39) {
|
|
|
- // right按键,切换下一张图片
|
|
|
- var number = this.currentConfig.number;
|
|
|
- if (number < this.imageCount) {
|
|
|
- this.change(number + 1);
|
|
|
- event.preventDefault();
|
|
|
- return false;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-MultiImageView.prototype.init = function() {
|
|
|
- this.configCache = {};
|
|
|
- this.container = getDom(this.container_dom, this.markControl).appendTo(this.markControl.container.center);
|
|
|
- this.container.perfectScrollbar({
|
|
|
- wheelSpeed: 20
|
|
|
- });
|
|
|
- this.container.width('100%');
|
|
|
- this.container.height(this.markControl.container.height() - 41);
|
|
|
-
|
|
|
- this.imageHolder = getDom(this.imageHolder_dom, this.markControl).appendTo(this.container);
|
|
|
- this.imageHolder.width('100%');
|
|
|
-
|
|
|
- this.centerHeader = getDom(this.center_header_dom, this.markControl).appendTo(this.markControl.container.header.find('p.pictures')).parent();
|
|
|
- this.centerHeader.hide();
|
|
|
- this.imageControl = getDom(this.image_control_dom, this.markControl).appendTo(this.markControl.container);
|
|
|
- this.imageControl.css('position', 'absolute');
|
|
|
- this.imageSwitchList = this.imageControl.find('#image-switch-list');
|
|
|
-
|
|
|
- this.centerHeader.click(this, function(event) {
|
|
|
- var obj = event.data.centerHeader;
|
|
|
- var position = obj.offset();
|
|
|
- var left = position.left;
|
|
|
- var top = position.top + obj.height();
|
|
|
- event.data.imageControl.css('top', top);
|
|
|
- event.data.imageControl.css('left', left);
|
|
|
- event.data.imageControl.toggle();
|
|
|
- });
|
|
|
- this.imageControl.find('a.image-popover-close').click(this, function(event) {
|
|
|
- event.data.imageControl.hide();
|
|
|
- });
|
|
|
- this.imageControl.find('#zoom-out-button').click(this, function(event) {
|
|
|
- var iviewer = event.data.iviewer;
|
|
|
- if (iviewer != undefined) {
|
|
|
- iviewer.iviewer('zoom_by', 1);
|
|
|
- }
|
|
|
- });
|
|
|
- this.imageControl.find('#zoom-in-button').click(this, function(event) {
|
|
|
- var iviewer = event.data.iviewer;
|
|
|
- if (iviewer != undefined) {
|
|
|
- iviewer.iviewer('zoom_by', -1);
|
|
|
- }
|
|
|
- });
|
|
|
- this.imageControl.find('#zoom-fit-button').click(this, function(event) {
|
|
|
- var iviewer = event.data.iviewer;
|
|
|
- if (iviewer != undefined) {
|
|
|
- iviewer.iviewer('fit');
|
|
|
- }
|
|
|
- });
|
|
|
- this.imageControl.find('#zoom-origin-button').click(this, function(event) {
|
|
|
- var iviewer = event.data.iviewer;
|
|
|
- if (iviewer != undefined) {
|
|
|
- iviewer.iviewer('set_zoom', 100);
|
|
|
- }
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-MultiImageView.prototype.render = function() {
|
|
|
- if (this.task != undefined) {
|
|
|
- var config = this.configCache[this.task.blockId];
|
|
|
- if (config == undefined) {
|
|
|
- config = {
|
|
|
- number: 1,
|
|
|
- zoom: this.defaultZoom
|
|
|
- };
|
|
|
- this.configCache[this.task.blockId] = config;
|
|
|
- }
|
|
|
- if (config.number == undefined || config.number < 0 || config.number > this.imageCount) {
|
|
|
- config.number = 1;
|
|
|
- }
|
|
|
- this.currentConfig = config;
|
|
|
-
|
|
|
- for (var i = 1; i <= this.imageCount; i++) {
|
|
|
- var switchButton = getDom(this.image_switch_button_dom, this.markControl).appendTo(this.imageSwitchList);
|
|
|
- switchButton.html(i);
|
|
|
- switchButton.attr('data-number', i);
|
|
|
- if (i == config.number) {
|
|
|
- switchButton.addClass('curr');
|
|
|
- }
|
|
|
- }
|
|
|
- this.imageSwitchList.find('.image-switch-button').click(this, function(event) {
|
|
|
- var number = $(event.target).attr('data-number');
|
|
|
- event.data.change(number, config.zoom, config);
|
|
|
- event.data.imageControl.hide();
|
|
|
- });
|
|
|
-
|
|
|
- if (this.iviewer == undefined) {
|
|
|
- var MultiImageView = this;
|
|
|
- this.iviewer = this.imageHolder.iviewer({
|
|
|
- src: this.imageServer + this.task.pictureUrls[config.number - 1],
|
|
|
- zoom: config.zoom,
|
|
|
- ui_disabled: true,
|
|
|
- mousewheel: false,
|
|
|
- zoom_animation: false,
|
|
|
- onZoom: function(ev, new_zoom) {
|
|
|
- MultiImageView.onZoomSet(new_zoom);
|
|
|
- },
|
|
|
- onStopDrag: function(ev, point) {
|
|
|
- MultiImageView.onStopDrag(point);
|
|
|
- },
|
|
|
- onFinishLoad: function(ev, url) {
|
|
|
- MultiImageView.onImageLoad();
|
|
|
- }
|
|
|
- });
|
|
|
- this.centerHeader.find('#image-number').html(config.number);
|
|
|
- } else {
|
|
|
- this.change(config.number, config.zoom, config);
|
|
|
- }
|
|
|
- this.imageHolder.show();
|
|
|
- this.centerHeader.show();
|
|
|
-
|
|
|
- this.imageHolder.trigger('mouseenter');
|
|
|
- } else {
|
|
|
- this.centerHeader.hide();
|
|
|
- this.imageHolder.hide();
|
|
|
- this.currentConfig = undefined;
|
|
|
- this.imageSwitchList.empty();
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-MultiImageView.prototype.change = function(number) {
|
|
|
- if (this.task != undefined && number > 0 && number <= this.imageCount && this.currentConfig != undefined && this.currentConfig.loading == false) {
|
|
|
- this.currentConfig.loading = true;
|
|
|
- this.currentConfig.number = number;
|
|
|
-
|
|
|
- this.iviewer.iviewer('loadImage', this.imageServer + this.task.pictureUrls[number - 1]);
|
|
|
- this.centerHeader.find('#image-number').html(number);
|
|
|
- this.imageSwitchList.find('.image-switch-button').each(function(index, obj) {
|
|
|
- if ($(obj).attr('data-number') == number) {
|
|
|
- $(obj).addClass('curr');
|
|
|
- } else {
|
|
|
- $(obj).removeClass('curr');
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-MultiImageView.prototype.onImageLoad = function() {
|
|
|
- this.currentConfig.loading = false;
|
|
|
- this.imageHolder.find('img').css('top', '0');
|
|
|
- this.iviewer.iviewer('set_zoom', this.currentConfig.zoom);
|
|
|
- if (this.currentConfig.dx != undefined && this.currentConfig.dy != undefined) {
|
|
|
- this.iviewer.iviewer('moveTo', point.dx, point.dy);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-MultiImageView.prototype.onZoomSet = function(zoom) {
|
|
|
- if (this.currentConfig.loading == false) {
|
|
|
- this.currentConfig.zoom = zoom;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-MultiImageView.prototype.onStopDrag = function(point) {
|
|
|
- if (this.currentConfig.loading == false) {
|
|
|
- this.currentConfig.dx = point.x;
|
|
|
- this.currentConfig.dy = point.y;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-MultiImageView.prototype.container_dom = '<div class="content"></div>';
|
|
|
-
|
|
|
-MultiImageView.prototype.imageHolder_dom = '<div style="position:relative"></div>';
|
|
|
-
|
|
|
-MultiImageView.prototype.center_header_dom = '<i class="L-pic">当前图片</i><i id="image-number" class="R-pic"></i>';
|
|
|
-
|
|
|
-MultiImageView.prototype.image_control_dom = '<div class="image-popover hide">\
|
|
|
-<div class="image-control">\
|
|
|
-<span class="control-row"><p class="title">图片切换</p><p class="content" id="image-switch-list"></p></span>\
|
|
|
-<span class="control-row"><p class="title">图片控制</p>\
|
|
|
-<p class="content">\
|
|
|
-<a href="#" id="zoom-out-button">放大</a><a href="#" id="zoom-in-button">缩小</a>\
|
|
|
-<a href="#" id="zoom-fit-button">1:1</a><a href="#" id="zoom-origin-button">原始</a>\
|
|
|
-</p></span></div>\
|
|
|
-<a href="#" class="image-popover-close"><p>关</p><p>闭</p></a></div>';
|
|
|
-
|
|
|
-MultiImageView.prototype.image_switch_button_dom = '<a href="#" class="image-switch-button"></a>';
|