detect editor content changed to set dirty attribute on tab item

css/styles.css

@@ -443,6 +443,16 @@ input {
 .bold {
   font-weight: bold;
 }
+.dirty {
+  color: #339;
+}
+#tabs .icon-cloud-upload {
+  display: none;
+}
+#tabs .dirty .icon-cloud-upload {
+  display: inline;
+  color: #33c;
+}
 .details-div .btn-form {
   margin: 8px 0 10px 20px;
 }

html/index.mustache.html

@@ -106,7 +106,7 @@
         
         <div id="editor-wrapper"{{^showEditor}} style="display: none";{{/showEditor}}>
             <ul id="tabs">{{#files}}
-                <li class="tab-{{type}}" data-type="{{type}}">{{name}}</li>
+                <li class="tab-{{type}}" data-type="{{type}}" data-name="{{name}}">{{name}} <span class="icon-cloud-upload"></span></li>
             {{/files}}
             </ul><ul id="add-file">
             <li><button class="add-btn inline-block h-collapsed fast in">+</button>
@@ -157,7 +157,7 @@
 
 <script data-tmpl-for="tabs" id="tabs-tmpl" type="text/x-mustache-tmpl">
 {{#files}}
-    <li class="tab-{{type}}" data-type="{{type}}">{{name}}</li>
+    <li class="tab-{{type}}" data-type="{{type}}" data-name="{{name}}">{{name}} <span class="icon-cloud-upload"></span></li>
 {{/files}}
 </script>
 

js/ws-editor.js

@@ -62,10 +62,7 @@ $(document).ready(function() {
     if(_ws.files.length > 0) {
       editorSession.setMode("ace/mode/html");
       var firstHtml = _ws.files.find(f => (f.type === 'html'));
-      currentFileIdx = _ws.files.indexOf(firstHtml);
-      _ws.ui.tabs.$elem
-      .find('li:eq(' + currentFileIdx + ')')
-      .addClass('bold');
+      _ws.ui.tabs.setActiveTab(firstHtml);
       editorSession.setValue(firstHtml.content);
     }
   }
@@ -82,19 +79,29 @@ $(document).ready(function() {
 
 
   function onTabClicked(e) {
+    var activeTab = _ws.ui.tabs.getActiveTab();
+    if(activeTab.hasClass('dirty')) {
+      var proceed = window.confirm("Vos changements sur " + activeTab.data('name') +
+        " seront perdus si vous changez de fichier. Continuer tout de même ?");
+      if(! proceed) {
+        return;
+      }
+      activeTab.removeClass('dirty');
+    }
     var clickedItem = $(e.target);
     var type = clickedItem.data('type');
     editorSession.setMode("ace/mode/" + mapTypes[type]);
-    var name = clickedItem.html();
+    var name = clickedItem.data('name');
     var file = _ws.files.find(f => (f.name === name));
-    _ws.ui.tabs.$elem
-    .find('li:eq(' + currentFileIdx + ')')
-    .removeClass('bold');
-    currentFileIdx = _ws.files.indexOf(file);
-    _ws.ui.tabs.$elem
-    .find('li:eq(' + currentFileIdx + ')')
-    .addClass('bold');
+    console.log('activate', name, file);
+    _ws.ui.tabs.setActiveTab(file);
+
+    console.log('remove change handler', _ws.ui.editor.contentChanged)
+    editor.getSession().off('change', _ws.ui.editor.contentChanged);
     editorSession.setValue(file.content);
+    editor.getSession().on('change', _ws.ui.editor.contentChanged);
+
+
     // saveToLocalStorage();
     // var mode = $(this).prop('id').substr(5);
     // console.log( .html() );
@@ -103,11 +110,18 @@ $(document).ready(function() {
 
 
   _ws.makeView('tabs', {
-    setCurrentFile: function(name) {
-
+    setActiveTab: function(file) {
+      var file = _ws.files.find(f => (f.name === file.name));
+      if(this.activeTab) {
+        this.activeTab.removeClass('bold');
+      }
+      console.log('set active tab', idx, file);
+      var idx = this.fileIdx = _ws.files.indexOf(file);
+      this.activeTab = this.$elem.find('li:eq(' + idx + ')');
+      this.activeTab.addClass('bold');
     },
-    getCurrentTab: function() {
-
+    getActiveTab: function() {
+      return this.activeTab;
     },
     events: {
       'click li[data-type]': onTabClicked
@@ -122,14 +136,16 @@ $(document).ready(function() {
     aceSession: editor.getSession(),
 
     init: function() {
-      this.aceSession.on('change', this.editorContentChanged);
+      this.aceSession.on('change', this.contentChanged);
     },
 
     /**
      * React to changes in editor by saving a copy
      */
-    editorContentChanged: function() {
-      console.log('editorContent changed')
+    contentChanged: function() {
+      console.log('content changed handler');
+      _ws.ui.tabs.getActiveTab()
+      .addClass('dirty');
       // if(saveTimeout1 || saveTimeout2) {
       //   clearTimeout(saveTimeout1);
       //   clearTimeout(saveTimeout2);