{ "functions": { "anime": { "requires": ["animejs"], "js": "let args = arguments[0]; if (!args.duration) {args.duration = 1000;} for (const callback of ['begin','complete','update']) {if (args[callback]) {var jsonCallback = args[callback]; args[callback] = function(anim) {js.callback({do:jsonCallback});} } }; anime(args);", "ref": "https://animejs.com/documentation/" }, "RevealFx": { "requires": ["animejs", "revealFx"], "js": "let selector = arguments[0]; let args = arguments[1]; let rev = new RevealFx(document.querySelector(selector),args);" }, "loadSVG": { "requires": ["snapsvg"], "js": "let args = arguments[0]; Snap.load(args.url, function (svgData) {Snap(args.selector).append(svgData); js.do(args.on.success)});" }, "loadSVGImage": { "requires": ["snapsvg"], "js": "let args = arguments[0]; Snap.load(args.url, function (svgData) {Snap(args.selector).append(svgData); js.do(args.on.success)});" }, "animateSVG": { "requires": ["snapsvg"], "js": "let args = arguments[0]; if(!args.engine || args.engine=='snap') {Snap.select(args.selector).animate(args.attrs, args.duration, mina[args.easing]);}" }, "qrcode-svg": { "requires": ["qrcode-svg"], "js": "let args = arguments[0]; var qrcode = new QRCode(args.config); document.querySelector(args.selector).innerHTML = qrcode.svg();" }, "sound": { "requires": ["howler.js"], "js": "let args = arguments[0]; let method = arguments[1] ||'play'; if (args.onend) {args.onend = js.do(args.onend)} var sound = new Howl(args); sound[method]();" }, "rxjs": { "requires": ["rxjs"], "js": "let args = arguments[0]; const clicks = rxjs.fromEvent(document, args.event); clicks.subscribe(ev => { js.callback({do:args.do, var:'target', value: {x: ev.x, y:ev.y, el: ev.target} }) });" } }, "parts": { "ui": { "hide": { "do": [ { "console warn": "hide {arguments}" }, { "attr": { "selector": "{arguments}", "addClass": "hidden" } } ] }, "show": { "do": [ { "console warn": "show {arguments}" }, { "attr": { "selector": "{arguments}", "removeClass": "hidden" } } ] }, "out": { "do": [ { "anime": { "targets": "{arguments:selector}", "opacity": 0, "duration": "{arguments:duration}", "easing": "{arguments:easing}", "complete": [ ] } } ] }, "in": { "do": [ { "anime": { "targets": "{arguments:selector}", "opacity": 1, "duration": "{arguments:duration}", "easing": "{arguments:easing}", "begin": [ ] } } ] }, "icon": { "do": [ { "html": [ { "if": "'{arguments:name}' !== ''", "span": { "attr": { "data-icon": "{arguments:name}", "class": "iconify text-[{arguments:size}px] m-[{arguments:margin}px] aspect-square" } } } ] } ] }, "icon2": { "plugins": [ { "name": "iconify", "type": "script", "version": "3.1.1", "url": "https://cdnjs.cloudflare.com/ajax/libs/iconify/3.1.1/iconify.min.js" } ], "div inline-block text-center": { "html": [ { "div": { "attr": { "class": "mx-auto rounded-full {arguments:class}", "style": { "background": "{arguments:background}", "width": "{arguments:width}px", "height": "{arguments:height}px", "padding": "{js:{arguments:padding} ? '{arguments:padding}' : '5px'}", "box-sizing": "content-box" } }, "style": "{arguments:style}", "span": { "attr": { "class": "{js:{arguments:inline} ? 'iconify-inline' : 'iconify'}", "data-icon": "{arguments:name}", "data-flip": "{arguments:flip}", "data-width": "{js:{arguments:width} ? {arguments:width} : 64}", "data-height": "{js:{arguments:height} ? {arguments:height} : 64}", "data-rotate": "{js:{arguments:rotate} ? '{arguments:rotate}deg' : ''}" }, "style": { "float": "none", "color": "{arguments:color}" } } } }, { "span": { "html": "{arguments:text}", "style": "{arguments:textStyle}" } } ] } }, "buttonOld": { "plugins": [ { "name": "iconify", "type": "script", "version": "3.1.1", "url": "https://cdnjs.cloudflare.com/ajax/libs/iconify/3.1.1/iconify.min.js" } ], "div": { "attr": { "class": "mx-1 my-auto py-0 px-[8px] h-[40px] rounded-full cursor-pointer inline-flex align-center items-center bg-[{arguments:background}] border-solid border-[1px] border-[{arguments:color}] text-[17px] text-[{arguments:color}] {arguments:class}", "id": "{arguments:id}", "data-value": "{arguments:data-value}" }, "html": [ { "i": { "if": "{arguments:icon}", "attr": { "class": "iconify text-[{arguments:size}] mx-0", "data-icon": "{arguments:icon}" } } }, { "span hidden sm:block mx-0 px-[5px]": { "if": "'{arguments:text}' !== ''", "text": "{arguments:text}" } } ], "on": "{arguments:on}" } }, "socialIcons": [ { "html": [ { "div id=socialIcons text-center pt-[30px]": { "for": { "name": "socialIcons", "of": "{arguments:icons}", "html": [ { "span p-[10px]": { "html": [ { "elio:icon": { "setup": { "width": 64, "height": 64, "inline": true, "name": "{socialIcons:icon}", "text": " ", "padding": "30px" } } } ] , "on": { "mousedown": [ { "js": "window.open('{socialIcons:url}', '_blank')" } ] } } } ] } } } ] } ], "headerIcons": [ { "div id=headerIconUser mx-[5px]": { "html": [ { "selector": "#headerIconUser", "elio:icon": { "setup": { "width": 40, "height": 40, "inline": true, "name": "jsonic:user", "text": " " } } } ], "on": { "mousedown": { "link": "/account" } } } }, { "div mx-[5px]": { "attr": { "class": "currentLang", "data-value": "currentLang" }, "elio:icon": { "setup": { "width": 32, "height": 32, "inline": true, "name": "jsonic:lang{setup.language}", "text": " " } }, "on": { "mousedown": { "alert": { "title": "Select language", "showConfirmButton": false, "html": { "div": { "style": { "margin": "6px 10px 6px 0px", "text-align": "center" }, "for": { "name": "langId", "of": "{setup.languages}", "html": { "div": { "attr": { "class": "langIcons inline-block", "data-value": "{langId}" }, "elio:icon": { "setup": { "width": 64, "height": 64, "inline": true, "name": "jsonic:lang{langId}", "text": " " } }, "on": { "mousedown": [ { "do": { "selector": ".currentLang[data-value='currentLang']", "attr": { "data-icon": "jsonic:lang{on:target.dataset.value}" } } }, { "data ext": "{js:('{langId}'=='en') ? 'com' : '{langId}'}" }, { "link": "https://elioiot.{data ext}{window:location pathname}" }, { "lang": "{on:target.dataset.value}" }, { "alert": { "do": "close" } } ] } } } } } } } } } } } ], "hamburger": { "div": { "attr": { "class": "jsonic-menu-btn hamburger z-[999]" }, "a": { "i": { "attr": { "class": "iconify block text-[{arguments:colorhamburger}] dark:text-[{arguments:colorhamburgerdark}] bg-[transparent] text-[50px] w-[50px] h-[50px] cursor-pointer lg:hidden", "data-icon": "jsonic:menu", "data-inline": "false" } } }, "on": { "mousedown": [ { "attr": { "selector": ".jsonic-menu", "toggleClass": "left-[100%]" } }, { "attr": { "selector": "nav", "toggleClass": "fixed" } } ] } } } }, "slider": { "do": [ { "div": { "attr": { "class": "swiper", "data-value": "{arguments:name}" }, "style": { "--swiper-navigation-color": "#FFF", "--swiper-pagination-color": "#FFF", "--swiper-pagination-bullet-inactive-color": "#ccc", "width": "100%", "max-width": "1000px" }, "div": [ { "attr": { "class": "swiper-wrapper", "data-value": "{arguments:name}" }, "for": { "name": "slide", "of": "{arguments:slides}", "html": { "div": { "attr": { "class": "swiper-slide" }, "html": "{slide}" } } } }, { "attr": { "class": "swiper-pagination" } }, { "attr": { "class": "swiper-button-prev" } }, { "attr": { "class": "swiper-button-next" } } ], "swiper init": "{setup}" } } ] } }, "plugins": [ { "name": "tailwindcss", "description": "A utility-first CSS framework for rapidly building custom user interfaces", "type": "script", "version": "4.1.12", "ondemand": false, "files": [ { "type": "script", "url": "assets/plugins/tailwindcss.min.js", "cdn": "https://unpkg.com/@tailwindcss/browser@4" } ] }, { "name": "iconify", "version": "3.1.1", "description": "Utility for using SVG images as icons on the web with pure CSS and/or DOM injection", "ondemand": false, "files": [ { "type": "script", "url": "assets/plugins/iconify.min.js", "cdn": "https://cdnjs.cloudflare.com/ajax/libs/iconify/3.1.1/iconify.min.js" } ] }, { "name": "animate.css", "description": "A cross-browser library of CSS animations", "version": "4.1.1", "ondemand": false, "files": [ { "type": "link", "url": "assets/plugins/animate.min.css", "cdn": "https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css" } ] }, { "name": "animejs", "description": "JavaScript animation engine", "version": "3.2.2", "ondemand": false, "files": [ { "type": "script", "url": "assets/plugins/anime.min.js", "cdn": "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js" } ] }, { "name": "swiper", "description": "Most modern mobile touch slider and framework with hardware accelerated transitions", "version": "11.0.5", "ondemand": false, "files": [ { "type": "script", "url": "assets/plugins/swiper-bundle.min.js", "cdn": "https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js" }, { "type": "link", "url": "assets/plugins/swiper-bundle.min.css", "cdn": "https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" } ], "ref": "https://swiperjs.com/swiper-api" }, { "name": "cally", "version": "0.8.0", "description": "Small, feature-rich calendar components", "ondemand": true, "files": [ { "type": "module", "url": "https://unpkg.com/cally" } ] }, { "name": "revealFx", "description": "This is a micro animation library based on anime.js to achieve smooth block reveal effects and has a simple API", "version": "0.0.2", "ondemand": true, "files": [ { "type": "script", "url": "https://cdn.jsdelivr.net/npm/revealfx@0.0.2/src/revealFx.min.js" } ], "ref": "https://github.com/akhil0001/RevealFx" }, { "name": "snapsvg", "description": "JavaScript Vector Library", "version": "0.5.1", "ondemand": true, "files": [ { "type": "script", "url": "https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js" } ] }, { "name": "qrcode-svg", "description": "A simple QR Code generator in pure JavaScript", "version": "1.1.0", "ondemand": true, "files": [ { "type": "script", "url": "https://cdn.jsdelivr.net/npm/qrcode-svg@1.1.0/lib/qrcode.min.js" } ], "ref": "https://papnkukn.github.io/qrcode-svg/" }, { "name": "swup", "description": "Versatile and extensible page transition library for server-rendered websites", "version": "4.8.1", "ondemand": true, "files": [ { "type": "script", "url": "https://unpkg.com/swup@4.8.1/dist/Swup.umd.js" } ] }, { "name": "reveal.js", "description": "The HTML Presentation Framework", "version": "5.1.0", "ondemand": true, "files": [ { "type": "script", "url": "https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.1.0/reveal.js" } ], "ref": "https://revealjs.com" }, { "name": "video.js", "description": "An HTML5 video player that supports HLS and DASH with a common API and skin", "version": "8.21.0", "ondemand": true, "files": [ { "type": "script", "url": "https://cdnjs.cloudflare.com/ajax/libs/video.js/8.21.1/video.min.js" } ], "ref": "https://docs.videojs.com" }, { "name": "hls.js", "description": "JavaScript HLS client using MediaSourceExtension", "version": "1.5.18", "ondemand": true, "files": [ { "type": "script", "url": "https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.18/hls.min.js" } ], "ref": "https://github.com/video-dev/hls.js/blob/master/docs/API.md" }, { "name": "howler.js", "description": "Javascript audio library for the modern web", "version": "2.2.4", "ondemand": true, "files": [ { "type": "script", "url": "https://cdn.jsdelivr.net/npm/howler@2.2.4/dist/howler.min.js" } ], "ref": "https://github.com/goldfire/howler.js#documentation" }, { "name": "rxjs", "description": "Reactive Extensions For JavaScript", "version": "7.8.1", "ondemand": true, "files": [ { "type": "script", "url": "https://cdnjs.cloudflare.com/ajax/libs/rxjs/7.8.1/rxjs.umd.min.js" } ], "ref": "https://rxjs.dev/api" }, { "name": "cloudinary", "description": "", "version": "2.6.0", "ondemand": true, "files": [ { "type": "script", "url": "https://cdn.jsdelivr.net/npm/cloudinary@2.6.0/cloudinary.min.js" } ], "ref": "" } ] }