Remove jQuery.

- Replace jQuery slider with html5 slider.
- Add css for html5 slider.
- Add bootstrap configs excluding any script.

Author: marc92w

app/components/sidebar/groups/endpoint-group/endpoint-group.drv.js

@@ -1,5 +1,3 @@
-import endpointGroupTemplate from './endpoint-group.html';
-
 /**
  * @ngdoc directive
  * @name endpointGroup
@@ -22,7 +20,7 @@ const endpointGroup = function() {
     },
     controller: 'EndpointGroupCtrl',
     controllerAs: 'vm',
-    template: endpointGroupTemplate
+    template: require('./endpoint-group.html')
   };
 
 };

app/components/sidebar/groups/graph-settings-group/graph-settings-group.ctrl.js

@@ -23,28 +23,20 @@ function graphSettingsCtrl($rootScope, $log, Prefixes, Links) {
 
   graphSettings.layoutPaused = false;
 
-  graphSettings.setClassToClassEdgeLength = function (newValue) {
-    if (newValue === undefined) {
-      $log.error('[Graph Settings] New class to class edge length is undefined!');
-      return;
-    }
-    graphSettings.ccEdgeLength = newValue;
-    Links.setClassToClassDistance(newValue);
+  graphSettings.updateClassToClassLength = function() {
+    const newLength = parseInt(graphSettings.ccEdgeLength);
+    Links.setClassToClassDistance(newLength);
 
     // node link graph must be informed
-    $rootScope.$broadcast('edge-length-changed', newValue);
+    $rootScope.$broadcast('edge-length-changed', newLength);
   };
 
-  graphSettings.setClassToDatatypeEdgeLength = function (newValue) {
-    if (newValue === undefined) {
-      $log.error('[Graph Settings] New class to data type edge length is undefined!');
-      return;
-    }
-    graphSettings.ctEdgeLength = newValue;
-    Links.setClassToDatatypeDistance(newValue);
+  graphSettings.updateClassToDatatypeLength = function() {  
+    const newLength = parseInt(graphSettings.ctEdgeLength)
+    Links.setClassToDatatypeDistance(newLength);
 
     // node link graph must be informed
-    $rootScope.$broadcast('edge-length-changed', newValue);
+    $rootScope.$broadcast('edge-length-changed', newLength);
   };
 
   /**

app/components/sidebar/groups/graph-settings-group/graph-settings-group.html

@@ -12,16 +12,12 @@
 
   <p>
     <label for="ccEdgeLength">Class - Class Distance: {{ graphSettings.ccEdgeLength }}</label>
-    <div id="ccEdgeLength" slider class="cdbl-slider" model="graphSettings.ccEdgeLength" min="1" max="300"
-         on-update="graphSettings.setClassToClassEdgeLength(newValue)">
-    </div>
+    <input id="ccEdgeLength" type="range" min="1" max="300" ng-model="graphSettings.ccEdgeLength" ng-change="graphSettings.updateClassToClassLength()" />
   </p>
 
   <p>
     <label for="ctEdgeLength">Class - Type Distance: {{ graphSettings.ctEdgeLength }}</label>
-    <div id="ctEdgeLength" slider class="cdbl-slider" model="graphSettings.ctEdgeLength" min="1" max="150"
-         on-update="graphSettings.setClassToDatatypeEdgeLength(newValue)">
-    </div>
+    <input id="ctEdgeLength" type="range" min="1" max="150" ng-model="graphSettings.ctEdgeLength" ng-change="graphSettings.updateClassToDatatypeLength()" />
   </p>
 
   <p><strong>Layout</strong></p>

app/components/sidebar/groups/graph-settings-group/graph-settings-group.module.js

@@ -3,6 +3,8 @@ import angular from 'angular';
 import GraphSettingsGroupCtrl from './graph-settings-group.ctrl';
 import graphSettingsGroup from './graph-settings-group.drv';
 
+require('./graph-settings.css');
+
 /**
  * @ngdoc module
  * @name sidebar.groups.graphsettings

app/components/sidebar/groups/graph-settings-group/graph-settings.css

@@ -0,0 +1,39 @@
+input[type=range] {
+  -webkit-appearance: none;
+  width: 100%;
+  background: transparent;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 1.4em;
+  width: 1.4em;
+  border: 1px solid #d3d3d3;
+  border-radius: 4px;
+  background: #f5f5f5;
+  margin-top: -0.4em;
+}
+
+input[type=range]::-webkit-slider-thumb:hover {
+  border: 1px solid #999;
+}
+
+input[type=range]::-webkit-slider-runnable-track{
+  width: 100%;
+  height: 0.8em;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  margin: 10px 0 10px 0;
+}
+
+input[type=range]:focus {
+  outline: none;
+}
+
+input[type=range]::-ms-track {
+  width: 100%;
+  cursor: pointer;
+  background: transparent; 
+  border-color: transparent;
+  color: transparent;
+}

app/components/sidebar/sidebar.module.js

@@ -1,7 +1,5 @@
 import angular from 'angular';
 
-import Slider from './slider.drv.js';
-
 import groups from './groups/sidebar-groups.module';
 import selections from './selection/selection.module';
 
@@ -12,7 +10,6 @@ import selections from './selection/selection.module';
  * @requires groups, selections
  * 
  * @description
- * This is the module for the sidebar of the application, including the directive for the jQuery slider.
+ * This is the module for the sidebar of the application.
  */
-export default angular.module('components.sidebar', [groups.name, selections.name])
-                      .directive('slider', Slider);
+export default angular.module('components.sidebar', [groups.name, selections.name]);

app/components/sidebar/slider.drv.js

@@ -5,7 +5,6 @@ require('./vendor.js')(); // run an empty function
 
 require('../styles/main.css');
 require('../styles/graph.css');
-require('../../node_modules/jquery-ui/themes/base/jquery-ui.css');
 
 import appModule from '../app';
 

app/core/bootstrap.js

@@ -5,9 +5,7 @@ module.exports = function () {
   require('angular-route');
   require('angular-animate');
   require('angular-cookies');
-  require('jquery');
-  require('jquery-ui');
-  require('bootstrap-webpack');
+  require('bootstrap-webpack!../../bootstrap.config.js');
   require('angular-ui-bootstrap');
 
 };

app/core/vendor.js

@@ -8,17 +8,29 @@
  */
 function endpoints($http) {
 
-  const NON_PROXY_ENDPOINTS_FILE_NAME = 'nonproxy_endpoints.json';
-  const PROXY_ENDPOINTS_FILE_NAME = 'proxy_endpoints.json';
+  const NON_PROXY_ENDPOINTS_FILE_NAME = require('../nonproxy_endpoints.json');
+  const PROXY_ENDPOINTS_FILE_NAME = require('../proxy_endpoints.json');
 
   const that = this;
 
   that.getNonProxyEndpoints = function () {
-    return $http.get(NON_PROXY_ENDPOINTS_FILE_NAME);
+    let url;
+    if (typeof NON_PROXY_ENDPOINTS_FILE_NAME !== 'string') {
+      url = 'nonproxy_endpoints.json';
+    } else {
+      url = NON_PROXY_ENDPOINTS_FILE_NAME;
+    }
+    return $http.get(url);
   };
 
   that.getProxyEndpoints = function () {
-    return $http.get(PROXY_ENDPOINTS_FILE_NAME);
+    let url;
+    if (typeof PROXY_ENDPOINTS_FILE_NAME !== 'string') {
+      url = 'proxy_endpoints.json';
+    } else {
+      url = PROXY_ENDPOINTS_FILE_NAME;
+    }
+    return $http.get(url);
   };
 
 }

app/services/endpoints.srv.js

@@ -55,14 +55,12 @@ class ClassExtractor extends Extractor {
   } // end of constructor()
 
   requestClasses() {
-    var self = this;
-
-    var deferred = this.$q.defer();
-    const promiseId = self.promises.addPromise(deferred);
+    const deferred = this.$q.defer();
+    const promiseId = this.promises.addPromise(deferred);
 
     // do not request further classes
     if (this.nodes.hasClassNodes()) {
-      self.$log.debug('[Classes] Skip loading further classes...');
+      this.$log.debug('[Classes] Skip loading further classes...');
       deferred.resolve([]);
       return deferred.promise;
     }
@@ -71,17 +69,18 @@ class ClassExtractor extends Extractor {
 
     let limit = this.reqConfig.getLimit() || 10;
 
-    var requestURL = this.reqConfig.getRequestURL();
+    const requestURL = this.reqConfig.getRequestURL();
 
-    function doQuery(lastTry = false, offset = 0, limit = 10) {
+    const self = this;
 
+    function doQuery(lastTry = false, offset = 0, limit = 10) {
       let query = self.queryFactory.getClassQuery(limit, offset);
 
       self.$log.debug(`[Classes] Send Request with offset ${offset}...`);
       self.$http.get(requestURL, self.reqConfig.forQuery(query, deferred))
         .then(function handleExtractedClasses(response) {
           if (response.data.results !== undefined) {
-            var bindings = response.data.results.bindings;
+            let bindings = response.data.results.bindings;
 
             if (bindings !== undefined) {
 

app/services/extractors/class-extractor.srv.js

@@ -51,7 +51,7 @@ class RelationExtractor extends Extractor {
       // create a new blacklist
       for (var type in PROPERTY_BLACKLIST) {
         if (PROPERTY_BLACKLIST.hasOwnProperty(type) && type !== 'SKOS') {
-          for (var i = 0; i < PROPERTY_BLACKLIST[type].length; i++) {
+          for (let i = 0; i < PROPERTY_BLACKLIST[type].length; i++) {
             this.blacklist.push(PREFIX[type] + PROPERTY_BLACKLIST[type][i]);
           }
         }

app/services/extractors/relation-extractor.srv.js

@@ -21,6 +21,9 @@ function tBoxExtractor($q, $log, Data, Filters, StopWatch, Promises, ClassExtrac
 
   self.classes = [];
 
+  /**
+   * Start the extraction of TBox information by requesting classes.
+   */
   self.startTBoxExtraction = function () {
     StopWatch.start();
     ClassExtractor.requestClasses().then(function extractForClasses(results) {
@@ -41,7 +44,7 @@ function tBoxExtractor($q, $log, Data, Filters, StopWatch, Promises, ClassExtrac
         }
       }
 
-      var promises = [];
+      let promises = [];
       for (let end = 0; end < self.classes.length; end++) {
         for (let start = 0; start < end; start++) {
           promises.push(RelationExtractor.requestClassEquality(self.classes[start], self.classes[end]));
@@ -93,7 +96,6 @@ function tBoxExtractor($q, $log, Data, Filters, StopWatch, Promises, ClassExtrac
    * Load relations for each pair of classes.
    */
   self.extractRelations = function () {
-
     $log.debug('[TBox Extractor] Send requests for relations...');
 
     // for each pair of classes search relation and check equality

app/services/extractors/t-box-extractor.srv.js

@@ -38,7 +38,7 @@ function links(Geometry) {
    * @returns {number}
    */
   self.getDistance = function (d) {
-    var distance;
+    let distance = 0;
     if ((d.target !== undefined && d.target.isLoopNode) || (d.source !== undefined && d.source.isLoopNode)) {
 
       // loops

app/services/links.srv.js

@@ -18,7 +18,7 @@ function requestCounter($q, Requests) {
   return {
     'request': function (config) {
       // do not count requests for local files (e.g. templates or json)
-      if (!config.url.match(localFileRegEx)) {
+      if (config !== undefined && typeof config.url === 'string' && !config.url.match(localFileRegEx)) {
         Requests.incPendingRequests();
       }
       return config;