mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Refactor : moved cheap-templates.js to lib. Added documentation
This commit is contained in:
jdescottes
parent
a075a1c8b3
commit
a87b09908d
|
|
@ -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
15
index.html
|
|
@ -16,16 +16,15 @@
|
|||
<link rel="stylesheet" type="text/css" href="css/preview-film-section.css">
|
||||
</head>
|
||||
<body>
|
||||
<script src="cheap-partials.js" type="text/javascript"></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" 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" data-iframe-loader="display"></iframe>
|
||||
</div>
|
||||
|
||||
<div class='column main-column'>
|
||||
|
|
@ -35,18 +34,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" data-iframe-loader="display"></iframe>
|
||||
<iframe src="templates/layers-list.html" 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"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" data-iframe-loader="store"></iframe>
|
||||
<iframe src="templates/settings-export-gif.html" data-iframe-loader="store"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
58
js/lib/iframeLoader.js
Normal file
58
js/lib/iframeLoader.js
Normal 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();
|
||||
})();
|
||||
|
|
@ -30,13 +30,6 @@
|
|||
} else {
|
||||
script = "build/piskel-packaged-min.js";
|
||||
}
|
||||
var loaderInterval = window.setInterval(function () {
|
||||
if (document.querySelectorAll("._ctl").length === 0) {
|
||||
window.clearInterval(loaderInterval);
|
||||
loadScript(script, "pskl.app.init()");
|
||||
} else {
|
||||
console.log("waiting for templates to load ....");
|
||||
}
|
||||
}, 100);
|
||||
loadScript(script, "pskl.app.init()");
|
||||
}
|
||||
})();
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
// This list is used both by the grunt build and index.html (in debug mode)
|
||||
|
||||
exports.scripts = [
|
||||
// iframe loader
|
||||
"js/lib/iframeLoader.js",
|
||||
// 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",
|
||||
// GIF Encoding libraries
|
||||
|
|
|
|||
|
|
@ -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