Merge pull request #1 from rwth-acis/polymer3.0

Polymer3.0
rwth-acis · Feb 7, 2019 · 96ce364 · 96ce364
2 parents 7d5bce9 + 1dbe951
commit 96ce364
Show file tree

Hide file tree

Showing 9 changed files with 1,866 additions and 1,462 deletions.
diff --git a/README.md b/README.md
@@ -4,17 +4,30 @@ A polymer widget which uses the las2peer Contact and UserInformation Service
 
 ## Deploy
 
-1. Install the LTS version (4.x) of [Node.js](https://nodejs.org/en/download/). The current version (6.x) should work, but is not officially supported. Versions below LTS are not supported.
-2. Install [git](https://git-scm.com/downloads).
-3. Install the latest version of [Bower](https://bower.io/#install-bower).
+1. Add this line to your package.json
 ```
-$ npm install -g bower
+"las2peer-frontend-user-widget": "github:rwth-acis/las2peer-frontend-user-widget#polymer3.0"
 ```
-4. Run the following Bower command:
+2. Import to your source code
 ```
-$ bower install rwth-acis/frontend-user-widget
+import 'las2peer-frontend-user-widget/las2peer-user-widget.js'
+```
+3. Add the HTML element
+```
+<las2peer-user-widget></las2peer-user-widget>
 ```
 
 ## Demo
 
-Visit the following page for the [documentation & a demo](https://rwth-acis.github.io/las2peer-frontend-user-widget)
+The project includes a demo which can be run locally by running `npm i` and `polymer serve`
+
+## Changes from legacy polymer module
+	>Created seperate ES files for las2peer-user-widget and las2peer-userlist-widget according to legacy definition of Polymer Elements
+	>Added super.ready() to ready() function
+	>Scrapped x-select in favor of an iron-dropdown due to the x-select item not showing up in the DOM
+	>Had to lose the 'modal' property of paper-dialogs since the backdrop appeard on top of everyting, blocking the page
+        >Changed syntax to work with shadow DOM
+                >`document.getElementById("ID")` becomes `this.$.ID` [[Polymer function which may not be supported by future versions]]
+                >`document.getElementsByClassName("CLASS")` becomes `this.shadowRoot.querySelector("#CLASS")
+	>Outsourced triggering of click event on file input from paper-button to '_uploadAvatarFile' function
+        >Added authorization based on session cookie which is enabled by the `send-cookie` attribute
diff --git a/bower.json b/bower.json
diff --git a/demo/index.html b/demo/index.html
diff --git a/index.html b/index.html
@@ -1,16 +1,37 @@
 <!doctype html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 
-    <title>las2peer-frontend-user-widget</title>
+    <title>las2peer-frontend-user-widget demo</title>
 
-    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
 
-    <link rel="import" href="../iron-component-page/iron-component-page.html">
+  <!-- import Bootstrap for responsive UI (must) -->
+  <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
+
+    <script type="module" src="./las2peer-user-widget.js"></script>
+
+    <style is="custom-style" include="demo-pages-shared-styles">
+    </style>
   </head>
   <body>
-    <iron-component-page src="las2peer-frontend-user-widget.html"></iron-component-page>
+    <div class="vertical-section-container centered">
+      <h3>Basic las2peer-frontend-user-widget demo</h3>
+           <div style="margin:15px;width:150px;">
+            <div style="float:right">
+              <p>
+                Alice
+              </p>
+              <div id="user-information" style="width:76px;height:55px">
+                <las2peer-user-widget base-url="https://las2peer.dbis.rwth-aachen.de:9098" login-name="michi" login-password="abc1234">
+                </las2peer-user-widget>
+                <las2peer-userlist-widget base-url="https://las2peer.dbis.rwth-aachen.de:9098" login-name="michi" login-password="abc1234">
+                </las2peer-userlist-widget>
+              </div>
+            </div>
+          </div>
+    </div>
   </body>
 </html>