59 lines
1.5 KiB
JavaScript
59 lines
1.5 KiB
JavaScript
|
import Slide from './Slide';
|
||
|
|
|
||
|
|
export default class {
|
||
|
|
constructor() {
|
||
|
|
this.slideCount = 0;
|
||
|
|
|
||
|
|
this.addSlides(FleetCart.data['slider.slides']);
|
||
|
|
|
||
|
|
if (this.slideCount === 0) {
|
||
|
|
this.addSlide();
|
||
|
|
}
|
||
|
|
|
||
|
|
this.attachEventListeners();
|
||
|
|
this.makeSlidesSortable();
|
||
|
|
}
|
||
|
|
|
||
|
|
addSlides(slides) {
|
||
|
|
for (let attributes of slides) {
|
||
|
|
this.addSlide(attributes);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
addSlide(attributes = {}) {
|
||
|
|
let slide = new Slide({ slideNumber: this.slideCount++, slide: attributes });
|
||
|
|
|
||
|
|
$('#slides-wrapper').append(slide.render());
|
||
|
|
}
|
||
|
|
|
||
|
|
attachEventListeners() {
|
||
|
|
$('.add-slide').on('click', () => {
|
||
|
|
this.addSlide();
|
||
|
|
});
|
||
|
|
|
||
|
|
this.attachImagePickerEventListener();
|
||
|
|
}
|
||
|
|
|
||
|
|
attachImagePickerEventListener() {
|
||
|
|
$('#slides-wrapper').on('click', '.slide-image', (e) => {
|
||
|
|
let picker = new MediaPicker({ type: 'image' });
|
||
|
|
|
||
|
|
picker.on('select', (file) => {
|
||
|
|
let html = `
|
||
|
|
<img src="${file.path}">
|
||
|
|
<input type="hidden" name="slides[${e.currentTarget.dataset.slideNumber}][file_id]" value="${file.id}">
|
||
|
|
`;
|
||
|
|
|
||
|
|
$(e.currentTarget).html(html);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
makeSlidesSortable() {
|
||
|
|
Sortable.create(document.getElementById('slides-wrapper'), {
|
||
|
|
handle: '.slide-drag',
|
||
|
|
animation: 150,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|