mirror
/
piskel
mirror of https://github.com/piskelapp/piskel.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merged

This commit is contained in:
jdescottes 2013-12-18 23:22:25 +01:00
parent 8b6958bf0b b77f7057d7
commit e4cf2ac40b
26 changed files with 351 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
Gruntfile.js
View File

@ -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 : {
options : {
separator : ';'
},
dist : {
js : {
options : {
separator : ';'
},
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']);

4
css/forms.css
View File

@ -1,3 +1,7 @@
.row {
display: block;
}
.textfield {
background : black;
border : 1px solid #888;

28
css/settings.css
View File

@ -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
View File

@ -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
View File

@ -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 () {

2
js/controller/NotificationController.js
View File

@ -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";

4
js/controller/settings/ImportController.js
View File

@ -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);

67
js/controller/settings/SaveController.js
View File

@ -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);
};
})();

6
js/lib/iframeLoader.js
View File

@ -37,7 +37,11 @@
var storeFrame = function (iframe) {
var script=document.createElement("script");
script.setAttribute("type", "text/html");
script.setAttribute("id", iframe.getAttribute("src"));
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);

18
js/model/Piskel.js
View File

@ -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);
};
})();

0
js/model/PiskelDescriptor.js
View File

9
js/model/piskel/Descriptor.js Normal file
View 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
js/rendering/DrawingLoop.js
View File

@ -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.executeCallbacks_(delta);
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
View 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
View 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);
};
})();

8
js/service/HistoryService.js
View File

@ -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);
};
})();

1
js/service/LocalStorageService.js
View File

@ -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);
});

40
js/service/keyboard/ShortcutService.js
View File

@ -54,28 +54,36 @@
* @private
*/
ns.ShortcutService.prototype.onKeyUp_ = function(evt) {
// jquery names FTW ...
var keycode = evt.which;
var charkey = pskl.service.keyboard.KeycodeTranslator.toChar(keycode);
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];
if(keyShortcuts) {
var cb;
if (this.isCtrlKeyPressed_(evt)) {
cb = keyShortcuts.ctrl;
} else if (this.isShiftKeyPressed_(evt)) {
cb = keyShortcuts.shift;
} else {
cb = keyShortcuts.normal;
}
var keyShortcuts = this.shortcuts_[charkey];
if(keyShortcuts) {
var cb;
if (this.isCtrlKeyPressed_(evt)) {
cb = keyShortcuts.ctrl;
} else if (this.isShiftKeyPressed_(evt)) {
cb = keyShortcuts.shift;
} else {
cb = keyShortcuts.normal;
}
if(cb) {
cb(charkey);
evt.preventDefault();
if(cb) {
cb(charkey);
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) {
return this.isMac_() ? evt.metaKey : evt.ctrlKey;
};

4
js/utils/serialization/Deserializer.js
View File

@ -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;

3
js/utils/serialization/backward/Deserializer_v0.js
View File

@ -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));
};
})();

3
js/utils/serialization/backward/Deserializer_v1.js
View File

@ -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);

27
piskel-boot.js
View File

@ -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);

3
piskel-script-list.js
View File

@ -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
View 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"
];

1
templates/settings/export-gif.html
View File

@ -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>

20
templates/settings/save.html
View File

@ -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>