ImageViewer

图片浏览器。Update:2018-06-18

This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://greasyfork.org/scripts/369588-imageviewer/code/ImageViewer.js?version=606705

// ==UserScript==
// @name         ImageViewer
// @namespace    https://github.com/maijz128
// @version      0.1.0
// @description  图片浏览器。Update:2018-06-18
// @author       MaiJZ
// @homeURL      https://greasyfork.org/scripts/369588
// @grant        none
// ==/UserScript==

// #TODO 功能:浏览图片列表 


(function () {
    document.ImageViewer = ImageViewer;
    window.ImageViewer = ImageViewer;

    function ImageViewer(imgSrc) {
        this._imgSrc = imgSrc;
        this.isHideScrollbar = false;

        if (!ImageViewer._hasInit) {

            document._hideViewer = ImageViewer._hideViewer;

            // html
            {
                var elHtml = '<div class="image-viewer image-viewer_hide"  onclick="document._hideViewer()">' +
                    '   <div class="body-wrapper">' +
                    '       <div class="body-content Center-Container">' +
                    '           <img class="image Absolute-Center is-Fixed" src="nothing" >' +
                    '       </div>' +
                    '   </div>' +
                    '</div>';

                var div = document.createElement('div');
                div.innerHTML = elHtml;
                document.body.appendChild(div);
            }

            // style
            {
                var style = `.image-viewer  { background-color: rgba(0, 0, 0, .1);
                width: 100%;  height: 100%;  z-index: 1024; top: 0;  left: 0;  
                padding: 0;  margin: 0;  position: fixed;  overflow-y: auto;  }
                .image-viewer_hide {display: none;}
                .image-viewer_show {display: block;}
                .image-viewer .body-content {
                    height: 100%;  width: 100%;  text-align: center;  display: flex;  align-items: center;  }
                .image-viewer .body-content .image {  margin: auto;}

                .Center-Container {   position: relative;  }  
                .Absolute-Center {  
                 overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
                } 
                .Absolute-Center.is-Fixed {   position: fixed;   z-index: 999;  }  
                .overflow-hidden{overflow: hidden !important;}
                `;


                var elStyle = document.createElement("style");
                elStyle.setAttribute('id', 'ImageViewer_Style');
                elStyle.innerHTML = style;
                document.head.appendChild(elStyle);
            }

        }
    }
    ImageViewer.show = function (imgSrc) {
        if (ImageViewer._singleton == null) {
            ImageViewer._singleton = new ImageViewer();
        }
        ImageViewer._singleton.show(imgSrc);
    };
    ImageViewer.prototype.setImgSrc = function (imgSrc) {
        this._imgSrc = imgSrc;
    };
    ImageViewer.prototype.show = function (imgSrc) {
        imgSrc = imgSrc || this._imgSrc;

        if (imgSrc) {
            var elImg = ImageViewer._getElement_Img();

            if (imgSrc instanceof Array) {
                elImg.setAttribute('src', imgSrc[0]);
                ImageViewer._showViewer();
            } else if (typeof (imgSrc) === 'string') {
                elImg.setAttribute('src', imgSrc);
                ImageViewer._showViewer();
            } else if (typeof (imgSrc) === 'number') {
                if (this._imgSrc && this._imgSrc instanceof Array) {

                }
            }
        }

        this.setImgSrc(imgSrc);
    };

    ImageViewer._hasInit = false;
    ImageViewer._singleton = null;
    ImageViewer._getViewPortSize = function () {
        var pageWidth = window.innerWidth,
            pageHeight = window.innerHeight;

        if (typeof pageWidth !== "number") {
            if (document.compatMode === "CSS1Compat") {
                pageWidth = document.documentElement.clientWidth;
                pageHeight = document.documentElement.clientHeight;
            } else {
                pageWidth = document.body.clientWidth;
                pageHeight = document.body.clientHeight;
            }
        }

        return {
            width: pageWidth,
            height: pageHeight
        };
    };
    ImageViewer._getElement_Img = function () {
        return document.querySelector('.image-viewer img.image');
    };
    ImageViewer._showViewer = function () {
        var viewer = document.querySelector('.image-viewer');
        if (viewer) {
            // hide Body Scroll();
            if (this.isHideScrollbar) document.body.classList.add("overflow-hidden");

            // set image max size
            var viewSize = ImageViewer._getViewPortSize();
            var elImg = ImageViewer._getElement_Img();
            var style = 'max-height:' + (viewSize.height - 10) + 'px;';
            style += 'max-width:' + (viewSize.width - 10) + 'px;';
            elImg.setAttribute('style', style);

            viewer.classList.remove('image-viewer_hide');
            viewer.classList.add('image-viewer_show');
        }
    };
    ImageViewer._hideViewer = function () {
        var viewer = document.querySelector('.image-viewer');
        if (viewer) {
            // show Body Scroll
            if (this.isHideScrollbar) document.body.classList.remove("overflow-hidden");

            viewer.classList.remove('image-viewer_show');
            viewer.classList.add('image-viewer_hide');
        }
    };


})();