merge with parent repo

.eslintrc.json

@@ -0,0 +1,60 @@
+{
+  "extends": [
+    "eslint:recommended"
+  ],
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "rules": {
+    "semi": "error",
+    "spaced-comment": [
+      "warn",
+      "always"
+    ],
+    "no-trailing-spaces": [
+      "warn",
+      {
+        "ignoreComments": true
+      }
+    ],
+    "space-before-function-paren": [
+      "warn",
+      "never"
+    ],
+    "no-multiple-empty-lines": [
+      "warn",
+      {
+        "max": 1,
+        "maxEOF": 0,
+        "maxBOF": 0
+      }
+    ],
+    "indent": [
+      "warn",
+      4,
+      {
+        "SwitchCase": 1
+      }
+    ],
+    "linebreak-style": [
+      "off"
+    ],
+    "no-unused-vars": [
+      "warn",
+      {
+        "varsIgnorePattern": "^modal_.*"
+      }
+    ]
+  },
+  "globals": {
+    "window": true,
+    "module": true
+  }
+}

README.md

@@ -13,29 +13,33 @@ Add the CSS and the bundled CDN file to your website:
 
 ## Usage
 
-Use the function `DSBrowser()` to render a Domain Specification Browser in a target HTML element.
+Use the function `DSBrowser(parametersObject)` to initialize a new DS Browser instance with your wished parameters, then use the function .render() of your created instance to build the DS browser UI in the given target HTML element. 
 
-You can use the Domain Specification directly as object or pass a URL to its location.
+The parametersObject given for the initialization of the DS Browser has following attributes:
 
-``` html
-<div id="ds-container"></div>
-<script>
-    (async function() {
-        const dsURL = 'https://semantify.it/ds/rQHgkTdOr';
-        const dsBrowser = new DSBrowser(document.getElementById('ds-container'), dsURL);
-        await dsBrowser.render();
-    })();
-</script>
-```
+* `targetElement` (mandatory) - the html element in which the DS Browser should be rendered.
+* `locationControl` (optional, default: true) - boolean flag, if the URL address should be manipulated for navigation or not
+
+If locationControl is true, then the following parameters will be read from the current URL. If it is false, the following parameters must/can be given in the parametersObject. At least the `listId` or the `dsId` MUST be given.
 
-It is also possible to render a List of Domain Specifications. In order to do that, you need to pass the `type` argument to the function `DSBrowser()`. The `type` argument is `'DS'` by default, but must be `'LIST'` to render a List of Domain Specifications.
+* `listId` - the id of the DS List hosted at semantify.it which should be rendered (e.g. if the @id of the document is `https://semantify.it/ds/wS4r3c9hQ`, then the listId to pass is `wS4r3c9hQ`)
+* `dsId` - the id of the DS hosted at semantify.it which should be rendered (e.g. if the @id of the document is `https://semantify.it/ds/rQHgkTdOr`, then the dsId to pass is `rQHgkTdOr`). It is possible to pick a specific DS of a given List if both listId and dsId are given.
+* `path` - the path within the DS that should be shown (e.g. "openingHoursSpecification-OpeningHoursSpecification")
+* `viewMode` - the viewmode type that should be rendered (options are `null` for the native view, or `tree` or `table`)
+* `format` - the format in which the DS should be rendered (options are `null` for the normal html view, or `shacl` for the raw json-ld representation)
+         
 
 ``` html
 <div id="ds-container"></div>
 <script>
     (async function() {
-        const listURL = 'https://semantify.it/list/wS4r3c9hQ';
-        const dsBrowser = new DSBrowser(document.getElementById('ds-container'), listURL, 'LIST');
+       const dsBrowser = new DSBrowser({
+            targetElement: document.getElementById("ds-container"),
+            locationControl: false,
+            listId: "u0KYwqHQC",
+            dsId: "rQHgkTdOr",
+            path: "openingHoursSpecification-OpeningHoursSpecification"
+        });
         await dsBrowser.render();
     })();
 </script>