Add forms

css/styles.css

@@ -229,8 +229,8 @@ input {
   /*display: none;*/
   position: absolute;
   top: 510px;
-
 }
+
 /**
  * Styles pour l'éditeur Ace
  */
@@ -344,3 +344,30 @@ input {
 .tab-css {
   background: #fce;
 }
+.inline-block {
+  display: inline-block;
+  vertical-align: top;
+}
+.hidden {
+  display: none;
+}
+.h-collapsed {
+  box-sizing: border-box;
+  max-width: 0;
+  padding-left: 0;
+  padding-right: 0;
+  transition: 0.3s;
+  overflow: hidden;
+}
+.h-collapsed.fast {
+  transition: 0.2s;
+}
+.h-collapsed.in {
+  padding-left: 15px;
+  padding-right: 15px;
+  max-width: 350px;
+}
+.h-collapsed input[type="text"] {
+  margin: 2px;
+  padding-left: 10px;
+}

html/index.mustache.html

@@ -48,23 +48,34 @@
             <div class="alert-box error">{{errorMessage}}</div>
         {{/errorMessage}}
 
-            <div id="details-repo" data-slug="{{path}}">
-            {{#repo}}
-                <strong>{{_.collection}} </strong><span>{{title}}</span>
-                <button id="add-example-btn"><span class="icon-plus rounded"></span> {{_.add}}</button>
-            {{/repo}}
+            <div>
+              <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>
             </div>
-            <div id="details-example" data-slug="{{slug}}">
-            {{#example}}
-                <strong>{{_.example}} </strong><span>{{title}}</span>
-            {{/example}}
+
+            <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>
             </div>
 
-            <form id="add-example-form" style="display: none;">
-                <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>
             <!-- <button id="save-changes" class="icon-cloud-upload green"></button> -->
 
         </div>
@@ -112,6 +123,7 @@
 <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>
 
@@ -124,8 +136,8 @@
 
 <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-example-btn"><span class="icon-plus rounded"></span> {{_.add}}</button>
+  <strong>{{_.collection}} </strong><span>{{title}}</span>
+  <button id="add-repo-btn"><span class="icon-plus rounded"></span> {{_.add}}</button>
 {{/repo}}
 </script>
 <%={{ }}=%>
@@ -150,8 +162,10 @@ window._ws = {
 </script>
 <script src="/js/req-promise.js"></script>
 <script src="/js/ws-ui-parts.js"></script>
+<script src="/js/ws-notify.js"></script>
 <script src="/js/ws-events.js"></script>
 <script src="/js/ws-menu.js"></script>
+<script src="/js/ws-forms.js"></script>
 <script src="/js/editor-local-storage.js"></script>
 <script src="/js/ws-editor.js"></script>
 {{#testMode}}

js/test/ws.test.js

@@ -77,11 +77,24 @@ function timeoutAsync(cb, delay) {
       assert.equal( window.location.pathname, '/example-repo1/repo1-example1', "location should be /example-repo1/repo1-example1" );
       timeoutAsync(() => {
         assert.ok( $editor.is(':visible'), "editor visible" );
+        assert.equal( _ws.files.length, 2, "_ws.files should hold 2 files" );
         done();
       }, 50);
     });
 
 
+    QUnit.test( "test adding a collection", function( assert ) {
+      var done = assert.async();
+      var $addCollectionForm = $('#add-collection-form');
+      var $addCollectionBtn  = $('#add-collection-btn');
+      assert.equal( $addCollectionForm.length, 1, "there should be one #add-collection-form element" );
+      assert.equal( $addCollectionBtn.length, 1, "there should be one #add-collection-btn element" );
+      $addCollectionBtn.trigger( 'click' );
+      assert.ok( $addCollectionForm.is(':visible'), "clicking on #add-collection-btn should make appear the *-form element" );
+
+      done();
+    });
+
     QUnit.test( "test nav back to home", function( assert ) {
       var done = assert.async();
       $homeLink.trigger('click');

js/ws-editor.js

@@ -6,15 +6,9 @@ $(document).ready(function() {
   var $editorWrapper = $('#editor-wrapper');
   var $editor        = $('#editor');
 
-  var $addExampleBtn = $('#add-example-btn');
-  var $exampleForm   = $('#add-example-form');
-  var $exampleFormIn = $exampleForm.find('input')
-  var $exampleSave   = $('#add-example-save');
-  var $exampleCancel = $('#add-example-cancel');
-
 
   var $saveChanges   = $('#save-changes');
-  var $notification  = $('#notification');
+
   var $revertEditor  = $('#revert-editor');
   // var $panelLeft     = $('.panel-left');
   // var $panelRight    = $('.panel-right');
@@ -79,8 +73,8 @@ $(document).ready(function() {
   }
 
 
-  function onTabClicked() {
-    var clickedItem = $(this);
+  function onTabClicked(e) {
+    var clickedItem = $(e.target);
     var type = clickedItem.data('type');
     editorSession.setMode("ace/mode/" + mapTypes[type]);
     var name = clickedItem.html();
@@ -278,51 +272,6 @@ $(document).ready(function() {
   //   });
   // }
 
-  function notify(type, text) {
-    $notification
-    .addClass(type)
-    .addClass('active');
-    $notification.html(text);
-    setTimeout(function() {
-      $notification.removeClass('active');
-    }, 2000);
-    setTimeout(function() {
-      $notification.removeClass(type);
-    }, 3000);
-  }
-
-  function toggleEditor() {
-    $addExampleBtn.toggle();
-    $selectorNav.toggle();
-    $exampleForm.toggle();
-  }
-
-
-  /**
-   * Add new example
-   */
-  function addExample(e) {
-    e.preventDefault();
-    var repoSlug = $detailsRepo.data('slug');
-    var title = $(this).find('input[name="title"]').val();
-    rp.post('/' + repoSlug + '/examples', { title: title })
-    .then(function(example) {
-      clearAndCloseEditor();
-      // $fileSelect.append(makeFileSelectOption(example));
-      // $fileSelect.val(example.slug);
-      
-      // var $exMenuItem = $('<li><a href="/' + repoSlug + '/' + example.slug + '">' + example.title + '</a></li>')
-      // .appendTo( $('#cat-' + example.category) );
-      notify('success', "Exemple créé !");
-      // navigateTo('/'+ repoSlug + '/' + example.slug);
-    })
-    .catch(errText => notify('error', 'Erreur: ' + errText));
-  }
-
-  function clearAndCloseEditor() {
-    $exampleFormIn.val('');
-    toggleEditor();
-  }
 
   // function navigateTo(path) {
   //   history.pushState({}, 'pouet', path)
@@ -350,12 +299,7 @@ $(document).ready(function() {
   // $fileSelect.change(function() {
   //   loadExample($(this).val());
   // });
-  console.log($addExampleBtn);
-  $addExampleBtn.click(toggleEditor);
-  $addExampleBtn.click(console.log);
-  $exampleCancel.click(clearAndCloseEditor);
   // $saveChanges.click(saveChanges);
-  $exampleForm.submit(addExample);
   // $revertEditor.click(revertEditor);
   // $.get('/menu', menu => $('#site-menu').html(menu), 'html');
   // loadExampleList();

js/ws-forms.js

@@ -0,0 +1,84 @@
+"use strict";
+(function($) {
+  $(document).ready(function() {
+
+
+  var $addRepoBtn = $('#add-repo-btn');
+
+
+  var $addExampleBtn = $('#add-example-btn');
+  var $exampleForm   = $('#add-example-form');
+  var $exampleFormIn = $exampleForm.find('input');
+  var $exampleSave   = $('#add-example-save');
+  var $exampleCancel = $('#add-example-cancel');
+
+
+  /**
+   * Add new example
+   */
+  function addExample(e) {
+    e.preventDefault();
+    var repoSlug = $detailsRepo.data('slug');
+    var title = $(this).find('input[name="title"]').val();
+    rp.post('/' + repoSlug + '/examples', { title: title })
+    .then(function(example) {
+      clearAndCloseEditor();
+      // $fileSelect.append(makeFileSelectOption(example));
+      // $fileSelect.val(example.slug);
+      
+      // var $exMenuItem = $('<li><a href="/' + repoSlug + '/' + example.slug + '">' + example.title + '</a></li>')
+      // .appendTo( $('#cat-' + example.category) );
+      notify('success', "Exemple créé !");
+      // navigateTo('/'+ repoSlug + '/' + example.slug);
+    })
+    .catch(errText => notify('error', 'Erreur: ' + errText));
+  }
+
+  function clearAndCloseEditor() {
+    $exampleFormIn.val('');
+    toggleEditor();
+  }
+
+  function toggleEditor() {
+    $addExampleBtn.toggle();
+    $exampleForm.toggleClass("hidden");
+  }
+
+
+  _ws.makeView('add-repo-form', {
+
+    render: function() {
+      console.log('render form add repo', this);
+      this.$elem.addClass('in');
+      this.$btn.removeClass('in');
+      this.$elem.find('input[name="title"]').focus();
+    },
+
+    $btn: $('#add-repo-btn'),
+
+    events: {
+      'click .icon-cross': function() {
+        this.$elem.removeClass('in');
+        this.$btn.addClass('in');
+      },
+
+      'submit': function(e) {
+        e.preventDefault();
+        console.log('submit form');
+      } 
+    }
+
+  });
+
+  console.log(_ws.ui);
+
+  _ws.ui.addRepoForm.$btn.click(_ws.ui.addRepoForm.render);
+
+
+  console.log($addExampleBtn);
+  $addExampleBtn.click(toggleEditor);
+  $exampleCancel.click(clearAndCloseEditor);
+  $exampleForm.submit(addExample);
+
+  });
+})(jQuery);

js/ws-menu.js

@@ -92,7 +92,7 @@
 
     function menuItemClicked(e) {
       e.preventDefault();
-      var $link = $(this);
+      var $link = $(e.target);
       console.log($link.prop('href'));
       var originalColor = $link.css('backgroundColor');
       toggleMainMenu();

js/ws-notify.js

@@ -0,0 +1,22 @@
+"use strict";
+(function($) {
+  $(document).ready(function() {
+    console.log('ws: init notify');
+
+    var $notification = $('#notification');
+
+    _ws.notify = function(type, text) {
+      $notification
+      .addClass(type)
+      .addClass('active');
+      $notification.html(text);
+      setTimeout(function() {
+        $notification.removeClass('active');
+      }, 2000);
+      setTimeout(function() {
+        $notification.removeClass(type);
+      }, 3000);
+    }
+
+  });
+})(jQuery);

js/ws-ui-parts.js

@@ -19,6 +19,7 @@
       if(! data) {
         console.log('WARNING! You should provide data for #' + elemId + "'s render()");
       }
+      this.$elem.empty();
       this.$elem.html( Mustache.render( this.tmpl, data ) );
       this.$elem.show();
       this.bindEvents();
@@ -45,8 +46,9 @@
         var bits = descriptor.split(' ');
         var evtName = bits.shift();
         var selector = bits.join(' ');
-        console.log('#### bind', descriptor, 'e:' + evtName, 's:' + selector);
-        this.$elem.find(selector).on(evtName, handler);
+        var target = selector === '' ? this.$elem : this.$elem.find(selector);
+        console.log('#### bind', descriptor, 'e:' + evtName, 's:[' + selector + '], target:', target);
+        target.on(evtName, handler.bind(this));
       }
     }
 
@@ -109,6 +111,16 @@
         v.bindEvents = viewBindEventsNop.bind(v);
       }
 
+      // Pass arbitrary properties
+      for(var p in props) {
+        if(['render', 'events'].indexOf(p) !== -1) {
+          // console.log('pass props: ignore', p);
+          continue;
+        }
+        v[p] = props[p];
+        console.log('pass props: added', p, v[p]);
+      }
+
       v.show = viewElemShow.bind(v);
       v.hide = hideElemShow.bind(v);
     };

languages/en-US.json

@@ -4,6 +4,7 @@
   "exampleNotFound": "Example `%s/%s` not found",
   "add": "Add",
   "exampleName": "Example name",
+  "collectionName": "Collection name",
   "collection": "Collection:",
   "example": "Example:"
 }

languages/fr-FR.json

@@ -4,6 +4,7 @@
   "exampleNotFound": "Exemple `%s/%s` introuvable",
   "add": "Ajouter",
   "exampleName": "Nom de l'exemple",
+  "collectionName": "Nom de la collection",
   "collection": "Collection :",
   "example": "Exemple :"
 }