javascript [lightbox- Javascript] #js #lightbox #ui

Posted 2021-05-03

hff.constr.Lightbox = function (_d) {
    if (typeof Object.assign !== 'function') {
        // Must be writable: true, enumerable: false, configurable: true
        Object.defineProperty(Object, "assign", {
            value: function assign(target, varArgs) { // .length of function is 2
                if (target == null) throw new TypeError('Cannot convert undefined or null to object');
                var to = Object(target);
                for (var index = 1; index < arguments.length; index++) {
                    var nextSource = arguments[index];
                    if (nextSource != null) {
                        for (var nextKey in nextSource) {
                            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) to[nextKey] = nextSource[nextKey];
                        }
                    }
                }
                return to;
            },
            writable: true,
            configurable: true
        });
    }
    (function (arr) {
        arr.forEach(function (item) {
            if (item.hasOwnProperty('remove')) return;
            Object.defineProperty(item, 'remove', {
                configurable: true,
                enumerable: true,
                writable: true,
                value: function remove() {
                    if (this.parentNode !== null) this.parentNode.removeChild(this);
                }
            });
        });
    })([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
    
    _d = Object.assign({
        headline: "",
        content: "",
        href : null,
        hrefTargetSizzle : null,
        hrefHeadlineSizzle : null,
        clone: "",
        close: "",
        minWidth: null,
        maxWidth : null,
        noScrolling: true,
        closeOnClickOut: true,
        closeButton : true,
        lbClassPrefix: "hffLightbox",
        html: '<div class="$lbClass"><div class="$lbClass-wrapper js-$lbClass-wrapper"><div class="$lbClass-header"><div class="$lbClass-header-headline js-$lbClass-headline">$headline</div><div class="$lbClass-close">$close</div></div><div class="$lbClass-content"><div class="$lbClass-content-scroller js-$lbClass-content"></div></div></div></div>',
        fnOnInit: function () {
        },
        fnOnClose: function () {
        }
    }, _d);
    
    var _c = {
        $lb: null,
        $lbClone: null,
        $close: null,
        $wrapper: null,
        $content: null,
        $headline: null,
        fnOnInit : function () {
        },
        fnOnClose: function () {
        }
    };
    
    function close() {
        var $lb = document.getElementById("cssLightbox");
        if($lb) {
            if($lb) $lb.remove();
            if (_d.noScrolling) document.body.style.overflow = "auto";
            _c.fnOnClose();
        }
    }
    
    function createElementFromHTML(htmlString) {
        var div = document.createElement('div');
        div.innerHTML = htmlString.trim();
        return div.firstChild;
    }
    
    function setContent(fn) {
        fn = fn || function () {};
        var jsClassPrefix = ".js-" + _d.lbClassPrefix,
            jsWrapperClass = jsClassPrefix + "-wrapper",
            $jsWrapper = document.querySelector(jsWrapperClass);
        _c.$content.innerHTML = "";
        if (typeof _d.content === "function") _d.content(_c.$content);
        else if (typeof _d.content === "string") _c.$content.innerHTML = _d.content;
        else if ('nodeType' in _d.content) _c.$content.appendChild(_d.content);
        else if (typeof jQuery !== "undefined" && _d.content instanceof jQuery) $(_c.$content).append(_d.content);
        if (_d.minWidth) $jsWrapper.style.minWidth = _d.minWidth;
        if (_d.maxWidth) $jsWrapper.style.maxWidth = _d.maxWidth;
        if (_d.noScrolling) document.body.style.overflow = "hidden";
        _c.fnOnInit(_c.$lb);
        fn();
    }
    
    function setHeadline(fn) {
        fn = fn || function () {};
        var jsClassPrefix = ".js-" + _d.lbClassPrefix,
            jsHeadlineClass = jsClassPrefix + "-headline",
            $jsHeadline = document.querySelector(jsHeadlineClass);
        if(_d.headline.length) $jsHeadline.innerHTML = _d.headline;
        fn();
    }
    
    
    function createLightbox(fn) {
        close();
        if (_d.clone.length) _d.content = "";
        if (!_c.$lb) {
            var html = _d.html;
            var replaceMap = {
                    "$lbClass": _d.lbClassPrefix,
                    "$headline": _d.headline && _d.headline.length ? _d.headline : "&nbsp;",
                    "$close": _d.close
                },
                re = new RegExp("\\" + Object.keys(replaceMap).join("|\\"), "gi");
            html = html.replace(re, function (matched) {
                return replaceMap[matched];
            });
            _c.$lb = createElementFromHTML(html);
            _c.$lb.id = "cssLightbox";
        }
        
        _c.$lbClone = _c.$lb.cloneNode(true);
        _c.$close = _c.$lbClone.querySelector("." + _d.lbClassPrefix + "-close");
        _c.$close.addEventListener("click", close);
        
        if (_d.closeOnClickOut) {
            _c.$lbClone.addEventListener("click", function (e) {
                if (e.target.isEqualNode(_c.$lbClone)) close();
            });
        }
        document.body.appendChild(_c.$lbClone);
        
        var jsClassPrefix = ".js-" + _d.lbClassPrefix,
            jsWrapperClass = jsClassPrefix + "-wrapper",
            jsContentClass = jsClassPrefix + "-content",
            jsHeadlineClass = jsClassPrefix + "-headline";
            
        
        _c.$wrapper = document.querySelector(jsWrapperClass);
        _c.$content = document.querySelector(jsContentClass);
        _c.$headline = document.querySelector(jsHeadlineClass);
        
        if(!_d.closeButton) _c.$close.style.display = "none";
        
        _c.fnOnInit = _d.fnOnInit;
        _c.fnOnClose = _d.fnOnClose;
        
        if(_d.href){
            $.ajax({url: _d.href, cache: true, crossDomain: true}).done(function (html) {
                var $mock = document.createElement("div");
                $mock.innerHTML = html.replace(/^[\s\S]*<body.*?>|<\/body>[\s\S]*$/ig, '');
                _d.content = _d.hrefTargetSizzle ?  $mock.querySelector(_d.hrefTargetSizzle) : $mock;
                if(!_d.headline.length){
                    var $headline = $mock.querySelector(_d.hrefHeadlineSizzle);
                    if($headline) {
                        _c.$headline.innerHTML = $headline.innerHTML;
                    }else{
                        _c.$headline.innerHTML = "&nbsp;";
                    }
                }
                setContent(fn);
            });
        }else{
            setContent(fn);
        }
    }
    
    this.close = function () {
        close();
    };
    
    this.open = function (o, fn) {
        if (o || null) {
            _d = Object.assign(_d, o);
            _c.$lb = null;
        }
        createLightbox(fn);
    };
    
    this.content = function (content, fn) {
        _d.content = content;
        setContent(fn);
    };
    
    this.headline = function (headline, fn) {
        _d.headline = headline;
        setHeadline(fn);
    };
};