uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
105 lines (64 loc) • 1.88 kB
JavaScript
import LightboxPanel from './lightbox-panel';
import {$$, assign, data, findIndex, isElement, on, parseOptions, uniqueBy} from 'uikit-util';
export default {
install,
props: {toggle: String},
data: {toggle: 'a'},
computed: {
toggles: {
get({toggle}, $el) {
return $$(toggle, $el);
},
watch() {
this.hide();
}
}
},
disconnected() {
this.hide();
},
events: [
{
name: 'click',
delegate() {
return `${this.toggle}:not(.uk-disabled)`;
},
handler(e) {
e.preventDefault();
this.show(e.current);
}
}
],
methods: {
show(index) {
const items = uniqueBy(this.toggles.map(toItem), 'source');
if (isElement(index)) {
const {source} = toItem(index);
index = findIndex(items, ({source: src}) => source === src);
}
this.panel = this.panel || this.$create('lightboxPanel', assign({}, this.$props, {items}));
on(this.panel.$el, 'hidden', () => this.panel = false);
return this.panel.show(index);
},
hide() {
return this.panel && this.panel.hide();
}
}
};
function install(UIkit, Lightbox) {
if (!UIkit.lightboxPanel) {
UIkit.component('lightboxPanel', LightboxPanel);
}
assign(
Lightbox.props,
UIkit.component('lightboxPanel').options.props
);
}
function toItem(el) {
const item = {};
['href', 'caption', 'type', 'poster', 'alt', 'attrs'].forEach(attr => {
item[attr === 'href' ? 'source' : attr] = data(el, attr);
});
item.attrs = parseOptions(item.attrs);
return item;
}