wbrawner/piskel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merged

Browse source
This commit is contained in:
jdescottes 2013-12-18 23:22:25 +01:00
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>