ipi-jquery/js/ws-editor.js

/* global window,$,ace,setTimeout,rp,_ws */
"use strict";
$(document).ready(function() {
  console.log('ws: init editor');

  var $editorWrapper = $('#editor-wrapper');
  var $editor        = $('#editor');


  var $saveChanges   = $('#save-changes');

  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 editor;
  var editorSession;
  var editorStorage = new LocalStorageDraft();
  // var saveTimeout1;
  // var saveTimeout2;
  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.show();
    $detailsExmp.hide();

  });



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


  function setDefaultEditorContent() {
    if(_ws.files.length > 0) {
      editorSession.setMode("ace/mode/html");
      var firstHtml = _ws.files.find(f => (f.type === 'html'));
      editorSession.setValue(firstHtml.content);
    }
  }


  function initEditor() {
    editor = ace.edit("editor");
    editorSession = editor.getSession();
    editor.setTheme("ace/theme/eclipse");
    editor.$blockScrolling = Infinity;
    editorSession.setUseWrapMode(true);
    setDefaultEditorContent();
  }


  function onTabClicked(e) {
    var clickedItem = $(e.target);
    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);
  }


  initEditor();


  _ws.makeView('tabs', {
    events: {
      'click li[data-type]': onTabClicked
    }
  })

  _ws.makeView('editor', {
    render: function() {
      console.log('render editor', this);
      setDefaultEditorContent();
      $editorWrapper.show();
      this.$elem.removeClass('hidden');
    }
  });

  _ws.makeView('sandbox-iframe', {
    render: function(src) {
      // console.log('change iframe src', '/examples/' + navState.repo + '/' + navState.example);
      this.$elem.prop('src', src);
    }
  });


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

  // }




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

  // $fileSelect.change(function() {
  //   loadExample($(this).val());
  // });
  // $saveChanges.click(saveChanges);
  // $revertEditor.click(revertEditor);
  // $.get('/menu', menu => $('#site-menu').html(menu), 'html');
  // loadExampleList();

});




  // var $editorJs      = $('#editor-javascript');
  // var $editorHtml    = $('#editor-html');
  // var $editorCss     = $('#editor-css');
  // var $htmlContent   = $('#html-content');  // replaced by iframe
  // var $selectorNav   = $('#selector');


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