ramonszo/zuck.js

cannot use it with custom template

Opened this issue · 0 comments

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!