Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
2 posts Page 1 of 1
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..

2018-03-10-001.png
screenshot
2018-03-10-001.png (27.52 KiB) Viewed 2187 times


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.
niiiiiiiiiiice !!!!!!!! will try !!!!!!!!
2 posts Page 1 of 1
cron