25:["$","title",null,{"children":"Typing TEXT | Алексей Туровский | Observable"}] 49:T614,class TypeWriter { constructor(txtElement, words, wait = 2000) { this.txtElement = txtElement; this.words = words; this.txt = ''; this.wordIndex = 0; this.wait = parseInt(wait, 10); this.type(); this.isDeleting = false; } type() { // Поточний індекс слова const current = this.wordIndex % this.words.length; // Отримати повний текст поточного слова const fullTxt = this.words[current]; // Перевіряю, чи видаляється if (this.isDeleting) { // Видаляю символ this.txt = fullTxt.substring(0, this.txt.length - 1); } else { // Додою символ this.txt = fullTxt.substring(0, this.txt.length + 1); } // Вставляю текст в елемент this.txtElement.innerHTML = `${this.txt}`; let typeSpeed = 150; if (this.isDeleting) { typeSpeed /= 2; } // Якщо слово повне if (!this.isDeleting && this.txt === fullTxt) { // Зроблю паузу в кінці typeSpeed = this.wait; // Встановлюю delete в true this.isDeleting = true; } else if (this.isDeleting && this.txt === '') { this.isDeleting = false; // Наступне слово this.wordIndex++; // Пауза перед тим, як почнеться друк наступного слова typeSpeed = 1000; } setTimeout(() => this.type(), typeSpeed); } } 4a:[] 29:{"id":"decade8c5e85d881","slug":null,"title":"Typing TEXT","thumbnail":"f6b8a04cc43645dae81fb99d88e0c404338fff21576b508da19d9334c39b7bdc","access_level":"public","create_time":"$D2023-12-14T11:05:02.144Z","update_time":"$D2023-12-15T12:29:35.303Z","view_time":null,"first_public_time":"$D2023-12-14T11:05:02.144Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5460752a8a7a8e64","login":"alexturik","name":"Алексей Туровский","avatar_url":"https://avatars-next.observableusercontent.com/77d67f8b3cb16e78ceafd04c6941849c33bcfbc927950cfb0195134f1eccffec","tier":"starter_2024","bio":"","following":false},"version":45,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4a2bf9036cf90f74","login":"alexturik","name":"Oleksii Turovskiy","avatar_url":"https://avatars-next.observableusercontent.com/77d67f8b3cb16e78ceafd04c6941849c33bcfbc927950cfb0195134f1eccffec","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"4a2bf9036cf90f74","login":"alexturik","name":"Oleksii Turovskiy","avatar_url":"https://avatars-next.observableusercontent.com/77d67f8b3cb16e78ceafd04c6941849c33bcfbc927950cfb0195134f1eccffec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Typing TEXT","cells":[{"id":0,"value":"# Typing TEXT","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"\n

\n \n

\n Welcome\n

\n \n

\n ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"// Ініціалізація \nfunction init() {\n const checkEl = document.querySelector('.txt-type') \n console.log('checkEl-->', checkEl)\n const txtElement = document.querySelector('.txt-type') ? document.querySelector('.txt-type') : create('span', {className: '.txt-type'});\n const dataAttrs = txtElement.getAttribute('data-words') ? txtElement.getAttribute('data-words') : setAndGetAttrs(txtElement, 'data-words')\n const dataWait = txtElement.getAttribute('data-wait') ? txtElement.getAttribute('data-wait') : setAndGetAttrs(txtElement, 'data-wait')\n\n // const words = JSON.parse(txtElement.getAttribute('data-words'));\n const words = JSON.parse(dataAttrs);\n // const wait = txtElement.getAttribute('data-wait');\n const wait = dataWait;\n // Ініціалізація TypeWriter\n const isBodyHas = document.querySelector('.txt-type') === null ? appenBodyChild(txtElement) : ''\n new TypeWriter(txtElement, words, wait);\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"\nfunction appenBodyChild(el) {\n document.getElementById(\"main\").appendChild(el)\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"\nfunction setAndGetAttrs(el, attrName) {\n const words = '[\"Word 1\", \"Word 2\"]'\n const wait = \"500\"\n const attrValue = attrName === 'data-words' ? words : wait\n el.setAttribute(attrName, attrValue)\n return el.getAttribute(attrName)\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"\nfunction create (tag, params){\n const el = document.createElement(tag)\n for(const key in params){\n el[key] = params[key]\n }\n return el\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"categoriesWithOptions = (async () => {\n console.time('categoriesWithOptions')\n const apiUrl = `https://dev.kokkeglede.no/wp-json/wc/store/v1/products/categories`;\n\n const res = []\n\n try {\n const response = await fetch(apiUrl);\n const cats = await response.json();\n cats.forEach(cat => {\n res.push({\n [cat['name']]:{\n '__typename': 'productCategory',\n slug: cat.slug,\n count: cat.count,\n id: cat.id,\n parent: cat.parent,\n image: cat.image,\n }\n })\n })\n return res;\n } catch (e) {\n console.log(e);\n return [];\n } finally {\n console.timeEnd('categoriesWithOptions');\n }\n})()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null