From cd00647c4d1d108bb2a2d85bae4d07ea44b5f34f Mon Sep 17 00:00:00 2001 From: Tony Air Date: Fri, 20 Dec 2019 07:12:13 +0700 Subject: [PATCH] IMPROVEMENT: ui.multislider --- dist/index.html | 2 +- dist/js/app.js | 2 +- dist/js/app.js.map | 2 +- package.json | 2 +- src/index.html | 2 +- src/js/_components/_ui.multislider.js | 44 ++++++++++++++-------- src/js/_main.js | 4 ++ src/scss/_components/_ui.multislider.scss | 45 ++++++++++++++++++++--- 8 files changed, 78 insertions(+), 25 deletions(-) diff --git a/dist/index.html b/dist/index.html index c661954..92841d6 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,4 +1,4 @@ -Webpack Bootstrap 4 UI Demo

Flyout Demo

Lipsum .... .... ....

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

Content Demo

Quick start

  1. Clone quick start repository

    git clone https://github.com/a2nt/webpack-bootstrap-ui-kit-quick-start.git

  2. Install npm packages

    +Webpack Bootstrap 4 UI Demo
     Flyout Demo
    Lipsum .... .... ....
    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
    Content Demo
     Quick start
    1. Clone quick start repository
      git clone https://github.com/a2nt/webpack-bootstrap-ui-kit-quick-start.git
    2. Install npm packages
       				cd ./webpack-bootstrap-ui-kit-quick-start.git
 				npm install
 			
    3. Edit ./src files
    4. Start development server at https://127.0.0.1:8001/:
      yarn start
      Compile:
      yarn build
     Header #2 
    Test ImageContent Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    1. First
      • First
      • Second
        1. First
        2. Second
        3. Third
        • First
        • Second
        • Third
      • Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    2. {paragraph} Second
      {paragraph} Second #2
    3. Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Table #1: Default
    #1#2#3
    #1-1#1-2#1-3
    #2-1#2-2#2-3
    #3-1#3-2#3-3
    Content Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Table #2: Border-less
    #1#2#3
    #1-1#1-2#1-3
    #2-1#2-2#2-3
    #3-1#3-2#3-3
    Content Header
    Some content ...
    Some kind image
    Some kind image
    Some kind image
    Some kind image
    Accordion demo
    Some content ...
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    Find Location
    Use _consts.js to change Google Maps to Mapbox.
    Office #1
    17 Lakeside Drive
    U
    Get Directions »
    Office #2
    Flower Hill Cemetery
    N
    Get Directions »
    Office #3
    555 Phoenix Road
    U
    Get Directions »
    Office #4
    15 East Hadley Road
    U
    Get Directions »
    
\ No newline at end of file
diff --git a/dist/js/app.js b/dist/js/app.js
index 22b02e4..03c38a8 100644
--- a/dist/js/app.js
+++ b/dist/js/app.js
@@ -1,3 +1,3 @@
 /*! For license information please see app.js.LICENSE */
-!function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(i,r,function(t){return e[t]}.bind(null,r));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/srv/dist/repositories/webpack-bootstrap-ui-kit/dist",n(n.s="./src/js/app.js")}({"./node_modules/@a2nt/meta-lightbox/src/js/meta-lightbox.js":function(e,t){!function(e,t,n){var i="metaLightbox",r={effect:"fade",theme:"default",keyboardNav:!0,clickOverlayToClose:!0,onInit:function(){},beforeShowLightbox:function(){},afterShowLightbox:function(e){},beforeHideLightbox:function(){},afterHideLightbox:function(){},onPrev:function(e){},onNext:function(e){},errorMessage:"The requested content cannot be loaded. Please try again later."};function o(t,n){this.options=e.extend({},r,n),this._defaults=r,this._name=i,this.init()}o.prototype={init:function(){var t=this,i=e("html");this.ajaxLoaded=!1,n.MetaLightbox=this,i.hasClass("meta-lightbox-notouch")||i.addClass("meta-lightbox-notouch"),"ontouchstart"in n&&i.removeClass("meta-lightbox-notouch"),e(n).on("click",'[data-toggle="lightbox"],[data-lightbox-gallery]',(function(e){return e.preventDefault(),e.stopPropagation(),t.showLightbox(this),!1})),this.options.keyboardNav&&e("body").off("keyup").on("keyup",n=>{var i=n.keyCode?n.keyCode:n.which;27===i&&t.destructLightbox(),37===i&&e(".meta-lightbox-prev").trigger("click"),39===i&&e(".meta-lightbox-next").trigger("click")}),this.options.onInit.call(this)},showLightbox:function(t){this.el=t,this.$el=e(this.el);var n,i,r,o,a=this;this.options.beforeShowLightbox.call(this),(n=this.constructLightbox())&&(i=n.find(".meta-lightbox-content"))&&(r=this.$el,e("body").addClass(`meta-lightbox-body-effect-${this.options.effect}`),this.processContent(i,r),this.$el.data("lightbox-gallery")&&(1===(o=e(`[data-lightbox-gallery="${this.$el.data("lightbox-gallery")}"]`)).length?e(".meta-lightbox-nav").hide():e(".meta-lightbox-nav").show(),e(".meta-lightbox-prev").off("click").on("click",(function(t){t.preventDefault();var n=o.index(r);r=o.eq(n-1),e(r).length||(r=o.last()),a.processContent(i,r),a.options.onPrev.call(this,[r])})),e(".meta-lightbox-next").off("click").on("click",(function(t){t.preventDefault();var n=o.index(r);r=o.eq(n+1),e(r).length||(r=o.first()),a.processContent(i,r),a.options.onNext.call(this,[r])}))),setTimeout((function(){n.addClass("meta-lightbox-open"),a.options.afterShowLightbox.call(this,[n])}),1))},processContent:function(i,r){var o,a,s,l,c,u,d=this;href=r.attr("href"),href||(href=r.data("href")),i.html("").addClass("meta-lightbox-loading"),this.isHidpi()&&r.data("lightbox-hidpi")&&(href=r.data("lightbox-hidpi")),null!=href.match(/\.(jpeg|jpg|gif|png)$/i)?((o=e("",{src:href})).on("load",()=>{var n=e('
    '),r=e(".meta-lightbox-content"),a=e('');a.append(o),n.append(a),n.css({"line-height":`${r.height()}px`,height:`${r.height()}px`}),e(t).resize(()=>{n.css({"line-height":`${r.height()}px`,height:`${r.height()}px`})}),void 0!==a.zoom&&a.zoom(),i.html(n).removeClass("meta-lightbox-loading"),d.contentLoaded()}),o.on("error",()=>{var t=e(`
    ${d.options.errorMessage}
    `);i.html(t).removeClass("meta-lightbox-loading"),d.contentLoaded()}),r.data("title")?d.setTitle(r.data("title")):r.attr("title")?d.setTitle(r.attr("title")):e(".meta-lightbox-title-wrap").html(""),"function"==typeof ga&&ga("send","event","meta","Image Click",href)):(a=href.match(/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/))?(s="",l="meta-lightbox-video","youtube"==a[1]&&(s=`https://www.youtube.com/embed/${a[4]}`,l="meta-lightbox-youtube"),"youtu"==a[1]&&(s=`https://www.youtube.com/embed/${a[3]}`,l="meta-lightbox-youtube"),"youtube-nocookie"==a[1]&&(s=`https://www.youtube-nocookie.com/embed/${a[4]}`,l="nivo-lightbox-youtube"),"vimeo"==a[1]&&(s=`https://player.vimeo.com/video/${a[3]}`,l="meta-lightbox-vimeo"),s&&(c=e("