From a87b09908dd5f6f134ae869529edcabf5d37273d Mon Sep 17 00:00:00 2001 From: jdescottes Date: Fri, 4 Oct 2013 22:25:47 +0200 Subject: [PATCH 1/3] Refactor : moved cheap-templates.js to lib. Added documentation --- cheap-partials.js | 18 ------------- index.html | 15 +++++------ js/lib/iframeLoader.js | 58 +++++++++++++++++++++++++++++++++++++++++ piskel-boot.js | 9 +------ piskel-script-list.js | 2 ++ templates/settings.html | 58 ++++++++++++++++++++--------------------- 6 files changed, 97 insertions(+), 63 deletions(-) delete mode 100644 cheap-partials.js create mode 100644 js/lib/iframeLoader.js diff --git a/cheap-partials.js b/cheap-partials.js deleted file mode 100644 index 66c6b3a3..00000000 --- a/cheap-partials.js +++ /dev/null @@ -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); -}; \ No newline at end of file diff --git a/index.html b/index.html index 215207ae..8c2aa607 100644 --- a/index.html +++ b/index.html @@ -16,16 +16,15 @@ -
- +
- +
@@ -35,18 +34,18 @@
- - + +
- +
- - + +
diff --git a/js/lib/iframeLoader.js b/js/lib/iframeLoader.js new file mode 100644 index 00000000..d355b4b3 --- /dev/null +++ b/js/lib/iframeLoader.js @@ -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 + * 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(); +})(); \ No newline at end of file diff --git a/piskel-boot.js b/piskel-boot.js index 1c8da006..7c74f39b 100644 --- a/piskel-boot.js +++ b/piskel-boot.js @@ -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()"); } })(); \ No newline at end of file diff --git a/piskel-script-list.js b/piskel-script-list.js index a35ebdcf..d35f4042 100644 --- a/piskel-script-list.js +++ b/piskel-script-list.js @@ -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 diff --git a/templates/settings.html b/templates/settings.html index 6840d0b8..75087895 100644 --- a/templates/settings.html +++ b/templates/settings.html @@ -1,35 +1,35 @@
-
- - - -
- -
+
+ + + +
+ +
GIF
- -
+ +
PNG
\ No newline at end of file From 894486fba6d7067310910624ffa33fbe89b17375 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Fri, 4 Oct 2013 23:26:53 +0200 Subject: [PATCH 2/3] Review : fixes --- index.html | 2 +- js/lib/iframeLoader.js | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 8c2aa607..f2176593 100644 --- a/index.html +++ b/index.html @@ -41,7 +41,7 @@
- +
diff --git a/js/lib/iframeLoader.js b/js/lib/iframeLoader.js index d355b4b3..670bbd04 100644 --- a/js/lib/iframeLoader.js +++ b/js/lib/iframeLoader.js @@ -23,7 +23,9 @@ 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]; + if (div.children.length == 1) { + div = div.children[0]; + } iframe.parentNode.replaceChild(div, iframe); }; @@ -43,7 +45,8 @@ /** * Retrieve iFrames with a data-attribute data-iframe-loader - * @return {[type]} [description] + * Converts the nodeList to an array for easier manipulation + * @return {Array} array of iframe elements */ var getLoaderFrames = function () { var iframes = document.querySelectorAll("[data-iframe-loader]"); From 1e99a051e6cbd2608c7f96b8d206333b855a6671 Mon Sep 17 00:00:00 2001 From: jdescottes Date: Fri, 4 Oct 2013 23:46:19 +0200 Subject: [PATCH 3/3] Rollback of initialization sequence --- index.html | 15 ++++++++------- js/lib/iframeLoader.js | 23 +++++++---------------- piskel-boot.js | 9 ++++++++- piskel-script-list.js | 2 -- 4 files changed, 23 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index f2176593..50c1ddd6 100644 --- a/index.html +++ b/index.html @@ -16,15 +16,16 @@ +
- +
- +
@@ -34,18 +35,18 @@
- - + +
- +
- - + +
diff --git a/js/lib/iframeLoader.js b/js/lib/iframeLoader.js index 670bbd04..4820fb16 100644 --- a/js/lib/iframeLoader.js +++ b/js/lib/iframeLoader.js @@ -4,7 +4,7 @@ * @param {HTMLElement} iframe */ var processFrame = function (iframe) { - var type = iframe.dataset.iframeLoader; + var type = iframe.getAttribute('data-iframe-loader'); if (type === "display") { displayFrame(iframe); } else if (type === "store") { @@ -43,19 +43,10 @@ document.body.appendChild(script); }; - /** - * Retrieve iFrames with a data-attribute data-iframe-loader - * Converts the nodeList to an array for easier manipulation - * @return {Array} array of iframe elements - */ - var getLoaderFrames = function () { - var iframes = document.querySelectorAll("[data-iframe-loader]"); - return Array.prototype.slice.call(iframes, 0); - }; - - var init = function () { - getLoaderFrames().forEach(processFrame); - }; - - init(); + window.iframeloader = { + onLoad : function (event) { + var iframe = event.target || event.srcElement; + processFrame(iframe); + } + } })(); \ No newline at end of file diff --git a/piskel-boot.js b/piskel-boot.js index 7c74f39b..1c8da006 100644 --- a/piskel-boot.js +++ b/piskel-boot.js @@ -30,6 +30,13 @@ } else { script = "build/piskel-packaged-min.js"; } - loadScript(script, "pskl.app.init()"); + 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); } })(); \ No newline at end of file diff --git a/piskel-script-list.js b/piskel-script-list.js index d35f4042..a35ebdcf 100644 --- a/piskel-script-list.js +++ b/piskel-script-list.js @@ -1,8 +1,6 @@ // 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