.

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/dualselectmenu.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, user-scale=no">

    <meta charset="UTF-8">
    <title>DualSelectMenu</title>
    <script src="../dist/absol-acomp.js?<?php  echo stat('../dist/absol-acomp.js')['mtime'];?>"></script>
</head>
<body>

<script>
    (function () {
        var _ = absol._;
        var $ = absol.$;

        var dataSync = fetch('https://raw.githubusercontent.com/duthienkt/absol-geography/main/CityList.js').then(function (res) {
            return res.text();
        }).then(function (text) {
            var js = text.replace('export default', 'return');
            var data = (new Function(js))();
            var res = data.countries.map(function (c) {
                var item = {};
                item.text = c[0];
                item.value = c[0];
                if (c.t) {
                    item.items = c.t.map(function (city) {
                        return {
                            text: city[0],
                            value: city[0]
                        }
                    });

                    item.items.sort(function (a, b) {
                        return a.text < b.text ? -1 : 1;
                    });
                }
                else {
                    item.items = [{ text: 'none', value: 'none' }]
                }
                return item;
            });
            res.sort(function (a, b) {
                return a.text < b.text ? -1 : 1;
            });
            return res;
        });

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



        render({ style: { height: '70vh' } });
        render('<h2>DualSelectMenu</h2>');

        var dsm = render({
            tag: 'dualselectmenu',
            props: {
                value: ['Vietnam', 'Kon Tum'],
                enableSearch: true,
                //default format: "$0, $1"
                format:'City: $1, Country: $0'
            },
            on:{
                change: function (){
                    absol.require('snackbar').show(this.value.join(' - '));
                }
            }
        });

        render({ style: { height: '30vh' } });

        dataSync.then(function (items) {

            var itemJS = 'module.exports = ' + absol.generateJSVariable(items);
            var downloadBtn = _({
                tag: 'flexiconbutton',
                style: {
                    marginLeft: '20px',
                    height: '30px'
                },

                props: {
                    text: 'Tải xuống items mẫu',
                    icon: 'span.mdi.mdi-download'
                },
                on: {
                    click: function () {
                        absol.FileSaver.saveTextAs(itemJS, 'example_items.js');
                    }
                }
            });
            $(document.body).addChildAfter(downloadBtn, dsm);
            dsm.items = items;
            var l = new absol.ListDictionary(items);
            console.log(l);
        });

    })();
</script>
<pre><code>
     var dsm = _({
            tag: 'dualselectmenu',
            props: {
                value: ['Vietnam', 'Kon Tum'],
                // enableSearch: true
                items: your_items
            },
        });</code>
</pre>
</body>
</html>

VaKeR 2022