update to latest graphXR.injection

Kineviz · Feb 22, 2021 · 0bf6e0d · 0bf6e0d
1 parent f437951
commit 0bf6e0d
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 131 deletions.
diff --git a/graphXR.injection.js b/graphXR.injection.js
@@ -1,15 +1,16 @@
 ; (function ($) {
     'use strict'
 
-    const version = '2.8.0';
+    const version = '2.9.0';
 
     const GIframeOnMessageHandlerMap = {
         //id: {id,  iframeElement,  messageHandler}
     }
 
     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,15 +147,26 @@
         }, 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) {
             let err = new Error(`Please try use those commands [:clearGraph, :getGraphStat, :getGraph]`);
             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
@@ -4,91 +4,15 @@
 <head>
     <meta charset="utf-8">
     <title>
-        Iframe Example
+        Real Data Notice
     </title>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
     <meta name="description" content="">
     <meta name="author" content="Kineviz inc.">
 
     <link rel="shortcut icon" href="/favicon.ico">
-
-    <style>
-        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;
-        }
-    </style>
-
+    <link rel="stylesheet" href="/style.css">
     <!--Please -->
     <script src='./graphXR.injection.js'></script>
 
@@ -97,36 +21,6 @@
 <body>
 
 
-    <div class="header">
-        <div class="code">
-            <textarea id='code-area'>
-/*
-Create a project ,from Project=>Data, create a view enable share 
-from the project window by clicking on the lock icon
-Get the shared view link, for example, here is a link for VC data set:
-https://graphxr.kineviz.com/share/5c633dfe197b00001e855294/VC%20investment%202004-2013/5c65e7be851f2c0036ef27c9
-
-*/
-let iframeElem = document.getElementById("injection-graphXR-iframe-id");
-
-graphXR.injectionApiCommand(':getGraph', iframeElem)
-.then((resData) => {
-    alert(JSON.stringify(resData,null,2));
-    //please open develop tool and goto console, search with "Receive graphData"
-    console.warn("Receive graphData:", resData.content)
-})
-
-       </textarea>
-        </div>
-        <div class="actions">
-            <div class="btn" onclick="handleClick()" title="run the code"> RUN </div>
-            <a class="help" target="_blank"
-            href="https://github.com/Kineviz/graphxr-iframe-example#1-apicommand" 
-            title="api help"> ? </a>
-         </div>
-    </div>
-
-
 <iframe id="injection-graphXR-iframe-id"  origin="*" > </iframe>
 
 <script id="script" type="text/javascript">
@@ -135,21 +29,11 @@
            let r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
-       let defaultEmbedGraphURL = 'https://graphxr.kineviz.com/share/5fad3be86fd8dd0068f8c833/Russian%20Troll%20Tweets%20/5fad3cc86fd8dd0068f8c8d4/Russian-troll-tweets'
+       let defaultEmbedGraphURL = 'https://localhost:9000/share/5ff65fed62423d3ac8cf991b/blank/600ec8ff9d41f11ae88a9332/Notice'
        let iframe = document.getElementById('injection-graphXR-iframe-id');
        iframe.setAttribute('src', getQueryString('embedGraphURL') || getQueryString('url') || iframe.getAttribute('src') ||  defaultEmbedGraphURL);
    </script>
 
-<script id="script" type="text/javascript">
-    let handleClick = function () {
-        try {
-            eval(document.getElementById("code-area").value);
-        } catch (error) {
-            alert(error.message);
-        }
-    }
-</script>
-
 </body>
 
 </html>
diff --git a/style.css 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;
+}