Merge branch 'master' of https://github.com/juliandescottes/piskel

src/css/settings-application.css

@@ -54,7 +54,8 @@
   text-align: center;
 }
 
-.grid-width-select {
+.grid-width-select,
+.color-format-select {
   margin: 5px 5px 0 5px;
 }
 

src/js/controller/FramesListController.js

@@ -15,6 +15,7 @@
 
     this.redrawFlag = true;
     this.regenerateDomFlag = true;
+    this.justDropped = false;
 
     this.cachedFrameProcessor = new pskl.model.frame.CachedFrameProcessor();
     this.cachedFrameProcessor.setFrameProcessor(this.frameToPreviewCanvas_.bind(this));
@@ -104,7 +105,7 @@
       this.container.get(0).removeChild(this.tiles[index]);
       this.tiles.splice(index, 1);
       this.updateScrollerOverflows();
-    } else if (action === ACTION.SELECT) {
+    } else if (action === ACTION.SELECT && !this.justDropped) {
       this.piskelController.setCurrentFrameIndex(index);
     } else if (action === ACTION.NEW_FRAME) {
       this.piskelController.addFrame();
@@ -189,6 +190,7 @@
     $('#preview-list').sortable({
       placeholder: 'preview-tile preview-tile-drop-proxy',
       update: $.proxy(this.onUpdate_, this),
+      stop: $.proxy(this.onSortableStop_, this),
       items: '.preview-tile',
       axis: 'y',
       tolerance: 'pointer'
@@ -211,6 +213,17 @@
     this.flagForRedraw_();
   };
 
+  /**
+   * @private
+   */
+  ns.FramesListController.prototype.onSortableStop_ = function (event, ui) {
+    this.justDropped = true;
+
+    this.resizeTimer = window.setTimeout($.proxy(function() {
+      this.justDropped = false;
+    }, this), 200);
+  };
+
   /**
    * @private
    * TODO(vincz): clean this giant rendering function & remove listeners.

src/js/controller/settings/ApplicationSettingsController.js

@@ -39,6 +39,16 @@
     maxFpsInput.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
     this.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_);
 
+    // Color format
+    var colorFormat = pskl.UserSettings.get(pskl.UserSettings.COLOR_FORMAT);
+    var colorFormatSelect = document.querySelector('.color-format-select');
+    var selectedColorFormatOption = colorFormatSelect.querySelector('option[value="' + colorFormat + '"]');
+    if (selectedColorFormatOption) {
+      selectedColorFormatOption.setAttribute('selected', 'selected');
+    }
+
+    this.addEventListener(colorFormatSelect, 'change', this.onColorFormatChange_);
+
     // Layer preview opacity
     var layerOpacityInput = document.querySelector('.layer-opacity-input');
     layerOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
@@ -63,6 +73,10 @@
     pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, width);
   };
 
+  ns.ApplicationSettingsController.prototype.onColorFormatChange_ = function (evt) {
+    pskl.UserSettings.set(pskl.UserSettings.COLOR_FORMAT, evt.target.value);
+  };
+
   ns.ApplicationSettingsController.prototype.onSeamlessModeChange_ = function (evt) {
     pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_MODE, evt.currentTarget.checked);
   };

src/js/lib/spectrum/spectrum.js

@@ -671,7 +671,8 @@
 
             // Update the text entry input as it changes happen
             if (opts.showInput) {
-                textInput.val(realColor.toString(format));
+                var displayFormat = pskl.UserSettings.get(pskl.UserSettings.COLOR_FORMAT);
+                textInput.val(realColor.toString(displayFormat));
             }
 
             if (opts.showPalette) {

src/js/utils/UserSettings.js

@@ -17,6 +17,7 @@
     EXPORT_TAB: 'EXPORT_TAB',
     PEN_SIZE : 'PEN_SIZE',
     RESIZE_SETTINGS: 'RESIZE_SETTINGS',
+    COLOR_FORMAT: 'COLOR_FORMAT',
     KEY_TO_DEFAULT_VALUE_MAP_ : {
       'GRID_WIDTH' : 0,
       'MAX_FPS' : 24,
@@ -39,7 +40,8 @@
         maintainRatio : true,
         resizeContent : false,
         origin : 'TOPLEFT'
-      }
+      },
+      COLOR_FORMAT: 'hex',
     },
 
     /**

src/templates/settings/application.html

@@ -58,6 +58,14 @@
         <input type="text" class="textfield  textfield-small  max-fps-input" autocomplete="off" name="max-fps"/>
       </div>
 
+      <div class="settings-item">
+        <label for="color-format">Color format</label>
+        <select id="color-format" class="color-format-select">
+          <option value="hex">Hex</option>
+          <option value="rgb">RGB</option>
+        </select>
+      </div>
+
       <input type="submit" class="button button-primary" value="Apply settings" />
     </div>
   </form>