qureal-editor 1.0.5 → 1.0.6

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 (5) hide show
  1. package/dist/index.es.js +100 -156
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +99 -156
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,170 +1,114 @@
1
- import React, { Component } from 'react';
2
- import PropTypes from 'prop-types';
1
+ import React, { Fragment, useEffect } from 'react';
3
2
 
4
- function QButton() {
5
- return React.createElement(
6
- "button",
7
- null,
8
- "Hello Qureal"
9
- );
10
- }
11
-
12
- function styleInject(css, ref) {
13
- if ( ref === void 0 ) ref = {};
14
- var insertAt = ref.insertAt;
15
-
16
- if (!css || typeof document === 'undefined') { return; }
17
-
18
- var head = document.head || document.getElementsByTagName('head')[0];
19
- var style = document.createElement('style');
20
- style.type = 'text/css';
21
-
22
- if (insertAt === 'top') {
23
- if (head.firstChild) {
24
- head.insertBefore(style, head.firstChild);
25
- } else {
26
- head.appendChild(style);
27
- }
28
- } else {
29
- head.appendChild(style);
30
- }
31
-
32
- if (style.styleSheet) {
33
- style.styleSheet.cssText = css;
34
- } else {
35
- style.appendChild(document.createTextNode(css));
36
- }
37
- }
38
-
39
- var css = "body{\n background-color: rgb(97, 97, 97);\n}\n.styles_outerN__IxLsd{\n padding: 10px 15px;\n border: none;\n outline: none;\n background-color: black;\n margin: 20px;\n border-radius: 5px;\n transition: 0.5s;\n}\n\n.styles_innerN__2mhRO{\n font-size: 1.3rem;\n color: #e3e3e3;\n transition: 0.5s;\n}\n\n.styles_outerN__IxLsd:hover {\n box-shadow: 0px 0px 22px 10px #34ebb7;\n cursor: pointer;\n}\n\n.styles_innerN__2mhRO:hover{\n color: #34ebb7;\n text-shadow: 0 0 15px #34ebb7;\n}\n";
40
- var styles = { "outerN": "styles_outerN__IxLsd", "innerN": "styles_innerN__2mhRO" };
41
- styleInject(css);
42
-
43
- var classCallCheck = function (instance, Constructor) {
44
- if (!(instance instanceof Constructor)) {
45
- throw new TypeError("Cannot call a class as a function");
46
- }
3
+ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
4
+ return typeof obj;
5
+ } : function (obj) {
6
+ return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
47
7
  };
48
8
 
49
- var createClass = function () {
50
- function defineProperties(target, props) {
51
- for (var i = 0; i < props.length; i++) {
52
- var descriptor = props[i];
53
- descriptor.enumerable = descriptor.enumerable || false;
54
- descriptor.configurable = true;
55
- if ("value" in descriptor) descriptor.writable = true;
56
- Object.defineProperty(target, descriptor.key, descriptor);
57
- }
58
- }
59
-
60
- return function (Constructor, protoProps, staticProps) {
61
- if (protoProps) defineProperties(Constructor.prototype, protoProps);
62
- if (staticProps) defineProperties(Constructor, staticProps);
63
- return Constructor;
64
- };
65
- }();
66
-
67
- var inherits = function (subClass, superClass) {
68
- if (typeof superClass !== "function" && superClass !== null) {
69
- throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
70
- }
9
+ var _extends = Object.assign || function (target) {
10
+ for (var i = 1; i < arguments.length; i++) {
11
+ var source = arguments[i];
71
12
 
72
- subClass.prototype = Object.create(superClass && superClass.prototype, {
73
- constructor: {
74
- value: subClass,
75
- enumerable: false,
76
- writable: true,
77
- configurable: true
13
+ for (var key in source) {
14
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
15
+ target[key] = source[key];
16
+ }
78
17
  }
79
- });
80
- if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
81
- };
82
-
83
- var possibleConstructorReturn = function (self, call) {
84
- if (!self) {
85
- throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
86
18
  }
87
19
 
88
- return call && (typeof call === "object" || typeof call === "function") ? call : self;
20
+ return target;
89
21
  };
90
22
 
91
- var NeonButton = function (_Component) {
92
- inherits(NeonButton, _Component);
23
+ function QurealiFrame(_ref) {
24
+ var slug = _ref.slug,
25
+ _ref$type = _ref.type,
26
+ type = _ref$type === undefined ? "creation" : _ref$type,
27
+ _ref$style = _ref.style,
28
+ style = _ref$style === undefined ? {} : _ref$style;
93
29
 
94
- function NeonButton() {
95
- var _ref;
96
30
 
97
- var _temp, _this, _ret;
98
-
99
- classCallCheck(this, NeonButton);
100
-
101
- for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
102
- args[_key] = arguments[_key];
103
- }
104
-
105
- return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = NeonButton.__proto__ || Object.getPrototypeOf(NeonButton)).call.apply(_ref, [this].concat(args))), _this), _this.state = { hover: false }, _this.getInitialState = function () {
106
- return { hover: false };
107
- }, _this.toggleHover = function () {
108
- _this.setState({ hover: !_this.state.hover });
109
- }, _temp), possibleConstructorReturn(_this, _ret);
110
- }
111
-
112
- createClass(NeonButton, [{
113
- key: 'render',
114
- value: function render() {
115
- var _props = this.props,
116
- text = _props.text,
117
- color = _props.color;
118
-
119
-
120
- var linkStyle;
121
- if (this.state.hover) {
122
- linkStyle = { color: color };
123
- } else {
124
- linkStyle = { color: '#e3e3e3' };
125
- }
126
-
127
- var boxStyle;
128
- if (this.state.hover) {
129
- boxStyle = { boxShadow: '0px 0px 22px 10px ' + color };
130
- } else {
131
- boxStyle = { color: '#e3e3e3' };
132
- }
133
-
134
- return React.createElement(
135
- 'button',
136
- {
137
- className: styles.outerN,
138
- style: boxStyle,
139
- onMouseEnter: this.toggleHover,
140
- onMouseLeave: this.toggleHover
141
- },
142
- React.createElement(
143
- 'div',
144
- {
145
- className: styles.innerN,
146
- style: linkStyle
147
- },
148
- text
149
- )
150
- );
151
- }
152
- }]);
153
- return NeonButton;
154
- }(Component);
155
-
156
- NeonButton.propTypes = {
157
- text: PropTypes.string,
158
- color: PropTypes.string
159
- };
160
-
161
-
162
- NeonButton.defaultProps = {
163
- text: "Enter Button Text",
164
- color: "#34ebb7"
31
+ return React.createElement(
32
+ Fragment,
33
+ null,
34
+ React.createElement("iframe", {
35
+ id: "qureal_iframe",
36
+ title: "Qureal"
37
+ // src={`http://localhost:3201/embed/${creation_slug}`}
38
+ , src: type === "creation" ? "https://show.qureal.com/embed/" + slug : "https://show.qureal.com/ts/" + slug
39
+ // src={`https://show.qureal.com/embed/${slug}`}
40
+ , style: _extends({
41
+ width: "100%",
42
+ height: "100%"
43
+ }, style)
44
+ })
45
+ );
46
+ }
165
47
 
166
- // export default NeonButton;
167
- };
48
+ // export default QurealiFrame;
49
+ var QurealiFrame$1 = React.memo(QurealiFrame, function () {
50
+ return true;
51
+ });
52
+
53
+ var ALLOWED_ORIGINS = ["https://show.qureal.com", "http://localhost:3201"];
54
+
55
+ function QurealViewer(_ref) {
56
+ var _ref$slug = _ref.slug,
57
+ slug = _ref$slug === undefined ? "qi_sample" : _ref$slug,
58
+ _ref$type = _ref.type,
59
+ type = _ref$type === undefined ? "creation" : _ref$type,
60
+ _ref$onFormSubmit = _ref.onFormSubmit,
61
+ onFormSubmit = _ref$onFormSubmit === undefined ? function () {} : _ref$onFormSubmit,
62
+ _ref$style = _ref.style,
63
+ style = _ref$style === undefined ? { width: "800px", height: "600px" } : _ref$style;
64
+
65
+
66
+ var sendToIFrame = function sendToIFrame(creation_slug) {
67
+ console.log("Sending data to iFrame");
68
+ var qureal_element = document.getElementById("qureal_iframe");
69
+
70
+ var qureal_window = qureal_element ? qureal_element.contentWindow : null;
71
+ if (qureal_window) {
72
+ qureal_window.postMessage({
73
+ message_type: "OPEN_CREATION",
74
+ data: {
75
+ slug: creation_slug
76
+ }
77
+ }, "*");
78
+ console.log("Data sent to iframe");
79
+ }
80
+ };
81
+
82
+ useEffect(function () {
83
+ sendToIFrame(slug);
84
+ }, [slug]);
85
+
86
+ useEffect(function () {
87
+ var handler = function handler(ev) {
88
+ if (ALLOWED_ORIGINS.includes(ev.origin) && _typeof(ev.data) === "object") {
89
+ switch (ev.data.event_type) {
90
+ case "FORM_SUBMIT":
91
+ onFormSubmit(ev.data.data);
92
+ break;
93
+ default:
94
+ console.log("No event type found");
95
+ console.log(ev.data);
96
+ }
97
+ }
98
+ };
99
+
100
+ window.addEventListener("message", handler);
101
+ return function () {
102
+ return window.removeEventListener("message", handler);
103
+ };
104
+ }, []);
105
+
106
+ return React.createElement(QurealiFrame$1, {
107
+ slug: slug,
108
+ type: type,
109
+ style: style
110
+ });
111
+ }
168
112
 
169
- export { NeonButton, QButton };
113
+ export { QurealViewer };
170
114
  //# sourceMappingURL=index.es.js.map
package/dist/index.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.es.js","sources":["../src/QButton.js","../node_modules/style-inject/dist/style-inject.es.js","../src/index.js"],"sourcesContent":["import React from \"react\"\n\n\nfunction QButton(){\n return <button>Hello Qureal</button>\n}\n\nexport default QButton;","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport QButton from \"./QButton\"\n\nimport styles from './styles.css'\n\nclass NeonButton extends Component {\n state={hover: false}\n static propTypes = {\n text: PropTypes.string,\n color: PropTypes.string\n }\n\n getInitialState= ()=>{\n return {hover: false}\n }\n toggleHover =()=>{\n this.setState({hover: !this.state.hover})\n }\n\n render() {\n const {\n text, color\n } = this.props\n\n var linkStyle;\n if (this.state.hover) {\n linkStyle = {color: color}\n } else {\n linkStyle = {color: '#e3e3e3'}\n }\n\n var boxStyle;\n if (this.state.hover) {\n boxStyle = {boxShadow: `0px 0px 22px 10px ${color}`}\n } else {\n boxStyle = {color: '#e3e3e3' } \n }\n\n\n return (\n <button\n className={styles.outerN}\n style={boxStyle}\n onMouseEnter={this.toggleHover}\n onMouseLeave={this.toggleHover}\n >\n <div\n className={styles.innerN}\n style={linkStyle}\n >{text}</div>\n </button>\n )\n }\n}\n\n\nNeonButton.defaultProps= {\n text: \"Enter Button Text\",\n color: \"#34ebb7\"\n}\n\n// export default NeonButton;\nexport {NeonButton, QButton}"],"names":["QButton","NeonButton","state","hover","getInitialState","toggleHover","setState","props","text","color","linkStyle","boxStyle","boxShadow","styles","outerN","innerN","Component","propTypes","PropTypes","string","defaultProps"],"mappings":";;;AAGA,SAASA,OAAT,GAAkB;WACP;;;;KAAP;;;ACJJ,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;EAC7B,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;EAC/B,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;;EAE5B,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;;EAExD,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;EACrE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;EAC5C,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;;EAExB,IAAI,QAAQ,KAAK,KAAK,EAAE;IACtB,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;KAC3C,MAAM;MACL,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KACzB;GACF,MAAM;IACL,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;GACzB;;EAED,IAAI,KAAK,CAAC,UAAU,EAAE;IACpB,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;GAChC,MAAM;IACL,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;GACjD;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ICnBKC;;;;;;;;;;;;;;6LACJC,QAAM,EAACC,OAAO,KAAR,UAMNC,kBAAiB,YAAI;aACZ,EAACD,OAAO,KAAR,EAAP;aAEFE,cAAa,YAAI;YACVC,QAAL,CAAc,EAACH,OAAO,CAAC,MAAKD,KAAL,CAAWC,KAApB,EAAd;;;;;;6BAGO;mBAGH,KAAKI,KAHF;UAELC,IAFK,UAELA,IAFK;UAECC,KAFD,UAECA,KAFD;;;UAKHC,SAAJ;UACI,KAAKR,KAAL,CAAWC,KAAf,EAAsB;oBACR,EAACM,OAAOA,KAAR,EAAZ;OADF,MAEO;oBACO,EAACA,OAAO,SAAR,EAAZ;;;UAGEE,QAAJ;UACI,KAAKT,KAAL,CAAWC,KAAf,EAAsB;mBACT,EAACS,kCAAgCH,KAAjC,EAAX;OADF,MAEO;mBACO,EAACA,OAAO,SAAR,EAAX;;;aAKD;;;qBACaI,OAAOC,MADpB;iBAESH,QAFT;wBAGgB,KAAKN,WAHrB;wBAIgB,KAAKA;;;;;uBAGNQ,OAAOE,MADpB;mBAESL;;;;OATb;;;;EAlCqBM;;AAAnBf,WAEGgB,YAAY;QACXC,UAAUC,MADC;SAEVD,UAAUC;;;;AA+CrBlB,WAAWmB,YAAX,GAAyB;QACjB,mBADiB;SAEhB;;;CAFT,CAMA;;;;"}
1
+ {"version":3,"file":"index.es.js","sources":["../src/QurealiFrame.js","../src/QurealViewer.js"],"sourcesContent":["import React, { Fragment, useEffect, useRef } from \"react\";\n\n\nfunction QurealiFrame({ slug, type = \"creation\", style = {} }) {\n\n\n return (\n <Fragment>\n <iframe\n id=\"qureal_iframe\"\n title=\"Qureal\"\n // src={`http://localhost:3201/embed/${creation_slug}`}\n src={type === \"creation\" ? `https://show.qureal.com/embed/${slug}` : `https://show.qureal.com/ts/${slug}`}\n // src={`https://show.qureal.com/embed/${slug}`}\n style={{\n width: \"100%\",\n height: \"100%\",\n ...style\n }}\n />\n </Fragment>\n );\n}\n\n// export default QurealiFrame;\nexport default React.memo(QurealiFrame, () => true)\n","import React, { Fragment, useEffect, useRef } from \"react\";\nimport QurealiFrame from \"./QurealiFrame\";\n\nconst ALLOWED_ORIGINS = [\"https://show.qureal.com\", \"http://localhost:3201\"];\n\nfunction QurealViewer({\n slug = \"qi_sample\",\n type = \"creation\", // creation or template \n onFormSubmit = () => { },\n style = { width: \"800px\", height: \"600px\" }\n}) {\n\n const sendToIFrame = (creation_slug) => {\n console.log(\"Sending data to iFrame\")\n const qureal_element = document.getElementById(\"qureal_iframe\");\n\n const qureal_window = qureal_element ? qureal_element.contentWindow : null;\n if (qureal_window) {\n qureal_window.postMessage({\n message_type: \"OPEN_CREATION\",\n data: {\n slug: creation_slug\n }\n }, \"*\");\n console.log(\"Data sent to iframe\")\n }\n }\n\n useEffect(() => {\n sendToIFrame(slug)\n }, [slug])\n\n useEffect(() => {\n const handler = (ev) => {\n if (ALLOWED_ORIGINS.includes(ev.origin) && typeof ev.data === \"object\") {\n switch (ev.data.event_type) {\n case \"FORM_SUBMIT\":\n onFormSubmit(ev.data.data);\n break;\n default:\n console.log(\"No event type found\");\n console.log(ev.data);\n }\n }\n };\n\n window.addEventListener(\"message\", handler);\n return () => window.removeEventListener(\"message\", handler);\n }, []);\n\n return (\n <QurealiFrame\n slug={slug}\n type={type}\n style={style}\n />\n );\n}\n\n// export default QurealiFrame;\nexport default QurealViewer\n"],"names":["QurealiFrame","slug","type","style","React","memo","ALLOWED_ORIGINS","QurealViewer","onFormSubmit","width","height","sendToIFrame","creation_slug","log","qureal_element","document","getElementById","qureal_window","contentWindow","postMessage","handler","ev","includes","origin","babelHelpers.typeof","data","event_type","addEventListener","window","removeEventListener"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAGA,SAASA,YAAT,OAA+D;QAAvCC,IAAuC,QAAvCA,IAAuC;yBAAjCC,IAAiC;QAAjCA,IAAiC,6BAA1B,UAA0B;0BAAdC,KAAc;QAAdA,KAAc,8BAAN,EAAM;;;WAIvD;gBAAA;;;gBAEW,eADP;mBAEU;;cAEN,KAAKD,SAAS,UAAT,sCAAuDD,IAAvD,mCAA8FA;;cAEnG;uBACW,MADX;wBAEY;eACLE,KAHP;;KARZ;;;;AAmBJ,qBAAeC,MAAMC,IAAN,CAAWL,YAAX,EAAyB;WAAM,IAAN;CAAzB,CAAf;;ACtBA,IAAMM,kBAAkB,CAAC,yBAAD,EAA4B,uBAA5B,CAAxB;;AAEA,SAASC,YAAT,OAKG;yBAJCN,IAID;QAJCA,IAID,6BAJQ,WAIR;yBAHCC,IAGD;QAHCA,IAGD,6BAHQ,UAGR;iCAFCM,YAED;QAFCA,YAED,qCAFgB,YAAM,EAEtB;0BADCL,KACD;QADCA,KACD,8BADS,EAAEM,OAAO,OAAT,EAAkBC,QAAQ,OAA1B,EACT;;;QAEOC,eAAe,SAAfA,YAAe,CAACC,aAAD,EAAmB;gBAC5BC,GAAR,CAAY,wBAAZ;YACMC,iBAAiBC,SAASC,cAAT,CAAwB,eAAxB,CAAvB;;YAEMC,gBAAgBH,iBAAiBA,eAAeI,aAAhC,GAAgD,IAAtE;YACID,aAAJ,EAAmB;0BACDE,WAAd,CAA0B;8BACR,eADQ;sBAEhB;0BACIP;;aAHd,EAKG,GALH;oBAMQC,GAAR,CAAY,qBAAZ;;KAZR;;cAgBU,YAAM;qBACCZ,IAAb;KADJ,EAEG,CAACA,IAAD,CAFH;;cAIU,YAAM;YACNmB,UAAU,SAAVA,OAAU,CAACC,EAAD,EAAQ;gBAChBf,gBAAgBgB,QAAhB,CAAyBD,GAAGE,MAA5B,KAAuCC,QAAOH,GAAGI,IAAV,MAAmB,QAA9D,EAAwE;wBAC5DJ,GAAGI,IAAH,CAAQC,UAAhB;yBACS,aAAL;qCACiBL,GAAGI,IAAH,CAAQA,IAArB;;;gCAGQZ,GAAR,CAAY,qBAAZ;gCACQA,GAAR,CAAYQ,GAAGI,IAAf;;;SARhB;;eAaOE,gBAAP,CAAwB,SAAxB,EAAmCP,OAAnC;eACO;mBAAMQ,OAAOC,mBAAP,CAA2B,SAA3B,EAAsCT,OAAtC,CAAN;SAAP;KAfJ,EAgBG,EAhBH;;WAmBI,oBAACpB,cAAD;cACUC,IADV;cAEUC,IAFV;eAGWC;MAJf;;;;;"}
package/dist/index.js CHANGED
@@ -6,173 +6,116 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
6
6
 
7
7
  var React = require('react');
8
8
  var React__default = _interopDefault(React);
9
- var PropTypes = _interopDefault(require('prop-types'));
10
9
 
11
- function QButton() {
12
- return React__default.createElement(
13
- "button",
14
- null,
15
- "Hello Qureal"
16
- );
17
- }
18
-
19
- function styleInject(css, ref) {
20
- if ( ref === void 0 ) ref = {};
21
- var insertAt = ref.insertAt;
22
-
23
- if (!css || typeof document === 'undefined') { return; }
24
-
25
- var head = document.head || document.getElementsByTagName('head')[0];
26
- var style = document.createElement('style');
27
- style.type = 'text/css';
28
-
29
- if (insertAt === 'top') {
30
- if (head.firstChild) {
31
- head.insertBefore(style, head.firstChild);
32
- } else {
33
- head.appendChild(style);
34
- }
35
- } else {
36
- head.appendChild(style);
37
- }
38
-
39
- if (style.styleSheet) {
40
- style.styleSheet.cssText = css;
41
- } else {
42
- style.appendChild(document.createTextNode(css));
43
- }
44
- }
45
-
46
- var css = "body{\n background-color: rgb(97, 97, 97);\n}\n.styles_outerN__IxLsd{\n padding: 10px 15px;\n border: none;\n outline: none;\n background-color: black;\n margin: 20px;\n border-radius: 5px;\n transition: 0.5s;\n}\n\n.styles_innerN__2mhRO{\n font-size: 1.3rem;\n color: #e3e3e3;\n transition: 0.5s;\n}\n\n.styles_outerN__IxLsd:hover {\n box-shadow: 0px 0px 22px 10px #34ebb7;\n cursor: pointer;\n}\n\n.styles_innerN__2mhRO:hover{\n color: #34ebb7;\n text-shadow: 0 0 15px #34ebb7;\n}\n";
47
- var styles = { "outerN": "styles_outerN__IxLsd", "innerN": "styles_innerN__2mhRO" };
48
- styleInject(css);
49
-
50
- var classCallCheck = function (instance, Constructor) {
51
- if (!(instance instanceof Constructor)) {
52
- throw new TypeError("Cannot call a class as a function");
53
- }
10
+ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
11
+ return typeof obj;
12
+ } : function (obj) {
13
+ return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
54
14
  };
55
15
 
56
- var createClass = function () {
57
- function defineProperties(target, props) {
58
- for (var i = 0; i < props.length; i++) {
59
- var descriptor = props[i];
60
- descriptor.enumerable = descriptor.enumerable || false;
61
- descriptor.configurable = true;
62
- if ("value" in descriptor) descriptor.writable = true;
63
- Object.defineProperty(target, descriptor.key, descriptor);
64
- }
65
- }
66
-
67
- return function (Constructor, protoProps, staticProps) {
68
- if (protoProps) defineProperties(Constructor.prototype, protoProps);
69
- if (staticProps) defineProperties(Constructor, staticProps);
70
- return Constructor;
71
- };
72
- }();
73
-
74
- var inherits = function (subClass, superClass) {
75
- if (typeof superClass !== "function" && superClass !== null) {
76
- throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
77
- }
16
+ var _extends = Object.assign || function (target) {
17
+ for (var i = 1; i < arguments.length; i++) {
18
+ var source = arguments[i];
78
19
 
79
- subClass.prototype = Object.create(superClass && superClass.prototype, {
80
- constructor: {
81
- value: subClass,
82
- enumerable: false,
83
- writable: true,
84
- configurable: true
20
+ for (var key in source) {
21
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
22
+ target[key] = source[key];
23
+ }
85
24
  }
86
- });
87
- if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
88
- };
89
-
90
- var possibleConstructorReturn = function (self, call) {
91
- if (!self) {
92
- throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
93
25
  }
94
26
 
95
- return call && (typeof call === "object" || typeof call === "function") ? call : self;
27
+ return target;
96
28
  };
97
29
 
98
- var NeonButton = function (_Component) {
99
- inherits(NeonButton, _Component);
30
+ function QurealiFrame(_ref) {
31
+ var slug = _ref.slug,
32
+ _ref$type = _ref.type,
33
+ type = _ref$type === undefined ? "creation" : _ref$type,
34
+ _ref$style = _ref.style,
35
+ style = _ref$style === undefined ? {} : _ref$style;
100
36
 
101
- function NeonButton() {
102
- var _ref;
103
37
 
104
- var _temp, _this, _ret;
105
-
106
- classCallCheck(this, NeonButton);
107
-
108
- for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
109
- args[_key] = arguments[_key];
110
- }
111
-
112
- return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = NeonButton.__proto__ || Object.getPrototypeOf(NeonButton)).call.apply(_ref, [this].concat(args))), _this), _this.state = { hover: false }, _this.getInitialState = function () {
113
- return { hover: false };
114
- }, _this.toggleHover = function () {
115
- _this.setState({ hover: !_this.state.hover });
116
- }, _temp), possibleConstructorReturn(_this, _ret);
117
- }
118
-
119
- createClass(NeonButton, [{
120
- key: 'render',
121
- value: function render() {
122
- var _props = this.props,
123
- text = _props.text,
124
- color = _props.color;
125
-
126
-
127
- var linkStyle;
128
- if (this.state.hover) {
129
- linkStyle = { color: color };
130
- } else {
131
- linkStyle = { color: '#e3e3e3' };
132
- }
133
-
134
- var boxStyle;
135
- if (this.state.hover) {
136
- boxStyle = { boxShadow: '0px 0px 22px 10px ' + color };
137
- } else {
138
- boxStyle = { color: '#e3e3e3' };
139
- }
140
-
141
- return React__default.createElement(
142
- 'button',
143
- {
144
- className: styles.outerN,
145
- style: boxStyle,
146
- onMouseEnter: this.toggleHover,
147
- onMouseLeave: this.toggleHover
148
- },
149
- React__default.createElement(
150
- 'div',
151
- {
152
- className: styles.innerN,
153
- style: linkStyle
154
- },
155
- text
156
- )
157
- );
158
- }
159
- }]);
160
- return NeonButton;
161
- }(React.Component);
162
-
163
- NeonButton.propTypes = {
164
- text: PropTypes.string,
165
- color: PropTypes.string
166
- };
167
-
168
-
169
- NeonButton.defaultProps = {
170
- text: "Enter Button Text",
171
- color: "#34ebb7"
38
+ return React__default.createElement(
39
+ React.Fragment,
40
+ null,
41
+ React__default.createElement("iframe", {
42
+ id: "qureal_iframe",
43
+ title: "Qureal"
44
+ // src={`http://localhost:3201/embed/${creation_slug}`}
45
+ , src: type === "creation" ? "https://show.qureal.com/embed/" + slug : "https://show.qureal.com/ts/" + slug
46
+ // src={`https://show.qureal.com/embed/${slug}`}
47
+ , style: _extends({
48
+ width: "100%",
49
+ height: "100%"
50
+ }, style)
51
+ })
52
+ );
53
+ }
172
54
 
173
- // export default NeonButton;
174
- };
55
+ // export default QurealiFrame;
56
+ var QurealiFrame$1 = React__default.memo(QurealiFrame, function () {
57
+ return true;
58
+ });
59
+
60
+ var ALLOWED_ORIGINS = ["https://show.qureal.com", "http://localhost:3201"];
61
+
62
+ function QurealViewer(_ref) {
63
+ var _ref$slug = _ref.slug,
64
+ slug = _ref$slug === undefined ? "qi_sample" : _ref$slug,
65
+ _ref$type = _ref.type,
66
+ type = _ref$type === undefined ? "creation" : _ref$type,
67
+ _ref$onFormSubmit = _ref.onFormSubmit,
68
+ onFormSubmit = _ref$onFormSubmit === undefined ? function () {} : _ref$onFormSubmit,
69
+ _ref$style = _ref.style,
70
+ style = _ref$style === undefined ? { width: "800px", height: "600px" } : _ref$style;
71
+
72
+
73
+ var sendToIFrame = function sendToIFrame(creation_slug) {
74
+ console.log("Sending data to iFrame");
75
+ var qureal_element = document.getElementById("qureal_iframe");
76
+
77
+ var qureal_window = qureal_element ? qureal_element.contentWindow : null;
78
+ if (qureal_window) {
79
+ qureal_window.postMessage({
80
+ message_type: "OPEN_CREATION",
81
+ data: {
82
+ slug: creation_slug
83
+ }
84
+ }, "*");
85
+ console.log("Data sent to iframe");
86
+ }
87
+ };
88
+
89
+ React.useEffect(function () {
90
+ sendToIFrame(slug);
91
+ }, [slug]);
92
+
93
+ React.useEffect(function () {
94
+ var handler = function handler(ev) {
95
+ if (ALLOWED_ORIGINS.includes(ev.origin) && _typeof(ev.data) === "object") {
96
+ switch (ev.data.event_type) {
97
+ case "FORM_SUBMIT":
98
+ onFormSubmit(ev.data.data);
99
+ break;
100
+ default:
101
+ console.log("No event type found");
102
+ console.log(ev.data);
103
+ }
104
+ }
105
+ };
106
+
107
+ window.addEventListener("message", handler);
108
+ return function () {
109
+ return window.removeEventListener("message", handler);
110
+ };
111
+ }, []);
112
+
113
+ return React__default.createElement(QurealiFrame$1, {
114
+ slug: slug,
115
+ type: type,
116
+ style: style
117
+ });
118
+ }
175
119
 
176
- exports.NeonButton = NeonButton;
177
- exports.QButton = QButton;
120
+ exports.QurealViewer = QurealViewer;
178
121
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/QButton.js","../node_modules/style-inject/dist/style-inject.es.js","../src/index.js"],"sourcesContent":["import React from \"react\"\n\n\nfunction QButton(){\n return <button>Hello Qureal</button>\n}\n\nexport default QButton;","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport QButton from \"./QButton\"\n\nimport styles from './styles.css'\n\nclass NeonButton extends Component {\n state={hover: false}\n static propTypes = {\n text: PropTypes.string,\n color: PropTypes.string\n }\n\n getInitialState= ()=>{\n return {hover: false}\n }\n toggleHover =()=>{\n this.setState({hover: !this.state.hover})\n }\n\n render() {\n const {\n text, color\n } = this.props\n\n var linkStyle;\n if (this.state.hover) {\n linkStyle = {color: color}\n } else {\n linkStyle = {color: '#e3e3e3'}\n }\n\n var boxStyle;\n if (this.state.hover) {\n boxStyle = {boxShadow: `0px 0px 22px 10px ${color}`}\n } else {\n boxStyle = {color: '#e3e3e3' } \n }\n\n\n return (\n <button\n className={styles.outerN}\n style={boxStyle}\n onMouseEnter={this.toggleHover}\n onMouseLeave={this.toggleHover}\n >\n <div\n className={styles.innerN}\n style={linkStyle}\n >{text}</div>\n </button>\n )\n }\n}\n\n\nNeonButton.defaultProps= {\n text: \"Enter Button Text\",\n color: \"#34ebb7\"\n}\n\n// export default NeonButton;\nexport {NeonButton, QButton}"],"names":["QButton","React","NeonButton","state","hover","getInitialState","toggleHover","setState","props","text","color","linkStyle","boxStyle","boxShadow","styles","outerN","innerN","Component","propTypes","PropTypes","string","defaultProps"],"mappings":";;;;;;;;;;AAGA,SAASA,OAAT,GAAkB;WACPC;;;;KAAP;;;ACJJ,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;EAC7B,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;EAC/B,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;;EAE5B,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;;EAExD,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;EACrE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;EAC5C,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;;EAExB,IAAI,QAAQ,KAAK,KAAK,EAAE;IACtB,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;KAC3C,MAAM;MACL,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KACzB;GACF,MAAM;IACL,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;GACzB;;EAED,IAAI,KAAK,CAAC,UAAU,EAAE;IACpB,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;GAChC,MAAM;IACL,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;GACjD;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ICnBKC;;;;;;;;;;;;;;6LACJC,QAAM,EAACC,OAAO,KAAR,UAMNC,kBAAiB,YAAI;aACZ,EAACD,OAAO,KAAR,EAAP;aAEFE,cAAa,YAAI;YACVC,QAAL,CAAc,EAACH,OAAO,CAAC,MAAKD,KAAL,CAAWC,KAApB,EAAd;;;;;;6BAGO;mBAGH,KAAKI,KAHF;UAELC,IAFK,UAELA,IAFK;UAECC,KAFD,UAECA,KAFD;;;UAKHC,SAAJ;UACI,KAAKR,KAAL,CAAWC,KAAf,EAAsB;oBACR,EAACM,OAAOA,KAAR,EAAZ;OADF,MAEO;oBACO,EAACA,OAAO,SAAR,EAAZ;;;UAGEE,QAAJ;UACI,KAAKT,KAAL,CAAWC,KAAf,EAAsB;mBACT,EAACS,kCAAgCH,KAAjC,EAAX;OADF,MAEO;mBACO,EAACA,OAAO,SAAR,EAAX;;;aAKDT;;;qBACaa,OAAOC,MADpB;iBAESH,QAFT;wBAGgB,KAAKN,WAHrB;wBAIgB,KAAKA;;;;;uBAGNQ,OAAOE,MADpB;mBAESL;;;;OATb;;;;EAlCqBM;;AAAnBf,WAEGgB,YAAY;QACXC,UAAUC,MADC;SAEVD,UAAUC;;;;AA+CrBlB,WAAWmB,YAAX,GAAyB;QACjB,mBADiB;SAEhB;;;CAFT,CAMA;;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../src/QurealiFrame.js","../src/QurealViewer.js"],"sourcesContent":["import React, { Fragment, useEffect, useRef } from \"react\";\n\n\nfunction QurealiFrame({ slug, type = \"creation\", style = {} }) {\n\n\n return (\n <Fragment>\n <iframe\n id=\"qureal_iframe\"\n title=\"Qureal\"\n // src={`http://localhost:3201/embed/${creation_slug}`}\n src={type === \"creation\" ? `https://show.qureal.com/embed/${slug}` : `https://show.qureal.com/ts/${slug}`}\n // src={`https://show.qureal.com/embed/${slug}`}\n style={{\n width: \"100%\",\n height: \"100%\",\n ...style\n }}\n />\n </Fragment>\n );\n}\n\n// export default QurealiFrame;\nexport default React.memo(QurealiFrame, () => true)\n","import React, { Fragment, useEffect, useRef } from \"react\";\nimport QurealiFrame from \"./QurealiFrame\";\n\nconst ALLOWED_ORIGINS = [\"https://show.qureal.com\", \"http://localhost:3201\"];\n\nfunction QurealViewer({\n slug = \"qi_sample\",\n type = \"creation\", // creation or template \n onFormSubmit = () => { },\n style = { width: \"800px\", height: \"600px\" }\n}) {\n\n const sendToIFrame = (creation_slug) => {\n console.log(\"Sending data to iFrame\")\n const qureal_element = document.getElementById(\"qureal_iframe\");\n\n const qureal_window = qureal_element ? qureal_element.contentWindow : null;\n if (qureal_window) {\n qureal_window.postMessage({\n message_type: \"OPEN_CREATION\",\n data: {\n slug: creation_slug\n }\n }, \"*\");\n console.log(\"Data sent to iframe\")\n }\n }\n\n useEffect(() => {\n sendToIFrame(slug)\n }, [slug])\n\n useEffect(() => {\n const handler = (ev) => {\n if (ALLOWED_ORIGINS.includes(ev.origin) && typeof ev.data === \"object\") {\n switch (ev.data.event_type) {\n case \"FORM_SUBMIT\":\n onFormSubmit(ev.data.data);\n break;\n default:\n console.log(\"No event type found\");\n console.log(ev.data);\n }\n }\n };\n\n window.addEventListener(\"message\", handler);\n return () => window.removeEventListener(\"message\", handler);\n }, []);\n\n return (\n <QurealiFrame\n slug={slug}\n type={type}\n style={style}\n />\n );\n}\n\n// export default QurealiFrame;\nexport default QurealViewer\n"],"names":["QurealiFrame","slug","type","style","React","memo","ALLOWED_ORIGINS","QurealViewer","onFormSubmit","width","height","sendToIFrame","creation_slug","log","qureal_element","document","getElementById","qureal_window","contentWindow","postMessage","handler","ev","includes","origin","babelHelpers.typeof","data","event_type","addEventListener","window","removeEventListener"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,SAASA,YAAT,OAA+D;QAAvCC,IAAuC,QAAvCA,IAAuC;yBAAjCC,IAAiC;QAAjCA,IAAiC,6BAA1B,UAA0B;0BAAdC,KAAc;QAAdA,KAAc,8BAAN,EAAM;;;WAIvDC;sBAAA;;;gBAEW,eADP;mBAEU;;cAEN,KAAKF,SAAS,UAAT,sCAAuDD,IAAvD,mCAA8FA;;cAEnG;uBACW,MADX;wBAEY;eACLE,KAHP;;KARZ;;;;AAmBJ,qBAAeC,eAAMC,IAAN,CAAWL,YAAX,EAAyB;WAAM,IAAN;CAAzB,CAAf;;ACtBA,IAAMM,kBAAkB,CAAC,yBAAD,EAA4B,uBAA5B,CAAxB;;AAEA,SAASC,YAAT,OAKG;yBAJCN,IAID;QAJCA,IAID,6BAJQ,WAIR;yBAHCC,IAGD;QAHCA,IAGD,6BAHQ,UAGR;iCAFCM,YAED;QAFCA,YAED,qCAFgB,YAAM,EAEtB;0BADCL,KACD;QADCA,KACD,8BADS,EAAEM,OAAO,OAAT,EAAkBC,QAAQ,OAA1B,EACT;;;QAEOC,eAAe,SAAfA,YAAe,CAACC,aAAD,EAAmB;gBAC5BC,GAAR,CAAY,wBAAZ;YACMC,iBAAiBC,SAASC,cAAT,CAAwB,eAAxB,CAAvB;;YAEMC,gBAAgBH,iBAAiBA,eAAeI,aAAhC,GAAgD,IAAtE;YACID,aAAJ,EAAmB;0BACDE,WAAd,CAA0B;8BACR,eADQ;sBAEhB;0BACIP;;aAHd,EAKG,GALH;oBAMQC,GAAR,CAAY,qBAAZ;;KAZR;;oBAgBU,YAAM;qBACCZ,IAAb;KADJ,EAEG,CAACA,IAAD,CAFH;;oBAIU,YAAM;YACNmB,UAAU,SAAVA,OAAU,CAACC,EAAD,EAAQ;gBAChBf,gBAAgBgB,QAAhB,CAAyBD,GAAGE,MAA5B,KAAuCC,QAAOH,GAAGI,IAAV,MAAmB,QAA9D,EAAwE;wBAC5DJ,GAAGI,IAAH,CAAQC,UAAhB;yBACS,aAAL;qCACiBL,GAAGI,IAAH,CAAQA,IAArB;;;gCAGQZ,GAAR,CAAY,qBAAZ;gCACQA,GAAR,CAAYQ,GAAGI,IAAf;;;SARhB;;eAaOE,gBAAP,CAAwB,SAAxB,EAAmCP,OAAnC;eACO;mBAAMQ,OAAOC,mBAAP,CAA2B,SAA3B,EAAsCT,OAAtC,CAAN;SAAP;KAfJ,EAgBG,EAhBH;;WAmBIhB,6BAACJ,cAAD;cACUC,IADV;cAEUC,IAFV;eAGWC;MAJf;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qureal-editor",
3
- "version": "1.0.5",
3
+ "version": "1.0.6",
4
4
  "description": "Official Qureal React components",
5
5
  "author": "shivampip",
6
6
  "license": "MIT",