2b:null 2c:["$","title",null,{"children":"gifstarter: run gif animations by click | Peter Hofmann | Observable"}] 31:T52a,md` *v3.0 | 12.03.19* This little helper starts a gif animation as soon as you click on its corresponding preview image and ends it when the mouse moves away from the image or clicks on it again. The \`\`src\`\` of the image is then being replaced with the actual gif. Note that filenames have to be the same, they are only recognized by extension – \`\`.png\`\` for previews (or change \`\`PREV_EXTENSION\`\` to whatever you prefer), \`\`.gif\`\` for gifs, obviously. ### Usage >

gifstarter(url[, options])

yields the ${DOM.text('')}-tag in a div-wrapper together with the gifstarter-overlay. \`\`options\`\` include: - \`\`figure\`\` *(boolean)*: wrap in figure-tag - \`\`caption\`\` *(string)*: add figcaption to figure-tag - \`\`wrapper\`\` *(html element)*: wrapper-tag for everything - \`\`id\`\` *(string)*: unique id for the gifstarter-wrapper Import it like this: >

import {gifstarter, prevCSS} from '@formsandlines/utility-to-run-gif-animations-by-click

You also have to execute the CSS function: >

prevCSS()

Feel free to replace \`\`prevHTML\`\` with something else for a different preview overlay. --- `32:T442,prevCSS = () => { return html` ` }33:[] 2f:{"id":"70842421eaa8dd14","slug":"utility-to-run-gif-animations-by-click","title":"gifstarter: run gif animations by click","thumbnail":"3c40ec2f1d7dffd60cb5325680813834c2a900696db5d4ed399ee088ddf12a82","access_level":"public","create_time":"$D2019-03-11T10:14:42.150Z","update_time":"$D2019-03-12T20:05:35.753Z","view_time":null,"first_public_time":"$D2019-03-11T22:31:38.550Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e581d618919cd266","login":"formsandlines","name":"Peter Hofmann","avatar_url":"https://avatars-next.observableusercontent.com/da037e21011ef7f0553d73420763f4a2071c0bd9191552279dd8ebc154fc28b8","tier":"starter_2024"},"version":954,"publish_version":954,"role":null,"authored":false,"authors":[{"type":"individual","id":"b20948974f4dc365","login":"formsandlines","name":"Peter Hofmann","avatar_url":"https://avatars-next.observableusercontent.com/da037e21011ef7f0553d73420763f4a2071c0bd9191552279dd8ebc154fc28b8","tier":null}],"members":[{"type":"individual","id":"b20948974f4dc365","login":"formsandlines","name":"Peter Hofmann","avatar_url":"https://avatars-next.observableusercontent.com/da037e21011ef7f0553d73420763f4a2071c0bd9191552279dd8ebc154fc28b8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"929942c346668d9a","slug":"components","title":"Components","owner":{"id":"e581d618919cd266","login":"formsandlines","name":"Peter Hofmann"}},"type":"notebook","body":{"title":"gifstarter: run gif animations by click","cells":[{"id":122,"value":"md`# gifstarter: run gif animations by click`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":348,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":374,"value":"md`### Simple demo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"gifstarter(myurl+'.png')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":922,"value":"md`### Demo with wrapper, figure tag and figcaption`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":911,"value":"{\n const wrapper = html`

`;\n \n yield* gifstarter(myurl+'.png', {id: 'first', figure: true, caption: 'Example 1', wrapper: wrapper});\n yield* gifstarter(myurl+'.png', {id: 'second', figure: true, caption: 'Example 2', wrapper: wrapper});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":394,"value":"html`

Source: Wikimedia Commons / File:Rotating earth (large).gif

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":383,"value":"md`## HTML overlay`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":250,"value":"prevHTML = `

\n\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":387,"value":"md`## CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":434,"value":"CLASSNAMES = ({gifmaker: 'gif', preview: 'preview', prevDisplay: 'gif-display'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":327,"value":"prevCSS();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":152,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":392,"value":"md`## gifstarter utility`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":500,"value":"PREV_EXTENSION = '.png'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":631,"value":"gifstarter = function* (url, _opts) {\n const opts = Object.assign({id: DOM.uid().id, figure: false, caption: '', wrapper: null}, _opts);\n\n const gifElem = gifstarterWrapper(url, opts.id);\n let innerElem = gifElem;\n if (opts.figure) {\n innerElem = html` \n

\n ${gifElem}\n ${ (opts.caption.length > 0) ? html`

${opts.caption}

` : '' }\n `;\n }\n const outerElem = (opts.wrapper !== null) ? \n (opts.wrapper.appendChild(innerElem), opts.wrapper) : innerElem;\n yield outerElem;\n visibility().then(gifstarterEvents(opts.id));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"gifstarterWrapper = function (url, id) {\n return html`

${prevHTML}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"gifstarterEvents = function (containerId) {\n const container = document.getElementById(containerId);\n const img = container.getElementsByTagName('img')[0];\n const prevDisplay = container.querySelector('.'+CLASSNAMES.prevDisplay);\n const url = img.getAttribute('src');\n\n prevDisplay.addEventListener('click', e => {\n if (container.classList.contains(CLASSNAMES.preview)) {\n img.setAttribute('src', url.replace(PREV_EXTENSION, '.gif'));\n container.classList.remove(CLASSNAMES.preview);\n }\n else {\n img.setAttribute('src', url);\n container.classList.add(CLASSNAMES.preview);\n }\n });\n prevDisplay.addEventListener('mouseleave', e => {\n img.setAttribute('src', url);\n container.classList.add(CLASSNAMES.preview);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":410,"value":"md`\n---\n\n### etc.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":407,"value":"myurl = 'https://playground.formsandlines.eu/res/gifdemo/Rotating_earth_(large)'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"