now the add btn/add form is as self-contained 'component'

css/styles.css

@@ -371,3 +371,6 @@ input {
   margin: 2px;
   padding-left: 10px;
 }
+#details-repo {
+  vertical-align: middle;
+}

html/index.mustache.html

@@ -48,32 +48,36 @@
             <div class="alert-box error">{{errorMessage}}</div>
         {{/errorMessage}}
 
-            <div>
+            <div style="border: 2px solid red">
               <section id="details-repo" class="inline-block" data-slug="{{path}}">
               {{#repo}}
                   <strong>{{_.collection}} </strong><span>{{title}}</span>
-                  <button id="add-repo-btn" class="h-collapsed fast in"><span class="icon-plus rounded"></span> {{_.add}}</button>
               {{/repo}}
               </section>
-              <form id="add-repo-form" class="inline-block h-collapsed">
-                  <input type="text" name="title" class="input-sm" value="" placeholder="{{_.collectionName}}" required />
-                  <button type="button" class="icon-cross rounded"></button><!--
-                  --><button type="submit" class="icon-checkmark rounded"></button>
-              </form>
+              <section id="add-repo" class="inline-block">
+                <button class="add-btn h-collapsed fast in"><span class="icon-plus rounded"></span> {{_.add}}</button>
+                <form id="add-repo-form" class="inline-block h-collapsed">
+                    <input type="text" name="title" class="input-sm" value="" placeholder="{{_.collectionName}}" required />
+                    <button type="button" class="icon-cross rounded"></button><!--
+                    --><button type="submit" class="icon-checkmark rounded"></button>
+                </form>
+              </section>
             </div>
 
             <div>
               <section id="details-example" class="inline-block" data-slug="{{slug}}">
               {{#example}}
                   <strong>{{_.example}} </strong><span>{{title}}</span>
-                  <button id="add-example-btn"><span class="icon-plus rounded"></span> {{_.add}}</button>
               {{/example}}
               </section>
-              <form id="add-example-form" class="inline-block hidden">
-                  <input type="text" name="title" class="input-sm" value="" placeholder="{{_.exampleName}}" required />
-                  <button type="button" id="add-example-cancel" class="icon-cross rounded red"></button><!--
-                  --><button type="submit" id="add-example-save" class="icon-checkmark rounded green"></button>
-              </form>
+              <section id="add-example" class="inline-block">
+                <button id="add-example-btn"><span class="icon-plus rounded"></span> {{_.add}}</button>
+                <form id="add-example-form" class="inline-block hidden">
+                    <input type="text" name="title" class="input-sm" value="" placeholder="{{_.exampleName}}" required />
+                    <button type="button" id="add-example-cancel" class="icon-cross rounded red"></button><!--
+                    --><button type="submit" id="add-example-save" class="icon-checkmark rounded green"></button>
+                </form>
+              </section>
             </div>
 
             <!-- <button id="save-changes" class="icon-cloud-upload green"></button> -->
@@ -123,7 +127,6 @@
 <script data-tmpl-for="details-example" id="details-example-tmpl" type="text/x-mustache-tmpl">
   {{#example}}
     <strong>{{_.example}} </strong><span>{{title}}</span>
-    <button id="add-example-btn"><span class="icon-plus rounded"></span> {{_.add}}</button>
   {{/example}}
 </script>
 
@@ -137,7 +140,6 @@
 <script data-tmpl-for="details-repo" id="details-example-repo" type="text/x-mustache-tmpl">
 {{#repo}}
   <strong>{{_.collection}} </strong><span>{{title}}</span>
-  <button id="add-repo-btn"><span class="icon-plus rounded"></span> {{_.add}}</button>
 {{/repo}}
 </script>
 <%={{ }}=%>

js/ws-forms.js

@@ -45,28 +45,35 @@
   }
 
 
-  _ws.makeView('add-repo-form', {
+  _ws.makeView('add-repo', {
 
     init: function() {
-      this.$inputTitle = this.$elem.find('input[name="title"]');
+      this.$btn   = this.$elem.find('.add-btn');
+      this.$form  = this.$elem.find('form');
+      this.$input = this.$form.find('input[name="title"]');
+      console.log('init add repo form', this)
     },
 
     render: function() {
       console.log('render form add repo', this);
-      this.$elem.addClass('in');
       this.$btn.removeClass('in');
-      this.$inputTitle.focus();
+      this.$form.addClass('in');
+      this.$input.focus();
     },
 
     events: {
+      'click .add-btn': function() {
+        this.render();
+      },
+
       'click .icon-cross': function() {
-        this.$elem.removeClass('in');
+        this.$form.removeClass('in');
         this.$btn.addClass('in');
       },
 
-      'submit': function(e) {
+      'submit form': function(e) {
         e.preventDefault();
-        var title = this.$inputTitle.val();
+        var title = this.$input.val();
         rp.post('/collections', { title: title })
         .then(function(c) {
           _ws.notify('success', 'Collection créée: ' + c.title);
@@ -78,13 +85,13 @@
       } 
     },
 
-    $btn: $('#add-repo-btn')
+    // $btn: $('#add-repo-btn')
 
   });
 
   console.log(_ws.ui);
 
-  _ws.ui.addRepoForm.$btn.click(_ws.ui.addRepoForm.render);
+  // _ws.ui.addRepoForm.$btn.click(_ws.ui.addRepoForm.render);
 
 
   console.log($addExampleBtn);

js/ws-ui-parts.js

@@ -47,7 +47,7 @@
         var evtName = bits.shift();
         var selector = bits.join(' ');
         var target = selector === '' ? this.$elem : this.$elem.find(selector);
-        console.log('#### bind', descriptor, 'e:' + evtName, 's:[' + selector + '], target:', target);
+        // console.log('#### bind', descriptor, 'e:' + evtName, 's:[' + selector + '], target:', target);
         target.on(evtName, handler.bind(this));
       }
     }
@@ -81,13 +81,11 @@
      * Build a view
      */
     _ws.makeView = function(elemId, props) {
-      console.log('** makeView', elemId);
       var v = {};
       v.props = props || {};
 
       v.$elem = $('#' + elemId);
       v.partName = _.camelCase(elemId);
-      console.log('adding', elemId, v.partName);
       _ws.ui[v.partName] = v;
 
       // Bind the provided render function
@@ -118,7 +116,6 @@
           continue;
         }
         v[p] = props[p];
-        console.log('pass props: added', p, v[p]);
       }
 
       v.show = viewElemShow.bind(v);