ipi-jquery/js/editor.js

"use strict";
$(document).ready(function() {

  var $editorWrapper = $('#editor-wrapper');
  var $editor        = $('#editor');
  // var $editorJs      = $('#editor-javascript');
  // var $editorHtml    = $('#editor-html');
  // var $editorCss     = $('#editor-css');

  // var $htmlContent   = $('#html-content');  // replaced by iframe


  // var $selectorNav   = $('#selector');
  // var $fileSelect    = $('#file-select');

  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');
  // var $panelWrap     = $('.panel-container');
  var $tabItems      = $('#tabs li');
  var $detailsRepo   = $('#details-repo');
  var $detailsExmp   = $('#details-example');

  var $window        = $(window);
  var activeMode     = 'html';

  // var currentHash; 
  var editor;
  var editorSession;
  var editorStorage = new LocalStorageDraft();
  // var saveTimeout1;
  // var saveTimeout2;
  // var exampleList;
  var mapTypes = {
    html: 'html', js: 'javascript', css: 'css'
  }

  console.log('log events from editor', _ws);
  _ws.events.on('navToRoot', function() {
    $editorWrapper.hide();
    $detailsRepo.hide();
    $detailsExmp.hide();
  });

  _ws.events.on('navToRepo', function(repoSlug) {
    console.log('got navToRepo', repoSlug);
    $editorWrapper.hide();
    $detailsRepo.hide();
    $detailsExmp.hide();

  });

  // _ws.events.on('rendered:tabs', function() {
  //   console.log('rebind editor tabs');
  //   $tabItems = $('#tabs li');
  //   bindEditorTabs();
  // });

  if(_ws.files.length === 0) {
    return;
  }


  // /**
  //  * Make the left panel resizable
  //  */
  // $panelLeft.resizable({
  //   handleSelector: ".splitter",
  //   resizeHeight: false,
  //   onDrag: function(e) {
  //     $editor.width($panelLeft.width());
  //   }
  // });


  // /**
  //  * Handle window resize
  //  */
  // function onResize() {
  //   $editor.width($panelLeft.width());
  //   $panelWrap.height($window.height());
  // }
  // $window.resize(onResize);
  // onResize();

  function initEditor() {
    editor = ace.edit("editor");
    editorSession = editor.getSession();
    editor.setTheme("ace/theme/eclipse");
    editor.$blockScrolling = Infinity;
    editorSession.setUseWrapMode(true);
    if(_ws.files) {
      editorSession.setMode("ace/mode/html");
      var firstHtml = _ws.files.find(f => (f.type === 'html'));
      editorSession.setValue(firstHtml.content);
    }
  }


  function onTabClicked() {
    var clickedItem = $(this);
    console.log('clicked', this);
    var type = clickedItem.data('type');
    editorSession.setMode("ace/mode/" + mapTypes[type]);
    var name = clickedItem.html();
    var file = _ws.files.find(f => (f.name === name));
    editorSession.setValue(file.content);
    // saveToLocalStorage();
    // var mode = $(this).prop('id').substr(5);
    // console.log( .html() );
    // setActiveTab(mode);
  }

  _ws.makeView('tabs', {
    events: {
      'click li': onTabClicked
    }
  })

  /**
   * File list tabs click handler
   */
  // function bindEditorTabs() {
  //   $tabItems.click(onTabClicked);
  // }

  // bindEditorTabs();


  // /**
  //  * Set the current hash. If none given, take it from lococation.hash
  //  */
  // function setCurrentHash(slug) {
  //   if(slug) {
  //     window.location.hash = currentHash = slug;
  //   }
  //   else {
  //     currentHash = window.location.hash ?
  //         window.location.hash.substr(1) : undefined;
  //   }
  // }


  // /**
  //  * Set editor mode (html, javascript, css)
  //  */
  // function setEditorMode(mode) {
  //   editor.getSession().setMode("ace/mode/" + mode);
  // }


  // /**
  //  * Save a copy in localStorage
  //  */
  // function saveToLocalStorage() {
  //   var editorContent =  editor.getSession().getValue();
  //   editorStorage.saveSource(activeMode, editorContent);
  //   saveTimeout1 = undefined;
  // }


  // /**
  //  * React to changes in editor by saving a copy
  //  */
  // function editorContentChanged() {
  //   // console.log('editorContent changed')
  //   if(saveTimeout1 || saveTimeout2) {
  //     clearTimeout(saveTimeout1);
  //     clearTimeout(saveTimeout2);
  //   }
  //   saveTimeout1 = setTimeout(saveToLocalStorage, 500);
  //   // saveTimeout2 = setTimeout(saveChanges, 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().off('change');
  //   editor.getSession().setValue(ed[0].innerHTML);
  //   editor.getSession().on('change', editorContentChanged);
  // }


  // function loadExample(exampleSlug) {
  //   // console.log('loadExample', exampleSlug);
  //   var serverPath = 'exemples/jquery/' + exampleSlug + '/';
  //   rp.get(serverPath + 'script.js', 'text')
  //   .then(javascript => $editorJs.html(javascript))
  //   .then(() => rp.get(serverPath + 'example.html', 'text'))
  //   .then(() => rp.get(serverPath + 'styles.css', 'text')
  //     .then(css => $editorCss.html(css))
  //     .catch(err => {
  //       return '';
  //     })
  //   )
  //   .then(html => {
  //     $editorHtml.html(html);
  //     $('iframe.panel-right')
  //     .prop('src', '/examples/' + exampleSlug)
  //     setActiveTab('html');
  //     setCurrentHash(exampleSlug);
  //     var sources = {
  //       html: $editorHtml.html(),
  //       javascript: $editorJs.html()
  //     };
  //     editorStorage.init(exampleSlug, sources);
  //   })
  //   .then(() => {
  //     var item = _.find(exampleList, { slug: exampleSlug });
  //     // console.log(item.test ? 'test' : 'no test');
  //     // loadJS('exemples/' + item.slug + '/test.js', function() {
  //     //   $('#tests').show();
  //     // });
  //   });

  // }


  // /**
  //  * 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() {
  //   rp.get('/list/jquery', 'json')
  //   .then(function(_exampleList) {
  //     exampleList = _exampleList;
  //     var restoredDraft;
  //     resetFileSelect(exampleList);
  //     if(currentHash) {
  //       $fileSelect.val(currentHash);
  //       var item = _.find(exampleList, { slug: currentHash });
  //       if( ! item) {
  //         return;
  //       }
  //       restoredDraft = editorStorage.restore(item.slug);
  //       if(! restoredDraft) {
  //         loadExample(item.slug);
  //       }
  //       else {
  //         console.log('restore', item.slug, restoredDraft.sources);
  //         $editorHtml.html(restoredDraft.sources.html);
  //         $editorCss.html(restoredDraft.sources.css);
  //         $editorJs.html(restoredDraft.sources.javascript);
  //         $('iframe.panel-right')
  //         .prop('src', '/examples/' + item.slug)

  //         // loadJS('exemples/' + item.slug + '/script.js');
  //         // if(item.test) {
  //         //   loadJS('exemples/' + item.slug + '/test.js', function() {
  //         //     $('#tests').show();
  //         //   });
  //         // }
  //         setActiveTab('html');
  //       }
  //     }
  //   });
  // }

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

  // function revertEditor() {
  //   editorStorage.reset();
  //   location.reload();
  // }

  // function saveChanges() {
  //   var payload = editorStorage.getSources();
  //   rp.put('/examples/' + currentHash, payload)
  //   .then(function(newExample) {
  //     notify('success', "Exemple sauvegardé !");
  //     loadExample(currentHash);
  //   })
  //   .catch(function(err) {
  //     notify('error', 'Erreur: ' + jqXHR.responseText);
  //   });
  // }

  // setCurrentHash();

  // $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();

  initEditor();

});