This commit is contained in:
jdescottes 2015-03-02 21:39:57 +01:00
parent bbacd6d8ed
commit d35308f1df
13 changed files with 28135 additions and 103 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,86 @@
(function () {
/**
* See @Gruntfile.js => after build, -2015-03-02-09-38 is replaced by the build version
*/
var version = '-2015-03-02-09-38';
var versionHasNotBeenReplaced = version.indexOf('@@') === 0;
if (versionHasNotBeenReplaced) {
version = '';
}
window.onPiskelReady = function () {
var loadingMask = document.getElementById('loading-mask');
loadingMask.style.opacity = 0;
window.setTimeout(function () {loadingMask.parentNode.removeChild(loadingMask);}, 600);
pskl.app.init();
// cleanup
delete window.pskl_exports;
delete window.loadDebugScripts;
delete window.done;
};
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.pskl_exports = {};
var scriptIndex = 0;
window.loadNextScript = function () {
if (scriptIndex == window.pskl_exports.scripts.length) {
window.onPiskelReady();
} else {
loadScript(window.pskl_exports.scripts[scriptIndex], 'loadNextScript()');
scriptIndex ++;
}
};
loadScript('piskel-script-list.js', 'loadNextScript()');
window.loadStyles = function () {
var styles = window.pskl_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) {
script = 'js/piskel-packaged' + version + '.js';
} else {
script = 'js/piskel-packaged-min' + version + '.js';
}
loadStyle('css/piskel-style-packaged' + version + '.css');
var loaderInterval = window.setInterval(function () {
if (document.querySelectorAll('[data-iframe-loader]').length === 0) {
window.clearInterval(loaderInterval);
loadScript(script, 'onPiskelReady()');
} else {
window.console.log('waiting for templates to load ....');
}
}, 100);
}
})();

View File

@ -1,9 +1,9 @@
(function () {
/**
* See @Gruntfile.js => after build, -2015-02-19-01-09 is replaced by the build version
* See @Gruntfile.js => after build, -2015-03-02-09-38 is replaced by the build version
*/
var version = '-2015-02-19-01-09';
var version = '-2015-03-02-09-38';
var versionHasNotBeenReplaced = version.indexOf('@@') === 0;
if (versionHasNotBeenReplaced) {
version = '';

View File

@ -1,10 +1,10 @@
<div id="main-wrapper" class="main-wrapper">
<iframe src="../templates-2015-02-19-01-09/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="../templates-2015-03-02-09-38/drawing-tools.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<div id="column-wrapper" class="column-wrapper">
<div class='column left-column'>
<iframe src="../templates-2015-02-19-01-09/frames-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="../templates-2015-03-02-09-38/frames-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
</div>
<div class='column main-column'>
@ -14,24 +14,24 @@
</div>
<div class="column right-column">
<iframe src="../templates-2015-02-19-01-09/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="../templates-2015-02-19-01-09/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="../templates-2015-02-19-01-09/transformations.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="../templates-2015-02-19-01-09/palettes-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="../templates-2015-03-02-09-38/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="../templates-2015-03-02-09-38/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="../templates-2015-03-02-09-38/transformations.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="../templates-2015-03-02-09-38/palettes-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<div class="pull-bottom cursor-coordinates"></div>
</div>
</div>
<div id="application-action-section" data-pskl-controller="settings" class="sticky-section right-sticky-section">
<div class="sticky-section-wrap">
<iframe src="../templates-2015-02-19-01-09/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="../templates-2015-03-02-09-38/settings.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<div class="drawer vertical-centerer">
<div class="drawer-content" id="drawer-container">
<iframe src="../templates-2015-02-19-01-09/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="../templates-2015-02-19-01-09/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="../templates-2015-02-19-01-09/settings/save.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="../templates-2015-02-19-01-09/settings/import.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="../templates-2015-02-19-01-09/settings/export.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="../templates-2015-03-02-09-38/settings/application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="../templates-2015-03-02-09-38/settings/resize.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="../templates-2015-03-02-09-38/settings/save.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="../templates-2015-03-02-09-38/settings/import.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="../templates-2015-03-02-09-38/settings/export.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
</div>
</div>
</div>
@ -40,13 +40,13 @@
<div id="dialog-container-wrapper">
<div id="dialog-container">
<iframe src="../templates-2015-02-19-01-09/dialogs/create-palette.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="../templates-2015-02-19-01-09/dialogs/import-image.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="../templates-2015-02-19-01-09/dialogs/browse-local.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="../templates-2015-03-02-09-38/dialogs/create-palette.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="../templates-2015-03-02-09-38/dialogs/import-image.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="../templates-2015-03-02-09-38/dialogs/browse-local.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
</div>
</div>
<iframe src="../templates-2015-02-19-01-09/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="../templates-2015-02-19-01-09/misc-templates.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="../templates-2015-03-02-09-38/cheatsheet.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="../templates-2015-03-02-09-38/misc-templates.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<script type="text/javascript" src="../piskel-boot-2015-02-19-01-09.js"></script>
<script type="text/javascript" src="../piskel-boot-2015-03-02-09-38.js"></script>

74
popup-preview.html Normal file
View File

@ -0,0 +1,74 @@
<!doctype html>
<html>
<head>
<style>
body,
.popup-container ,
.preview-container,
.tiled-frame-container {
width : 100%;
height : 100%;
}
body {
margin: 0;
}
.popup-container {
position: absolute;
background : #333;
}
.preview-container {
position: relative;
}
.tiled-frame-container {
position: relative;
background-repeat : no-repeat;
}
.canvas-container .canvas-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.light-picker-background,
.light-canvas-background .canvas-background {
background: url(../img/canvas_background/light_canvas_background.png) repeat;
}
.medium-picker-background,
.medium-canvas-background .canvas-background {
background: url(../img/canvas_background/medium_canvas_background.png) repeat;
}
.lowcont-medium-picker-background,
.lowcont-medium-canvas-background .canvas-background {
background: url(../img/canvas_background/lowcont_medium_canvas_background.png) repeat;
}
.lowcont-dark-picker-background,
.lowcont-dark-canvas-background .canvas-background {
background: url(../img/canvas_background/lowcont_dark_canvas_background.png) repeat;
}
</style>
<title>Preview</title>
</head>
<body>
<div class="popup-container lowcont-dark-canvas-background ">
<div class="preview-container canvas-container">
<div class="canvas-background"></div>
</div>
</div>
<script type="text/javascript">
window.addEventListener('load', function () {
window.opener.pskl.app.previewController.popupPreviewController.onPopupLoaded()
});
</script>
</body>
</html>

View File

@ -1,5 +1,6 @@
<div id="animated-preview-container" class="preview-container">
<div class="canvas-container-wrapper minimap-container">
<div class="open-popup-preview-button" title="Open preview in popup" rel="tooltip" data-placement="bottom"></div>
<div id="animated-preview-canvas-container" class="canvas-container">
<div class="canvas-background"></div>
</div>
@ -12,4 +13,6 @@
<span id="display-fps" class="display-fps"></span>
<input id="preview-fps" class="range-fps" type="range" min="0" max="24"/>
</div>
<div>
</div>
</div>

View File

@ -1,38 +1,55 @@
<div class="settings-section">
<div class="settings-title">
Preferences:
</div>
<div class="settings-item">
<label>Background:</label>
<div id="background-picker-wrapper" class="background-picker-wrapper">
<div class="background-picker light-picker-background" data-background-class="light-canvas-background"
rel="tooltip" data-placement="bottom" title="light / high contrast">
</div>
<div class="background-picker medium-picker-background" data-background-class="medium-canvas-background"
rel="tooltip" data-placement="bottom" title="medium / high contrast">
</div>
<div class="background-picker lowcont-medium-picker-background" data-background-class="lowcont-medium-canvas-background"
rel="tooltip" data-placement="bottom" title="medium / low contrast">
</div>
<div class="background-picker lowcont-dark-picker-background" data-background-class="lowcont-dark-canvas-background"
rel="tooltip" data-placement="bottom" title="dark / low contrast">
<form action="" method="POST" name="application-settings-form">
<div class="settings-section">
<div class="settings-title">
General
</div>
<div class="settings-item">
<label>Background:</label>
<div class="background-picker-wrapper">
<div class="background-picker light-picker-background" data-background="light-canvas-background"
rel="tooltip" data-placement="bottom" title="light / high contrast">
</div>
<div class="background-picker medium-picker-background" data-background="medium-canvas-background"
rel="tooltip" data-placement="bottom" title="medium / high contrast">
</div>
<div class="background-picker lowcont-medium-picker-background" data-background="lowcont-medium-canvas-background"
rel="tooltip" data-placement="bottom" title="medium / low contrast">
</div>
<div class="background-picker lowcont-dark-picker-background" data-background="lowcont-dark-canvas-background"
rel="tooltip" data-placement="bottom" title="dark / low contrast">
</div>
</div>
</div>
</div>
<div class="settings-item">
<label for="grid-width">Grid :</label>
<select id="grid-width">
<option value="0">Disabled</option>
<option value="1">Enabled - 1px wide</option>
<option value="2">Enabled - 2px wide</option>
<option value="3">Enabled - 3px wide</option>
<option value="4">Enabled - 4px wide</option>
</select>
<div class="settings-item">
<label for="grid-width">Grid :</label>
<select id="grid-width" class="grid-width-select">
<option value="0">Disabled</option>
<option value="1">1px</option>
<option value="2">2px</option>
<option value="3">3px</option>
<option value="4">4px</option>
</select>
</div>
</div>
<!-- <div class="settings-item">
<label for="tiled-preview">Display tiled preview :</label>
<input type="checkbox" value="1" id="tiled-preview" name="tiled-preview-checkbox"/>
</div> -->
</div>
<div class="settings-section">
<div class="settings-title">
Preview
</div>
<div class="settings-item">
<label>
<input type="checkbox" value="1" class="tiled-preview-checkbox" name="tiled-preview-checkbox"/>
Repeated preview
</label>
</div>
<div class="settings-item">
<label for="tiled-preview">Maximum FPS </label>
<input type="text" class="textfield textfield-small max-fps-input" name="max-fps"/>
</div>
<input type="submit" class="button button-primary" value="Save" />
</div>
</form>

View File

@ -26,7 +26,7 @@
Import From Picture
</div>
<div class="settings-item">
<div style="margin-top:5px;margin-bottom:5px;">Supports : <span class="import-highlight">PNG, JPG, BMP, Animated GIF ...</span></div>
<div style="margin-top:5px;margin-bottom:5px;">Supports <span class="import-highlight">PNG, JPG, BMP, Animated GIF</span></div>
<div class="import-section">
<button type="button" class="button button-primary file-input-button">Browse images</button>
<input style="display:none"

View File

@ -1,7 +1,7 @@
<div class="settings-section">
<!-- RESIZE DRAWING AREA -->
<div class="settings-title">
Canvas size
Resize
</div>
<div class="settings-item resize-canvas">
<form action="" method="POST" name="resize-canvas-form">
@ -17,53 +17,31 @@
</div>
<div class="resize-section">
<label>
<input type="checkbox" class="resize-ratio-checkbox" value="true"/>
<input type="checkbox" class="resize-ratio-checkbox" value="true" checked="true"/>
<span>Maintain aspect ratio</span>
</label>
</div>
<div class="resize-section">
<label>
<input type="checkbox" class="resize-content-checkbox" value="true"/>
<span>Resize canvas content</span>
</label>
</div>
<div class="resize-section">
<span class="resize-section-title">Anchor</span>
<div class="resize-origin-container">
<div class="resize-origin-option" title="top left" rel="tooltip" data-placement="top" data-origin="TOPLEFT"></div>
<div class="resize-origin-option" title="top" rel="tooltip" data-placement="top" data-origin="TOP"></div>
<div class="resize-origin-option" title="top right" rel="tooltip" data-placement="top" data-origin="TOPRIGHT"></div>
<div class="resize-origin-option" title="middle left" rel="tooltip" data-placement="left" data-origin="MIDDLELEFT"></div>
<div class="resize-origin-option" title="middle" data-origin="MIDDLE" data-neighbor="bottom"></div>
<div class="resize-origin-option" title="middle right" rel="tooltip" data-placement="right" data-origin="MIDDLERIGHT"></div>
<div class="resize-origin-option" title="bottom left" rel="tooltip" data-placement="bottom" data-origin="BOTTOMLEFT"></div>
<div class="resize-origin-option" title="bottom" rel="tooltip" data-placement="bottom" data-origin="BOTTOM"></div>
<div class="resize-origin-option" title="bottom right" rel="tooltip" data-placement="bottom" data-origin="BOTTOMRIGHT"></div>
<div class="resize-origin-option" title="top left" data-origin="TOPLEFT"></div>
<div class="resize-origin-option" title="top" data-origin="TOP"></div>
<div class="resize-origin-option" title="top right" data-origin="TOPRIGHT"></div>
<div class="resize-origin-option" title="middle left" data-origin="MIDDLELEFT"></div>
<div class="resize-origin-option" title="middle" data-origin="MIDDLE"></div>
<div class="resize-origin-option" title="middle right" data-origin="MIDDLERIGHT"></div>
<div class="resize-origin-option" title="bottom left" data-origin="BOTTOMLEFT"></div>
<div class="resize-origin-option" title="bottom" data-origin="BOTTOM"></div>
<div class="resize-origin-option" title="bottom right" data-origin="BOTTOMRIGHT"></div>
</div>
</div>
<input type="submit" class="button button-primary resize-button" value="Resize" />
<input type="button" class="button resize-cancel-button" value="Cancel" />
</form>
</div>
<!-- RESIZE CONTENT -->
<div class="settings-title">
Image size
</div>
<div class="settings-item resize-content">
<form action="" method="POST" name="resize-content-form">
<div class="resize-section">
<span class="resize-section-title">Width</span>
<input type="text" class="textfield resize-size-field" name="resize-width"/>
<span>px</span>
</div>
<div class="resize-section">
<span class="resize-section-title">Height</span>
<input type="text" class="textfield resize-size-field" name="resize-height"/>
<span>px</span>
</div>
<div class="resize-section">
<label>
<input type="checkbox" class="resize-ratio-checkbox" value="true"/>
<span>Maintain aspect ratio</span>
</label>
</div>
<input type="submit" class="button button-primary resize-button" value="Resize" />
<input type="button" class="button resize-cancel-button" value="Cancel" />
</form>
</div>
</div>

View File

@ -1,4 +1,4 @@
<div class="settings-section">
<div class="settings-section setting-save-section">
<form action="" method="POST" name="save-form">
<div class="settings-title">Describe your piskel</div>
<div class="settings-item">
@ -9,7 +9,7 @@
<div class="settings-form-section">
<textarea id="save-description" class="save-field textfield" placeholder="Description ..."></textarea>
</div>
<div class="settings-form-section save-public-section">
<div class="settings-form-section save-public-section">
<label class="row">
Public : <input type="checkbox" value="1" name="save-public-checkbox"/>
</label>