cannot use it with custom template
Opened this issue · 0 comments
albertborsos commented
I tried to use custom template based on this:
https://github.com/ramonszo/zuck.js/blob/master/src/options.ts#L56
But when I override a template then it fails, when I try to open a story.
This is the error I receive:
Uncaught TypeError: zuck.template(...) is not a function
at eval (modal.ts:222:63)
at Array.forEach (<anonymous>)
at createStoryViewer (modal.ts:217:20)
at callback (modal.ts:508:13)
at onOpen (options.ts:22:13)
at Object.show (modal.ts:548:32)
at story.onclick (index.ts:190:23)
This is how I initialize it:
const options = {
theme: 'snapgram',
paginationArrows: true,
template: {
viewerItemBody(index, currentIndex, item) {
return `<div
class="
item
${item['seen'] === true ? 'seen' : ''}
${currentIndex === index ? 'active' : ''}
"
data-time="${item['time']}"
data-type="${item['type']}"
data-index="${index}"
data-item-id="${item['id']}">
${
item['type'] === 'video'
? `<video class="media" data-length="${item.length}" ${
item.loop ? 'loop' : ''
} muted webkit-playsinline playsinline preload="auto" src="${
item['src']
}" ${item['type']}></video>
<b class="tip muted">${option('language')['unmute']}</b>`
: `<img loading="auto" class="media" src="${item['src']}" ${item['type']} />
`
}
${
item['link']
? `<a class="tip link" href="${
item['link']
}" rel="noopener" target="_blank">
${item['linkText'] || option('language')['visitLink']}
</a>`
: ''
}
</div>`;
}
}
}; // See ./src/options.ts
const element = document.querySelector("#stories");
Zuck(element, options);
Without the custom template it works great. How can I make it work with a custom template?
Thanks!