UNPKG

zuck.js

Version:

A javascript library that lets you add stories EVERYWHERE.

ramon.codes/projects/zuck.js

ramonszo/zuck.js

29 lines (24 loc) • 67.8 kB
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
/* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * This devtool is neither made for production nor for readable output files. * It uses "eval()" calls to create a separate source file in the browser devtools. * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) * or disable the default devtool with "devtool: false". * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). */ /******/ (() => { // webpackBootstrap /******/ "use strict"; /******/ var __webpack_modules__ = ({ /***/ "./src/index.ts": /*!**********************!*\ !*** ./src/index.ts ***! \**********************/ /***/ ((__unused_webpack_module, exports, __webpack_require__) => { eval("\nexports.__esModule = true;\nexports.Zuck = void 0;\nvar utils_1 = __webpack_require__(/*! ./utils */ \"./src/utils.ts\");\nvar options_1 = __webpack_require__(/*! ./options */ \"./src/options.ts\");\nvar modal_1 = __webpack_require__(/*! ./modal */ \"./src/modal.ts\");\nvar Zuck = function (timeline, options) {\n if (!timeline.id) {\n timeline.setAttribute('id', (0, utils_1.generateId)());\n }\n var id = timeline.id;\n var _a = (0, options_1.loadOptions)(options), option = _a.option, callbackOption = _a.callback, templateOption = _a.template, languageOption = _a.language;\n var data = option('stories') || [];\n var internalData = {};\n /* data functions */\n var saveLocalData = function (key, data) {\n try {\n if (option('localStorage') && (0, utils_1.hasWindow)()) {\n var keyName = \"zuck-\".concat(id, \"-\").concat(key);\n window.localStorage[keyName] = JSON.stringify(data);\n }\n }\n catch (e) { }\n };\n var getLocalData = function (key) {\n if (option('localStorage') && (0, utils_1.hasWindow)()) {\n var keyName = \"zuck-\".concat(id, \"-\").concat(key);\n return window.localStorage[keyName]\n ? JSON.parse(window.localStorage[keyName])\n : undefined;\n }\n else {\n return undefined;\n }\n };\n internalData.seenItems = getLocalData('seenItems') || {};\n var playVideoItem = function (storyViewer, elements, unmute) {\n var itemElement = elements === null || elements === void 0 ? void 0 : elements[1];\n var itemPointer = elements === null || elements === void 0 ? void 0 : elements[0];\n if (!itemElement || !itemPointer) {\n return false;\n }\n var cur = internalData.currentVideoElement;\n if (cur) {\n cur.pause();\n }\n if (itemElement.getAttribute('data-type') === 'video') {\n var video_1 = itemElement.querySelector('video');\n if (!video_1) {\n internalData.currentVideoElement = undefined;\n return false;\n }\n var setDuration = function () {\n var duration = video_1.duration;\n var itemPointerProgress = itemPointer.querySelector('.progress');\n if (+video_1.dataset.length) {\n duration = +video_1.dataset.length;\n }\n if (duration && itemPointerProgress) {\n itemPointerProgress.style.animationDuration = \"\".concat(duration, \"s\");\n }\n };\n setDuration();\n video_1.addEventListener('loadedmetadata', setDuration);\n internalData.currentVideoElement = video_1;\n video_1.play();\n try {\n unmuteVideoItem(video_1, storyViewer);\n }\n catch (e) {\n console.warn('Could not unmute video', unmute);\n }\n }\n else {\n internalData.currentVideoElement = undefined;\n }\n };\n var findStoryIndex = function (id) {\n return data.findIndex(function (item) { return item.id === id; });\n };\n var pauseVideoItem = function () {\n var video = internalData.currentVideoElement;\n if (video) {\n try {\n video.pause();\n }\n catch (e) { }\n }\n };\n var unmuteVideoItem = function (video, storyViewer) {\n video.muted = false;\n video.volume = 1.0;\n video.removeAttribute('muted');\n video.play();\n if (video.paused) {\n video.muted = true;\n video.play();\n }\n if (storyViewer) {\n storyViewer === null || storyViewer === void 0 ? void 0 : storyViewer.classList.remove('paused');\n }\n };\n var parseItems = function (story, forceUpdate) {\n var storyId = (story === null || story === void 0 ? void 0 : story.getAttribute('data-id')) || '';\n var storyIndex = findStoryIndex(storyId);\n var storyItems = document.querySelectorAll(\"#\".concat(id, \" [data-id=\\\"\").concat(storyId, \"\\\"] .items > li\"));\n var items = [];\n if (!option('reactive') || forceUpdate) {\n storyItems.forEach(function (_a) {\n var firstElementChild = _a.firstElementChild;\n var a = firstElementChild;\n var img = a === null || a === void 0 ? void 0 : a.firstElementChild;\n var li = a === null || a === void 0 ? void 0 : a.parentElement;\n var item = {\n id: (a === null || a === void 0 ? void 0 : a.getAttribute('data-id')) || (li === null || li === void 0 ? void 0 : li.getAttribute('data-id')),\n src: a === null || a === void 0 ? void 0 : a.getAttribute('href'),\n length: (0, utils_1.safeNum)(a === null || a === void 0 ? void 0 : a.getAttribute('data-length')),\n type: a === null || a === void 0 ? void 0 : a.getAttribute('data-type'),\n time: (a === null || a === void 0 ? void 0 : a.getAttribute('data-time')) || (li === null || li === void 0 ? void 0 : li.getAttribute('data-time')),\n link: (a === null || a === void 0 ? void 0 : a.getAttribute('data-link')) || '',\n linkText: a === null || a === void 0 ? void 0 : a.getAttribute('data-linkText'),\n preview: img === null || img === void 0 ? void 0 : img.getAttribute('src'),\n seen: li === null || li === void 0 ? void 0 : li.classList.contains('seen')\n };\n var all = a === null || a === void 0 ? void 0 : a.attributes;\n var reserved = [\n 'data-id',\n 'href',\n 'data-length',\n 'data-type',\n 'data-time',\n 'data-link',\n 'data-linkText'\n ];\n if (all) {\n for (var z = 0; z < all.length; z++) {\n if (reserved.indexOf(all[z].nodeName) === -1) {\n item[all[z].nodeName.replace('data-', '')] = all === null || all === void 0 ? void 0 : all[z].nodeValue;\n }\n }\n }\n // destruct the remaining attributes as options\n items.push(item);\n });\n data[storyIndex].items = items;\n var callback = callbackOption('onDataUpdate');\n if (callback) {\n callback(data, function () { });\n }\n }\n };\n var parseStory = function (story) {\n var _a, _b;\n var storyId = (story === null || story === void 0 ? void 0 : story.getAttribute('data-id')) || '';\n var storyIndex = findStoryIndex(storyId);\n var seen = false;\n if (internalData.seenItems[storyId]) {\n seen = true;\n }\n try {\n var storyData = {};\n if (storyIndex !== -1) {\n storyData = data[storyIndex];\n }\n storyData.id = storyId;\n storyData.photo = story === null || story === void 0 ? void 0 : story.getAttribute('data-photo');\n storyData.name = (_a = story === null || story === void 0 ? void 0 : story.querySelector('.name')) === null || _a === void 0 ? void 0 : _a.innerText;\n storyData.link = (_b = story === null || story === void 0 ? void 0 : story.querySelector('.item-link')) === null || _b === void 0 ? void 0 : _b.getAttribute('href');\n storyData.lastUpdated = (0, utils_1.safeNum)((story === null || story === void 0 ? void 0 : story.getAttribute('data-last-updated')) ||\n (story === null || story === void 0 ? void 0 : story.getAttribute('data-time')));\n storyData.seen = seen;\n if (!storyData.items) {\n storyData.items = [];\n }\n if (storyIndex === -1) {\n data.push(storyData);\n }\n else {\n data[storyIndex] = storyData;\n }\n }\n catch (e) {\n data[storyIndex] = {\n items: []\n };\n }\n if (story) {\n story.onclick = function (e) {\n e.preventDefault();\n modal.show(storyId);\n };\n }\n var callback = callbackOption('onDataUpdate');\n if (callback) {\n callback(data, function () { });\n }\n };\n var add = function (data, append) {\n var _a, _b, _c, _d;\n var storyId = data['id'] || '';\n var storyEl = document.querySelector(\"#\".concat(id, \" [data-id=\\\"\").concat(storyId, \"\\\"]\"));\n var items = data['items'];\n var story = null;\n var preview = undefined;\n if (items === null || items === void 0 ? void 0 : items[0]) {\n preview = ((_a = items === null || items === void 0 ? void 0 : items[0]) === null || _a === void 0 ? void 0 : _a.preview) || '';\n }\n if (internalData.seenItems[storyId] === true) {\n data.seen = true;\n }\n if (data) {\n data.currentPreview = preview;\n }\n if (!storyEl) {\n var storyItem = document.createElement('div');\n storyItem.innerHTML = templateOption('timelineItem')(data);\n story = storyItem.firstElementChild;\n }\n else {\n story = storyEl;\n }\n if (data.seen === false) {\n internalData.seenItems[storyId] = false;\n saveLocalData('seenItems', internalData.seenItems);\n }\n story === null || story === void 0 ? void 0 : story.setAttribute('data-id', storyId);\n if (data['photo']) {\n story === null || story === void 0 ? void 0 : story.setAttribute('data-photo', data['photo']);\n }\n story === null || story === void 0 ? void 0 : story.setAttribute('data-time', (_b = data['time']) === null || _b === void 0 ? void 0 : _b.toString());\n if (data['lastUpdated']) {\n story === null || story === void 0 ? void 0 : story.setAttribute('data-last-updated', (_c = data['lastUpdated']) === null || _c === void 0 ? void 0 : _c.toString());\n }\n else {\n story === null || story === void 0 ? void 0 : story.setAttribute('data-last-updated', (_d = data['time']) === null || _d === void 0 ? void 0 : _d.toString());\n }\n parseStory(story);\n if (!storyEl && !option('reactive')) {\n if (append) {\n timeline.appendChild(story);\n }\n else {\n (0, utils_1.prepend)(timeline, story);\n }\n }\n items === null || items === void 0 ? void 0 : items.forEach(function (item) {\n addItem(storyId, item, append);\n });\n if (!append) {\n updateStorySeenPosition();\n }\n };\n var update = add;\n var next = function () {\n modal.next();\n };\n var remove = function (storyId) {\n var _a;\n var story = document.querySelector(\"#\".concat(id, \" > [data-id=\\\"\").concat(storyId, \"\\\"]\"));\n (_a = story === null || story === void 0 ? void 0 : story.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(story);\n };\n var addItem = function (storyId, data, append) {\n var story = document.querySelector(\"#\".concat(id, \" > [data-id=\\\"\").concat(storyId, \"\\\"]\"));\n if (!option('reactive')) {\n var li = document.createElement('li');\n var el = story === null || story === void 0 ? void 0 : story.querySelectorAll('.items')[0];\n if (data['id']) {\n li.className = data['seen'] ? 'seen' : '';\n li.setAttribute('data-id', data['id']);\n }\n li.innerHTML = templateOption('timelineStoryItem')(data);\n if (append) {\n el === null || el === void 0 ? void 0 : el.appendChild(li);\n }\n else {\n (0, utils_1.prepend)(el, li);\n }\n }\n parseItems(story);\n };\n var removeItem = function (storyId, itemId) {\n var _a;\n var item = document.querySelector(\"#\".concat(id, \" > [data-id=\\\"\").concat(storyId, \"\\\"] [data-id=\\\"\").concat(itemId, \"\\\"]\"));\n if (!option('reactive')) {\n (_a = item === null || item === void 0 ? void 0 : item.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(item);\n data.forEach(function (story) {\n if (story.id === storyId) {\n story.items = story.items.filter(function (item) { return item.id !== itemId; });\n }\n });\n }\n };\n var nextItem = function (direction, event) {\n var currentStory = internalData.currentStory;\n var currentStoryIndex = findStoryIndex(internalData.currentStory);\n var currentItem = data[currentStoryIndex].currentItem;\n var storyViewer = document.querySelector(\"#zuck-modal .story-viewer[data-story-id=\\\"\".concat(currentStory, \"\\\"]\"));\n var directionNumber = direction === 'previous' ? -1 : 1;\n if (!storyViewer) {\n return false;\n }\n var currentItemElements = storyViewer.querySelectorAll(\"[data-index=\\\"\".concat(currentItem, \"\\\"]\"));\n var currentPointer = currentItemElements[0];\n var currentItemElement = currentItemElements[1];\n var navigateItem = currentItem + directionNumber;\n var nextItems = storyViewer.querySelectorAll(\"[data-index=\\\"\".concat(navigateItem, \"\\\"]\"));\n var nextPointer = nextItems[0];\n var nextItem = nextItems[1];\n if (storyViewer && nextPointer && nextItem) {\n var navigateItemCallback = function () {\n if (direction === 'previous') {\n currentPointer === null || currentPointer === void 0 ? void 0 : currentPointer.classList.remove('seen');\n currentItemElement === null || currentItemElement === void 0 ? void 0 : currentItemElement.classList.remove('seen');\n }\n else {\n currentPointer === null || currentPointer === void 0 ? void 0 : currentPointer.classList.add('seen');\n currentItemElement === null || currentItemElement === void 0 ? void 0 : currentItemElement.classList.add('seen');\n }\n currentPointer === null || currentPointer === void 0 ? void 0 : currentPointer.classList.remove('active');\n currentItemElement === null || currentItemElement === void 0 ? void 0 : currentItemElement.classList.remove('active');\n nextPointer === null || nextPointer === void 0 ? void 0 : nextPointer.classList.remove('seen');\n nextPointer === null || nextPointer === void 0 ? void 0 : nextPointer.classList.add('active');\n nextItem === null || nextItem === void 0 ? void 0 : nextItem.classList.remove('seen');\n nextItem === null || nextItem === void 0 ? void 0 : nextItem.classList.add('active');\n storyViewer\n .querySelectorAll('.time')\n .forEach(function (el) {\n el.innerText = (0, utils_1.timeAgo)(Number(nextItem.getAttribute('data-time')), option('language'));\n });\n data[currentStoryIndex].currentItem =\n data[currentStoryIndex].currentItem + directionNumber;\n var nextVideo = nextItem.querySelector('video');\n if (nextVideo) {\n nextVideo.currentTime = 0;\n }\n playVideoItem(storyViewer, nextItems, event);\n };\n var callback = callbackOption('onNavigateItem');\n callback = !callback\n ? callbackOption('onNextItem')\n : callbackOption('onNavigateItem');\n callback(currentStory, nextItem.getAttribute('data-story-id'), navigateItemCallback);\n }\n else if (storyViewer) {\n if (direction !== 'previous') {\n modal.next();\n }\n }\n return true;\n };\n var navigateItem = nextItem;\n var updateStorySeenPosition = function () {\n document\n .querySelectorAll(\"#\".concat(id, \" .story.seen\"))\n .forEach(function (el) {\n var storyId = el === null || el === void 0 ? void 0 : el.getAttribute('data-id');\n var storyIndex = findStoryIndex(storyId);\n if (storyId) {\n var newData = data[storyIndex];\n var timeline_1 = el === null || el === void 0 ? void 0 : el.parentNode;\n if (!option('reactive') && timeline_1) {\n timeline_1.removeChild(el);\n }\n update(newData, true);\n }\n });\n };\n var init = function () {\n if (timeline && timeline.querySelector('.story')) {\n timeline.querySelectorAll('.story').forEach(function (story) {\n parseStory(story);\n parseItems(story);\n });\n }\n if (option('backNative') && (0, utils_1.hasWindow)()) {\n if (window.location.hash === \"#!\".concat(id)) {\n window.location.hash = '';\n }\n window.addEventListener('popstate', function () {\n if (window.location.hash !== \"#!\".concat(id)) {\n window.location.hash = '';\n }\n }, false);\n }\n if (!option('reactive')) {\n var seenItems_1 = getLocalData('seenItems');\n if (seenItems_1) {\n Object.entries(seenItems_1).forEach(function (_a) {\n var key = _a[1];\n if (key && data[key]) {\n data[key].seen = seenItems_1[key] ? true : false;\n }\n });\n }\n }\n option('stories').forEach(function (item) {\n add(item, true);\n });\n updateStorySeenPosition();\n var avatars = option('avatars') ? 'user-icon' : 'story-preview';\n var list = option('list') ? 'list' : 'carousel';\n var rtl = option('rtl') ? 'rtl' : '';\n timeline.className += \" stories \".concat(avatars, \" \").concat(list, \" \").concat(\"\".concat(option('skin')).toLowerCase(), \" \").concat(rtl);\n return {\n id: id,\n option: option,\n callback: callbackOption,\n template: templateOption,\n language: languageOption,\n navigateItem: navigateItem,\n saveLocalData: saveLocalData,\n getLocalData: getLocalData,\n data: data,\n internalData: internalData,\n add: add,\n update: update,\n next: next,\n remove: remove,\n addItem: addItem,\n removeItem: removeItem,\n nextItem: nextItem,\n findStoryIndex: findStoryIndex,\n updateStorySeenPosition: updateStorySeenPosition,\n playVideoItem: playVideoItem,\n pauseVideoItem: pauseVideoItem,\n unmuteVideoItem: unmuteVideoItem\n };\n };\n var zuck = init();\n var modal = (0, modal_1.modal)(zuck);\n return zuck;\n};\nexports.Zuck = Zuck;\nexports[\"default\"] = exports.Zuck;\n\n\n//# sourceURL=webpack://Zuck/./src/index.ts?"); /***/ }), /***/ "./src/modal.ts": /*!**********************!*\ !*** ./src/modal.ts ***! \**********************/ /***/ ((__unused_webpack_module, exports, __webpack_require__) => { eval("\nexports.__esModule = true;\nexports.modal = void 0;\nvar utils_1 = __webpack_require__(/*! ./utils */ \"./src/utils.ts\");\nvar modal = function (zuck) {\n var id = zuck.id;\n var modalZuckContainer = document.querySelector('#zuck-modal');\n if (!modalZuckContainer && !zuck.hasModal) {\n zuck.hasModal = true;\n modalZuckContainer = document.createElement('div');\n modalZuckContainer.id = 'zuck-modal';\n if (zuck.option('cubeEffect')) {\n modalZuckContainer.className = 'with-cube';\n }\n modalZuckContainer.innerHTML = '<div id=\"zuck-modal-content\"></div>';\n modalZuckContainer.style.display = 'none';\n modalZuckContainer.setAttribute('tabIndex', '1');\n modalZuckContainer.onkeyup = function (_a) {\n var keyCode = _a.keyCode;\n var code = keyCode;\n if (code === 27) {\n modalZuckContainer.modal.close();\n }\n else if (code === 13 || code === 32) {\n modalZuckContainer.modal.next();\n }\n };\n if (zuck.option('openEffect')) {\n modalZuckContainer === null || modalZuckContainer === void 0 ? void 0 : modalZuckContainer.classList.add('with-effects');\n }\n if (zuck.option('rtl')) {\n modalZuckContainer === null || modalZuckContainer === void 0 ? void 0 : modalZuckContainer.classList.add('rtl');\n }\n (0, utils_1.onTransitionEnd)(modalZuckContainer, function () {\n var modalContent = document.querySelector('#zuck-modal-content');\n if (modalZuckContainer === null || modalZuckContainer === void 0 ? void 0 : modalZuckContainer.classList.contains('closed')) {\n if (modalContent) {\n modalContent.innerHTML = '';\n }\n modalZuckContainer.style.display = 'none';\n modalZuckContainer.classList.remove('closed');\n modalZuckContainer.classList.remove('animated');\n }\n });\n document.body.appendChild(modalZuckContainer);\n }\n var translate = function (element, to, duration, ease) {\n var _a;\n if (to === undefined || (to && isNaN(to))) {\n return;\n }\n var direction = to > 0 ? 1 : -1;\n var modalWidth = ((_a = document.querySelector('#zuck-modal')) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 1;\n var to3d = (Math.abs(to) / modalWidth) * 90 * direction;\n if (zuck.option('cubeEffect')) {\n var scaling = to3d === 0 ? 'scale(0.95)' : 'scale(0.930,0.930)';\n var modalContent = document.querySelector('#zuck-modal-content');\n if (modalContent) {\n modalContent.style.transform = scaling;\n }\n if (to3d < -90 || to3d > 90) {\n return false;\n }\n }\n var transform = !zuck.option('cubeEffect')\n ? \"translate3d(\".concat(to, \"px, 0, 0)\")\n : \"rotateY(\".concat(to3d, \"deg)\");\n if (element) {\n if (ease) {\n element.style.transitionTimingFunction = ease;\n }\n element.style.transitionDuration = \"\".concat(duration, \"ms\");\n element.style.transform = transform;\n }\n };\n var fullScreen = function (elem, cancel) {\n var anyDocument = document;\n var anyElem = elem;\n try {\n if (cancel) {\n if (anyDocument.fullscreenElement ||\n anyDocument.webkitFullscreenElement ||\n anyDocument.mozFullScreenElement ||\n anyDocument.msFullscreenElement) {\n if (anyDocument.exitFullscreen) {\n anyDocument.exitFullscreen()[\"catch\"](function () { });\n }\n else if (anyDocument.mozCancelFullScreen) {\n anyDocument.mozCancelFullScreen()[\"catch\"](function () { });\n }\n }\n }\n else {\n if (anyElem.requestFullscreen) {\n anyElem.requestFullscreen();\n }\n else if (anyElem.msRequestFullscreen) {\n anyElem.msRequestFullscreen();\n }\n else if (anyElem.mozRequestFullScreen) {\n anyElem.mozRequestFullScreen();\n }\n else if (anyElem.webkitRequestFullscreen) {\n anyElem.webkitRequestFullscreen();\n }\n }\n }\n catch (e) {\n console.warn(\"[Zuck.js] Can't access fullscreen\");\n }\n };\n var moveStoryItem = function (direction) {\n var modalContainer = document.querySelector('#zuck-modal');\n var modalSlider = document.querySelector(\"#zuck-modal-slider-\".concat(id));\n var target = '';\n var useless = '';\n var transform = 0;\n var slideItems = {\n previous: document.querySelector('#zuck-modal .story-viewer.previous'),\n next: document.querySelector('#zuck-modal .story-viewer.next'),\n viewing: document.querySelector('#zuck-modal .story-viewer.viewing')\n };\n if ((!slideItems.previous && !direction) ||\n (!slideItems.next && direction)) {\n if (!zuck.option('rtl')) {\n return false;\n }\n }\n if (!direction) {\n target = 'previous';\n useless = 'next';\n }\n else {\n target = 'next';\n useless = 'previous';\n }\n var transitionTime = 600;\n if (zuck.option('cubeEffect')) {\n if (target === 'previous') {\n transform = (0, utils_1.safeNum)(modalContainer === null || modalContainer === void 0 ? void 0 : modalContainer.slideWidth);\n }\n else if (target === 'next') {\n transform = (0, utils_1.safeNum)(modalContainer === null || modalContainer === void 0 ? void 0 : modalContainer.slideWidth) * -1;\n }\n }\n else {\n transform = (0, utils_1.findPos)(slideItems[target])[0] * -1;\n }\n translate(modalSlider, transform, transitionTime, null);\n setTimeout(function () {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;\n // set page data when transition complete\n if (zuck.option('rtl')) {\n var tmp = target;\n target = useless;\n useless = tmp;\n }\n if (target !== '' && slideItems[target] && useless !== '') {\n var currentStory = (_a = slideItems[target]) === null || _a === void 0 ? void 0 : _a.getAttribute('data-story-id');\n zuck.internalData.currentStory = currentStory;\n var oldStory = document.querySelector(\"#zuck-modal .story-viewer.\".concat(useless));\n if (oldStory) {\n (_b = oldStory === null || oldStory === void 0 ? void 0 : oldStory.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(oldStory);\n }\n if (slideItems.viewing) {\n (_c = slideItems.viewing) === null || _c === void 0 ? void 0 : _c.classList.add('stopped');\n (_d = slideItems.viewing) === null || _d === void 0 ? void 0 : _d.classList.add(useless);\n (_e = slideItems.viewing) === null || _e === void 0 ? void 0 : _e.classList.remove('viewing');\n }\n if (slideItems[target]) {\n (_f = slideItems[target]) === null || _f === void 0 ? void 0 : _f.classList.remove('stopped');\n (_g = slideItems[target]) === null || _g === void 0 ? void 0 : _g.classList.remove(target);\n (_h = slideItems[target]) === null || _h === void 0 ? void 0 : _h.classList.add('viewing');\n }\n var newTimelineItem = getStoryMorningGlory(target);\n if (newTimelineItem) {\n createStoryViewer(newTimelineItem, target);\n }\n var storyId = zuck.internalData.currentStory;\n var storyIndex = zuck.findStoryIndex(storyId);\n var storyWrap = document.querySelector(\"#zuck-modal [data-story-id=\\\"\".concat(storyId, \"\\\"]\"));\n var items = undefined;\n if (storyWrap) {\n items = storyWrap.querySelectorAll('[data-index].active');\n var duration = (_j = items === null || items === void 0 ? void 0 : items[0]) === null || _j === void 0 ? void 0 : _j.firstElementChild;\n zuck.data[storyIndex].currentItem = (0, utils_1.safeNum)((_k = items === null || items === void 0 ? void 0 : items[0]) === null || _k === void 0 ? void 0 : _k.getAttribute('data-index'));\n if (items === null || items === void 0 ? void 0 : items[0]) {\n items[0].innerHTML = zuck.template('viewerItemPointerProgress')(duration.style.cssText);\n (0, utils_1.onAnimationEnd)(duration, function () {\n zuck.nextItem();\n });\n }\n }\n translate(modalSlider, 0, 0, null);\n if (items) {\n var storyViewer = document.querySelector(\"#zuck-modal .story-viewer[data-story-id=\\\"\".concat(currentStory, \"\\\"]\"));\n zuck.playVideoItem(storyViewer, items);\n }\n zuck.callback('onView')(zuck.internalData.currentStory);\n }\n }, transitionTime + 50);\n };\n var createStoryViewer = function (storyData, className, forcePlay) {\n var modalSlider = document.querySelector(\"#zuck-modal-slider-\".concat(id));\n var storyItems = storyData['items'];\n storyData.time = storyItems && (storyItems === null || storyItems === void 0 ? void 0 : storyItems[0]['time']);\n var htmlItems = '';\n var pointerItems = '';\n var storyId = storyData['id'];\n var slides = document.createElement('div');\n var currentItem = storyData['currentItem'] || 0;\n var exists = document.querySelector(\"#zuck-modal .story-viewer[data-story-id=\\\"\".concat(storyId, \"\\\"]\"));\n if (exists) {\n return false;\n }\n slides.className = 'slides';\n storyItems.forEach(function (item, i) {\n if (currentItem > i) {\n storyData.items[i].seen = true;\n item.seen = true;\n }\n pointerItems += zuck.template('viewerItemPointer')(i, currentItem, item);\n htmlItems += zuck.template('viewerItemBody')(i, currentItem, item);\n });\n slides.innerHTML = htmlItems;\n var video = slides.querySelector('video');\n var addMuted = function (video) {\n if (video.muted) {\n storyViewer === null || storyViewer === void 0 ? void 0 : storyViewer.classList.add('muted');\n }\n else {\n storyViewer === null || storyViewer === void 0 ? void 0 : storyViewer.classList.remove('muted');\n }\n };\n if (video) {\n video.onwaiting = function () {\n if (video.paused) {\n storyViewer === null || storyViewer === void 0 ? void 0 : storyViewer.classList.add('paused');\n storyViewer === null || storyViewer === void 0 ? void 0 : storyViewer.classList.add('loading');\n }\n };\n video.onplay = function () {\n addMuted(video);\n storyViewer === null || storyViewer === void 0 ? void 0 : storyViewer.classList.remove('stopped');\n storyViewer === null || storyViewer === void 0 ? void 0 : storyViewer.classList.remove('paused');\n storyViewer === null || storyViewer === void 0 ? void 0 : storyViewer.classList.remove('loading');\n };\n video.onload =\n video.onplaying =\n video.oncanplay =\n function () {\n addMuted(video);\n storyViewer === null || storyViewer === void 0 ? void 0 : storyViewer.classList.remove('loading');\n };\n video.onvolumechange = function () {\n addMuted(video);\n };\n }\n var storyViewerWrap = document.createElement('div');\n storyViewerWrap.innerHTML = zuck.template('viewerItem')(storyData, storyItems[currentItem]);\n var storyViewer = storyViewerWrap.firstElementChild;\n var storyViewerPointerWrap = storyViewer.querySelector('.slides-pointers .wrap');\n storyViewer.className = \"story-viewer muted \".concat(className, \" \").concat(!forcePlay ? 'stopped' : '', \" \").concat(zuck.option('backButton') ? 'with-back-button' : '');\n if (storyId) {\n storyViewer.setAttribute('data-story-id', storyId);\n }\n if (storyViewerPointerWrap) {\n storyViewerPointerWrap.innerHTML = pointerItems;\n }\n storyViewer\n .querySelectorAll('.close, .back')\n .forEach(function (el) {\n el.onclick = function (e) {\n e.preventDefault();\n modalZuckContainer.modal.close();\n };\n });\n storyViewer.appendChild(slides);\n if (className === 'viewing') {\n zuck.playVideoItem(storyViewer, storyViewer.querySelectorAll(\"[data-index=\\\"\".concat(currentItem, \"\\\"].active\")), undefined);\n }\n storyViewer\n .querySelectorAll('.slides-pointers [data-index] > .progress')\n .forEach(function (el) {\n (0, utils_1.onAnimationEnd)(el, function () {\n zuck.nextItem(undefined);\n });\n });\n if (!modalSlider) {\n return;\n }\n if (className === 'previous') {\n (0, utils_1.prepend)(modalSlider, storyViewer);\n }\n else {\n modalSlider.appendChild(storyViewer);\n }\n };\n var createStoryTouchEvents = function (modalSlider) {\n var modalContainer = document.querySelector('#zuck-modal');\n var enableMouseEvents = true;\n var position = null;\n var touchOffset = null;\n var isScrolling = null;\n var delta = null;\n var timer = undefined;\n var nextTimer = undefined;\n var touchStart = function (event) {\n var storyViewer = document.querySelector('#zuck-modal .viewing');\n var storyViewerWrap = document.querySelector('#zuck-modal .story-viewer');\n if (event.target.nodeName === 'A') {\n return;\n }\n var touches = event.touches\n ? event.touches[0]\n : event;\n var pos = (0, utils_1.findPos)(document.querySelector('#zuck-modal .story-viewer.viewing'));\n if (modalContainer) {\n modalContainer.slideWidth = storyViewerWrap === null || storyViewerWrap === void 0 ? void 0 : storyViewerWrap.offsetWidth;\n modalContainer.slideHeight = storyViewerWrap === null || storyViewerWrap === void 0 ? void 0 : storyViewerWrap.offsetHeight;\n }\n position = {\n x: pos[0],\n y: pos[1]\n };\n var clientX = touches.clientX;\n var clientY = touches.clientY;\n touchOffset = {\n x: clientX,\n y: clientY,\n time: Date.now(),\n valid: true\n };\n if (clientY < 80 || clientY > (0, utils_1.safeNum)(modalContainer === null || modalContainer === void 0 ? void 0 : modalContainer.slideHeight) - 80) {\n touchOffset.valid = false;\n }\n else {\n event.preventDefault();\n isScrolling = undefined;\n delta = {};\n if (enableMouseEvents) {\n modalSlider === null || modalSlider === void 0 ? void 0 : modalSlider.addEventListener('mousemove', touchMove);\n modalSlider === null || modalSlider === void 0 ? void 0 : modalSlider.addEventListener('mouseup', touchEnd);\n modalSlider === null || modalSlider === void 0 ? void 0 : modalSlider.addEventListener('mouseleave', touchEnd);\n }\n modalSlider === null || modalSlider === void 0 ? void 0 : modalSlider.addEventListener('touchmove', touchMove);\n modalSlider === null || modalSlider === void 0 ? void 0 : modalSlider.addEventListener('touchend', touchEnd);\n if (storyViewer) {\n storyViewer === null || storyViewer === void 0 ? void 0 : storyViewer.classList.add('paused');\n }\n zuck.pauseVideoItem();\n timer = setTimeout(function () {\n if (storyViewer) {\n storyViewer === null || storyViewer === void 0 ? void 0 : storyViewer.classList.add('longPress');\n }\n }, 600);\n nextTimer = setTimeout(function () {\n clearInterval(nextTimer);\n nextTimer = undefined;\n }, 250);\n }\n };\n var touchMove = function (event) {\n var touches = event.touches\n ? event.touches[0]\n : event;\n var clientX = touches.clientX;\n var clientY = touches.clientY;\n if (touchOffset && touchOffset.valid) {\n delta = {\n x: clientX - touchOffset.x,\n y: clientY - touchOffset.y\n };\n if (typeof isScrolling === 'undefined') {\n isScrolling = !!(isScrolling || Math.abs(delta.x) < Math.abs(delta.y));\n }\n if (!isScrolling && touchOffset) {\n event.preventDefault();\n translate(modalSlider, (0, utils_1.safeNum)(position === null || position === void 0 ? void 0 : position.x) + (0, utils_1.safeNum)(delta === null || delta === void 0 ? void 0 : delta.x), 0, null);\n }\n }\n };\n var touchEnd = function (event) {\n var storyViewer = document.querySelector('#zuck-modal .viewing');\n var lastTouchOffset = touchOffset;\n var duration = touchOffset ? Date.now() - touchOffset.time : undefined;\n var isValid = (Number(duration) < 300 && Math.abs((0, utils_1.safeNum)(delta === null || delta === void 0 ? void 0 : delta.x)) > 25) ||\n Math.abs((0, utils_1.safeNum)(delta === null || delta === void 0 ? void 0 : delta.x)) > (0, utils_1.safeNum)(modalContainer === null || modalContainer === void 0 ? void 0 : modalContainer.slideWidth) / 3;\n var direction = (0, utils_1.safeNum)(delta === null || delta === void 0 ? void 0 : delta.x) < 0;\n var index = direction\n ? document.querySelector('#zuck-modal .story-viewer.next')\n : document.querySelector('#zuck-modal .story-viewer.previous');\n var isOutOfBounds = (direction && !index) || (!direction && !index);\n if (touchOffset && !touchOffset.valid) {\n }\n else {\n if (delta) {\n if (!isScrolling) {\n if (isValid && !isOutOfBounds) {\n moveStoryItem(direction);\n }\n else {\n translate(modalSlider, (0, utils_1.safeNum)(position === null || position === void 0 ? void 0 : position.x), 300);\n }\n }\n touchOffset = undefined;\n if (enableMouseEvents) {\n modalSlider === null || modalSlider === void 0 ? void 0 : modalSlider.removeEventListener('mousemove', touchMove);\n modalSlider === null || modalSlider === void 0 ? void 0 : modalSlider.removeEventListener('mouseup', touchEnd);\n modalSlider === null || modalSlider === void 0 ? void 0 : modalSlider.removeEventListener('mouseleave', touchEnd);\n }\n modalSlider === null || modalSlider === void 0 ? void 0 : modalSlider.removeEventListener('touchmove', touchMove);\n modalSlider === null || modalSlider === void 0 ? void 0 : modalSlider.removeEventListener('touchend', touchEnd);\n }\n var video = zuck.internalData.currentVideoElement;\n if (timer) {\n clearInterval(timer);\n }\n if (storyViewer) {\n zuck.playVideoItem(storyViewer, storyViewer.querySelectorAll('.active'), undefined);\n storyViewer === null || storyViewer === void 0 ? void 0 : storyViewer.classList.remove('longPress');\n storyViewer === null || storyViewer === void 0 ? void 0 : storyViewer.classList.remove('paused');\n }\n if (nextTimer) {\n clearInterval(nextTimer);\n nextTimer = undefined;\n var navigateItem = function () {\n if (!direction) {\n if ((0, utils_1.safeNum)(lastTouchOffset === null || lastTouchOffset === void 0 ? void 0 : lastTouchOffset.x) > document.body.offsetWidth / 3 ||\n !zuck.option('previousTap')) {\n if (zuck.option('rtl')) {\n zuck.navigateItem('previous', event);\n }\n else {\n zuck.navigateItem('next', event);\n }\n }\n else {\n if (zuck.option('rtl')) {\n zuck.navigateItem('next', event);\n }\n else {\n zuck.navigateItem('previous', event);\n }\n }\n }\n };\n var storyViewerViewing = document.querySelector('#zuck-modal .viewing');\n if (storyViewerViewing && video) {\n if (storyViewerViewing === null || storyViewerViewing === void 0 ? void 0 : storyViewerViewing.classList.contains('muted')) {\n zuck.unmuteVideoItem(video, storyViewerViewing);\n }\n else {\n navigateItem();\n }\n }\n else {\n navigateItem();\n return false;\n }\n }\n }\n };\n modalSlider === null || modalSlider === void 0 ? void 0 : modalSlider.addEventListener('touchstart', touchStart);\n if (enableMouseEvents) {\n modalSlider === null || modalSlider === void 0 ? void 0 : modalSlider.addEventListener('mousedown', touchStart);\n }\n };\n var getStoryMorningGlory = function (what) {\n // my wife told me to stop singing Wonderwall. I SAID MAYBE.\n var currentStory = zuck.internalData.currentStory;\n if (currentStory && what !== '') {\n var element = document.querySelector(\"#\".concat(id, \" [data-id=\\\"\").concat(currentStory, \"\\\"]\"));\n var foundStory = what === 'previous'\n ? element.previousElementSibling\n : element.nextElementSibling;\n if (foundStory) {\n var storyId = foundStory.getAttribute('data-id');\n var storyIndex = zuck.findStoryIndex(storyId);\n var data = zuck.data[storyIndex] || false;\n return data;\n }\n }\n return false;\n };\n var show = function (storyId) {\n var modalContainer = document.querySelector('#zuck-modal');\n var callback = function () {\n var modalContent = document.querySelector('#zuck-modal-content');\n modalContent.innerHTML = \"<div id=\\\"zuck-modal-slider-\".concat(id, \"\\\" class=\\\"slider\\\"></div>\");\n if (!modalContent || !storyId) {\n return;\n }\n var storyIndex = zuck.findStoryIndex(storyId);\n var storyData = zuck.data[storyIndex];\n var currentItem = storyData.currentItem || 0;\n var modalSlider = document.querySelector(\"#zuck-modal-slider-\".concat(id));\n createStoryTouchEvents(modalSlider);\n zuck.internalData.currentStory = storyId;\n storyData.currentItem = currentItem;\n if (zuck.option('backNative') && (0, utils_1.hasWindow)()) {\n window.location.hash = \"#!\".concat(id);\n }\n var previousItemData = getStoryMorningGlory('previous');\n if (previousItemData) {\n createStoryViewer(previousItemData, 'previous');\n }\n createStoryViewer(storyData, 'viewing', true);\n var nextItemData = getStoryMorningGlory('next');\n if (nextItemData) {\n createStoryViewer(nextItemData, 'next');\n }\n if (zuck.option('autoFullScreen')) {\n modalContainer === null || modalContainer === void 0 ? void 0 : modalContainer.classList.add('fullscreen');\n }\n var tryFullScreen = function () {\n if ((modalContainer === null || modalContainer === void 0 ? void 0 : modalContainer.classList.contains('fullscreen')) &&\n zuck.option('autoFullScreen') &&\n document.body.offsetWidth <= 1024) {\n fullScreen(modalContainer);\n }\n modalContainer === null || modalContainer === void 0 ? void 0 : modalContainer.focus();\n };\n var storyViewerWrap = document.querySelector('#zuck-modal .story-viewer');\n if (zuck.option('openEffect') && modalContainer) {\n var storyEl = document.querySelector(\"#\".concat(id, \" [data-id=\\\"\").concat(storyId, \"\\\"] .item-preview\"));\n var pos = (0, utils_1.findPos)(storyEl);\n modalContainer.style.marginLeft = \"\".concat(pos[0] + (0, utils_1.safeNum)(storyEl === null || storyEl === void 0 ? void 0 : storyEl.offsetWidth) / 2, \"px\");\n modalContainer.style.marginTop = \"\".concat(pos[1] + (0, utils_1.safeNum)(storyEl === null || storyEl === void 0 ? void 0 : storyEl.offsetHeight) / 2, \"px\");\n modalContainer.style.display = 'block';\n modalContainer.slideWidth = (storyViewerWrap === null || storyViewerWrap === void 0 ? void 0 : storyViewerWrap.offsetWidth) || 0;\n setTimeout(function () {\n modalContainer === null || modalContainer === void 0 ? void 0 : modalContainer.classList.add('animated');\n }, 10);\n setTimeout(function () {\n tryFullScreen();\n }, 300); // because effects\n }\n else {\n if (modalContainer) {\n modalContainer.style.display = 'block';\n modalContainer.slideWidth = (storyViewerWrap === null || storyViewerWrap === void 0 ? void 0 : storyViewerWrap.offsetWidth) || 0;\n }\n tryFullScreen();\n }\n zuck.callback('onView')(storyId);\n };\n zuck.callback('onOpen')(storyId, callback);\n };\n var next = function () {\n var callback = function () {\n var lastStory = zuck.internalData.currentStory;\n var lastStoryIndex = zuck.findStoryIndex(lastStory);\n var lastStoryTimelineElement = document.querySelector(\"#\".concat(id, \" [data-id=\\\"\").concat(lastStory, \"\\\"]\"));\n if (lastStoryTimelineElement) {\n