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

Merge pull request #129 from juliandescottes/cleanup-cheap-templates

Browse Source 
Refactor : moved cheap-templates.js to lib. Added documentation
This commit is contained in:
grosbouddha 2013-10-04 15:07:01 -07:00
commit 913a50cb28
4 changed files with 89 additions and 55 deletions
Show Stats 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);
};

16
index.html
View File

@ -16,16 +16,16 @@
<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> <script type="text/javascript" src="js/lib/iframeLoader.js"></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" onload="iframeloader.onLoad(event)" 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" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
</div> </div>
<div class='column main-column'> <div class='column main-column'>
@ -35,18 +35,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" onload="iframeloader.onLoad(event)" data-iframe-loader="display"></iframe>
<iframe src="templates/layers-list.html" class="_ctl" onload="_ctl(event)"></iframe> <iframe src="templates/layers-list.html" onload="iframeloader.onLoad(event)" 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" onload="iframeloader.onLoad(event)" 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" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
<iframe src="templates/settings-export-gif.html" onload="_ctp(event)"></iframe> <iframe src="templates/settings-export-gif.html" onload="iframeloader.onLoad(event)" data-iframe-loader="store"></iframe>
</div> </div>
</div> </div>
</div> </div>

52
js/lib/iframeLoader.js Normal file
View 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);
}
}
})();

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>