Result output should not contain or require any logic

winstromming commented 10 years ago

In order to reduce style conflicts and safely sandbox elements, examples currently render into an iframe. This process is slightly complicated by the need to preserve indentation, linebreaks, whitespace and syntax highlighting.

We do this by writing the {{ result }} into a script element, then inserting that innerHTML into the iframe before removing the placeholder nodes from the DOM. This is messy and can be abstracted out of the actual .hbs file.

Current:

{{#if comment}}
    <div class="comment">{{{comment}}}</div>
{{/if}}
{{#if result}}
    <div class="result">
        <iframe id="iframe{{@index}}" height="0" src="about:blank"></iframe>
        <script id="result{{@index}}" type="text/html">{{{result}}}</script>
        <script id="script{{@index}}">
            var iframe  = document.getElementById('iframe{{@index}}');
            var script  = document.getElementById('script{{@index}}');
            var result  = document.getElementById('result{{@index}}');
            var context = iframe.contentWindow.document;
                context.open();
                context.write('<!DOCTYPE html>');
                context.write('<'+'html>');
                context.write('    <'+'head>');
                context.write('        {{> assets}}');
                context.write('    <'+'/'+'head>');
                context.write('    <'+'body>');
                context.write(result.innerHTML);
                context.write('    <'+'/'+'body>');
                context.write('<'+'/'+'html>');
                context.close();
            iframe.removeAttribute('id')
            result.parentNode.removeChild(result);
            script.parentNode.removeChild(script);
        </script>
    </div>
{{/if}}
{{#if markup}}
    <div class="markup">{{{markup}}}</div>
{{/if}}
{{#if styles}}
    <div class="styles">{{{styles}}}</div>
{{/if}}

Desired:

{{#if comment}}
    <div class="comment">{{{comment}}}</div>
{{/if}}
{{#if result}}
    <div class="result">{{{result}}}</div>
{{/if}}
{{#if markup}}
    <div class="markup">{{{markup}}}</div>
{{/if}}
{{#if styles}}
    <div class="styles">{{{styles}}}</div>
{{/if}}

m5o commented 10 years ago

would share piece of code, whenever useful or not... In order to reduce dependencies to the parent template.hbs for setting the correct iframe height with the window.onload function(){}. This ugly onload-oneliner works also.

<iframe id="sassdown-iframe{{@index}}" height="0" src="about:blank" onload="javascript:this.height=this.contentWindow.document.body.scrollHeight;"></iframe>

m5o commented 10 years ago

just found pym.js while browsing the trending javascript repos. maybe useful in this context.

Using iframes in a responsive page can be frustrating. It’s easy enough to make an iframe’s width span 100% of its container, but sizing its height is tricky — especially if the content of the iframe changes height depending on page width (for example, because of text wrapping or media queries) or events within the iframe.

Pym.js embeds and resizes an iframe responsively (width and height) within its parent container. It also bypasses the usual cross-domain issues.

winstromming / sassdown

Result output should not contain or require any logic #50