From 6c0f54032db29a9fc97af40ecc99cec35c9801c5 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Tue, 22 Oct 2013 07:40:08 +0200 Subject: [PATCH] Import panel --- css/settings.css | 36 ++++++ css/style.css | 26 +--- index.html | 1 + js/controller/settings/ImportController.js | 138 +++++++++++---------- templates/layers-list.html | 8 +- templates/settings/import.html | 23 ++-- 6 files changed, 130 insertions(+), 102 deletions(-) diff --git a/css/settings.css b/css/settings.css index d2dd2440..3af8a57c 100644 --- a/css/settings.css +++ b/css/settings.css @@ -115,4 +115,40 @@ -moz-box-sizing:border-box; background: rgba(0,0,0,0.5); color: white; +} + +/* Import panel */ +.import-section { + margin: 15px 0; +} + +.import-resize-field { + width: 30px; + margin: 0px 8px; + text-align: right; +} + +.file-input-button { + margin: 0px 8px; + border-radius: 2px; +} + +.file-input-status { + font-style: italic; + font-weight: normal; + text-shadow : none; +} + +.import-button { + float: right; + padding : 8px 10px; + height: auto; + background: gold; + color: black; + text-shadow: 0px 1px 0 #fff; + border-radius: 2px; + font-size : 1.2rem; + border-color: rgb(179, 164, 0); + border-top-color: white; + border-bottom-color: rgb(151, 133, 0); } \ No newline at end of file diff --git a/css/style.css b/css/style.css index 1b810419..5b5eb220 100644 --- a/css/style.css +++ b/css/style.css @@ -246,35 +246,19 @@ body { } .layers-button { - height: 24px; margin: 0; width: 25%; float : left; - border: none; - box-sizing: border-box; - border-top: 1px solid #666; - border-right: 1px solid #333; - border-bottom: 1px solid #333; - background-color: #3f3f3f; - cursor: pointer; - color: white; - font-size: 0.7em; - font-weight: bold; - text-align: center; - text-decoration: none; - text-shadow: 0px -1px 0 #000; - transition: background-color 0.2s linear; +} + +/* @override */ +.button.layers-button { + border-left-width: 0; } .layers-button:last-child { border-right-width: 0; } - -.layers-button:hover { - text-decoration: none; - background-color: #484848; - color: gold; -} /** * User messages */ diff --git a/index.html b/index.html index d3b160cd..309d86f3 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@ + diff --git a/js/controller/settings/ImportController.js b/js/controller/settings/ImportController.js index d0b6fd06..c69ac924 100644 --- a/js/controller/settings/ImportController.js +++ b/js/controller/settings/ImportController.js @@ -1,46 +1,47 @@ (function () { var ns = $.namespace('pskl.controller.settings'); - + var DEFAULT_FILE_STATUS = 'No file selected ...'; ns.ImportController = function (piskelController) { this.piskelController = piskelController; + this.importedImage_ = null; }; ns.ImportController.prototype.init = function () { - this.fileUploadInput = $("[name=file-upload-input]"); - this.urlInput = $("[name=url-input]"); this.importForm = $("[name=import-form]"); + this.hiddenFileInput = $("[name=file-upload-input]"); + this.fileInputButton = $(".file-input-button"); + this.fileInputStatus=$(".file-input-status"); + this.fileInputStatus.html(DEFAULT_FILE_STATUS); + + this.resizeWidth = $("[name=resize-width]"); + this.resizeHeight = $("[name=resize-height]"); + this.importForm.submit(this.onImportFormSubmit_.bind(this)); + this.hiddenFileInput.change(this.onFileUploadChange_.bind(this)); + this.fileInputButton.click(this.onFileInputClick_.bind(this)); }; ns.ImportController.prototype.reset_ = function () { this.importForm.get(0).reset(); + this.fileInputStatus.html(DEFAULT_FILE_STATUS); + }; ns.ImportController.prototype.onImportFormSubmit_ = function (evt) { evt.originalEvent.preventDefault(); - var importType = this.getSelectedRadioValue_(); - if (importType === 'FILE') { - this.importFromFile_(); - } else if (importType === 'URL') { - this.importFromUrl_(); - } + this.importImageToPiskel_(); }; - ns.ImportController.prototype.getSelectedRadioValue_ = function () { - var radios = this.getRadios_(); - var selectedRadios = radios.filter(function(radio) { - return !!radio.checked; - }); + ns.ImportController.prototype.onFileUploadChange_ = function (evt) { + this.importFromFile_(); + }; - if (selectedRadios.length == 1) { - return selectedRadios[0].value; - } else { - throw "Unexpected error when retrieving selected radio"; - } + ns.ImportController.prototype.onFileInputClick_ = function (evt) { + this.hiddenFileInput.click(); }; ns.ImportController.prototype.importFromFile_ = function () { - var files = this.fileUploadInput.get(0).files; + var files = this.hiddenFileInput.get(0).files; if (files.length == 1) { var file = files[0]; if (this.isImage_(file)) { @@ -52,35 +53,6 @@ } }; - ns.ImportController.prototype.importFromUrl_ = function () { - var url = this.urlInput.get(0).value; - if (this.isUrl_(url)) { - this.processImageSource_(url); - } else { - this.reset_(); - throw "Not a url : " + url; - } - }; - - /** - * TODO : implement it properly - * @param {String} url potential url to test - * @return {Boolean} true if url looks like a URL - */ - ns.ImportController.prototype.isUrl_ = function (url) { - if (typeof url === 'string') { - return (/^http/).test(url); - } else { - return false; - } - }; - - ns.ImportController.prototype.getRadios_ = function () { - var radiosColl = this.importForm.get(0).querySelectorAll("[name=upload-source-type]"), - radios = Array.prototype.slice.call(radiosColl,0); - return radios; - }; - ns.ImportController.prototype.readImageFile_ = function (imageFile) { pskl.utils.FileUtils.readFile(imageFile, this.processImageSource_.bind(this)); }; @@ -91,24 +63,63 @@ * @param {String} imageSource url or data-url, will be used as src for the image */ ns.ImportController.prototype.processImageSource_ = function (imageSource) { - var image = new Image(); - image.onload = this.onImageLoaded_.bind(this); - image.src = imageSource; + this.importedImage_ = new Image(); + this.importedImage_.onload = this.onImageLoaded_.bind(this); + this.importedImage_.src = imageSource; }; ns.ImportController.prototype.onImageLoaded_ = function (evt) { - var image = evt.target; + var w = this.importedImage_.width, + h = this.importedImage_.height; + this.resizeWidth.val(w); + this.resizeHeight.val(h); - var w = image.width, h = image.height; + var filePath = this.hiddenFileInput.val(); + var fileName = this.extractFileNameFromPath_(filePath); + this.fileInputStatus.html(fileName); + }; + + ns.ImportController.prototype.extractFileNameFromPath_ = function (path) { + var parts = []; + if (path.indexOf('/') !== -1) { + parts = path.split('/'); + } else if (path.indexOf('\\') !== -1) { + parts = path.split('\\'); + } else { + parts = [path]; + } + return parts[parts.length-1]; + }; + + ns.ImportController.prototype.importImageToPiskel_ = function () { + if (this.importedImage_) { + var image = this.importedImage_; + var frames = this.createFramesFromImage(image); + var confirmationMessage = "You are about to erase your current Piskel. " + + "A new Piskel will be created from your picture, size : " + image.width + "x" + image.height; + + if (window.confirm(confirmationMessage)) { + var piskel = pskl.utils.Serializer.createPiskel([frames]); + pskl.app.piskelController.setPiskel(piskel); + pskl.app.animationController.setFPS(12); + } + + this.reset_(); + } + }; + + ns.ImportController.prototype.createFramesFromImage = function (image) { + var w = image.width, + h = image.height; var canvas = pskl.CanvasUtils.createCanvas(w, h); var context = canvas.getContext('2d'); context.drawImage(image, 0,0,w,h,0,0,w,h); var imgData = context.getImageData(0,0,w,h).data; // Draw the zoomed-up pixels to a different canvas context - var framesheet = []; + var frames = []; for (var x=0;x

Layers

- - - - + + + +