@pie-element/passage 6.0.0-beta.0 → 6.0.0-next.42

package/module/demo.js

@@ -0,0 +1,57 @@
+import Configure from './configure.js';
+import Element from './element.js';
+import * as controller from './controller.js';
+
+var generate = {};
+
+generate.model = (id, element) => ({
+  id,
+  element,
+  passages: [
+    {
+      teacherInstructions: 'Teacher instructions for first tab',
+      title: 'Hope Is the Thing with Feathers',
+      subtitle: 'from <em>The Complete Poems of Emily Dickinson</em>',
+      author: 'by Emily Dickinson',
+      text: '<p><font style="visibility:hidden">00000</font>Hope is the thing with feathers<br /><font style="visibility:hidden">00000</font>That perches in the soul,<br /><font style="visibility:hidden">00000</font>And sings the tune without the words,<br /><font style="visibility:hidden">00000</font>And never stops at all,</p><p>5<font style="visibility:hidden">0000</font>And sweetest in the gale is heard;<br /><font style="visibility:hidden">00000</font>And sore must be the storm<br /><font style="visibility:hidden">00000</font>That could abash the little bird<br /><font style="visibility:hidden">00000</font>That kept so many warm.</p><p><font style="visibility:hidden">00000</font>I&#8217;ve heard it in the chillest land,<br />10<font style="visibility:hidden">000</font>And on the strangest sea;<br /><font style="visibility:hidden">00000</font>Yet, never, in extremity,<br /><font style="visibility:hidden">00000</font>It asked a crumb of me.</p>',
+    },
+    {
+      title: 'Ineskeen Road, July Evening',
+      text: `The bicycles go by in twos and threes -<br/>
+        There's a dance in Billy Brennan's barn tonight,<br/>
+        And there's the half-talk code of mysteries<br/>
+        And the wink-and-elbow language of delight.<br/>
+        Half-past eight and there is not a spot<br/>
+        Upon a mile of road, no shadow thrown<br/>
+        That might turn out a man or woman, not<br/>
+        A footfall tapping secrecies of stone. <br/>
+        <p/>
+        I have what every poet hates in spite<br/>
+        Of all the solemn talk of contemplation.<br/>
+        Oh, Alexander Selkirk knew the plight<br/>
+        Of being king and government and nation.<br/>
+        A road, a mile of kingdom. I am king<br/>
+        Of banks and stones and every blooming thing.<br/>
+        `,
+    },
+  ],
+});
+
+const { model } = generate;
+
+var config = {
+  elements: {
+    'passage-element': '../..',
+  },
+  models: [model('1', 'passage-element')],
+};
+
+//Note: demo-el is a custom element loaded in the markup.
+  customElements.whenDefined("demo-el").then(() => {
+    config.models.forEach((m) => {
+      const de = document.createElement("demo-el");
+      document.body.appendChild(de);
+      de.def = { tagName: m.element, Element, Configure, controller };
+      de.model = m;
+    });
+  });

package/module/element.js

@@ -0,0 +1 @@
+import{_dll_pie_lib__math_rendering as e}from"../../../@pie-lib/math-rendering-module@^4.0.5/module/index.js";import{_dll_react_dom as t,_dll_prop_types as r,_dll_mui__material as n,_dll_mui__material_styles as o,_dll_pie_lib__render_ui as s}from"../../../@pie-lib/shared-module@^3.0.5/module/index.js";var a={};Object.defineProperty(a,"__esModule",{value:!0});class i extends CustomEvent{constructor(e,t,r){super(i.TYPE,{bubbles:!0,composed:!0,detail:{complete:t,component:e,hasModel:r}}),this.component=e,this.complete=t}}i.TYPE="model-set";var u=a.ModelSetEvent=i;class l extends CustomEvent{constructor(e,t){super(l.TYPE,{bubbles:!0,composed:!0,detail:{complete:t,component:e}}),this.component=e,this.complete=t}}l.TYPE="session-changed",a.SessionChangedEvent=l;var c={exports:{}},d={},p=Symbol.for("react.element"),f=Symbol.for("react.portal"),h=Symbol.for("react.fragment"),m=Symbol.for("react.strict_mode"),b=Symbol.for("react.profiler"),y=Symbol.for("react.provider"),_=Symbol.for("react.context"),g=Symbol.for("react.forward_ref"),v=Symbol.for("react.suspense"),E=Symbol.for("react.memo"),S=Symbol.for("react.lazy"),x=Symbol.iterator;var C={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},k=Object.assign,T={};function w(e,t,r){this.props=e,this.context=t,this.refs=T,this.updater=r||C}function R(){}function $(e,t,r){this.props=e,this.context=t,this.refs=T,this.updater=r||C}w.prototype.isReactComponent={},w.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},w.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},R.prototype=w.prototype;var I=$.prototype=new R;I.constructor=$,k(I,w.prototype),I.isPureReactComponent=!0;var A=Array.isArray,P=Object.prototype.hasOwnProperty,j={current:null},M={key:!0,ref:!0,__self:!0,__source:!0};function L(e,t,r){var n,o={},s=null,a=null;if(null!=t)for(n in void 0!==t.ref&&(a=t.ref),void 0!==t.key&&(s=""+t.key),t)P.call(t,n)&&!M.hasOwnProperty(n)&&(o[n]=t[n]);var i=arguments.length-2;if(1===i)o.children=r;else if(1<i){for(var u=Array(i),l=0;l<i;l++)u[l]=arguments[l+2];o.children=u}if(e&&e.defaultProps)for(n in i=e.defaultProps)void 0===o[n]&&(o[n]=i[n]);return{$$typeof:p,type:e,key:s,ref:a,props:o,_owner:j.current}}function O(e){return"object"==typeof e&&null!==e&&e.$$typeof===p}var q=/\/+/g;function H(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+e.replace(/[=:]/g,function(e){return t[e]})}(""+e.key):t.toString(36)}function N(e,t,r,n,o){var s=typeof e;"undefined"!==s&&"boolean"!==s||(e=null);var a=!1;if(null===e)a=!0;else switch(s){case"string":case"number":a=!0;break;case"object":switch(e.$$typeof){case p:case f:a=!0}}if(a)return o=o(a=e),e=""===n?"."+H(a,0):n,A(o)?(r="",null!=e&&(r=e.replace(q,"$&/")+"/"),N(o,t,r,"",function(e){return e})):null!=o&&(O(o)&&(o=function(e,t){return{$$typeof:p,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(o,r+(!o.key||a&&a.key===o.key?"":(""+o.key).replace(q,"$&/")+"/")+e)),t.push(o)),1;if(a=0,n=""===n?".":n+":",A(e))for(var i=0;i<e.length;i++){var u=n+H(s=e[i],i);a+=N(s,t,r,u,o)}else if(u=function(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=x&&e[x]||e["@@iterator"])?e:null}(e),"function"==typeof u)for(e=u.call(e),i=0;!(s=e.next()).done;)a+=N(s=s.value,t,r,u=n+H(s,i++),o);else if("object"===s)throw t=String(e),Error("Objects are not valid as a React child (found: "+("[object Object]"===t?"object with keys {"+Object.keys(e).join(", ")+"}":t)+"). If you meant to render a collection of children, use an array instead.");return a}function D(e,t,r){if(null==e)return e;var n=[],o=0;return N(e,n,"","",function(e){return t.call(r,e,o++)}),n}function F(e){if(-1===e._status){var t=e._result;(t=t()).then(function(t){0!==e._status&&-1!==e._status||(e._status=1,e._result=t)},function(t){0!==e._status&&-1!==e._status||(e._status=2,e._result=t)}),-1===e._status&&(e._status=0,e._result=t)}if(1===e._status)return e._result.default;throw e._result}var U={current:null},V={transition:null},z={ReactCurrentDispatcher:U,ReactCurrentBatchConfig:V,ReactCurrentOwner:j};function Y(){throw Error("act(...) is not supported in production builds of React.")}d.Children={map:D,forEach:function(e,t,r){D(e,function(){t.apply(this,arguments)},r)},count:function(e){var t=0;return D(e,function(){t++}),t},toArray:function(e){return D(e,function(e){return e})||[]},only:function(e){if(!O(e))throw Error("React.Children.only expected to receive a single React element child.");return e}},d.Component=w,d.Fragment=h,d.Profiler=b,d.PureComponent=$,d.StrictMode=m,d.Suspense=v,d.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=z,d.act=Y,d.cloneElement=function(e,t,r){if(null==e)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+e+".");var n=k({},e.props),o=e.key,s=e.ref,a=e._owner;if(null!=t){if(void 0!==t.ref&&(s=t.ref,a=j.current),void 0!==t.key&&(o=""+t.key),e.type&&e.type.defaultProps)var i=e.type.defaultProps;for(u in t)P.call(t,u)&&!M.hasOwnProperty(u)&&(n[u]=void 0===t[u]&&void 0!==i?i[u]:t[u])}var u=arguments.length-2;if(1===u)n.children=r;else if(1<u){i=Array(u);for(var l=0;l<u;l++)i[l]=arguments[l+2];n.children=i}return{$$typeof:p,type:e.type,key:o,ref:s,props:n,_owner:a}},d.createContext=function(e){return(e={$$typeof:_,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null}).Provider={$$typeof:y,_context:e},e.Consumer=e},d.createElement=L,d.createFactory=function(e){var t=L.bind(null,e);return t.type=e,t},d.createRef=function(){return{current:null}},d.forwardRef=function(e){return{$$typeof:g,render:e}},d.isValidElement=O,d.lazy=function(e){return{$$typeof:S,_payload:{_status:-1,_result:e},_init:F}},d.memo=function(e,t){return{$$typeof:E,type:e,compare:void 0===t?null:t}},d.startTransition=function(e){var t=V.transition;V.transition={};try{e()}finally{V.transition=t}},d.unstable_act=Y,d.useCallback=function(e,t){return U.current.useCallback(e,t)},d.useContext=function(e){return U.current.useContext(e)},d.useDebugValue=function(){},d.useDeferredValue=function(e){return U.current.useDeferredValue(e)},d.useEffect=function(e,t){return U.current.useEffect(e,t)},d.useId=function(){return U.current.useId()},d.useImperativeHandle=function(e,t,r){return U.current.useImperativeHandle(e,t,r)},d.useInsertionEffect=function(e,t){return U.current.useInsertionEffect(e,t)},d.useLayoutEffect=function(e,t){return U.current.useLayoutEffect(e,t)},d.useMemo=function(e,t){return U.current.useMemo(e,t)},d.useReducer=function(e,t,r){return U.current.useReducer(e,t,r)},d.useRef=function(e){return U.current.useRef(e)},d.useState=function(e){return U.current.useState(e)},d.useSyncExternalStore=function(e,t,r){return U.current.useSyncExternalStore(e,t,r)},d.useTransition=function(){return U.current.useTransition()},d.version="18.3.1",c.exports=d;var B=c.exports;var J,K=t;J=K.createRoot,K.hydrateRoot;const G=r,{Tabs:W}=n,{Tab:Q}=n,{styled:X}=o,{Collapsible:Z}=s,{color:ee}=s,{PreviewPrompt:te}=s,{Purpose:re}=s,{UiLayout:ne}=s;const oe=X("div")({flexGrow:1,backgroundColor:ee.background(),color:ee.text(),"&:not(.MathJax) table":{borderCollapse:"collapse"},"&:not(.MathJax) table td, &:not(.MathJax) table th":{padding:".6em 1em",textAlign:"left"}}),se=X("div")(({theme:e})=>({backgroundColor:ee.background(),color:ee.text(),padding:e.spacing(2)})),ae=X("div")({fontSize:"1.75rem"}),ie=X("div")({fontSize:"1.5rem"}),ue=X("div")({fontSize:"1.25rem"}),le=X(Q)(({theme:e})=>({background:e.palette.common.white,fontSize:"inherit",color:e.palette.common.black}));class ce extends B.Component{constructor(...e){super(...e),ce.prototype.__init.call(this),ce.prototype.__init2.call(this),ce.prototype.__init3.call(this),ce.prototype.__init4.call(this)}__init(){this.state={activeTab:0}}__init2(){this.handleChange=(e,t)=>{this.setState(()=>({activeTab:t})),setTimeout(()=>{const e=new CustomEvent("pie-ui-passage-tabChanged",{detail:{tab:t}});window.dispatchEvent(e)})}}__init3(){this.handleKeyDown=(e,t)=>{const{key:r}=e,{tabs:n}=this.props;let o=-1;const s=n.findIndex(e=>e.id===t);switch(r){case"ArrowRight":o=(s+1)%n.length;break;case"ArrowLeft":o=(s-1+n.length)%n.length;break;case"Home":o=0;break;case"End":o=n.length-1;break;case"Enter":case" ":o=s}-1!==o&&(e.preventDefault(),this.handleChange(e,n[o].id),document.getElementById(`button-${n[o].id}`).focus())}}__init4(){this.parsedText=(e="")=>{const t=document.createElement("div");t.innerHTML=e.replace(/(<br\/>\n)/g,"<br/>");const r=t.querySelector("audio");if(r){const e=document.createElement("source");e.setAttribute("type","audio/mp3"),e.setAttribute("src",r.getAttribute("src")),r.removeAttribute("src"),r.appendChild(e)}return t.innerHTML}}renderInstructions(e,t=!1){if(!e)return;const r=B.createElement(te,{tagName:"div",className:"prompt",defaultClassName:"teacher-instructions",prompt:e});return t?r:B.createElement(Z,{labels:{hidden:"Show Teacher Instructions",visible:"Hide Teacher Instructions"}},r)}renderTab(e,t){return B.createElement(se,{key:e.id,id:`tabpanel-${e.id}`,role:"tabpanel","aria-labelledby":`button-${e.id}`},this.renderInstructions(e.teacherInstructions,t),(e.title||e.subtitle)&&B.createElement("h2",null,e.title&&B.createElement(re,{purpose:"passage-title"},B.createElement(ae,{dangerouslySetInnerHTML:{__html:this.parsedText(e.title)}})),e.subtitle&&B.createElement(re,{purpose:"passage-subtitle"},B.createElement(ie,{dangerouslySetInnerHTML:{__html:this.parsedText(e.subtitle)}}))),e.author&&B.createElement(re,{purpose:"passage-author"},B.createElement(ue,{className:"author",dangerouslySetInnerHTML:{__html:this.parsedText(e.author)}})),e.text&&B.createElement(re,{purpose:"passage-text"},B.createElement("div",{key:e.id,className:"text",dangerouslySetInnerHTML:{__html:this.parsedText(e.text)}})))}render(){const{model:e,tabs:t,disabledTabs:r}=this.props,{activeTab:n}=this.state;if(!function(e){let t,r=e[0],n=1;for(;n<e.length;){const o=e[n],s=e[n+1];if(n+=2,("optionalAccess"===o||"optionalCall"===o)&&null==r)return;"access"===o||"optionalAccess"===o?(t=r,r=s(r)):"call"!==o&&"optionalCall"!==o||(r=s((...e)=>r.call(t,...e)),t=void 0)}return r}([t,"optionalAccess",e=>e.length]))return;const{extraCSSRules:o}=e||{},s=(t||[]).find(e=>e.id===n);return B.createElement(ne,{extraCSSRules:o},B.createElement(oe,{className:"passages"},r||1===t.length?t.map(e=>this.renderTab(e,r)):B.createElement(B.Fragment,null,B.createElement(W,{sx:{position:"sticky",top:0,background:ee.background(),color:ee.text()},value:n,onChange:this.handleChange},t.map(e=>B.createElement(le,{key:e.id,id:`button-${e.id}`,label:B.createElement(re,{purpose:"passage-label"},B.createElement("span",{dangerouslySetInnerHTML:{__html:this.parsedText(e.label)}})),value:e.id,tabIndex:n===e.id?0:-1,"aria-controls":`tabpanel-${e.id}`,"aria-selected":n===e.id,onFocus:()=>this.handleChange(null,e.id),onKeyDown:t=>this.handleKeyDown(t,e.id)}))),s?this.renderTab(s,r):null)))}}ce.propTypes={tabs:G.arrayOf(G.shape({id:G.number.isRequired,label:G.string.isRequired,title:G.string.isRequired,subtitle:G.string,author:G.string,text:G.string.isRequired,teacherInstructions:G.string}).isRequired).isRequired,disabledTabs:G.bool,model:G.object};const{renderMath:de}=e;class pe extends HTMLElement{constructor(){super(),this._model={passages:[]},this._session=null,this._root=null}setLangAttribute(){const e=this._model&&(this._model.language,1)?this._model.language:"",t=e?e.slice(0,2):"en";this.setAttribute("lang",t)}set model(e){this._model=e,this.dispatchEvent(new u(this.tagName.toLowerCase(),this._session,!!this._model)),this.setLangAttribute(),this._render()}set session(e){this._session=e}connectedCallback(){this.setAttribute("aria-label","Passage"),this.setAttribute("role","region"),this._render()}_render(){const{passages:e=[]}=this._model;if(this._model.passages.length>0){const t=e.map((e,t)=>({id:t,...e})),r=B.createElement(ce,{tabs:t});this._root||(this._root=J(this)),this._root.render(r),queueMicrotask(()=>{de(this)})}}disconnectedCallback(){this._root&&this._root.unmount()}}export{pe as default};

package/module/index.html

@@ -0,0 +1,21 @@
+
+  <!doctype html>
+  <html>
+    <head>
+      <title>@pie-element/passage@6.0.0-beta.1</title>
+      <script
+        type="module"
+        src="https://cdn.jsdelivr.net/npm/@pslb/demo-el@^1.0.0/dist/demo-el/demo-el.esm.js"></script>
+     
+      <link
+        href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+        rel="stylesheet"
+      />
+      <style>
+        html, body {
+          font-family: 'Roboto', sans-serif;
+        }
+      </style>
+      <script type="module" src="./demo.js"></script> 
+    </head>
+  </html>

package/module/manifest.json

@@ -0,0 +1,14 @@
+{
+  "name": "@pie-element/passage",
+  "version": "6.0.0-beta.1",
+  "modules": [
+    {
+      "name": "@pie-lib/math-rendering-module",
+      "version": "^4.0.5"
+    },
+    {
+      "name": "@pie-lib/shared-module",
+      "version": "^3.0.5"
+    }
+  ]
+}

package/module/print-demo.js

@@ -0,0 +1,95 @@
+import PrintElement from './print.js';
+
+var generate = {};
+
+generate.model = (id, element) => ({
+  id,
+  element,
+  passages: [
+    {
+      teacherInstructions: 'Teacher instructions for first tab',
+      title: 'Hope Is the Thing with Feathers',
+      subtitle: 'from <em>The Complete Poems of Emily Dickinson</em>',
+      author: 'by Emily Dickinson',
+      text: '<p><font style="visibility:hidden">00000</font>Hope is the thing with feathers<br /><font style="visibility:hidden">00000</font>That perches in the soul,<br /><font style="visibility:hidden">00000</font>And sings the tune without the words,<br /><font style="visibility:hidden">00000</font>And never stops at all,</p><p>5<font style="visibility:hidden">0000</font>And sweetest in the gale is heard;<br /><font style="visibility:hidden">00000</font>And sore must be the storm<br /><font style="visibility:hidden">00000</font>That could abash the little bird<br /><font style="visibility:hidden">00000</font>That kept so many warm.</p><p><font style="visibility:hidden">00000</font>I&#8217;ve heard it in the chillest land,<br />10<font style="visibility:hidden">000</font>And on the strangest sea;<br /><font style="visibility:hidden">00000</font>Yet, never, in extremity,<br /><font style="visibility:hidden">00000</font>It asked a crumb of me.</p>',
+    },
+    {
+      title: 'Ineskeen Road, July Evening',
+      text: `The bicycles go by in twos and threes -<br/>
+        There's a dance in Billy Brennan's barn tonight,<br/>
+        And there's the half-talk code of mysteries<br/>
+        And the wink-and-elbow language of delight.<br/>
+        Half-past eight and there is not a spot<br/>
+        Upon a mile of road, no shadow thrown<br/>
+        That might turn out a man or woman, not<br/>
+        A footfall tapping secrecies of stone. <br/>
+        <p/>
+        I have what every poet hates in spite<br/>
+        Of all the solemn talk of contemplation.<br/>
+        Oh, Alexander Selkirk knew the plight<br/>
+        Of being king and government and nation.<br/>
+        A road, a mile of kingdom. I am king<br/>
+        Of banks and stones and every blooming thing.<br/>
+        `,
+    },
+  ],
+});
+
+const { model } = generate;
+
+var config = {
+  elements: {
+    'passage-element': '../..',
+  },
+  models: [model('1', 'passage-element')],
+};
+
+// new init - just shows off print!
+
+const init = async () => {
+  console.log('define the element...');
+  await Promise.all(
+    config.models.map(async (m) => {
+      try {
+        const printTag = `${m.element}-print`;
+        if (customElements.get(printTag)) {
+          return true;
+        } else {
+          customElements.define(printTag, PrintElement);
+          await customElements.whenDefined(printTag);
+          return true;
+        }
+      } catch (e) {
+        return false;
+      }
+    })
+  );
+
+  console.log('now apply the model...');
+  config.models.forEach((m) => {
+    const printTag = `${m.element}-print`;
+    const h3s = document.createElement('h3');
+    h3s.textContent = 'student mode';
+    document.body.appendChild(h3s);
+    const de = document.createElement(printTag);
+    document.body.appendChild(de);
+    de.options = {};
+    de.model = m;
+
+    const h3 = document.createElement('h3');
+    h3.textContent = 'instructor mode';
+    document.body.appendChild(h3);
+    const instr = document.createElement(printTag);
+    document.body.appendChild(instr);
+    instr.options = { mode: 'instructor' };
+    instr.model = JSON.parse(JSON.stringify(m));
+  });
+};
+
+init()
+  .then(() => {
+    console.log('ready');
+  })
+  .catch((e) => {
+    console.error(e);
+  });

package/module/print.html

@@ -0,0 +1,18 @@
+
+  <!doctype html>
+  <html>
+    <head>
+      <title>@pie-element/passage@6.0.0-beta.1</title>
+      <link
+        href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+        rel="stylesheet"
+      />
+      <style>
+        html, body {
+          font-family: 'Roboto', sans-serif;
+        }
+      </style>
+      <script type="module" src="./print-demo.js"></script> 
+    </head>
+    <body></body>
+  </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/passage",
-  "version": "6.0.0-beta.0",
+  "version": "6.0.0-next.42+bb1f3eb4e",
   "publishConfig": {
     "access": "public"
   },
@@ -14,13 +14,13 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/math-rendering": "3.22.3-next.0",
-    "@pie-lib/render-ui": "4.35.4-next.0",
-    "prop-types": "^15.6.1",
+    "@pie-lib/math-rendering": "4.1.1-next.0",
+    "@pie-lib/render-ui": "5.1.1-next.0",
+    "prop-types": "^15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
-  "gitHead": "028605f2d7b2b3b7e5b8840078c0d2c5d9a562e0",
+  "gitHead": "bb1f3eb4e3b5b1cb15024d459ffd6e94bf419712",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },