Issue #636 - rename all application-settings things to preferences-se…

…ttings

The name is not ideal, but it's better to have a MiscPreferencesController than a MainApplicationController for this kind of very simple panels.

src/css/settings-application.css

@@ -1,8 +1,8 @@
-/*******************************/
-/*  Application Setting panel  */
-/*******************************/
+/********************************/
+/*  Preferences Settings panel  */
+/********************************/
 
-.settings-section-application {
+.settings-section-preferences {
   height: 100%;
   position: relative;
   overflow: hidden;
@@ -109,12 +109,12 @@
   border-color: gold;
 }
 
-.settings-section-application > .settings-title {
+.settings-section-preferences > .settings-title {
   /* Override the default 10px margin bottom for this panel */
   margin-bottom: 15px;
 }
 
-.settings-section-application .button-primary {
+.settings-section-preferences .button-primary {
   margin-top: 10px;
 }
 

src/index.html

@@ -83,10 +83,10 @@
   @@include('templates/dialogs/unsupported-browser.html', {})
 
   <!-- settings-panel partials -->
-  @@include('templates/settings/application.html', {})
-  @@include('templates/settings/application/grid.html', {})
-  @@include('templates/settings/application/main.html', {})
-  @@include('templates/settings/application/tile.html', {})
+  @@include('templates/settings/preferences.html', {})
+  @@include('templates/settings/preferences/grid.html', {})
+  @@include('templates/settings/preferences/misc.html', {})
+  @@include('templates/settings/preferences/tile.html', {})
   @@include('templates/settings/resize.html', {})
   @@include('templates/settings/save.html', {})
   @@include('templates/settings/import.html', {})

src/js/controller/settings/PreferencesController.js

@@ -0,0 +1,35 @@
+(function () {
+  var ns = $.namespace('pskl.controller.settings');
+
+  var tabs = {
+    'misc' : {
+      template : 'templates/settings/preferences/misc.html',
+      controller : ns.preferences.MiscPreferencesController
+    },
+    'grid' : {
+      template : 'templates/settings/preferences/grid.html',
+      controller : ns.preferences.GridPreferencesController
+    },
+    'tile' : {
+      template : 'templates/settings/preferences/tile.html',
+      controller : ns.preferences.TilePreferencesController
+    }
+  };
+
+  ns.PreferencesController = function () {
+    this.tabsWidget = new pskl.widgets.Tabs(tabs, this, pskl.UserSettings.PREFERENCES_TAB);
+  };
+
+  pskl.utils.inherit(ns.PreferencesController, pskl.controller.settings.AbstractSettingController);
+
+  ns.PreferencesController.prototype.init = function() {
+    var container = document.querySelector('.settings-section-preferences');
+    this.tabsWidget.init(container);
+  };
+
+  ns.PreferencesController.prototype.destroy = function () {
+    this.tabsWidget.destroy();
+    this.superclass.destroy.call(this);
+  };
+
+})();

src/js/controller/settings/SettingsController.js

@@ -3,8 +3,8 @@
 
   var settings = {
     'user' : {
-      template : 'templates/settings/application.html',
-      controller : ns.ApplicationSettingsController
+      template : 'templates/settings/preferences.html',
+      controller : ns.PreferencesController
     },
     'resize' : {
       template : 'templates/settings/resize.html',

src/js/controller/settings/application/GridApplicationController.js → src/js/controller/settings/preferences/GridPreferencesController.js

@@ -1,5 +1,5 @@
 (function () {
-  var ns = $.namespace('pskl.controller.settings.application');
+  var ns = $.namespace('pskl.controller.settings.preferences');
 
   var colorsMap = {
     'transparent': Constants.TRANSPARENT_COLOR,
@@ -18,15 +18,15 @@
     'red': '#FF004D',
   };
 
-  ns.GridApplicationController = function (piskelController, applicationController) {
+  ns.GridPreferencesController = function (piskelController, preferencesController) {
     this.piskelController = piskelController;
-    this.applicationController = applicationController;
+    this.preferencesController = preferencesController;
     this.sizePicker = new pskl.widgets.SizePicker(this.onSizePickerChanged_.bind(this));
   };
 
-  pskl.utils.inherit(ns.GridApplicationController, pskl.controller.settings.AbstractSettingController);
+  pskl.utils.inherit(ns.GridPreferencesController, pskl.controller.settings.AbstractSettingController);
 
-  ns.GridApplicationController.prototype.init = function () {
+  ns.GridPreferencesController.prototype.init = function () {
     // Grid enabled
     var isEnabled = pskl.UserSettings.get(pskl.UserSettings.GRID_ENABLED);
     var enableGridCheckbox = document.querySelector('.enable-grid-checkbox');
@@ -66,20 +66,20 @@
     this.addEventListener(this.gridColorList, 'click', this.onGridColorClicked_.bind(this));
   };
 
-  ns.GridApplicationController.prototype.destroy = function () {
+  ns.GridPreferencesController.prototype.destroy = function () {
     this.sizePicker.destroy();
     this.superclass.destroy.call(this);
   };
 
-  ns.GridApplicationController.prototype.onSizePickerChanged_ = function (size) {
+  ns.GridPreferencesController.prototype.onSizePickerChanged_ = function (size) {
     pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, size);
   };
 
-  ns.GridApplicationController.prototype.onEnableGridChange_ = function (evt) {
+  ns.GridPreferencesController.prototype.onEnableGridChange_ = function (evt) {
     pskl.UserSettings.set(pskl.UserSettings.GRID_ENABLED, evt.currentTarget.checked);
   };
 
-  ns.GridApplicationController.prototype.onGridColorClicked_ = function (evt) {
+  ns.GridPreferencesController.prototype.onGridColorClicked_ = function (evt) {
     var color = evt.target.dataset.color;
     if (color) {
       pskl.UserSettings.set(pskl.UserSettings.GRID_COLOR, color);

src/js/controller/settings/application/MainApplicationController.js → src/js/controller/settings/preferences/MiscPreferencesController.js

@@ -1,14 +1,14 @@
 (function () {
-  var ns = $.namespace('pskl.controller.settings.application');
+  var ns = $.namespace('pskl.controller.settings.preferences');
 
-  ns.MainApplicationController = function (piskelController, applicationController) {
+  ns.MiscPreferencesController = function (piskelController, preferencesController) {
     this.piskelController = piskelController;
-    this.applicationController = applicationController;
+    this.preferencesController = preferencesController;
   };
 
-  pskl.utils.inherit(ns.MainApplicationController, pskl.controller.settings.AbstractSettingController);
+  pskl.utils.inherit(ns.MiscPreferencesController, pskl.controller.settings.AbstractSettingController);
 
-  ns.MainApplicationController.prototype.init = function () {
+  ns.MiscPreferencesController.prototype.init = function () {
 
     this.backgroundContainer = document.querySelector('.background-picker-wrapper');
     this.addEventListener(this.backgroundContainer, 'click', this.onBackgroundClick_);
@@ -42,7 +42,7 @@
     this.updateLayerOpacityText_(layerOpacityInput.value);
   };
 
-  ns.MainApplicationController.prototype.onBackgroundClick_ = function (evt) {
+  ns.MiscPreferencesController.prototype.onBackgroundClick_ = function (evt) {
     var target = evt.target;
     var background = target.dataset.background;
     if (background) {
@@ -55,11 +55,11 @@
     }
   };
 
-  ns.MainApplicationController.prototype.onColorFormatChange_ = function (evt) {
+  ns.MiscPreferencesController.prototype.onColorFormatChange_ = function (evt) {
     pskl.UserSettings.set(pskl.UserSettings.COLOR_FORMAT, evt.target.value);
   };
 
-  ns.MainApplicationController.prototype.onMaxFpsChange_ = function (evt) {
+  ns.MiscPreferencesController.prototype.onMaxFpsChange_ = function (evt) {
     var target = evt.target;
     var fps = parseInt(target.value, 10);
     if (fps && !isNaN(fps)) {
@@ -69,7 +69,7 @@
     }
   };
 
-  ns.MainApplicationController.prototype.onLayerOpacityChange_ = function (evt) {
+  ns.MiscPreferencesController.prototype.onLayerOpacityChange_ = function (evt) {
     var target = evt.target;
     var opacity = parseFloat(target.value);
     if (!isNaN(opacity)) {
@@ -81,7 +81,7 @@
     }
   };
 
-  ns.MainApplicationController.prototype.updateLayerOpacityText_ = function (opacity) {
+  ns.MiscPreferencesController.prototype.updateLayerOpacityText_ = function (opacity) {
     var layerOpacityText = document.querySelector('.layer-opacity-text');
     layerOpacityText.innerHTML = (opacity * 1).toFixed(2);
   };

src/js/controller/settings/application/TileApplicationController.js → src/js/controller/settings/preferences/TilePreferencesController.js

@@ -1,14 +1,14 @@
 (function () {
-  var ns = $.namespace('pskl.controller.settings.application');
+  var ns = $.namespace('pskl.controller.settings.preferences');
 
-  ns.TileApplicationController = function (piskelController, applicationController) {
+  ns.TilePreferencesController = function (piskelController, preferencesController) {
     this.piskelController = piskelController;
-    this.applicationController = applicationController;
+    this.preferencesController = preferencesController;
   };
 
-  pskl.utils.inherit(ns.TileApplicationController, pskl.controller.settings.AbstractSettingController);
+  pskl.utils.inherit(ns.TilePreferencesController, pskl.controller.settings.AbstractSettingController);
 
-  ns.TileApplicationController.prototype.init = function () {
+  ns.TilePreferencesController.prototype.init = function () {
     // Tile mode
     var tileMode = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_MODE);
     var tileModeCheckbox = document.querySelector('.tile-mode-checkbox');
@@ -25,11 +25,11 @@
     this.updateTileMaskOpacityText_(tileMaskOpacityInput.value);
   };
 
-  ns.TileApplicationController.prototype.onTileModeChange_ = function (evt) {
+  ns.TilePreferencesController.prototype.onTileModeChange_ = function (evt) {
     pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_MODE, evt.currentTarget.checked);
   };
 
-  ns.TileApplicationController.prototype.onTileMaskOpacityChange_ = function (evt) {
+  ns.TilePreferencesController.prototype.onTileMaskOpacityChange_ = function (evt) {
     var target = evt.target;
     var opacity = parseFloat(target.value);
     if (!isNaN(opacity)) {
@@ -40,7 +40,7 @@
     }
   };
 
-  ns.TileApplicationController.prototype.updateTileMaskOpacityText_ = function (opacity) {
+  ns.TilePreferencesController.prototype.updateTileMaskOpacityText_ = function (opacity) {
     var seamlessOpacityText = document.querySelector('.tile-mask-opacity-text');
     seamlessOpacityText.innerHTML = (opacity * 1).toFixed(2);
   };

src/js/utils/UserSettings.js

@@ -21,7 +21,7 @@
     RESIZE_SETTINGS: 'RESIZE_SETTINGS',
     COLOR_FORMAT: 'COLOR_FORMAT',
     TRANSFORM_SHOW_MORE: 'TRANSFORM_SHOW_MORE',
-    APPLICATION_SETTINGS_TAB: 'APPLICATION_SETTINGS_TAB',
+    PREFERENCES_TAB: 'PREFERENCES_TAB',
     KEY_TO_DEFAULT_VALUE_MAP_ : {
       'GRID_COLOR' : Constants.TRANSPARENT_COLOR,
       'GRID_ENABLED' : false,
@@ -49,7 +49,7 @@
       },
       COLOR_FORMAT: 'hex',
       TRANSFORM_SHOW_MORE: false,
-      APPLICATION_SETTINGS_TAB: 'main',
+      PREFERENCES_TAB: 'misc',
     },
 
     /**

src/piskel-script-list.js

@@ -122,10 +122,10 @@
 
   // Settings sub-controllers
   "js/controller/settings/AbstractSettingController.js",
-  "js/controller/settings/application/GridApplicationController.js",
-  "js/controller/settings/application/MainApplicationController.js",
-  "js/controller/settings/application/TileApplicationController.js",
-  "js/controller/settings/ApplicationSettingsController.js",
+  "js/controller/settings/preferences/GridPreferencesController.js",
+  "js/controller/settings/preferences/MiscPreferencesController.js",
+  "js/controller/settings/preferences/TilePreferencesController.js",
+  "js/controller/settings/PreferencesController.js",
   "js/controller/settings/exportimage/GifExportController.js",
   "js/controller/settings/exportimage/PngExportController.js",
   "js/controller/settings/exportimage/ZipExportController.js",

src/templates/settings/application.html → src/templates/settings/preferences.html

@@ -1,8 +1,8 @@
-<script type="text/html" id="templates/settings/application.html">
-  <div class="settings-section settings-section-application">
+<script type="text/html" id="templates/settings/preferences.html">
+  <div class="settings-section settings-section-preferences">
     <div class="settings-title">Settings</div>
     <div class="tab-list">
-      <div class="tab-item" data-tab-id="main">Main</div>
+      <div class="tab-item" data-tab-id="misc">Misc</div>
       <div class="tab-item" data-tab-id="grid">Grid</div>
       <div class="tab-item" data-tab-id="tile">Tile mode</div>
     </div>

src/templates/settings/application/grid.html → src/templates/settings/preferences/grid.html

@@ -1,5 +1,5 @@
-<script type="text/html" id="templates/settings/application/grid.html">
-  <div class="application-panel-grid">
+<script type="text/html" id="templates/settings/preferences/grid.html">
+  <div class="preferences-panel-grid">
     <div class="settings-item">
       <label>
         Enable grid

src/templates/settings/application/main.html → src/templates/settings/preferences/misc.html

@@ -1,5 +1,5 @@
-<script type="text/html" id="templates/settings/application/main.html">
-  <div class="application-panel-main">
+<script type="text/html" id="templates/settings/preferences/misc.html">
+  <div class="preferences-panel-misc">
     <div class="settings-item">
       <label>Background</label>
       <div class="background-picker-wrapper">

src/templates/settings/application/tile.html → src/templates/settings/preferences/tile.html

@@ -1,5 +1,5 @@
-<script type="text/html" id="templates/settings/application/tile.html">
-  <div class="application-panel-tile">
+<script type="text/html" id="templates/settings/preferences/tile.html">
+  <div class="preferences-panel-tile">
     <div class="settings-item">
       <label>
         Enable tile mode

test/casperjs/integration/IntegrationSuite.js

@@ -1,6 +1,6 @@
 (typeof exports != "undefined" ? exports : pskl_exports).tests = [
   'palettes/test-tiny-palettes.js',
-  'settings/test-application-main.js',
+  'settings/test-preferences-main.js',
   'settings/test-export-gif.js',
   'settings/test-export-gif-scale.js',
   'settings/test-export-gif-simple.js',