jspsych-vue/dist/index.umd.js

Vue3 component for JsPsych

(function(t,o){typeof exports=="object"&&typeof module<"u"?module.exports=o(require("vue"),require("nanoid")):typeof define=="function"&&define.amd?define(["vue","nanoid"],o):(t=typeof globalThis<"u"?globalThis:t||self,t["vue-jspsych"]=o(t.Vue,t.nanoid))})(this,function(t,o){"use strict";var N=Object.defineProperty;var I=(t,o,c)=>o in t?N(t,o,{enumerable:!0,configurable:!0,writable:!0,value:c}):t[o]=c;var T=(t,o,c)=>I(t,typeof o!="symbol"?o+"":o,c);const c=(n=void 0,i="100%",u=void 0,a=void 0)=>({name:"JsPsychContent",props:{trial:{type:Object,required:!1},on_load:{type:Function,required:!1}},setup(d){return t.nextTick(async()=>{var p;let s=u==null?void 0:u(document.querySelector("#jspsych-content"),d.trial,d.on_load);s instanceof Promise?(s=await s,a==null||a(s)):(p=d.on_load)==null||p.call(d)}),()=>{let s;return Array.isArray(n)?s=n.map(p=>t.h(p)):s=n&&t.h(n,{key:o.nanoid(),...d}),t.h("div",{class:"jspsych-content",id:"jspsych-content",tabIndex:"0",style:`width: ${i};`},s)}}}),v=n=>{if(!n)return document.body;if(n instanceof Element)return n;if(typeof n=="string"){const i=document.querySelector(n);if(!i)throw Error("The element with the specified selector does not exist.");return i}throw Error("Display element must be an HTML element or a string that specifies a query selector.")};return{name:"JsPsych",props:{options:{type:Object,default:()=>({})},module:{type:Object,required:!1}},emits:["init"],setup(n,{slots:i}){const u="jsPsychModule"in window?window.jsPsychModule:n.module;if(!u)throw Error("JsPsych module is not found. You can either install it using npm, then passing it as module prop to JsPsychVue component or use CDN to load it.");const{JsPsych:a,initJsPsych:d}=u,s=t.shallowRef(),p=t.ref(),j=t.ref();a.prototype.prepareDom=function(){let e=v(n.options.display_element);this.displayContainerElement=e,this.DOM_container=this.displayContainerElement,this.contentElement=document.querySelector("#jspsych-content"),this.DOM_target=this.contentElement,this.displayElement=this.contentElement,this.data.createInteractionListeners(),window.addEventListener("beforeunload",n.options.on_close)};var P=a.prototype.run;a.prototype.run=function(e){return P.call(this,f(e))};var C=a.prototype.addNodeToEndOfTimeline;a.prototype.addNodeToEndOfTimeline=function(e){return C.call(this,f(e))};const w=i.finish&&i.finish()||i.default&&i.default(),x=n.options;if(w){const e=n.options.on_finish;x.on_finish=(...r)=>{e&&e.call(this,...r),s.value=c(w,y)}}const l=d(n.options);t.provide("jsPsych",l),t.getCurrentInstance().emit("init",l);let y=(l.options||l.opts).experiment_width||"100%";typeof y=="number"&&(y=`${y}px`);const D=i.start&&i.start()||i.default&&i.default();s.value=c(D,y);const O=e=>{if(e.type&&e.component)throw new Error("Cannot specify both type and component in a single timeline node.");if(!e.type&&!e.component)throw new Error("Must specify either type or component in a timeline node.");const r=e.type||Object,h=e.component?e.component.info||{}:{};class m extends r{trial(H,g,q){return new Promise(M=>{p.value=g,j.value=q;const J=(...L)=>{var E;return(E=super.trial)==null?void 0:E.call(this,...L)};s.value=c(e.component,y,J,M)})}}T(m,"info",{...r.info,...h});const{component:_,...b}=e;return{...b,type:m}},f=e=>{if(!e)throw Error("Try to convert an empty timeline. Do you forget add the plugin?");if(e.type||e.component)return O(e);if(Array.isArray(e))return e.map(r=>f(r));if(!e.timeline)throw Error("TimelineNode expected one of the following property that is not undifined: timeline, type, component.");return{...e,timeline:f(e.timeline)}};return l.data.displayData=e=>{var r=e.format||"json";r=r.toLowerCase(),r!="json"&&r!="csv"&&(console.error("Invalid format declared for displayData function. Using json as default."),r="json");let h=l.data.allData?l.data.allData:l.data.results;const m=r==="json"?h.json(!0):h.csv();var _=e.dom||document.querySelector("#jspsych-display-element");_.innerHTML='<pre id="jspsych-data-display"></pre>',document.getElementById("jspsych-data-display").textContent=m},()=>t.h("div",{id:"jspsych-display-element",class:"jspsych-display-element"},t.h("div",{id:"jspsych-content-wrapper",class:"jspsych-content-wrapper"},t.h(s.value,{trial:p.value,on_load:j.value})))}}});