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

Refactor : moved cheap-templates.js to lib. Added documentation

Browse Source
This commit is contained in:
jdescottes
2013-10-04 22:25:47 +02:00
parent a075a1c8b3
commit a87b09908d
6 changed files with 97 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
cheap-partials.js
View File

@@ -1,18 +0,0 @@
// TODO : Move to js folder
// TODO : Put under namespace
// TODOC
window._ctl = function (event) {
var iframe=event.target || event.srcElement, div=document.createElement("div");
div.innerHTML = iframe.contentWindow.document.body.innerHTML;
if (div.children.length == 1) div = div.children[0];
iframe.parentNode.replaceChild(div, iframe);
};
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);
};

15
index.html
View File

@@ -16,16 +16,15 @@
<link rel="stylesheet" type="text/css" href="css/preview-film-section.css"> <link rel="stylesheet" type="text/css" href="css/preview-film-section.css">
</head> </head>
<body> <body>
<script src="cheap-partials.js" type="text/javascript"></script>
<div class="piskel-name-container"> <div class="piskel-name-container">
<input readonly id="piskel-name" type="text" value=""/> <input readonly id="piskel-name" type="text" value=""/>
</div> </div>
<div id="main-wrapper" class="main-wrapper"> <div id="main-wrapper" class="main-wrapper">
<iframe src="templates/drawing-tools.html" class="_ctl" onload="_ctl(event)"></iframe> <iframe src="templates/drawing-tools.html" data-iframe-loader="display"></iframe>
<div id="column-wrapper" class="column-wrapper"> <div id="column-wrapper" class="column-wrapper">
<div class='column left-column'> <div class='column left-column'>
<iframe src="templates/frames-list.html" class="_ctl" onload="_ctl(event)"></iframe> <iframe src="templates/frames-list.html" data-iframe-loader="display"></iframe>
</div> </div>
<div class='column main-column'> <div class='column main-column'>
@@ -35,18 +34,18 @@
</div> </div>
<div class="column right-column"> <div class="column right-column">
<iframe src="templates/preview.html" class="_ctl" onload="_ctl(event)"></iframe> <iframe src="templates/preview.html" data-iframe-loader="display"></iframe>
<iframe src="templates/layers-list.html" class="_ctl" onload="_ctl(event)"></iframe> <iframe src="templates/layers-list.html" data-iframe-loader="display"></iframe>
</div> </div>
</div> </div>
<div id="application-action-section" data-pskl-controller="settings" class="sticky-section right-sticky-section"> <div id="application-action-section" data-pskl-controller="settings" class="sticky-section right-sticky-section">
<div class="sticky-section-wrap"> <div class="sticky-section-wrap">
<iframe src="templates/settings.html" class="_ctl" onload="_ctl(event)"></iframe> <iframe src="templates/settings.html"data-iframe-loader="display"></iframe>
<div class="drawer vertical-centerer"> <div class="drawer vertical-centerer">
<div class="drawer-content" id="drawer-container"> <div class="drawer-content" id="drawer-container">
<iframe src="templates/settings-application.html" onload="_ctp(event)"></iframe> <iframe src="templates/settings-application.html" data-iframe-loader="store"></iframe>
<iframe src="templates/settings-export-gif.html" onload="_ctp(event)"></iframe> <iframe src="templates/settings-export-gif.html" data-iframe-loader="store"></iframe>
</div> </div>
</div> </div>
</div> </div>

58
js/lib/iframeLoader.js Normal file
View File

@@ -0,0 +1,58 @@
(function () {
/**
* Depending on the value of the data-iframe-loader attribute, display or store the content of the iframe
* @param {HTMLElement} iframe
*/
var processFrame = function (iframe) {
var type = iframe.dataset.iframeLoader;
if (type === "display") {
displayFrame(iframe);
} else if (type === "store") {
storeFrame(iframe);
} else {
console.error('iframeLoader invalid type : ' + type);
}
};
/**
* Replace the existing iframe with the content of the iframe
* If the iframe has a single root element, it will directly replace the iframe.
* If there are several roots, a wrapping div will be created and will replace the iframe
* @param {HTMLElement} iframe
*/
var displayFrame = function (iframe) {
var div=document.createElement("div");
div.innerHTML = iframe.contentWindow.document.body.innerHTML;
if (div.children.length == 1) div = div.children[0];
iframe.parentNode.replaceChild(div, iframe);
};
/**
* Load the iframe content as a <script type="text/html" id={iframe-src}>{iframe-content}</script>
* The content can later be accessed by getting the script (through getElementById for instance) and reading innerHTML
* @param {HTMLElement} iframe
*/
var storeFrame = function (iframe) {
var 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);
};
/**
* Retrieve iFrames with a data-attribute data-iframe-loader
* @return {[type]} [description]
*/
var getLoaderFrames = function () {
var iframes = document.querySelectorAll("[data-iframe-loader]");
return Array.prototype.slice.call(iframes, 0);
};
var init = function () {
getLoaderFrames().forEach(processFrame);
};
init();
})();

9
piskel-boot.js
View File

@@ -30,13 +30,6 @@
} else { } else {
script = "build/piskel-packaged-min.js"; script = "build/piskel-packaged-min.js";
} }
var loaderInterval = window.setInterval(function () { loadScript(script, "pskl.app.init()");
if (document.querySelectorAll("._ctl").length === 0) {
window.clearInterval(loaderInterval);
loadScript(script, "pskl.app.init()");
} else {
console.log("waiting for templates to load ....");
}
}, 100);
} }
})(); })();

2
piskel-script-list.js
View File

@@ -1,6 +1,8 @@
// This list is used both by the grunt build and index.html (in debug mode) // This list is used both by the grunt build and index.html (in debug mode)
exports.scripts = [ exports.scripts = [
// iframe loader
"js/lib/iframeLoader.js",
// Core libraries // Core libraries
"js/lib/jquery-1.8.0.js","js/lib/jquery-ui-1.10.3.custom.js","js/lib/pubsub.js","js/lib/bootstrap/bootstrap.js", "js/lib/jquery-1.8.0.js","js/lib/jquery-ui-1.10.3.custom.js","js/lib/pubsub.js","js/lib/bootstrap/bootstrap.js",
// GIF Encoding libraries // GIF Encoding libraries

58
templates/settings.html
View File

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