mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Merge pull request #129 from juliandescottes/cleanup-cheap-templates
Refactor : moved cheap-templates.js to lib. Added documentation
This commit is contained in:
grosbouddha
commit
913a50cb28
@ -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);
|
||||
};
|
||||
16
index.html
16
index.html
@ -16,16 +16,16 @@
|
||||
<link rel="stylesheet" type="text/css" href="css/preview-film-section.css">
|
||||
</head>
|
||||
<body>
|
||||
<script src="cheap-partials.js" type="text/javascript"></script>
|
||||
<script type="text/javascript" src="js/lib/iframeLoader.js"></script>
|
||||
<div class="piskel-name-container">
|
||||
<input readonly id="piskel-name" type="text" value=""/>
|
||||
</div>
|
||||
<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" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
|
||||
<div id="column-wrapper" class="column-wrapper">
|
||||
<div class='column left-column'>
|
||||
<iframe src="templates/frames-list.html" class="_ctl" onload="_ctl(event)"></iframe>
|
||||
<iframe src="templates/frames-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
</div>
|
||||
|
||||
<div class='column main-column'>
|
||||
@ -35,18 +35,18 @@
|
||||
</div>
|
||||
|
||||
<div class="column right-column">
|
||||
<iframe src="templates/preview.html" class="_ctl" onload="_ctl(event)"></iframe>
|
||||
<iframe src="templates/layers-list.html" class="_ctl" onload="_ctl(event)"></iframe>
|
||||
<iframe src="templates/preview.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
<iframe src="templates/layers-list.html" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
|
||||
</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/settings.html" class="_ctl" onload="_ctl(event)"></iframe>
|
||||
<iframe src="templates/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/settings-application.html" onload="_ctp(event)"></iframe>
|
||||
<iframe src="templates/settings-export-gif.html" onload="_ctp(event)"></iframe>
|
||||
<iframe src="templates/settings-application.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
<iframe src="templates/settings-export-gif.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
52
js/lib/iframeLoader.js
Normal file
52
js/lib/iframeLoader.js
Normal file
@ -0,0 +1,52 @@
|
||||
(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.getAttribute('data-iframe-loader');
|
||||
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);
|
||||
};
|
||||
|
||||
window.iframeloader = {
|
||||
onLoad : function (event) {
|
||||
var iframe = event.target || event.srcElement;
|
||||
processFrame(iframe);
|
||||
}
|
||||
}
|
||||
})();
|
||||
@ -1,35 +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">
|
||||
<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">
|
||||
|
||||
<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>
|
||||
Loading…
Reference in New Issue
Block a user