extract widgets

src/dependencies.pug

@@ -15,6 +15,7 @@ script(
 )
 
 script(src="/scripts/index.js")
+script(src="/scripts/hd-widgets.js")
 
 // Stylesheets
 link(rel='stylesheet', href='/lib/normalize.css')

src/page-group-profile.pug

@@ -1,23 +1,4 @@
-script.
-  document.addEventListener('WebComponentsReady', function(event) {
-    class HDAppMember extends SIBWidget {
-      get template() {
-        return `
-          <div name="${this.name}">
-            <img src="${this.value.avatar}"/>
-          </div>
-        `;
-      }
 
-      render() {
-        store.get(this.value).then( (value) => {
-          this._value = value;
-          this.innerHTML = this.template;
-        });
-      }
-    }
-    customElements.define("hdapp-member", HDAppMember);
-  });
 
 #group-profile
   sib-display(

src/page-job-offers.pug

@@ -1,33 +1,4 @@
-script.
-  document.addEventListener('WebComponentsReady', function(event) {
-    class HDAppAuthor extends SIBDisplayLookupList {
-      get parentElement() {
-        return 'div';
-      }
-      getTemplate(value, index) {
-        var firstname, lastname;
-        if (typeof value == 'object')
-          if (Object.keys(value).length > 1) {
-            firstname = value.user.first_name;
-            lastname = value.user.last_name;
-          } else {
-            store.get(value).then(resource => {
-              this.value.push(resource);
-              this.render();
-            });
-            if (Array.isArray(this.value))
-              this.value.splice(this.value.indexOf(value), 1);
-            else this.value = [];
-            return '';
-          }
-        return `${firstname} ${lastname}`;
-      }
-    }
-    customElements.define('hdapp-author', HDAppAuthor);
-  });
-
 div
-
   h1 New offers  
     span Here you can find and post offers
   sib-display#offers-list.limiter(

src/page-member-edit.pug

@@ -7,7 +7,7 @@
     name='avatar',
     value='',
   )
-  sib-form.edit-form.block(
+  sib-form.block(
     data-fields='user, avatar, bio, cell, jabberID, number, pseudo, skills, website',
     widget-user='hdapp-usereditinfo',
     range-cell=`${sdn}/cells/`, widget-skills='sib-form-multiple-dropdown',
@@ -24,7 +24,7 @@
       button#crop-img.btn.btn-link Valider
 
 
-script.
+//-script.
   class LDPFormImgUpload extends SIBWidget {
     get template() {
       return `<label for="${this.name}"><img id="${this.name}-preview" src="${this.value}"/></label>

src/page-members.pug

@@ -1,56 +1,3 @@
-script.
-  document.addEventListener("WebComponentsReady", function(event) {
-    class HDAppUserInfo extends SIBDisplayLookupList {
-      get parentElement() {return "div"}
-      getTemplate(value, index) {
-        var firstname, lastname, email;
-
-        if(typeof value == "object")
-          if(Object.keys(value).length > 1) {
-            firstname = value.first_name;
-            lastname  = value.last_name;
-            email     = value.email;
-          }
-          else {
-            store.get(value).then(resource => {
-                this.value.push(resource);
-                this.render();
-            });
-            if(Array.isArray(this.value))this.value.splice(this.value.indexOf(value), 1);
-            else this.value = [];
-            return '';
-          }
-        return `<div>${firstname} ${lastname}</div>`;
-                // + `<div id="${email}">${email}</div>`;
-      }
-    }
-    customElements.define('hdapp-userinfo', HDAppUserInfo);
-
-    class HDAppCell extends SIBDisplayLookupList {
-      get parentElement() {return "div"}
-      getTemplate(value, index) {
-        var city, country;
-
-        if(typeof value == "object")
-          if(Object.keys(value).length > 1) {
-            city      = value.city;
-            country   = value.country;
-          }
-          else {
-            store.get(value).then(resource => {
-                this.value.push(resource);
-                this.render();
-            });
-            if(Array.isArray(this.value))this.value.splice(this.value.indexOf(value), 1);
-            else this.value = [];
-            return '';
-          }
-        return `<span>${city} - ${country}</span>`;
-      }
-    }
-    customElements.define("hdapp-usercell", HDAppCell);
-  });
-
 div
   h1 Members
   sib-display#profiles-list(

src/page-projects.pug

@@ -1,21 +1,3 @@
-script.
-  document.addEventListener('WebComponentsReady', function(event) {
-    class HDAppClient extends SIBWidget {
-      get template() {
-
-        return `<img name="${this.name}" src="${this.value.logo}"/>`;
-      }
-
-      render() {
-        store.get(this.value).then( (value) => {
-          this._value = value;
-          this.innerHTML = this.template;
-        });
-      }
-    }
-    customElements.define("hdapp-client", HDAppClient);
-  });
-
 #projects
   h1 Projects
   sib-display(

src/scripts/hd-widgets.js

@@ -0,0 +1,112 @@
+document.addEventListener('WebComponentsReady', function(event) {
+  class HDAppUserInfo extends SIBDisplayLookupList {
+    get parentElement() {
+      return 'div';
+    }
+    getTemplate(value, index) {
+      var firstname, lastname, email;
+
+      if (typeof value == 'object')
+        if (Object.keys(value).length > 1) {
+          firstname = value.first_name;
+          lastname = value.last_name;
+          email = value.email;
+        } else {
+          store.get(value).then(resource => {
+            this.value.push(resource);
+            this.render();
+          });
+          if (Array.isArray(this.value))
+            this.value.splice(this.value.indexOf(value), 1);
+          else this.value = [];
+          return '';
+        }
+      return `<div>${firstname} ${lastname}</div>`;
+      // + `<div id="${email}">${email}</div>`;
+    }
+  }
+  customElements.define('hdapp-userinfo', HDAppUserInfo);
+
+  class HDAppCell extends SIBDisplayLookupList {
+    get parentElement() {
+      return 'div';
+    }
+    getTemplate(value, index) {
+      var city, country;
+
+      if (typeof value == 'object')
+        if (Object.keys(value).length > 1) {
+          city = value.city;
+          country = value.country;
+        } else {
+          store.get(value).then(resource => {
+            this.value.push(resource);
+            this.render();
+          });
+          if (Array.isArray(this.value))
+            this.value.splice(this.value.indexOf(value), 1);
+          else this.value = [];
+          return '';
+        }
+      return `<span>${city} - ${country}</span>`;
+    }
+  }
+  customElements.define('hdapp-usercell', HDAppCell);
+
+  class HDAppClient extends SIBWidget {
+    get template() {
+      return `<img name="${this.name}" src="${this.value.logo}"/>`;
+    }
+
+    render() {
+      store.get(this.value).then(value => {
+        this._value = value;
+        this.innerHTML = this.template;
+      });
+    }
+  }
+  customElements.define('hdapp-client', HDAppClient);
+
+  class HDAppMember extends SIBWidget {
+    get template() {
+      return `
+        <div name="${this.name}">
+          <img src="${this.value.avatar}"/>
+        </div>
+      `;
+    }
+
+    render() {
+      store.get(this.value).then(value => {
+        this._value = value;
+        this.innerHTML = this.template;
+      });
+    }
+  }
+  customElements.define('hdapp-member', HDAppMember);
+
+  class HDAppAuthor extends SIBDisplayLookupList {
+    get parentElement() {
+      return 'div';
+    }
+    getTemplate(value, index) {
+      var firstname, lastname;
+      if (typeof value == 'object')
+        if (Object.keys(value).length > 1) {
+          firstname = value.user.first_name;
+          lastname = value.user.last_name;
+        } else {
+          store.get(value).then(resource => {
+            this.value.push(resource);
+            this.render();
+          });
+          if (Array.isArray(this.value))
+            this.value.splice(this.value.indexOf(value), 1);
+          else this.value = [];
+          return '';
+        }
+      return `${firstname} ${lastname}`;
+    }
+  }
+  customElements.define('hdapp-author', HDAppAuthor);
+});

src/styles/form.scss

@@ -1,7 +1,8 @@
 //button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week, datetime
 
 .form-view{
-  @extend %frame
+  @extend %frame;
+  padding: 1em;
 }
 
 sib-form.inline form {
@@ -12,7 +13,6 @@ sib-form.inline form {
 }
 sib-form.block {
   display: block;
-  padding: 1em;
   > form {
     > * {
       display: block;