ipi-jquery/js/editor.js

$(document).ready(function() {
  var $editor        = $('#editor');
  var $editorJs      = $('#editor-javascript');
  var $editorHtml    = $('#editor-html');
  var $htmlContent   = $('#html-content');
  var $selectorNav   = $('#selector');
  var $fileSelect    = $('#file-select');
  var $addExampleBtn = $('#add-example-btn');
  var $exampleForm   = $('#add-example-form');
  var $exampleSave   = $('#add-example-save');
  var $exampleCancel = $('#add-example-cancel');
  var $saveChanges   = $('#save-changes');
  var $notification  = $('#notification');
  var activeMode     = 'html';
  var currentHash; 
  var editor;
  var editorStorage = new LocalStorageDraft();
  var saveTimeout;


  editor = ace.edit("editor");
  editor.setTheme("ace/theme/eclipse");
  editor.$blockScrolling = Infinity;
  editor.getSession().setUseWrapMode(true);

  function setCurrentHash(slug) {
    if(slug) {
      // console.log('save current hash', slug);
      window.location.hash = currentHash = slug;
    }
    else {
      currentHash = window.location.hash ?
          window.location.hash.substr(1) : undefined;
      // if(currentHash) console.log('restored current hash', currentHash);
    }
  }

  function setEditorMode(mode) {
    editor.getSession().setMode("ace/mode/" + mode);
  }

  function saveToLocalStorage() {
    var editorContent =  editor.getSession().getValue();
    // console.log('saveToLocalStorage', activeMode, editorContent.substr(0, 10) + '[...]');
    editorStorage.saveSource(activeMode, editorContent);
    saveTimeout = undefined;
  }

  function editorContentChanged() {
    if(saveTimeout) {
      clearTimeout(saveTimeout);
    }
    saveTimeout = setTimeout(saveToLocalStorage, 1000);
  }

  editor.getSession().on('change', editorContentChanged);

  function setActiveTab(mode) {
    // console.log('setting mode', mode);
    var elementId = 'show-' + mode;
    $('#show-' + activeMode).removeClass('active');
    activeMode = mode;
    $('#' + elementId).addClass('active');
    var ed = $('#editor-' + mode);
    setEditorMode(mode);
    editor.getSession().setValue(ed[0].innerHTML);
  }

  $('#tabs button').click(function() {
    var mode = $(this).prop('id').substr(5);
    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) {
    var serverPath = 'exemples/' + exampleSlug + '/';
    // $.get(serverPath + 'script.js', function(javascript) {
    //   $editorJs.html(javascript);
    // }, 'text');
    // $.get(serverPath + '/contenu.html', function(html) {
    //   $editorHtml.html(html);
    //   $htmlContent.html(html);
    //   setActiveTab('html');
    //   setCurrentHash(exampleSlug);
    //   loadJS(serverPath + 'script.js');
    // }, 'text');
    loadAsync(serverPath + 'script.js', 'text')
    .then(javascript => $editorJs.html(javascript))
    .then(() => loadAsync(serverPath + '/contenu.html', 'text'))
    .then(html => {
      $editorHtml.html(html);
      $htmlContent.html(html);
      setActiveTab('html');
      setCurrentHash(exampleSlug);
      var sources = {
        html: $editorHtml.html(),
        javascript: $editorJs.html()
      };
      editorStorage.init(exampleSlug, sources);
      loadJS(serverPath + 'script.js');
    });

  }

  function addFileSelectItem(item) {
    $fileSelect.append(
      '<option value="' + item.slug + '">' +
        item.title +
      '</option>'
    );
  }

  function loadExampleList() {
    $.get('exemples/liste.json', function(liste) {
      var didRestore;
      liste.forEach(addFileSelectItem);
      if(currentHash) {
        // console.log('I have current hash', currentHash);
        $fileSelect.val(currentHash);
        var item = _.find(liste, { slug: currentHash });
        if( ! item) {
          return;
        }
        // console.log('I have current item', item);
        restoredDraft = editorStorage.restore(item.slug);
        if(! restoredDraft) {
          // console.log('I did not restore');
          loadExample(item.slug);
        }
        else {
          // console.log('I did restore', restoredDraft);
          $editorHtml.html(restoredDraft.sources.html);
          $htmlContent.html(restoredDraft.sources.html);
          $editorJs.html(restoredDraft.sources.javascript);
          setActiveTab('html');
        }
      }

    }, 'json');
  }

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

  // function ajaxPost(url, data, success, error) {}

  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);
        notify('success', "Exemple créé !");
      },
      error: function(jqXHR, textStatus, errorThrown ) {
        // console.log(jqXHR, textStatus, errorThrown);
        notify('error', 'Erreur: ' + jqXHR.responseText);
      },
      contentType: 'application/json',
      dataType: 'json'
    });
  }

  function clearAndCloseEditor() {
    $exampleForm.find('input').val('');
    toggleEditor();
  }

  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 ) {
        // console.log(jqXHR, textStatus, errorThrown);
        notify('error', 'Erreur: ' + jqXHR.responseText);
      },
      contentType: 'application/json',
      dataType: 'json'
    });
  }

  setCurrentHash();

  $fileSelect.change(function() {
    loadExample($(this).val());
  });
  $addExampleBtn.click(toggleEditor);
  $exampleCancel.click(clearAndCloseEditor);
  $saveChanges.click(saveChanges);
  $exampleForm.submit(saveExample);
  loadExampleList();
  // setActiveTab('html');
});