moonsflyer
/
yunjing_master


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
							<include file="public@header"/>
<style>
    html, body {
        padding: 0;
        height: 100%;
        margin: 0;
        overflow: hidden;
        background: #eee;
    }

    #simulator {
        margin: 0 auto;
        display: block;
    }

    #setting-iframe {
        width: 100%;
        height: 100%;
    }

    .setting-panel-wrap {
        position: fixed;
        left: 0;
        bottom: 0;
        top: 0;
        width: 420px;
        border-right: 1px solid #eee;
        display: none;
        background: #fff;
        z-index: 999;
    }

    #setting-iframe-wrap {
        position: absolute;
        top: 0;
        bottom: 50px;
        right: 0;
        left: 0;
    }

    .setting-panel-wrap .panel {
    }

    .setting-panel-wrap .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 50px;
        border-top: 1px solid #eee;
        padding: 8px;
    }

    #close-setting-panel {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 99;
        font-size: 18px;
    }

    #update-theme-btn:focus {
        outline: none;
    }

    #think_page_trace {
        display: none !important;
    }

    #think_page_trace_open {
        display: none !important;
    }

    .simulator-pc {
        width: 100%;
        height: 100%;
    }

    .simulator-pad {
        width: 1180px;
        height: 820px;
        transform: scale(0.7);
        border: 1px solid #aaa;
    }

    .simulator-mobile {
        width: 375px;
        height: 667px;
        transform: scale(0.9);
        border: 1px solid #aaa;
    }

    .design-btn {
        position: fixed;
        z-index: 99;
        font-size: 20px;
        line-height: 50px;
        width: 50px;
        border: 1px solid #eee;
        text-align: center;
        border-radius: 50%;
        cursor: pointer;
        background: #fff;
    }

    .design-btn:hover {
        background: #eee;
        border-color: #ddd;
    }

    #update-theme-btn {
        top: 30px;
        right: 30px;
    }

    #show-setting-panel {
        top: 100px;
        right: 30px;
    }

    #simulator-pc-btn {
        top: 170px;
        right: 30px;
    }

    #simulator-pad-btn {
        top: 240px;
        right: 30px;
    }

    #simulator-mobile-btn {
        top: 310px;
        right: 30px;
    }


</style>
<script>
    setInterval(function () {
        $.ajax({
            url: "{:url('Theme/design')}?theme={:input('param.theme')}&status=1",
            type: 'post'
        });
    }, 2000);
</script>
</head>
<body>
<a class="design-btn" id="show-setting-panel" title="编辑当前页" data-toggle="tooltip"><i class="fa fa-pencil"></i></a>
<a class="design-btn" id="update-theme-btn" title="刷新当前页" data-toggle="tooltip"><i class="fa fa-refresh"></i></a>
<a class="design-btn" id="simulator-mobile-btn" title="手机" data-toggle="tooltip"><i class="fa fa-mobile"></i></a>
<a class="design-btn" id="simulator-pad-btn" title="Pad" data-toggle="tooltip"><i class="fa fa-tablet"></i></a>
<a class="design-btn" id="simulator-pc-btn" title="PC" data-toggle="tooltip"><i class="fa fa-desktop"></i></a>

<div class="setting-panel-wrap">
    <a href="javascript:;" id="close-setting-panel"><i class="fa fa-close"></i></a>
    <div id="setting-iframe-wrap">
        <iframe frameborder="0" id="setting-iframe"></iframe>
    </div>
    <div class="footer text-center">
        <a id="save-btn" class="btn btn-primary">保存</a>
    </div>
</div>
<iframe src="__ROOT__/?_design_theme={:input('param.theme')}" frameborder="0" id="simulator"
        class="simulator-pc"></iframe>
<script src="__STATIC__/js/admin.js?v={$_static_version}"></script>
<script>
    var simulator = $('#simulator').get(0).contentWindow;
    var $simulator = $(simulator);
    var $settingIframe = $('#setting-iframe');
    var simulatorNeedRefresh = true;

    $('#update-theme-btn').click(function () {
        simulator.location.reload(true);
    });

    $('#simulator-pc-btn').click(function () {
        $('#simulator').attr('class', '').addClass('simulator-pc');
    });

    $('#simulator-pad-btn').click(function () {
        $('#simulator').attr('class', '').addClass('simulator-pad');
    });

    $('#simulator-mobile-btn').click(function () {
        $('#simulator').attr('class', '');
        $('#simulator').addClass('simulator-mobile');
    });

    $('#save-btn').click(function () {
        $settingIframe.get(0).contentWindow.confirm();
    });

    $('#close-setting-panel').click(function () {
        hideSettingPanel();
    });

    $('#show-setting-panel').click(function () {
        showSettingPanel();
    });

    function hideSettingPanel() {
        $('.setting-panel-wrap').fadeOut(function () {
            $('#show-setting-panel').show();
        });
    }

    function showSettingPanel() {
        $('.setting-panel-wrap').fadeIn();
       // $('#show-setting-panel').hide();
    }

    function showDesignBtn() {
        if (!$('.setting-panel-wrap').is(':visible')) {
            $('#show-setting-panel').show();
        }

    }

    function hideDesignBtn() {
        $('.setting-panel-wrap').hide();
        $('#show-setting-panel').hide();
    }

    function settingIframeRefresh() {
        $settingIframe.attr('src', "{:url('Theme/fileSetting')}?theme={:input('param.theme')}&file=" + encodeURIComponent(simulator._themeFile));
    }


    function simulatorRefresh() {
        if (simulatorNeedRefresh) {
            settingIframeRefresh();
            $simulator.load(function () {
                $(simulator.document).on('click', 'a', function () {
                    var target = $(this).attr('target');
                    var href = $(this).attr('href');
                    if (target == '_blank' && href.indexOf('http') < 0) {
                        simulator.location.href = href;
                        return false;
                    }
                });
            });
        }

        simulatorNeedRefresh = true;
    }


    function afterSaveSetting() {
        simulatorNeedRefresh = false;
        simulator.location.reload();
    }


</script>
</body>
</html>