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

//简单多张图片排列显示模块
var single_image_view = function(option, success) {
    var object = new SingleImageView(option);
    success();
    return object;
}

function SingleImageView(option) {
    this.markControl = option.markControl;
    this.defaultZoom = 100;
    this.loading = false;
    this.init();
    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.iviewer.iviewer('fit');
        }
    });
    this.markControl.on('view.sidebar.open', this, function(event, context, eventObject) {
        this.imageControl.hide();
    });
    this.markControl.on('view.sidebar.close', this, function(event, context, eventObject) {
        this.imageControl.show();
    });
    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('task.get.none', this, function(event, context, eventObject) {
        this.task = undefined;
        this.render();
    });
    this.markControl.on('image.position.change', this, function(event, context, topPercent) {
        if (this.task != undefined && this.loading == false) {
            this.updateScrollTop(topPercent);
        }
    });
}

SingleImageView.prototype.init = function() {
    this.configCache = {};

    //this.container = getDom(this.container_dom).appendTo(this.markControl.container.imageContent);
    this.container = this.markControl.container.imageContent;
    this.container.height(this.markControl.container.centerContent.height());
    this.container.perfectScrollbar({
        wheelSpeed: 20
    });

    this.imageHolder = getDom(this.image_holder_dom, this.markControl).appendTo(this.container);
    this.imageHolder.width('100%');

    this.imageControl = getDom(this.image_control_dom, this.markControl).insertBefore(this.markControl.container.assistantButton.parent());
    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);
        }
    });
    this.imageControl.find('.rotate-button').click(this, function(event) {
        var iviewer = event.data.iviewer;
        if (iviewer != undefined) {
            iviewer.iviewer('angle', 90);
        }
    });
    var self = this;
    this.container.scroll(function() {
        if (self.currentConfig != undefined) {
            self.currentConfig.scrollTop = self.container.scrollTop() / self.imageHolder.height();
            self.currentConfig.scrollLeft = self.container.scrollLeft() / self.imageHolder.width();
        }
    });
}

SingleImageView.prototype.render = function() {
    if (this.task != undefined) {
        var config = this.configCache[this.task.blockId];
        if (config == undefined) {
            config = {
                zoom: this.defaultZoom
            };
            this.configCache[this.task.blockId] = config;
        }
        this.currentConfig = config;

        this.loadImage();
        // this.imageControl.show();
        // this.imageHolder.show();
        // this.imageHolder.trigger('mouseenter');
    } else {
        this.imageControl.hide();
        this.imageHolder.hide();
        this.currentConfig = undefined;
    }
}

SingleImageView.prototype.loadImage = function() {
    if (this.task.imageData != undefined && this.loading == false) {
        this.loading = true;
        if (this.iviewer == undefined) {
            var self = this;
            this.iviewer = this.imageHolder.iviewer({
                src: self.task.imageData,
                zoom_delta: 1.2,
                zoom: 100,
                zoom_min: 10,
                ui_disabled: true,
                mousewheel: false,
                zoom_animation: false,
                onAfterZoom: function(ev, new_zoom) {
                    self.onZoomSet(new_zoom);
                },
                onStopDrag: function(ev, point) {
                    self.onStopDrag(point);
                },
                onFinishLoad: function(ev, url) {
                    self.onImageLoad();
                },
                angle: function(ev, info) {
                    self.onRotate(info.angle);
                }
            });
            this.imageHolder.css('overflow', '');
        } else {
            this.iviewer.iviewer('loadImage', this.task.imageData);
        }
    }
}

SingleImageView.prototype.onImageLoad = function() {
    this.loading = false;
    this.container.scrollTop(0);
    if (this.currentConfig != undefined && this.currentConfig.zoom != undefined && this.currentConfig.zoom != this.defaultZoom) {
        if (this.currentConfig.rotate != undefined && this.currentConfig.rotate > 0) {
            this.iviewer.iviewer('angle', this.currentConfig.rotate);
        }
        if (this.currentConfig.zoom != undefined && this.currentConfig.zoom != this.defaultZoom) {
            this.iviewer.iviewer('set_zoom', this.currentConfig.zoom);
        }

    }
    //this.imageHolder.find('img').css('border', '2px solid');

    // if (this.currentConfig.dx != undefined && this.currentConfig.dy != undefined) {
    //     this.iviewer.iviewer('moveTo', this.currentConfig.dx, this.currentConfig.dy);
    // }
    this.imageControl.show();
    this.imageHolder.show();
    this.imageHolder.trigger('mouseenter');

    this.markControl.trigger('task.load.finish');
}

SingleImageView.prototype.onZoomSet = function(zoom) {
    if (this.loading == false && this.currentConfig != undefined) {
        this.currentConfig.zoom = zoom;
        this.updateScrollTop(this.currentConfig.scrollTop);
        this.updateScrollLeft(this.currentConfig.scrollLeft);
    }
}

SingleImageView.prototype.onStopDrag = function(point) {
    if (this.loading == false) {
        this.currentConfig.dx = point.x;
        this.currentConfig.dy = point.y;
    }
}

SingleImageView.prototype.onRotate = function(angle) {
    if (this.loading == false) {
        this.currentConfig.rotate = angle;
    }
}

SingleImageView.prototype.updateScrollTop = function(scrollTopPercent) {
    var height = this.imageHolder.height();
    var minHeight = this.container.height();
    if (scrollTopPercent != undefined && scrollTopPercent >= 0 && scrollTopPercent <= 1 && height > minHeight) {
        var left = height * (1 - scrollTopPercent);
        var scrollTop = left > minHeight ? (height - left) : (height - minHeight);
        this.container.scrollTop(scrollTop);
    } else {
        this.container.scrollTop(0);
    }
}

SingleImageView.prototype.updateScrollLeft = function(scrollLeftPercent) {
    var width = this.imageHolder.width();
    var minWidth = this.container.width();
    if (scrollLeftPercent != undefined && scrollLeftPercent >= 0 && scrollLeftPercent <= 1 && width > minWidth) {
        var left = width * (1 - scrollLeftPercent);
        var scrollLeft = left > minWidth ? (width - left) : (width - minWidth);
        this.container.scrollLeft(scrollLeft);
    } else {
        this.container.scrollLeft(0);
    }
}

SingleImageView.prototype.container_dom = '<div class="image-content"></div>';

SingleImageView.prototype.image_control_dom = '<em>\
<a href="#" class="btn zoom-out-button">放大</a>\
<a href="#" class="btn zoom-in-button">缩小</a>\
<a href="#" class="btn zoom-fit-button">适应</a>\
<a href="#" class="btn zoom-origin-button">原始</a>\
<a href="#" class="btn rotate-button">旋转</a>\
</em>';

SingleImageView.prototype.image_holder_dom = '<div style="position: relative;"></div>';