.

VaKeR CYBER ARMY
Server : Apache/2.4.41 (Ubuntu)
System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64
User : www-data ( 33)
PHP Version : 7.4.33
Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare,
Directory : /var/www/html/libs/absol-poser/demo/
Upload File :
Current File : /var/www/html/libs/absol-poser/demo/layout_preview.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layout Preview</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<style>
    #demo-seq {
        padding-top: 12px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    #demo-seq > div {
        margin-bottom: 12px;
    }

    #demo-page {
        background-color: #ede7f6;
        padding-left: 20px;
        padding-right: 20px;
    }


    body, html {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }

    body {
        display: flex;
        flex-direction: column;
    }

    body > .absol-frame-view {
        flex-grow: 1;
    }
</style>

<script src="../dist/absol_poser.js?time=123"></script>
<script>
    (function () {
        var _ = absol._;
        var $ = absol.$;
        absol.ContextCaptor.auto();

        function getData() {
            var savedData;
            try {
                savedData = JSON.parse(localStorage.getItem('question_demo_data'));
            } catch (e) {
                savedData = null;
            }
            if (savedData) {
                SnackBar.show("load...");
                return Promise.resolve(savedData);
            } else {
                return fetch('demo_data.js').then(function (res) {
                    return res.text()
                })
                    .then(function (text) {
                        var md = {exports: {}};
                        var factory = new Function('module', 'exports', text + ';\nreturn module.exports;');
                        SnackBar.show("downloaded...");
                        return factory(md, md.exports);
                    })
            }
        }

        var sTabbar = _({
            tag: 'statictabbar',
            props: {
                items: [
                    {
                        text: 'EDITOR',
                        value: 'editor'
                    },
                    {
                        text: 'VIEWER',
                        value: 'viewer'
                    },
                    {
                        text: "JSON",
                        value: 'json'
                    },
                    {
                        text: "RESULT",
                        value: 'result'
                    }
                ],
                value: 'editor'
            },
            on: {
                change: function (event) {
                    switch (this.value) {
                        case 'editor':
                            editorFrame.requestActive();
                            break;
                        case 'viewer':
                            viewerFrame.requestActive();
                            mViewer.setData(mEditor.getData());
                            break;
                        case 'json':
                            jsonFrame.requestActive();
                            var jsCode = `module.exports = ${JSON.stringify(mEditor.getData(), null, 4).replace(/"([^"]+)":/g,
                                function (all, g1) {
                                    return g1 + ':';
                                })}`;
                            jsonView.clearChild();
                            _({
                                tag: 'button',
                                child: {text: 'download'},
                                on: {
                                    click: function () {
                                        absol.FileSaver.saveTextAs(jsCode, "demo_data.js");
                                    }
                                }
                            }).addTo(jsonView);
                            jsonView.addChild(_({child: {text: jsCode}}))
                            break;
                        case 'result':
                            resultFrame.requestActive();
                            resultView.clearChild();
                            var resultJSON = JSON.stringify(mViewer.getResult(), null, 4);
                            _({
                                tag: 'button',
                                child: {text: 'download'},
                                on: {
                                    click: function () {
                                        absol.FileSaver.saveTextAs(resultJSON, "result_data.js");
                                    }
                                }
                            }).addTo(resultView);
                            resultView.addChild(_({child: {text: resultJSON}}))
                            break;
                    }
                }
            }
        });
        var tabbarCtn = _({
            style: {
                backgroundColor: 'white',
                padding: '0 0 5px  0',
                borderBottom: '1px solid #ddd'
            },
            child: sTabbar
        }).addTo(document.body);


        var PoserEditor = absol.poser.PoserEditor;
        var PoserViewer = absol.poser.PoserViewer;
        var mEditor = new PoserEditor();
        var mViewer = new PoserViewer();
        var jsonView = _({
            tag: 'div',
            style: {
                width: '100%',
                height: '100%',
                boxSizing: 'border-box',
                whiteSpace: 'pre-wrap',
                padding: '5px',
                overflow: 'auto'
            }
        });

        var resultView = _({
            tag: 'div',
            style: {
                width: '100%',
                height: '100%',
                boxSizing: 'border-box',
                whiteSpace: 'pre-wrap',
                padding: '5px',
                overflow: 'auto'
            }
        });

        mEditor.on('change', function () {
            localStorage.setItem("question_demo_data", JSON.stringify(this.getData()));
            SnackBar.show('save...');
        });

        mViewer.on('resultchange', function () {
            SnackBar.show('result change');
            localStorage.setItem("question_demo_result", JSON.stringify(this.getResult()));
        });

        var editorFrame = _({
            tag: 'frame',
            child: mEditor.getView().addStyle({
                width: '100%',
                height: '100%'
            })
        });

        var viewerFrame = _({
            tag: 'frame',
            child: [
                mViewer.getView().addStyle({
                    width: '100%',
                    height: '100%'
                })
            ]
        });

        var jsonFrame = _({
            tag: 'frame',
            child: [
                jsonView
            ]
        });

        var resultFrame = _({
            tag: 'frame',
            child: [
                resultView
            ]
        })


        var frameView = _({
            tag: 'frameview',
            child: [
                editorFrame,
                viewerFrame,
                jsonFrame,
                resultFrame
            ]

        }).addTo(document.body);

        editorFrame.requestActive();

        mEditor.start();


        var Toast = absol.require('toast');
        var SnackBar = absol.require('snackbar');



        getData().then(function (data) {
            mEditor.setData(data);
            mViewer.setData(data);
            setTimeout(function () {
                // $('button#editor-viewer').click();
            }, 1000);
        });
    }());
</script>

</body>
</html>
VaKeR 2022