Merge branch 'master' into fix-palette-bugs

src/css/settings-application.css

@@ -0,0 +1,3 @@
+.tiled-preview-checkbox {
+  vertical-align: -2px;
+}

src/js/controller/AnimatedPreviewController.js

@@ -27,6 +27,7 @@
     // the oninput event won't work on IE10 unfortunately, but at least will provide a
     // consistent behavior across all other browsers that support the input type range
     // see https://bugzilla.mozilla.org/show_bug.cgi?id=853670
+
     this.fpsRangeInput.on('input change', this.onFPSSliderChange.bind(this));
     document.querySelector('.right-column').style.width = Constants.ANIMATED_PREVIEW_WIDTH + 'px';
 
@@ -43,12 +44,15 @@
 
     this.updateZoom_();
     this.updateOnionSkinPreview_();
+    this.updateMaxFPS_();
     this.updateContainerDimensions_();
   };
 
   ns.AnimatedPreviewController.prototype.onUserSettingsChange_ = function (evt, name, value) {
     if (name == pskl.UserSettings.ONION_SKIN) {
       this.updateOnionSkinPreview_();
+    } else if (name == pskl.UserSettings.MAX_FPS) {
+      this.updateMaxFPS_();
     } else {
       this.updateZoom_();
       this.updateContainerDimensions_();
@@ -64,6 +68,12 @@
     }
   };
 
+  ns.AnimatedPreviewController.prototype.updateMaxFPS_ = function () {
+    var maxFps = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
+    this.fpsRangeInput.get(0).setAttribute('max', maxFps);
+    this.setFPS(Math.min(this.fps, maxFps));
+  };
+
   ns.AnimatedPreviewController.prototype.updateZoom_ = function () {
     var isTiled = pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);
     var zoom = isTiled ? 1 : this.calculateZoom_();
@@ -93,7 +103,10 @@
   ns.AnimatedPreviewController.prototype.setFPS = function (fps) {
     if (typeof fps === 'number') {
       this.fps = fps;
-      this.fpsRangeInput.val(this.fps);
+      // reset
+      this.fpsRangeInput.get(0).value = 0;
+      // set proper value
+      this.fpsRangeInput.get(0).value = this.fps;
       this.fpsRangeInput.blur();
       this.fpsCounterDisplay.html(this.fps + ' FPS');
     }

src/js/controller/settings/ApplicationSettingsController.js

@@ -3,38 +3,75 @@
 
   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');
+    this.backgroundContainer = document.querySelector('.background-picker-wrapper');
+    pskl.utils.Event.addEventListener(this.backgroundContainer, 'click', this.onBackgroundClick_, this);
+
+    // Highlight selected background :
+    var background = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);
+    var selectedBackground = this.backgroundContainer.querySelector('[data-background=' + background + ']');
+    if (selectedBackground) {
+      selectedBackground.classList.add('selected');
+    }
 
     // Grid display and size
     var gridWidth = pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH);
-    $('#grid-width').val(gridWidth);
-    $('#grid-width').change(this.onGridWidthChange.bind(this));
+    var gridSelect = document.querySelector('.grid-width-select');
+    var selectedOption = gridSelect.querySelector('option[value="'+gridWidth+'"]');
+    if (selectedOption) {
+      selectedOption.setAttribute('selected', 'selected');
+    }
 
-    // Handle canvas background changes:
-    $('#background-picker-wrapper').click(this.onBackgroundClick.bind(this));
+    pskl.utils.Event.addEventListener(gridSelect, 'change', this.onGridWidthChange_, this);
+
+    // Tiled preview
+    var tiledPreview = pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);
+    var tiledPreviewCheckbox = document.querySelector('.tiled-preview-checkbox');
+    if (tiledPreview) {
+      tiledPreviewCheckbox.setAttribute('checked', true);
+    }
+    pskl.utils.Event.addEventListener(tiledPreviewCheckbox, 'change', this.onTiledPreviewChange_, this);
+
+    // Max FPS 
+    var maxFpsInput = document.querySelector('.max-fps-input');
+    maxFpsInput.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
+    pskl.utils.Event.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_, this);
   };
 
-  ns.ApplicationSettingsController.prototype.onGridWidthChange = function (evt) {
-    var width = $('#grid-width').val();
-    pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, parseInt(width, 10));
+  ns.ApplicationSettingsController.prototype.destroy = function () {
+    pskl.utils.Event.removeAllEventListeners(this);
+    this.backgroundContainer = null;
   };
 
-  ns.ApplicationSettingsController.prototype.onBackgroundClick = 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);
+  ns.ApplicationSettingsController.prototype.onGridWidthChange_ = function (evt) {
+    var width = parseInt(evt.target.value, 10);
+    pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, width);
+  };
 
-      $('.background-picker').removeClass('selected');
-      target.addClass('selected');
+  ns.ApplicationSettingsController.prototype.onTiledPreviewChange_ = function (evt) {
+    pskl.UserSettings.set(pskl.UserSettings.TILED_PREVIEW, evt.currentTarget.checked);
+  };
+
+  ns.ApplicationSettingsController.prototype.onBackgroundClick_ = function (evt) {
+    var target = evt.target;
+    var background = target.dataset.background;
+    if (background) {
+      pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, background);
+      var selected = this.backgroundContainer.querySelector('.selected');
+      if (selected) {
+        selected.classList.remove('selected');
+      }
+      target.classList.add('selected');
+    }
+  };
+
+  ns.ApplicationSettingsController.prototype.onMaxFpsChange_ = function (evt) {
+    var target = evt.target;
+    var fps = parseInt(target.value, 10);
+    if (fps && !isNaN(fps)) {
+      pskl.UserSettings.set(pskl.UserSettings.MAX_FPS, fps);
+    } else {
+      target.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
     }
   };
 

src/js/controller/settings/SettingsController.js

@@ -73,8 +73,15 @@
   };
 
   ns.SettingsController.prototype.loadSetting = function (setting) {
+    if (this.currentController && this.currentController.destroy) {
+      this.currentController.destroy();
+    }
+
     this.drawerContainer.innerHTML = pskl.utils.Template.get(settings[setting].template);
-    (new settings[setting].controller(this.piskelController)).init();
+    
+    this.currentSetting = setting;
+    this.currentController = new settings[setting].controller(this.piskelController);
+    this.currentController.init();
 
     this.settingsContainer.addClass(EXP_DRAWER_CLS);
 
@@ -82,7 +89,6 @@
     $('[data-setting='+setting+']').addClass(SEL_SETTING_CLS);
 
     this.isExpanded = true;
-    this.currentSetting = setting;
   };
 
   ns.SettingsController.prototype.closeDrawer = function () {

src/js/utils/Event.js

@@ -0,0 +1,42 @@
+(function () {
+  var ns = $.namespace('pskl.utils');
+
+  ns.Event = {};
+
+  ns.Event.addEventListener = function (el, type, callback, scope, args) {
+    var listener = {
+      el : el,
+      type : type,
+      callback : callback,
+      handler : args ? callback.bind(scope, args) : callback.bind(scope)
+    };
+
+    scope.__pskl_listeners = scope.__pskl_listeners || [];
+    scope.__pskl_listeners.push(listener);
+    el.addEventListener(type, listener.handler);
+  };
+
+  ns.Event.removeEventListener = function (el, type, callback, scope) {
+    if (scope && scope.__pskl_listeners) {
+      var listeners = scope.__pskl_listeners;
+      for (var i = 0 ; i < listeners.length ; i++) {
+        if (listeners[i].callback === callback) {
+          el.removeEventListener(type, listeners[i].handler);
+          listeners.slice(i, 1);
+          break;
+        }
+      }
+    }
+  };
+
+  ns.Event.removeAllEventListeners = function (scope) {
+    if (scope && scope.__pskl_listeners) {
+      var listeners = scope.__pskl_listeners;
+      for (var i = 0 ; i < listeners.length ; i++) {
+        var listener = listeners[i];
+        listener.el.removeEventListener(listener.type, listener.handler);
+      }
+      scope.__pskl_listeners = [];
+    }
+  };
+})();

src/js/utils/UserSettings.js

@@ -3,6 +3,7 @@
 
   ns.UserSettings = {
     GRID_WIDTH : 'GRID_WIDTH',
+    MAX_FPS : 'MAX_FPS',
     CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
     SELECTED_PALETTE : 'SELECTED_PALETTE',
     TILED_PREVIEW : 'TILED_PREVIEW',
@@ -11,6 +12,7 @@
 
     KEY_TO_DEFAULT_VALUE_MAP_ : {
       'GRID_WIDTH' : 0,
+      'MAX_FPS' : 24,
       'CANVAS_BACKGROUND' : 'lowcont-dark-canvas-background',
       'SELECTED_PALETTE' : Constants.CURRENT_COLORS_PALETTE_ID,
       'TILED_PREVIEW' : false,

src/piskel-script-list.js

@@ -17,6 +17,7 @@
   "js/utils/CanvasUtils.js",
   "js/utils/DateUtils.js",
   "js/utils/Dom.js",
+  "js/utils/Event.js",
   "js/utils/Math.js",
   "js/utils/FileUtils.js",
   "js/utils/FrameTransform.js",

src/templates/settings/application.html

@@ -1,38 +1,51 @@
 <div class="settings-section">
   <div class="settings-title">
-    Preferences:
+    General
   </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"
+    <div class="background-picker-wrapper">
+      <div class="background-picker light-picker-background" data-background="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"
+      <div class="background-picker medium-picker-background" data-background="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"
+      <div class="background-picker lowcont-medium-picker-background" data-background="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"
+      <div class="background-picker lowcont-dark-picker-background" data-background="lowcont-dark-canvas-background"
             rel="tooltip" data-placement="bottom" title="dark / low contrast">
       </div>
     </div>
   </div>
   <div class="settings-item">
     <label for="grid-width">Grid :</label>
-    <select id="grid-width">
+    <select id="grid-width" class="grid-width-select">
       <option value="0">Disabled</option>
-      <option value="1">Enabled - 1px wide</option>
-      <option value="2">Enabled - 2px wide</option>
-      <option value="3">Enabled - 3px wide</option>
-      <option value="4">Enabled - 4px wide</option>
+      <option value="1">1px</option>
+      <option value="2">2px</option>
+      <option value="3">3px</option>
+      <option value="4">4px</option>
     </select>
   </div>
-
-  <!-- <div class="settings-item">
-    <label for="tiled-preview">Display tiled preview :</label>
-    <input type="checkbox" value="1" id="tiled-preview" name="tiled-preview-checkbox"/>
-  </div> -->
+</div>
+
+<div class="settings-section">
+  <div class="settings-title">
+    Preview
+  </div>
+
+  <div class="settings-item">
+    <label>
+      <input type="checkbox" value="1" class="tiled-preview-checkbox" name="tiled-preview-checkbox"/>
+      Display tiled preview
+    </label>
+  </div>
+
+  <div class="settings-item">
+    <label for="tiled-preview">Max FPS :</label>
+        <input type="text" class="textfield max-fps-input" name="max-fps"/>
+  </div>
 </div>