Removed JQuery from ApplicationSettings

src/js/controller/settings/ApplicationSettingsController.js

@@ -3,38 +3,42 @@
 
   ns.ApplicationSettingsController = function () {};
 
-  /**
-   * @public
-   */
   ns.ApplicationSettingsController.prototype.init = function() {
-    // Highlight selected background picker:
+    this.backgroundContainer = document.querySelector('.background-picker-wrapper');
-    var backgroundClass = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);
+    this.backgroundContainer.addEventListener('click', this.onBackgroundClick_.bind(this));
-    $('#background-picker-wrapper')
+
-      .find('.background-picker[data-background-class=' + backgroundClass + ']')
+    // Highlight selected background :
-      .addClass('selected');
+    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);
+    var gridSelect = document.querySelector('.grid-width-select');
-    $('#grid-width').change(this.onGridWidthChange.bind(this));
+    var selectedOption = gridSelect.querySelector('option[value="'+gridWidth+'"]');
-
+    if (selectedOption) {
-    // Handle canvas background changes:
+      selectedOption.setAttribute('selected', 'selected');
-    $('#background-picker-wrapper').click(this.onBackgroundClick.bind(this));
+    }
+    gridSelect.addEventListener('change', this.onGridWidthChange_.bind(this));
   };
 
-  ns.ApplicationSettingsController.prototype.onGridWidthChange = function (evt) {
+  ns.ApplicationSettingsController.prototype.onGridWidthChange_ = function (evt) {
     var width = $('#grid-width').val();
     pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, parseInt(width, 10));
   };
 
-  ns.ApplicationSettingsController.prototype.onBackgroundClick = function (evt) {
+  ns.ApplicationSettingsController.prototype.onBackgroundClick_ = function (evt) {
-    var target = $(evt.target).closest('.background-picker');
+    var target = evt.target;
-    if (target.length) {
+    var background = target.dataset.background;
-      var backgroundClass = target.data('background-class');
+    if (background) {
-      pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, backgroundClass);
+      pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, background);
-
+      var selected = this.backgroundContainer.querySelector('.selected');
-      $('.background-picker').removeClass('selected');
+      if (selected) {
-      target.addClass('selected');
+        selected.classList.remove('selected');
+      }
+      target.classList.add('selected');
     }
   };
 

src/templates/settings/application.html

@@ -1,38 +1,49 @@
 <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-wrapper">
-      <div class="background-picker light-picker-background" data-background-class="light-canvas-background"
+      <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="1">1px</option>
-      <option value="2">Enabled - 2px wide</option>
+      <option value="2">2px</option>
-      <option value="3">Enabled - 3px wide</option>
+      <option value="3">3px</option>
-      <option value="4">Enabled - 4px wide</option>
+      <option value="4">4px</option>
     </select>
   </div>
-
+</div>
-  <!-- <div class="settings-item">
+
-    <label for="tiled-preview">Display tiled preview :</label>
+<div class="settings-section">
-    <input type="checkbox" value="1" id="tiled-preview" name="tiled-preview-checkbox"/>
+  <div class="settings-title">
-  </div> -->
+    Preview
+  </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 class="settings-item">
+    <label for="tiled-preview">Max FPS :</label>
+        <input type="text" class="textfield max-fps-field" name="max-fps"/>
+  </div>
 </div>