@oseq/auma
Version:
Augmented Audio Framework (AUMA).
1 lines • 13.7 kB
JavaScript
(()=>{"use strict";var n={699:(n,e,t)=>{t.d(e,{Z:()=>i});var o=t(645),r=t.n(o)()((function(n){return n[1]}));r.push([n.id,".audio {\n width: 80px;\n transition: all 3s;\n}\n\n.audio__button {\n display: block;\n border: none;\n background-color: transparent;\n padding: 0;\n}\n",""]);const i=r},58:(n,e,t)=>{t.d(e,{Z:()=>i});var o=t(645),r=t.n(o)()((function(n){return n[1]}));r.push([n.id,".app,\n.app * {\n box-sizing: border-box;\n}\n\n.app {\n width: 100vw;\n height: 100vh;\n padding: 1rem 0;\n display: flex;\n flex-direction: column;\n}\n\n.app__logo {\n display: flex;\n justify-content: left;\n}\n\n.app__logo-img {\n max-width: 40%;\n max-height: 50px;\n}\n",""]);const i=r},869:(n,e,t)=>{t.d(e,{Z:()=>i});var o=t(645),r=t.n(o)()((function(n){return n[1]}));r.push([n.id,"body {\n margin: 0;\n}\n",""]);const i=r},289:(n,e,t)=>{t.d(e,{Z:()=>i});var o=t(645),r=t.n(o)()((function(n){return n[1]}));r.push([n.id,".results {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.results__image {\n margin-top: 2rem;\n width: 200px;\n max-width: 100%;\n}\n",""]);const i=r},808:(n,e,t)=>{t.d(e,{Z:()=>i});var o=t(645),r=t.n(o)()((function(n){return n[1]}));r.push([n.id,".tree {\n flex-grow: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.tree__image {\n margin-top: 1rem;\n width: 90%;\n max-width: 100%;\n}\n\n.tree__options {\n margin-top: 1rem;\n width: 100%;\n padding: 0 2rem;\n display: flex;\n justify-content: space-evenly;\n align-items: center;\n}\n\n.tree__options.disabled {\n pointer-events: none;\n opacity: 0.3;\n}\n\n.tree__options-button {\n border: none;\n background-color: transparent;\n}\n",""]);const i=r},801:(n,e,t)=>{t.d(e,{Z:()=>i});var o=t(645),r=t.n(o)()((function(n){return n[1]}));r.push([n.id,".welcome {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.welcome__done {\n border: none;\n background-color: transparent;\n margin-top: 2rem;\n transition: all 3s;\n}\n",""]);const i=r},645:n=>{n.exports=function(n){var e=[];return e.toString=function(){return this.map((function(e){var t=n(e);return e[2]?"@media ".concat(e[2]," {").concat(t,"}"):t})).join("")},e.i=function(n,t,o){"string"==typeof n&&(n=[[null,n,""]]);var r={};if(o)for(var i=0;i<this.length;i++){var s=this[i][0];null!=s&&(r[s]=!0)}for(var a=0;a<n.length;a++){var l=[].concat(n[a]);o&&r[l[0]]||(t&&(l[2]?l[2]="".concat(t," and ").concat(l[2]):l[2]=t),e.push(l))}},e}},379:n=>{var e=[];function t(n){for(var t=-1,o=0;o<e.length;o++)if(e[o].identifier===n){t=o;break}return t}function o(n,o){for(var i={},s=[],a=0;a<n.length;a++){var l=n[a],u=o.base?l[0]+o.base:l[0],c=i[u]||0,d="".concat(u," ").concat(c);i[u]=c+1;var p=t(d),f={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==p)e[p].references++,e[p].updater(f);else{var m=r(f,o);o.byIndex=a,e.splice(a,0,{identifier:d,updater:m,references:1})}s.push(d)}return s}function r(n,e){var t=e.domAPI(e);return t.update(n),function(e){if(e){if(e.css===n.css&&e.media===n.media&&e.sourceMap===n.sourceMap&&e.supports===n.supports&&e.layer===n.layer)return;t.update(n=e)}else t.remove()}}n.exports=function(n,r){var i=o(n=n||[],r=r||{});return function(n){n=n||[];for(var s=0;s<i.length;s++){var a=t(i[s]);e[a].references--}for(var l=o(n,r),u=0;u<i.length;u++){var c=t(i[u]);0===e[c].references&&(e[c].updater(),e.splice(c,1))}i=l}}},569:n=>{var e={};n.exports=function(n,t){var o=function(n){if(void 0===e[n]){var t=document.querySelector(n);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(n){t=null}e[n]=t}return e[n]}(n);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(t)}},216:n=>{n.exports=function(n){var e=document.createElement("style");return n.setAttributes(e,n.attributes),n.insert(e,n.options),e}},565:(n,e,t)=>{n.exports=function(n){var e=t.nc;e&&n.setAttribute("nonce",e)}},795:n=>{n.exports=function(n){var e=n.insertStyleElement(n);return{update:function(t){!function(n,e,t){var o="";t.supports&&(o+="@supports (".concat(t.supports,") {")),t.media&&(o+="@media ".concat(t.media," {"));var r=void 0!==t.layer;r&&(o+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),o+=t.css,r&&(o+="}"),t.media&&(o+="}"),t.supports&&(o+="}");var i=t.sourceMap;i&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),e.styleTagTransform(o,n,e.options)}(e,n,t)},remove:function(){!function(n){if(null===n.parentNode)return!1;n.parentNode.removeChild(n)}(e)}}}},589:n=>{n.exports=function(n,e){if(e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}}},e={};function t(o){var r=e[o];if(void 0!==r)return r.exports;var i=e[o]={id:o,exports:{}};return n[o](i,i.exports,t),i.exports}t.n=n=>{var e=n&&n.__esModule?()=>n.default:()=>n;return t.d(e,{a:e}),e},t.d=(n,e)=>{for(var o in e)t.o(e,o)&&!t.o(n,o)&&Object.defineProperty(n,o,{enumerable:!0,get:e[o]})},t.o=(n,e)=>Object.prototype.hasOwnProperty.call(n,e),(()=>{var n=t(379),e=t.n(n),o=t(795),r=t.n(o),i=t(569),s=t.n(i),a=t(565),l=t.n(a),u=t(216),c=t.n(u),d=t(589),p=t.n(d),f=t(699),m={};m.styleTagTransform=p(),m.setAttributes=l(),m.insert=s().bind(null,"head"),m.domAPI=r(),m.insertStyleElement=c(),e()(f.Z,m),f.Z&&f.Z.locals&&f.Z.locals;const v={components:{"icon-play":{template:'\n <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 48 48">\n <circle cx="24" cy="24" r="24" fill="#ddd"/>\n <path d="M3 22v-20l18 10-18 10z" fill="#000" transform="translate(14, 12)"/>\n </svg>'},"icon-pause":{template:'\n <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 48 48">\n <circle cx="24" cy="24" r="24" fill="#ddd"/>\n <path d="M11 22h-4v-20h4v20zm6-20h-4v20h4v-20z" fill="#000" transform="translate(12, 12)"/>\n </svg>'},"icon-replay":{template:'\n <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 48 48">\n <circle cx="24" cy="24" r="24" fill="#ddd"/>\n <path d="M18.885 3.515c-4.617-4.618-12.056-4.676-16.756-.195l-2.129-2.258v7.938h7.484l-2.066-2.191c2.82-2.706 7.297-2.676 10.073.1 4.341 4.341 1.737 12.291-5.491 12.291v4.8c3.708 0 6.614-1.244 8.885-3.515 4.686-4.686 4.686-12.284 0-16.97z"\n fill="#000" transform="translate(12, 12)"/>\n </svg>'}},template:'\n<div class="audio" v-bind="$attrs">\n <button \n v-if="state == \'start\' || state == \'paused\'" \n ="play" \n class="audio__button"><icon-play/></button>\n <button \n v-if="state == \'playing\'" \n ="pause" \n class="audio__button"><icon-pause/></button>\n <button \n v-if="state == \'ended\'" \n ="replay" \n class="audio__button"><icon-replay/></button>\n</div>\n<audio \n ref="audio" \n :src="url"\n ="ended"\n style="display:none;"\n></audio>',props:{url:String},emits:["ready","play","pause","ended","replay"],setup(n,e){const t=Vue.ref(),o=Vue.ref("start");return Vue.onMounted((()=>{setTimeout((()=>e.emit("ready")),1)})),Vue.watch(Vue.toRef(n,"url"),(()=>{o.value="start",setTimeout((()=>e.emit("ready")),1)})),{audio:t,state:o,play:function(){t.value.play(),o.value="playing",e.emit("play")},pause:function(){t.value.pause(),o.value="paused",e.emit("pause")},ended:function(){o.value="ended",e.emit("ended")},replay:function(){t.value.time=0,t.value.play(),o.value="playing",e.emit("replay")}}}};var g=t(801),h={};h.styleTagTransform=p(),h.setAttributes=l(),h.insert=s().bind(null,"head"),h.domAPI=r(),h.insertStyleElement=c(),e()(g.Z,h),g.Z&&g.Z.locals&&g.Z.locals;const y={components:{"app-audio":v,"icon-done":{template:'\n<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 48 48">\n <circle cx="24" cy="24" r="24" fill="#ddd"/>\n <path \n d="M0 3.795l2.995-2.98 11.132 11.185-11.132 11.186-2.995-2.981 8.167-8.205-8.167-8.205zm18.04 8.205l-8.167 8.205 2.995 2.98 11.132-11.185-11.132-11.186-2.995 2.98 8.167 8.206z"\n fill="#000" transform="translate(12, 12)"/>\n</svg>'}},template:'\n<div class="welcome">\n <app-audio \n :url="config.welcome.audioUrl" \n :style="{width: audioEnded ? \'60px\' : \'240px\'}"\n ="audioEnded = true"/>\n <button\n class="welcome__done" \n :style="{width: audioEnded ? \'240px\' : \'60px\'}"\n @click="done">\n <icon-done/>\n </button>\n</div>',props:{config:Object},emits:["done"],setup:(n,e)=>({audioEnded:Vue.ref(!1),done:function(){e.emit("done")}})},b={template:'\n <svg xmlns="http://www.w3.org/2000/svg" :width="width" viewBox="0 0 48 48">\n <circle cx="24" cy="24" r="24" :fill="bgColor"/>\n <path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" \n :fill="fgColor" transform="translate(12,12)"/>\n </svg>',props:{width:{type:Number,default:80},bgColor:String,fgColor:String}},w={template:'\n <svg xmlns="http://www.w3.org/2000/svg" :width="width" viewBox="0 0 48 48">\n <circle cx="24" cy="24" r="24" :fill="bgColor"/>\n <path \n d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"\n :fill="fgColor" transform="translate(12,12)"/>\n </svg>',props:{width:{type:Number,default:80},bgColor:String,fgColor:String}};var x=t(808),_={};_.styleTagTransform=p(),_.setAttributes=l(),_.insert=s().bind(null,"head"),_.domAPI=r(),_.insertStyleElement=c(),e()(x.Z,_),x.Z&&x.Z.locals&&x.Z.locals;const Z={components:{"icon-choice-yes":b,"icon-choice-no":w,"app-audio":v},template:'\n<div class="tree">\n <app-audio \n ref="audio"\n :url="currentQuestion.audioUrl" \n ="onAudioReady"\n ="onAudioEnded" \n ="onAudioReplay"/>\n\n <img \n v-if="currentQuestion.imageUrl" \n :src="currentQuestion.imageUrl" \n class="tree__image"\n />\n\n <div class="tree__options" :class="{disabled: optionsDisabled}">\n <button \n class="tree__options-button" \n ="choose(\'no\')" \n :disabled="optionsDisabled"\n >\n <icon-choice-no\n :bgColor="config.theme.buttonNoBgColor"\n :fgColor="config.theme.buttonNoFgColor"/>\n </button>\n <button \n class="tree__options-button" \n ="choose(\'yes\')" \n :disabled="optionsDisabled"\n >\n <icon-choice-yes\n :bgColor="config.theme.buttonYesBgColor"\n :fgColor="config.theme.buttonYesFgColor"/> \n </button>\n </div>\n</div>\n ',props:{questions:Array,config:Object},emits:["result"],setup(n,e){const t=Vue.ref(),o=Vue.ref(n.config.questions[0].id),r=Vue.ref(!0),i=Vue.ref(!0),s=Vue.computed((()=>n.questions.filter((n=>n.id==o.value))[0]));function a(n){o.value=n,r.value=!0}return{audio:t,currentQuestionId:o,optionsDisabled:r,currentQuestion:s,choose:function(n){r.value=!0,i.value=!1;const t="yes"==n?s.value.onYes:"no"==n?s.value.onNo:null;if(t.startsWith("question:"))a(t.slice("question:".length));else{if(!t.startsWith("result:"))throw new Error("invalid action");e.emit("result",t.slice("result:".length))}},onAudioReady:function(){i.value||t.value.play()},onAudioEnded:function(){r.value=!1},onAudioReplay:function(){r.value=!0},setQuestion:a}}};var C=t(289),A={};A.styleTagTransform=p(),A.setAttributes=l(),A.insert=s().bind(null,"head"),A.domAPI=r(),A.insertStyleElement=c(),e()(C.Z,A),C.Z&&C.Z.locals&&C.Z.locals;const T={components:{"app-audio":v},template:'\n<div class="results">\n <app-audio :url="result.audioUrl"/>\n\n <img \n v-if="result.imageUrl" \n :src="result.imageUrl" \n class="results__image"\n />\n</div>',props:{result:Object}};var E=t(58),S={};S.styleTagTransform=p(),S.setAttributes=l(),S.insert=s().bind(null,"head"),S.domAPI=r(),S.insertStyleElement=c(),e()(E.Z,S),E.Z&&E.Z.locals&&E.Z.locals;const M={components:{welcome:y,tree:Z,results:T},template:'\n<div class="app" v-if="config">\n <div v-if="config.theme.logoUrl" class="app__logo">\n <img :src="config.theme.logoUrl" alt="" class="app__logo-img"/>\n </div>\n <welcome \n v-if="view == \'welcome\'" \n :config="config"\n ="welcomeDone"\n ></welcome>\n <tree \n v-if="view == \'tree\'" \n :config="config"\n :questions="config.questions" \n ="showResult"\n ></tree>\n <results\n v-if="view == \'results\'" \n :result="result"\n ></results>\n</div>',setup(){const n=Vue.ref(),e=Vue.ref("init"),t=Vue.ref();return{config:n,view:e,result:t,start:function(){e.value="welcome"},welcomeDone:function(){e.value="tree"},showResult:function(o){t.value=n.value.results.filter((n=>n.id==o))[0],e.value="results"}}}};var V=t(869),j={};j.styleTagTransform=p(),j.setAttributes=l(),j.insert=s().bind(null,"head"),j.domAPI=r(),j.insertStyleElement=c(),e()(V.Z,j),V.Z&&V.Z.locals&&V.Z.locals;const k={logoUrl:void 0,buttonYesBgColor:"#ddd",buttonYesFgColor:"#000",buttonNoBgColor:"#ddd",buttonNoFgColor:"#000"};window.auma=function(n){n.theme={...k,...n.theme||{}},document.title="Auma Decision Tree | "+n.id;const e=document.createElement("meta");e.name="viewport",e.content="width=device-width, initial-scale=1.0",document.head.append(e);const t=document.createElement("script");t.src="https://unpkg.com/vue@3.2.8/dist/vue.global.prod.js",t.onload=()=>{const e=document.createElement("div");document.body.append(e);const t=Vue.createApp(M).mount(e);t.config=n,t.start()},document.head.append(t)}})()})();