.

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/toast.html
<!DOCTYPE html>
<html>

<head>
    <title>Toast</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, user-scale=no">
    <link rel="stylesheet" href="https://absol.cf/hightlight/styles/default.css">
    <!-- <link rel="stylesheet" href="https://absol.cf/materialdesignicons/materialdesignicons.min.css"> -->
    <script src="../dist/absol-acomp.js?<?php  echo stat('../dist/absol-acomp.js')['mtime'];?>"></script>
    <script src="https://absol.cf/hightlight/highlight.pack.js"></script>
    <style>
        /* body{
            background-color: black;
        } */
    </style>
</head>

<body>
<h1>Toast</h1>
<div class="demo"></div>
<script>
    var _ = absol._;
    var $ = absol.$;

</script>

<script class="viewable">
    var demoDiv = $('.demo');
    var standardToastElt0 = _({
        tag: 'toast',
        style: {
            'margin-bottom': '20px'
        },
        props: {
            htitle: 'Standard Toast',
            message: 'Hello, this is toast message',
            variant: 'primary',
            timeText: randomPick([new Date(), '11 minutes ago', 'now'])
        }
    });

    var standardToastElt1 = _({
        tag: 'toast',
        style: {
            'margin-bottom': '10px'
        },
        props: {
            htitle: 'Standard Custom Toast',
            variant: 'info',
            time: new Date()        },
        //do not set message property, add child with your custom style
        child: [
            {
                style: {
                    display: 'flex',
                    padding: '5px',
                    'align-items': 'center'
                },
                child: [
                    {
                        tag: 'img',
                        style: {
                            width: '40px',
                            height: '40px'
                        },
                        props: {
                            src: 'https://avatars1.githubusercontent.com/u/32388488?s=400&v=4'
                        }
                    },
                    {
                        style: {
                            padding: '5px'
                        },
                        child: { tag: 'span', child: { text: absol.string.randomParagraph(200) } }
                    }
                ]
            }
        ]
    });


    demoDiv.addChild(standardToastElt0);
    demoDiv.addChild(standardToastElt1);

    absol.VariantColors.keys.forEach(function (variant) {
        var standardToastElt2 = _({
            tag: 'toast',
            class: 'as-variant-background',
            style: {
                'margin-bottom': '20px'
            },
            props: {
                htitle: 'Standard Toast',
                message: 'Hello, this is toast message',
                variant: variant,
                timeText: randomPick([new Date(), '11 minutes ago', 'now'])
            }
        });
        demoDiv.addChild(standardToastElt2);
    })

    //toast
    function randomPick(arr) {
        return arr[Math.floor(Math.random() * arr.length)];
    }

    var Toast = absol.require('toast');
    var idx = 0;
    var button = _({
        tag: 'button',
        child: { text: 'MAKE TOAST MESSAGE' },
        on: {
            click: function () {
                var variant = randomPick([undefined, 'primary', 'secondary',
                    'success', 'info',
                    'warning', 'error', 'danger',
                    'light', 'dark',
                    'link', 'sticky-note'])
                var toastElt = Toast.make({
                    class: Math.random() > 0.5 ? ['as-variant-background'] : [],
                    props: {
                        htitle: 'Toast idx = ' + (++idx) + ' variant = ' + variant,
                        message: 'Hello, this is toast message with variant = ' + variant,
                        variant: variant,
                        disappearTimeout: 6000,// auto disappear after 6s
                        timeText: randomPick([new Date(), '11 minutes ago', 'now'])
                    },
                    on: {
                        disappeared: function () {
                            console.log("disappeared");
                        }
                    }
                }, ["se", "sw", "ne", "nw", 'sc'][idx % 5]);
            }
        }
    });

    var button1 = _({
        tag: 'button',
        style: {
            'margin-left': '20px'
        },
        child: { text: 'MAKE CUSTOM TOAST' },
        on: {
            click: function () {
                var variant = randomPick([undefined, 'primary', 'secondary',
                    'success', 'info',
                    'warning', 'error', 'danger',
                    'light', 'dark',
                    'link', 'sticky-note'])
                var toastElt = Toast.make({
                    props: {
                        htitle: 'Toast idx = ' + (++idx) + ' variant = ' + variant,
                        //do not set message property
                        variant: variant,
                        disappearTimeout: 6000,
                        timeText: randomPick([new Date(), '11 minutes ago', 'now'])
                    },
                    child: [
                        {
                            style: {
                                display: 'flex',
                                padding: '5px',
                                'align-items': 'center'
                            },
                            child: [
                                {
                                    tag: 'img',
                                    style: {
                                        width: '40px',
                                        height: '40px'
                                    },
                                    props: {
                                        src: 'https://avatars1.githubusercontent.com/u/32388488?s=400&v=4'
                                    }
                                },
                                {
                                    style: {
                                        padding: '5px'
                                    },
                                    child: { tag: 'span', child: { text: absol.string.randomParagraph(200) } }
                                }
                            ]
                        }
                    ],
                    on: {
                        disappeared: function () {
                            console.log("disappeared", this);
                        }
                    }
                }, ["se", "sw", "ne", "nw", 'sc'][idx % 5]);
            }
        }
    });

    demoDiv.addChild(button);
    demoDiv.addChild(button1);


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

</body>

</html>
VaKeR 2022