Added JSCS linter to enforce style conventions

src/js/controller/settings/AbstractSettingController.js

@@ -6,7 +6,6 @@
     pskl.utils.Event.addEventListener(el, type, callback, this);
   };
 
-
   ns.AbstractSettingController.prototype.destroy = function () {
     pskl.utils.Event.removeAllEventListeners(this);
     this.nullifyDomReferences_();
@@ -22,5 +21,4 @@
       }
     }
   };
-
-})();
+})();

src/js/controller/settings/ApplicationSettingsController.js

@@ -1,5 +1,5 @@
 (function () {
-  var ns = $.namespace("pskl.controller.settings");
+  var ns = $.namespace('pskl.controller.settings');
 
   ns.ApplicationSettingsController = function () {};
 
@@ -19,7 +19,7 @@
     // Grid display and size
     var gridWidth = pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH);
     var gridSelect = document.querySelector('.grid-width-select');
-    var selectedOption = gridSelect.querySelector('option[value="'+gridWidth+'"]');
+    var selectedOption = gridSelect.querySelector('option[value="' + gridWidth + '"]');
     if (selectedOption) {
       selectedOption.setAttribute('selected', 'selected');
     }
@@ -80,5 +80,4 @@
     evt.preventDefault();
     $.publish(Events.CLOSE_SETTINGS_DRAWER);
   };
-
-})();
+})();

src/js/controller/settings/ImportController.js

@@ -76,7 +76,7 @@
   };
 
   ns.ImportController.prototype.openPiskelFile_ = function (file) {
-    if (this.isPiskel_(file)){
+    if (this.isPiskel_(file)) {
       pskl.utils.PiskelFileUtils.loadFromFile(file, function (piskel, descriptor, fps) {
         piskel.setDescriptor(descriptor);
         pskl.app.piskelController.setPiskel(piskel);
@@ -117,5 +117,4 @@
       $.publish(Events.CLOSE_SETTINGS_DRAWER);
     }
   };
-
-})();
+})();

src/js/controller/settings/SaveController.js

@@ -30,7 +30,7 @@
     }
 
     if (pskl.utils.Environment.detectNodeWebkit()) {
-      // hide "save in browser"
+      // hide 'save in browser'
       var saveInBrowserSection = document.querySelector('#save-in-browser');
       saveInBrowserSection.style.display = 'none';
     }
@@ -76,8 +76,8 @@
 
   ns.SaveController.prototype.getLocalFilename_ = function () {
     var piskelName = this.getName();
-    var timestamp = pskl.utils.DateUtils.format(this.timestamp, "{{Y}}{{M}}{{D}}-{{H}}{{m}}{{s}}");
-    return piskelName + "-" + timestamp + ".piskel";
+    var timestamp = pskl.utils.DateUtils.format(this.timestamp, '{{Y}}{{M}}{{D}}-{{H}}{{m}}{{s}}');
+    return piskelName + '-' + timestamp + '.piskel';
   };
 
   ns.SaveController.prototype.onSaveFormSubmit_ = function (evt) {
@@ -153,7 +153,7 @@
       pskl.utils.FileUtils.downloadAsFile(blob, this.getLocalFilename_());
       this.onSaveSuccess_();
       this.afterSaving_();
-    }.bind(this), "application/piskel+json");
+    }.bind(this), 'application/piskel+json');
   };
 
   ns.SaveController.prototype.saveFileDesktop_ = function () {
@@ -191,12 +191,12 @@
 
   ns.SaveController.prototype.onSaveSuccess_ = function () {
     $.publish(Events.CLOSE_SETTINGS_DRAWER);
-    $.publish(Events.SHOW_NOTIFICATION, [{"content": "Successfully saved !"}]);
+    $.publish(Events.SHOW_NOTIFICATION, [{'content': 'Successfully saved !'}]);
     $.publish(Events.PISKEL_SAVED);
   };
 
   ns.SaveController.prototype.onSaveError_ = function (status) {
-    $.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+status+")"}]);
+    $.publish(Events.SHOW_NOTIFICATION, [{'content': 'Saving failed (' + status + ')'}]);
   };
 
   ns.SaveController.prototype.afterOnlineSaving_ = function () {
@@ -212,4 +212,4 @@
 
     window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 5000);
   };
-})();
+})();

src/js/controller/settings/SettingsController.js

@@ -78,7 +78,7 @@
     }
 
     this.drawerContainer.innerHTML = pskl.utils.Template.get(settings[setting].template);
-    
+
     this.currentSetting = setting;
     this.currentController = new settings[setting].controller(this.piskelController);
     this.currentController.init();
@@ -86,7 +86,7 @@
     this.settingsContainer.addClass(EXP_DRAWER_CLS);
 
     $('.' + SEL_SETTING_CLS).removeClass(SEL_SETTING_CLS);
-    $('[data-setting='+setting+']').addClass(SEL_SETTING_CLS);
+    $('[data-setting=' + setting + ']').addClass(SEL_SETTING_CLS);
 
     this.isExpanded = true;
   };
@@ -100,5 +100,4 @@
 
     document.activeElement.blur();
   };
-
-})();
+})();

src/js/controller/settings/exportimage/GifExportController.js

@@ -1,5 +1,5 @@
 (function () {
-  var ns = $.namespace("pskl.controller.settings.exportimage");
+  var ns = $.namespace('pskl.controller.settings.exportimage');
 
   var URL_MAX_LENGTH = 30;
   var MAX_GIF_COLORS = 256;
@@ -26,17 +26,17 @@
   }
 
   ns.GifExportController.prototype.init = function () {
-    this.optionTemplate_ = pskl.utils.Template.get("gif-export-option-template");
+    this.optionTemplate_ = pskl.utils.Template.get('gif-export-option-template');
 
-    this.uploadStatusContainerEl = document.querySelector(".gif-upload-status");
+    this.uploadStatusContainerEl = document.querySelector('.gif-upload-status');
 
-    this.previewContainerEl = document.querySelector(".gif-export-preview");
-    this.selectResolutionEl = document.querySelector(".gif-export-select-resolution");
+    this.previewContainerEl = document.querySelector('.gif-export-preview');
+    this.selectResolutionEl = document.querySelector('.gif-export-select-resolution');
 
-    this.uploadButton = document.querySelector(".gif-upload-button");
+    this.uploadButton = document.querySelector('.gif-upload-button');
     this.addEventListener(this.uploadButton, 'click', this.onUploadButtonClick_);
 
-    this.downloadButton = document.querySelector(".gif-download-button");
+    this.downloadButton = document.querySelector('.gif-download-button');
     this.addEventListener(this.downloadButton, 'click', this.onDownloadButtonClick_);
 
     this.createOptionElements_();
@@ -44,50 +44,52 @@
 
   ns.GifExportController.prototype.onUploadButtonClick_ = function (evt) {
     evt.preventDefault();
-    var zoom = this.getSelectedZoom_(),
-        fps = this.piskelController.getFPS();
+    var zoom = this.getSelectedZoom_();
+    var fps = this.piskelController.getFPS();
 
     this.renderAsImageDataAnimatedGIF(zoom, fps, this.uploadImageData_.bind(this));
   };
 
   ns.GifExportController.prototype.onDownloadButtonClick_ = function (evt) {
-    var zoom = this.getSelectedZoom_(),
-        fps = this.piskelController.getFPS();
+    var zoom = this.getSelectedZoom_();
+    var fps = this.piskelController.getFPS();
 
     this.renderAsImageDataAnimatedGIF(zoom, fps, this.downloadImageData_.bind(this));
   };
 
   ns.GifExportController.prototype.downloadImageData_ = function (imageData) {
     var fileName = this.piskelController.getPiskel().getDescriptor().name + '.gif';
-    pskl.utils.BlobUtils.dataToBlob(imageData, "image/gif", function(blob) {
+    pskl.utils.BlobUtils.dataToBlob(imageData, 'image/gif', function(blob) {
       pskl.utils.FileUtils.downloadAsFile(blob, fileName);
     });
   };
 
   ns.GifExportController.prototype.uploadImageData_ = function (imageData) {
     this.updatePreview_(imageData);
-    this.previewContainerEl.classList.add("preview-upload-ongoing");
+    this.previewContainerEl.classList.add('preview-upload-ongoing');
 
-    pskl.app.imageUploadService.upload(imageData, this.onImageUploadCompleted_.bind(this), this.onImageUploadFailed_.bind(this));
+    pskl.app.imageUploadService.upload(imageData,
+      this.onImageUploadCompleted_.bind(this),
+      this.onImageUploadFailed_.bind(this));
   };
 
   ns.GifExportController.prototype.onImageUploadCompleted_ = function (imageUrl) {
     this.updatePreview_(imageUrl);
     this.updateStatus_(imageUrl);
-    this.previewContainerEl.classList.remove("preview-upload-ongoing");
+    this.previewContainerEl.classList.remove('preview-upload-ongoing');
   };
 
   ns.GifExportController.prototype.onImageUploadFailed_ = function (event, xhr) {
     if (xhr.status === 500) {
       $.publish(Events.SHOW_NOTIFICATION, [{
-        "content": "Upload failed : " + xhr.responseText,
-        "hideDelay" : 5000
+        'content': 'Upload failed : ' + xhr.responseText,
+        'hideDelay' : 5000
       }]);
     }
   };
 
   ns.GifExportController.prototype.updatePreview_ = function (src) {
-    this.previewContainerEl.innerHTML = "<div><img style='max-width:32px;' src='"+src+"'/></div>";
+    this.previewContainerEl.innerHTML = '<div><img style="max-width:32px;"src="' + src + '"/></div>';
   };
 
   ns.GifExportController.prototype.getSelectedZoom_ = function () {
@@ -104,15 +106,17 @@
 
   ns.GifExportController.prototype.createOptionForResolution_ = function (resolution) {
     var zoom = resolution.zoom;
-    var label = zoom*this.piskelController.getWidth() + "x" + zoom*this.piskelController.getHeight();
-    var value = zoom;
+    var label = zoom * this.piskelController.getWidth() + 'x' + zoom * this.piskelController.getHeight();
 
     var isSelected = zoom === DEFAULT_EXPORT_ZOOM;
     var selected = isSelected ? 'selected' : '';
-    var optionHTML = pskl.utils.Template.replace(this.optionTemplate_, {value : value, label : label, selected : selected});
-    var optionEl = pskl.utils.Template.createFromHTML(optionHTML);
+    var optionHTML = pskl.utils.Template.replace(this.optionTemplate_, {
+      'value' : zoom,
+      'label' : label,
+      'selected' : selected
+    });
 
-    return optionEl;
+    return pskl.utils.Template.createFromHTML(optionHTML);
   };
 
   ns.GifExportController.prototype.renderAsImageDataAnimatedGIF = function(zoom, fps, cb) {
@@ -130,7 +134,7 @@
       transparent : parseInt(transparentColor.substring(1), 16)
     });
 
-    for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
+    for (var i = 0 ; i < this.piskelController.getFrameCount() ; i++) {
       var frame = this.piskelController.getFrameAt(i);
       var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, zoom);
       canvasRenderer.drawTransparentAs(transparentColor);
@@ -140,9 +144,9 @@
       });
     }
 
-    $.publish(Events.SHOW_PROGRESS, [{"name": 'Building animated GIF ...'}]);
+    $.publish(Events.SHOW_PROGRESS, [{'name': 'Building animated GIF ...'}]);
     gif.on('progress', function(percentage) {
-      $.publish(Events.UPDATE_PROGRESS, [{"progress": (percentage*100).toFixed(1)}]);
+      $.publish(Events.UPDATE_PROGRESS, [{'progress': (percentage * 100).toFixed(1)}]);
     }.bind(this));
 
     gif.on('finished', function(blob) {
@@ -167,7 +171,7 @@
   // FIXME : JD : HORRIBLE COPY/PASTA (JD later : where???)
   ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) {
     if (imageUrl) {
-      var linkTpl = "<a class='image-link' href='{{link}}' target='_blank'>{{shortLink}}</a>";
+      var linkTpl = '<a class="image-link" href="{{link}}" target="_blank">{{shortLink}}</a>';
       var linkHtml = pskl.utils.Template.replace(linkTpl, {
         link : imageUrl,
         shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...')
@@ -180,11 +184,11 @@
 
   ns.GifExportController.prototype.shorten_ = function (url, maxLength, suffix) {
     if (url.length > maxLength) {
-      var index = Math.round((maxLength-suffix.length) / 2);
+      var index = Math.round((maxLength - suffix.length) / 2);
       var part1 = url.substring(0, index);
       var part2 = url.substring(url.length - index, url.length);
       url = part1 + suffix + part2;
     }
     return url;
   };
-})();
+})();

src/js/controller/settings/exportimage/ImageExportController.js

@@ -1,5 +1,5 @@
 (function () {
-  var ns = $.namespace("pskl.controller.settings.exportimage");
+  var ns = $.namespace('pskl.controller.settings.exportimage');
 
   ns.ImageExportController = function (piskelController) {
     this.piskelController = piskelController;
@@ -11,4 +11,4 @@
     this.pngExportController.init();
     this.gifExportController.init();
   };
-})();
+})();

src/js/controller/settings/exportimage/PngExportController.js

@@ -1,5 +1,5 @@
 (function () {
-  var ns = $.namespace("pskl.controller.settings.exportimage");
+  var ns = $.namespace('pskl.controller.settings.exportimage');
 
   var URL_MAX_LENGTH = 60;
 
@@ -14,13 +14,13 @@
     this.pngFilePrefixInput = document.getElementById('zip-prefix-name');
     this.pngFilePrefixInput.value = 'sprite_';
 
-    var downloadButton = document.querySelector(".png-download-button");
+    var downloadButton = document.querySelector('.png-download-button');
     this.addEventListener(downloadButton, 'click', this.onPngDownloadButtonClick_);
 
-    var zipButton = document.querySelector(".zip-generate-button");
+    var zipButton = document.querySelector('.zip-generate-button');
     this.addEventListener(zipButton, 'click', this.onZipButtonClick_);
 
-    this.updatePreview_(this.getFramesheetAsCanvas().toDataURL("image/png"));
+    this.updatePreview_(this.getFramesheetAsCanvas().toDataURL('image/png'));
   };
 
   ns.PngExportController.prototype.onPngDownloadButtonClick_ = function (evt) {
@@ -37,13 +37,16 @@
       var frame = this.piskelController.getFrameAt(i);
       var canvas = this.getFrameAsCanvas_(frame);
       var basename = this.pngFilePrefixInput.value;
-      var filename =  basename + (i+1) + ".png";
+      var filename =  basename + (i + 1) + '.png';
       zip.file(filename, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true});
     }
 
     var fileName = this.getPiskelName_() + '.zip';
 
-    var blob = zip.generate({type:"blob"});
+    var blob = zip.generate({
+      type : 'blob'
+    });
+
     pskl.utils.FileUtils.downloadAsFile(blob, fileName);
   };
 
@@ -65,12 +68,12 @@
   ns.PngExportController.prototype.onImageUploadCompleted_ = function (imageUrl) {
     this.updatePreview_(imageUrl);
     this.updateStatus_(imageUrl);
-    this.previewContainerEl.classList.remove("preview-upload-ongoing");
+    this.previewContainerEl.classList.remove('preview-upload-ongoing');
   };
 
   ns.PngExportController.prototype.updateStatus_ = function (imageUrl, error) {
     if (imageUrl) {
-      var linkTpl = "<a class='image-link' href='{{link}}' target='_blank'>{{shortLink}}</a>";
+      var linkTpl = '<a class="image-link" href="{{link}}" target="_blank">{{shortLink}}</a>';
       var linkHtml = pskl.utils.Template.replace(linkTpl, {
         link : imageUrl,
         shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...')
@@ -82,7 +85,7 @@
   };
 
   ns.PngExportController.prototype.updatePreview_ = function (src) {
-    this.previewContainerEl.innerHTML = "<img class='light-picker-background' style='max-width:240px;' src='"+src+"'/>";
+    this.previewContainerEl.innerHTML = '<img class="light-picker-background" src="' + src + '"/>';
   };
 
   ns.PngExportController.prototype.shorten_ = function (url, maxLength, suffix) {

src/js/controller/settings/resize/AnchorWidget.js

@@ -35,12 +35,12 @@
 
   ns.AnchorWidget.prototype.setOrigin = function (origin) {
     this.origin = origin;
-    var previous = document.querySelector('.'+OPTION_CLASSNAME+'.selected');
+    var previous = document.querySelector('.' + OPTION_CLASSNAME + '.selected');
     if (previous) {
       previous.classList.remove('selected');
     }
 
-    var selected = document.querySelector('.'+OPTION_CLASSNAME+'[data-origin="' + origin + '"]');
+    var selected = document.querySelector('.' + OPTION_CLASSNAME + '[data-origin="' + origin + '"]');
     if (selected) {
       selected.classList.add('selected');
       this.refreshNeighbors_(selected);
@@ -64,7 +64,7 @@
   };
 
   ns.AnchorWidget.prototype.refreshNeighbors_ = function (selected) {
-    var options = document.querySelectorAll('.'+OPTION_CLASSNAME);
+    var options = document.querySelectorAll('.' + OPTION_CLASSNAME);
     for (var i = 0 ; i < options.length ; i++) {
       options[i].removeAttribute('data-neighbor');
     }
@@ -84,4 +84,4 @@
       el.setAttribute('data-neighbor', neighborhood);
     }
   };
-})();
+})();

src/js/controller/settings/resize/DefaultSizeController.js

@@ -44,4 +44,4 @@
     }
     return value;
   };
-})();
+})();

src/js/controller/settings/resize/ResizeController.js

@@ -53,11 +53,10 @@
     // propagate savepath to new Piskel
     piskel.savePath = pskl.app.piskelController.getSavePath();
     pskl.app.piskelController.setPiskel(piskel, true);
-    
+
     $.publish(Events.CLOSE_SETTINGS_DRAWER);
   };
 
-
   ns.ResizeController.prototype.resizeLayer_ = function (layer) {
     var resizedFrames = layer.getFrames().map(this.resizeFrame_.bind(this));
     return pskl.model.Layer.fromFrames(layer.getName(), resizedFrames);
@@ -98,13 +97,13 @@
       value = 0;
     }
 
-    var height = this.piskelController.getHeight(),
-        width = this.piskelController.getWidth();
+    var height = this.piskelController.getHeight();
+    var width = this.piskelController.getWidth();
 
     if (sizeInput === this.widthInput) {
-      this.heightInput.value = Math.round(value * height/width);
+      this.heightInput.value = Math.round(value * height / width);
     } else if (sizeInput === this.heightInput) {
-      this.widthInput.value = Math.round(value * width/height);
+      this.widthInput.value = Math.round(value * width / height);
     }
   };
 
@@ -144,7 +143,7 @@
     } else if (origin.indexOf('RIGHT') != -1) {
       return x - (width - resizedWidth);
     } else {
-      return x - Math.round((width - resizedWidth)/2);
+      return x - Math.round((width - resizedWidth) / 2);
     }
   };
 
@@ -155,7 +154,7 @@
     } else if (origin.indexOf('BOTTOM') != -1) {
       return y - (height - resizedHeight);
     } else {
-      return y - Math.round((height - resizedHeight)/2);
+      return y - Math.round((height - resizedHeight) / 2);
     }
   };
-})();
+})();