refactoring add-example with generic makeFormView()

html/index.mustache.html

@@ -21,6 +21,7 @@
         <div id="navbar">
             <button id="menu-btn" class="btn icon-menu"></button>
             <a id="nav-back-home" href="/">Web Sandbox</a>
+            {{#testMode}}<a id="test-reload-btn" href="/?testing=1" style="float:right;"><button class="btn icon-loop2"></button></a>{{/testMode}}
         </div>
 
         <div id="nav-menus">
@@ -45,7 +46,7 @@
         <div class="panel-inner">
 
         {{#errorMessage}}
-            <div class="alert-box error">{{errorMessage}}</div>
+            <div id="server-alert" class="alert-box error">{{errorMessage}}</div>
         {{/errorMessage}}
 
             <div class="details-div">
@@ -55,8 +56,8 @@
               {{/repo}}
               </section>
               <section id="add-repo" class="inline-block">
-                <button class="light-gray add-btn inline-block h-collapsed fast in"><span class="icon-plus rounded"></span> {{_.add}}</button>
-                <form id="add-repo-form" class="inline-block h-collapsed">
+                <button class="add-btn inline-block h-collapsed fast in"><span class="icon-plus rounded"></span></button>
+                <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>
@@ -71,8 +72,8 @@
               {{/example}}
               </section>
               <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">
+                <button class="add-btn inline-block h-collapsed fast in"><span class="icon-plus rounded"></span></button>
+                <form class="inline-block h-collapsed">
                     <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>
@@ -170,13 +171,13 @@ window._ws = {
 <script src="/js/ws-forms.js"></script>
 <script src="/js/editor-local-storage.js"></script>
 <script src="/js/ws-editor.js"></script>
-{{#testMode}}
+{{#testRun}}
 <script>
 window._ws._path = "{{{appPath}}}";
 </script>
 <script src="/js/vendor/qunit-2.4.1.js"></script>
 <script src="/js/test/ws.test.js"></script>
-{{/testMode}}
+{{/testRun}}
 
 </body>
 </html>

js/test/ws.test.js

@@ -64,6 +64,8 @@ function timeoutAsync(cb, delay) {
       timeoutAsync(() => {
         assert.equal( ($menuExample.find('a')).length, 1, "menu example should contain 1 entry" );
         assert.equal( $menuExample.find('a:first').html(), "Test Example", "link to 1st example should be labelled 'Test Example'" );
+        assert.ok( !! _ws.repo, "_ws.repo should not be undefined" );
+        assert.equal( _ws.repo.title, "Example Repo 1", '_ws.repo.title is "Example Repo 1"' );
         done();
       }, 100);
     });

js/ws-forms.js

@@ -3,101 +3,112 @@
   $(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 $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));
-  }
+  //     // 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");
+  // }
+
+
+  function makeFormView(elemId, onSubmitPromise) {
+    _ws.makeView(elemId, {
+
+      init: function() {
+        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.$elem.prop('id'))
+      },
 
-  function clearAndCloseEditor() {
-    $exampleFormIn.val('');
-    toggleEditor();
-  }
+      render: function() {
+        console.log('render form add ', this.$elem.prop('id'));
+        this.$btn.removeClass('in');
+        this.$form.addClass('in');
+        this.$input.focus();
+      },
 
-  function toggleEditor() {
-    $addExampleBtn.toggle();
-    $exampleForm.toggleClass("hidden");
+      events: {
+        'click .add-btn': function() {
+          this.render();
+        },
+
+        'click .icon-cross': function() {
+          this.$form.removeClass('in');
+          this.$btn.addClass('in');
+        },
+
+        'submit form': function(e) {
+          e.preventDefault();
+          var title = this.$input.val();
+          // rp.post('/collections', { title: title })
+          onSubmitPromise(title)
+          .then(function(c) {
+            _ws.notify('success', 'Collection créée: ' + c.title);
+          })
+          .catch(function(err) {
+            console.error(err);
+            _ws.notify('error', 'Impossible de créer la collection: ' + err.message);
+          });
+        }
+      }
+
+    });
   }
 
+  makeFormView('add-repo', function(title) {
+    return rp.post('/collections', { title: title });
+  });
 
-  _ws.makeView('add-repo', {
-
-    init: function() {
-      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.$btn.removeClass('in');
-      this.$form.addClass('in');
-      this.$input.focus();
-    },
-
-    events: {
-      'click .add-btn': function() {
-        this.render();
-      },
-
-      'click .icon-cross': function() {
-        this.$form.removeClass('in');
-        this.$btn.addClass('in');
-      },
+  makeFormView('add-example', function(title) {
+    return rp.post('/' + _ws.repo.path + '/examples', { title: title });
+  });
 
-      'submit form': function(e) {
-        e.preventDefault();
-        var title = this.$input.val();
-        rp.post('/collections', { title: title })
-        .then(function(c) {
-          _ws.notify('success', 'Collection créée: ' + c.title);
-        })
-        .catch(function(err) {
-          console.error(err);
-          _ws.notify('error', 'Impossible de créer la collection: ' + err.message);
-        });
-      } 
-    },
-
-    // $btn: $('#add-repo-btn')
 
-  });
 
   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);
+  // console.log($addExampleBtn);
+  // $addExampleBtn.click(toggleEditor);
+  // $exampleCancel.click(clearAndCloseEditor);
+  // $exampleForm.submit(addExample);
 
   });
 })(jQuery);

js/ws-menu.js

@@ -51,6 +51,7 @@
      * Handle navigation
      */
      function navigateTo(path) {
+      $('#server-alert').remove();
       history.pushState({}, 'New path', path);
       prevNavState = navState;
       navState = parsePath();
@@ -68,6 +69,7 @@
           .then(function(parts) {
             // renderMenuExample(parts.menuExample);
             console.log('render with parts', parts);
+            _ws.repo = parts.repo;
             _ws.ui.detailsRepo.render(parts);
             _ws.ui.menuExample.render(parts);
             _ws.events.emit('navToRepo', navState.repo);

lib/indexHandlers.js

@@ -47,6 +47,7 @@ module.exports = function(exStore, exDir, testMode) {
     let data = {
       menuRepo: exStore.getRepoMenu(),
       testMode,
+      testRun: testMode && req.query.testing,
       appPath: req.path,
       _: translator.getAll(locale)
     };