A reply to this trick by @Andrejprus viewtopic.php?f=8&t=11334
Simple and dirty preview of the page. It helps to update editables, configs and do not have an extra tab in browser..
Simple js code manages to add iframe with src = current page link. I decided to put code in snippet, but of course you can just place javascript directly to "main.html" in your current active /couch/theme/.
On the very top of main.html:
The very bottom of main.html now looks like this (added my cms:embed there)
Code of 'iframe-preview-to-backend.html' snippet:
Code to 'scripts-controller.html' snippet:
It may look like an over-kill to have 2 snippets for a simple javascript, but it is helpful to add and maintain multiple scripts in present and future in both front-end and backend.
The CSS styling is minimal, hopefully you can do better and share here.
Thanks.
Simple and dirty preview of the page. It helps to update editables, configs and do not have an extra tab in browser..
Simple js code manages to add iframe with src = current page link. I decided to put code in snippet, but of course you can just place javascript directly to "main.html" in your current active /couch/theme/.
On the very top of main.html:
- Code: Select all
<cms:embed 'iframe-preview-to-backend.html' />
The very bottom of main.html now looks like this (added my cms:embed there)
- Code: Select all
<cms:embed 'scripts-controller.html' />
<script type="text/javascript">
//<![CDATA[
<cms:admin_js />
//]]>
</script>
</body>
</html>
Code of 'iframe-preview-to-backend.html' snippet:
- Code: Select all
<cms:ignore>
// Always use global scripts[] array
</cms:ignore>
<cms:if "<cms:not "<cms:is_array scripts />" />" ><cms:set scripts = '[]' is_json='1' scope='global' /></cms:if><cms:ignore>
// Operate with local this[] array within the script.
</cms:ignore>
<cms:set this = '[]' is_json='1' scope='local' /><cms:ignore>
// Script starts::::::::::::::::::::::::::::::::::::::
</cms:ignore>
<cms:set this.to_backend = 'true' scope='local' />
<cms:set this.description = 'iframe with page preview' scope='local' />
<cms:set this.code = '' scope='local' />
<cms:capture into='this.code' scope='parent' trim='1'>
$( function() {
// Description: <cms:show this.description />
var $iframe = $( "<iframe></iframe>" );
var $fieldset = $( "<fieldset></fieldset>" );
$iframe.attr({
frameborder: "0",
src: "<cms:show k_page_link />"
}).css({
minHeight : "500px",
width : "100%"
});
$fieldset.wrapInner( $iframe ).insertAfter("div#content");
$fieldset.prepend("<legend><cms:show k_page_link /></legend>");
$fieldset.css({
border : "1px solid black",
margin: "16px 30px 30px"
});
});
</cms:capture><cms:ignore>
// Script always ends with pushing "this" to "scripts"::::::::::::::::::::::::::::::::::::::
</cms:ignore>
<cms:if "<cms:not ( k_route_module eq 'users' ) || ( k_user_template eq k_template_name ) />" >
<cms:ignore>
// Skip for users
</cms:ignore>
<cms:set scripts. = this scope='global' />
</cms:if>
Code to 'scripts-controller.html' snippet:
- Code: Select all
<cms:ignore>
// Work with scripts from global "scripts" array.
// Iterate through all of them
</cms:ignore>
<cms:if "<cms:is_array scripts />">
<cms:each scripts as="script">
<cms:if "<cms:is_array script />" >
<cms:if "<cms:get 'script.to_backend' />" >
<cms:admin_add_js><cms:show script.code /></cms:admin_add_js>
<cms:else />
<script type="text/javascript">
//<![CDATA[
<cms:show script.code />
//]]>
</script>
</cms:if>
</cms:if>
</cms:each>
</cms:if>
It may look like an over-kill to have 2 snippets for a simple javascript, but it is helpful to add and maintain multiple scripts in present and future in both front-end and backend.
The CSS styling is minimal, hopefully you can do better and share here.
Thanks.