vue-tinybox
Advanced tools
Comparing version 0.2.0 to 0.3.0
| # CHANGELOG | ||
| ## 0.3.0 | ||
| ### 🛑 BREAKING | ||
| - ".min.js" version is removed in favor of ".umd.js" | ||
| ### Improved | ||
| - package size went down ~170 bytes | ||
| - build configs are more readable now | ||
| - source code is more readable now | ||
| ## 0.2.0 | ||
| #### New | ||
| ### New | ||
@@ -12,3 +24,3 @@ - slide animation when navigating through photos (#3) | ||
| #### Fixed | ||
| ### Fixed | ||
@@ -22,3 +34,3 @@ - images weren't aligned vertically under some conditions (#8) | ||
| #### New | ||
| ### New | ||
@@ -25,0 +37,0 @@ - ability to open and close lightbox |
@@ -1,396 +0,1 @@ | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| var script = { | ||
| name: "Tinybox", | ||
| props: { | ||
| /** | ||
| * List of images to display in the lightbox | ||
| * | ||
| * Any array item can be either a string containing the image URL or an object. | ||
| * The object fields are the following: | ||
| * - `src` - the image URL | ||
| * - `thumbnail` - the thumbnail (a smaller version of the image) URL | ||
| * - `alt` - the alt text to be displayed if the image failed to load (or by screenreaders) | ||
| */ | ||
| images: { | ||
| type: Array, | ||
| default: function _default() { | ||
| return []; | ||
| } | ||
| }, | ||
| /** | ||
| * The index of the image to be opened in the lightbox | ||
| */ | ||
| index: { | ||
| type: Number, | ||
| default: null | ||
| }, | ||
| /** | ||
| * Indicates whether the images carousel should loop around itself | ||
| */ | ||
| loop: { | ||
| type: Boolean, | ||
| default: false | ||
| } | ||
| }, | ||
| data: function data() { | ||
| return { | ||
| cIndex: null, | ||
| swipeFinished: false, | ||
| swipeX: null, | ||
| switchFrom: null, | ||
| transitionClass: "" | ||
| }; | ||
| }, | ||
| computed: { | ||
| _images: function _images() { | ||
| var result = []; | ||
| for (var i = 0; i < this.images.length; i++) { | ||
| result.push(typeof this.images[i] === "string" ? { | ||
| src: this.images[i] | ||
| } : this.images[i]); | ||
| } | ||
| return result; | ||
| }, | ||
| current: function current() { | ||
| return this._images[this.cIndex] || { | ||
| src: "" | ||
| }; | ||
| }, | ||
| open: function open() { | ||
| return this.index !== null; | ||
| }, | ||
| hasPrev: function hasPrev() { | ||
| return this.cIndex > 0 || this.loop; | ||
| }, | ||
| hasNext: function hasNext() { | ||
| return this.cIndex < this._images.length - 1 || this.loop; | ||
| } | ||
| }, | ||
| watch: { | ||
| index: function index(idx) { | ||
| this.goto(idx); | ||
| }, | ||
| open: function open() { | ||
| this.focusContent(); | ||
| } | ||
| }, | ||
| created: function created() { | ||
| this.goto(this.index); | ||
| }, | ||
| methods: { | ||
| /** | ||
| * @event close - the close button has been pressed. The current index is sent as payload | ||
| */ | ||
| close: function close() { | ||
| this.$emit("close", this.cIndex); | ||
| }, | ||
| prev: function prev() { | ||
| if (this.hasPrev) { | ||
| this.goto(this.cIndex - 1); | ||
| } | ||
| }, | ||
| next: function next() { | ||
| if (this.hasNext) { | ||
| this.goto(this.cIndex + 1); | ||
| } | ||
| }, | ||
| goto: function goto(index) { | ||
| this.switchFrom = this.current; | ||
| var transition = ""; | ||
| if (index !== null) { | ||
| var newIndex = index; | ||
| if (newIndex >= this._images.length) { | ||
| newIndex = 0; | ||
| } else if (newIndex < 0) { | ||
| newIndex = this._images.length - 1; | ||
| } | ||
| if (this.cIndex !== null) { | ||
| transition = this.cIndex < newIndex ? "tinybox__content__current__image--from-right" : "tinybox__content__current__image--from-left"; | ||
| } | ||
| } | ||
| this.transitionClass = transition; | ||
| this.cIndex = index; | ||
| }, | ||
| swipeStart: function swipeStart(e) { | ||
| if (e.changedTouches.length === 1) { | ||
| this.swipeX = e.changedTouches[0].screenX; | ||
| } | ||
| }, | ||
| swipe: function swipe(e) { | ||
| if (!this.swipeFinished && e.changedTouches.length === 1) { | ||
| var newSwipeX = e.changedTouches[0].screenX; | ||
| if (newSwipeX - this.swipeX >= 50) { | ||
| this.prev(); | ||
| this.swipeFinished = true; | ||
| } else if (this.swipeX - newSwipeX >= 50) { | ||
| this.next(); | ||
| this.swipeFinished = true; | ||
| } | ||
| } | ||
| }, | ||
| swipeEnd: function swipeEnd() { | ||
| this.swipeX = null; | ||
| this.swipeFinished = false; | ||
| }, | ||
| focusContent: function focusContent() { | ||
| if (this.open) { | ||
| this.$refs.content.focus(); | ||
| } else { | ||
| this.$refs.content.blur(); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier | ||
| /* server only */ | ||
| , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { | ||
| if (typeof shadowMode !== 'boolean') { | ||
| createInjectorSSR = createInjector; | ||
| createInjector = shadowMode; | ||
| shadowMode = false; | ||
| } // Vue.extend constructor export interop. | ||
| var options = typeof script === 'function' ? script.options : script; // render functions | ||
| if (template && template.render) { | ||
| options.render = template.render; | ||
| options.staticRenderFns = template.staticRenderFns; | ||
| options._compiled = true; // functional template | ||
| if (isFunctionalTemplate) { | ||
| options.functional = true; | ||
| } | ||
| } // scopedId | ||
| if (scopeId) { | ||
| options._scopeId = scopeId; | ||
| } | ||
| var hook; | ||
| if (moduleIdentifier) { | ||
| // server build | ||
| hook = function hook(context) { | ||
| // 2.3 injection | ||
| context = context || // cached call | ||
| this.$vnode && this.$vnode.ssrContext || // stateful | ||
| this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional | ||
| // 2.2 with runInNewContext: true | ||
| if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { | ||
| context = __VUE_SSR_CONTEXT__; | ||
| } // inject component styles | ||
| if (style) { | ||
| style.call(this, createInjectorSSR(context)); | ||
| } // register component module identifier for async chunk inference | ||
| if (context && context._registeredComponents) { | ||
| context._registeredComponents.add(moduleIdentifier); | ||
| } | ||
| }; // used by ssr in case component is cached and beforeCreate | ||
| // never gets called | ||
| options._ssrRegister = hook; | ||
| } else if (style) { | ||
| hook = shadowMode ? function () { | ||
| style.call(this, createInjectorShadow(this.$root.$options.shadowRoot)); | ||
| } : function (context) { | ||
| style.call(this, createInjector(context)); | ||
| }; | ||
| } | ||
| if (hook) { | ||
| if (options.functional) { | ||
| // register for functional component in vue file | ||
| var originalRender = options.render; | ||
| options.render = function renderWithStyleInjection(h, context) { | ||
| hook.call(context); | ||
| return originalRender(h, context); | ||
| }; | ||
| } else { | ||
| // inject component registration as beforeCreate hook | ||
| var existing = options.beforeCreate; | ||
| options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; | ||
| } | ||
| } | ||
| return script; | ||
| } | ||
| var normalizeComponent_1 = normalizeComponent; | ||
| var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()); | ||
| function createInjector(context) { | ||
| return function (id, style) { | ||
| return addStyle(id, style); | ||
| }; | ||
| } | ||
| var HEAD; | ||
| var styles = {}; | ||
| function addStyle(id, css) { | ||
| var group = isOldIE ? css.media || 'default' : id; | ||
| var style = styles[group] || (styles[group] = { | ||
| ids: new Set(), | ||
| styles: [] | ||
| }); | ||
| if (!style.ids.has(id)) { | ||
| style.ids.add(id); | ||
| var code = css.source; | ||
| if (css.map) { | ||
| // https://developer.chrome.com/devtools/docs/javascript-debugging | ||
| // this makes source maps inside style tags work properly in Chrome | ||
| code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875 | ||
| code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */'; | ||
| } | ||
| if (!style.element) { | ||
| style.element = document.createElement('style'); | ||
| style.element.type = 'text/css'; | ||
| if (css.media) style.element.setAttribute('media', css.media); | ||
| if (HEAD === undefined) { | ||
| HEAD = document.head || document.getElementsByTagName('head')[0]; | ||
| } | ||
| HEAD.appendChild(style.element); | ||
| } | ||
| if ('styleSheet' in style.element) { | ||
| style.styles.push(code); | ||
| style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n'); | ||
| } else { | ||
| var index = style.ids.size - 1; | ||
| var textNode = document.createTextNode(code); | ||
| var nodes = style.element.childNodes; | ||
| if (nodes[index]) style.element.removeChild(nodes[index]); | ||
| if (nodes.length) style.element.insertBefore(textNode, nodes[index]);else style.element.appendChild(textNode); | ||
| } | ||
| } | ||
| } | ||
| var browser = createInjector; | ||
| /* script */ | ||
| const __vue_script__ = script; | ||
| /* template */ | ||
| var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"tinybox",class:{'tinybox--open': _vm.open},on:{"click":_vm.close,"wheel":function($event){$event.preventDefault();},"touchmove":function($event){$event.preventDefault();}}},[_c('div',{ref:"content",staticClass:"tinybox__content",attrs:{"tabindex":"0"},on:{"blur":_vm.focusContent,"touchstart":_vm.swipeStart,"touchmove":_vm.swipe,"touchend":_vm.swipeEnd,"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.prev($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"right",39,$event.key,["Right","ArrowRight"])){ return null; }if('button' in $event && $event.button !== 2){ return null; }return _vm.next($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.close($event)}]}},[_c('div',{staticClass:"tinybox__content__current",style:(("background-image:url('" + (_vm.switchFrom.src) + "')"))},[_c('img',{staticClass:"tinybox__content__current__image",class:_vm.transitionClass,attrs:{"src":_vm.current.src,"alt":_vm.current.alt || ''},on:{"click":function($event){$event.stopPropagation();return _vm.next($event)},"animationend":function($event){_vm.transitionClass = '';}}})]),(_vm.hasPrev)?_c('div',{staticClass:"tinybox__content__control tinybox__content__control--prev",on:{"click":function($event){$event.stopPropagation();return _vm.prev($event)}}}):_vm._e(),(_vm.hasNext)?_c('div',{staticClass:"tinybox__content__control tinybox__content__control--next",on:{"click":function($event){$event.stopPropagation();return _vm.next($event)}}}):_vm._e(),_c('div',{staticClass:"tinybox__content__control tinybox__content__control--close",on:{"click":function($event){$event.stopPropagation();return _vm.close($event)}}})]),_c('div',{staticClass:"tinybox__thumbnails"},_vm._l((_vm._images),function(img,i){return _c('div',{key:i,staticClass:"tinybox__thumbnails__item",class:{'tinybox__thumbnails__item--active': _vm.cIndex === i},on:{"click":function($event){$event.stopPropagation();return _vm.goto(i)}}},[_c('img',{staticClass:"tinybox__thumbnails__item__image",attrs:{"src":img.thumbnail || img.src,"alt":img.alt || ''}})])}),0)])}; | ||
| var __vue_staticRenderFns__ = []; | ||
| /* style */ | ||
| const __vue_inject_styles__ = function (inject) { | ||
| if (!inject) return | ||
| inject("data-v-832179e2_0", { source: ".tinybox[data-v-832179e2]{background:rgba(0,0,0,.9);height:100%;left:0;opacity:0;outline:0;pointer-events:none;position:fixed;right:0;text-align:center;top:0;transition:opacity .3s ease;z-index:2000}.tinybox--open[data-v-832179e2]{opacity:1;pointer-events:initial}.tinybox__content[data-v-832179e2]{height:84vh;position:absolute;width:100vw}.tinybox__content[data-v-832179e2]:focus{outline:0}.tinybox__content[data-v-832179e2]::before{content:\"\";display:inline-block;height:84vh;vertical-align:middle}.tinybox__content__current[data-v-832179e2]{background-size:cover;display:inline-block;vertical-align:middle}.tinybox__content__current__image[data-v-832179e2]{border:none;cursor:pointer;display:inline-block;float:none;height:auto;margin:0;max-width:82.3vw;max-height:84vh;position:relative;vertical-align:middle;width:auto;animation-duration:.3s;animation-direction:normal;animation-iteration-count:1;animation-timing-function:ease}.tinybox__content__current__image--from-left[data-v-832179e2]{animation-name:left-right-data-v-832179e2}.tinybox__content__current__image--from-right[data-v-832179e2]{animation-name:right-left-data-v-832179e2}@keyframes left-right-data-v-832179e2{from{opacity:0;transform:translateX(-80px)}to{opacity:1;transform:translateX(0)}}@keyframes right-left-data-v-832179e2{from{opacity:0;transform:translateX(80px)}to{opacity:1;transform:translateX(0)}}.tinybox__content__control[data-v-832179e2]{background-size:24px;background-repeat:no-repeat;background-position:center;cursor:pointer;opacity:.5;position:absolute;top:0;transition:opacity .3s;width:4em}.tinybox__content__control[data-v-832179e2]:hover{opacity:1}.tinybox__content__control--prev[data-v-832179e2]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjE3LjkgMjU2IDEyNy4xLTEyN2M5LjQtOS40IDkuNC0yNC42IDAtMzMuOS05LjQtOS40LTI0LjYtOS4zLTM0IDBsLTE0NCAxNDMuOWMtOS4xIDkuMS05LjMgMjMuNy0uNyAzMy4xbDE0NC42IDE0NC45YzQuNyA0LjcgMTAuOSA3IDE3IDdzMTIuMy0yLjMgMTctN2M5LjQtOS40IDkuNC0yNC42IDAtMzMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);bottom:0;left:0}.tinybox__content__control--next[data-v-832179e2]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjk0LjEgMjU2LTEyNy4xLTEyN2MtOS40LTkuNC05LjQtMjQuNiAwLTMzLjlzMjQuNi05LjMgMzQgMGwxNDQgMTQzLjljOS4xIDkuMSA5LjMgMjMuNy43IDMzLjFsLTE0NC42IDE0NC45Yy00LjcgNC43LTEwLjkgNy0xNyA3cy0xMi4zLTIuMy0xNy03Yy05LjQtOS40LTkuNC0yNC42IDAtMzMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);bottom:0;right:0}.tinybox__content__control--close[data-v-832179e2]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yNzguNiAyNTYgNjguMi02OC4yYzYuMi02LjIgNi4yLTE2LjQgMC0yMi42cy0xNi40LTYuMi0yMi42IDBsLTY4LjIgNjguMi02OC4yLTY4LjJjLTYuMi02LjItMTYuNC02LjItMjIuNiAwLTMuMSAzLjEtNC43IDcuMi00LjcgMTEuM3MxLjYgOC4yIDQuNyAxMS4zbDY4LjIgNjguMi02OC4yIDY4LjJjLTMuMSAzLjEtNC43IDcuMi00LjcgMTEuM3MxLjYgOC4yIDQuNyAxMS4zYzYuMiA2LjIgMTYuNCA2LjIgMjIuNiAwbDY4LjItNjguMiA2OC4yIDY4LjJjNi4yIDYuMiAxNi40IDYuMiAyMi42IDBzNi4yLTE2LjQgMC0yMi42eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);height:2.6em;right:0}.tinybox__thumbnails[data-v-832179e2]{bottom:0;left:0;line-height:0;padding:0 1vh;position:absolute;right:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.tinybox__thumbnails__item[data-v-832179e2]{background-color:#222;cursor:pointer;display:inline-block;height:10vh;overflow:hidden;margin:2vh 1vh;position:relative;width:10vh}.tinybox__thumbnails__item--active .tinybox__thumbnails__item__image[data-v-832179e2]{opacity:.3}.tinybox__thumbnails__item__image[data-v-832179e2]{display:inline-block;height:100%;left:50%;position:absolute;top:0;transform:translateX(-50%);vertical-align:middle;width:auto}", map: undefined, media: undefined }); | ||
| }; | ||
| /* scoped */ | ||
| const __vue_scope_id__ = "data-v-832179e2"; | ||
| /* module identifier */ | ||
| const __vue_module_identifier__ = undefined; | ||
| /* functional template */ | ||
| const __vue_is_functional_template__ = false; | ||
| /* style inject SSR */ | ||
| var Tinybox = normalizeComponent_1( | ||
| { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, | ||
| __vue_inject_styles__, | ||
| __vue_script__, | ||
| __vue_scope_id__, | ||
| __vue_is_functional_template__, | ||
| __vue_module_identifier__, | ||
| browser, | ||
| undefined | ||
| ); | ||
| export default Tinybox; | ||
| var t={name:"Tinybox",props:{images:{type:Array,default:function(){return[]}},index:{type:Number,default:null},loop:{type:Boolean,default:!1}},data:function(){return{cIndex:null,swipeFinished:!1,swipeX:null,switchFrom:null,transitionClass:""}},computed:{_images:function(){for(var t=[],e=0;e<this.images.length;e++)t.push("string"==typeof this.images[e]?{src:this.images[e]}:this.images[e]);return t},current:function(){return this._images[this.cIndex]||{src:""}},open:function(){return null!==this.index},hasPrev:function(){return this.cIndex>0||this.loop},hasNext:function(){return this.cIndex<this._images.length-1||this.loop}},watch:{index:function(t){this.goto(t)},open:function(){this.focusContent()}},created:function(){this.goto(this.index)},methods:{close:function(){this.$emit("close",this.cIndex)},prev:function(){this.hasPrev&&this.goto(this.cIndex-1)},next:function(){this.hasNext&&this.goto(this.cIndex+1)},goto:function(t){this.switchFrom=this.current;var e="";if(null!==t){var i=t;i>=this._images.length?i=0:i<0&&(i=this._images.length-1),null!==this.cIndex&&(e=this.cIndex<i?"v-tb__cont__cur__img--rtl":"v-tb__cont__cur__img--ltr")}this.transitionClass=e,this.cIndex=t},swipeStart:function(t){1===t.changedTouches.length&&(this.swipeX=t.changedTouches[0].screenX)},swipe:function(t){if(!this.swipeFinished&&1===t.changedTouches.length){var e=t.changedTouches[0].screenX;e-this.swipeX>=50?(this.prev(),this.swipeFinished=!0):this.swipeX-e>=50&&(this.next(),this.swipeFinished=!0)}},swipeEnd:function(){this.swipeX=null,this.swipeFinished=!1},focusContent:function(){this.open?this.$refs.content.focus():this.$refs.content.blur()}}};var e,i="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var n={};var o=function(t,e,i,n,o,a,s,c,r,u){"boolean"!=typeof s&&(r=c,c=s,s=!1);var l,d="function"==typeof i?i.options:i;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,o&&(d.functional=!0)),n&&(d._scopeId=n),a?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,r(t)),t&&t._registeredComponents&&t._registeredComponents.add(a)},d._ssrRegister=l):e&&(l=s?function(t){e.call(this,u(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,c(t))}),l)if(d.functional){var _=d.render;d.render=function(t,e){return l.call(e),_(t,e)}}else{var h=d.beforeCreate;d.beforeCreate=h?[].concat(h,l):[l]}return i}({render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"v-tb",class:{"v-tb--open":t.open},on:{click:t.close,wheel:function(t){t.preventDefault()},touchmove:function(t){t.preventDefault()}}},[i("div",{ref:"content",staticClass:"v-tb__cont",attrs:{tabindex:"0"},on:{blur:t.focusContent,touchstart:t.swipeStart,touchmove:t.swipe,touchend:t.swipeEnd,keyup:[function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"left",37,e.key,["Left","ArrowLeft"])?null:"button"in e&&0!==e.button?null:t.prev(e)},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"right",39,e.key,["Right","ArrowRight"])?null:"button"in e&&2!==e.button?null:t.next(e)},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"esc",27,e.key,["Esc","Escape"])?null:t.close(e)}]}},[i("div",{staticClass:"v-tb__cont__cur",style:"background:url('"+t.switchFrom.src+"')"},[i("img",{staticClass:"v-tb__cont__cur__img",class:t.transitionClass,attrs:{src:t.current.src,alt:t.current.alt||""},on:{click:function(e){return e.stopPropagation(),t.next(e)},animationend:function(e){t.transitionClass=""}}})]),t._v(" "),t.hasPrev?i("div",{staticClass:"v-tb__cont__ctrl v-tb__cont__ctrl--prev",on:{click:function(e){return e.stopPropagation(),t.prev(e)}}}):t._e(),t._v(" "),t.hasNext?i("div",{staticClass:"v-tb__cont__ctrl v-tb__cont__ctrl--next",on:{click:function(e){return e.stopPropagation(),t.next(e)}}}):t._e(),t._v(" "),i("div",{staticClass:"v-tb__cont__ctrl v-tb__cont__ctrl--close",on:{click:function(e){return e.stopPropagation(),t.close(e)}}})]),t._v(" "),i("div",{staticClass:"v-tb__thumbs"},t._l(t._images,(function(e,n){return i("div",{key:n,staticClass:"v-tb__thumbs__item",class:{"v-tb__thumbs__item--active":t.cIndex===n},on:{click:function(e){return e.stopPropagation(),t.goto(n)}}},[i("img",{staticClass:"v-tb__thumbs__item__img",attrs:{src:e.thumbnail||e.src,alt:e.alt||""}})])})),0)])},staticRenderFns:[]},(function(t){t&&t("data-v-01c63f4e_0",{source:'.v-tb[data-v-01c63f4e]{background:rgba(0,0,0,.9);height:100%;left:0;opacity:0;outline:0;pointer-events:none;position:fixed;right:0;text-align:center;top:0;transition:opacity .3s ease;z-index:2000}.v-tb--open[data-v-01c63f4e]{opacity:1;pointer-events:initial}.v-tb__cont[data-v-01c63f4e]{height:84vh;position:absolute;width:100vw}.v-tb__cont[data-v-01c63f4e]:focus{outline:0}.v-tb__cont[data-v-01c63f4e]::before{content:"";display:inline-block;height:84vh;vertical-align:middle}.v-tb__cont__cur[data-v-01c63f4e]{background-size:cover;display:inline-block;vertical-align:middle}.v-tb__cont__cur__img[data-v-01c63f4e]{border:none;cursor:pointer;display:inline-block;float:none;height:auto;margin:0;max-width:82.3vw;max-height:84vh;position:relative;vertical-align:middle;width:auto;animation:.3s ease 1 normal}.v-tb__cont__cur__img--ltr[data-v-01c63f4e]{animation-name:ltr-data-v-01c63f4e}.v-tb__cont__cur__img--rtl[data-v-01c63f4e]{animation-name:rtl-data-v-01c63f4e}@keyframes ltr-data-v-01c63f4e{from{opacity:0;transform:translateX(-80px)}to{opacity:1;transform:translateX(0)}}@keyframes rtl-data-v-01c63f4e{from{opacity:0;transform:translateX(80px)}to{opacity:1;transform:translateX(0)}}.v-tb__cont__ctrl[data-v-01c63f4e]{background:no-repeat center/24px;cursor:pointer;opacity:.5;position:absolute;top:0;transition:opacity .3s;width:4em}.v-tb__cont__ctrl[data-v-01c63f4e]:hover{opacity:1}.v-tb__cont__ctrl--prev[data-v-01c63f4e]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjE3LjkgMjU2IDEyNy4xLTEyN2M5LjQtOS40IDkuNC0yNC42IDAtMzMuOS05LjQtOS40LTI0LjYtOS4zLTM0IDBsLTE0NCAxNDMuOWMtOS4xIDkuMS05LjMgMjMuNy0uNyAzMy4xbDE0NC42IDE0NC45YzQuNyA0LjcgMTAuOSA3IDE3IDdzMTIuMy0yLjMgMTctN2M5LjQtOS40IDkuNC0yNC42IDAtMzMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);bottom:0;left:0}.v-tb__cont__ctrl--next[data-v-01c63f4e]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjk0LjEgMjU2LTEyNy4xLTEyN2MtOS40LTkuNC05LjQtMjQuNiAwLTMzLjlzMjQuNi05LjMgMzQgMGwxNDQgMTQzLjljOS4xIDkuMSA5LjMgMjMuNy43IDMzLjFsLTE0NC42IDE0NC45Yy00LjcgNC43LTEwLjkgNy0xNyA3cy0xMi4zLTIuMy0xNy03Yy05LjQtOS40LTkuNC0yNC42IDAtMzMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);bottom:0;right:0}.v-tb__cont__ctrl--close[data-v-01c63f4e]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yNzguNiAyNTYgNjguMi02OC4yYzYuMi02LjIgNi4yLTE2LjQgMC0yMi42cy0xNi40LTYuMi0yMi42IDBsLTY4LjIgNjguMi02OC4yLTY4LjJjLTYuMi02LjItMTYuNC02LjItMjIuNiAwLTMuMSAzLjEtNC43IDcuMi00LjcgMTEuM3MxLjYgOC4yIDQuNyAxMS4zbDY4LjIgNjguMi02OC4yIDY4LjJjLTMuMSAzLjEtNC43IDcuMi00LjcgMTEuM3MxLjYgOC4yIDQuNyAxMS4zYzYuMiA2LjIgMTYuNCA2LjIgMjIuNiAwbDY4LjItNjguMiA2OC4yIDY4LjJjNi4yIDYuMiAxNi40IDYuMiAyMi42IDBzNi4yLTE2LjQgMC0yMi42eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);height:2.6em;right:0}.v-tb__thumbs[data-v-01c63f4e]{bottom:0;left:0;line-height:0;padding:0 1vh;position:absolute;right:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.v-tb__thumbs__item[data-v-01c63f4e]{background:#222;cursor:pointer;display:inline-block;height:10vh;overflow:hidden;margin:2vh 1vh;position:relative;width:10vh}.v-tb__thumbs__item--active .v-tb__thumbs__item__img[data-v-01c63f4e]{opacity:.3}.v-tb__thumbs__item__img[data-v-01c63f4e]{display:inline-block;height:100%;left:50%;position:absolute;top:0;transform:translateX(-50%);vertical-align:middle;width:auto}',map:void 0,media:void 0})}),t,"data-v-01c63f4e",!1,void 0,!1,(function(t){return function(t,o){return function(t,o){var a=i?o.media||"default":t,s=n[a]||(n[a]={ids:new Set,styles:[]});if(!s.ids.has(t)){s.ids.add(t);var c=o.source;if(o.map&&(c+="\n/*# sourceURL="+o.map.sources[0]+" */",c+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",o.media&&s.element.setAttribute("media",o.media),void 0===e&&(e=document.head||document.getElementsByTagName("head")[0]),e.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(c),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var r=s.ids.size-1,u=document.createTextNode(c),l=s.element.childNodes;l[r]&&s.element.removeChild(l[r]),l.length?s.element.insertBefore(u,l[r]):s.element.appendChild(u)}}}(t,o)}}),void 0,void 0);export default o; |
@@ -1,404 +0,1 @@ | ||
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : | ||
| typeof define === 'function' && define.amd ? define(factory) : | ||
| (global = global || self, global.Tinybox = factory()); | ||
| }(this, function () { 'use strict'; | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| var script = { | ||
| name: "Tinybox", | ||
| props: { | ||
| /** | ||
| * List of images to display in the lightbox | ||
| * | ||
| * Any array item can be either a string containing the image URL or an object. | ||
| * The object fields are the following: | ||
| * - `src` - the image URL | ||
| * - `thumbnail` - the thumbnail (a smaller version of the image) URL | ||
| * - `alt` - the alt text to be displayed if the image failed to load (or by screenreaders) | ||
| */ | ||
| images: { | ||
| type: Array, | ||
| default: function _default() { | ||
| return []; | ||
| } | ||
| }, | ||
| /** | ||
| * The index of the image to be opened in the lightbox | ||
| */ | ||
| index: { | ||
| type: Number, | ||
| default: null | ||
| }, | ||
| /** | ||
| * Indicates whether the images carousel should loop around itself | ||
| */ | ||
| loop: { | ||
| type: Boolean, | ||
| default: false | ||
| } | ||
| }, | ||
| data: function data() { | ||
| return { | ||
| cIndex: null, | ||
| swipeFinished: false, | ||
| swipeX: null, | ||
| switchFrom: null, | ||
| transitionClass: "" | ||
| }; | ||
| }, | ||
| computed: { | ||
| _images: function _images() { | ||
| var result = []; | ||
| for (var i = 0; i < this.images.length; i++) { | ||
| result.push(typeof this.images[i] === "string" ? { | ||
| src: this.images[i] | ||
| } : this.images[i]); | ||
| } | ||
| return result; | ||
| }, | ||
| current: function current() { | ||
| return this._images[this.cIndex] || { | ||
| src: "" | ||
| }; | ||
| }, | ||
| open: function open() { | ||
| return this.index !== null; | ||
| }, | ||
| hasPrev: function hasPrev() { | ||
| return this.cIndex > 0 || this.loop; | ||
| }, | ||
| hasNext: function hasNext() { | ||
| return this.cIndex < this._images.length - 1 || this.loop; | ||
| } | ||
| }, | ||
| watch: { | ||
| index: function index(idx) { | ||
| this.goto(idx); | ||
| }, | ||
| open: function open() { | ||
| this.focusContent(); | ||
| } | ||
| }, | ||
| created: function created() { | ||
| this.goto(this.index); | ||
| }, | ||
| methods: { | ||
| /** | ||
| * @event close - the close button has been pressed. The current index is sent as payload | ||
| */ | ||
| close: function close() { | ||
| this.$emit("close", this.cIndex); | ||
| }, | ||
| prev: function prev() { | ||
| if (this.hasPrev) { | ||
| this.goto(this.cIndex - 1); | ||
| } | ||
| }, | ||
| next: function next() { | ||
| if (this.hasNext) { | ||
| this.goto(this.cIndex + 1); | ||
| } | ||
| }, | ||
| goto: function goto(index) { | ||
| this.switchFrom = this.current; | ||
| var transition = ""; | ||
| if (index !== null) { | ||
| var newIndex = index; | ||
| if (newIndex >= this._images.length) { | ||
| newIndex = 0; | ||
| } else if (newIndex < 0) { | ||
| newIndex = this._images.length - 1; | ||
| } | ||
| if (this.cIndex !== null) { | ||
| transition = this.cIndex < newIndex ? "tinybox__content__current__image--from-right" : "tinybox__content__current__image--from-left"; | ||
| } | ||
| } | ||
| this.transitionClass = transition; | ||
| this.cIndex = index; | ||
| }, | ||
| swipeStart: function swipeStart(e) { | ||
| if (e.changedTouches.length === 1) { | ||
| this.swipeX = e.changedTouches[0].screenX; | ||
| } | ||
| }, | ||
| swipe: function swipe(e) { | ||
| if (!this.swipeFinished && e.changedTouches.length === 1) { | ||
| var newSwipeX = e.changedTouches[0].screenX; | ||
| if (newSwipeX - this.swipeX >= 50) { | ||
| this.prev(); | ||
| this.swipeFinished = true; | ||
| } else if (this.swipeX - newSwipeX >= 50) { | ||
| this.next(); | ||
| this.swipeFinished = true; | ||
| } | ||
| } | ||
| }, | ||
| swipeEnd: function swipeEnd() { | ||
| this.swipeX = null; | ||
| this.swipeFinished = false; | ||
| }, | ||
| focusContent: function focusContent() { | ||
| if (this.open) { | ||
| this.$refs.content.focus(); | ||
| } else { | ||
| this.$refs.content.blur(); | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier | ||
| /* server only */ | ||
| , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { | ||
| if (typeof shadowMode !== 'boolean') { | ||
| createInjectorSSR = createInjector; | ||
| createInjector = shadowMode; | ||
| shadowMode = false; | ||
| } // Vue.extend constructor export interop. | ||
| var options = typeof script === 'function' ? script.options : script; // render functions | ||
| if (template && template.render) { | ||
| options.render = template.render; | ||
| options.staticRenderFns = template.staticRenderFns; | ||
| options._compiled = true; // functional template | ||
| if (isFunctionalTemplate) { | ||
| options.functional = true; | ||
| } | ||
| } // scopedId | ||
| if (scopeId) { | ||
| options._scopeId = scopeId; | ||
| } | ||
| var hook; | ||
| if (moduleIdentifier) { | ||
| // server build | ||
| hook = function hook(context) { | ||
| // 2.3 injection | ||
| context = context || // cached call | ||
| this.$vnode && this.$vnode.ssrContext || // stateful | ||
| this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional | ||
| // 2.2 with runInNewContext: true | ||
| if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { | ||
| context = __VUE_SSR_CONTEXT__; | ||
| } // inject component styles | ||
| if (style) { | ||
| style.call(this, createInjectorSSR(context)); | ||
| } // register component module identifier for async chunk inference | ||
| if (context && context._registeredComponents) { | ||
| context._registeredComponents.add(moduleIdentifier); | ||
| } | ||
| }; // used by ssr in case component is cached and beforeCreate | ||
| // never gets called | ||
| options._ssrRegister = hook; | ||
| } else if (style) { | ||
| hook = shadowMode ? function () { | ||
| style.call(this, createInjectorShadow(this.$root.$options.shadowRoot)); | ||
| } : function (context) { | ||
| style.call(this, createInjector(context)); | ||
| }; | ||
| } | ||
| if (hook) { | ||
| if (options.functional) { | ||
| // register for functional component in vue file | ||
| var originalRender = options.render; | ||
| options.render = function renderWithStyleInjection(h, context) { | ||
| hook.call(context); | ||
| return originalRender(h, context); | ||
| }; | ||
| } else { | ||
| // inject component registration as beforeCreate hook | ||
| var existing = options.beforeCreate; | ||
| options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; | ||
| } | ||
| } | ||
| return script; | ||
| } | ||
| var normalizeComponent_1 = normalizeComponent; | ||
| var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()); | ||
| function createInjector(context) { | ||
| return function (id, style) { | ||
| return addStyle(id, style); | ||
| }; | ||
| } | ||
| var HEAD; | ||
| var styles = {}; | ||
| function addStyle(id, css) { | ||
| var group = isOldIE ? css.media || 'default' : id; | ||
| var style = styles[group] || (styles[group] = { | ||
| ids: new Set(), | ||
| styles: [] | ||
| }); | ||
| if (!style.ids.has(id)) { | ||
| style.ids.add(id); | ||
| var code = css.source; | ||
| if (css.map) { | ||
| // https://developer.chrome.com/devtools/docs/javascript-debugging | ||
| // this makes source maps inside style tags work properly in Chrome | ||
| code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875 | ||
| code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */'; | ||
| } | ||
| if (!style.element) { | ||
| style.element = document.createElement('style'); | ||
| style.element.type = 'text/css'; | ||
| if (css.media) style.element.setAttribute('media', css.media); | ||
| if (HEAD === undefined) { | ||
| HEAD = document.head || document.getElementsByTagName('head')[0]; | ||
| } | ||
| HEAD.appendChild(style.element); | ||
| } | ||
| if ('styleSheet' in style.element) { | ||
| style.styles.push(code); | ||
| style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n'); | ||
| } else { | ||
| var index = style.ids.size - 1; | ||
| var textNode = document.createTextNode(code); | ||
| var nodes = style.element.childNodes; | ||
| if (nodes[index]) style.element.removeChild(nodes[index]); | ||
| if (nodes.length) style.element.insertBefore(textNode, nodes[index]);else style.element.appendChild(textNode); | ||
| } | ||
| } | ||
| } | ||
| var browser = createInjector; | ||
| /* script */ | ||
| const __vue_script__ = script; | ||
| /* template */ | ||
| var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"tinybox",class:{'tinybox--open': _vm.open},on:{"click":_vm.close,"wheel":function($event){$event.preventDefault();},"touchmove":function($event){$event.preventDefault();}}},[_c('div',{ref:"content",staticClass:"tinybox__content",attrs:{"tabindex":"0"},on:{"blur":_vm.focusContent,"touchstart":_vm.swipeStart,"touchmove":_vm.swipe,"touchend":_vm.swipeEnd,"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.prev($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"right",39,$event.key,["Right","ArrowRight"])){ return null; }if('button' in $event && $event.button !== 2){ return null; }return _vm.next($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.close($event)}]}},[_c('div',{staticClass:"tinybox__content__current",style:(("background-image:url('" + (_vm.switchFrom.src) + "')"))},[_c('img',{staticClass:"tinybox__content__current__image",class:_vm.transitionClass,attrs:{"src":_vm.current.src,"alt":_vm.current.alt || ''},on:{"click":function($event){$event.stopPropagation();return _vm.next($event)},"animationend":function($event){_vm.transitionClass = '';}}})]),(_vm.hasPrev)?_c('div',{staticClass:"tinybox__content__control tinybox__content__control--prev",on:{"click":function($event){$event.stopPropagation();return _vm.prev($event)}}}):_vm._e(),(_vm.hasNext)?_c('div',{staticClass:"tinybox__content__control tinybox__content__control--next",on:{"click":function($event){$event.stopPropagation();return _vm.next($event)}}}):_vm._e(),_c('div',{staticClass:"tinybox__content__control tinybox__content__control--close",on:{"click":function($event){$event.stopPropagation();return _vm.close($event)}}})]),_c('div',{staticClass:"tinybox__thumbnails"},_vm._l((_vm._images),function(img,i){return _c('div',{key:i,staticClass:"tinybox__thumbnails__item",class:{'tinybox__thumbnails__item--active': _vm.cIndex === i},on:{"click":function($event){$event.stopPropagation();return _vm.goto(i)}}},[_c('img',{staticClass:"tinybox__thumbnails__item__image",attrs:{"src":img.thumbnail || img.src,"alt":img.alt || ''}})])}),0)])}; | ||
| var __vue_staticRenderFns__ = []; | ||
| /* style */ | ||
| const __vue_inject_styles__ = function (inject) { | ||
| if (!inject) return | ||
| inject("data-v-832179e2_0", { source: ".tinybox[data-v-832179e2]{background:rgba(0,0,0,.9);height:100%;left:0;opacity:0;outline:0;pointer-events:none;position:fixed;right:0;text-align:center;top:0;transition:opacity .3s ease;z-index:2000}.tinybox--open[data-v-832179e2]{opacity:1;pointer-events:initial}.tinybox__content[data-v-832179e2]{height:84vh;position:absolute;width:100vw}.tinybox__content[data-v-832179e2]:focus{outline:0}.tinybox__content[data-v-832179e2]::before{content:\"\";display:inline-block;height:84vh;vertical-align:middle}.tinybox__content__current[data-v-832179e2]{background-size:cover;display:inline-block;vertical-align:middle}.tinybox__content__current__image[data-v-832179e2]{border:none;cursor:pointer;display:inline-block;float:none;height:auto;margin:0;max-width:82.3vw;max-height:84vh;position:relative;vertical-align:middle;width:auto;animation-duration:.3s;animation-direction:normal;animation-iteration-count:1;animation-timing-function:ease}.tinybox__content__current__image--from-left[data-v-832179e2]{animation-name:left-right-data-v-832179e2}.tinybox__content__current__image--from-right[data-v-832179e2]{animation-name:right-left-data-v-832179e2}@keyframes left-right-data-v-832179e2{from{opacity:0;transform:translateX(-80px)}to{opacity:1;transform:translateX(0)}}@keyframes right-left-data-v-832179e2{from{opacity:0;transform:translateX(80px)}to{opacity:1;transform:translateX(0)}}.tinybox__content__control[data-v-832179e2]{background-size:24px;background-repeat:no-repeat;background-position:center;cursor:pointer;opacity:.5;position:absolute;top:0;transition:opacity .3s;width:4em}.tinybox__content__control[data-v-832179e2]:hover{opacity:1}.tinybox__content__control--prev[data-v-832179e2]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjE3LjkgMjU2IDEyNy4xLTEyN2M5LjQtOS40IDkuNC0yNC42IDAtMzMuOS05LjQtOS40LTI0LjYtOS4zLTM0IDBsLTE0NCAxNDMuOWMtOS4xIDkuMS05LjMgMjMuNy0uNyAzMy4xbDE0NC42IDE0NC45YzQuNyA0LjcgMTAuOSA3IDE3IDdzMTIuMy0yLjMgMTctN2M5LjQtOS40IDkuNC0yNC42IDAtMzMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);bottom:0;left:0}.tinybox__content__control--next[data-v-832179e2]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjk0LjEgMjU2LTEyNy4xLTEyN2MtOS40LTkuNC05LjQtMjQuNiAwLTMzLjlzMjQuNi05LjMgMzQgMGwxNDQgMTQzLjljOS4xIDkuMSA5LjMgMjMuNy43IDMzLjFsLTE0NC42IDE0NC45Yy00LjcgNC43LTEwLjkgNy0xNyA3cy0xMi4zLTIuMy0xNy03Yy05LjQtOS40LTkuNC0yNC42IDAtMzMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);bottom:0;right:0}.tinybox__content__control--close[data-v-832179e2]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yNzguNiAyNTYgNjguMi02OC4yYzYuMi02LjIgNi4yLTE2LjQgMC0yMi42cy0xNi40LTYuMi0yMi42IDBsLTY4LjIgNjguMi02OC4yLTY4LjJjLTYuMi02LjItMTYuNC02LjItMjIuNiAwLTMuMSAzLjEtNC43IDcuMi00LjcgMTEuM3MxLjYgOC4yIDQuNyAxMS4zbDY4LjIgNjguMi02OC4yIDY4LjJjLTMuMSAzLjEtNC43IDcuMi00LjcgMTEuM3MxLjYgOC4yIDQuNyAxMS4zYzYuMiA2LjIgMTYuNCA2LjIgMjIuNiAwbDY4LjItNjguMiA2OC4yIDY4LjJjNi4yIDYuMiAxNi40IDYuMiAyMi42IDBzNi4yLTE2LjQgMC0yMi42eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);height:2.6em;right:0}.tinybox__thumbnails[data-v-832179e2]{bottom:0;left:0;line-height:0;padding:0 1vh;position:absolute;right:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.tinybox__thumbnails__item[data-v-832179e2]{background-color:#222;cursor:pointer;display:inline-block;height:10vh;overflow:hidden;margin:2vh 1vh;position:relative;width:10vh}.tinybox__thumbnails__item--active .tinybox__thumbnails__item__image[data-v-832179e2]{opacity:.3}.tinybox__thumbnails__item__image[data-v-832179e2]{display:inline-block;height:100%;left:50%;position:absolute;top:0;transform:translateX(-50%);vertical-align:middle;width:auto}", map: undefined, media: undefined }); | ||
| }; | ||
| /* scoped */ | ||
| const __vue_scope_id__ = "data-v-832179e2"; | ||
| /* module identifier */ | ||
| const __vue_module_identifier__ = undefined; | ||
| /* functional template */ | ||
| const __vue_is_functional_template__ = false; | ||
| /* style inject SSR */ | ||
| var Tinybox = normalizeComponent_1( | ||
| { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, | ||
| __vue_inject_styles__, | ||
| __vue_script__, | ||
| __vue_scope_id__, | ||
| __vue_is_functional_template__, | ||
| __vue_module_identifier__, | ||
| browser, | ||
| undefined | ||
| ); | ||
| return Tinybox; | ||
| })); | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Tinybox=e()}(this,(function(){"use strict";var t={name:"Tinybox",props:{images:{type:Array,default:function(){return[]}},index:{type:Number,default:null},loop:{type:Boolean,default:!1}},data:function(){return{cIndex:null,swipeFinished:!1,swipeX:null,switchFrom:null,transitionClass:""}},computed:{_images:function(){for(var t=[],e=0;e<this.images.length;e++)t.push("string"==typeof this.images[e]?{src:this.images[e]}:this.images[e]);return t},current:function(){return this._images[this.cIndex]||{src:""}},open:function(){return null!==this.index},hasPrev:function(){return this.cIndex>0||this.loop},hasNext:function(){return this.cIndex<this._images.length-1||this.loop}},watch:{index:function(t){this.goto(t)},open:function(){this.focusContent()}},created:function(){this.goto(this.index)},methods:{close:function(){this.$emit("close",this.cIndex)},prev:function(){this.hasPrev&&this.goto(this.cIndex-1)},next:function(){this.hasNext&&this.goto(this.cIndex+1)},goto:function(t){this.switchFrom=this.current;var e="";if(null!==t){var i=t;i>=this._images.length?i=0:i<0&&(i=this._images.length-1),null!==this.cIndex&&(e=this.cIndex<i?"v-tb__cont__cur__img--rtl":"v-tb__cont__cur__img--ltr")}this.transitionClass=e,this.cIndex=t},swipeStart:function(t){1===t.changedTouches.length&&(this.swipeX=t.changedTouches[0].screenX)},swipe:function(t){if(!this.swipeFinished&&1===t.changedTouches.length){var e=t.changedTouches[0].screenX;e-this.swipeX>=50?(this.prev(),this.swipeFinished=!0):this.swipeX-e>=50&&(this.next(),this.swipeFinished=!0)}},swipeEnd:function(){this.swipeX=null,this.swipeFinished=!1},focusContent:function(){this.open?this.$refs.content.focus():this.$refs.content.blur()}}};var e,i="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var n={};return function(t,e,i,n,o,s,a,c,r,u){"boolean"!=typeof a&&(r=c,c=a,a=!1);var l,d="function"==typeof i?i.options:i;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,o&&(d.functional=!0)),n&&(d._scopeId=n),s?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,r(t)),t&&t._registeredComponents&&t._registeredComponents.add(s)},d._ssrRegister=l):e&&(l=a?function(t){e.call(this,u(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,c(t))}),l)if(d.functional){var _=d.render;d.render=function(t,e){return l.call(e),_(t,e)}}else{var h=d.beforeCreate;d.beforeCreate=h?[].concat(h,l):[l]}return i}({render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"v-tb",class:{"v-tb--open":t.open},on:{click:t.close,wheel:function(t){t.preventDefault()},touchmove:function(t){t.preventDefault()}}},[i("div",{ref:"content",staticClass:"v-tb__cont",attrs:{tabindex:"0"},on:{blur:t.focusContent,touchstart:t.swipeStart,touchmove:t.swipe,touchend:t.swipeEnd,keyup:[function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"left",37,e.key,["Left","ArrowLeft"])?null:"button"in e&&0!==e.button?null:t.prev(e)},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"right",39,e.key,["Right","ArrowRight"])?null:"button"in e&&2!==e.button?null:t.next(e)},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"esc",27,e.key,["Esc","Escape"])?null:t.close(e)}]}},[i("div",{staticClass:"v-tb__cont__cur",style:"background:url('"+t.switchFrom.src+"')"},[i("img",{staticClass:"v-tb__cont__cur__img",class:t.transitionClass,attrs:{src:t.current.src,alt:t.current.alt||""},on:{click:function(e){return e.stopPropagation(),t.next(e)},animationend:function(e){t.transitionClass=""}}})]),t._v(" "),t.hasPrev?i("div",{staticClass:"v-tb__cont__ctrl v-tb__cont__ctrl--prev",on:{click:function(e){return e.stopPropagation(),t.prev(e)}}}):t._e(),t._v(" "),t.hasNext?i("div",{staticClass:"v-tb__cont__ctrl v-tb__cont__ctrl--next",on:{click:function(e){return e.stopPropagation(),t.next(e)}}}):t._e(),t._v(" "),i("div",{staticClass:"v-tb__cont__ctrl v-tb__cont__ctrl--close",on:{click:function(e){return e.stopPropagation(),t.close(e)}}})]),t._v(" "),i("div",{staticClass:"v-tb__thumbs"},t._l(t._images,(function(e,n){return i("div",{key:n,staticClass:"v-tb__thumbs__item",class:{"v-tb__thumbs__item--active":t.cIndex===n},on:{click:function(e){return e.stopPropagation(),t.goto(n)}}},[i("img",{staticClass:"v-tb__thumbs__item__img",attrs:{src:e.thumbnail||e.src,alt:e.alt||""}})])})),0)])},staticRenderFns:[]},(function(t){t&&t("data-v-01c63f4e_0",{source:'.v-tb[data-v-01c63f4e]{background:rgba(0,0,0,.9);height:100%;left:0;opacity:0;outline:0;pointer-events:none;position:fixed;right:0;text-align:center;top:0;transition:opacity .3s ease;z-index:2000}.v-tb--open[data-v-01c63f4e]{opacity:1;pointer-events:initial}.v-tb__cont[data-v-01c63f4e]{height:84vh;position:absolute;width:100vw}.v-tb__cont[data-v-01c63f4e]:focus{outline:0}.v-tb__cont[data-v-01c63f4e]::before{content:"";display:inline-block;height:84vh;vertical-align:middle}.v-tb__cont__cur[data-v-01c63f4e]{background-size:cover;display:inline-block;vertical-align:middle}.v-tb__cont__cur__img[data-v-01c63f4e]{border:none;cursor:pointer;display:inline-block;float:none;height:auto;margin:0;max-width:82.3vw;max-height:84vh;position:relative;vertical-align:middle;width:auto;animation:.3s ease 1 normal}.v-tb__cont__cur__img--ltr[data-v-01c63f4e]{animation-name:ltr-data-v-01c63f4e}.v-tb__cont__cur__img--rtl[data-v-01c63f4e]{animation-name:rtl-data-v-01c63f4e}@keyframes ltr-data-v-01c63f4e{from{opacity:0;transform:translateX(-80px)}to{opacity:1;transform:translateX(0)}}@keyframes rtl-data-v-01c63f4e{from{opacity:0;transform:translateX(80px)}to{opacity:1;transform:translateX(0)}}.v-tb__cont__ctrl[data-v-01c63f4e]{background:no-repeat center/24px;cursor:pointer;opacity:.5;position:absolute;top:0;transition:opacity .3s;width:4em}.v-tb__cont__ctrl[data-v-01c63f4e]:hover{opacity:1}.v-tb__cont__ctrl--prev[data-v-01c63f4e]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjE3LjkgMjU2IDEyNy4xLTEyN2M5LjQtOS40IDkuNC0yNC42IDAtMzMuOS05LjQtOS40LTI0LjYtOS4zLTM0IDBsLTE0NCAxNDMuOWMtOS4xIDkuMS05LjMgMjMuNy0uNyAzMy4xbDE0NC42IDE0NC45YzQuNyA0LjcgMTAuOSA3IDE3IDdzMTIuMy0yLjMgMTctN2M5LjQtOS40IDkuNC0yNC42IDAtMzMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);bottom:0;left:0}.v-tb__cont__ctrl--next[data-v-01c63f4e]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjk0LjEgMjU2LTEyNy4xLTEyN2MtOS40LTkuNC05LjQtMjQuNiAwLTMzLjlzMjQuNi05LjMgMzQgMGwxNDQgMTQzLjljOS4xIDkuMSA5LjMgMjMuNy43IDMzLjFsLTE0NC42IDE0NC45Yy00LjcgNC43LTEwLjkgNy0xNyA3cy0xMi4zLTIuMy0xNy03Yy05LjQtOS40LTkuNC0yNC42IDAtMzMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);bottom:0;right:0}.v-tb__cont__ctrl--close[data-v-01c63f4e]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yNzguNiAyNTYgNjguMi02OC4yYzYuMi02LjIgNi4yLTE2LjQgMC0yMi42cy0xNi40LTYuMi0yMi42IDBsLTY4LjIgNjguMi02OC4yLTY4LjJjLTYuMi02LjItMTYuNC02LjItMjIuNiAwLTMuMSAzLjEtNC43IDcuMi00LjcgMTEuM3MxLjYgOC4yIDQuNyAxMS4zbDY4LjIgNjguMi02OC4yIDY4LjJjLTMuMSAzLjEtNC43IDcuMi00LjcgMTEuM3MxLjYgOC4yIDQuNyAxMS4zYzYuMiA2LjIgMTYuNCA2LjIgMjIuNiAwbDY4LjItNjguMiA2OC4yIDY4LjJjNi4yIDYuMiAxNi40IDYuMiAyMi42IDBzNi4yLTE2LjQgMC0yMi42eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);height:2.6em;right:0}.v-tb__thumbs[data-v-01c63f4e]{bottom:0;left:0;line-height:0;padding:0 1vh;position:absolute;right:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.v-tb__thumbs__item[data-v-01c63f4e]{background:#222;cursor:pointer;display:inline-block;height:10vh;overflow:hidden;margin:2vh 1vh;position:relative;width:10vh}.v-tb__thumbs__item--active .v-tb__thumbs__item__img[data-v-01c63f4e]{opacity:.3}.v-tb__thumbs__item__img[data-v-01c63f4e]{display:inline-block;height:100%;left:50%;position:absolute;top:0;transform:translateX(-50%);vertical-align:middle;width:auto}',map:void 0,media:void 0})}),t,"data-v-01c63f4e",!1,void 0,!1,(function(t){return function(t,o){return function(t,o){var s=i?o.media||"default":t,a=n[s]||(n[s]={ids:new Set,styles:[]});if(!a.ids.has(t)){a.ids.add(t);var c=o.source;if(o.map&&(c+="\n/*# sourceURL="+o.map.sources[0]+" */",c+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o.map))))+" */"),a.element||(a.element=document.createElement("style"),a.element.type="text/css",o.media&&a.element.setAttribute("media",o.media),void 0===e&&(e=document.head||document.getElementsByTagName("head")[0]),e.appendChild(a.element)),"styleSheet"in a.element)a.styles.push(c),a.element.styleSheet.cssText=a.styles.filter(Boolean).join("\n");else{var r=a.ids.size-1,u=document.createTextNode(c),l=a.element.childNodes;l[r]&&a.element.removeChild(l[r]),l.length?a.element.insertBefore(u,l[r]):a.element.appendChild(u)}}}(t,o)}}),void 0,void 0)})); |
| { | ||
| "name": "vue-tinybox", | ||
| "version": "0.2.0", | ||
| "version": "0.3.0", | ||
| "description": "A slick, yet tiny lightbox gallery component for Vue.js", | ||
@@ -26,16 +26,9 @@ "license": "MIT", | ||
| }, | ||
| "main": "dist/tinybox.umd.js", | ||
| "module": "dist/tinybox.esm.js", | ||
| "files": [ | ||
| "dist/tinybox.umd.js", | ||
| "dist/tinybox.esm.js", | ||
| "dist/tinybox.umd.js", | ||
| "dist/tinybox.min.js", | ||
| "src" | ||
| "src/Tinybox.vue" | ||
| ], | ||
| "main": "dist/tinybox.umd.js", | ||
| "module": "dist/tinybox.esm.js", | ||
| "browser": "dist/tinybox.min.js", | ||
| "browserslist": [ | ||
| "> 0.5%", | ||
| "last 2 versions", | ||
| "not dead" | ||
| ], | ||
| "scripts": { | ||
@@ -49,12 +42,11 @@ "build": "rollup --config rollup.config.prod.js", | ||
| "devDependencies": { | ||
| "@babel/core": "^7.5.5", | ||
| "@babel/preset-env": "^7.5.5", | ||
| "@size-limit/preset-small-lib": "^2.0.2", | ||
| "eslint": "^6.1.0", | ||
| "eslint-plugin-vue": "^5.2.3", | ||
| "rollup": "^1.19.4", | ||
| "rollup-plugin-babel": "^4.3.3", | ||
| "rollup-plugin-commonjs": "^10.0.2", | ||
| "rollup-plugin-terser": "^5.1.1", | ||
| "rollup-plugin-vue": "^5.0.1", | ||
| "@size-limit/preset-small-lib": "^2.2.0", | ||
| "eslint": "^6.6.0", | ||
| "eslint-plugin-vue": "^6.0.1", | ||
| "rollup": "^1.27.0", | ||
| "rollup-plugin-buble": "^0.19.8", | ||
| "rollup-plugin-commonjs": "^10.1.0", | ||
| "rollup-plugin-terser": "^5.1.2", | ||
| "rollup-plugin-vue": "^5.1.1", | ||
| "vue-eslint-parser": "^6.0.5", | ||
| "vue-template-compiler": "^2.6.10" | ||
@@ -65,5 +57,10 @@ }, | ||
| "path": "dist/tinybox.umd.js", | ||
| "limit": "4 KB" | ||
| "limit": "3.5 KB" | ||
| } | ||
| ], | ||
| "browserslist": [ | ||
| "> 0.5%", | ||
| "last 2 versions", | ||
| "not dead" | ||
| ] | ||
| } |
@@ -5,5 +5,9 @@ # vue-tinybox | ||
| - **Slick.** Nothing excessive. Image, controls and thumbnails. | ||
| - **Small.** Dependency-free and less than 3.5 KB minified and gzipped. | ||
| - **Adaptive.** Works great on both desktop and mobile. | ||
| ## Demo | ||
| The live demo can be found at https://NickKaramoff.github.io/vue-tinybox | ||
| The live demo can be found at https://os.karamoff.ru/vue-tinybox | ||
@@ -28,3 +32,3 @@ ## Install | ||
| <script src="path/to/vue.js"></script> | ||
| <script src="path/to/tinybox.min.js"></script> | ||
| <script src="path/to/tinybox.umd.js"></script> | ||
| ``` | ||
@@ -68,14 +72,14 @@ | ||
| | Prop name | Type | Default | Description | | ||
| |-----------|---------------|---------|--------------------------------------------------------------------------------| | ||
| | `images` | Array | `[]` | The array of either image URLs or `Image` objects | | ||
| | `index` | Number|`null` | `null` | The index of the image that has to be shown. If `null`, the lightbox is closed | | ||
| | `loop` | Boolean | `false` | Indicates whether the images should loop | | ||
| | Prop name | Type | Default | Description | | ||
| |-----------|-------------------|---------|--------------------------------------------------------------------------------| | ||
| | `images` | `Array` | `[]` | The array of either image URLs or `Image` objects | | ||
| | `index` | `Number` / `null` | `null` | The index of the image that has to be shown. If `null`, the lightbox is closed | | ||
| | `loop` | `Boolean` | `false` | Indicates whether the images should loop | | ||
| The `Image` object is an object with following fields: | ||
| | Field name | Type | Description | | ||
| |-------------|--------|----------------------------------------------------------------------------------------------------------------| | ||
| | `src` | String | The URL of the image | | ||
| | `alt` | String | The text to be set inside `alt` attribute, i.e. text for screen readers or to be shown if the image can't load | | ||
| | `thumbnail` | String | The URL of the smaller version of the image to be shown in the thumbnail strip | | ||
| | Field name | Type | Description | | ||
| |-------------|----------|-------------------------------------------------------------------------------------------| | ||
| | `src` | `String` | The URL of the image | | ||
| | `alt` | `String` | (optional) The text to be set inside `alt` attribute, e.g. a caption | | ||
| | `thumbnail` | `String` | (optional) The URL of the smaller version of the image to be shown in the thumbnail strip | |
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-9.09%
10
- Number of lines in readme file
- increased by5.06%
83
Worsened metrics
- Total package byte prevSize
- decreased by-40.27%
35245
- Number of package files
- decreased by-22.22%
7
- Lines of code
- decreased by-91.02%
71
No dependency changes