Merge pull request #9 from gnpis/develop

Merge release 2.1.0 to master
gnpis · Jan 24, 2018 · aff98ab · aff98ab
2 parents 2110fa0 + 6fa5b64
commit aff98ab
Show file tree

Hide file tree

Showing 14 changed files with 23,419 additions and 39 deletions.
diff --git a/.gitignore b/.gitignore
@@ -46,5 +46,5 @@ deployLocal.sh
 
 demo/data/private/
 
-build/
+dist/index.html
 node_modules/
diff --git a/README.md b/README.md
@@ -28,17 +28,11 @@ The Breeding API used in this widget **must implement** the [observation variabl
 
 ### In Ephesis ontology portal
 
-The latest release of this widget is accessible on the [:link: Ephesis ontology portal](https://urgi.versailles.inra.fr/ephesis/ephesis/ontologyportal.do).
-
-### From release
-
-1. Download the latest `distrib-wit-demo.zip` on the [release page ](https://github.com/gnpis/trait-ontology-widget/releases).
-2. Run a static HTTP server in the extracted folder (required for Ajax loading)
-3. Open the web page in the browser
+The latest release of this widget is accessible on the [:link: Ephesis ontology portal](https://urgi.versailles.inra.fr/ephesis/ephesis/ontologyportal.do) or on the [:link: Ephesis search form](https://urgi.versailles.inra.fr/ephesis/ephesis/viewer.do#showForm).
 
 ### From source code
 
-1. Clone the repository
+1. Clone the repository or download a [release archive](/releases)
 2. Install [Node.js](https://nodejs.org/)
 3. Fetch dependencies:
 

diff --git a/build.sh b/build.sh
@@ -1,6 +1,6 @@
 #!/bin/bash
 
-BUILD_FOLDER="./build"
+BUILD_FOLDER="./dist"
 MODULES="./node_modules"
 
 [ -d "$MODULES" ] || {
@@ -36,7 +36,7 @@ DEST_MIN_FILE="${BUILD_FOLDER}/cropOntologyWidget.min"
 
 echo -ne "[JS]\t"
 echo " ${DEST_FILE}.js => ${DEST_MIN_FILE}.js "
-"${MODULES}/uglifyjs/bin/uglifyjs" "${DEST_FILE}.js" -o "${DEST_MIN_FILE}.js"
+"${MODULES}/uglify-js/bin/uglifyjs" "${DEST_FILE}.js" -o "${DEST_MIN_FILE}.js"
 
 echo -ne "[CSS]\t"
 echo " ${DEST_FILE}.css => ${DEST_MIN_FILE}.css "

diff --git a/demo/index.html b/demo/index.html
@@ -11,30 +11,70 @@
     <link rel="stylesheet" href="cropOntologyWidget.css"></link>
   </head>
   <body>
+
     <!-- The target DIV in which the widget is added -->
     <div id="trait-ontology-widget"></div>
 
+    <!-- Initialize widget with javascript  -->
     <script type="text/javascript">
-      // Instanciate widget
       var widget = new CropOntologyWidget("#trait-ontology-widget", {
         // Breeding API server
         "breedingAPIEndpoint": "https://urgi.versailles.inra.fr/ws/webresources/brapi/v1/",
         // options
         "showCheckBoxes": true, "useSearchField": true
       });
-
-      /* Some example of interactions with the widget : */
-      function getIds() {
-        var ids = widget.getSelectedNodeIds();
-        if (!ids.length) ids = "No node selected"
-        window.alert(ids);
-        console.log(ids);
-      }
     </script>
+
+    <!-- Example JS interactions with the widget -->
     <button onclick="getIds()">Get selected node IDs</button>
     <button onclick="widget.showAll()">Show all</button>
     <button onclick="widget.hideAll()">Hide all</button>
     <button onclick="widget.reset()">Reset</button>
     <button onclick="widget.resetSelection()">Reset selection</button>
+    <button onclick="emptyOutput()">Clear output below</button>
+
+    <div id="output"></div>
+    <script type="text/javascript">
+      var output = document.getElementById("output");
+      function emptyOutput() {
+        output.querySelectorAll("div").forEach(function(element) {
+	  element.remove();
+	});
+      }
+      function logOutput(action, message) {
+        var div = document.createElement('div');
+        var spanAction = document.createElement('span');
+        spanAction.textContent = action;
+        div.append(spanAction);
+        var spanMessage = document.createElement('span');
+        spanMessage.textContent = message;
+        div.append(spanMessage);
+        output.prepend(div);
+      }
+
+      function getIds() {
+        var ids = widget.getSelectedNodeIds();
+        if (!ids.length) ids = "No node selected";
+	logOutput("Get selected leaf node ids:", ids.join(", "));
+      }
+
+      // Display selection change
+      widget.addSelectionChangeHandler(function(el, node) {
+        logOutput("Node selection:", node.id);
+	getIds();
+      });
+    </script>
+    <style>
+      #output > div {
+        color: gray;
+      }
+      #output > div:first-child {
+        color: black;
+      }
+      #output > div > span:first-child {
+        font-weight: bold;
+        margin-right: 10px;
+      }
+    </style>
   </body>
 </html>