Export global only when available.

build.sh

@@ -15,7 +15,7 @@ build() {
   mkdir -p "${BUILD_FOLDER}"
 
   JS_FILES=${SOURCE_FOLDER}"/js/main.js"
-  LESS_FILES="$(ls ${SOURCE_FOLDER}/less/*.less)"
+  LESS_FILES="${SOURCE_FOLDER}/less/main.less"
 
   # Run browserify => Bundle widget and its dependencies into one file
   echo "Bundling:"
@@ -24,12 +24,14 @@ build() {
   echo -ne "[JS]\t"
   echo " ${JS_FILES} => ${DEST_FILE}.js "
   "${MODULES}/browserify/bin/cmd.js" "${JS_FILES}" -t babelify --debug -o "${DEST_FILE}.js" &
+  "${MODULES}/browserify/bin/cmd.js" "${JS_FILES}" -t babelify --debug -o "${DEST_FILE}.bundle.js" -s CropOntologyWidget &
   # the '--debug' option adds source mapping for easier debugging in web inspector
 
   echo -ne "[CSS]\t"
   echo " ${LESS_FILES} => ${DEST_FILE}.css "
   #"${MODULES}/npm-css/bin/npm-css" "${LESS_FILES}" -o "${DEST_FILE}.css"
   "${MODULES}/less/bin/lessc" "${LESS_FILES}" "${DEST_FILE}.css" &
+  "${MODULES}/less/bin/lessc" "${SOURCE_FOLDER}/less/widget.less" "${BUILD_FOLDER}/widget.css" &
   wait
 
   echo ""

demo/index.html

@@ -19,9 +19,9 @@
     <script type="text/javascript">
       var widget = new CropOntologyWidget("#trait-ontology-widget", {
         // Breeding API server
-        //"breedingAPIEndpoint": "https://urgi.versailles.inra.fr/ws/webresources/brapi/v1/",
+        "breedingAPIEndpoint": "https://urgi.versailles.inra.fr/ws/webresources/brapi/v1/",
         //"breedingAPIEndpoint": "http://urgi.versailles.inra.fr/gnpis-core-srv/brapi/v1/",
-        "breedingAPIEndpoint": "http://urgi148:8080/gnpis-core-srv/brapi/v1/",
+        //"breedingAPIEndpoint": "http://urgi148:8080/gnpis-core-srv/brapi/v1/",
         // options
         "showCheckBoxes": true, "useSearchField": true
       });

package.json

@@ -14,15 +14,15 @@
   },
   "scripts": {},
   "dependencies": {
-    "jquery": "^3.3.1",
-    "jstree": "^3.3.5"
+    "jquery": "3.3.1",
+    "jstree": "3.3.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.2",
-    "@babel/preset-env": "^7.1.0",
-    "babel-preset-minify": "^0.4.3",
-    "babelify": "^10.0.0",
-    "browserify": "16.2.2",
+    "@babel/core": "7.2.0",
+    "@babel/preset-env": "7.2.0",
+    "babel-preset-minify": "0.4.3",
+    "babelify": "10.0.0",
+    "browserify": "16.2.3",
     "clean-css-cli": "4.1.11",
     "http-server": "0.11.1",
     "less": "3.0.4",

src/js/main.js

@@ -17,6 +17,13 @@ const DEFAULT_OPTIONS = {
   createDiv: false
 }
 
+let document;
+try {
+  document = global.document;
+} catch(e) {
+  document = window.document;
+}
+
 export class CropOntologyWidget {
     constructor(selector, options) {
       // Options (overide the defaults with options given)
@@ -39,7 +46,7 @@ export class CropOntologyWidget {
       }
 
       // Attach components on the DOM when ready
-      $(global.document).ready(() => {
+      $(document).ready(() => {
         if (!this.options.createDiv) {
           this.$root = $(selector)
           if (this.$root.length === 0) {
@@ -179,4 +186,7 @@ export class CropOntologyWidget {
       this.jsTreePanel.reset()
     }
 }
-global.CropOntologyWidget = CropOntologyWidget
+
+try {
+  global.CropOntologyWidget = CropOntologyWidget
+} catch (e) {}

src/less/main.less

@@ -0,0 +1,31 @@
+@charset "UTF-8";
+/*
+ * This less file can be compiled to CSS using the LESSC compiler (http://lesscss.org)
+ */
+
+// Import JSTree lesscss styles
+@import "node_modules/jstree/src/themes/default/style";
+
+
+// Inline required images into this file
+.jstree {
+  // Loading gif
+  & > .jstree-container-ul .jstree-loading > .jstree-ocl {
+    background-image: data-uri('node_modules/jstree/src/themes/default/throbber.gif');
+  }
+
+  // Node icons
+  .jstree-node, .jstree-icon, .jstree-file, .jstree-folder, .jstree-ok,
+  .jstree-checkbox, .jstree-er {
+    background-image: data-uri('node_modules/jstree/src/themes/default/32px.png');
+  }
+
+  .jstree-last {
+    background: none;
+  }
+}
+
+/*
+ * Widget custom styles
+ */
+@import "widget";

src/less/cropOntologyWidget.less → src/less/widget.less

@@ -1,41 +1,12 @@
-@charset "UTF-8";
-/*
- * This less file can be compiled to CSS using the LESSC compiler (http://lesscss.org)
- */
-
-// Import JSTree lesscss styles
-@import "node_modules/jstree/src/themes/default/style";
 
 @opacityPulseFrom : 0.25;
 @opacityPulseTo : 0.6;
 @keyframes opactityPulse {
-    0% { opacity: @opacityPulseFrom; }
-    50% { opacity: @opacityPulseTo; }
-    100% { opacity: @opacityPulseFrom; }
+  0% { opacity: @opacityPulseFrom; }
+  50% { opacity: @opacityPulseTo; }
+  100% { opacity: @opacityPulseFrom; }
 }
 
-// Inline required images into this file
-.jstree {
-  // Loading gif
-  & > .jstree-container-ul .jstree-loading > .jstree-ocl {
-    background-image: data-uri('node_modules/jstree/src/themes/default/throbber.gif');
-  }
-
-  // Node icons
-  .jstree-node, .jstree-icon, .jstree-file, .jstree-folder, .jstree-ok,
-  .jstree-checkbox, .jstree-er {
-    background-image: data-uri('node_modules/jstree/src/themes/default/32px.png');
-  }
-
-  .jstree-last {
-    background: none;
-  }
-}
-
-/*
- * Widget custom styles
- */
-
 .ontology-widget {
   width: 100%;
   overflow: initial;
@@ -54,11 +25,11 @@
     }
 
     .details td.loading {
-        animation: opactityPulse 1.75s infinite ease-in-out;
-        font-weight: 700;
-        font-size: 16px;
-        text-align: center;
-        margin: 0;
+      animation: opactityPulse 1.75s infinite ease-in-out;
+      font-weight: 700;
+      font-size: 16px;
+      text-align: center;
+      margin: 0;
     }
   }
 
@@ -262,4 +233,4 @@
       background-color: #F39237;
     }
   }
-}
+}