From 9f37ee2b7390abe6ce99053f6d6f5b79bd8a5dc8 Mon Sep 17 00:00:00 2001 From: Tony Air Date: Mon, 25 Jan 2021 18:15:33 +0700 Subject: [PATCH 01/12] Minor improvements --- dist/css/app.css | 245 ++++++++++++++++++++++++++++++++++++- dist/index.html | 65 +++++++++- dist/js/app.js | 97 ++++++++++++++- dist/js/app.js.LICENSE.txt | 1 - dist/records.json | 64 +++------- dist/report.html | 4 +- package.json | 20 ++- src/index.html | 40 ++++-- src/js/_window.jsx | 60 +++++++++ src/js/app.js | 11 ++ webpack.config.common.js | 6 +- webpack.config.js | 156 +++++++++++++---------- webpack.config.serve.js | 17 +-- webpack.yml | 3 +- 14 files changed, 646 insertions(+), 143 deletions(-) delete mode 100644 dist/js/app.js.LICENSE.txt create mode 100755 src/js/_window.jsx diff --git a/dist/css/app.css b/dist/css/app.css index d0c9691..0c0b49d 100644 --- a/dist/css/app.css +++ b/dist/css/app.css @@ -1 +1,244 @@ -.meta-lightbox-overlay{position:fixed;top:0;left:0;z-index:99998;width:100%;height:100%;overflow:hidden;visibility:hidden;opacity:0;box-sizing:border-box}.meta-lightbox-overlay.meta-lightbox-open{visibility:visible;opacity:1}.meta-lightbox-wrap{position:absolute;top:10%;bottom:10%;left:10%;right:10%}.meta-lightbox-content,.meta-lightbox-wrap{display:flex;align-items:center;text-align:center;justify-content:center}.meta-lightbox-content{flex-direction:row;color:#fff;width:100%;height:100%}.meta-lightbox-content .meta-lightbox-ajax{color:#212529}.meta-lightbox-content .meta-lightbox-zoom-wrapper{display:block;height:100%;width:100%}.meta-lightbox-content .meta-lightbox-zoom-wrapper:after{color:#fff;font:normal normal normal 14px/1 FontAwesome;content:"\f00e";position:absolute;bottom:1em;right:1em;text-shadow:1px 1px 1px #000}.meta-lightbox-content .meta-lightbox-zoom-wrapper.no-zoom:after{display:none}.meta-lightbox-title-wrap{position:absolute;bottom:0;left:0;width:100%;z-index:99999;text-align:center}.meta-lightbox-nav{display:none}.meta-lightbox-prev{position:absolute;top:50%;left:0}.meta-lightbox-next{position:absolute;top:50%;right:0}.meta-lightbox-close{position:absolute;top:2%;right:2%;line-height:1em}.meta-lightbox-image{text-align:center}.meta-lightbox-image img{max-width:100%;max-height:100%;width:auto;height:auto;vertical-align:middle}.meta-lightbox-content iframe{width:100%;height:100%}.meta-lightbox-ajax,.meta-lightbox-inline{max-height:100%;overflow:auto}.meta-lightbox-error{display:flex;flex-direction:column;justify-content:center;text-align:center;width:100%;height:100%;color:#fff;text-shadow:0 1px 1px #000}.meta-lightbox-error .alert{margin:0;text-shadow:none}.meta-lightbox-error p{display:table-cell;vertical-align:middle}.meta-lightbox-notouch .meta-lightbox-effect-fade,.meta-lightbox-notouch .meta-lightbox-effect-fadeScale,.meta-lightbox-notouch .meta-lightbox-effect-fall,.meta-lightbox-notouch .meta-lightbox-effect-slideDown,.meta-lightbox-notouch .meta-lightbox-effect-slideLeft,.meta-lightbox-notouch .meta-lightbox-effect-slideRight,.meta-lightbox-notouch .meta-lightbox-effect-slideUp{transition:all .2s ease-in-out}.meta-lightbox-effect-fadeScale .meta-lightbox-wrap{transition:all .3s;transform:scale(.7)}.meta-lightbox-effect-fadeScale.meta-lightbox-open .meta-lightbox-wrap{transform:scale(1)}.meta-lightbox-effect-slideDown .meta-lightbox-wrap,.meta-lightbox-effect-slideLeft .meta-lightbox-wrap,.meta-lightbox-effect-slideRight .meta-lightbox-wrap,.meta-lightbox-effect-slideUp .meta-lightbox-wrap{transition:all .3s cubic-bezier(.25,.5,.5,.9)}.meta-lightbox-effect-slideLeft .meta-lightbox-wrap{transform:translateX(-10%)}.meta-lightbox-effect-slideRight .meta-lightbox-wrap{transform:translateX(10%)}.meta-lightbox-effect-slideLeft.meta-lightbox-open .meta-lightbox-wrap,.meta-lightbox-effect-slideRight.meta-lightbox-open .meta-lightbox-wrap{transform:translateX(0)}.meta-lightbox-effect-slideDown .meta-lightbox-wrap{transform:translateY(-10%)}.meta-lightbox-effect-slideUp .meta-lightbox-wrap{transform:translateY(10%)}.meta-lightbox-effect-slideDown.meta-lightbox-open .meta-lightbox-wrap,.meta-lightbox-effect-slideUp.meta-lightbox-open .meta-lightbox-wrap{transform:translateY(0)}.meta-lightbox-body-effect-fall .meta-lightbox-effect-fall{perspective:1000px}.meta-lightbox-effect-fall .meta-lightbox-wrap{transition:all .3s ease-out;transform:translateZ(300px)}.meta-lightbox-effect-fall.meta-lightbox-open .meta-lightbox-wrap{transform:translateZ(0)}.meta-lightbox-theme-default.meta-lightbox-overlay{background:#666;background:rgba(0,0,0,.6)}.meta-lightbox-theme-default .meta-lightbox-nav{top:10%;width:20%;height:80%;background-repeat:no-repeat;background-position:50% 50%;opacity:.5;color:#fff;font-size:3em;text-decoration:none;text-shadow:1px 1px 0 #000}@media (min-width:576px){.meta-lightbox-theme-default .meta-lightbox-nav{width:8%}}.meta-lightbox-theme-default .meta-lightbox-nav .fa{position:absolute;top:50%;left:50%;margin-top:-1em;margin-left:-.2em}.meta-lightbox-theme-default .meta-lightbox-nav:hover{color:#007bff;opacity:1;background-color:rgba(0,0,0,.5)}.meta-lightbox-theme-default .meta-lightbox-close{display:block;opacity:.5;color:#fff;text-decoration:none;font-size:2em;text-shadow:1px 1px 0 #000;text-align:center;width:1.2em;height:1.2em;line-height:1.2em}.meta-lightbox-theme-default .meta-lightbox-close:focus{color:#007bff;opacity:1;background-color:rgba(0,0,0,.5)}.meta-lightbox-theme-default .meta-lightbox-title{background:#000;color:#fff;padding:7px 15px}.meta-lightbox-theme-default .meta-lightbox-ajax,.meta-lightbox-theme-default .meta-lightbox-inline{color:#000;background:#fff;padding:2em;box-shadow:0 1px 1px rgba(0,0,0,.6)}@media (max-width:576px){.meta-lightbox-wrap{top:5px!important;bottom:5px;left:5px;right:5px}.meta-lightbox-theme-default .meta-lightbox-nav{height:100%;opacity:1;font-size:2em}.meta-lightbox-theme-default .meta-lightbox-nav .fa{margin-left:-.4em}.meta-lightbox-theme-default .meta-lightbox-close{opacity:1}} \ No newline at end of file +.meta-lightbox-overlay { + position: fixed; + top: 0; + left: 0; + z-index: 99998; + width: 100%; + height: 100%; + overflow: hidden; + visibility: hidden; + opacity: 0; + box-sizing: border-box; } + .meta-lightbox-overlay.meta-lightbox-open { + visibility: visible; + opacity: 1; } + +.meta-lightbox-wrap { + position: absolute; + top: 10%; + bottom: 10%; + left: 10%; + right: 10%; + display: flex; + align-items: center; + text-align: center; + justify-content: center; } + +.meta-lightbox-content { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + flex-direction: row; + color: #fff; + width: 100%; + height: 100%; } + .meta-lightbox-content .meta-lightbox-ajax { + color: #212529; } + .meta-lightbox-content .meta-lightbox-zoom-wrapper { + display: block; + height: 100%; + width: 100%; } + .meta-lightbox-content .meta-lightbox-zoom-wrapper:after { + color: #fff; + font: normal normal normal 14px/1 FontAwesome; + content: '\f00e'; + position: absolute; + right: 1em; + bottom: 1em; + right: 1em; + text-shadow: 1px 1px 1px #000; } + .meta-lightbox-content .meta-lightbox-zoom-wrapper.no-zoom:after { + display: none; } + +.meta-lightbox-title-wrap { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + z-index: 99999; + text-align: center; } + +.meta-lightbox-nav { + display: none; } + +.meta-lightbox-prev { + position: absolute; + top: 50%; + left: 0; } + +.meta-lightbox-next { + position: absolute; + top: 50%; + right: 0; } + +.meta-lightbox-close { + position: absolute; + top: 2%; + right: 2%; + line-height: 1em; } + +.meta-lightbox-image { + text-align: center; } + .meta-lightbox-image img { + max-width: 100%; + max-height: 100%; + width: auto; + height: auto; + vertical-align: middle; } + +.meta-lightbox-content iframe { + width: 100%; + height: 100%; } + +.meta-lightbox-inline, +.meta-lightbox-ajax { + max-height: 100%; + overflow: auto; } + +.meta-lightbox-error { + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + width: 100%; + height: 100%; + color: #fff; + text-shadow: 0 1px 1px #000; } + .meta-lightbox-error .alert { + margin: 0; + text-shadow: none; } + +.meta-lightbox-error p { + display: table-cell; + vertical-align: middle; } + +/* Effects + **********************************************/ +.meta-lightbox-notouch .meta-lightbox-effect-fade, +.meta-lightbox-notouch .meta-lightbox-effect-fadeScale, +.meta-lightbox-notouch .meta-lightbox-effect-slideLeft, +.meta-lightbox-notouch .meta-lightbox-effect-slideRight, +.meta-lightbox-notouch .meta-lightbox-effect-slideUp, +.meta-lightbox-notouch .meta-lightbox-effect-slideDown, +.meta-lightbox-notouch .meta-lightbox-effect-fall { + transition: all 0.2s ease-in-out; } + +/* fadeScale */ +.meta-lightbox-effect-fadeScale .meta-lightbox-wrap { + transition: all 0.3s; + transform: scale(0.7); } + +.meta-lightbox-effect-fadeScale.meta-lightbox-open .meta-lightbox-wrap { + transform: scale(1); } + +/* slideLeft / slideRight / slideUp / slideDown */ +.meta-lightbox-effect-slideLeft .meta-lightbox-wrap, +.meta-lightbox-effect-slideRight .meta-lightbox-wrap, +.meta-lightbox-effect-slideUp .meta-lightbox-wrap, +.meta-lightbox-effect-slideDown .meta-lightbox-wrap { + transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9); } + +.meta-lightbox-effect-slideLeft .meta-lightbox-wrap { + transform: translateX(-10%); } + +.meta-lightbox-effect-slideRight .meta-lightbox-wrap { + transform: translateX(10%); } + +.meta-lightbox-effect-slideLeft.meta-lightbox-open .meta-lightbox-wrap, +.meta-lightbox-effect-slideRight.meta-lightbox-open .meta-lightbox-wrap { + transform: translateX(0); } + +.meta-lightbox-effect-slideDown .meta-lightbox-wrap { + transform: translateY(-10%); } + +.meta-lightbox-effect-slideUp .meta-lightbox-wrap { + transform: translateY(10%); } + +.meta-lightbox-effect-slideUp.meta-lightbox-open .meta-lightbox-wrap, +.meta-lightbox-effect-slideDown.meta-lightbox-open .meta-lightbox-wrap { + transform: translateY(0); } + +/* fall */ +.meta-lightbox-body-effect-fall .meta-lightbox-effect-fall { + perspective: 1000px; } + +.meta-lightbox-effect-fall .meta-lightbox-wrap { + transition: all 0.3s ease-out; + transform: translateZ(300px); } + +.meta-lightbox-effect-fall.meta-lightbox-open .meta-lightbox-wrap { + transform: translateZ(0); } + +.meta-lightbox-theme-default.meta-lightbox-overlay { + background: #666; + background: rgba(0, 0, 0, 0.6); } + +.meta-lightbox-theme-default .meta-lightbox-nav { + top: 10%; + width: 20%; + height: 80%; + background-repeat: no-repeat; + background-position: 50% 50%; + opacity: 0.5; + color: #fff; + font-size: 3em; + text-decoration: none; + text-shadow: 1px 1px 0 #000; } + @media (min-width: 576px) { + .meta-lightbox-theme-default .meta-lightbox-nav { + width: 8%; } } + .meta-lightbox-theme-default .meta-lightbox-nav .fa { + position: absolute; + top: 50%; + left: 50%; + margin-top: -1em; + margin-left: -0.2em; } + .meta-lightbox-theme-default .meta-lightbox-nav:hover { + color: #007bff; + opacity: 1; + background-color: rgba(0, 0, 0, 0.5); } + +.meta-lightbox-theme-default .meta-lightbox-close { + display: block; + opacity: 0.5; + color: #fff; + text-decoration: none; + font-size: 2em; + text-shadow: 1px 1px 0 #000; + text-align: center; + width: 1.2em; + height: 1.2em; + line-height: 1.2em; } + .meta-lightbox-theme-default .meta-lightbox-close:focus { + color: #007bff; + opacity: 1; + background-color: rgba(0, 0, 0, 0.5); } + +.meta-lightbox-theme-default .meta-lightbox-title { + background: #000; + color: #fff; + padding: 7px 15px; } + +.meta-lightbox-theme-default .meta-lightbox-ajax, +.meta-lightbox-theme-default .meta-lightbox-inline { + color: #000; + background: #fff; + padding: 2em; + box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.6); } + +@media (max-width: 576px) { + .meta-lightbox-wrap { + top: 5px !important; + bottom: 5px; + left: 5px; + right: 5px; } + .meta-lightbox-theme-default .meta-lightbox-nav { + height: 100%; + opacity: 1; + font-size: 2em; } + .meta-lightbox-theme-default .meta-lightbox-nav .fa { + margin-left: -0.4em; } + .meta-lightbox-theme-default .meta-lightbox-close { + opacity: 1; } } + diff --git a/dist/index.html b/dist/index.html index 622712f..7800760 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,3 +1,64 @@ -Meta-lightbox Demo

Meta-lightbox Demo

Click me to start

Use data-toggle="lightbox" attribute to attach lightbox action and href to specify URL.

Use data-lightbox-gallery="YOUR_GALLERY_NAME" to group ligthboxes and use next/prev arrows

You can use data-href attribute to specify link and attach lightbox to another element

Note: You can add jquery-zoom plugin and lighbox will zoom photos on hover.

\ No newline at end of file + } + + + +
+

Meta-lightbox Demo

+ NODE_ENV: development

+ Click me to start +

+

+ + Use data-toggle="lightbox" attribute to attach lightbox action and href to specify URL. + +

+

+ + Use data-lightbox-gallery="YOUR_GALLERY_NAME" to group ligthboxes and use next/prev arrows + +

+

+ You can use data-href attribute to specify link and attach lightbox to another element +

+

+ Note: You can add jquery-zoom plugin and lighbox will + zoom photos on hover. +

+
+
+ + + + + + + + + + + diff --git a/dist/js/app.js b/dist/js/app.js index 6b8b7ee..97eca1d 100644 --- a/dist/js/app.js +++ b/dist/js/app.js @@ -1,2 +1,95 @@ -/*! For license information please see app.js.LICENSE.txt */ -!function(){"use strict";var t={n:function(e){var o=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(o,{a:o}),o},d:function(e,o){for(var a in o)t.o(o,a)&&!t.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:o[a]})},o:function(t,e){return Object.prototype.hasOwnProperty.call(t,e)}},e=jQuery,o="ajax-load",a="back-online",n="load";function _typeof(t){return(_typeof="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function _typeof(t){return typeof t}:function _typeof(t){return t&&"function"===typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function _defineProperties(t,e){for(var o=0;o
Connection failure.
',s=function(){function MetaLightboxUI(){!function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,MetaLightboxUI)}return function _createClass(t,e,o){return e&&_defineProperties(t.prototype,e),o&&_defineProperties(t,o),t}(MetaLightboxUI,null,[{key:"init",value:function init(){console.log("".concat(l,": init ..."));var t=this;t.isMSIE=0;try{t.isHidpi=t.is_hdpi()}catch(e){console.log("".concat(l,": catch"))}$(".js".concat(l,',[data-toggle="lightbox"],[data-lightbox-gallery]')).on("click",(function(e){e.preventDefault(),e.stopPropagation();var o=$(e.currentTarget);t.show(o)})),$(".js".concat(l,"-close-inline")).on("click",(function(t){$(t.currentTarget).parents(".meta-lightbox-overlay").removeClass("meta-lightbox-open")}))}},{key:"is_hdpi",value:function is_hdpi(){console.log("".concat(l,": isHidpi"));return t.devicePixelRatio>1||t.matchMedia&&t.matchMedia("(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)").matches}},{key:"show",value:function show(t){console.log("".concat(l,": show"));var e=this;if(e.constructLightbox()){var o=e.$content;if(o){if(c.addClass("meta-lightbox-body-effect-fade"),e.process(o,t),t.data("lightbox-gallery")){var a=$('[data-lightbox-gallery="'.concat(t.data("lightbox-gallery"),'"]'));1===a.length?$(".meta-lightbox-nav").hide():$(".meta-lightbox-nav").show(),$(".meta-lightbox-prev").off("click").on("click",(function(o){o.preventDefault();var n=a.index(t),i=a.eq(n-1);i.length||(i=a.last()),setTimeout((function(){e.show(i)}),10)})),$(".meta-lightbox-next").off("click").on("click",(function(o){o.preventDefault();var n=a.index(t),i=a.eq(n+1);i.length||(i=a.first()),setTimeout((function(){e.show(i)}),10)}))}setTimeout((function(){e.$overlay.addClass("meta-lightbox-open")}),1)}}}},{key:"constructLightbox",value:function constructLightbox(){console.log("".concat(l,": constructLightbox"));var t=this,e=$("
",{class:"meta-lightbox-overlay meta-lightbox-theme-default meta-lightbox-effect-fade"}),o=$("
",{class:"meta-lightbox-wrap"}),a=$("
",{class:"meta-lightbox-content"}),n=$(' Previous Next'),i=$('Close'),r=$("
",{class:"meta-lightbox-title-wrap"});return t.$overlay||(t.isMSIE&&e.addClass("meta-lightbox-ie"),o.append(a),o.append(r),e.append(o),e.append(n),e.append(i),c.append(e),e.on("click",(function(e){e.preventDefault(),t.hide()})),i.on("click",(function(e){e.preventDefault(),t.hide()})),t.$overlay=e,t.$content=a,t.$title=r),t.$overlay}},{key:"setTitle",value:function setTitle(t){this.$title.html(t)}},{key:"process",value:function process(o,a){console.log("".concat(l,": process"));var n=this,c=a.attr("href")&&a.attr("href").length?a.attr("href"):a.data("href");n.$content.attr("class","meta-lightbox-content"),n.$content.addClass(a.data("lightbox-class")),c.length||(console.log(a),console.error("".concat(l,": href(attr/data) is missing")));var s=$("#PageLoading .loading-spinner"),f=s.length?s.clone():"";if(n.$content.append(f).addClass("meta-lightbox-loading"),c.match(/\.(jpeg|jpg|gif|png|svg)$/i)||"image"===a.data("force")){$.ajax({url:c,success:function success(){var t=$("",{src:c}),a=$('
'),i=$('');i.append(t),a.append(i),a.css({"line-height":"".concat(o.height(),"px"),height:"".concat(o.height(),"px")}),e.resize((function(){a.css({"line-height":"".concat(o.height(),"px"),height:"".concat(o.height(),"px")})})),"undefined"!==typeof i.zoom?i.zoom():i.addClass("no-zoom"),n.$content.html(a),n.contentLoaded()},error:function error(t,e){var o=$(r);n.$content.html(o),n.contentLoaded()}});var d=a.data("title")?a.data("title"):a.attr("title");n.setTitle(d),"function"===typeof ga&&ga("send","event","meta","Image Click",c)}else if(c.match(/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/)||"youtube"===a.data("force")||"vimeo"===a.data("force")){var h,g=c.match(/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/),u="meta-lightbox-video";if("youtube"==g[1]&&(h="https://www.youtube.com/embed/".concat(g[4]),u="".concat(u," meta-lightbox-youtube")),"youtu"==g[1]&&(h="https://www.youtube.com/embed/".concat(g[3]),u="".concat(u," meta-lightbox-youtube")),"youtube-nocookie"==g[1]&&(h="https://www.youtube-nocookie.com/embed/".concat(g[4]),u="".concat(u," meta-lightbox-youtube")),"vimeo"==g[1]&&(h="https://player.vimeo.com/video/".concat(g[3]),u="".concat(u," meta-lightbox-vimeo")),!h)return console.warn("".concat(l,": Video loading bad URL")),!1;if(!n.loadIframe(h,u))return a.addClass("meta-offline"),!1;a.removeClass("meta-offline");var m=a.data("title")?a.data("title"):a.attr("title");n.setTitle(m),"function"===typeof ga&&ga("send","event","meta","Video Click",g)}else if("#"==c.substring(0,1)||"inline"===a.data("force"))$(c).length?(wrap=$('
'),wrap.append($(c).clone().show()),wrap.outerHeight()');r.html(c.regions.LayoutAjax),n.$content.html(r),n.contentLoaded()}var s=a.getResponseHeader("X-Title"),f=a.getResponseHeader("X-Link");s&&s.length&&f&&f.length&&f!==t.location.href&&f.substring(0,f.indexOf("#"))!==t.location.href.replace($("base").attr("href"),"/")&&($(".meta-lightbox-ajax").data("curr-title",i.title),$(".meta-lightbox-ajax").data("curr-link",t.location.href),"undefined"!==typeof t.localStorage&&"/"!==f&&t.localStorage.setItem("current-page",f),i.URL!==f&&i.URL!==$("base").attr("href")+f&&i.URL!=="".concat($("base").attr("href"),"/").concat(f)&&t.history.pushState({title:s,page:f,ajax:"true"},s,f),$(".meta-lightbox-title-wrap").html(""),"function"===typeof ga&&(ga("set",{page:f.replace($("base").attr("href"),""),title:s}),ga("send","pageview")))}}catch(h){console.log("".concat(l,": AJAX HTML"));var d=$('
');d.append(e),n.$content.html(d),n.contentLoaded()}n.contentLoaded()}})}}},{key:"loadIframe",value:function loadIframe(t,e){var o=this,a=$("