Issue #636 - rename seamless* to tile*

Author: juliandescottes

src/css/settings-application.css

@@ -43,14 +43,11 @@
   vertical-align: middle;
 }
 
-.layer-opacity-input {
+.layer-opacity-input,
+.tile-mask-opacity-input {
   width: 100px;
 }
 
-.seamless-opacity-input {
-  width: 75px;
-}
-
 .settings-opacity-text {
   height: 31px;
   display: inline-block;

src/js/controller/settings/application/TileApplicationController.js

@@ -9,39 +9,39 @@
   pskl.utils.inherit(ns.TileApplicationController, pskl.controller.settings.AbstractSettingController);
 
   ns.TileApplicationController.prototype.init = function () {
-    // Seamless mode
-    var seamlessMode = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_MODE);
-    var seamlessModeCheckbox = document.querySelector('.seamless-mode-checkbox');
-    if (seamlessMode) {
-      seamlessModeCheckbox.setAttribute('checked', seamlessMode);
+    // Tile mode
+    var tileMode = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_MODE);
+    var tileModeCheckbox = document.querySelector('.tile-mode-checkbox');
+    if (tileMode) {
+      tileModeCheckbox.setAttribute('checked', tileMode);
     }
-    this.addEventListener(seamlessModeCheckbox, 'change', this.onSeamlessModeChange_);
+    this.addEventListener(tileModeCheckbox, 'change', this.onTileModeChange_);
 
-    // Seamless mask opacity
-    var seamlessOpacityInput = document.querySelector('.seamless-opacity-input');
-    seamlessOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
-    this.addEventListener(seamlessOpacityInput, 'change', this.onSeamlessOpacityChange_);
-    this.addEventListener(seamlessOpacityInput, 'input', this.onSeamlessOpacityChange_);
-    this.updateSeamlessOpacityText_(seamlessOpacityInput.value);
+    // Tile mask opacity
+    var tileMaskOpacityInput = document.querySelector('.tile-mask-opacity-input');
+    tileMaskOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
+    this.addEventListener(tileMaskOpacityInput, 'change', this.onTileMaskOpacityChange_);
+    this.addEventListener(tileMaskOpacityInput, 'input', this.onTileMaskOpacityChange_);
+    this.updateTileMaskOpacityText_(tileMaskOpacityInput.value);
   };
 
-  ns.TileApplicationController.prototype.onSeamlessModeChange_ = function (evt) {
+  ns.TileApplicationController.prototype.onTileModeChange_ = function (evt) {
     pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_MODE, evt.currentTarget.checked);
   };
 
-  ns.TileApplicationController.prototype.onSeamlessOpacityChange_ = function (evt) {
+  ns.TileApplicationController.prototype.onTileMaskOpacityChange_ = function (evt) {
     var target = evt.target;
     var opacity = parseFloat(target.value);
     if (!isNaN(opacity)) {
       pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_OPACITY, opacity);
-      this.updateSeamlessOpacityText_(opacity);
+      this.updateTileMaskOpacityText_(opacity);
     } else {
       target.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
     }
   };
 
-  ns.TileApplicationController.prototype.updateSeamlessOpacityText_ = function (opacity) {
-    var seamlessOpacityText = document.querySelector('.seamless-opacity-text');
+  ns.TileApplicationController.prototype.updateTileMaskOpacityText_ = function (opacity) {
+    var seamlessOpacityText = document.querySelector('.tile-mask-opacity-text');
     seamlessOpacityText.innerHTML = (opacity * 1).toFixed(2);
   };
 })();

src/templates/settings/application/tile.html

@@ -3,14 +3,15 @@
     <div class="settings-item">
       <label>
         Enable tile mode
-        <input type="checkbox" value="1" class="seamless-mode-checkbox" name="seamless-mode-checkbox"/>
+        <input type="checkbox" value="1" class="tile-mode-checkbox" name="tile-mode-checkbox"/>
       </label>
     </div>
 
     <div class="settings-item">
-      <label>Tiles opacity</label>
-      <input type="range" class="settings-opacity-input seamless-opacity-input" name="seamless-opacity" min="0"  max="0.5" step="0.01"/>
-      <span class="settings-opacity-text seamless-opacity-text"></span>
+      <label>Mask opacity</label>
+      <input type="range" min="0" max="0.5" step="0.01"
+        class="settings-opacity-input tile-mask-opacity-input" name="tile-mask-opacity"/>
+      <span class="settings-opacity-text tile-mask-opacity-text"></span>
     </div>
   </div>
 </script>