blob: 0a36ad1d9ba62cf2a883df0ec41a99b0b883ef07 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
const presentationFactory = (setup) => {
return {
setup : {},
presentation: {
html: '',
css: '',
swiper: {}
},
init: function (s) {
this.setup = s;
},
prepare: function() {
let html = [];
let css = [];
this.setup.forEach( (slide, i) => {
slideHtml = `
<div class="swiper-slide" data-id="${i}">
<img src="${slide.image}" />
`;
if (slide.poi && Array.isArray(slide.poi)) {
let slideClass = `f-${i}-${j}`;
slide.poi.forEach( (poi, j) => {
if (poi.link) {
slideHtml += `<div class="${slideClass}">
<a href="${poi.link}">${poi.text}</a>
</div>`;
} else {
slideHtml += `<div class="f-${i}-${j}">
${poi.text}
</div>`;
}
if (poi.style) {
poi.style.forEach( rs => { // ruleset
css.push(`.${slideClass} ${rs}`);
});
}
})
}
slideHtml += '</div>';
html.push(slideHtml);
});
this.presentation.html = html.join('\n');
this.css = css.join('\n');
return this;
},
apply: function() {
document.querySelector(setup.selector).innerHTML = this.presentation.html;
let swiper = new Swiper(this.presentation.swiper);
console.info('presentation is ready!');
return this;
}
}
}
|
