mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Added cheap lazy templates + logic to switch between setting controllers

Browse Source
This commit is contained in:
jdescottes 2013-08-12 07:31:09 +02:00
parent d8d6f27462
commit 73b98850db
12 changed files with 185 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
cheap-partials.js
View File

@ -5,3 +5,12 @@ window._ctl = function (event) {
if (div.children.length == 1) div = div.children[0];
iframe.parentNode.replaceChild(div, iframe);
};
// cheap template prepare
window._ctp = function (event) {
var iframe=event.target || event.srcElement, script=document.createElement("script");
script.setAttribute("type", "text/html");
script.setAttribute("id", iframe.getAttribute("src"));
script.innerHTML = iframe.contentWindow.document.body.innerHTML;
iframe.parentNode.removeChild(iframe);
document.body.appendChild(script);
};

10
index.html
View File

@ -24,8 +24,14 @@
<div id="application-action-section" class="sticky-section right-sticky-section">
<div class="sticky-section-wrap">
<iframe src="templates/options.html" class="_ctl" onload="_ctl(event)"></iframe>
<iframe src="templates/user-settings-drawer.html" class="cheap-template" onload="_ctl(event)"></iframe>
<iframe src="templates/settings.html" class="_ctl" onload="_ctl(event)"></iframe>
<div class="drawer vertical-centerer">
<div class="drawer-content" id="drawer-container">
<!-- these templates are only preloaded in script tags for reusing in JS later -->
<iframe src="templates/settings-application.html" onload="_ctp(event)"></iframe>
<iframe src="templates/settings-export-gif.html" onload="_ctp(event)"></iframe>
</div>
</div>
</div>
</div>

90
js/controller/SettingsController.js
View File

@ -1,45 +1,69 @@
(function () {
var ns = $.namespace("pskl.controller");
ns.SettingsController = function () {};
var settings = {
user : {
template : 'templates/settings-application.html',
controller : ns.settings.ApplicationSettingsController
},
gif : {
template : 'templates/settings-export-gif.html',
controller : ns.settings.GifExportController
}
};
var SEL_SETTING_CLS = 'has-expanded-drawer';
var EXP_DRAWER_CLS = 'expanded';
ns.SettingsController = function () {
this.drawerContainer = document.getElementById("drawer-container");
this.settingsContainer = $('.right-sticky-section');
this.expanded = false;
this.currentSetting = null;
};
/**
* @public
*/
ns.SettingsController.prototype.init = function() {
// Highlight selected background picker:
var backgroundClass = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);
$('#background-picker-wrapper')
.find('.background-picker[data-background-class=' + backgroundClass + ']')
.addClass('selected');
// Initial state for grid display:
var show_grid = pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID);
$('#show-grid').prop('checked', show_grid);
// Expand drawer when clicking 'Settings' tab.
$('#settings').click(function(evt) {
$('.right-sticky-section').toggleClass('expanded');
$('#settings').toggleClass('has-expanded-drawer');
});
// Handle grid display changes:
$('#show-grid').change($.proxy(function(evt) {
var checked = $('#show-grid').prop('checked');
pskl.UserSettings.set(pskl.UserSettings.SHOW_GRID, checked);
}, this));
// Handle canvas background changes:
$('#background-picker-wrapper').click(function(evt) {
var target = $(evt.target).closest('.background-picker');
if (target.length) {
var backgroundClass = target.data('background-class');
pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, backgroundClass);
$('.background-picker').removeClass('selected');
target.addClass('selected');
$('[data-setting]').click(function(evt) {
var el = event.currentTarget;
var setting = el.dataset.setting;
if (this.currentSetting != setting) {
this.loadSetting(setting);
} else {
this.closeDrawer();
}
});
}.bind(this));
};
ns.SettingsController.prototype.loadSetting = function (setting) {
this.drawerContainer.innerHTML = this.getTemplate_(settings[setting].template);
(new settings[setting].controller()).init();
this.settingsContainer.addClass(EXP_DRAWER_CLS);
$('.' + SEL_SETTING_CLS).removeClass(SEL_SETTING_CLS);
$('[data-setting='+setting+']').addClass(SEL_SETTING_CLS);
this.currentSetting = setting;
};
ns.SettingsController.prototype.closeDrawer = function () {
this.settingsContainer.removeClass(EXP_DRAWER_CLS);
$('.' + SEL_SETTING_CLS).removeClass(SEL_SETTING_CLS);
this.currentSetting = null;
};
ns.SettingsController.prototype.getTemplate_ = function (templateId) {
var template = document.getElementById(templateId);
if (template) {
return template.innerHTML;
} else {
console.error("Could not find template for id :", templateId);
}
};
})();

38
js/controller/settings/ApplicationSettingsController.js Normal file
View File

@ -0,0 +1,38 @@
(function () {
var ns = $.namespace("pskl.controller.settings");
ns.ApplicationSettingsController = function () {};
/**
* @public
*/
ns.ApplicationSettingsController.prototype.init = function() {
// Highlight selected background picker:
var backgroundClass = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);
$('#background-picker-wrapper')
.find('.background-picker[data-background-class=' + backgroundClass + ']')
.addClass('selected');
// Initial state for grid display:
var show_grid = pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID);
$('#show-grid').prop('checked', show_grid);
// Handle grid display changes:
$('#show-grid').change($.proxy(function(evt) {
var checked = $('#show-grid').prop('checked');
pskl.UserSettings.set(pskl.UserSettings.SHOW_GRID, checked);
}, this));
// Handle canvas background changes:
$('#background-picker-wrapper').click(function(evt) {
var target = $(evt.target).closest('.background-picker');
if (target.length) {
var backgroundClass = target.data('background-class');
pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, backgroundClass);
$('.background-picker').removeClass('selected');
target.addClass('selected');
}
});
};
})();

8
js/controller/settings/GifExportController.js Normal file
View File

@ -0,0 +1,8 @@
(function () {
var ns = $.namespace("pskl.controller.settings");
ns.GifExportController = function () {
};
ns.GifExportController.prototype.init = function () {};
})();

2
package.json
View File

@ -1,5 +1,5 @@
{
"author": "People",
"author": "Julian Descottes, Vincent Renaudin",
"name": "piskel",
"description": "Web based 2d animations editor",
"version": "0.0.1",

2
piskel-script-list.js
View File

@ -41,6 +41,8 @@ exports.scripts = [
"js/controller/ToolController.js",
"js/controller/PaletteController.js",
"js/controller/NotificationController.js",
"js/controller/settings/ApplicationSettingsController.js",
"js/controller/settings/GifExportController.js",
"js/controller/SettingsController.js",
// Services

11
templates/options.html
View File

@ -1,11 +0,0 @@
<div class="vertical-centerer">
<div id="settings" class="tool-icon gear-icon" title="Preferences" rel="tooltip" data-placement="left"></div>
<a class="tool-icon gallery-icon" title="Visit gallery" href="http://juliandescottes.github.io/piskel-website/" rel="tooltip" data-placement="left" target="_blank"></a>
<div class="tool-icon save-icon" title="Save to gallery" onclick="pskl.app.storeSheet()" rel="tooltip" data-placement="left" ></div>
<div class="tool-icon upload-cloud-icon" title="Upload as an animated GIF" onclick="pskl.app.uploadAsAnimatedGIF()" rel="tooltip" data-placement="left">
<span class="label">GIF</span>
</div>
<div class="tool-icon upload-cloud-icon" title="Upload as a spritesheet PNG" onclick="pskl.app.uploadAsSpritesheetPNG()" rel="tooltip" data-placement="left">
<span class="label">PNG</span>
</div>
</div>

26
templates/settings-application.html Normal file
View File

@ -0,0 +1,26 @@
<div class="settings-section">
<div class="settings-title">
Canvas settings:
</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">
</div>
</div>
</div>
<div class="settings-item">
<label for="show-grid">Show grid:</label> <input id="show-grid" type="checkbox"/>
</div>
</div>

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

@ -0,0 +1 @@
LOLOLOLOL

35
templates/settings.html Normal file
View File

@ -0,0 +1,35 @@
<div class="vertical-centerer">
<div
data-setting="user"
class="tool-icon gear-icon"
title="Preferences"
rel="tooltip" data-placement="left"></div>
<a
class="tool-icon gallery-icon"
title="Visit gallery"
href="http://juliandescottes.github.io/piskel-website/"
rel="tooltip" data-placement="left" target="_blank"></a>
<div
class="tool-icon save-icon"
title="Save to gallery"
onclick="pskl.app.storeSheet()"
rel="tooltip" data-placement="left" ></div>
<div
data-setting="gif"
class="tool-icon upload-cloud-icon"
title="Upload as an animated GIF"
rel="tooltip" data-placement="left">
<span class="label">GIF</span>
</div>
<div
class="tool-icon upload-cloud-icon"
title="Upload as a spritesheet PNG"
onclick="pskl.app.uploadAsSpritesheetPNG()"
rel="tooltip" data-placement="left">
<span class="label">PNG</span>
</div>
</div>

30
templates/user-settings-drawer.html
View File

@ -1,30 +0,0 @@
<div class="drawer vertical-centerer">
<div class="drawer-content">
<div class="settings-section">
<div class="settings-title">
Canvas settings:
</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">
</div>
</div>
</div>
<div class="settings-item">
<label for="show-grid">Show grid:</label> <input id="show-grid" type="checkbox"/>
</div>
</div>
</div>
</div>