allow adding more events to inline form views

css/styles.css

@@ -206,6 +206,22 @@ button {
   padding: 3px;
   font-size: 90%;
 }
+.input-xs {
+  padding: 1px;
+  font-size: 80%;
+}
+.input-light-border {
+  border: 1px solid #f8f8f8;
+}
+.input-warning {
+  border: 1px solid #cc5;
+}
+.input-error {
+  border: 1px solid #e65;
+}
+.input-success {
+  border: 1px solid #4c2;
+}
 [class^="icon-"].rounded,
 [class*=" icon-"].rounded {
   border-radius: 10px;

html/index.mustache.html

@@ -90,7 +90,12 @@
             <ul id="tabs">{{#files}}
                 <li class="tab-{{type}}" data-type="{{type}}">{{name}}</li>
             {{/files}}
-            <li>+</li>
+            <li id="add-file"><button class="add-btn inline-block h-collapsed fast{{#repo}} in{{/repo}}">+</button>
+                <form class="inline-block h-collapsed">
+                    <input type="text" name="title" class="input-xs input-light-border" value="" placeholder="{{_.fileNameWithExt}}" 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></li>
             </ul>
             <div id="editor"></div>
         </div>

js/ws-editor.js

@@ -95,7 +95,7 @@ $(document).ready(function() {
 
   _ws.makeView('tabs', {
     events: {
-      'click li': onTabClicked
+      'click li[data-type]': onTabClicked
     }
   })
 

js/ws-forms.js

@@ -45,7 +45,46 @@
   // }
 
 
-  function makeFormView(elemId, onSubmitPromise) {
+  function makeFormView(elemId, onSubmitPromise, options) {
+
+    // Fallback options & options.events
+    options = options || {};
+    options.events = options.events || {};
+
+    // Define events and optionally extend them with those
+    // provided in options.events
+    var events = Object.assign({
+      'click .add-btn': function() {
+        this.render();
+      },
+
+      'click .icon-cross': function() {
+        this.$form.removeClass('in');
+        this.$btn.addClass('in');
+      },
+
+      'submit form': function(e) {
+        e.preventDefault();
+        if(this.cantSubmit) {
+          this.$input
+          .removeClass('input-success input-warning')
+          .addClass('input-error');
+          _ws.notify('error', this.cantSubmit);
+          return;
+        }
+        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);
+        });
+      }
+    }, options.events);
+
     _ws.makeView(elemId, {
 
       init: function() {
@@ -62,30 +101,7 @@
         this.$input.focus();
       },
 
-      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);
-          });
-        }
-      }
+      events: events
 
     });
   }
@@ -99,6 +115,45 @@
   });
 
 
+  makeFormView(
+    'add-file',
+    function(name) {
+      return rp.post('/' + _ws.repo.path + '/examples/file', { name: name });
+    },
+    {
+      events: {
+        'keyup input[name="title"]': function(e) {
+          var filename = this.$input.val();
+          // console.log('filename', filename);
+          var bits = filename.split('.');
+          var lastIdx = bits.length - 1;
+          console.log(bits, bits.length, lastIdx, bits[lastIdx], typeof bits[lastIdx]);
+          if(bits.length < 2) {
+            this.$input
+            .removeClass('input-success input-error')
+            .addClass('input-warning');
+            this.cantSubmit = 'Impossible de valider: extension (.html/.js/.css) manquante';
+            return;
+          }
+          else {
+            var ext = (bits[lastIdx]).toLowerCase();
+            console.log(ext);
+            if( ['html', 'js', 'css'].indexOf( ext ) === -1 ) {
+              this.$input
+              .removeClass('input-success input-warning')
+              .addClass('input-error');
+              this.cantSubmit = 'Impossible de valider: extension ' + ext + ' invalide (autorisées: .html/.js/.css)';
+              return;
+            }
+          }
+          this.$input.addClass('input-success');
+          this.cantSubmit = undefined;
+        }
+      }
+    }
+  );
+
+
 
   console.log(_ws.ui);
 

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));
       }
     }

languages/en-US.json

@@ -6,5 +6,6 @@
   "exampleName": "Example name",
   "collectionName": "Collection name",
   "collection": "Collection:",
-  "example": "Example:"
+  "example": "Example:",
+  "fileNameWithExt": "File name"
 }

languages/fr-FR.json

@@ -6,5 +6,6 @@
   "exampleName": "Nom de l'exemple",
   "collectionName": "Nom de la collection",
   "collection": "Collection :",
-  "example": "Exemple :"
+  "example": "Exemple :",
+  "fileNameWithExt": "Nom de fichier"
 }

test/integration/render-index.test.js

@@ -44,7 +44,6 @@ describe('render index', () => {
 
     const { statusCode, body, $ } = invokeHandler('/', indexHandlers.getIndexBare);
     statusCode.should.equal(200);
-console.log(body);
     const inlineJsData = "let window = {};" +
       $('#inline-js-data').html();
     try {