初始化提交

common/wiki/amWiki/js/amWiki.imgsView.js

@@ -0,0 +1,155 @@
+/**
+ * amWiki Web端 - 图片查看模块
+ * @author Tevin
+ */
+
+;(function (win, $) {
+
+    'use strict';
+
+    /**
+     * 图片查看器
+     * @param {Element} _this
+     * @constructor
+     */
+    var ImgsView = function (_this) {
+        this.$e = {
+            container: $(_this),       //文档主容器
+            imgList: null,             //页面图片列表
+            imgsView: $('#imgsView'),  //图片弹窗层
+            imgsViewInner: null,       //图片容器
+            btnPrev: null,
+            btnNext: null
+        };
+        this._data = {
+            winW: 0,
+            winH: 0,
+            curIndex: -1
+        };
+        this._init();
+    };
+
+    /**
+     * 初始化
+     * @private
+     */
+    ImgsView.prototype._init = function () {
+        var that = this;
+        this.$e.imgsViewInner = this.$e.imgsView.find('#imgsViewInner');
+        this.$e.btnPrev = this.$e.imgsView.find('.prev');
+        this.$e.btnNext = this.$e.imgsView.find('.next');
+        this._data.winW = $(win).width();
+        this._data.winH = $(win).height();
+        this.$e.container.on('click', function (e) {
+            if (e.target.tagName.toLowerCase() == 'img') {
+                //抓取图片列表
+                that.$e.imgList = that.$e.container.find('img');
+                that._data.curIndex = that.$e.imgList.index(e.target);
+                that.open();
+            }
+        });
+        this.$e.imgsView.children('.imgsv-background').on('click', function () {
+            that.close();
+        });
+        this.$e.imgsView.find('.original').on('click', function () {
+            that.resizeAs('org');
+        });
+        this.$e.imgsView.find('.suit').on('click', function () {
+            that.resizeAs('suit');
+        });
+        this.$e.imgsView.find('.prev').on('click', function () {
+            var $this = $(this);
+            if (!$this.hasClass('off')) {
+                that.playTo(that._data.curIndex - 1);
+            }
+        });
+        this.$e.imgsView.find('.next').on('click', function () {
+            var $this = $(this);
+            if (!$this.hasClass('off')) {
+                that.playTo(that._data.curIndex + 1);
+            }
+        });
+    };
+
+    /**
+     * 显示图片浏览弹层
+     * @public
+     */
+    ImgsView.prototype.open = function () {
+        var that = this;
+        this.playTo(this._data.curIndex);
+        this.$e.imgsView.fadeIn(80);
+        setTimeout(function () {
+            that.$e.imgsView.addClass('on');
+        }, 50);
+    };
+
+    /**
+     * 关闭图片浏览弹层
+     * @public
+     */
+    ImgsView.prototype.close = function () {
+        var that = this;
+        this.$e.imgsView.removeClass('on');
+        setTimeout(function () {
+            that.$e.imgsView.fadeOut(50);
+        }, 200);
+        that.$e.imgList = null;
+        that._data.curIndex = -1;
+    };
+
+    /**
+     * 切换图片
+     * @param {Number} index
+     * @public
+     */
+    ImgsView.prototype.playTo = function (index) {
+        if (index == 0) {
+            this.$e.btnPrev.addClass('off');
+        } else {
+            this.$e.btnPrev.removeClass('off');
+        }
+        if (index == this.$e.imgList.length - 1) {
+            this.$e.btnNext.addClass('off');
+        } else {
+            this.$e.btnNext.removeClass('off');
+        }
+        this.$e.imgCur = this.$e.imgList.eq(index).clone().removeAttr('align');
+        this.resizeAs('suit');
+        this.$e.imgsViewInner.html(this.$e.imgCur);
+        this._data.curIndex = index;
+    };
+
+    /**
+     * 设置图片尺寸
+     * @param {String} type - 尺寸模式：suit 适合 ／ org 原大小
+     * @public
+     */
+    ImgsView.prototype.resizeAs = function (type) {
+        if (type == 'suit') {
+            this.$e.imgCur.removeAttr('width').removeAttr('height');
+            if (this.$e.imgCur[0].naturalWidth > this._data.winW - 60) {
+                this.$e.imgCur.css('max-width', this._data.winW - 60);
+            }
+            if (this.$e.imgCur[0].naturalHeight > this._data.winH - 60) {
+                this.$e.imgCur.css('max-height', this._data.winH - 60);
+            }
+        } else if (type == 'org') {
+            this.$e.imgCur.removeAttr('style');
+            this.$e.imgCur.attr({
+                'width': this.$e.imgCur[0].naturalWidth,
+                'height': this.$e.imgCur[0].naturalHeight
+            });
+        }
+    };
+
+    //注册到 jQuery
+    $.extend($.fn, {
+        imgsView: function () {
+            return this.each(function () {
+                return new ImgsView(this);
+            });
+        }
+    });
+
+})(window, jQuery);