Merged
This commit is contained in:
commit
e4cf2ac40b
26 changed files with 351 additions and 150 deletions
11
Gruntfile.js
11
Gruntfile.js
|
@ -12,6 +12,7 @@
|
|||
|
||||
module.exports = function(grunt) {
|
||||
var piskelScripts = require('./piskel-script-list.js').scripts;
|
||||
var piskelStyles = require('./piskel-style-list.js').styles;
|
||||
var getGhostConfig = function (delay) {
|
||||
return {
|
||||
filesSrc : ['tests/integration/casperjs/*_test.js'],
|
||||
|
@ -68,12 +69,16 @@ module.exports = function(grunt) {
|
|||
local : getGhostConfig(50)
|
||||
},
|
||||
concat : {
|
||||
js : {
|
||||
options : {
|
||||
separator : ';'
|
||||
},
|
||||
dist : {
|
||||
src : piskelScripts,
|
||||
dest : 'build/piskel-packaged.js'
|
||||
},
|
||||
css : {
|
||||
src : piskelStyles,
|
||||
dest : 'build/piskel-style-packaged.css'
|
||||
}
|
||||
},
|
||||
uglify : {
|
||||
|
@ -171,8 +176,10 @@ module.exports = function(grunt) {
|
|||
// Compile JS code (eg verify JSDoc annotation and types, no actual minified code generated).
|
||||
grunt.registerTask('compile', ['closureCompiler:compile']);
|
||||
|
||||
grunt.registerTask('merge', ['concat:js', 'concat:css', 'uglify']);
|
||||
|
||||
// Validate & Build
|
||||
grunt.registerTask('default', ['leadingIndent:jsFiles', 'leadingIndent:cssFiles', 'jshint', 'concat', 'compile', 'uglify']);
|
||||
grunt.registerTask('default', ['leadingIndent:jsFiles', 'leadingIndent:cssFiles', 'jshint', 'concat:js', 'concat:css', 'compile', 'uglify']);
|
||||
|
||||
// Start webserver
|
||||
grunt.registerTask('serve', ['connect:serve']);
|
||||
|
|
|
@ -1,3 +1,7 @@
|
|||
.row {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.textfield {
|
||||
background : black;
|
||||
border : 1px solid #888;
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
-webkit-transition: all 200ms ease-out;
|
||||
-moz-transition: all 200ms ease-out;
|
||||
-ms-transition: all 200ms ease-out;
|
||||
-o-transition: all 200ms ease-out;
|
||||
transition: all 200ms ease-out;
|
||||
}
|
||||
|
||||
|
@ -51,6 +52,10 @@
|
|||
text-shadow: 1px 1px #000;
|
||||
}
|
||||
|
||||
.settings-section .button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.settings-title {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
|
@ -59,7 +64,9 @@
|
|||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.settings-item {}
|
||||
.settings-form-section {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.background-picker-wrapper {
|
||||
overflow: hidden;
|
||||
|
@ -179,7 +186,26 @@
|
|||
text-shadow: none;
|
||||
}
|
||||
|
||||
.save-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#save-status {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.status {
|
||||
height: 1.5rem;
|
||||
|
||||
word-break : break-all;
|
||||
vertical-align: middle;
|
||||
font-weight: normal;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
[name=smooth-resize-checkbox] {
|
||||
margin : 0 8px;
|
||||
}
|
||||
|
||||
[name*=checkbox] {
|
||||
vertical-align: middle;
|
||||
}
|
12
index.html
12
index.html
|
@ -7,18 +7,6 @@
|
|||
<meta name="description" content="">
|
||||
<meta name="author" content="Julian Descottes">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" type="text/css" href="css/reset.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/forms.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/settings.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/tools.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/cheatsheet.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/spectrum/spectrum.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="css/spectrum/spectrum-overrides.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-tooltip-custom.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/preview-film-section.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/minimap.css">
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript" src="js/lib/iframeLoader.js"></script>
|
||||
|
|
122
js/app.js
122
js/app.js
|
@ -10,12 +10,19 @@
|
|||
ns.app = {
|
||||
|
||||
init : function () {
|
||||
/**
|
||||
* True when piskel is running in static mode (no back end needed).
|
||||
* When started from APP Engine, appEngineToken_ (Boolean) should be set on window.pskl
|
||||
*/
|
||||
this.isAppEngineVersion = !!pskl.appEngineToken_;
|
||||
|
||||
this.shortcutService = new pskl.service.keyboard.ShortcutService();
|
||||
this.shortcutService.init();
|
||||
|
||||
var size = this.readSizeFromURL_();
|
||||
var piskel = new pskl.model.Piskel(size.width, size.height);
|
||||
piskel.setDescriptor("New Piskel", "Some text ...");
|
||||
|
||||
var descriptor = new pskl.model.piskel.Descriptor('New Piskel', '');
|
||||
var piskel = new pskl.model.Piskel(size.width, size.height, descriptor);
|
||||
|
||||
var layer = new pskl.model.Layer("Layer 1");
|
||||
var frame = new pskl.model.Frame(size.width, size.height);
|
||||
|
@ -65,31 +72,31 @@
|
|||
this.imageUploadService = new pskl.service.ImageUploadService();
|
||||
this.imageUploadService.init();
|
||||
|
||||
|
||||
this.cheatsheetService = new pskl.service.keyboard.CheatsheetService();
|
||||
this.cheatsheetService.init();
|
||||
|
||||
if (this.isAppEngineVersion) {
|
||||
this.storageService = new pskl.service.AppEngineStorageService(this.piskelController);
|
||||
} else {
|
||||
this.storageService = new pskl.service.GithubStorageService(this.piskelController);
|
||||
}
|
||||
this.storageService.init();
|
||||
|
||||
|
||||
var drawingLoop = new pskl.rendering.DrawingLoop();
|
||||
drawingLoop.addCallback(this.render, this);
|
||||
drawingLoop.start();
|
||||
|
||||
this.initBootstrapTooltips_();
|
||||
this.initTooltips_();
|
||||
|
||||
/**
|
||||
* True when piskel is running in static mode (no back end needed).
|
||||
* When started from APP Engine, appEngineToken_ (Boolean) should be set on window.pskl
|
||||
*/
|
||||
this.isStaticVersion = !pskl.appEngineToken_;
|
||||
|
||||
if (this.isStaticVersion) {
|
||||
this.finishInitStatic_();
|
||||
} else {
|
||||
if (this.isAppEngineVersion) {
|
||||
this.finishInitAppEngine_();
|
||||
} else {
|
||||
this.finishInitGithub_();
|
||||
}
|
||||
},
|
||||
|
||||
finishInitStatic_ : function () {
|
||||
finishInitGithub_ : function () {
|
||||
var framesheetId = this.readFramesheetIdFromURL_();
|
||||
if (framesheetId) {
|
||||
$.publish(Events.SHOW_NOTIFICATION, [{
|
||||
|
@ -102,15 +109,16 @@
|
|||
},
|
||||
|
||||
finishInitAppEngine_ : function () {
|
||||
if (pskl.framesheetData_ && pskl.framesheetData_.content) {
|
||||
pskl.utils.serialization.Deserializer.deserialize(pskl.framesheetData_.content, function (piskel) {
|
||||
if (pskl.appEnginePiskelData_ && pskl.appEnginePiskelData_.piskel) {
|
||||
pskl.utils.serialization.Deserializer.deserialize(pskl.appEnginePiskelData_.piskel, function (piskel) {
|
||||
piskel.setDescriptor(pskl.appEnginePiskelData_.descriptor);
|
||||
pskl.app.piskelController.setPiskel(piskel);
|
||||
pskl.app.animationController.setFPS(pskl.framesheetData_.fps);
|
||||
pskl.app.animationController.setFPS(pskl.appEnginePiskelData_.fps);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
initBootstrapTooltips_ : function () {
|
||||
initTooltips_ : function () {
|
||||
$('body').tooltip({
|
||||
selector: '[rel=tooltip]'
|
||||
});
|
||||
|
@ -123,8 +131,8 @@
|
|||
},
|
||||
|
||||
readSizeFromURL_ : function () {
|
||||
var sizeParam = this.readUrlParameter_("size"),
|
||||
size;
|
||||
var sizeParam = this.readUrlParameter_("size");
|
||||
var size;
|
||||
// parameter expected as size=64x48 => size=widthxheight
|
||||
var parts = sizeParam.split("x");
|
||||
if (parts && parts.length == 2 && !isNaN(parts[0]) && !isNaN(parts[1])) {
|
||||
|
@ -149,13 +157,12 @@
|
|||
},
|
||||
|
||||
readUrlParameter_ : function (paramName) {
|
||||
var searchString = window.location.search.substring(1),
|
||||
i, val, params = searchString.split("&");
|
||||
|
||||
for (i = 0; i < params.length; i++) {
|
||||
val = params[i].split("=");
|
||||
if (val[0] == paramName) {
|
||||
return window.unescape(val[1]);
|
||||
var searchString = window.location.search.substring(1);
|
||||
var params = searchString.split("&");
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
var param = params[i].split("=");
|
||||
if (param[0] == paramName) {
|
||||
return window.unescape(param[1]);
|
||||
}
|
||||
}
|
||||
return "";
|
||||
|
@ -182,65 +189,8 @@
|
|||
xhr.send();
|
||||
},
|
||||
|
||||
storeSheet : function (event) {
|
||||
if (this.isStaticVersion) {
|
||||
this.storeSheetStatic_();
|
||||
} else {
|
||||
this.storeSheetAppEngine_();
|
||||
}
|
||||
|
||||
if(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
storeSheetStatic_ : function () {
|
||||
var xhr = new XMLHttpRequest();
|
||||
var formData = new FormData();
|
||||
formData.append('framesheet_content', this.piskelController.serialize());
|
||||
formData.append('fps_speed', $('#preview-fps').val());
|
||||
|
||||
xhr.open('POST', Constants.STATIC.URL.SAVE, true);
|
||||
|
||||
xhr.onload = function(e) {
|
||||
if (this.status == 200) {
|
||||
var baseUrl = window.location.href.replace(window.location.search, "");
|
||||
window.location.href = baseUrl + "?frameId=" + this.responseText;
|
||||
} else {
|
||||
this.onerror(e);
|
||||
}
|
||||
};
|
||||
xhr.onerror = function(e) {
|
||||
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+this.status+")"}]);
|
||||
};
|
||||
xhr.send(formData);
|
||||
},
|
||||
|
||||
storeSheetAppEngine_ : function () {
|
||||
var xhr = new XMLHttpRequest();
|
||||
var formData = new FormData();
|
||||
formData.append('framesheet_content', this.piskelController.serialize());
|
||||
formData.append('fps_speed', $('#preview-fps').val());
|
||||
formData.append('name', $('#piskel-name').val());
|
||||
formData.append('frames', this.piskelController.getFrameCount());
|
||||
formData.append('preview', this.getFirstFrameAsPng());
|
||||
formData.append('framesheet', this.getFramesheetAsPng());
|
||||
|
||||
xhr.open('POST', Constants.APPENGINE.URL.SAVE, true);
|
||||
|
||||
xhr.onload = function(e) {
|
||||
if (this.status == 200) {
|
||||
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Successfully saved !"}]);
|
||||
} else {
|
||||
this.onerror(e);
|
||||
}
|
||||
};
|
||||
xhr.onerror = function(e) {
|
||||
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+this.status+")"}]);
|
||||
};
|
||||
xhr.send(formData);
|
||||
store : function (callbacks) {
|
||||
this.storageService.store(callbacks);
|
||||
},
|
||||
|
||||
getFirstFrameAsPng : function () {
|
||||
|
|
|
@ -15,6 +15,8 @@
|
|||
* @private
|
||||
*/
|
||||
ns.NotificationController.prototype.displayMessage_ = function (evt, messageInfo) {
|
||||
this.removeMessage_();
|
||||
|
||||
var message = document.createElement('div');
|
||||
message.id = "user-message";
|
||||
message.className = "user-message";
|
||||
|
|
|
@ -154,7 +154,9 @@
|
|||
var frame = pskl.utils.FrameUtils.createFromImage(image);
|
||||
|
||||
var layer = pskl.model.Layer.fromFrames('Layer 1', [frame]);
|
||||
var piskel = pskl.model.Piskel.fromLayers([layer]);
|
||||
|
||||
var descriptor = new pskl.model.piskel.Descriptor('Imported piskel', '');
|
||||
var piskel = pskl.model.Piskel.fromLayers([layer], descriptor);
|
||||
|
||||
pskl.app.piskelController.setPiskel(piskel);
|
||||
pskl.app.animationController.setFPS(Constants.DEFAULT.FPS);
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
(function () {
|
||||
var ns = $.namespace("pskl.controller.settings");
|
||||
var ns = $.namespace('pskl.controller.settings');
|
||||
|
||||
ns.SaveController = function (piskelController) {
|
||||
this.piskelController = piskelController;
|
||||
|
@ -9,10 +9,67 @@
|
|||
* @public
|
||||
*/
|
||||
ns.SaveController.prototype.init = function () {
|
||||
this.titleInput = document.getElementById("save-title");
|
||||
this.descriptionInput = document.getElementById("save-description");
|
||||
this.saveForm = $('form[name=save-form]');
|
||||
this.nameInput = $('#save-name');
|
||||
this.descriptionInput = $('#save-description');
|
||||
this.isPublicCheckbox = $('input[name=save-public-checkbox]');
|
||||
this.saveButton = $('#save-button');
|
||||
this.status = $('#save-status');
|
||||
|
||||
this.titleInput.value = this.piskelController.piskel.getDescriptor().name;
|
||||
this.descriptionInput.value = this.piskelController.piskel.getDescriptor().description;
|
||||
var descriptor = this.piskelController.piskel.getDescriptor();
|
||||
this.nameInput.val(descriptor.name);
|
||||
this.descriptionInput.val(descriptor.description);
|
||||
|
||||
this.isPublicCheckbox.prop('checked', descriptor.isPublic);
|
||||
|
||||
if (!pskl.app.isAppEngineVersion) {
|
||||
this.nameInput.attr('disabled', 'disabled');
|
||||
this.descriptionInput.attr('disabled', 'disabled');
|
||||
this.isPublicCheckbox.attr('disabled', 'disabled');
|
||||
}
|
||||
|
||||
this.saveForm.submit(this.onSaveFormSubmit_.bind(this));
|
||||
};
|
||||
|
||||
ns.SaveController.prototype.onSaveFormSubmit_ = function (evt) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
|
||||
var name = this.nameInput.val();
|
||||
var description = this.descriptionInput.val();
|
||||
var isPublic = !!this.isPublicCheckbox.prop('checked');
|
||||
|
||||
var descriptor = new pskl.model.piskel.Descriptor(name, description, isPublic);
|
||||
this.piskelController.piskel.setDescriptor(descriptor);
|
||||
|
||||
this.beforeSaving_();
|
||||
pskl.app.store({
|
||||
success : this.onSaveSuccess_.bind(this),
|
||||
error : this.onSaveError_.bind(this),
|
||||
after : this.afterSaving_.bind(this)
|
||||
});
|
||||
};
|
||||
|
||||
ns.SaveController.prototype.beforeSaving_ = function () {
|
||||
this.saveButton.attr('disabled', true);
|
||||
this.status.html('Saving ...');
|
||||
$('.piskel-name').get(0).classList.add('piskel-name-saving');
|
||||
};
|
||||
|
||||
ns.SaveController.prototype.onSaveSuccess_ = function () {
|
||||
$.publish(Events.CLOSE_SETTINGS_DRAWER);
|
||||
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Successfully saved !"}]);
|
||||
};
|
||||
|
||||
ns.SaveController.prototype.onSaveError_ = function (status) {
|
||||
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+status+")"}]);
|
||||
};
|
||||
|
||||
ns.SaveController.prototype.afterSaving_ = function () {
|
||||
this.saveButton.attr('disabled', false);
|
||||
this.status.html('');
|
||||
$('.piskel-name').get(0).classList.remove('piskel-name-saving');
|
||||
|
||||
window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 2000);
|
||||
};
|
||||
})();
|
|
@ -37,7 +37,11 @@
|
|||
var storeFrame = function (iframe) {
|
||||
var script=document.createElement("script");
|
||||
script.setAttribute("type", "text/html");
|
||||
if (window.pskl && window.pskl.appEngineToken_) {
|
||||
script.setAttribute("id", iframe.getAttribute("src").replace('../',''));
|
||||
} else {
|
||||
script.setAttribute("id", iframe.getAttribute("src"));
|
||||
}
|
||||
script.innerHTML = iframe.contentWindow.document.body.innerHTML;
|
||||
iframe.parentNode.removeChild(iframe);
|
||||
document.body.appendChild(script);
|
||||
|
|
|
@ -8,8 +8,8 @@
|
|||
* @param {String} name
|
||||
* @param {String} description
|
||||
*/
|
||||
ns.Piskel = function (width, height) {
|
||||
if (width && height) {
|
||||
ns.Piskel = function (width, height, descriptor) {
|
||||
if (width && height && descriptor) {
|
||||
/** @type {Array} */
|
||||
this.layers = [];
|
||||
|
||||
|
@ -19,7 +19,7 @@
|
|||
/** @type {Number} */
|
||||
this.height = height;
|
||||
|
||||
this.descriptor = null;
|
||||
this.descriptor = descriptor;
|
||||
} else {
|
||||
throw 'Missing arguments in Piskel constructor : ' + Array.prototype.join.call(arguments, ",");
|
||||
}
|
||||
|
@ -31,11 +31,11 @@
|
|||
* @param {Array<pskl.model.Layer>} layers
|
||||
* @return {pskl.model.Piskel}
|
||||
*/
|
||||
ns.Piskel.fromLayers = function (layers) {
|
||||
ns.Piskel.fromLayers = function (layers, descriptor) {
|
||||
var piskel = null;
|
||||
if (layers.length > 0 && layers[0].length() > 0) {
|
||||
var sampleFrame = layers[0].getFrameAt(0);
|
||||
piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight());
|
||||
piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight(), descriptor);
|
||||
layers.forEach(piskel.addLayer.bind(piskel));
|
||||
} else {
|
||||
throw 'Piskel.fromLayers expects array of non empty pskl.model.Layer as first argument';
|
||||
|
@ -104,11 +104,9 @@
|
|||
return this.descriptor;
|
||||
};
|
||||
|
||||
ns.Piskel.prototype.setDescriptor = function (name, desc) {
|
||||
this.descriptor = {
|
||||
name : name,
|
||||
description : desc
|
||||
};
|
||||
ns.Piskel.prototype.setDescriptor = function (descriptor) {
|
||||
this.descriptor = descriptor;
|
||||
var appEngineEditorHeader = $('.piskel-name').html(this.descriptor.name);
|
||||
};
|
||||
|
||||
})();
|
9
js/model/piskel/Descriptor.js
Normal file
9
js/model/piskel/Descriptor.js
Normal file
|
@ -0,0 +1,9 @@
|
|||
(function () {
|
||||
var ns = $.namespace('pskl.model.piskel');
|
||||
|
||||
ns.Descriptor = function (name, description, isPublic) {
|
||||
this.name = name;
|
||||
this.description = description;
|
||||
this.isPublic = isPublic;
|
||||
};
|
||||
})();
|
|
@ -6,6 +6,7 @@
|
|||
this.isRunning = false;
|
||||
this.previousTime = 0;
|
||||
this.callbacks = [];
|
||||
this.i = 0;
|
||||
};
|
||||
|
||||
ns.DrawingLoop.prototype.addCallback = function (callback, scope, args) {
|
||||
|
@ -33,7 +34,10 @@
|
|||
ns.DrawingLoop.prototype.loop_ = function () {
|
||||
var currentTime = Date.now();
|
||||
var delta = currentTime - this.previousTime;
|
||||
this.i++;
|
||||
if(this.i%2 === 0) {
|
||||
this.executeCallbacks_(delta);
|
||||
}
|
||||
this.previousTime = currentTime;
|
||||
this.requestAnimationFrame.call(window, this.loop_.bind(this));
|
||||
};
|
||||
|
|
49
js/service/AppEngineStorageService.js
Normal file
49
js/service/AppEngineStorageService.js
Normal file
|
@ -0,0 +1,49 @@
|
|||
(function () {
|
||||
var ns = $.namespace('pskl.service');
|
||||
|
||||
ns.AppEngineStorageService = function (piskelController) {
|
||||
this.piskelController = piskelController;
|
||||
};
|
||||
|
||||
ns.AppEngineStorageService.prototype.init = function () {};
|
||||
|
||||
ns.AppEngineStorageService.prototype.store = function (callbacks) {
|
||||
var formData = this.prepareFormData_();
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', Constants.APPENGINE.URL.SAVE, true);
|
||||
|
||||
xhr.onload = function(e) {
|
||||
if (this.status == 200) {
|
||||
callbacks.success();
|
||||
callbacks.after();
|
||||
} else {
|
||||
this.onerror(e);
|
||||
}
|
||||
};
|
||||
xhr.onerror = function(e) {
|
||||
callbacks.error(this.status);
|
||||
callbacks.after();
|
||||
};
|
||||
xhr.send(formData);
|
||||
};
|
||||
|
||||
ns.AppEngineStorageService.prototype.prepareFormData_ = function () {
|
||||
var piskel = this.piskelController.piskel;
|
||||
var descriptor = piskel.getDescriptor();
|
||||
|
||||
var formData = new FormData();
|
||||
formData.append('framesheet', this.piskelController.serialize());
|
||||
formData.append('fps', this.piskelController.getFPS());
|
||||
formData.append('name', descriptor.name);
|
||||
formData.append('description', descriptor.description);
|
||||
if (descriptor.isPublic) {
|
||||
formData.append('public', true);
|
||||
}
|
||||
formData.append('frames', this.piskelController.getFrameCount());
|
||||
formData.append('first_frame_as_png', pskl.app.getFirstFrameAsPng());
|
||||
formData.append('framesheet_as_png', pskl.app.getFramesheetAsPng());
|
||||
|
||||
return formData;
|
||||
};
|
||||
})();
|
31
js/service/GithubStorageService.js
Normal file
31
js/service/GithubStorageService.js
Normal file
|
@ -0,0 +1,31 @@
|
|||
(function () {
|
||||
var ns = $.namespace('pskl.service');
|
||||
|
||||
ns.GithubStorageService = function (piskelController) {
|
||||
this.piskelController = piskelController;
|
||||
};
|
||||
|
||||
ns.GithubStorageService.prototype.init = function () {};
|
||||
|
||||
ns.GithubStorageService.prototype.store = function (callbacks) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
var formData = new FormData();
|
||||
formData.append('framesheet_content', this.piskelController.serialize());
|
||||
formData.append('fps_speed', this.piskelController.getFPS());
|
||||
|
||||
xhr.open('POST', Constants.STATIC.URL.SAVE, true);
|
||||
|
||||
xhr.onload = function(e) {
|
||||
if (this.status == 200) {
|
||||
var baseUrl = window.location.href.replace(window.location.search, "");
|
||||
window.location.href = baseUrl + "?frameId=" + this.responseText;
|
||||
} else {
|
||||
this.onerror(e);
|
||||
}
|
||||
};
|
||||
xhr.onerror = function(e) {
|
||||
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+this.status+")"}]);
|
||||
};
|
||||
xhr.send(formData);
|
||||
};
|
||||
})();
|
|
@ -2,11 +2,13 @@
|
|||
var ns = $.namespace("pskl.service");
|
||||
ns.HistoryService = function (piskelController) {
|
||||
this.piskelController = piskelController;
|
||||
this.saveState__b = this.saveState.bind(this);
|
||||
};
|
||||
|
||||
ns.HistoryService.prototype.init = function () {
|
||||
|
||||
$.subscribe(Events.TOOL_RELEASED, this.saveState.bind(this));
|
||||
$.subscribe(Events.PISKEL_RESET, this.saveState__b);
|
||||
$.subscribe(Events.TOOL_RELEASED, this.saveState__b);
|
||||
|
||||
pskl.app.shortcutService.addShortcut('ctrl+Z', this.undo.bind(this));
|
||||
pskl.app.shortcutService.addShortcut('ctrl+Y', this.redo.bind(this));
|
||||
|
@ -18,12 +20,16 @@
|
|||
|
||||
ns.HistoryService.prototype.undo = function () {
|
||||
this.piskelController.getCurrentFrame().loadPreviousState();
|
||||
$.unsubscribe(Events.PISKEL_RESET, this.saveState__b);
|
||||
$.publish(Events.PISKEL_RESET);
|
||||
$.subscribe(Events.PISKEL_RESET, this.saveState__b);
|
||||
};
|
||||
|
||||
ns.HistoryService.prototype.redo = function () {
|
||||
this.piskelController.getCurrentFrame().loadNextState();
|
||||
$.unsubscribe(Events.PISKEL_RESET, this.saveState__b);
|
||||
$.publish(Events.PISKEL_RESET);
|
||||
$.subscribe(Events.PISKEL_RESET, this.saveState__b);
|
||||
};
|
||||
|
||||
})();
|
|
@ -45,6 +45,7 @@
|
|||
*/
|
||||
ns.LocalStorageService.prototype.restoreFromLocalStorage_ = function() {
|
||||
var framesheet = JSON.parse(window.localStorage.snapShot);
|
||||
|
||||
pskl.utils.serialization.Deserializer.deserialize(framesheet, function (piskel) {
|
||||
pskl.app.piskelController.setPiskel(piskel);
|
||||
});
|
||||
|
|
|
@ -54,8 +54,10 @@
|
|||
* @private
|
||||
*/
|
||||
ns.ShortcutService.prototype.onKeyUp_ = function(evt) {
|
||||
if (!this.isInInput_(evt)) {
|
||||
// jquery names FTW ...
|
||||
var keycode = evt.which;
|
||||
var targetTagName = evt.target.nodeName.toUpperCase();
|
||||
var charkey = pskl.service.keyboard.KeycodeTranslator.toChar(keycode);
|
||||
|
||||
var keyShortcuts = this.shortcuts_[charkey];
|
||||
|
@ -74,6 +76,12 @@
|
|||
evt.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ns.ShortcutService.prototype.isInInput_ = function (evt) {
|
||||
var targetTagName = evt.target.nodeName.toUpperCase();
|
||||
return targetTagName === 'INPUT' || targetTagName === 'TEXTAREA';
|
||||
};
|
||||
|
||||
ns.ShortcutService.prototype.isCtrlKeyPressed_ = function (evt) {
|
||||
|
|
|
@ -23,7 +23,9 @@
|
|||
ns.Deserializer.prototype.deserialize = function () {
|
||||
var data = this.data_;
|
||||
var piskelData = data.piskel;
|
||||
this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height);
|
||||
|
||||
var descriptor = new pskl.model.piskel.Descriptor('Deserialized piskel', '');
|
||||
this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height, descriptor);
|
||||
|
||||
this.layersToLoad_ = piskelData.layers.length;
|
||||
|
||||
|
|
|
@ -11,8 +11,9 @@
|
|||
var frames = pixelGrids.map(function (grid) {
|
||||
return pskl.model.Frame.fromPixelGrid(grid);
|
||||
});
|
||||
var descriptor = new pskl.model.piskel.Descriptor('Deserialized piskel', '');
|
||||
var layer = pskl.model.Layer.fromFrames('Layer 1', frames);
|
||||
|
||||
this.callback_(pskl.model.Piskel.fromLayers([layer]));
|
||||
this.callback_(pskl.model.Piskel.fromLayers([layer], descriptor));
|
||||
};
|
||||
})();
|
|
@ -8,7 +8,8 @@
|
|||
|
||||
ns.Deserializer_v1.prototype.deserialize = function () {
|
||||
var piskelData = this.data_.piskel;
|
||||
var piskel = new pskl.model.Piskel(piskelData.width, piskelData.height);
|
||||
var descriptor = new pskl.model.piskel.Descriptor('Deserialized piskel', '');
|
||||
var piskel = new pskl.model.Piskel(piskelData.width, piskelData.height, descriptor);
|
||||
|
||||
piskelData.layers.forEach(function (serializedLayer) {
|
||||
var layer = this.deserializeLayer(serializedLayer);
|
||||
|
|
|
@ -1,12 +1,29 @@
|
|||
(function () {
|
||||
var prefixPath = function (path) {
|
||||
if (window.pskl && window.pskl.appEngineToken_) {
|
||||
return '../' + path;
|
||||
} else {
|
||||
return path;
|
||||
}
|
||||
};
|
||||
|
||||
var loadScript = function (src, callback) {
|
||||
src = prefixPath(src);
|
||||
var script = window.document.createElement('script');
|
||||
script.setAttribute('src',src);
|
||||
script.setAttribute('onload',callback);
|
||||
window.document.body.appendChild(script);
|
||||
};
|
||||
|
||||
var loadStyle = function (src) {
|
||||
src = prefixPath(src);
|
||||
var link = document.createElement('link');
|
||||
link.setAttribute('href', src);
|
||||
link.setAttribute('rel', 'stylesheet');
|
||||
link.setAttribute('type', 'text/css');
|
||||
document.head.appendChild(link);
|
||||
};
|
||||
|
||||
if (window.location.href.indexOf("debug") != -1) {
|
||||
window.exports = {};
|
||||
var scriptIndex = 0;
|
||||
|
@ -23,6 +40,14 @@
|
|||
}
|
||||
};
|
||||
loadScript("piskel-script-list.js", "loadNextScript()");
|
||||
|
||||
window.loadStyles = function () {
|
||||
var styles = window.exports.styles;
|
||||
for (var i = 0 ; i < styles.length ; i++) {
|
||||
loadStyle(styles[i]);
|
||||
}
|
||||
};
|
||||
loadScript("piskel-style-list.js", "loadStyles()");
|
||||
} else {
|
||||
var script;
|
||||
if (window.location.href.indexOf("pack") != -1) {
|
||||
|
@ -30,6 +55,8 @@
|
|||
} else {
|
||||
script = "build/piskel-packaged-min.js";
|
||||
}
|
||||
loadStyle('build/piskel-style-packaged.css');
|
||||
|
||||
var loaderInterval = window.setInterval(function () {
|
||||
if (document.querySelectorAll("[data-iframe-loader]").length === 0) {
|
||||
window.clearInterval(loaderInterval);
|
||||
|
|
|
@ -37,6 +37,7 @@ exports.scripts = [
|
|||
// Models
|
||||
"js/model/Frame.js",
|
||||
"js/model/Layer.js",
|
||||
"js/model/piskel/Descriptor.js",
|
||||
"js/model/Piskel.js",
|
||||
|
||||
// Selection
|
||||
|
@ -76,6 +77,8 @@ exports.scripts = [
|
|||
|
||||
// Services
|
||||
"js/service/LocalStorageService.js",
|
||||
"js/service/GithubStorageService.js",
|
||||
"js/service/AppEngineStorageService.js",
|
||||
"js/service/HistoryService.js",
|
||||
"js/service/keyboard/ShortcutService.js",
|
||||
"js/service/keyboard/KeycodeTranslator.js",
|
||||
|
|
16
piskel-style-list.js
Normal file
16
piskel-style-list.js
Normal file
|
@ -0,0 +1,16 @@
|
|||
// This list is used both by the grunt build and index.html (in debug mode)
|
||||
|
||||
exports.styles = [
|
||||
"css/reset.css",
|
||||
"css/style.css",
|
||||
"css/forms.css",
|
||||
"css/settings.css",
|
||||
"css/tools.css",
|
||||
"css/cheatsheet.css",
|
||||
"css/spectrum/spectrum.css",
|
||||
"css/spectrum/spectrum-overrides.css",
|
||||
"css/bootstrap/bootstrap.css",
|
||||
"css/bootstrap/bootstrap-tooltip-custom.css",
|
||||
"css/preview-film-section.css",
|
||||
"css/minimap.css"
|
||||
];
|
|
@ -11,7 +11,6 @@
|
|||
</script>
|
||||
<div class="gif-export-radio-group"></div>
|
||||
<input type="submit" class="button button-primary gif-upload-button" value="Upload" />
|
||||
<button type="button" class="button gif-render-button">Render</button>
|
||||
</form>
|
||||
<div class="gif-export-preview"></div>
|
||||
</div>
|
||||
|
|
|
@ -2,15 +2,21 @@
|
|||
<div class="settings-title">Save</div>
|
||||
<div class="settings-item">
|
||||
<form action="" method="POST" name="save-form">
|
||||
<div class="row">
|
||||
<label>Title : </label>
|
||||
<div class="settings-form-section">
|
||||
<label class="row">Title : </label>
|
||||
<input id="save-name" type="text" class="save-field textfield"/>
|
||||
</div>
|
||||
<input id="save-title" type="text" class="textfield" style="width :100%;"/>
|
||||
<div class="row">
|
||||
<label>Description :</label>
|
||||
<div class="settings-form-section">
|
||||
<label class="row">Description :</label>
|
||||
<textarea id="save-description" class="save-field textfield" placeholder="Your piskel in a few words"></textarea>
|
||||
</div>
|
||||
<textarea id="save-description" class="textfield" style="width :100%;"></textarea>
|
||||
<input type="submit" class="button button-primary gif-upload-button" value="Save" />
|
||||
<div class="settings-form-section">
|
||||
<label class="row">
|
||||
Public : <input type="checkbox" value="1" name="save-public-checkbox"/>
|
||||
</label>
|
||||
</div>
|
||||
<input type="submit" class="button button-primary" id="save-button" value="Save" />
|
||||
<span id="save-status" class="status"></span>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
Loading…
Reference in a new issue