ticker-board/dist/ticker-board.min.js

A JavaScript plugin for creating a tickerboard effect.

(()=>{"use strict";var e={438:(e,t,n)=>{n.d(t,{Z:()=>h});var i=n(645),s=n.n(i),a=n(667),r=n.n(a),o=n(679),c=n(179),l=s()((function(e){return e[1]}));l.push([e.id,"@import url(https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&amp;family=Roboto+Mono:wght@100;400&amp;display=swap);"]);var d=r()(o.Z),g=r()(c.Z);l.push([e.id,"ul.board {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: 'Nanum Gothic Coding', 'Roboto Mono', monospace;\n  overflow-x: hidden;\n  /* static for old browsers */\n  font-size: 3rem;\n  /* scale for new browsers */\n  font-size: calc(3 * var(--base-size));\n  max-width: min-content;\n  --base-size: min(1rem, 2.5vw);\n}\n\n@media screen and (max-width: 600px) {\n  ul.board {\n    overflow-x: scroll;\n  }\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\nul.board li div.ticker-row {\n  display: flex;\n  padding: calc(var(--base-size) / 4);\n}\n\nspan.ticker {\n  display: block;\n  background-size: cover;\n  background-position: center left;\n  background-repeat: no-repeat;\n  overflow-y: hidden;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  /* static for old browsers */\n  border-radius: 0.125rem;\n  padding: 0.25rem 0;\n  /* margin: 0 0.125rem; */\n  /* scale for modern browsers */\n  border-radius: calc(var(--base-size) / 8);\n  padding: calc(var(--base-size) / 4) calc(var(--base-size) / 2);\n}\n\nspan.ticker.animating {\n  animation: squeeze 0.075s ease-in-out infinite;\n}\n@keyframes squeeze {\n  50% {\n    transform: scaleY(0);\n  }\n}\n\nspan.ticker,\n[dark] span.ticker {\n  color: hsl(60, 50%, 65%);\n  background-image: url("+d+");\n}\n\n[light] span.ticker {\n  color: hsl(240, 25%, 15%);\n  background-image: url("+g+");\n}\n\n@media (prefers-color-scheme: light) {\n  span.ticker {\n    color: hsl(240, 25%, 15%);\n    background-image: url("+g+");\n  }\n}\n",""]);const h=l},645:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=e(t);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,i){"string"==typeof e&&(e=[[null,e,""]]);var s={};if(i)for(var a=0;a<this.length;a++){var r=this[a][0];null!=r&&(s[r]=!0)}for(var o=0;o<e.length;o++){var c=[].concat(e[o]);i&&s[c[0]]||(n&&(c[2]?c[2]="".concat(n," and ").concat(c[2]):c[2]=n),t.push(c))}},t}},667:e=>{e.exports=function(e,t){return t||(t={}),"string"!=typeof(e=e&&e.__esModule?e.default:e)?e:(/^['"].*['"]$/.test(e)&&(e=e.slice(1,-1)),t.hash&&(e+=t.hash),/["'() \t\n]/.test(e)||t.needQuotes?'"'.concat(e.replace(/"/g,'\\"').replace(/\n/g,"\\n"),'"'):e)}},379:(e,t,n)=>{var i,s=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),a=[];function r(e){for(var t=-1,n=0;n<a.length;n++)if(a[n].identifier===e){t=n;break}return t}function o(e,t){for(var n={},i=[],s=0;s<e.length;s++){var o=e[s],c=t.base?o[0]+t.base:o[0],l=n[c]||0,d="".concat(c," ").concat(l);n[c]=l+1;var g=r(d),h={css:o[1],media:o[2],sourceMap:o[3]};-1!==g?(a[g].references++,a[g].updater(h)):a.push({identifier:d,updater:I(h,t),references:1}),i.push(d)}return i}function c(e){var t=document.createElement("style"),i=e.attributes||{};if(void 0===i.nonce){var a=n.nc;a&&(i.nonce=a)}if(Object.keys(i).forEach((function(e){t.setAttribute(e,i[e])})),"function"==typeof e.insert)e.insert(t);else{var r=s(e.insert||"head");if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(t)}return t}var l,d=(l=[],function(e,t){return l[e]=t,l.filter(Boolean).join("\n")});function g(e,t,n,i){var s=n?"":i.media?"@media ".concat(i.media," {").concat(i.css,"}"):i.css;if(e.styleSheet)e.styleSheet.cssText=d(t,s);else{var a=document.createTextNode(s),r=e.childNodes;r[t]&&e.removeChild(r[t]),r.length?e.insertBefore(a,r[t]):e.appendChild(a)}}function h(e,t,n){var i=n.css,s=n.media,a=n.sourceMap;if(s?e.setAttribute("media",s):e.removeAttribute("media"),a&&"undefined"!=typeof btoa&&(i+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleSheet)e.styleSheet.cssText=i;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(i))}}var m=null,u=0;function I(e,t){var n,i,s;if(t.singleton){var a=u++;n=m||(m=c(t)),i=g.bind(null,n,a,!1),s=g.bind(null,n,a,!0)}else n=c(t),i=h.bind(null,n,t),s=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)};return i(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;i(e=t)}else s()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=(void 0===i&&(i=Boolean(window&&document&&document.all&&!window.atob)),i));var n=o(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var i=0;i<n.length;i++){var s=r(n[i]);a[s].references--}for(var c=o(e,t),l=0;l<n.length;l++){var d=r(n[l]);0===a[d].references&&(a[d].updater(),a.splice(d,1))}n=c}}}},179:(e,t,n)=>{n.d(t,{Z:()=>i});const i="data:image/svg+xml;base64,PHN2ZwogIHZpZXdCb3g9IjAgMCAxMDAgMTUwIgogIHdpZHRoPSIxMHB4IgogIGhlaWdodD0iMjBweCIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgaWQ9InRpY2tlci1iYWNrZ3JvdW5kIgo+CiAgPHJlY3QKICAgIHg9IjEwIgogICAgeT0iNiIKICAgIHdpZHRoPSI4MCIKICAgIGhlaWdodD0iMTM4IgogICAgc3Ryb2tlPSJyZ2IoMTkzLCAxOTMsIDE5MykiCiAgICBzdHJva2Utd2lkdGg9IjMiCiAgICByeD0iNCIKICAgIGZpbGw9InJnYigyNDYsIDI0MywgMjI0KSIKICAvPgogIDxyZWN0IHg9IjE1IiB5PSI3NCIgd2lkdGg9IjcwIiBoZWlnaHQ9IjIiIGZpbGw9InJnYigxMjgsIDEyOCwgMTI4KSIgLz4KICA8Y2lyY2xlCiAgICBjeD0iMTAiCiAgICBjeT0iNzUiCiAgICByPSI0IgogICAgZmlsbD0icmdiKDE5MywgMTkzLCAxOTMpIgogICAgc3Ryb2tlPSJyZ2IoMjQ2LCAyNDMsIDIyNCkiCiAgICBzdHJva2Utd2lkdGg9IjMiCiAgLz4KICA8Y2lyY2xlCiAgICBjeD0iOTAiCiAgICBjeT0iNzUiCiAgICByPSI0IgogICAgZmlsbD0icmdiKDE5MywgMTkzLCAxOTMpIgogICAgc3Ryb2tlPSJyZ2IoMjQ2LCAyNDMsIDIyNCkiCiAgICBzdHJva2Utd2lkdGg9IjMiCiAgLz4KPC9zdmc+"},679:(e,t,n)=>{n.d(t,{Z:()=>i});const i="data:image/svg+xml;base64,PHN2ZwogIHZpZXdCb3g9IjAgMCAxMDAgMTUwIgogIHdpZHRoPSIxMHB4IgogIGhlaWdodD0iMjBweCIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgaWQ9InRpY2tlci1iYWNrZ3JvdW5kIgo+CiAgPHJlY3QKICAgIHg9IjEwIgogICAgeT0iNiIKICAgIHdpZHRoPSI4MCIKICAgIGhlaWdodD0iMTM4IgogICAgc3Ryb2tlPSJyZ2IoMTkzLCAxOTMsIDE5MykiCiAgICBzdHJva2Utd2lkdGg9IjMiCiAgICByeD0iNCIKICAgIGZpbGw9ImhzbCgyMTUsIDE1JSwgNSUpIgogIC8+CiAgPHJlY3QgeD0iMTUiIHk9Ijc0IiB3aWR0aD0iNzAiIGhlaWdodD0iMiIgZmlsbD0icmdiKDEyOCwgMTI4LCAxMjgpIiAvPgogIDxjaXJjbGUKICAgIGN4PSIxMCIKICAgIGN5PSI3NSIKICAgIHI9IjQiCiAgICBmaWxsPSJyZ2IoMTkzLCAxOTMsIDE5MykiCiAgICBzdHJva2U9Im5vbmUiCiAgICBzdHJva2Utd2lkdGg9IjIiCiAgLz4KICA8Y2lyY2xlCiAgICBjeD0iOTAiCiAgICBjeT0iNzUiCiAgICByPSI0IgogICAgZmlsbD0icmdiKDE5MywgMTkzLCAxOTMpIgogICAgc3Ryb2tlPSJub25lIgogICAgc3Ryb2tlLXdpZHRoPSIyIgogIC8+Cjwvc3ZnPg=="}},t={};function n(i){var s=t[i];if(void 0!==s)return s.exports;var a=t[i]={id:i,exports:{}};return e[i](a,a.exports,n),a.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var i in t)n.o(t,i)&&!n.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{const e=" ",t=(t,n)=>(t||"").padEnd(n,e),i=class{constructor(t,{count:n,size:i,delay:s,theme:a}){this.options={delay:s||250,theme:a},this.size=i,this.messages=new Array(n).fill("".padEnd(this.size,e)),this._createElement(t),this._createTickers(),this.update()}_createElement(e){const t=document.createElement("ul");if(t.classList.add("board"),"string"==typeof e&&(e=document.querySelector(e)),e instanceof HTMLElement&&e.replaceWith(t),"string"==typeof this.options.theme){const{theme:e}=this.options;t.setAttribute(e,!0)}this.element=t}_createTickers(){this.tickers=this.messages.map(((e,t)=>this.setupTicker(t)))}updateCount(t){if(t!==this.tickers.length){for(;t>this.tickers.length;)this.messages.push("".padEnd(this.size,e)),this.tickers.push(this.setupTicker(this.tickers.length));for(;t<this.tickers.length;)this.tickers.pop()}}setupTicker(t){const n=new class{constructor(t,n){this.size=t,this.message=n.padEnd(t,e),this.delay=200,this.cards=this.createCards(),this.element=this.render()}updateMessage(t){this.message=t.padEnd(this.size,e),this.changeMessage()}changeMessage(){let t=this.message.replace(/\s/g,e);this.cards.forEach(((e,n)=>{setTimeout((()=>e.animateTo(t[n])),n*this.delay)})),this.screenReaderElement.innerText=this.message}createCards(){return new Array(this.size).fill("").map((()=>new class{constructor(e){this.visibleLetter=e,this.createElement()}createElement(){this.element=document.createElement("span"),this.element.classList.add("ticker"),this.element.innerText=this.visibleLetter}changeCharacter(e){this.visibleLetter=e,this.render()}animateTo(e){if(this.visibleLetter===e)return;const t=(n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789:,'- ",i=this.visibleLetter,s=e,function(e,t){return e.slice(0,e.indexOf(t)+1)}(function(e,t){return e.slice(e.indexOf(t)+1)}(n+n,i),s));var n,i,s;let a;const r=n=>{void 0===a&&(a=n);const i=n-a,s=Math.floor(i/25);s<t.length?(this.changeCharacter(t[s]),window.requestAnimationFrame(r)):(this.changeCharacter(e),this.element.classList.remove("animating"))};this.element.classList.add("animating"),window.requestAnimationFrame(r)}render(){this.element.innerText=this.visibleLetter}}(e)))}render(){const e=document.createElement("li"),t=document.createElement("div");return this.screenReaderElement=document.createElement("div"),t.setAttribute("aria-hidden","true"),t.classList.add("ticker-row"),this.screenReaderElement.classList.add("sr-only"),this.cards.forEach((e=>{t.appendChild(e.element)})),e.append(this.screenReaderElement,t),e}}(this.size,this.messages[t].padEnd(this.size,e));return this.element.appendChild(n.element),n}update(){this.tickers.forEach(((e,n)=>{this.messages[n]=t(this.messages[n],this.size),setTimeout((()=>e.updateMessage(this.messages[n])),n*this.options.delay)}))}updateMessages(e){var t,n;this.messages=(t=e,"",(n=this.tickers.length)<=t.length?t:t.concat(new Array(n-t.length).fill(""))),this.update()}},s=class extends i{constructor(e,n){super(e,n),this.defaultMessage=new Array(n.size).fill(" ").join(""),this.originalMessages=n.messages.map((e=>t(e,this.size))),this.delay=n.delay||8e3,this.initialDelay=n.initialDelay||1e3,this.rotate()}rotate(){setTimeout((()=>{this.advance(),this.interval=setInterval(this.advance.bind(this),this.delay)}),this.initialDelay)}cancel(){clearInterval(this.interval)}advance(){const e=Array.from(this.messages);e.shift();const t=this.messages[this.messages.length-1],n=this.originalMessages.indexOf(t)+1;e.push(this.originalMessages[n]),this.updateMessages(e)}};var a=n(379),r=n.n(a),o=n(438);r()(o.Z,{insert:"head",singleton:!1}),o.Z.locals,window&&(window.Board=i,window.TickerBoard=class{constructor(e,t){const{size:n,theme:i,delay:a}=t||{},r=document.querySelectorAll(e);this.boards=Array.from(r).map((e=>{const t=Array.from(e.children).map((e=>e.innerText)),r=document.createElement("ul");e.replaceWith(r);const o=new s(r,{count:t.length,size:n||Math.max(...t.map((e=>e.length))),messages:t,theme:i,delay:a});return o.element.addEventListener("click",(()=>o.advance())),o}))}advance(e){this.boards[e].advance()}},window.RotationBoard=s)})()})();