refactor $.ajax and $.get calls into promisified request library

index.html

@@ -61,6 +61,7 @@
 <script src="js/plugins.js"></script>
 <script src="js/main.js"></script>
 <script src="js/vendor/ace/ace.js" type="text/javascript" charset="utf-8"></script>
+<script src="js/req-promise.js"></script>
 <script src="js/editor-local-storage.js"></script>
 <script src="js/editor.js"></script>
 </body>

js/editor.js

@@ -123,28 +123,15 @@ $(document).ready(function() {
     setActiveTab(mode);
   })
 
-  function loadAsync(url, dataType) {
-    return new Promise(function(resolve, reject) {
-      $.ajax({
-        type: 'GET',
-        url: url,
-        success: function(data) {
-          resolve(data);
-        },
-        error: function(jqXHR) {
-          reject(new Error(jqXHR.responseText));
-        }
-      }, dataType);
-    });
-  }
+
 
   function loadExample(exampleSlug) {
     // console.log('loadExample', exampleSlug);
     var serverPath = 'exemples/' + exampleSlug + '/';
-    loadAsync(serverPath + 'script.js', 'text')
+    rp.get(serverPath + 'script.js', 'text')
     .then(javascript => $editorJs.html(javascript))
-    .then(() => loadAsync(serverPath + 'contenu.html', 'text'))
-    .then(() => loadAsync(serverPath + 'styles.css', 'text')
+    .then(() => rp.get(serverPath + 'contenu.html', 'text'))
+    .then(() => rp.get(serverPath + 'styles.css', 'text')
       .then(css => $editorCss.html(css))
       .catch(err => {
         return '';
@@ -172,19 +159,33 @@ $(document).ready(function() {
 
   }
 
-  function addFileSelectItem(item) {
-    $fileSelect.append(
-      '<option value="' + item.slug + '">' +
+
+  /**
+   * Build select option string
+   */
+  function makeFileSelectOption(item) {
+    return '<option value="' + item.slug + '">' +
         item.title +
       '</option>'
+  }
+
+
+  /**
+   * Populate file selector from JSON list content
+   */
+  function resetFileSelect(exampleList) {
+    $fileSelect.html(
+      '<option value="-">&mdash;</option>' +
+      exampleList.map(makeFileSelectOption)
     );
   }
 
   function loadExampleList() {
-    $.get('exemples/liste.json', function(_exampleList) {
+    rp.get('exemples/liste.json', 'json')
+    .then(function(_exampleList) {
       exampleList = _exampleList;
       var restoredDraft;
-      exampleList.forEach(addFileSelectItem);
+      resetFileSelect(exampleList);
       if(currentHash) {
         $fileSelect.val(currentHash);
         var item = _.find(exampleList, { slug: currentHash });
@@ -212,8 +213,7 @@ $(document).ready(function() {
           setActiveTab('html');
         }
       }
-
-    }, 'json');
+    });
   }
 
   function notify(type, text) {
@@ -235,26 +235,21 @@ $(document).ready(function() {
     $exampleForm.toggle();
   }
 
+
+  /**
+   * Save new example
+   */
   function saveExample(e) {
     e.preventDefault();
     var title = $(this).find('input[name="title"]').val();
-    $.ajax({
-      type: 'POST',
-      url: '/examples',
-      data: JSON.stringify({ title }),
-      success: function(newExample) {
-        clearAndCloseEditor();
-        addFileSelectItem(newExample);
-        $fileSelect.val(newExample.slug);
-        // $fileSelect.trigger('change');
-        notify('success', "Exemple créé !");
-      },
-      error: function(jqXHR, textStatus, errorThrown ) {
-        notify('error', 'Erreur: ' + jqXHR.responseText);
-      },
-      contentType: 'application/json',
-      dataType: 'json'
-    });
+    rp.post('/examples', { title: title })
+    .then(function(newExample) {
+      clearAndCloseEditor();
+      $fileSelect.append(makeFileSelectOption(newExample));
+      $fileSelect.val(newExample.slug);
+      notify('success', "Exemple créé !");
+    })
+    .catch(errText => notify('error', 'Erreur: ' + errText));
   }
 
   function clearAndCloseEditor() {
@@ -269,20 +264,13 @@ $(document).ready(function() {
 
   function saveChanges() {
     var payload = editorStorage.getSources();
-
-    $.ajax({
-      type: 'PUT',
-      url: '/examples/' + currentHash,
-      data: JSON.stringify(payload),
-      success: function(newExample) {
-        notify('success', "Exemple sauvegardé !");
-        loadExample(currentHash);
-      },
-      error: function(jqXHR, textStatus, errorThrown ) {
-        notify('error', 'Erreur: ' + jqXHR.responseText);
-      },
-      contentType: 'application/json',
-      dataType: 'json'
+    rp.put('/examples/' + currentHash, payload)
+    .then(function(newExample) {
+      notify('success', "Exemple sauvegardé !");
+      loadExample(currentHash);
+    })
+    .catch(function(err) {
+      notify('error', 'Erreur: ' + jqXHR.responseText);
     });
   }
 

js/req-promise.js

@@ -0,0 +1,59 @@
+(function($) {
+  if(! $) {
+    throw new Error('neither jQuery nor Zepto is loaded');
+  }
+
+  function getAsync(url, dataType) {
+    return new Promise(function(resolve, reject) {
+      $.ajax({
+        type: 'GET',
+        url: url,
+        success: function(data) {
+          resolve(data);
+        },
+        error: function(jqXHR) {
+          reject(new Error(jqXHR.responseText));
+        }
+      }, dataType);
+    });
+  }
+
+  function sendAsync(url, data, options) {
+    if(['POST', 'PUT', 'PATCH'].indexOf(options.type) === -1) {
+      throw new Error('sendAsync must be called with options.type set to POST or PUT');
+    }
+    if(typeof data === 'object') {
+      data = JSON.stringify(data);
+    }
+    return new Promise(function(resolve, reject) {
+      options = _.extend(options, {
+        url: url,
+        data: data,
+        contentType: 'application/json',
+        dataType: 'json',
+        success: function(data) {
+          resolve(data);
+        },
+        error: function(jqXHR) {
+          reject(new Error(jqXHR.responseText));
+        }
+      });
+    console.log(options)
+      $.ajax(options);
+    });
+  }
+
+  function postAsync(url, data, options) {
+    return sendAsync(url, data, _.extend(options, { type: 'POST' }));
+  }
+
+  function putAsync(url, data, options) {
+    return sendAsync(url, data, _.extend(options, { type: 'PUT' }));
+  }
+
+  window.rp = {
+    get: getAsync,
+    post: postAsync,
+    put: putAsync
+  };
+})(jQuery || Zepto);