@pie-element/hotspot 7.9.7-next.2 → 7.9.7-next.20

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.
Files changed (6) hide show
  1. package/configure/package.json +1 -1
  2. package/controller/package.json +1 -1
  3. package/lib/hotspot/index.js +4 -2
  4. package/lib/hotspot/index.js.map +1 -1
  5. package/package.json +3 -3
  6. package/src/hotspot/index.jsx +5 -3
package/configure/package.json CHANGED
@@ -10,7 +10,7 @@
10
10
  "@material-ui/core": "^3.9.2",
11
11
  "@material-ui/icons": "^3.0.2",
12
12
  "@pie-framework/pie-configure-events": "^1.3.0",
13
- "@pie-lib/pie-toolbox": "2.16.0",
13
+ "@pie-lib/pie-toolbox": "2.17.5",
14
14
  "classnames": "^2.2.6",
15
15
  "debug": "^3.1.0",
16
16
  "konva": "^3.2.4",
package/controller/package.json CHANGED
@@ -11,7 +11,7 @@
11
11
  "main": "lib/index.js",
12
12
  "module": "src/index.js",
13
13
  "dependencies": {
14
- "@pie-lib/pie-toolbox": "2.16.0",
14
+ "@pie-lib/pie-toolbox": "2.17.5",
15
15
  "debug": "^4.1.1",
16
16
  "lodash": "^4.17.15"
17
17
  }
package/lib/hotspot/index.js CHANGED
@@ -137,12 +137,14 @@ var HotspotComponent = /*#__PURE__*/function (_React$Component) {
137
137
  var showCorrect = this.state.showCorrect;
138
138
  var isEvaluateMode = mode === 'evaluate';
139
139
  var showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
140
+ var showRationale = rationale && ((0, _renderUi.hasText)(rationale) || (0, _renderUi.hasMedia)(rationale));
141
+ var showTeacherInstructions = teacherInstructions && ((0, _renderUi.hasText)(teacherInstructions) || (0, _renderUi.hasMedia)(teacherInstructions));
140
142
  return /*#__PURE__*/_react["default"].createElement(_renderUi.UiLayout, {
141
143
  extraCSSRules: extraCSSRules,
142
144
  id: 'main-container',
143
145
  className: classes.main,
144
146
  fontSizeFactor: fontSizeFactor
145
- }, teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
147
+ }, showTeacherInstructions && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
146
148
  labels: {
147
149
  hidden: 'Show Teacher Instructions',
148
150
  visible: 'Hide Teacher Instructions'
@@ -177,7 +179,7 @@ var HotspotComponent = /*#__PURE__*/function (_React$Component) {
177
179
  strokeWidth: strokeWidth,
178
180
  scale: this.state.scale,
179
181
  showCorrect: showCorrect
180
- }) : null, rationale && (0, _renderUi.hasText)(rationale) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
182
+ }) : null, showRationale && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
181
183
  labels: {
182
184
  hidden: 'Show Rationale',
183
185
  visible: 'Hide Rationale'
package/lib/hotspot/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/hotspot/index.jsx"],"names":["HotspotComponent","props","showCorrect","state","setState","observer","scale","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","disconnect","session","model","disabled","extraCSSRules","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","hoverOutlineColor","selectedHotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","responseCorrect","language","fontSizeFactor","autoplayAudioEnabled","customAudioButton","onSelectChoice","classes","isEvaluateMode","showCorrectAnswerToggle","main","hidden","visible","collapsible","onToggle","bind","React","Component","propTypes","PropTypes","object","isRequired","func","defaultProps","styles","theme","color","text","backgroundColor","background","position","marginBottom","spacing","unit","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport { color, Collapsible, hasText, PreviewPrompt, UiLayout } from '@pie-lib/pie-toolbox/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Container from './container';\n\nclass HotspotComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n showCorrect: false,\n observer: null,\n scale: 1,\n };\n }\n\n componentDidMount() {\n this.observer = new MutationObserver((mutations) => {\n mutations.forEach(() => {\n const target = document.getElementById('question-container')?.style?.cssText;\n const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\n const zoomParsed = zoom?.replace(/\\s/g, '');\n\n if (zoomParsed) {\n const newScale = parseFloat(zoomParsed) / 100;\n\n if (newScale !== this.state.scale) {\n this.setState({\n scale: parseFloat(zoomParsed) / 100,\n });\n }\n } else if (!zoomParsed && this.state.scale !== 1) {\n this.setState({\n scale: 1,\n });\n }\n });\n });\n\n const target = document.getElementById('question-container');\n\n if (target) {\n this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n }\n }\n\n componentWillUnmount() {\n this.observer?.disconnect();\n }\n\n onToggle = () => {\n const { showCorrect } = this.state;\n this.setState({ showCorrect: !showCorrect });\n };\n\n render() {\n const {\n session,\n model: {\n disabled,\n extraCSSRules,\n imageUrl,\n prompt,\n mode,\n multipleCorrect,\n shapes,\n outlineColor,\n hotspotColor,\n hoverOutlineColor,\n selectedHotspotColor,\n dimensions,\n rationale,\n teacherInstructions,\n strokeWidth,\n responseCorrect,\n language,\n fontSizeFactor,\n autoplayAudioEnabled,\n customAudioButton\n },\n onSelectChoice,\n classes,\n } = this.props;\n const { showCorrect } = this.state;\n const isEvaluateMode = mode === 'evaluate';\n const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n\n return (\n <UiLayout extraCSSRules={extraCSSRules} id={'main-container'} className={classes.main} fontSizeFactor={fontSizeFactor}>\n {teacherInstructions && hasText(teacherInstructions) && (\n <Collapsible\n labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n className={classes.collapsible}\n >\n <PreviewPrompt className=\"prompt\" prompt={teacherInstructions} />\n </Collapsible>\n )}\n\n {prompt && (\n <PreviewPrompt\n className=\"prompt\"\n prompt={prompt}\n autoplayAudioEnabled={autoplayAudioEnabled}\n customAudioButton={customAudioButton}\n />\n )}\n\n {showCorrectAnswerToggle && (\n <CorrectAnswerToggle\n show={showCorrectAnswerToggle}\n toggled={showCorrect}\n onToggle={this.onToggle.bind(this)}\n language={language}\n />\n )}\n\n {imageUrl ? (\n <Container\n isEvaluateMode={isEvaluateMode}\n session={session}\n dimensions={dimensions}\n imageUrl={imageUrl}\n hotspotColor={hotspotColor}\n hoverOutlineColor={hoverOutlineColor}\n selectedHotspotColor={selectedHotspotColor}\n multipleCorrect={multipleCorrect}\n outlineColor={outlineColor}\n onSelectChoice={onSelectChoice}\n shapes={shapes}\n disabled={disabled}\n strokeWidth={strokeWidth}\n scale={this.state.scale}\n showCorrect={showCorrect}\n />\n ) : null}\n\n {rationale && hasText(rationale) && (\n <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n <PreviewPrompt className=\"prompt\" prompt={rationale} />\n </Collapsible>\n )}\n </UiLayout>\n );\n }\n}\n\nHotspotComponent.propTypes = {\n classes: PropTypes.object,\n model: PropTypes.object.isRequired,\n onSelectChoice: PropTypes.func.isRequired,\n session: PropTypes.object.isRequired,\n};\n\nHotspotComponent.defaultProps = {\n classes: {},\n};\n\nconst styles = (theme) => ({\n main: {\n color: color.text(),\n backgroundColor: color.background(),\n position: 'relative'\n },\n collapsible: {\n marginBottom: theme.spacing.unit * 2,\n },\n prompt: {\n fontSize: 'inherit',\n },\n});\n\nexport default withStyles(styles)(HotspotComponent);\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../src/hotspot/index.jsx"],"names":["HotspotComponent","props","showCorrect","state","setState","observer","scale","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","disconnect","session","model","disabled","extraCSSRules","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","hoverOutlineColor","selectedHotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","responseCorrect","language","fontSizeFactor","autoplayAudioEnabled","customAudioButton","onSelectChoice","classes","isEvaluateMode","showCorrectAnswerToggle","showRationale","showTeacherInstructions","main","hidden","visible","collapsible","onToggle","bind","React","Component","propTypes","PropTypes","object","isRequired","func","defaultProps","styles","theme","color","text","backgroundColor","background","position","marginBottom","spacing","unit","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport {color, Collapsible, hasText, PreviewPrompt, UiLayout, hasMedia} from '@pie-lib/pie-toolbox/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Container from './container';\n\nclass HotspotComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n showCorrect: false,\n observer: null,\n scale: 1,\n };\n }\n\n componentDidMount() {\n this.observer = new MutationObserver((mutations) => {\n mutations.forEach(() => {\n const target = document.getElementById('question-container')?.style?.cssText;\n const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\n const zoomParsed = zoom?.replace(/\\s/g, '');\n\n if (zoomParsed) {\n const newScale = parseFloat(zoomParsed) / 100;\n\n if (newScale !== this.state.scale) {\n this.setState({\n scale: parseFloat(zoomParsed) / 100,\n });\n }\n } else if (!zoomParsed && this.state.scale !== 1) {\n this.setState({\n scale: 1,\n });\n }\n });\n });\n\n const target = document.getElementById('question-container');\n\n if (target) {\n this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n }\n }\n\n componentWillUnmount() {\n this.observer?.disconnect();\n }\n\n onToggle = () => {\n const { showCorrect } = this.state;\n this.setState({ showCorrect: !showCorrect });\n };\n\n render() {\n const {\n session,\n model: {\n disabled,\n extraCSSRules,\n imageUrl,\n prompt,\n mode,\n multipleCorrect,\n shapes,\n outlineColor,\n hotspotColor,\n hoverOutlineColor,\n selectedHotspotColor,\n dimensions,\n rationale,\n teacherInstructions,\n strokeWidth,\n responseCorrect,\n language,\n fontSizeFactor,\n autoplayAudioEnabled,\n customAudioButton\n },\n onSelectChoice,\n classes,\n } = this.props;\n const { showCorrect } = this.state;\n const isEvaluateMode = mode === 'evaluate';\n const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n const showRationale = rationale && (hasText(rationale) || hasMedia(rationale));\n const showTeacherInstructions = teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));\n\n return (\n <UiLayout extraCSSRules={extraCSSRules} id={'main-container'} className={classes.main} fontSizeFactor={fontSizeFactor}>\n {showTeacherInstructions && (\n <Collapsible\n labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n className={classes.collapsible}\n >\n <PreviewPrompt className=\"prompt\" prompt={teacherInstructions} />\n </Collapsible>\n )}\n\n {prompt && (\n <PreviewPrompt\n className=\"prompt\"\n prompt={prompt}\n autoplayAudioEnabled={autoplayAudioEnabled}\n customAudioButton={customAudioButton}\n />\n )}\n\n {showCorrectAnswerToggle && (\n <CorrectAnswerToggle\n show={showCorrectAnswerToggle}\n toggled={showCorrect}\n onToggle={this.onToggle.bind(this)}\n language={language}\n />\n )}\n\n {imageUrl ? (\n <Container\n isEvaluateMode={isEvaluateMode}\n session={session}\n dimensions={dimensions}\n imageUrl={imageUrl}\n hotspotColor={hotspotColor}\n hoverOutlineColor={hoverOutlineColor}\n selectedHotspotColor={selectedHotspotColor}\n multipleCorrect={multipleCorrect}\n outlineColor={outlineColor}\n onSelectChoice={onSelectChoice}\n shapes={shapes}\n disabled={disabled}\n strokeWidth={strokeWidth}\n scale={this.state.scale}\n showCorrect={showCorrect}\n />\n ) : null}\n\n {showRationale && (\n <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n <PreviewPrompt className=\"prompt\" prompt={rationale} />\n </Collapsible>\n )}\n </UiLayout>\n );\n }\n}\n\nHotspotComponent.propTypes = {\n classes: PropTypes.object,\n model: PropTypes.object.isRequired,\n onSelectChoice: PropTypes.func.isRequired,\n session: PropTypes.object.isRequired,\n};\n\nHotspotComponent.defaultProps = {\n classes: {},\n};\n\nconst styles = (theme) => ({\n main: {\n color: color.text(),\n backgroundColor: color.background(),\n position: 'relative'\n },\n collapsible: {\n marginBottom: theme.spacing.unit * 2,\n },\n prompt: {\n fontSize: 'inherit',\n },\n});\n\nexport default withStyles(styles)(HotspotComponent);\n"],"file":"index.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pie-element/hotspot",
3
- "version": "7.9.7-next.2+21ecb8bdd",
3
+ "version": "7.9.7-next.20+8645a526e",
4
4
  "description": "",
5
5
  "repository": "pie-framework/pie-elements",
6
6
  "publishConfig": {
@@ -9,7 +9,7 @@
9
9
  "dependencies": {
10
10
  "@material-ui/core": "^3.9.3",
11
11
  "@pie-framework/pie-player-events": "^0.1.0",
12
- "@pie-lib/pie-toolbox": "2.16.0",
12
+ "@pie-lib/pie-toolbox": "2.17.5",
13
13
  "konva": "^3.2.5",
14
14
  "prop-types": "^15.6.1",
15
15
  "react": "^16.8.1",
@@ -18,7 +18,7 @@
18
18
  },
19
19
  "author": "pie framework developers",
20
20
  "license": "ISC",
21
- "gitHead": "21ecb8bdd2ac0d202c57aeed447dda1541723cda",
21
+ "gitHead": "8645a526eb8d93c6f42ec1b4e088c4865ed2a0a7",
22
22
  "scripts": {
23
23
  "postpublish": "../../scripts/postpublish"
24
24
  },
package/src/hotspot/index.jsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';
4
- import { color, Collapsible, hasText, PreviewPrompt, UiLayout } from '@pie-lib/pie-toolbox/render-ui';
4
+ import {color, Collapsible, hasText, PreviewPrompt, UiLayout, hasMedia} from '@pie-lib/pie-toolbox/render-ui';
5
5
  import { withStyles } from '@material-ui/core/styles';
6
6
 
7
7
  import Container from './container';
@@ -86,10 +86,12 @@ class HotspotComponent extends React.Component {
86
86
  const { showCorrect } = this.state;
87
87
  const isEvaluateMode = mode === 'evaluate';
88
88
  const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
89
+ const showRationale = rationale && (hasText(rationale) || hasMedia(rationale));
90
+ const showTeacherInstructions = teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));
89
91
 
90
92
  return (
91
93
  <UiLayout extraCSSRules={extraCSSRules} id={'main-container'} className={classes.main} fontSizeFactor={fontSizeFactor}>
92
- {teacherInstructions && hasText(teacherInstructions) && (
94
+ {showTeacherInstructions && (
93
95
  <Collapsible
94
96
  labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}
95
97
  className={classes.collapsible}
@@ -136,7 +138,7 @@ class HotspotComponent extends React.Component {
136
138
  />
137
139
  ) : null}
138
140
 
139
- {rationale && hasText(rationale) && (
141
+ {showRationale && (
140
142
  <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>
141
143
  <PreviewPrompt className="prompt" prompt={rationale} />
142
144
  </Collapsible>