.

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-acomp/demo/

Upload File :

Current File : /var/www/html/libs/absol-acomp/demo/quickmenu.html

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, user-scale=no">
    <meta charset="UTF-8">
    <title>QuickMenu</title>
    <link rel="stylesheet" href="https://absol.cf/hightlight/styles/default.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script src="https://absol.cf/hightlight/highlight.pack.js"></script>
    <script src="../dist/absol-acomp.js?<?php  echo stat('../dist/absol-acomp.js')['mtime'];?>"></script>
    <style>
        .dark.bg {
            background-color: rgba(30, 30, 32, 1);
            /* background-color: white; */
        }

        .bg {
            padding-left: 5px;
            padding-top: 20px;
            padding-bottom: 20px;
            border: solid 1px rgb(30, 30, 32);
            overflow: auto;
        }

        .bg > button {
            margin: 50px;
        }

        .hover-blue:hover {
            color: blue;
        }

        .hover-yellow:hover {
            color: yellow;
        }

        body {
            font-size: 20px;
        }

        * {
            box-sizing: border-box;
        }

        .hljs {
            font-size: 14px;
        }

    </style>
</head>

<body>
<script>
    function render(o) {
        return absol._(o).addTo(document.body);
    }
</script>
<h2>Static</h2>
<script class="viewable">
    (function () {
        var menuProps = {
            items: [
                {
                    text: "Tool",
                    items: [
                        {
                            text: "Tool 1"
                        },
                        {
                            text: "Tool 2"
                        }
                    ]
                },
                {
                    text:'sub1',
                    items:[
                        {text:'item 11'},
                        {text:'item 12'}
                    ]
                },
                {
                    text: 'Cut', key: 'extendStyle[color=red]', cmd: 'cut',
                    extendStyle: {
                        color: 'red'
                    },
                    icon: 'span.mdi.mdi-content-cut'
                },
                "================================",
                { text: 'Undo', key: 'Ctrl+Z', cmd: 'undo', icon: 'span.mdi.mdi-undo' },
                { text: 'Redo', key: 'Ctrl+Y', cmd: 'redo', icon: 'span.mdi.mdi-redo' },

                { text: 'Copy', key: 'extendClasses[hover-blue]', cmd: 'copy', extendClasses: 'hover-blue' },
                {
                    text: 'Paste',
                    key: 'icon[.mdi.mdi-flash]',
                    cmd: 'paste',
                    icon: 'span.mdi.mdi-flash',
                    extendClasses: 'hover-yellow'
                },
                "==============================",
                { text: 'Find', key: 'iconSrc', cmd: 'find' },
                { text: 'Replace', key: 'Ctrl+R', cmd: 'replace' },
                "=============================",
                { text: 'Find in Nodes', key: 'Ctrl+Shift+F' },
                { text: 'Replace in Nodes', iconSrc: 'http://absol.cf/exticons/extra/folder-git.svg', key: 'svgIcon' }
            ]
        };
        var anchor = ['modal', [0, 3, 4, 7], [1, 2, 5, 6], [0, 7], [3, 4]];
        anchor.forEach(anchor => {
            var button = render({
                tag: 'flexiconbutton',
                style: {
                    margin: '5px'
                },
                props: {
                    text: 'Anchor = ' + JSON.stringify(anchor)
                }
            });
            var holder = absol.QuickMenu.toggleWhenClick(button, {
                menuProps: menuProps,
                anchor: anchor,
                onSelect: function (item) {
                    console.log(item);
                }
            })
        })
    })();
</script>
<h2>Dynamic</h2>
<script class="viewable">
    (function () {
        var counter = 10;

        var button = render({
            tag: 'flexiconbutton',
            style: {
                margin: '200px'
            },
            props: {
                text: 'Counter = ' + counter
            }
        });
        var holder = absol.QuickMenu.toggleWhenClick(button, {
            getMenuProps: function () {
                return {
                    items: [
                        {
                            text: 'Cut', key: 'extendStyle[color=red]', cmd: 'cut',
                            extendStyle: {
                                color: 'red'
                            },
                            icon: 'span.mdi.mdi-content-cut'
                        },
                        "================================",
                        { text: 'Lần thứ ' + counter, value: counter },
                        { text: 'Menu text', value: 123 }
                    ]
                }
            },
            getAnchor: function () {
                return [Math.random() * 15 >> 0, Math.random() * 15 >> 0, Math.random() * 15 >> 0]
            },
            onSelect: function (item) {
                console.log(item)
            },
            onOpen: function () {
                //do something
            },
            onClose: function () {
                counter--;
                button.text = 'Counter = ' + counter;
                if (!counter) holder.remove();//remove quickmenu form button
            }
        })
    })();
</script>
<div style="height: 50vh"></div>

<script src="https://absol.cf/absol/demo/autohightlighting.js"></script>

</body>

</html>

VaKeR 2022