diff --git a/graphXR.injection.js b/graphXR.injection.js index d79a05e..a4aaf98 100644 --- a/graphXR.injection.js +++ b/graphXR.injection.js @@ -1,7 +1,7 @@ ; (function ($) { 'use strict' - const version = '2.8.0'; + const version = '2.9.0'; const GIframeOnMessageHandlerMap = { //id: {id, iframeElement, messageHandler} @@ -9,7 +9,8 @@ const GEvents = { "change": {}, - "select": {} + "select": {}, + "nearby":{} } let GTempResponse = { @@ -77,13 +78,13 @@ }); } - function injectionCode( code, iframeElement = getIframeElem(), index = Date.now(), type = 'codes') { + function injectionCode( code, iframeElement = getIframeElem(), index = Date.now(), type = 'codes', params = {}) { if (!iframeElement || iframeElement.tagName !== "IFRAME") { let err = new Error(`Only support iframe element, please try document.getElementById("your_iframe_id");`); console.error(err.message); return Promise.reject(err); } - index = String(index + Date.now()); + index = String(index); //reset GTempResponse GTempResponse = { index: -1, @@ -100,7 +101,15 @@ index = code; postMessageBody = { type: "api", - command: code + command: code, + params + } + } else if (type === 'func') { + index = code; + postMessageBody = { + type: "func", + func: code, + params } } else { postMessageBody = { @@ -138,7 +147,18 @@ }, Promise.resolve([])); } - function injectionApiCommand(command, iframeElement = getIframeElem()) { + function injectionApiFunc(funcName, params = {}, iframeElement = getIframeElem()) { + + let newFuncName = String(funcName).trim(); + if (!newFuncName && !newFuncName) { + let err = new Error(`Please try use those functions [update]`); + console.error(err.message); + return Promise.reject(err); + } + return injectionCode( funcName, iframeElement, funcName , 'func', params) + } + + function injectionApiCommand(command, iframeElement = getIframeElem(), params = {}) { let newCommand = String(command).trim(); if (!newCommand && !command) { @@ -146,7 +166,7 @@ console.error(err.message); return Promise.reject(err); } - return injectionCode( newCommand, iframeElement, newCommand , 'api') + return injectionCode( newCommand, iframeElement, newCommand , 'api', params) } function injectionApiCommands(commands, iframeElement = getIframeElem()) { @@ -174,14 +194,14 @@ if (type === 'events-response' && GEvents && Object.keys(GEvents[eventName] || {}).length > 0) { Object.values(GEvents[eventName] || {}) .forEach(cb => { - cb(eventName, data.response || {}); + cb && cb(eventName, data.response || {}); }); } } function injectionOn(eventName = 'change', callback = () => { }, iframeElement = getIframeElem(), uniqueName = '') { - if (!['change', 'select'].includes(eventName) || !callback) { - let err = new Error(`Miss eventName['change','select'] ro callback function`); + if (!['change', 'select','nearby'].includes(eventName) || !callback) { + let err = new Error(`Miss eventName['change','select','nearby'] ro callback function`); return console.error(err.message); } @@ -193,10 +213,10 @@ uniqueName = uniqueName || callback.name; GEvents[eventName][uniqueName] = callback; - let codeIndex = Date.now(); + let codeIndex = uniqueName; let code = ` //convert to global - _app.controller.API.on('${eventName}', (data) => { + _app.controller.API.on('${eventName}', (eventName,data) => { if (window.parent) { window.parent.postMessage({ type: "events-response", @@ -223,6 +243,7 @@ version, injectionCode, injectionCodes, + injectionApiFunc, injectionApiCommand, injectionApiCommands, injectionOn diff --git a/index.html b/index.html index d3561ad..577bd3a 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Iframe Example + Real Data Notice @@ -12,83 +12,7 @@ - - - + @@ -97,36 +21,6 @@ -
-
- -
-
-
RUN
- ? -
-
- - - - \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a71c751 --- /dev/null +++ b/style.css @@ -0,0 +1,73 @@ +html, +body { + height: 100%; + width: 100%; + overflow: hidden; + margin: 0; + padding: 0; + } + +iframe { + position: fixed; + left: 40%; + height: 100%; + width: 60%; + border: none; + overflow: hidden; +} + +.header { + position: fixed; + left: 0; + height: 100%; + width: 40%; + border: none; + overflow: hidden; +} + + .header > div{ + + float:left; + } + +.header .code { + width: 80%; + height: 100%; +} + +.header textarea { + width: 96%; + padding:2%; + border-radius: 0px; + height: 96%; + color: #222222; + font-size: 18px; +} + +.header .actions{ + width:18%; + padding: 1%; + height: 100%; +} + +.header .btn { + width: 100%; + cursor: pointer; + text-align: center; + height: 60px; + line-height: 60px; + margin:20px 1%; + border-radius: 4px; + color: white; + background-color:green; +} + +.header a.help{ + display: block; + text-align: center; + font-size: 32px; + color: black; + border: none; + text-decoration: none; + background-color: white; +} \ No newline at end of file