Added cheap lazy templates + logic to switch between setting controllers

cheap-partials.js

@@ -4,4 +4,13 @@ window._ctl = function (event) {
   div.innerHTML = iframe.contentWindow.document.body.innerHTML;
   if (div.children.length == 1) div = div.children[0];
   iframe.parentNode.replaceChild(div, iframe);
+};
+// cheap template prepare
+window._ctp = function (event) {
+  var iframe=event.target || event.srcElement, script=document.createElement("script");
+  script.setAttribute("type", "text/html");
+  script.setAttribute("id", iframe.getAttribute("src"));
+  script.innerHTML = iframe.contentWindow.document.body.innerHTML;
+  iframe.parentNode.removeChild(iframe);
+  document.body.appendChild(script);
 };

index.html

@@ -24,8 +24,14 @@
 
     <div id="application-action-section" class="sticky-section right-sticky-section">
       <div class="sticky-section-wrap">
-        <iframe src="templates/options.html" class="_ctl" onload="_ctl(event)"></iframe>
+        <iframe src="templates/settings.html" class="_ctl" onload="_ctl(event)"></iframe>
-        <iframe src="templates/user-settings-drawer.html" class="cheap-template" onload="_ctl(event)"></iframe>
+        <div class="drawer vertical-centerer">
+          <div class="drawer-content" id="drawer-container">
+            <!-- these templates are only preloaded in script tags for reusing in JS later -->
+            <iframe src="templates/settings-application.html" onload="_ctp(event)"></iframe>
+            <iframe src="templates/settings-export-gif.html" onload="_ctp(event)"></iframe>
+          </div>
+        </div>
       </div>
     </div>
 

js/controller/SettingsController.js

@@ -1,45 +1,69 @@
 (function () {
   var ns = $.namespace("pskl.controller");
   
-  ns.SettingsController = function () {};
+  var settings = {
+    user : {
+      template : 'templates/settings-application.html',
+      controller : ns.settings.ApplicationSettingsController
+    },
+    gif : {
+      template : 'templates/settings-export-gif.html',
+      controller : ns.settings.GifExportController
+    }
+  };
+
+  var SEL_SETTING_CLS = 'has-expanded-drawer';
+  var EXP_DRAWER_CLS = 'expanded';
+
+  ns.SettingsController = function () {
+    this.drawerContainer = document.getElementById("drawer-container");
+    this.settingsContainer = $('.right-sticky-section');
+    this.expanded = false;
+    this.currentSetting = null;
+  };
 
   /**
    * @public
    */
   ns.SettingsController.prototype.init = function() {
-
-    // Highlight selected background picker:
-    var backgroundClass = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);
-    $('#background-picker-wrapper')
-      .find('.background-picker[data-background-class=' + backgroundClass + ']')
-      .addClass('selected');
-
-    // Initial state for grid display:
-    var show_grid = pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID);
-    $('#show-grid').prop('checked', show_grid);
-
     // Expand drawer when clicking 'Settings' tab.
-    $('#settings').click(function(evt) {
+    $('[data-setting]').click(function(evt) {
-      $('.right-sticky-section').toggleClass('expanded');
+      var el = event.currentTarget;
-      $('#settings').toggleClass('has-expanded-drawer');
+      var setting = el.dataset.setting;
-    });
+      if (this.currentSetting != setting) {
-
+        this.loadSetting(setting);
-    // Handle grid display changes:
+      } else {
-    $('#show-grid').change($.proxy(function(evt) {
+        this.closeDrawer();
-      var checked = $('#show-grid').prop('checked');
-      pskl.UserSettings.set(pskl.UserSettings.SHOW_GRID, checked);
-    }, this));
-
-    // Handle canvas background changes:
-    $('#background-picker-wrapper').click(function(evt) {
-      var target = $(evt.target).closest('.background-picker');
-      if (target.length) {
-        var backgroundClass = target.data('background-class');
-        pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, backgroundClass);
-
-        $('.background-picker').removeClass('selected');
-        target.addClass('selected');
       }
-    });
+    }.bind(this));
   };
+
+  ns.SettingsController.prototype.loadSetting = function (setting) {
+    this.drawerContainer.innerHTML = this.getTemplate_(settings[setting].template);
+    (new settings[setting].controller()).init();
+    
+    this.settingsContainer.addClass(EXP_DRAWER_CLS);
+    
+    $('.' + SEL_SETTING_CLS).removeClass(SEL_SETTING_CLS);
+    $('[data-setting='+setting+']').addClass(SEL_SETTING_CLS);
+
+    this.currentSetting = setting;
+  };
+
+  ns.SettingsController.prototype.closeDrawer = function () {
+    this.settingsContainer.removeClass(EXP_DRAWER_CLS);
+    $('.' + SEL_SETTING_CLS).removeClass(SEL_SETTING_CLS);
+
+    this.currentSetting = null;
+  };
+
+  ns.SettingsController.prototype.getTemplate_ = function (templateId) {
+    var template = document.getElementById(templateId);
+    if (template) {
+      return template.innerHTML;
+    } else {
+      console.error("Could not find template for id :", templateId);
+    }
+  };
+  
 })();

js/controller/settings/ApplicationSettingsController.js

@@ -0,0 +1,38 @@
+(function () {
+  var ns = $.namespace("pskl.controller.settings");
+  
+  ns.ApplicationSettingsController = function () {};
+
+  /**
+   * @public
+   */
+  ns.ApplicationSettingsController.prototype.init = function() {
+    // Highlight selected background picker:
+    var backgroundClass = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);
+    $('#background-picker-wrapper')
+      .find('.background-picker[data-background-class=' + backgroundClass + ']')
+      .addClass('selected');
+
+    // Initial state for grid display:
+    var show_grid = pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID);
+    $('#show-grid').prop('checked', show_grid);
+
+    // Handle grid display changes:
+    $('#show-grid').change($.proxy(function(evt) {
+      var checked = $('#show-grid').prop('checked');
+      pskl.UserSettings.set(pskl.UserSettings.SHOW_GRID, checked);
+    }, this));
+
+    // Handle canvas background changes:
+    $('#background-picker-wrapper').click(function(evt) {
+      var target = $(evt.target).closest('.background-picker');
+      if (target.length) {
+        var backgroundClass = target.data('background-class');
+        pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, backgroundClass);
+
+        $('.background-picker').removeClass('selected');
+        target.addClass('selected');
+      }
+    });
+  };
+})();

js/controller/settings/GifExportController.js

@@ -0,0 +1,8 @@
+(function () {
+  var ns = $.namespace("pskl.controller.settings");
+  ns.GifExportController = function () {
+
+  };
+
+  ns.GifExportController.prototype.init = function () {};
+})();

package.json

@@ -1,5 +1,5 @@
 {
-  "author": "People",
+  "author": "Julian Descottes, Vincent Renaudin",
   "name": "piskel",
   "description": "Web based 2d animations editor",
   "version": "0.0.1",

piskel-script-list.js

@@ -41,6 +41,8 @@ exports.scripts = [
   "js/controller/ToolController.js",
   "js/controller/PaletteController.js",
   "js/controller/NotificationController.js",
+  "js/controller/settings/ApplicationSettingsController.js",
+  "js/controller/settings/GifExportController.js",
   "js/controller/SettingsController.js",
 
   // Services

templates/options.html

@@ -1,11 +0,0 @@
-<div class="vertical-centerer">
-  <div id="settings" class="tool-icon gear-icon" title="Preferences" rel="tooltip" data-placement="left"></div>
-  <a class="tool-icon gallery-icon" title="Visit gallery" href="http://juliandescottes.github.io/piskel-website/" rel="tooltip" data-placement="left" target="_blank"></a>
-  <div class="tool-icon save-icon" title="Save to gallery" onclick="pskl.app.storeSheet()" rel="tooltip" data-placement="left" ></div>
-  <div class="tool-icon upload-cloud-icon" title="Upload as an animated GIF" onclick="pskl.app.uploadAsAnimatedGIF()" rel="tooltip" data-placement="left">
-    <span class="label">GIF</span>
-  </div>
-  <div class="tool-icon upload-cloud-icon" title="Upload as a spritesheet PNG" onclick="pskl.app.uploadAsSpritesheetPNG()" rel="tooltip" data-placement="left">
-    <span class="label">PNG</span>
-  </div>
-</div>

templates/settings-application.html

@@ -0,0 +1,26 @@
+<div class="settings-section">
+  <div class="settings-title">
+    Canvas settings:
+  </div>
+  <div class="settings-item">
+    <label>Background:</label>
+    <div id="background-picker-wrapper" class="background-picker-wrapper">
+      <div class="background-picker light-picker-background" data-background-class="light-canvas-background"
+            rel="tooltip" data-placement="bottom" title="light / high contrast">
+      </div>
+      <div class="background-picker medium-picker-background" data-background-class="medium-canvas-background"
+            rel="tooltip" data-placement="bottom" title="medium / high contrast">
+      </div>
+      <div class="background-picker lowcont-medium-picker-background" data-background-class="lowcont-medium-canvas-background"
+            rel="tooltip" data-placement="bottom" title="medium / low contrast">
+      </div>
+      <div class="background-picker lowcont-dark-picker-background" data-background-class="lowcont-dark-canvas-background"
+            rel="tooltip" data-placement="bottom" title="dark / low contrast">
+      </div>
+    </div>
+  </div>
+  <div class="settings-item">
+    <label for="show-grid">Show grid:</label> <input id="show-grid" type="checkbox"/>
+  </div>
+</div>
+

templates/settings-export-gif.html

@@ -0,0 +1 @@
+LOLOLOLOL

templates/settings.html

@@ -0,0 +1,35 @@
+<div class="vertical-centerer">
+  <div 
+  	data-setting="user" 
+  	class="tool-icon gear-icon" 
+  	title="Preferences" 
+  	rel="tooltip" data-placement="left"></div>
+  
+  <a 
+  	class="tool-icon gallery-icon" 
+  	title="Visit gallery" 
+  	href="http://juliandescottes.github.io/piskel-website/" 
+  	rel="tooltip" data-placement="left" target="_blank"></a>
+  
+  <div 
+  	class="tool-icon save-icon" 
+  	title="Save to gallery" 
+  	onclick="pskl.app.storeSheet()" 
+  	rel="tooltip" data-placement="left" ></div>
+  
+  <div 
+  	data-setting="gif"
+  	class="tool-icon upload-cloud-icon" 
+  	title="Upload as an animated GIF" 
+  	rel="tooltip" data-placement="left">
+    <span class="label">GIF</span>
+  </div>
+  
+  <div 
+  	class="tool-icon upload-cloud-icon" 
+  	title="Upload as a spritesheet PNG" 
+  	onclick="pskl.app.uploadAsSpritesheetPNG()" 
+  	rel="tooltip" data-placement="left">
+    <span class="label">PNG</span>
+  </div>
+</div>

templates/user-settings-drawer.html

@@ -1,30 +0,0 @@
-<div class="drawer vertical-centerer">
-  <div class="drawer-content">
-    <div class="settings-section">
-      <div class="settings-title">
-        Canvas settings:
-      </div>
-      <div class="settings-item">
-        <label>Background:</label>
-        <div id="background-picker-wrapper" class="background-picker-wrapper">
-          <div class="background-picker light-picker-background" data-background-class="light-canvas-background"
-                rel="tooltip" data-placement="bottom" title="light / high contrast">
-          </div>
-          <div class="background-picker medium-picker-background" data-background-class="medium-canvas-background"
-                rel="tooltip" data-placement="bottom" title="medium / high contrast">
-          </div>
-          <div class="background-picker lowcont-medium-picker-background" data-background-class="lowcont-medium-canvas-background"
-                rel="tooltip" data-placement="bottom" title="medium / low contrast">
-          </div>
-          <div class="background-picker lowcont-dark-picker-background" data-background-class="lowcont-dark-canvas-background"
-                rel="tooltip" data-placement="bottom" title="dark / low contrast">
-          </div>
-        </div>
-      </div>
-      <div class="settings-item">
-        <label for="show-grid">Show grid:</label> <input id="show-grid" type="checkbox"/>
-      </div>
-    </div>
-  </div>
-</div>
-