IMPR: Webpack 5 + minor updates
This commit is contained in:
Tony Air
parent
142e8e451f
commit
b0a788d268
|
|
@ -1,3 +1,3 @@
|
|||
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="description" content=""><meta name="author" content=""><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.0/css/all.css"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><title>Meta-lightbox Demo</title><style>.wrapper {
|
||||
padding: 2rem;
|
||||
}</style><link href="./css/app.css" rel="stylesheet"></head><body><div class="wrapper"><h1>Meta-lightbox Demo</h1><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-lightbox-gallery="demo" data-title="That's first link">Click me to start</a></p><p><a href="../src/img/photo2.jpg" data-toggle="lightbox" data-lightbox-gallery="demo">Use data-toggle="lightbox" attribute to attach lightbox action and href to specify URL.</a></p><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-lightbox-gallery="demo" data-title="Use data-title attribute to specify lightbox title">Use data-lightbox-gallery="YOUR_GALLERY_NAME" to group ligthboxes and use next/prev arrows</a></p><p data-toggle="lightbox" data-href="https://youtu.be/GgnClrx8N2k" data-lightbox-gallery="demo" data-title="Yes you can link vimeo and youtube videos as long as AJAX content">You can use data-href attribute to specify link and attach lightbox to another element</p><p><b>Note:</b> You can add jquery-zoom plugin and lighbox will zoom photos on hover.</p></div><script src="./js/app.js"></script></body></html>
|
||||
}</style><link href="css/app.css" rel="stylesheet"></head><body><div class="wrapper"><h1>Meta-lightbox Demo</h1><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-lightbox-gallery="demo" data-title="That's first link">Click me to start</a></p><p><a href="../src/img/photo2.jpg" data-toggle="lightbox" data-lightbox-gallery="demo">Use data-toggle="lightbox" attribute to attach lightbox action and href to specify URL.</a></p><p><a href="../src/img/photo1.png" data-toggle="lightbox" data-lightbox-gallery="demo" data-title="Use data-title attribute to specify lightbox title">Use data-lightbox-gallery="YOUR_GALLERY_NAME" to group ligthboxes and use next/prev arrows</a></p><p data-toggle="lightbox" data-href="https://youtu.be/GgnClrx8N2k" data-lightbox-gallery="demo" data-title="Yes you can link vimeo and youtube videos as long as AJAX content">You can use data-href attribute to specify link and attach lightbox to another element</p><p><b>Note:</b> You can add jquery-zoom plugin and lighbox will zoom photos on hover.</p></div><script src="js/app.js"></script></body></html>
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
/*! 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 i(t){return(i="function"===typeof Symbol&&"symbol"===typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"===typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function c(t,e){for(var o=0;o<e.length;o++){var a=e[o];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}!function(t){var e=window,l=t(e),r=document,s=t("body"),f="MetaLightboxUI",h='<div class="meta-lightbox-error"><div class="alert alert-error alert-danger">Connection failure.</div></div>',d=function(){function o(){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,o)}var a,n,d;return a=o,d=[{key:"init",value:function(){console.log("".concat(f,": init ..."));var e=this;e.isMSIE=0;try{e.isHidpi=e.is_hdpi()}catch(o){console.log("".concat(f,": catch"))}t(".js".concat(f,',[data-toggle="lightbox"],[data-lightbox-gallery]')).on("click",(function(o){o.preventDefault(),o.stopPropagation();var a=t(o.currentTarget);e.show(a)})),t(".js".concat(f,"-close-inline")).on("click",(function(e){t(e.currentTarget).parents(".meta-lightbox-overlay").removeClass("meta-lightbox-open")}))}},{key:"is_hdpi",value:function(){return console.log("".concat(f,": isHidpi")),e.devicePixelRatio>1||e.matchMedia&&e.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(e){console.log("".concat(f,": show"));var o=this;if(o.constructLightbox()){var a=o.$content;if(a){if(s.addClass("meta-lightbox-body-effect-fade"),o.process(a,e),e.data("lightbox-gallery")){var n=t('[data-lightbox-gallery="'.concat(e.data("lightbox-gallery"),'"]'));1===n.length?t(".meta-lightbox-nav").hide():t(".meta-lightbox-nav").show(),t(".meta-lightbox-prev").off("click").on("click",(function(t){t.preventDefault();var a=n.index(e),i=n.eq(a-1);i.length||(i=n.last()),setTimeout((function(){o.show(i)}),10)})),t(".meta-lightbox-next").off("click").on("click",(function(t){t.preventDefault();var a=n.index(e),i=n.eq(a+1);i.length||(i=n.first()),setTimeout((function(){o.show(i)}),10)}))}setTimeout((function(){o.$overlay.addClass("meta-lightbox-open")}),1)}}}},{key:"constructLightbox",value:function(){console.log("".concat(f,": constructLightbox"));var e=this,o=t("<div>",{class:"meta-lightbox-overlay meta-lightbox-theme-default meta-lightbox-effect-fade"}),a=t("<div>",{class:"meta-lightbox-wrap"}),n=t("<div>",{class:"meta-lightbox-content"}),i=t('<a href="#" class="meta-lightbox-nav meta-lightbox-prev"><i class="fas fa fa-chevron-left"></i> <span class="sr-only">Previous</span></a><a href="#" class="meta-lightbox-nav meta-lightbox-next"><i class="fa fas fa-chevron-right"></i> <span class="sr-only">Next</span></a>'),c=t('<a href="#" class="meta-lightbox-close fas fa fa-times" title="Close"><span class="sr-only">Close</span></a>'),l=t("<div>",{class:"meta-lightbox-title-wrap"});return e.$overlay||(e.isMSIE&&o.addClass("meta-lightbox-ie"),a.append(n),a.append(l),o.append(a),o.append(i),o.append(c),s.append(o),o.on("click",(function(t){t.preventDefault(),e.hide()})),c.on("click",(function(t){t.preventDefault(),e.hide()})),e.$overlay=o,e.$content=n,e.$title=l),e.$overlay}},{key:"setTitle",value:function(t){this.$title.html(t)}},{key:"process",value:function(o,a){console.log("".concat(f,": 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(f,": href(attr/data) is missing")));var s=t("#PageLoading .loading-spinner"),d=s.length?s.clone():"";if(n.$content.append(d).addClass("meta-lightbox-loading"),c.match(/\.(jpeg|jpg|gif|png|svg)$/i)){t.ajax({url:c,success:function(){var e=t("<img>",{src:c}),a=t('<div class="meta-lightbox-image"></div>'),i=t('<span class="meta-lightbox-zoom-wrapper"></span>');i.append(e),a.append(i),a.css({"line-height":"".concat(o.height(),"px"),height:"".concat(o.height(),"px")}),l.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(e,o){var a=t(h);n.$content.html(a),n.contentLoaded()}});var g=a.data("title")?a.data("title"):a.attr("title");n.setTitle(g),"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-]+))/)){var u,m=c.match(/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/),p="meta-lightbox-video";if("youtube"==m[1]&&(u="https://www.youtube.com/embed/".concat(m[4]),p="".concat(p," meta-lightbox-youtube")),"youtu"==m[1]&&(u="https://www.youtube.com/embed/".concat(m[3]),p="".concat(p," meta-lightbox-youtube")),"youtube-nocookie"==m[1]&&(u="https://www.youtube-nocookie.com/embed/".concat(m[4]),p="".concat(p," meta-lightbox-youtube")),"vimeo"==m[1]&&(u="https://player.vimeo.com/video/".concat(m[3]),p="".concat(p," meta-lightbox-vimeo")),!u)return console.warn("".concat(f,": Video loading bad URL")),!1;if(!n.loadIframe(u,p))return a.addClass("meta-offline"),!1;a.removeClass("meta-offline");var b=a.data("title")?a.data("title"):a.attr("title");n.setTitle(b),"function"===typeof ga&&ga("send","event","meta","Video Click",m)}else if("#"==c.substring(0,1))t(c).length?(wrap=t('<div class="meta-lightbox-inline" />'),wrap.append(t(c).clone().show()),wrap.outerHeight()<n.$content.height()&&wrap.css({position:"relative",top:"50%","margin-top":"".concat(-wrap.outerHeight()/2,"px")}),l.resize((function(){wrap.outerHeight()<n.$content.height()&&wrap.css({position:"relative",top:"50%","margin-top":"".concat(-wrap.outerHeight()/2,"px")})})),n.$content.html(wrap),n.contentLoaded()):(wrap=t(h),n.$content.html(wrap),n.contentLoaded()),t(".meta-lightbox-title-wrap").html(""),"function"===typeof ga&&ga("send","event","meta","inline HTML click",c);else{if(a.data("force-iframe"))return console.log("".concat(f,": IFrame forced")),n.loadIframe(c,"meta-lightbox-iframe-content")?(a.removeClass("meta-offline"),!0):(a.addClass("meta-offline"),!1);console.log("".concat(f,": loading AJAX")),t.ajax({sync:!1,async:!0,url:c,dataType:"html",method:"GET",cache:!1,statusCode:{404:function(){console.log("".concat(f,": page not found")),e.location.href=url},302:function(){console.log("".concat(f,": redirect 302")),e.location.href=url}},error:function(e,o){console.log("".concat(f,": AJAX request failure.").concat(e.statusText));var a=t(h);n.$content.html(a),n.contentLoaded(),"function"===typeof ga&&ga("send","event","error","AJAX ERROR",e.statusText)},success:function(o,a,c){console.log("".concat(f,": AJAX success"));try{var l=t.parseJSON(o);if("object"===i(l)){if(console.log("".concat(f,": AJAX JSON")),"object"===i(l.regions)&&"undefinded"!==typeof l.regions.LayoutAjax){var s=t('<div class="meta-lightbox-ajax" />');s.html(l.regions.LayoutAjax),n.$content.html(s),n.contentLoaded()}var h=c.getResponseHeader("X-Title"),d=c.getResponseHeader("X-Link");h&&h.length&&d&&d.length&&d!==e.location.href&&d.substring(0,d.indexOf("#"))!==e.location.href.replace(t("base").attr("href"),"/")&&(t(".meta-lightbox-ajax").data("curr-title",r.title),t(".meta-lightbox-ajax").data("curr-link",e.location.href),"undefined"!==typeof e.localStorage&&"/"!==d&&e.localStorage.setItem("current-page",d),r.URL!==d&&r.URL!==t("base").attr("href")+d&&r.URL!=="".concat(t("base").attr("href"),"/").concat(d)&&e.history.pushState({title:h,page:d,ajax:"true"},h,d),t(".meta-lightbox-title-wrap").html(""),"function"===typeof ga&&(ga("set",{page:d.replace(t("base").attr("href"),""),title:h}),ga("send","pageview")))}}catch(u){console.log("".concat(f,": AJAX HTML"));var g=t('<div class="meta-lightbox-ajax" />');g.append(o),n.$content.html(g),n.contentLoaded()}n.contentLoaded()}})}}},{key:"loadIframe",value:function(e,o){var a=this,n=t("<iframe>",{src:e,class:o,frameborder:0,vspace:0,hspace:0,scrolling:"auto",allowtransparency:"true"});return console.log("".concat(f,": loading iframe")),s.append('<div id="MetaIFramePreload" class="hidden d-none iframe-preload" style="display:none"></div>'),t("#MetaIFramePreload").html(n),n.on("load",(function(){if(s.hasClass("is-offline"))return console.warn("".concat(f,": Unable to load iframe offline")),!1;a.finishIFrameLoading()})),n}},{key:"finishIFrameLoading",value:function(){var e=this,o=t("#MetaIFramePreload");if(!o.length)return console.warn("".concat(f,": iframe preload not found")),!1;var a=o.find("iframe");if(!a.length)return console.warn("".concat(f,": iframe preload > iframe not found")),!1;console.log("".concat(f,": the iframe was loaded")),o.html(""),o.remove(),e.$content.addClass("iframe-delay"),e.$content.html(a),e.contentLoaded(),setTimeout((function(){e.$content.removeClass("iframe-delay")}),1e3)}},{key:"contentLoaded",value:function(){var e=this;e.$content.removeClass("meta-lightbox-loading"),t(".meta-lightbox-content .js".concat(f,',.meta-lightbox-content [data-toggle="lightbox"],.meta-lightbox-content [data-lightbox-gallery]')).on("click",(function(o){o.preventDefault(),o.stopPropagation();var a=t(o.currentTarget);e.show(a)})),t(".js".concat(f,"-close")).on("click",(function(t){t.preventDefault(),e.hide()})),setTimeout((function(){l.trigger("meta-lightbox-loaded")}),1),setTimeout((function(){s.addClass("meta-lightbox-body-effect-fade")}),600)}},{key:"hide",value:function(o){var a=this.$overlay,n=t(".meta-lightbox-ajax").data("curr-title"),i=t(".meta-lightbox-ajax").data("curr-link");n&&i&&("undefined"!==typeof e.localStorage&&"/"!==i&&e.localStorage.setItem("current-page",i),r.URL!==i&&r.URL!==t("base").attr("href")+i&&r.URL!=="".concat(t("base").attr("href"),"/").concat(i)&&e.history.replaceState({title:n,page:i,ajax:"true"},n,i)),a.removeClass("meta-lightbox-open"),s.removeClass("meta-lightbox-body-effect-fade"),t(".meta-lightbox-content .meta-lightbox-zoom-wrapper").trigger("zoom.destroy"),this.isMSIE&&(a.find("iframe").attr("src"," "),a.find("iframe").remove()),t(".meta-lightbox-prev").off("click"),t(".meta-lightbox-next").off("click"),t(".meta-lightbox-content").empty(),s.removeClass("meta-lightbox-body-effect-fade")}}],(n=null)&&c(a.prototype,n),d&&c(a,d),o}();l.on("MetaLightboxUI.init ".concat(o," ").concat(n),(function(){d.init()})),l.on("".concat(a),(function(){t(".meta-offline").removeClass("meta-offline"),console.log("".concat(f,": reloading iframe")),d.finishIFrameLoading();var e=t(".meta-lightbox-content iframe");e.length&&e.attr("src",e.attr("src"))})),e.MetaLightboxUI=d}(t.n(e)())}();
|
||||
!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<e.length;o++){var a=e[o];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}!function($){var t=window,e=$(t),i=document,c=$("body"),l="MetaLightboxUI",r='<div class="meta-lightbox-error"><div class="alert alert-error alert-danger">Connection failure.</div></div>',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=$("<div>",{class:"meta-lightbox-overlay meta-lightbox-theme-default meta-lightbox-effect-fade"}),o=$("<div>",{class:"meta-lightbox-wrap"}),a=$("<div>",{class:"meta-lightbox-content"}),n=$('<a href="#" class="meta-lightbox-nav meta-lightbox-prev"><i class="fas fa fa-chevron-left"></i> <span class="sr-only">Previous</span></a><a href="#" class="meta-lightbox-nav meta-lightbox-next"><i class="fa fas fa-chevron-right"></i> <span class="sr-only">Next</span></a>'),i=$('<a href="#" class="meta-lightbox-close fas fa fa-times" title="Close"><span class="sr-only">Close</span></a>'),r=$("<div>",{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=$("<img>",{src:c}),a=$('<div class="meta-lightbox-image"></div>'),i=$('<span class="meta-lightbox-zoom-wrapper"></span>');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=$('<div class="meta-lightbox-inline" />'),wrap.append($(c).clone().show()),wrap.outerHeight()<n.$content.height()&&wrap.css({position:"relative",top:"50%","margin-top":"".concat(-wrap.outerHeight()/2,"px")}),e.resize((function(){wrap.outerHeight()<n.$content.height()&&wrap.css({position:"relative",top:"50%","margin-top":"".concat(-wrap.outerHeight()/2,"px")})})),n.$content.html(wrap),n.contentLoaded()):(wrap=$(r),n.$content.html(wrap),n.contentLoaded()),$(".meta-lightbox-title-wrap").html(""),"function"===typeof ga&&ga("send","event","meta","inline HTML click",c);else{if(a.data("force-iframe")||"iframe"===a.data("force"))return console.log("".concat(l,": IFrame forced")),n.loadIframe(c,"meta-lightbox-iframe-content")?(a.removeClass("meta-offline"),!0):(a.addClass("meta-offline"),!1);console.log("".concat(l,": loading AJAX")),$.ajax({sync:!1,async:!0,url:c,dataType:"html",method:"GET",cache:!1,statusCode:{404:function _(){console.log("".concat(l,": page not found")),t.location.href=url},302:function _(){console.log("".concat(l,": redirect 302")),t.location.href=url}},error:function error(t,e){console.log("".concat(l,": AJAX request failure.").concat(t.statusText));var o=$(r);n.$content.html(o),n.contentLoaded(),"function"===typeof ga&&ga("send","event","error","AJAX ERROR",t.statusText)},success:function success(e,o,a){console.log("".concat(l,": AJAX success"));try{var c=$.parseJSON(e);if("object"===_typeof(c)){if(console.log("".concat(l,": AJAX JSON")),"object"===_typeof(c.regions)&&"undefinded"!==typeof c.regions.LayoutAjax){var r=$('<div class="meta-lightbox-ajax" />');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=$('<div class="meta-lightbox-ajax" />');d.append(e),n.$content.html(d),n.contentLoaded()}n.contentLoaded()}})}}},{key:"loadIframe",value:function loadIframe(t,e){var o=this,a=$("<iframe>",{src:t,class:e,frameborder:0,vspace:0,hspace:0,scrolling:"auto",allowtransparency:"true"});return console.log("".concat(l,": loading iframe")),c.append('<div id="MetaIFramePreload" class="hidden d-none iframe-preload" style="display:none"></div>'),$("#MetaIFramePreload").html(a),a.on("load",(function(){if(c.hasClass("is-offline"))return console.warn("".concat(l,": Unable to load iframe offline")),!1;o.finishIFrameLoading()})),a}},{key:"finishIFrameLoading",value:function finishIFrameLoading(){var t=this,e=$("#MetaIFramePreload");if(!e.length)return console.warn("".concat(l,": iframe preload not found")),!1;var o=e.find("iframe");if(!o.length)return console.warn("".concat(l,": iframe preload > iframe not found")),!1;console.log("".concat(l,": the iframe was loaded")),e.html(""),e.remove(),t.$content.addClass("iframe-delay"),t.$content.html(o),t.contentLoaded(),setTimeout((function(){t.$content.removeClass("iframe-delay")}),1e3)}},{key:"contentLoaded",value:function contentLoaded(){var t=this;t.$content.removeClass("meta-lightbox-loading"),$(".meta-lightbox-content .js".concat(l,',.meta-lightbox-content [data-toggle="lightbox"],.meta-lightbox-content [data-lightbox-gallery]')).on("click",(function(e){e.preventDefault(),e.stopPropagation();var o=$(e.currentTarget);t.show(o)})),$(".js".concat(l,"-close")).on("click",(function(e){e.preventDefault(),t.hide()})),setTimeout((function(){e.trigger("meta-lightbox-loaded")}),1),setTimeout((function(){c.addClass("meta-lightbox-body-effect-fade")}),600)}},{key:"hide",value:function hide(e){var o=this.$overlay,a=$(".meta-lightbox-ajax").data("curr-title"),n=$(".meta-lightbox-ajax").data("curr-link");a&&n&&("undefined"!==typeof t.localStorage&&"/"!==n&&t.localStorage.setItem("current-page",n),i.URL!==n&&i.URL!==$("base").attr("href")+n&&i.URL!=="".concat($("base").attr("href"),"/").concat(n)&&t.history.replaceState({title:a,page:n,ajax:"true"},a,n)),o.removeClass("meta-lightbox-open"),c.removeClass("meta-lightbox-body-effect-fade"),$(".meta-lightbox-content .meta-lightbox-zoom-wrapper").trigger("zoom.destroy"),this.isMSIE&&(o.find("iframe").attr("src"," "),o.find("iframe").remove()),$(".meta-lightbox-prev").off("click"),$(".meta-lightbox-next").off("click"),$(".meta-lightbox-content").empty(),c.removeClass("meta-lightbox-body-effect-fade")}}]),MetaLightboxUI}();e.on("MetaLightboxUI.init ".concat(o," ").concat(n),(function(){s.init()})),e.on("".concat(a),(function(){$(".meta-offline").removeClass("meta-offline"),console.log("".concat(l,": reloading iframe")),s.finishIFrameLoading();var t=$(".meta-lightbox-content iframe");t.length&&t.attr("src",t.attr("src"))})),t.MetaLightboxUI=s}(t.n(e)())}();
|
||||
|
|
@ -14,12 +14,12 @@
|
|||
},
|
||||
"modules": {
|
||||
"byIdentifier": {
|
||||
"./node_modules/.pnpm/html-loader@1.3.2_webpack@5.11.0/node_modules/html-loader/dist/cjs.js!./src/html/meta-lightbox.html": 797,
|
||||
"./node_modules/.pnpm/html-webpack-plugin@4.5.0_webpack@5.11.0/node_modules/html-webpack-plugin/lib/loader.js!./src/index.html": 853
|
||||
"./node_modules/.pnpm/html-loader@1.3.2_webpack@5.16.0/node_modules/html-loader/dist/cjs.js!./src/html/meta-lightbox.html": 913,
|
||||
"./node_modules/.pnpm/html-webpack-plugin@4.5.1_webpack@5.16.0/node_modules/html-webpack-plugin/lib/loader.js!./src/index.html": 864
|
||||
},
|
||||
"usedIds": [
|
||||
797,
|
||||
853
|
||||
864,
|
||||
913
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -35,12 +35,37 @@
|
|||
143
|
||||
]
|
||||
},
|
||||
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/meta-lightbox/node_modules/.pnpm/css-loader@5.0.1_webpack@5.16.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.1_node-sass@5.0.0+webpack@5.16.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/scss/app.scss": [
|
||||
{
|
||||
"chunks": {
|
||||
"byName": {
|
||||
"mini-css-extract-plugin": 323
|
||||
},
|
||||
"bySource": {
|
||||
"0 mini-css-extract-plugin": 323
|
||||
},
|
||||
"usedIds": [
|
||||
323
|
||||
]
|
||||
},
|
||||
"modules": {
|
||||
"byIdentifier": {
|
||||
"./node_modules/.pnpm/babel-loader@8.2.2_f0c87bb7cbf8c08531ee428ecaa3548a/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@5.0.1_webpack@5.16.0/node_modules/css-loader/dist/runtime/api.js": 183,
|
||||
"./node_modules/.pnpm/css-loader@5.0.1_webpack@5.16.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.1_node-sass@5.0.0+webpack@5.16.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/scss/app.scss": 71
|
||||
},
|
||||
"usedIds": [
|
||||
71,
|
||||
183
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
"modules": {
|
||||
"byIdentifier": {
|
||||
"./node_modules/.pnpm/babel-loader@8.2.2_3d9c2a837cc4b2484cb693b7275aaf13/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/app.js|f9ef15cfc04422112506fdbd7697fdab": 70
|
||||
"./node_modules/.pnpm/babel-loader@8.2.2_f0c87bb7cbf8c08531ee428ecaa3548a/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/app.js|7ed954facc636132a95507c37bb0d705": 527
|
||||
},
|
||||
"usedIds": [
|
||||
70
|
||||
527
|
||||
]
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
34
package.json
34
package.json
|
|
@ -1,8 +1,8 @@
|
|||
{
|
||||
"name": "@a2nt/meta-lightbox",
|
||||
"version": "2.7.1",
|
||||
"version": "2.7.2",
|
||||
"description": "Universal Lightbox window",
|
||||
"main": "meta-lightbox.js",
|
||||
"main": "src/js/app.js",
|
||||
"author": "Tony Air <tony@twma.pro>",
|
||||
"license": "BSD-2-Clause",
|
||||
"repository": {
|
||||
|
|
@ -10,7 +10,6 @@
|
|||
"url": "git+https://github.com/a2nt/meta-lightbox.git"
|
||||
},
|
||||
"private": false,
|
||||
"main": "src/js/app.js",
|
||||
"engines": {
|
||||
"yarn": ">= 1.0.0"
|
||||
},
|
||||
|
|
@ -36,8 +35,8 @@
|
|||
"dependencies": {
|
||||
"aos": "^2.3.4",
|
||||
"bootbox": "^5.5.2",
|
||||
"bootstrap": "^4.5.3",
|
||||
"bootstrap-confirmation2": "^4.1.0",
|
||||
"bootstrap": "^4.6.0",
|
||||
"bootstrap-confirmation2": "^4.2.0",
|
||||
"bootstrap-datepicker": "^1.9.0",
|
||||
"bootstrap-offcanvas": "^1.0.0",
|
||||
"bootstrap-table": "^1.18.1",
|
||||
|
|
@ -75,35 +74,33 @@
|
|||
"animate.css": "^4.1.1",
|
||||
"ansi-html": "^0.0.7",
|
||||
"ansi-regex": "^5.0.0",
|
||||
"autoprefixer": "^10.1.0",
|
||||
"autoprefixer": "^10.2.3",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-loader": "^8.2.2",
|
||||
"bindings": "^1.5.0",
|
||||
"copy-webpack-plugin": "^7.0.0",
|
||||
"croppie": "^2.6.5",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^5.0.1",
|
||||
"eslint": "^7.16.0",
|
||||
"eslint": "^7.18.0",
|
||||
"eslint-plugin-import": "^2.22.1",
|
||||
"eslint-plugin-jquery": "^1.5.1",
|
||||
"eslint-plugin-react": "^7.21.5",
|
||||
"eslint-plugin-react": "^7.22.0",
|
||||
"exif-js": "^2.3.0",
|
||||
"exports-loader": "^1.1.1",
|
||||
"fast-levenshtein": "^3.0.0",
|
||||
"fastest-levenshtein": "^1.0.12",
|
||||
"favicons-webpack-plugin": "^4.2.0",
|
||||
"favicons-webpack-plugin": "github:jantimon/favicons-webpack-plugin#benkostr-webpack-5",
|
||||
"file-loader": "^6.2.0",
|
||||
"font-awesome": "^4.7.0",
|
||||
"fsevents": "^2.2.1",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"html-entities": "^1.4.0",
|
||||
"html-loader": "^1.3.2",
|
||||
"html-webpack-plugin": "^4.5.0",
|
||||
"image-minimizer-webpack-plugin": "^2.1.0",
|
||||
"html-webpack-plugin": "^4.5.1",
|
||||
"image-minimizer-webpack-plugin": "^2.2.0",
|
||||
"imagemin-jpegtran": "^7.0.0",
|
||||
"img-optimize-loader": "^1.0.7",
|
||||
"loglevel": "^1.7.1",
|
||||
"mini-css-extract-plugin": "^1.3.3",
|
||||
"mini-css-extract-plugin": "^1.3.4",
|
||||
"node-sass": "^5.0.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.4",
|
||||
|
|
@ -119,7 +116,7 @@
|
|||
"routie": "0.0.1",
|
||||
"sass-lint": "^1.13.1",
|
||||
"sass-lint-fix": "^1.12.1",
|
||||
"sass-loader": "^10.1.0",
|
||||
"sass-loader": "^10.1.1",
|
||||
"scheduler": "^0.20.1",
|
||||
"script-ext-html-webpack-plugin": "^2.1.5",
|
||||
"shallowequal": "^1.1.0",
|
||||
|
|
@ -127,10 +124,11 @@
|
|||
"strip-ansi": "^6.0.0",
|
||||
"style-loader": "^2.0.0",
|
||||
"svg-url-loader": "^7.1.1",
|
||||
"terser-webpack-plugin": "^5.0.3",
|
||||
"terser-webpack-plugin": "^5.1.1",
|
||||
"url-loader": "^4.1.1",
|
||||
"webpack": "^5.11.0",
|
||||
"webpack-cli": "^4.2.0",
|
||||
"webpack": "^5.16.0",
|
||||
"webpack-bundle-analyzer": "^4.3.0",
|
||||
"webpack-cli": "^4.4.0",
|
||||
"webpack-dev-server": "^4.0.0-beta.0",
|
||||
"webpack-manifest-plugin": "^3.0.0",
|
||||
"webpack-merge": "^5.7.3"
|
||||
|
|
|
|||
|
|
@ -207,7 +207,10 @@ const MetaLightboxUI = (($) => {
|
|||
ui.$content.append(loadingContent).addClass('meta-lightbox-loading');
|
||||
|
||||
// Image
|
||||
if (href.match(/\.(jpeg|jpg|gif|png|svg)$/i)) {
|
||||
if (
|
||||
href.match(/\.(jpeg|jpg|gif|png|svg)$/i) ||
|
||||
$link.data('force') === 'image'
|
||||
) {
|
||||
$.ajax({
|
||||
url: href,
|
||||
success: () => {
|
||||
|
|
@ -265,7 +268,9 @@ const MetaLightboxUI = (($) => {
|
|||
else if (
|
||||
href.match(
|
||||
/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/,
|
||||
)
|
||||
) ||
|
||||
$link.data('force') === 'youtube' ||
|
||||
$link.data('force') === 'vimeo'
|
||||
) {
|
||||
const video = href.match(
|
||||
/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/,
|
||||
|
|
@ -314,7 +319,10 @@ const MetaLightboxUI = (($) => {
|
|||
}
|
||||
}
|
||||
// Inline HTML
|
||||
else if (href.substring(0, 1) == '#') {
|
||||
else if (
|
||||
href.substring(0, 1) == '#' ||
|
||||
$link.data('force') === 'inline'
|
||||
) {
|
||||
if ($(href).length) {
|
||||
wrap = $('<div class="meta-lightbox-inline" />');
|
||||
wrap.append($(href).clone().show());
|
||||
|
|
@ -354,7 +362,7 @@ const MetaLightboxUI = (($) => {
|
|||
}
|
||||
// AJAX/iFrame (default)
|
||||
else {
|
||||
if ($link.data('force-iframe')) {
|
||||
if ($link.data('force-iframe') || $link.data('force') === 'iframe') {
|
||||
console.log(`${NAME}: IFrame forced`);
|
||||
|
||||
const $iframe = ui.loadIframe(href, 'meta-lightbox-iframe-content');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,113 @@
|
|||
/*
|
||||
* Common Environment
|
||||
*/
|
||||
|
||||
const webpack = require('webpack');
|
||||
const commonVariables = require('./webpack.configuration');
|
||||
const conf = commonVariables.configuration;
|
||||
|
||||
const path = require('path');
|
||||
const filesystem = require('fs');
|
||||
|
||||
const includes = {};
|
||||
const modules = [
|
||||
path.resolve(__dirname, conf.APPDIR, conf.SRC),
|
||||
path.resolve(__dirname, conf.APPDIR, conf.SRC, 'js'),
|
||||
path.resolve(__dirname, conf.APPDIR, conf.SRC, 'scss'),
|
||||
path.resolve(__dirname, conf.APPDIR, conf.SRC, 'img'),
|
||||
path.resolve(__dirname, conf.APPDIR, conf.SRC, 'thirdparty'),
|
||||
path.resolve(__dirname, 'node_modules'),
|
||||
path.resolve(__dirname),
|
||||
path.resolve(__dirname, 'public'),
|
||||
];
|
||||
|
||||
const _addAppFiles = (theme) => {
|
||||
const dirPath = path.resolve(__dirname, theme);
|
||||
let themeName = path.basename(theme);
|
||||
if (themeName == '.') {
|
||||
themeName = 'app';
|
||||
}
|
||||
|
||||
if (filesystem.existsSync(path.join(dirPath, conf.SRC, 'js', 'app.js'))) {
|
||||
includes[`${themeName}`] = path.join(dirPath, conf.SRC, 'js', 'app.js');
|
||||
} else if (
|
||||
filesystem.existsSync(path.join(dirPath, conf.SRC, 'scss', 'app.scss'))
|
||||
) {
|
||||
includes[`${themeName}`] = path.join(
|
||||
dirPath,
|
||||
conf.SRC,
|
||||
'scss',
|
||||
'app.scss',
|
||||
);
|
||||
}
|
||||
|
||||
modules.push(path.join(dirPath, conf.SRC, 'js'));
|
||||
modules.push(path.join(dirPath, conf.SRC, 'scss'));
|
||||
modules.push(path.join(dirPath, conf.SRC, 'img'));
|
||||
modules.push(path.join(dirPath, conf.SRC, 'thirdparty'));
|
||||
|
||||
const _getAllFilesFromFolder = function (dir, includeSubFolders = true) {
|
||||
const dirPath = path.resolve(__dirname, dir);
|
||||
let results = [];
|
||||
|
||||
filesystem.readdirSync(dirPath).forEach((file) => {
|
||||
if (file.charAt(0) === '_') {
|
||||
return;
|
||||
}
|
||||
|
||||
const filePath = path.join(dirPath, file);
|
||||
const stat = filesystem.statSync(filePath);
|
||||
|
||||
if (stat && stat.isDirectory() && includeSubFolders) {
|
||||
results = results.concat(
|
||||
_getAllFilesFromFolder(filePath, includeSubFolders),
|
||||
);
|
||||
} else {
|
||||
results.push(filePath);
|
||||
}
|
||||
});
|
||||
|
||||
return results;
|
||||
};
|
||||
|
||||
// add page specific scripts
|
||||
const typesJSPath = path.join(theme, conf.TYPESJS);
|
||||
if (filesystem.existsSync(typesJSPath)) {
|
||||
const pageScripts = _getAllFilesFromFolder(typesJSPath, true);
|
||||
pageScripts.forEach((file) => {
|
||||
includes[`${themeName}_${path.basename(file, '.js')}`] = file;
|
||||
});
|
||||
}
|
||||
|
||||
// add page specific scss
|
||||
const typesSCSSPath = path.join(theme, conf.TYPESSCSS);
|
||||
if (filesystem.existsSync(typesSCSSPath)) {
|
||||
const scssIncludes = _getAllFilesFromFolder(typesSCSSPath, true);
|
||||
scssIncludes.forEach((file) => {
|
||||
includes[`${themeName}_${path.basename(file, '.scss')}`] = file;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
_addAppFiles(conf.APPDIR);
|
||||
|
||||
// add themes
|
||||
commonVariables.themes.forEach((theme) => {
|
||||
_addAppFiles(theme);
|
||||
});
|
||||
|
||||
module.exports = {
|
||||
entry: includes,
|
||||
externals: {
|
||||
jquery: 'jQuery',
|
||||
},
|
||||
resolve: {
|
||||
modules: modules,
|
||||
alias: {
|
||||
'window.jQuery': require.resolve('jquery'),
|
||||
$: require.resolve('jquery'),
|
||||
jquery: require.resolve('jquery'),
|
||||
jQuery: require.resolve('jquery'),
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -1,199 +1,219 @@
|
|||
/*
|
||||
* Production assets generation
|
||||
*/
|
||||
const COMPRESS = true;
|
||||
|
||||
const conf = {
|
||||
APPDIR: '',
|
||||
SRC: 'src',
|
||||
DIST: 'dist',
|
||||
webp: false,
|
||||
};
|
||||
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
const filesystem = require('fs');
|
||||
const commonVariables = require('./webpack.configuration');
|
||||
const conf = commonVariables.configuration;
|
||||
const { merge } = require('webpack-merge');
|
||||
const common = require('./webpack.config.common.js');
|
||||
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const filesystem = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
|
||||
|
||||
const TerserPlugin = require('terser-webpack-plugin');
|
||||
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
|
||||
const ImageminPlugin = require('image-minimizer-webpack-plugin');
|
||||
const ImageSpritePlugin = require('@a2nt/image-sprite-webpack-plugin');
|
||||
|
||||
const UIInfo = require('./package.json');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
|
||||
console.log('WebP images: ' + conf['webp']);
|
||||
|
||||
const plugins = [
|
||||
let plugins = [
|
||||
new webpack.ProvidePlugin({
|
||||
$: 'jquery',
|
||||
jQuery: 'jquery',
|
||||
Popper: ['popper.js', 'default'],
|
||||
Util: 'exports-loader?Util!bootstrap/js/dist/util',
|
||||
Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
|
||||
Button: 'exports-loader?Button!bootstrap/js/dist/button',
|
||||
Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
|
||||
Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
|
||||
Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
|
||||
Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
|
||||
Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
|
||||
Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
|
||||
Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
|
||||
Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: JSON.stringify('production'),
|
||||
},
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: COMPRESS,
|
||||
minimize: true,
|
||||
debug: false,
|
||||
}),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: 'css/[name].css',
|
||||
//allChunks: true,
|
||||
}),
|
||||
/**/
|
||||
new HtmlWebpackPlugin({
|
||||
template: path.join(conf.APPDIR, conf.SRC, 'index.html'),
|
||||
new OptimizeCssAssetsPlugin({
|
||||
//assetNameRegExp: /\.optimize\.css$/g,
|
||||
cssProcessor: require('cssnano'),
|
||||
cssProcessorPluginOptions: {
|
||||
preset: ['default'],
|
||||
},
|
||||
cssProcessorOptions: {
|
||||
zindex: true,
|
||||
cssDeclarationSorter: true,
|
||||
reduceIdents: false,
|
||||
mergeIdents: true,
|
||||
mergeRules: true,
|
||||
mergeLonghand: true,
|
||||
discardUnused: true,
|
||||
discardOverridden: true,
|
||||
discardDuplicates: true,
|
||||
discardComments: {
|
||||
removeAll: true,
|
||||
},
|
||||
},
|
||||
canPrint: true,
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
UINAME: JSON.stringify(UIInfo.name),
|
||||
UIVERSION: JSON.stringify(UIInfo.version),
|
||||
UIAUTHOR: JSON.stringify(UIInfo.author),
|
||||
require('autoprefixer'),
|
||||
new ImageminPlugin({
|
||||
minimizerOptions: {
|
||||
// Lossless optimization with custom option
|
||||
// Feel free to experiment with options for better result for you
|
||||
plugins: [
|
||||
['gifsicle', { interlaced: true }],
|
||||
['jpegtran', { progressive: true }],
|
||||
['optipng', { optimizationLevel: 5 }],
|
||||
[
|
||||
'svgo',
|
||||
{
|
||||
plugins: [
|
||||
{
|
||||
removeViewBox: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
}),
|
||||
new ImageSpritePlugin({
|
||||
exclude: /exclude|original|default-|icons|sprite|svg|logo|favicon/,
|
||||
commentOrigin: false,
|
||||
compress: COMPRESS,
|
||||
extensions: ['png'],
|
||||
indent: '',
|
||||
log: true,
|
||||
//outputPath: path.join(__dirname, conf.APPDIR, conf.DIST),
|
||||
outputFilename: 'img/sprite-[hash].png',
|
||||
padding: 0,
|
||||
}),
|
||||
];
|
||||
|
||||
if (COMPRESS) {
|
||||
const indexPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'index.html');
|
||||
if (filesystem.existsSync(indexPath)) {
|
||||
plugins.push(
|
||||
new OptimizeCssAssetsPlugin({
|
||||
//assetNameRegExp: /\.optimize\.css$/g,
|
||||
cssProcessor: require('cssnano'),
|
||||
cssProcessorPluginOptions: {
|
||||
preset: ['default'],
|
||||
},
|
||||
cssProcessorOptions: {
|
||||
zindex: true,
|
||||
cssDeclarationSorter: true,
|
||||
reduceIdents: false,
|
||||
mergeIdents: true,
|
||||
mergeRules: true,
|
||||
mergeLonghand: true,
|
||||
discardUnused: true,
|
||||
discardOverridden: true,
|
||||
discardDuplicates: true,
|
||||
discardComments: {
|
||||
removeAll: true,
|
||||
},
|
||||
},
|
||||
canPrint: true,
|
||||
}),
|
||||
);
|
||||
plugins.push(require('autoprefixer'));
|
||||
|
||||
plugins.push(
|
||||
new ImageminPlugin({
|
||||
minimizerOptions: {
|
||||
// Lossless optimization with custom option
|
||||
// Feel free to experiment with options for better result for you
|
||||
plugins: [
|
||||
['gifsicle', { interlaced: true }],
|
||||
['jpegtran', { progressive: true }],
|
||||
['optipng', { optimizationLevel: 5 }],
|
||||
[
|
||||
'svgo',
|
||||
{
|
||||
plugins: [
|
||||
{
|
||||
removeViewBox: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
plugins.push(
|
||||
new ImageSpritePlugin({
|
||||
exclude: /exclude|original|default-|icons|sprite/,
|
||||
commentOrigin: false,
|
||||
compress: true,
|
||||
extensions: ['png'],
|
||||
indent: '',
|
||||
log: true,
|
||||
//outputPath: path.join(__dirname, conf.APPDIR, conf.DIST),
|
||||
outputFilename: 'img/sprite-[hash].png',
|
||||
padding: 0,
|
||||
new HtmlWebpackPlugin({
|
||||
publicPath: '',
|
||||
template: path.join(conf.APPDIR, conf.SRC, 'index.html'),
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
const includes = {};
|
||||
const faviconPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png');
|
||||
if (filesystem.existsSync(faviconPath)) {
|
||||
plugins.push(
|
||||
new FaviconsWebpackPlugin({
|
||||
title: 'Webpack App',
|
||||
logo: faviconPath,
|
||||
prefix: '/icons/',
|
||||
emitStats: false,
|
||||
persistentCache: true,
|
||||
inject: false,
|
||||
statsFilename: path.join(
|
||||
conf.APPDIR,
|
||||
conf.DIST,
|
||||
'icons',
|
||||
'iconstats.json',
|
||||
),
|
||||
icons: {
|
||||
android: true,
|
||||
appleIcon: true,
|
||||
appleStartup: true,
|
||||
coast: true,
|
||||
favicons: true,
|
||||
firefox: true,
|
||||
opengraph: true,
|
||||
twitter: true,
|
||||
yandex: true,
|
||||
windows: true,
|
||||
},
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
const _addAppFiles = (theme) => {
|
||||
const dirPath = path.resolve(__dirname, theme);
|
||||
const themeName = path.basename(theme);
|
||||
|
||||
if (filesystem.existsSync(path.join(dirPath, 'js', 'app.js'))) {
|
||||
includes['app'] = path.join(dirPath, 'js', 'app.js');
|
||||
} else if (filesystem.existsSync(path.join(dirPath, 'scss', 'app.scss'))) {
|
||||
includes['app'] = path.join(dirPath, 'scss', 'app.scss');
|
||||
// add themes favicons
|
||||
commonVariables.themes.forEach((theme) => {
|
||||
const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png');
|
||||
if (filesystem.existsSync(faviconPath)) {
|
||||
plugins.push(
|
||||
new FaviconsWebpackPlugin({
|
||||
title: 'Webpack App',
|
||||
logo: faviconPath,
|
||||
prefix: '/' + theme + '-icons/',
|
||||
emitStats: false,
|
||||
persistentCache: true,
|
||||
inject: false,
|
||||
statsFilename: path.join(
|
||||
conf.APPDIR,
|
||||
conf.DIST,
|
||||
theme + '-icons',
|
||||
'iconstats.json',
|
||||
),
|
||||
icons: {
|
||||
android: true,
|
||||
appleIcon: true,
|
||||
appleStartup: true,
|
||||
coast: true,
|
||||
favicons: true,
|
||||
firefox: true,
|
||||
opengraph: true,
|
||||
twitter: true,
|
||||
yandex: true,
|
||||
windows: true,
|
||||
},
|
||||
}),
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
const _getAllFilesFromFolder = function (dir, includeSubFolders = true) {
|
||||
const dirPath = path.resolve(__dirname, dir);
|
||||
let results = [];
|
||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
|
||||
.BundleAnalyzerPlugin;
|
||||
plugins.push(
|
||||
new BundleAnalyzerPlugin({
|
||||
analyzerMode: 'static',
|
||||
}),
|
||||
);
|
||||
|
||||
filesystem.readdirSync(dirPath).forEach((file) => {
|
||||
if (file.charAt(0) === '_') {
|
||||
return;
|
||||
}
|
||||
|
||||
const filePath = path.join(dirPath, file);
|
||||
const stat = filesystem.statSync(filePath);
|
||||
|
||||
if (stat && stat.isDirectory() && includeSubFolders) {
|
||||
results = results.concat(
|
||||
_getAllFilesFromFolder(filePath, includeSubFolders),
|
||||
);
|
||||
} else {
|
||||
results.push(filePath);
|
||||
}
|
||||
});
|
||||
|
||||
return results;
|
||||
};
|
||||
|
||||
// add page specific scripts
|
||||
const typesJSPath = path.join(theme, 'js/types');
|
||||
if (filesystem.existsSync(typesJSPath)) {
|
||||
const pageScripts = _getAllFilesFromFolder(typesJSPath, true);
|
||||
pageScripts.forEach((file) => {
|
||||
includes[`app_${path.basename(file, '.js')}`] = file;
|
||||
});
|
||||
}
|
||||
|
||||
// add page specific scss
|
||||
const typesSCSSPath = path.join(theme, 'scss/types');
|
||||
if (filesystem.existsSync(typesSCSSPath)) {
|
||||
const scssIncludes = _getAllFilesFromFolder(typesSCSSPath, true);
|
||||
scssIncludes.forEach((file) => {
|
||||
includes[`app_${path.basename(file, '.scss')}`] = file;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
_addAppFiles(path.join(conf.APPDIR, conf.SRC));
|
||||
|
||||
module.exports = {
|
||||
entry: includes,
|
||||
recordsPath: path.join(__dirname, conf.APPDIR, conf.DIST, 'records.json'),
|
||||
const cfg = merge(common, {
|
||||
mode: 'production',
|
||||
cache: {
|
||||
type: 'filesystem',
|
||||
},
|
||||
output: {
|
||||
publicPath: path.join(conf.APPDIR),
|
||||
path: path.join(__dirname, conf.APPDIR, conf.DIST),
|
||||
filename: path.join('js', '[name].js'),
|
||||
},
|
||||
externals: {
|
||||
jquery: 'jQuery',
|
||||
},
|
||||
recordsPath: path.join(__dirname, conf.APPDIR, conf.DIST, 'records.json'),
|
||||
optimization: {
|
||||
//removeAvailableModules: false,
|
||||
//realContentHash: false,
|
||||
splitChunks: {
|
||||
name: 'vendor',
|
||||
minChunks: 2,
|
||||
},
|
||||
concatenateModules: true,
|
||||
concatenateModules: true, //ModuleConcatenationPlugin
|
||||
minimizer: [
|
||||
new TerserPlugin({
|
||||
terserOptions: {
|
||||
module: false,
|
||||
parse: {
|
||||
// we want terser to parse ecma 8 code. However, we don't want it
|
||||
// to apply any minfication steps that turns valid ecma 5 code
|
||||
|
|
@ -211,11 +231,14 @@ module.exports = {
|
|||
// https://github.com/mishoo/UglifyJS2/issues/2011
|
||||
comparisons: false,
|
||||
},
|
||||
keep_fnames: true,
|
||||
keep_classnames: true,
|
||||
|
||||
mangle: {
|
||||
safari10: true,
|
||||
/*keep_fnames: true,
|
||||
keep_fnames: true,
|
||||
keep_classnames: true,
|
||||
reserved: ['$', 'jQuery', 'jquery'],*/
|
||||
reserved: ['$', 'jQuery', 'jquery'],
|
||||
},
|
||||
output: {
|
||||
ecma: 5,
|
||||
|
|
@ -231,6 +254,13 @@ module.exports = {
|
|||
}),
|
||||
],
|
||||
},
|
||||
|
||||
output: {
|
||||
publicPath: path.join(conf.APPDIR, conf.DIST),
|
||||
path: path.join(__dirname, conf.APPDIR, conf.DIST),
|
||||
filename: path.join('js', '[name].js'),
|
||||
},
|
||||
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
|
|
@ -242,16 +272,10 @@ module.exports = {
|
|||
presets: ['@babel/preset-env'], //Preset used for env setup
|
||||
plugins: [['@babel/transform-react-jsx']],
|
||||
cacheDirectory: true,
|
||||
cacheCompression: false,
|
||||
cacheCompression: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.worker\.js$/,
|
||||
use: {
|
||||
loader: 'worker-loader',
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.s?css$/,
|
||||
use: [
|
||||
|
|
@ -325,37 +349,9 @@ module.exports = {
|
|||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
modules: [
|
||||
path.resolve(__dirname, 'src'),
|
||||
path.resolve(__dirname, 'node_modules'),
|
||||
],
|
||||
alias: {
|
||||
jquery: require.resolve('jquery'),
|
||||
jQuery: require.resolve('jquery'),
|
||||
},
|
||||
fallback: { url: false, events: false },
|
||||
},
|
||||
plugins: plugins,
|
||||
|
||||
devServer: {
|
||||
host: '127.0.0.1',
|
||||
port: 8001,
|
||||
historyApiFallback: true,
|
||||
hot: false,
|
||||
/*clientLogLevel: 'info',
|
||||
contentBase: [
|
||||
path.resolve(__dirname, 'src'),
|
||||
path.resolve(__dirname, 'node_modules'),
|
||||
path.resolve(__dirname, 'dist'),
|
||||
],*/
|
||||
//watchContentBase: true,
|
||||
overlay: {
|
||||
warnings: true,
|
||||
errors: true,
|
||||
},
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
},
|
||||
},
|
||||
};
|
||||
plugins: plugins,
|
||||
});
|
||||
|
||||
console.log(cfg);
|
||||
module.exports = cfg;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,154 @@
|
|||
/*
|
||||
* Development assets generation
|
||||
*/
|
||||
|
||||
const COMPRESS = false;
|
||||
|
||||
const path = require('path');
|
||||
//const autoprefixer = require('autoprefixer');
|
||||
const webpack = require('webpack');
|
||||
const { merge } = require('webpack-merge');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
|
||||
const common = require('./webpack.config.common.js');
|
||||
const commonVariables = require('./webpack.configuration');
|
||||
const conf = commonVariables.configuration;
|
||||
|
||||
const IP = process.env.IP || conf.HOSTNAME;
|
||||
const PORT = process.env.PORT || conf.PORT;
|
||||
|
||||
const UIInfo = require('./node_modules/@a2nt/ss-bootstrap-ui-webpack-boilerplate/package.json');
|
||||
const UIMetaInfo = require('./node_modules/@a2nt/meta-lightbox/package.json');
|
||||
|
||||
const config = merge(common, {
|
||||
mode: 'development',
|
||||
|
||||
entry: {
|
||||
hot: [
|
||||
'react-hot-loader/patch',
|
||||
'webpack-dev-server/client?https://' + conf.HOSTNAME + ':' + conf.PORT,
|
||||
'webpack/hot/only-dev-server',
|
||||
],
|
||||
},
|
||||
|
||||
output: {
|
||||
path: path.join(__dirname),
|
||||
filename: '[name].js',
|
||||
// necessary for HMR to know where to load the hot update chunks
|
||||
publicPath: 'https://' + conf.HOSTNAME + ':' + conf.PORT + '/',
|
||||
},
|
||||
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.jsx?$/,
|
||||
//exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: ['@babel/preset-env'], //Preset used for env setup
|
||||
plugins: [['@babel/transform-react-jsx']],
|
||||
cacheDirectory: true,
|
||||
cacheCompression: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.s?css$/,
|
||||
use: [
|
||||
{
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
},
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: !COMPRESS,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'resolve-url-loader',
|
||||
},
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sourceMap: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'url-loader',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(gif|png|jpg|jpeg|ttf|otf|eot|svg|webp|woff(2)?)$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name(file) {
|
||||
return 'public/[path][name].[ext]';
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new webpack.ProvidePlugin({
|
||||
$: 'jquery',
|
||||
jQuery: 'jquery',
|
||||
'window.jQuery': 'jquery',
|
||||
Popper: ['popper.js', 'default'],
|
||||
Util: 'exports-loader?Util!bootstrap/js/dist/util',
|
||||
Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
|
||||
Button: 'exports-loader?Button!bootstrap/js/dist/button',
|
||||
Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
|
||||
Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
|
||||
Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
|
||||
Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
|
||||
Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
|
||||
Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
|
||||
Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
|
||||
Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',
|
||||
}),
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
UINAME: JSON.stringify(UIInfo.name),
|
||||
UIVERSION: JSON.stringify(UIInfo.version),
|
||||
UIAUTHOR: JSON.stringify(UIInfo.author),
|
||||
UIMetaNAME: JSON.stringify(UIMetaInfo.name),
|
||||
UIMetaVersion: JSON.stringify(UIMetaInfo.version),
|
||||
}),
|
||||
],
|
||||
|
||||
devServer: {
|
||||
host: IP,
|
||||
port: PORT,
|
||||
historyApiFallback: true,
|
||||
//hot: true,
|
||||
/*clientLogLevel: 'info',
|
||||
disableHostCheck: true,
|
||||
contentBase: [
|
||||
path.resolve(__dirname, 'public'),
|
||||
path.resolve(__dirname, 'public', 'resources'),
|
||||
path.resolve(__dirname, 'public', 'resources', conf.APPDIR, conf.DIST),
|
||||
'node_modules',
|
||||
],*/
|
||||
//watchContentBase: true,
|
||||
overlay: {
|
||||
warnings: true,
|
||||
errors: true,
|
||||
},
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = config;
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
/*
|
||||
* Load webpack configuration from app/_config/webpack.yml
|
||||
*/
|
||||
|
||||
const path = require('path');
|
||||
const filesystem = require('fs');
|
||||
const fs = require('fs');
|
||||
const yaml = require('js-yaml');
|
||||
|
||||
const conf = yaml.safeLoad(
|
||||
fs.readFileSync(path.join(__dirname, '/webpack.yml'), 'utf8'),
|
||||
);
|
||||
|
||||
let themes = [];
|
||||
// add themes
|
||||
if (conf['Site\\Templates\\WebpackTemplateProvider'].THEMESDIR) {
|
||||
const themeDir = conf['Site\\Templates\\WebpackTemplateProvider'].THEMESDIR;
|
||||
const dir = path.resolve(__dirname, themeDir);
|
||||
|
||||
if (filesystem.existsSync(dir)) {
|
||||
filesystem.readdirSync(dir).forEach((file) => {
|
||||
filePath = path.join(themeDir, file);
|
||||
const stat = filesystem.statSync(filePath);
|
||||
|
||||
if (stat && stat.isDirectory()) {
|
||||
themes.push(filePath);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
configuration: conf['Site\\Templates\\WebpackTemplateProvider'],
|
||||
themes: themes,
|
||||
};
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
# that's important to place this file into /app/_config/webpack.yml
|
||||
# with all configuration variables presented
|
||||
# Cuz WebPack compiling script use it to set configuration
|
||||
|
||||
Site\Templates\WebpackTemplateProvider:
|
||||
APPDIR: ./
|
||||
THEMESDIR: themes
|
||||
HOSTNAME: localhost
|
||||
PORT: 3000
|
||||
SRC: src
|
||||
DIST: dist
|
||||
TYPESJS: src/js/types
|
||||
TYPESSCSS: src/scss/types
|
||||
webp: false
|
||||
Loading…
Reference in New Issue