@pie-element/extended-text-entry 13.4.1-next.0 → 14.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/configure/lib/defaults.js +2 -3
- package/configure/lib/defaults.js.map +1 -1
- package/configure/lib/index.js +97 -151
- package/configure/lib/index.js.map +1 -1
- package/configure/lib/main.js +222 -297
- package/configure/lib/main.js.map +1 -1
- package/configure/package.json +9 -6
- package/controller/lib/defaults.js +2 -3
- package/controller/lib/defaults.js.map +1 -1
- package/controller/lib/index.js +73 -170
- package/controller/lib/index.js.map +1 -1
- package/controller/package.json +2 -2
- package/lib/annotation/annotation-editor.js +492 -565
- package/lib/annotation/annotation-editor.js.map +1 -1
- package/lib/annotation/annotation-menu.js +131 -190
- package/lib/annotation/annotation-menu.js.map +1 -1
- package/lib/annotation/annotation-utils.js +77 -121
- package/lib/annotation/annotation-utils.js.map +1 -1
- package/lib/annotation/freeform-editor.js +202 -227
- package/lib/annotation/freeform-editor.js.map +1 -1
- package/lib/index.js +77 -131
- package/lib/index.js.map +1 -1
- package/lib/main.js +178 -242
- package/lib/main.js.map +1 -1
- package/lib/print.js +45 -87
- package/lib/print.js.map +1 -1
- package/package.json +13 -15
- package/module/configure.js +0 -1
- package/module/controller.js +0 -139
- package/module/demo.js +0 -38
- package/module/element.js +0 -1
- package/module/index.html +0 -21
- package/module/manifest.json +0 -22
- package/module/print-demo.js +0 -76
- package/module/print.html +0 -18
- package/module/print.js +0 -1
package/module/print.html
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
<!doctype html>
|
|
3
|
-
<html>
|
|
4
|
-
<head>
|
|
5
|
-
<title>@pie-element/extended-text-entry@13.4.0</title>
|
|
6
|
-
<link
|
|
7
|
-
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
|
|
8
|
-
rel="stylesheet"
|
|
9
|
-
/>
|
|
10
|
-
<style>
|
|
11
|
-
html, body {
|
|
12
|
-
font-family: 'Roboto', sans-serif;
|
|
13
|
-
}
|
|
14
|
-
</style>
|
|
15
|
-
<script type="module" src="./print-demo.js"></script>
|
|
16
|
-
</head>
|
|
17
|
-
<body></body>
|
|
18
|
-
</html>
|
package/module/print.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{_dll_react as e,_dll_classnames as t,_dll_prop_types as n,_dll_material_ui__core as o,_dll_material_ui__core_styles as i,_dll_lodash as a,_dll_debug as s,_dll_pie_lib__render_ui as r,_dll_react_dom as l}from"../../../@pie-lib/shared-module@^1.17.5/module/index.js";import{_dll_pie_lib__math_rendering as d}from"../../../@pie-lib/math-rendering-module@^3.1.5/module/index.js";import{_dll_pie_lib__editable_html as c}from"../../../@pie-lib/editable-html-module@^5.9.5/module/index.js";import{_dll_pie_lib__config_ui as p}from"../../../@pie-lib/config-module@^2.23.3/module/index.js";const h=(e,t,n)=>{const o=n||[],i=o.reduce(((e,t)=>e+t.textContent.length),0);let a=!0;if(i>t)return!1;for(e&&(3===e.nodeType&&e.parentNode&&!e.parentNode.hasAttribute("data-ann-id")&&o.push(e),e=e.firstChild);e&&a;)a=h(e,t,o),e=e.nextSibling;return o},m=e=>{const{commonAncestorContainer:t,startContainer:n,endContainer:o,startOffset:i,endOffset:a}=e,s=[];let r=!1,l=!1,d="";const c=e=>{const{nodeValue:t,childNodes:p}=e;e===n&&e===o?(t&&(d+=t.substring(i,a)),r=l=!0):e===n?(t&&(d+=t.substring(i)),r=!0):e===o?(t&&(d+=t.substring(0,a)),l=!0):e&&3===e.nodeType&&e.parentNode&&!e.parentNode.hasAttribute("data-ann-id")&&t&&r&&!l&&(d+=t,s.push(e)),p.forEach((e=>{l||c(e)}))};return c(t),[s,d]},u=e=>{const t=document.createElement("SPAN");return e.surroundContents(t),t},g=e=>{if(e.startContainer===e.endContainer)return[u(e)];const[t]=m(e),n=document.createRange();n.selectNodeContents(e.startContainer),n.setStart(e.startContainer,e.startOffset);const o=u(n),i=document.createRange();i.selectNode(e.endContainer),i.setEnd(e.endContainer,e.endOffset);const a=u(i);return[o,...t.map((e=>{const t=document.createElement("SPAN");return e.parentNode.insertBefore(t,e),t.appendChild(e),t})),a]},b=(e,t)=>{(e||[]).forEach((e=>{const t=e.parentNode,n=e.childNodes,o=n.length;if(o>0)for(let i=0;i<o;i++)t.insertBefore(n[0],e);else t.insertBefore(document.createTextNode(e.textContent),e);t.removeChild(e)})),t.normalize()},f=()=>{document.getSelection?(document.getSelection().removeAllRanges(),document.getSelection().addRange(document.createRange())):window.getSelection?window.getSelection().removeAllRanges?(window.getSelection().removeAllRanges(),window.getSelection().addRange(document.createRange())):window.getSelection().empty&&window.getSelection().empty():document.selection&&document.selection.empty()},v=e=>e.length>=20||-1!==e.search(/\n|\r|\r\n/),C=e=>Array.from(document.querySelectorAll(`[data-id='${e}']`)),x=e=>document.querySelector(`[data-ann-id='${e}']`),y=e,_=t,E=n,{Popover:w}=o,{TextField:S}=o,{withStyles:A}=i;class R extends y.Component{static __initStatic(){this.propTypes={anchorEl:E.object,open:E.bool,offset:E.number,value:E.string,type:E.string,onClose:E.func,onDelete:E.func,onSave:E.func,onTypeChange:E.func}}constructor(e){super(e),R.prototype.__init.call(this),R.prototype.__init2.call(this),R.prototype.__init3.call(this),this.state={value:e.value}}UNSAFE_componentWillReceiveProps(e){const{value:t}=e,{value:n}=this.props;t!==n&&this.setState({value:t})}__init(){this.onValueChange=e=>this.setState({value:e.target.value})}__init2(){this.handleSave=()=>{const{value:e,onSave:t,onClose:n,onDelete:o}=this.props,{value:i}=this.state;""===i&&o(),e!==i&&t(e,i),this.setState({value:""}),n()}}__init3(){this.handleTypeChange=()=>{const{onTypeChange:e,onDelete:t}=this.props,{value:n}=this.state;""===n?t():e(n),this.setState({value:""})}}render(){const{anchorEl:e,classes:t,offset:n,onDelete:o,open:i,type:a}=this.props,{value:s}=this.state;return y.createElement(w,{anchorEl:e,elevation:2,open:i,onClose:this.handleSave,classes:{paper:_(t.arrow,a)},style:{marginTop:`${n}px`,transition:"margin-top 2s ease-out"},anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"left"}},y.createElement("div",{className:_(t.wrapper,a)},y.createElement(S,{id:"annotation-editor",style:{padding:"2px 5px",width:"95%"},autoFocus:!0,multiline:!0,rows:1,rowsMax:4,value:s,onChange:this.onValueChange,InputProps:{disableUnderline:!0}}),y.createElement("div",{className:t.holder},y.createElement("div",{className:t.button,onClick:o},"Delete"),y.createElement("div",{className:_(t.button,a),onClick:this.handleTypeChange},"negative"===a?"Green":"Pink"),y.createElement("div",{className:t.button,onClick:this.handleSave},"Save"))))}}R.__initStatic();var k=A((e=>({wrapper:{width:"200px",overflow:"hidden",borderRadius:"4px",backgroundColor:"#ffffff",border:`4px solid ${e.palette.grey[100]}`,"&.negative":{borderColor:"rgb(255, 204, 238) !important"},"&.positive":{borderColor:"rgb(153, 255, 153) !important"}},holder:{display:"flex",flexWrap:"wrap",borderTop:`2px solid ${e.palette.grey[100]}`},positive:{backgroundColor:"rgb(153, 255, 153) !important","&:hover":{filter:"brightness(85%)"}},negative:{backgroundColor:"rgb(255, 204, 238) !important","&:hover":{filter:"brightness(85%)"}},button:{flexGrow:1,width:"28%",textAlign:"center",padding:"4px",cursor:"pointer","&:not(:nth-child(3n))":{borderRight:`1px solid ${e.palette.grey[100]}`},"&:hover":{backgroundColor:e.palette.grey[100]},"&.negative:hover":{backgroundColor:"rgb(153, 255, 153) !important"},"&.positive:hover":{backgroundColor:"rgb(255, 204, 238) !important"}},arrow:{overflowX:"unset",overflowY:"unset",marginLeft:"16px","&::before":{position:"absolute",right:"100%",top:"13px",border:"solid transparent",content:'""',height:0,width:0,pointerEvents:"none",borderWidth:"7px",borderRightColor:e.palette.grey[100]},"&.negative::before":{borderRightColor:"rgb(255, 204, 238) !important"},"&.positive::before":{borderRightColor:"rgb(153, 255, 153) !important"}}})))(R);const N=e,T=t,M=n,{withStyles:I}=i,{Popover:L}=o;class W extends N.Component{static __initStatic(){this.propTypes={anchorEl:M.object,open:M.bool,annotations:M.array,isNewAnnotation:M.bool,onClose:M.func,onDelete:M.func,onEdit:M.func,onWrite:M.func,onAnnotate:M.func}}render(){const{anchorEl:e,annotations:t,classes:n,isNewAnnotation:o,onAnnotate:i,onClose:a,onEdit:s,onDelete:r,onWrite:l,open:d}=this.props;return N.createElement(L,{anchorEl:e,open:d,onClose:a,classes:{paper:n.arrow},elevation:5,anchorOrigin:{vertical:"top",horizontal:"center"},transformOrigin:{vertical:"bottom",horizontal:"center"}},N.createElement("div",{className:n.mainWrapper},N.createElement("div",{className:n.annotationsWrapper},t.map(((e,t)=>N.createElement("div",{key:`annotation-${t}`,className:T(n.button,"positive"===e.type?n.positive:n.negative),onClick:()=>i(e)},e.label)))),N.createElement("div",{className:n.controlsWrapper},N.createElement("div",{className:n.button,onClick:a},"Cancel"),N.createElement("div",{style:{pointerEvents:"none"},className:n.button}),o?N.createElement(N.Fragment,null,N.createElement("div",{className:T(n.button,n.positive),onClick:()=>l("positive")},"Write"),N.createElement("div",{className:T(n.button,n.negative),onClick:()=>l("negative")},"Write")):N.createElement(N.Fragment,null,N.createElement("div",{className:n.button,onClick:r},"Delete"),N.createElement("div",{className:n.button,onClick:s},"Edit")))))}}W.__initStatic();var D=I((e=>({mainWrapper:{width:"300px",overflow:"hidden",borderRadius:"4px",backgroundColor:e.palette.common.white,border:`2px solid ${e.palette.grey[100]}`},annotationsWrapper:{display:"flex",flexWrap:"wrap"},controlsWrapper:{display:"flex",flexWrap:"wrap",borderTop:`2px solid ${e.palette.grey[100]}`},button:{width:"22%",textAlign:"center",padding:"4px",cursor:"pointer",borderBottom:`1px solid ${e.palette.grey[100]}`,"&:not(:nth-child(4n))":{borderRight:`1px solid ${e.palette.grey[100]}`},"&:nth-child(4n)":{flexGrow:1},"&:hover":{backgroundColor:e.palette.grey[100]}},positive:{backgroundColor:"rgb(153, 255, 153) !important","&:hover":{filter:"brightness(85%)"}},negative:{backgroundColor:"rgb(255, 204, 238) !important","&:hover":{filter:"brightness(85%)"}},holder:{display:"flex",flexWrap:"wrap",borderTop:`2px solid ${e.palette.grey[100]}`},arrow:{overflowX:"unset",overflowY:"unset",marginTop:"-16px","&::after":{position:"absolute",left:"calc(50% - 7px)",border:"solid transparent",content:'""',height:0,width:0,pointerEvents:"none",borderWidth:"7px",borderTopColor:"black"}}})))(W);const H=e,{withStyles:P}=i,O=t,$=n,z=c,{InputContainer:j}=p;class q extends H.Component{static __initStatic(){this.propTypes={text:$.string,comment:$.string,annotations:$.array,predefinedAnnotations:$.array,onChange:$.func.isRequired,onCommentChange:$.func.isRequired,width:$.number,height:$.number,maxHeight:$.string,disabled:$.bool,disabledMath:$.bool,customKeys:$.array,keypadMode:$.string,classes:$.object.isRequired}}constructor(e){super(e),q.prototype.__init.call(this),q.prototype.__init2.call(this),q.prototype.__init3.call(this),q.prototype.__init4.call(this),q.prototype.__init5.call(this),q.prototype.__init6.call(this),q.prototype.__init7.call(this),q.prototype.__init8.call(this),q.prototype.__init9.call(this),q.prototype.__init10.call(this),q.prototype.__init11.call(this),q.prototype.__init12.call(this),q.prototype.__init13.call(this),q.prototype.__init14.call(this),q.prototype.__init15.call(this),this.state={anchorEl:null,openedMenu:!1,openedEditor:!1,selectedElems:[],labelElem:null,selectionDetails:null,annotation:null,annotationIndex:null}}componentDidMount(){const{annotations:e,text:t}=this.props;t&&e.forEach((e=>{const[t,n]=((e,t,n)=>{const o=h(n,t),i=[];let a=0;return o.forEach((n=>{const o=a+n.textContent.length;[e,t].forEach((e=>{a<=e&&e<o&&i.push({node:n,offset:e-a})})),a=o})),i})(e.start,e.end,this.textRef);if(t&&n){const o=document.createRange();o.setStart(t.node,t.offset),o.setEnd(n.node,n.offset);const i=g(o);this.createDOMAnnotation(i,e)}})),this.textRef&&(this.adjustAnnotationsPosition(),this.textRef.addEventListener("scroll",this.adjustAnnotationsPosition))}__init(){this.adjustAnnotationsPosition=()=>{if(this.textRef&&this.labelsRef){const e=this.textRef.offsetLeft+this.textRef.offsetWidth+8;Array.from(this.labelsRef.children).forEach((t=>{const n=C(t.dataset.annId),o=(n[0].offsetTop?n[0].offsetTop:n[0].offsetParent.offsetTop)-this.textRef.scrollTop-6;t.style.top=`${o}px`,t.style.left=`${e}px`}))}}}__init2(){this.handleClick=e=>{const{annotations:t,classes:n}=this.props,{selectionDetails:o}=this.state;if(o)return;const{id:i,annId:a}=e.target.dataset,s=i||a,r=C(s),l=x(s),d=t.findIndex((e=>e.id===s)),c=l.hasAttribute("data-freeform");c&&l.classList.add(n.highlight),this.setState({anchorEl:r[0],openedMenu:!!i||!!a&&!c,openedEditor:!!a&&c,selectedElems:r,labelElem:l,annotationIndex:d,annotation:t[d],selectionDetails:null})}}__init3(){this.handleHover=e=>{const{classes:t}=this.props,{id:n,annId:o}=e.target.dataset,i=n||o,a=C(i),s=x(i),r=s.hasAttribute("data-freeform");a.forEach((e=>e.classList.add(t.hover))),s.classList.add(r?t.sideAnnotationHover:t.labelHover)}}__init4(){this.handleCancelHover=e=>{const{classes:t}=this.props,{id:n,annId:o}=e.target.dataset,i=n||o,a=C(i),s=x(i),r=s.hasAttribute("data-freeform");a.forEach((e=>e.classList.remove(t.hover))),s.classList.remove(r?t.sideAnnotationHover:t.labelHover)}}__init5(){this.handleClose=e=>{const{classes:t}=this.props,{selectedElems:n,labelElem:o}=this.state;n.length&&!n[0].hasAttribute("data-id")&&b(n,this.textRef),o&&o.classList.remove(t.highlight),this.setState({anchorEl:null,openedMenu:!1,openedEditor:!1,selectedElems:[],labelElem:null,selectionDetails:null,annotationIndex:null,annotation:null}),f()}}__init6(){this.handleSelection=e=>{const t=window.getSelection();if(e.detail>2)f();else if(t&&t.rangeCount>0){const e=t.getRangeAt(0),n=e.toString(),o=this.textRef.contains(e.commonAncestorContainer);if(!t.isCollapsed&&""!==n&&o){const t=((e,t)=>{const n=document.createRange();n.setStart(t,0),n.setEnd(e.startContainer,e.startOffset);const[,o]=m(n),[,i]=m(e),a=o.length;return{quote:i,start:a,end:a+i.length}})(e,this.textRef),n=g(e);this.setState({anchorEl:n[0],openedMenu:!0,selectedElems:n,selectionDetails:t})}}}}__init7(){this.deleteAnnotation=()=>{const{annotations:e,onChange:t}=this.props,{selectedElems:n,labelElem:o,annotationIndex:i,annotation:a}=this.state;(v(a.label)?this.labelsRef:n[0]).removeChild(o),b(n,this.textRef),e.splice(i,1),t(e),this.handleClose()}}__init8(){this.createDOMAnnotation=(e,t)=>{const{classes:n,disabled:o}=this.props,{id:i,label:a,type:s}=t;(e||[]).forEach((e=>{e.dataset.id=i,e.className=O(n.annotation,s),e.onclick=!o&&this.handleClick,e.onmouseover=this.handleHover,e.onmouseout=this.handleCancelHover}));const r=e&&e[0]||{},l=document.createElement("SPAN");if(l.dataset.annId=i,l.innerHTML=a,l.onclick=!o&&this.handleClick,l.onmouseover=this.handleHover,l.onmouseout=this.handleCancelHover,v(a)){const e=(r.offsetTop?r.offsetTop:r.offsetParent.offsetTop)-this.textRef.scrollTop,t=this.textRef.offsetLeft+this.textRef.offsetWidth+8;l.dataset.freeform=!0,l.className=O(n.sideAnnotation,s),l.style.top=`${e}px`,l.style.left=`${t}px`,this.labelsRef.appendChild(l)}else l.className=O(n.annotationLabel,s),r.appendChild(l)}}__init9(){this.createNewAnnotation=(e,t)=>{const{selectedElems:n,selectionDetails:o}=this.state,i={id:[o.start,o.end,(new Date).getTime()].join("-"),label:e,type:t,...o};return this.createDOMAnnotation(n,i),i}}__init10(){this.handleMenuClick=e=>{const{annotations:t,onChange:n}=this.props,{annotation:o,annotationIndex:i}=this.state,{type:a,text:s}=e;if(o){const e={...o,label:s,type:a},{type:n,label:r}=o;this.updateLabel(r,e,a!==n&&n),t.splice(i,1,e)}else{const e=this.createNewAnnotation(s,a);t.push(e)}n(t),this.handleClose()}}__init11(){this.editAnnotation=()=>{this.setState({openedMenu:!1,openedEditor:!0})}}__init12(){this.addAnnotation=e=>{const{annotations:t,onChange:n}=this.props,o=this.createNewAnnotation("",e),i=x(o.id);t.push(o),this.setState({openedMenu:!1,openedEditor:!0,annotationIndex:t.length-1,annotation:o,labelElem:i}),n(t)}}__init13(){this.updateLabel=(e,t,n)=>{const{selectedElems:o,labelElem:i}=this.state,{label:a,type:s}=t;v(a)&&v(e)||!v(a)&&!v(e)?(i.innerHTML=a,n&&(i.classList.remove(n),i.classList.add(s),o.forEach((e=>{e.classList.remove(n),e.classList.add(s)})))):v(a)&&!v(e)?(o[0].removeChild(i),this.createDOMAnnotation(o,t)):!v(a)&&v(e)&&(this.labelsRef.removeChild(i),this.createDOMAnnotation(o,t))}}__init14(){this.changeAnnotationType=e=>{const{annotations:t,onChange:n}=this.props,{annotationIndex:o,selectedElems:i}=this.state,{type:a,label:s}=t[o],r="positive"===a?"negative":"positive",l={...t[o],type:r,label:e};i.forEach((e=>{e.classList.remove(a),e.classList.add(r)})),this.updateLabel(s,l,a),t.splice(o,1,l),n(t),this.handleClose()}}__init15(){this.updateAnnotation=(e,t)=>{const{annotations:n,onChange:o}=this.props,{annotationIndex:i}=this.state,a={...n[i],label:t};this.updateLabel(e,a),n.splice(i,1,a),o(n)}}componentWillUnmount(){this.textRef.removeEventListener("scroll",this.adjustAnnotationsPosition)}render(){const{classes:e,comment:t,customKeys:n,disabled:o,disabledMath:i,keypadMode:a,height:s,width:r,maxHeight:l,onCommentChange:d,predefinedAnnotations:c,text:p}=this.props,{anchorEl:h,annotation:m,openedMenu:u,openedEditor:g,selectionDetails:b}=this.state,v=h&&(h.offsetTop?h.offsetTop:h.offsetParent.offsetTop),C=this.textRef&&v?v-this.textRef.scrollTop-8:0;return H.createElement("div",null,H.createElement("div",{className:e.wrapper},H.createElement("div",{className:e.textContainer,style:{width:r-34,minHeight:s,maxHeight:l},ref:e=>this.textRef=e,onMouseDown:o?()=>{}:f,onMouseUp:o?()=>{}:this.handleSelection,dangerouslySetInnerHTML:{__html:p}}),H.createElement("div",{className:e.labelsContainer,ref:e=>this.labelsRef=e})),H.createElement(j,{label:"Comment",className:e.commentContainer},H.createElement(z,{className:e.prompt,markup:t||"",onChange:d,width:r&&(r+104).toString(),disabled:o,pluginProps:{math:{disabled:i,customKeys:n,keypadMode:a,controlledKeypadMode:!1},video:{disabled:!0},audio:{disabled:!0},textAlign:{disabled:!0}}})),H.createElement(D,{anchorEl:h,open:u&&!o,annotations:c,isNewAnnotation:!!b,onClose:this.handleClose,onDelete:this.deleteAnnotation,onEdit:this.editAnnotation,onWrite:this.addAnnotation,onAnnotate:this.handleMenuClick}),H.createElement(k,{anchorEl:this.textRef,open:g&&!o,offset:C,value:m&&m.label||"",type:m&&m.type,onClose:this.handleClose,onDelete:this.deleteAnnotation,onSave:this.updateAnnotation,onTypeChange:this.changeAnnotationType}))}}q.__initStatic();var B=P((e=>({textContainer:{padding:"10px 120px 10px 16px",backgroundColor:"rgba(0, 0, 0, 0.06)",border:"1px solid #ccc",borderRadius:"4px",overflowY:"scroll",lineHeight:"36px",whiteSpace:"pre-wrap",overflowWrap:"break-word","& p":{margin:0},"& span[data-latex]":{userSelect:"none","-webkit-user-select":"none","-moz-user-select":"none","-ms-user-select":"none"}},labelsContainer:{width:"230px"},wrapper:{position:"relative",overflowX:"hidden",display:"flex"},commentContainer:{paddingTop:2*e.spacing.unit,marginBottom:2*e.spacing.unit,marginTop:2*e.spacing.unit,width:"100%"},annotation:{position:"relative",cursor:"pointer","&.positive":{backgroundColor:"rgb(51, 255, 51, 0.5)"},"&.negative":{backgroundColor:"rgba(255, 102, 204, 0.4)"}},annotationLabel:{backgroundColor:"rgb(242, 242, 242)",padding:"2px",position:"absolute",userSelect:"none",whiteSpace:"nowrap",top:"-10px",left:"-2px",fontSize:e.typography.fontSize-2,fontStyle:"normal",fontWeight:"normal",lineHeight:"6px","-webkit-user-select":"none","-moz-user-select":"none","-ms-user-select":"none","&.positive":{color:"rgb(0, 128, 0)"},"&.negative":{color:"rgb(204, 0, 136)"}},labelHover:{zIndex:20,"&.positive":{color:"rgb(0, 77, 0)"},"&.negative":{color:"rgb(153, 0, 102)"}},highlight:{zIndex:10},hover:{zIndex:20,"&.positive":{backgroundColor:"rgb(51, 255, 51, 0.7)"},"&.negative":{backgroundColor:"rgba(255, 102, 204, 0.55)"}},sideAnnotationHover:{zIndex:20,"&.negative":{backgroundColor:"rgb(255, 179, 230) !important","&:before":{borderRightColor:"rgb(255, 179, 230) !important"}},"&.positive":{backgroundColor:"rgb(128, 255, 128) !important","&:before":{borderRightColor:"rgb(153, 255, 153) !important"}}},sideAnnotation:{position:"absolute",padding:e.spacing.unit/2,borderRadius:"4px",marginLeft:e.spacing.unit,width:"180px",whiteSpace:"pre-wrap",wordBreak:"break-word",border:`2px solid ${e.palette.common.white}`,fontSize:e.typography.fontSize,fontStyle:"normal",fontWeight:"normal","&:before":{position:"absolute",right:"100%",top:"5px",border:"solid transparent",content:'""',height:0,width:0,pointerEvents:"none",borderWidth:"7px"},"&.negative":{backgroundColor:"rgb(255, 204, 238)","&:before":{borderRightColor:"rgb(255, 204, 238)"}},"&.positive":{backgroundColor:"rgb(153, 255, 153)","&:before":{borderRightColor:"rgb(153, 255, 153)"}}}})))(q);const K=e,V=n,F=t,{debounce:U}=a,G=s,{Typography:X}=o,{withStyles:Y}=i,{color:Q}=r,{Feedback:J}=r,{Collapsible:Z}=r,{PreviewPrompt:ee}=r,{UiLayout:te}=r,ne=c,oe=G("@pie-ui:extended-text-entry");class ie extends K.Component{constructor(...e){super(...e),ie.prototype.__init.call(this),ie.prototype.__init2.call(this)}static __initStatic(){this.propTypes={onValueChange:V.func.isRequired,onAnnotationsChange:V.func.isRequired,onCommentChange:V.func.isRequired,model:V.object,classes:V.object.isRequired,session:V.shape({value:V.string,annotations:V.array,comment:V.string}).isRequired}}__init(){this.changeSessionValue=U(this.props.onValueChange,1500)}__init2(){this.changeSessionComment=U(this.props.onCommentChange,1500)}render(){const{model:e,classes:t,session:n,onAnnotationsChange:o}=this.props,{animationsDisabled:i,annotatorMode:a,customKeys:s,dimensions:r,disabled:l,disabledAnnotator:d,equationEditor:c,extraCSSRules:p,feedback:h,mathInput:m,playersToolbarPosition:u,predefinedAnnotations:g,prompt:b,spanishInput:f,specialInput:v,spellCheckEnabled:C,teacherInstructions:x}=e,{annotations:y,comment:_,value:E}=n,{width:w,height:S}=r||{},A="40vh",R={position:"top"===u?"top":"bottom"};oe("[render] disabled? ",l);const k=K.createElement(ee,{defaultClassName:"teacher-instructions",prompt:x}),N=[];return f&&N.push({language:"spanish"}),v&&N.push({language:"special"}),K.createElement(te,{extraCSSRules:p,className:t.main,ref:e=>{this.containerRef=e}},K.createElement("h2",{className:t.srOnly},"Constructed Response Question"),x&&K.createElement("div",{className:t.teacherInstructions},i?k:K.createElement(Z,{labels:{hidden:"Show Teacher Instructions",visible:"Hide Teacher Instructions"},className:t.collapsible},k)),b&&K.createElement(X,{component:"span",className:t.prompt},K.createElement(ee,{defaultClassName:"prompt",prompt:e.prompt})),a?K.createElement(B,{text:E||"",annotations:y||[],comment:_||"",predefinedAnnotations:g||[],onChange:o,onCommentChange:this.changeSessionComment,width:w,height:S,maxHeight:A,disabled:d,disabledMath:!m,customKeys:s,keypadMode:c}):K.createElement(ne,{className:F(t.editor,"response-area-editor"),onChange:this.changeSessionValue,markup:E||"",maxWidth:w&&w.toString(),minWidth:"100px",minHeight:S&&S.toString(),maxHeight:A,disabled:l,highlightShape:!0,toolbarOpts:R,spellCheck:C,charactersLimit:5e4,autoWidthToolbar:!0,pluginProps:{math:{disabled:!m,customKeys:this.props.model.customKeys,keypadMode:this.props.model.equationEditor,controlledKeypadMode:!1},video:{disabled:!0},audio:{disabled:!0},table:{disabled:!0},textAlign:{disabled:!0},separateParagraphs:{disabled:!1},ul_list:{disabled:!0},ol_list:{disabled:!0}},languageCharactersProps:N}),h&&K.createElement(J,{correctness:"correct",feedback:h}))}}ie.__initStatic();var ae=Y((e=>({main:{backgroundColor:Q.background(),color:Q.text()},prompt:{width:"100%",color:Q.text(),marginBottom:2*e.spacing.unit,fontSize:"inherit"},teacherInstructions:{marginBottom:2*e.spacing.unit},editor:{marginBottom:2*e.spacing.unit,borderRadius:"4px"},srOnly:{position:"absolute",left:"-10000px",top:"auto",width:"1px",height:"1px",overflow:"hidden"}})))(ie);const se=e,re=l,{debounce:le}=a,de=s,{renderMath:ce}=d,pe=de("pie-element:extended-text-entry:print");class he extends HTMLElement{constructor(){super(),this._options=null,this._model=null,this._session=[],this._rerender=le((()=>{if(this._model&&this._session){const e=((e,t)=>{const n="instructor"===t.role;return e.prompt=!1!==e.promptEnabled?e.prompt:void 0,e.teacherInstructions=n&&!1!==e.teacherInstructionsEnabled?e.teacherInstructions:void 0,e.showTeacherInstructions=n,e.mode=n?"evaluate":e.mode,e.dimensions={height:100,width:500,...e.dimensions},e.disabled=!0,e.feedback=void 0,e.animationsDisabled=!0,e})(this._model,this._options),t=this._options&&se.createElement(ae,{model:e,session:{},onChange:()=>{},onValueChange:()=>{},onAnnotationsChange:()=>{},onCommentChange:()=>{}});re.render(t,this,(()=>{pe("render complete - render math"),ce(this)}))}else pe("skip")}),50,{leading:!1,trailing:!0})}set options(e){this._options=e}set model(e){this._model=e,this._rerender()}connectedCallback(){}}export{he as default};
|