Commit 033d201d authored by jan.koester's avatar jan.koester
Browse files

test

parent e16f21b5

editor/html/css/editor.css

+1 −1
Original line number Diff line number Diff line
@@ -267,7 +267,7 @@ body { 
#preview-frame {

    flex: 1;

    border: none;

    background: #fff;

    overflow: auto;

}



/* Properties Panel */

editor/html/index.html

+1 −1
Original line number Diff line number Diff line
@@ -62,7 +62,7 @@ 
                    <option value="light">&#x2600; Light</option>

                </select>

            </div>

            <iframe id="preview-frame" sandbox="allow-same-origin"></iframe>

            <div id="preview-frame"></div>

        </main>



        <!-- Right Sidebar: Properties -->

editor/html/js/preview.js

+22 −17
Original line number Diff line number Diff line
@@ -5,37 +5,42 @@ 
var Preview = (function() {

    'use strict';



    var shadow = null;



    function getShadow() {

        if (shadow) return shadow;

        var host = document.getElementById('preview-frame');

        shadow = host.attachShadow({ mode: 'open' });

        return shadow;

    }



    function getThemeStyle() {

        var theme = document.documentElement.getAttribute('data-theme') || 'dark';

        if (theme === 'light') {

            return 'body{font-family:sans-serif;padding:16px;margin:0;background:#fff;color:#1e1e2e;}';

            return ':host{display:block;height:100%;background:#fff;color:#1e1e2e;}' +

                   'div.preview-body{font-family:sans-serif;padding:16px;margin:0;}';

        }

        return 'body{font-family:sans-serif;padding:16px;margin:0;background:#1e1e2e;color:#cdd6f4;}';

        return ':host{display:block;height:100%;background:#1e1e2e;color:#cdd6f4;}' +

               'div.preview-body{font-family:sans-serif;padding:16px;margin:0;}';

    }



    function refresh() {

        EditorApi.getPreview().then(function(resp) {

            var iframe = document.getElementById('preview-frame');

            var doc = iframe.contentDocument || iframe.contentWindow.document;

            doc.open();

            doc.write('<!DOCTYPE html><html><head><meta charset="UTF-8">' +

                      '<style>' + getThemeStyle() + '</style>' +

                      '</head><body>' + (resp.html || '') + '</body></html>');

            doc.close();

            var s = getShadow();

            s.innerHTML = '<style>' + getThemeStyle() + '</style>' +

                          '<div class="preview-body">' + (resp.html || '') + '</div>';

        }).catch(function(err) {

            console.error('Preview error:', err);

        });

    }



    function clear() {

        var iframe = document.getElementById('preview-frame');

        var doc = iframe.contentDocument || iframe.contentWindow.document;

        doc.open();

        doc.write('<!DOCTYPE html><html><head><meta charset="UTF-8">' +

                  '<style>' + getThemeStyle() + ' body{padding:40px;text-align:center;' +

                  'color:#666;}</style></head><body>' +

                  '<p>Vorschau wird hier angezeigt.</p></body></html>');

        doc.close();

        var s = getShadow();

        var theme = document.documentElement.getAttribute('data-theme') || 'dark';

        var color = theme === 'light' ? '#666' : '#999';

        s.innerHTML = '<style>' + getThemeStyle() + '</style>' +

                      '<div class="preview-body" style="padding:40px;text-align:center;color:' + color + '">' +

                      '<p>Vorschau wird hier angezeigt.</p></div>';

    }



    return {