Skip to content

Commit 80e2338

Browse files
normansandernormansander
committed
update rollup; convert pug to html
1 parent 5e11b3d commit 80e2338

File tree

5 files changed

+234
-58
lines changed

5 files changed

+234
-58
lines changed

‎dist/js/vue-gallery-slideshow.js‎

Lines changed: 203 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,30 @@
44
(global.VueGallerySlideshow = factory());
55
}(this, (function () { 'use strict';
66

7-
(function () {
8-
if (typeof document !== 'undefined') {
9-
var head = document.head || document.getElementsByTagName('head')[0],
10-
style = document.createElement('style'),
11-
css = ".modal-slideshow { transition: opacity 0.2s ease; position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; min-height: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.8); display: table; background-color: rgba(0, 0, 0, 0.8); } .modal-slideshow__close { color: #fff; position: absolute; top: 0; right: 0; background-color: transparent; border: none; font-size: 30px; width: 50px; height: 50px; cursor: pointer; } .modal-slideshow__close:focus { outline: 0; } .modal-slideshow__prev, .modal-slideshow__next { position: absolute; top: 50%; margin-top: -25px; width: 50px; height: 50px; z-index: 999; cursor: pointer; font-size: 40px; color: #fff; background-color: transparent; border: none; } .modal-slideshow__prev:focus, .modal-slideshow__next:focus { outline: 0; } .modal-slideshow__prev { left: 0; } .modal-slideshow__next { right: 0; } .modal-slideshow__container { position: absolute; cursor: pointer; margin: 0 auto; overflow: hidden; /* @include respond-to(small) { width: 100%; top: 50%; margin-top: -150px; } @include respond-to(medium) { max-width: 100vh; margin: auto; top: 2rem; left: 0.5rem; right: 0.5rem; } */ max-width: 100vh; margin: auto; top: 2rem; left: 0.5rem; right: 0.5rem; } .modal-slideshow__container__image { background-color: #000; /* @include respond-to(small) { height: 274px; } @include respond-to(medium) { height: 60vh; border-radius: $radius-large; overflow: hidden; } */ height: 60vh; border-radius: 12px; overflow: hidden; } .modal-slideshow__container__image__img { display: block; margin: 0 auto; height: 100%; } .modal-slideshow__gallery { /* @include respond-to(small) { display: none; } @include respond-to(medium) { overflow-x: hidden; overflow-y: hidden; position: absolute; bottom: 10px; margin: auto; max-width: 100vh; white-space: nowrap; left: 0.5rem; right: 0.5rem; } */ overflow-x: hidden; overflow-y: hidden; position: absolute; bottom: 10px; margin: auto; max-width: 100vh; white-space: nowrap; left: 0.5rem; right: 0.5rem; } .modal-slideshow__gallery__title { color: #fff; margin-bottom: 0.5rem; } .modal-slideshow__gallery__container { overflow: visible; display: block; height: 100px; white-space: nowrap; transition: all 200ms ease-in-out; width: 100%; } .modal-slideshow__gallery__container__img { width: 100px; height: 100px; object-fit: cover; display: inline-block; float: none; margin-right: 20px; cursor: pointer; opacity: 0.6; border-radius: 8px; } .modal-slideshow__gallery__container__img--active { width: 100px; display: inline-block; float: none; opacity: 1; } ";style.type = 'text/css';if (style.styleSheet) {
12-
style.styleSheet.cssText = css;
13-
} else {
14-
style.appendChild(document.createTextNode(css));
15-
}head.appendChild(style);
16-
}
17-
})();
18-
19-
var GallerySlideshow = { render: function () {
20-
var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('transition', { attrs: { "name": "modal" } }, [_vm.imgIndex !== null ? _c('div', { staticClass: "modal-slideshow", on: { "click": _vm.close } }, [_c('button', { staticClass: "modal-slideshow__close", on: { "click": _vm.close } }, [_vm._v("×")]), _c('button', { staticClass: "modal-slideshow__prev", on: { "click": function ($event) {
21-
$event.stopPropagation();return _vm.onPrev($event);
22-
} } }, [_vm._v("‹")]), _vm.images ? _c('div', { staticClass: "modal-slideshow__container", on: { "click": function ($event) {
23-
$event.stopPropagation();return _vm.onNext($event);
24-
} } }, [_c('div', { staticClass: "modal-slideshow__container__image" }, [_c('img', { staticClass: "modal-slideshow__container__image__img", attrs: { "src": _vm.imageUrl }, on: { "click": function ($event) {
25-
$event.stopPropagation();return _vm.onNext($event);
26-
} } })])]) : _vm._e(), _c('button', { staticClass: "modal-slideshow__next", on: { "click": function ($event) {
27-
$event.stopPropagation();return _vm.onNext($event);
28-
} } }, [_vm._v("›")]), _c('div', { ref: "gallery", staticClass: "modal-slideshow__gallery" }, [_vm.images ? _c('div', { staticClass: "modal-slideshow__gallery__title" }, [_vm._v(_vm._s(_vm.imgIndex + 1) + " / " + _vm._s(_vm.images.length))]) : _vm._e(), _vm.images ? _c('div', { staticClass: "modal-slideshow__gallery__container", style: { transform: 'translate(' + _vm.galleryXPos + 'px, 0)' } }, _vm._l(_vm.images, function (image, i) {
29-
return _c('img', { staticClass: "modal-slideshow__gallery__container__img", class: { 'modal-slideshow__gallery__container__img--active': i === _vm.imgIndex }, attrs: { "src": image }, on: { "click": function ($event) {
30-
$event.stopPropagation();_vm.onClickThumb(image, i);
31-
} } });
32-
})) : _vm._e()])]) : _vm._e()]);
33-
}, staticRenderFns: [],
7+
//
8+
//
9+
//
10+
//
11+
//
12+
//
13+
//
14+
//
15+
//
16+
//
17+
//
18+
//
19+
//
20+
//
21+
//
22+
//
23+
//
24+
//
25+
//
26+
//
27+
//
28+
//
29+
30+
var script = {
3431
props: ['images', 'index'],
3532
mounted() {
3633
window.addEventListener('keydown', e => {
@@ -105,6 +102,185 @@
105102
}
106103
};
107104

105+
const __vue_script__ = script;
106+
107+
/* template */
108+
var __vue_render__ = function () {
109+
var _vm = this;
110+
var _h = _vm.$createElement;
111+
var _c = _vm._self._c || _h;
112+
return _c("transition", { attrs: { name: "modal" } }, [_vm.imgIndex !== null ? _c("div", { staticClass: "modal-slideshow", on: { click: _vm.close } }, [_c("button", {
113+
staticClass: "modal-slideshow__close",
114+
on: { click: _vm.close }
115+
}, [_vm._v("×")]), _vm._v(" "), _c("button", {
116+
staticClass: "modal-slideshow__prev",
117+
on: {
118+
click: function ($event) {
119+
$event.stopPropagation();
120+
return _vm.onPrev($event);
121+
}
122+
}
123+
}, [_vm._v("‹")]), _vm._v(" "), _vm.images ? _c("div", {
124+
staticClass: "modal-slideshow__container",
125+
on: {
126+
click: function ($event) {
127+
$event.stopPropagation();
128+
return _vm.onNext($event);
129+
}
130+
}
131+
}, [_c("div", { staticClass: "modal-slideshow__container__image" }, [_c("img", {
132+
staticClass: "modal-slideshow__container__image__img",
133+
attrs: { src: _vm.imageUrl },
134+
on: {
135+
click: function ($event) {
136+
$event.stopPropagation();
137+
return _vm.onNext($event);
138+
}
139+
}
140+
})])]) : _vm._e(), _vm._v(" "), _c("button", {
141+
staticClass: "modal-slideshow__next",
142+
on: {
143+
click: function ($event) {
144+
$event.stopPropagation();
145+
return _vm.onNext($event);
146+
}
147+
}
148+
}, [_vm._v("›")]), _vm._v(" "), _c("div", { ref: "gallery", staticClass: "modal-slideshow__gallery" }, [_vm.images ? _c("div", { staticClass: "modal-slideshow__gallery__title" }, [_vm._v(_vm._s(_vm.imgIndex + 1) + " / " + _vm._s(_vm.images.length))]) : _vm._e(), _vm._v(" "), _vm.images ? _c("div", {
149+
staticClass: "modal-slideshow__gallery__container",
150+
style: {
151+
transform: "translate(" + _vm.galleryXPos + "px, 0)"
152+
}
153+
}, _vm._l(_vm.images, function (image, i) {
154+
return _c("img", {
155+
staticClass: "modal-slideshow__gallery__container__img",
156+
class: {
157+
"modal-slideshow__gallery__container__img--active": i === _vm.imgIndex
158+
},
159+
attrs: { src: image },
160+
on: {
161+
click: function ($event) {
162+
$event.stopPropagation();
163+
_vm.onClickThumb(image, i);
164+
}
165+
}
166+
});
167+
})) : _vm._e()])]) : _vm._e()]);
168+
};
169+
var __vue_staticRenderFns__ = [];
170+
__vue_render__._withStripped = true;
171+
172+
const __vue_template__ = typeof __vue_render__ !== 'undefined' ? { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ } : {};
173+
/* style */
174+
const __vue_inject_styles__ = function (inject) {
175+
if (!inject) return;
176+
inject("data-v-21c98b49_0", { source: "\n.modal-slideshow {\n transition: opacity 0.2s ease;\n position: fixed;\n z-index: 9998;\n top: 0;\n left: 0;\n width: 100%;\n min-height: 100%;\n height: 100vh;\n background-color: rgba(0, 0, 0, 0.8);\n display: table;\n background-color: rgba(0, 0, 0, 0.8);\n}\n.modal-slideshow__close {\n color: #fff;\n position: absolute;\n top: 0;\n right: 0;\n background-color: transparent;\n border: none;\n font-size: 30px;\n width: 50px;\n height: 50px;\n cursor: pointer;\n}\n.modal-slideshow__close:focus {\n outline: 0;\n}\n.modal-slideshow__prev, .modal-slideshow__next {\n position: absolute;\n top: 50%;\n margin-top: -25px;\n width: 50px;\n height: 50px;\n z-index: 999;\n cursor: pointer;\n font-size: 40px;\n color: #fff;\n background-color: transparent;\n border: none;\n}\n.modal-slideshow__prev:focus, .modal-slideshow__next:focus {\n outline: 0;\n}\n.modal-slideshow__prev {\n left: 0;\n}\n.modal-slideshow__next {\n right: 0;\n}\n.modal-slideshow__container {\n position: absolute;\n cursor: pointer;\n margin: 0 auto;\n overflow: hidden;\n /*\n @include respond-to(small) {\n width: 100%;\n top: 50%;\n margin-top: -150px;\n }\n\n @include respond-to(medium) {\n max-width: 100vh;\n margin: auto;\n top: 2rem;\n left: 0.5rem;\n right: 0.5rem;\n }\n */\n max-width: 100vh;\n margin: auto;\n top: 2rem;\n left: 0.5rem;\n right: 0.5rem;\n}\n.modal-slideshow__container__image {\n background-color: #000;\n /*\n @include respond-to(small) {\n height: 274px;\n }\n\n @include respond-to(medium) {\n height: 60vh;\n border-radius: $radius-large;\n overflow: hidden;\n }\n */\n height: 60vh;\n border-radius: 12px;\n overflow: hidden;\n}\n.modal-slideshow__container__image__img {\n display: block;\n margin: 0 auto;\n height: 100%;\n}\n.modal-slideshow__gallery {\n /*\n @include respond-to(small) {\n display: none;\n }\n\n @include respond-to(medium) {\n overflow-x: hidden;\n overflow-y: hidden;\n position: absolute;\n bottom: 10px;\n margin: auto;\n max-width: 100vh;\n white-space: nowrap;\n left: 0.5rem;\n right: 0.5rem;\n }\n */\n overflow-x: hidden;\n overflow-y: hidden;\n position: absolute;\n bottom: 10px;\n margin: auto;\n max-width: 100vh;\n white-space: nowrap;\n left: 0.5rem;\n right: 0.5rem;\n}\n.modal-slideshow__gallery__title {\n color: #fff;\n margin-bottom: 0.5rem;\n}\n.modal-slideshow__gallery__container {\n overflow: visible;\n display: block;\n height: 100px;\n white-space: nowrap;\n transition: all 200ms ease-in-out;\n width: 100%;\n}\n.modal-slideshow__gallery__container__img {\n width: 100px;\n height: 100px;\n object-fit: cover;\n display: inline-block;\n float: none;\n margin-right: 20px;\n cursor: pointer;\n opacity: 0.6;\n border-radius: 8px;\n}\n.modal-slideshow__gallery__container__img--active {\n width: 100px;\n display: inline-block;\n float: none;\n opacity: 1;\n}\n\n/*# sourceMappingURL=GallerySlideshow.vue.map */", map: undefined, media: undefined });
177+
};
178+
/* scoped */
179+
const __vue_scope_id__ = undefined;
180+
/* module identifier */
181+
const __vue_module_identifier__ = undefined;
182+
/* functional template */
183+
const __vue_is_functional_template__ = false;
184+
/* component normalizer */
185+
function __vue_normalize__(template, style, script$$1, scope, functional, moduleIdentifier, createInjector, createInjectorSSR) {
186+
const component = script$$1 || {};
187+
188+
{
189+
component.__file = "/Users/norman/Projects/vue-gallery-slideshow/src/component/GallerySlideshow.vue";
190+
}
191+
192+
if (!component.render) {
193+
component.render = template.render;
194+
component.staticRenderFns = template.staticRenderFns;
195+
component._compiled = true;
196+
197+
if (functional) component.functional = true;
198+
}
199+
200+
component._scopeId = scope;
201+
202+
{
203+
let hook;
204+
if (style) {
205+
hook = function (context) {
206+
style.call(this, createInjector(context));
207+
};
208+
}
209+
210+
if (hook !== undefined) {
211+
if (component.functional) {
212+
// register for functional component in vue file
213+
const originalRender = component.render;
214+
component.render = function renderWithStyleInjection(h, context) {
215+
hook.call(context);
216+
return originalRender(h, context);
217+
};
218+
} else {
219+
// inject component registration as beforeCreate hook
220+
const existing = component.beforeCreate;
221+
component.beforeCreate = existing ? [].concat(existing, hook) : [hook];
222+
}
223+
}
224+
}
225+
226+
return component;
227+
}
228+
/* style inject */
229+
function __vue_create_injector__() {
230+
const head = document.head || document.getElementsByTagName('head')[0];
231+
const styles = __vue_create_injector__.styles || (__vue_create_injector__.styles = {});
232+
const isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
233+
234+
return function addStyle(id, css) {
235+
if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) return; // SSR styles are present.
236+
237+
const group = isOldIE ? css.media || 'default' : id;
238+
const style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
239+
240+
if (!style.ids.includes(id)) {
241+
let code = css.source;
242+
let index = style.ids.length;
243+
244+
style.ids.push(id);
245+
246+
if (isOldIE) {
247+
style.element = style.element || document.querySelector('style[data-group=' + group + ']');
248+
}
249+
250+
if (!style.element) {
251+
const el = style.element = document.createElement('style');
252+
el.type = 'text/css';
253+
254+
if (css.media) el.setAttribute('media', css.media);
255+
if (isOldIE) {
256+
el.setAttribute('data-group', group);
257+
el.setAttribute('data-next-index', '0');
258+
}
259+
260+
head.appendChild(el);
261+
}
262+
263+
if (isOldIE) {
264+
index = parseInt(style.element.getAttribute('data-next-index'));
265+
style.element.setAttribute('data-next-index', index + 1);
266+
}
267+
268+
if (style.element.styleSheet) {
269+
style.parts.push(code);
270+
style.element.styleSheet.cssText = style.parts.filter(Boolean).join('\n');
271+
} else {
272+
const textNode = document.createTextNode(code);
273+
const nodes = style.element.childNodes;
274+
if (nodes[index]) style.element.removeChild(nodes[index]);
275+
if (nodes.length) style.element.insertBefore(textNode, nodes[index]);else style.element.appendChild(textNode);
276+
}
277+
}
278+
};
279+
}
280+
/* style inject SSR */
281+
282+
var GallerySlideshow = __vue_normalize__(__vue_template__, __vue_inject_styles__, typeof __vue_script__ === 'undefined' ? {} : __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, typeof __vue_create_injector__ !== 'undefined' ? __vue_create_injector__ : function () {}, typeof __vue_create_injector_ssr__ !== 'undefined' ? __vue_create_injector_ssr__ : function () {});
283+
108284
return GallerySlideshow;
109285

110286
})));

0 commit comments

Comments
 (0)