";
};
ns.GifExportController.prototype.getSelectedZoom_ = function () {
- var radiosColl = this.exportForm.get(0).querySelectorAll("[name=gif-zoom-level]"),
- radios = Array.prototype.slice.call(radiosColl,0);
- var selectedRadios = radios.filter(function(radio) {return !!radio.checked;});
-
- if (selectedRadios.length == 1) {
- return selectedRadios[0].value;
- } else {
- throw "Unexpected error when retrieving selected zoom";
- }
+ return this.selectResolutionEl.value;
};
- ns.GifExportController.prototype.createRadioElements_ = function () {
+ ns.GifExportController.prototype.createOptionElements_ = function () {
var resolutions = ns.GifExportController.RESOLUTIONS;
for (var i = 0 ; i < resolutions.length ; i++) {
- var radio = this.createRadioForResolution_(resolutions[i]);
- this.radioGroupEl.appendChild(radio);
+ var option = this.createOptionForResolution_(resolutions[i]);
+ this.selectResolutionEl.appendChild(option);
}
};
- ns.GifExportController.prototype.createRadioForResolution_ = function (resolution) {
+ 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 radioHTML = pskl.utils.Template.replace(this.radioTemplate_, {value : value, label : label});
- var radioEl = pskl.utils.Template.createFromHTML(radioHTML);
+ var optionHTML = pskl.utils.Template.replace(this.optionTemplate_, {value : value, label : label});
+ var optionEl = pskl.utils.Template.createFromHTML(optionHTML);
- if (resolution['default']) {
- var input = radioEl.getElementsByTagName("input")[0];
- input.setAttribute("checked", "checked");
- }
-
- return radioEl;
+ return optionEl;
};
ns.GifExportController.prototype.renderAsImageDataAnimatedGIF = function(zoom, fps, cb) {
@@ -181,8 +168,10 @@
ns.GifExportController.prototype.shorten_ = function (url, maxLength, suffix) {
if (url.length > maxLength) {
- url = url.substring(0, maxLength);
- url += suffix;
+ 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;
};
diff --git a/src/js/controller/settings/ImportController.js b/src/js/controller/settings/ImportController.js
index 7ad4d9e..21e4fab 100644
--- a/src/js/controller/settings/ImportController.js
+++ b/src/js/controller/settings/ImportController.js
@@ -1,6 +1,6 @@
(function () {
var ns = $.namespace('pskl.controller.settings');
- var DEFAULT_FILE_STATUS = 'No file selected ...';
+ var DEFAULT_FILE_STATUS = '';
var PREVIEW_HEIGHT = 60;
ns.ImportController = function (piskelController) {
@@ -9,6 +9,9 @@
};
ns.ImportController.prototype.init = function () {
+ this.hiddenOpenPiskelInput = $('[name=open-piskel-input]');
+ this.openPiskelInputButton = $('.open-piskel-button');
+
this.importForm = $('[name=import-form]');
this.hiddenFileInput = $('[name=file-upload-input]');
this.fileInputButton = $('.file-input-button');
@@ -20,12 +23,16 @@
this.resizeWidth = $('[name=resize-width]');
this.resizeHeight = $('[name=resize-height]');
this.smoothResize = $('[name=smooth-resize-checkbox]');
- this.submitButton = $('[name=import-submit]');
+
+ $('.import-options').hide();
this.importForm.submit(this.onImportFormSubmit_.bind(this));
this.hiddenFileInput.change(this.onFileUploadChange_.bind(this));
this.fileInputButton.click(this.onFileInputClick_.bind(this));
+ this.hiddenOpenPiskelInput.change(this.onOpenPiskelChange_.bind(this));
+ this.openPiskelInputButton.click(this.onOpenPiskelClick_.bind(this));
+
this.resizeWidth.keyup(this.onResizeInputKeyUp_.bind(this, 'width'));
this.resizeHeight.keyup(this.onResizeInputKeyUp_.bind(this, 'height'));
};
@@ -61,14 +68,47 @@
};
ns.ImportController.prototype.onFileUploadChange_ = function (evt) {
- this.importFromFile_();
+ this.importPictureFromFile_();
};
ns.ImportController.prototype.onFileInputClick_ = function (evt) {
this.hiddenFileInput.click();
};
- ns.ImportController.prototype.importFromFile_ = function () {
+ ns.ImportController.prototype.onOpenPiskelChange_ = function (evt) {
+ this.openPiskelFile_();
+ };
+
+ ns.ImportController.prototype.onOpenPiskelClick_ = function (evt) {
+ this.hiddenOpenPiskelInput.click();
+ };
+
+ ns.ImportController.prototype.openPiskelFile_ = function () {
+ var files = this.hiddenOpenPiskelInput.get(0).files;
+ if (files.length == 1) {
+
+ var file = files[0];
+ if (this.isPiskel_(file)){
+ pskl.utils.FileUtils.readFile(file, function (content) {
+ var rawPiskel = window.atob(content.replace('data:;base64,',''));
+ var serializedPiskel = JSON.parse(rawPiskel);
+ var name = serializedPiskel.piskel.name;
+ var description = serializedPiskel.piskel.description;
+ var fps = serializedPiskel.piskel.fps;
+
+ pskl.utils.serialization.Deserializer.deserialize(serializedPiskel, function (piskel) {
+ piskel.setDescriptor(new pskl.model.piskel.Descriptor(name, description, true));
+ pskl.app.piskelController.setPiskel(piskel);
+ pskl.app.animationController.setFPS(fps);
+ });
+ });
+ this.reset_();
+ }
+ }
+ };
+
+
+ ns.ImportController.prototype.importPictureFromFile_ = function () {
var files = this.hiddenFileInput.get(0).files;
if (files.length == 1) {
var file = files[0];
@@ -83,15 +123,9 @@
};
ns.ImportController.prototype.enableDisabledSections_ = function () {
- this.resizeWidth.removeAttr('disabled');
- this.resizeHeight.removeAttr('disabled');
- this.smoothResize.removeAttr('disabled');
- this.submitButton.removeAttr('disabled');
-
this.fileInputButton.removeClass('button-primary');
this.fileInputButton.blur();
-
- $('.import-section-disabled').removeClass('import-section-disabled');
+ $('.import-options').show();
};
ns.ImportController.prototype.readImageFile_ = function (imageFile) {
@@ -200,4 +234,8 @@
return file.type.indexOf('image') === 0;
};
+ ns.ImportController.prototype.isPiskel_ = function (file) {
+ return (/\.piskel$/).test(file.name);
+ };
+
})();
\ No newline at end of file
diff --git a/src/js/controller/settings/PngExportController.js b/src/js/controller/settings/PngExportController.js
index c35e7b5..2c1c8b7 100644
--- a/src/js/controller/settings/PngExportController.js
+++ b/src/js/controller/settings/PngExportController.js
@@ -9,28 +9,23 @@
ns.PngExportController.prototype.init = function () {
this.previewContainerEl = document.querySelectorAll(".png-export-preview")[0];
- this.uploadStatusContainerEl = document.querySelectorAll(".png-upload-status")[0];
- document.querySelector(".png-upload-button").addEventListener('click', this.onPngUploadButtonClick_.bind(this));
document.querySelector(".png-download-button").addEventListener('click', this.onPngDownloadButtonClick_.bind(this));
document.querySelector(".zip-generate-button").addEventListener('click', this.onZipButtonClick_.bind(this));
this.updatePreview_(this.getFramesheetAsCanvas().toDataURL("image/png"));
+
+ (new ns.GifExportController(this.piskelController)).init();
};
ns.PngExportController.prototype.onPngDownloadButtonClick_ = function (evt) {
var fileName = this.getPiskelName_() + '.png';
- pskl.utils.ImageToBlob.canvasToBlob(this.getFramesheetAsCanvas(), function(blob) {
- pskl.utils.FileUtils.downloadAsFile(fileName, blob);
+ pskl.utils.BlobUtils.canvasToBlob(this.getFramesheetAsCanvas(), function(blob) {
+ pskl.utils.FileUtils.downloadAsFile(blob, fileName);
});
};
- ns.PngExportController.prototype.onPngUploadButtonClick_ = function (evt) {
- this.previewContainerEl.classList.add("preview-upload-ongoing");
- pskl.app.imageUploadService.upload(this.getFramesheetAsCanvas().toDataURL("image/png"), this.onImageUploadCompleted_.bind(this));
- };
-
ns.PngExportController.prototype.onZipButtonClick_ = function () {
var zip = new window.JSZip();
@@ -43,8 +38,8 @@
var fileName = this.getPiskelName_() + '.zip';
- var fileContent = zip.generate({type:"blob"});
- pskl.utils.FileUtils.downloadAsFile(fileName, fileContent);
+ var blob = zip.generate({type:"blob"});
+ pskl.utils.FileUtils.downloadAsFile(blob, fileName);
};
ns.PngExportController.prototype.getFrameAsCanvas_ = function (frame) {
diff --git a/src/js/controller/settings/SaveController.js b/src/js/controller/settings/SaveController.js
index d0cfc38..b79a49f 100644
--- a/src/js/controller/settings/SaveController.js
+++ b/src/js/controller/settings/SaveController.js
@@ -13,13 +13,16 @@
this.nameInput = $('#save-name');
this.descriptionInput = $('#save-description');
this.isPublicCheckbox = $('input[name=save-public-checkbox]');
- this.saveCloudButton = $('#save-cloud-button');
+ this.saveOnlineButton = $('#save-online-button');
this.saveLocalButton = $('#save-local-button');
// Only available in app-engine mode ...
this.piskelName = $('.piskel-name').get(0);
- this.status = $('#save-status');
+ this.saveOnlineStatus = $('#save-online-status');
+
+ this.saveLocalStatus = $('#save-local-status');
+ this.timestamp = new Date();
var descriptor = this.piskelController.getPiskel().getDescriptor();
this.nameInput.val(descriptor.name);
@@ -27,27 +30,38 @@
this.isPublicCheckbox.prop('checked', descriptor.isPublic);
- if (!pskl.app.isLoggedIn()) {
- this.saveCloudButton.attr('disabled', 'disabled');
- this.status.html('You are not logged in. Only Local Save is available.');
- } else {
+ this.saveLocalButton.click(this.onSaveLocalClick_.bind(this));
+ this.nameInput.keyup(this.updateLocalStatusFilename_.bind(this));
+
+ if (pskl.app.isLoggedIn()) {
this.saveForm.submit(this.onSaveFormSubmit_.bind(this));
+ } else {
+ this.saveOnlineButton.hide();
+ $('.save-public-section').hide();
+ this.saveOnlineStatus.html(pskl.utils.Template.get('save-please-login-partial'));
+ this.saveLocalButton.get(0).classList.add('button-primary');
+ this.saveForm.submit(this.onSaveLocalClick_.bind(this));
}
- this.saveLocalButton.click(this.onSaveLocalClick_.bind(this));
+ this.updateLocalStatusFilename_();
+ };
+
+ ns.SaveController.prototype.updateLocalStatusFilename_ = function () {
+ this.saveLocalStatus.html(pskl.utils.Template.getAndReplace('save-local-status-template', {
+ name : this.getLocalFilename_()
+ }));
+ };
+
+ 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";
};
ns.SaveController.prototype.onSaveFormSubmit_ = function (evt) {
evt.preventDefault();
evt.stopPropagation();
- var name = this.getName();
- var description = this.getDescription();
- var isPublic = !!this.isPublicCheckbox.prop('checked');
-
- var descriptor = new pskl.model.piskel.Descriptor(name, description, isPublic);
- this.piskelController.getPiskel().setDescriptor(descriptor);
-
this.beforeSaving_();
pskl.app.storageService.store({
success : this.onSaveSuccess_.bind(this),
@@ -57,22 +71,13 @@
};
ns.SaveController.prototype.onSaveLocalClick_ = function (evt) {
- var localStorageService = pskl.app.localStorageService;
- var isOk = true;
- var name = this.getName();
- var description = this.getDescription();
- if (localStorageService.getPiskel(name)) {
- isOk = window.confirm('There is already a piskel saved as ' + name + '. Override ?');
- }
+ this.beforeSaving_();
- if (isOk) {
- this.beforeSaving_();
- localStorageService.save(name, description, pskl.app.piskelController.serialize());
- window.setTimeout(function () {
- this.onSaveSuccess_();
- this.afterSaving_();
- }.bind(this), 1000);
- }
+ pskl.utils.BlobUtils.stringToBlob(pskl.app.piskelController.serialize(), function(blob) {
+ pskl.utils.FileUtils.downloadAsFile(blob, this.getLocalFilename_());
+ this.onSaveSuccess_();
+ this.afterSaving_();
+ }.bind(this), "application/piskel+json");
};
ns.SaveController.prototype.getName = function () {
@@ -84,14 +89,25 @@
};
ns.SaveController.prototype.beforeSaving_ = function () {
- this.saveCloudButton.attr('disabled', true);
- this.status.html('Saving ...');
+ this.updatePiskelDescriptor_();
+
+ this.saveOnlineButton.attr('disabled', true);
+ this.saveOnlineStatus.html('Saving ...');
if (this.piskelName) {
this.piskelName.classList.add('piskel-name-saving');
}
};
+ ns.SaveController.prototype.updatePiskelDescriptor_ = function () {
+ var name = this.getName();
+ var description = this.getDescription();
+ var isPublic = !!this.isPublicCheckbox.prop('checked');
+
+ var descriptor = new pskl.model.piskel.Descriptor(name, description, isPublic);
+ this.piskelController.getPiskel().setDescriptor(descriptor);
+ };
+
ns.SaveController.prototype.onSaveSuccess_ = function () {
$.publish(Events.CLOSE_SETTINGS_DRAWER);
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Successfully saved !"}]);
@@ -103,8 +119,8 @@
};
ns.SaveController.prototype.afterSaving_ = function () {
- this.saveCloudButton.attr('disabled', false);
- this.status.html('');
+ this.saveOnlineButton.attr('disabled', false);
+ this.submitButton.html('');
if (this.piskelName) {
this.piskelName.classList.remove('piskel-name-saving');
diff --git a/src/js/controller/settings/SettingsController.js b/src/js/controller/settings/SettingsController.js
index f8c5fd8..5246fc0 100644
--- a/src/js/controller/settings/SettingsController.js
+++ b/src/js/controller/settings/SettingsController.js
@@ -10,12 +10,8 @@
template : 'templates/settings/resize.html',
controller : ns.ResizeController
},
- 'gif' : {
- template : 'templates/settings/export-gif.html',
- controller : ns.GifExportController
- },
'png' : {
- template : 'templates/settings/export-png.html',
+ template : 'templates/settings/export.html',
controller : ns.PngExportController
},
'import' : {
diff --git a/src/js/utils/ImageToBlob.js b/src/js/utils/BlobUtils.js
similarity index 71%
rename from src/js/utils/ImageToBlob.js
rename to src/js/utils/BlobUtils.js
index 49fe727..8ef595b 100644
--- a/src/js/utils/ImageToBlob.js
+++ b/src/js/utils/BlobUtils.js
@@ -3,8 +3,8 @@
var BASE64_REGEX = /\s*;\s*base64\s*(?:;|$)/i;
- ns.ImageToBlob = {
- imageDataToBlob : function(dataURI, type, callback) {
+ ns.BlobUtils = {
+ dataToBlob : function(dataURI, type, callback) {
var header_end = dataURI.indexOf(","),
data = dataURI.substring(header_end + 1),
isBase64 = BASE64_REGEX.test(dataURI.substring(0, header_end)),
@@ -26,13 +26,18 @@
canvasToBlob : function(canvas, callback, type /*, ...args*/) {
type = type || "image/png";
- if (this.mozGetAsFile) {
- callback(this.mozGetAsFile("canvas", type));
+ if (canvas.mozGetAsFile) {
+ callback(canvas.mozGetAsFile("canvas", type));
} else {
var args = Array.prototype.slice.call(arguments, 2);
var dataURI = canvas.toDataURL.apply(canvas, args);
- pskl.utils.ImageToBlob.imageDataToBlob(dataURI, type, callback);
+ pskl.utils.BlobUtils.dataToBlob(dataURI, type, callback);
}
+ },
+
+ stringToBlob : function (string, callback, type) {
+ type = type || "text/plain";
+ pskl.utils.BlobUtils.dataToBlob('data:'+type+',' + string, type, callback);
}
};
})();
\ No newline at end of file
diff --git a/src/js/utils/DateUtils.js b/src/js/utils/DateUtils.js
new file mode 100644
index 0000000..3e45e28
--- /dev/null
+++ b/src/js/utils/DateUtils.js
@@ -0,0 +1,24 @@
+(function () {
+ var ns = $.namespace('pskl.utils');
+
+ var pad = function (num) {
+ if (num < 10) {
+ return "0" + num;
+ } else {
+ return "" + num;
+ }
+ };
+
+ ns.DateUtils = {
+ format : function (date, format) {
+ return pskl.utils.Template.replace(format, {
+ Y : date.getFullYear(),
+ M : pad(date.getMonth() + 1),
+ D : pad(date.getDate()),
+ H : pad(date.getHours()),
+ m : pad(date.getMinutes()),
+ s : pad(date.getSeconds())
+ });
+ }
+ };
+})();
\ No newline at end of file
diff --git a/src/js/utils/FileUtils.js b/src/js/utils/FileUtils.js
index 3b87cdc..48cd934 100644
--- a/src/js/utils/FileUtils.js
+++ b/src/js/utils/FileUtils.js
@@ -10,7 +10,7 @@
reader.readAsDataURL(file);
},
- downloadAsFile : function (filename, content) {
+ downloadAsFile : function (content, filename) {
var saveAs = window.saveAs || (navigator.msSaveBlob && navigator.msSaveBlob.bind(navigator));
if (saveAs) {
saveAs(content, filename);
diff --git a/src/js/utils/Template.js b/src/js/utils/Template.js
index 01c9671..9a311d8 100644
--- a/src/js/utils/Template.js
+++ b/src/js/utils/Template.js
@@ -17,6 +17,15 @@
return dummyEl.children[0];
},
+ getAndReplace : function (templateId, dict) {
+ var result = "";
+ var tpl = pskl.utils.Template.get(templateId);
+ if (tpl) {
+ result = pskl.utils.Template.replace(tpl, dict);
+ }
+ return result;
+ },
+
replace : function (template, dict) {
for (var key in dict) {
if (dict.hasOwnProperty(key)) {
diff --git a/src/js/utils/serialization/Serializer.js b/src/js/utils/serialization/Serializer.js
index 271d41a..c9ab9f3 100644
--- a/src/js/utils/serialization/Serializer.js
+++ b/src/js/utils/serialization/Serializer.js
@@ -9,6 +9,9 @@
return JSON.stringify({
modelVersion : Constants.MODEL_VERSION,
piskel : {
+ name : piskel.getDescriptor().name,
+ description : piskel.getDescriptor().description,
+ fps : pskl.app.piskelController.getFPS(),
height : piskel.getHeight(),
width : piskel.getWidth(),
layers : serializedLayers,
diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js
index cbdc006..ee49670 100644
--- a/src/piskel-script-list.js
+++ b/src/piskel-script-list.js
@@ -24,13 +24,14 @@
"js/utils/core.js",
"js/utils/UserAgent.js",
"js/utils/Base64.js",
+ "js/utils/BlobUtils.js",
"js/utils/CanvasUtils.js",
+ "js/utils/DateUtils.js",
"js/utils/Dom.js",
"js/utils/Math.js",
"js/utils/FileUtils.js",
"js/utils/FrameUtils.js",
"js/utils/LayerUtils.js",
- "js/utils/ImageToBlob.js",
"js/utils/ImageResizer.js",
"js/utils/PixelUtils.js",
"js/utils/Template.js",
diff --git a/src/templates/settings.html b/src/templates/settings.html
index 2476029..ea26792 100644
--- a/src/templates/settings.html
+++ b/src/templates/settings.html
@@ -1,10 +1,5 @@
-
-
+
+
+
+
-
-
+
-->
-
ANIM
-
+ -->
- SHEET
\ No newline at end of file
diff --git a/src/templates/settings/export-gif.html b/src/templates/settings/export-gif.html
deleted file mode 100644
index 525fa1c..0000000
--- a/src/templates/settings/export-gif.html
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
- Export to Animated GIF
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/src/templates/settings/export-png.html b/src/templates/settings/export-png.html
deleted file mode 100644
index 08c9ee6..0000000
--- a/src/templates/settings/export-png.html
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
- Export Spritesheet as PNG
-
-
- Preview :
-
-
-
-
-
-
-
-
- Export Spritesheet as ZIP
-
-
- A ZIP archive will be created with one PNG file per frame.
-
- Download ZIP
-
-
-
\ No newline at end of file
diff --git a/src/templates/settings/export.html b/src/templates/settings/export.html
new file mode 100644
index 0000000..7a32c81
--- /dev/null
+++ b/src/templates/settings/export.html
@@ -0,0 +1,40 @@
+
+
+ Export Spritesheet
+
+
+
+ PNG with all frames side by side.
+
+
+
+ ZIP with one PNG file per frame.
+
+ Download ZIP
+
+
+
+ Export to Animated GIF
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/templates/settings/import.html b/src/templates/settings/import.html
index 6041cd3..968784c 100644
--- a/src/templates/settings/import.html
+++ b/src/templates/settings/import.html
@@ -1,33 +1,50 @@