.

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

<!DOCTYPE html>
<html>

<head>
    <title>Media Input</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://absol.cf/absol/dist/polyfill.js"></script>
    <!-- <link rel="stylesheet" href="https://absol.cf/hightlight/styles/default.css"> -->
    <!-- <link rel="stylesheet" href="https://absol.cf/materialdesignicons/materialdesignicons.min.css"> -->

    <!-- <script src="https://absol.cf/hightlight/highlight.pack.js"></script> -->
    <!-- <script>hljs.initHighlightingOnLoad();</script> -->
    <script src="../dist/absol-acomp.js?<?php  echo stat('../dist/absol-acomp.js')['mtime'];?>"></script>
    <style>

    </style>
</head>

<body>
    <script>
        runDebugTask();
    </script>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        .message-box {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            position: relative;
            border: solid 1px #ddd;
            overflow-y: auto;
        }

        .input-ctn {
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: aliceblue;
        }

        .message-ctn {}

        .message {
            width: 50%;
            padding: 10px;
            background-color: deepskyblue;
        }
    </style>
    <div class="message-box">
        <div class="message-ctn absol-bscroller"></div>
        <div class="input-ctn"></div>
    </div>

    <script>
        (function () {
            var _ = absol._;
            var $ = absol.$;
            var messBox = $('.message-box');
            var focusButton = _('<button>Đổi mode thành "new"</button>').on('click', function () {
                if (messInput.mode == 'new'){
                    this.innerHTML = 'Đổi mode thành "new"';
                    messInput.mode = 'edit';
                }
                else {
                    messInput.mode = 'new';
                    this.innerHTML = 'Đổi mode thành "edit"';

                }
                messInput.focus();
            });


            var inputCtn = $('.input-ctn');
            var messageCtn = $('.message-ctn');
            messageCtn.addChild(focusButton);
            var messInput = _({
                tag: 'messageinput',
                props: {
                    mode: 'edit'
                },
                on: {
                    change: function () {
                        // console.log(this.text, this.files, this.images);// files, images : Array<Files> text: String

                    },
                    sizechange: function (event) {
                        messageCtn.addStyle('height', 'calc(100% - ' + (event.bound.height) + 'px)')
                    },
                    send: function () {
                        //callback này gọi khi enter
                        console.log('send', this.text, this.files, this.images)
                        this.clearAllContent()
                        this.blur();
                    },
                    cancel:function(){
                        //callback này chỉ gọi trong chế độ mode="edit", khi người dùng nhấn ESC hoặc click vào X
                        console.log('Cancel');
                    }
                }
            });
            inputCtn.addChild(messInput);

        })()
    </script>
</body>

</html>

VaKeR 2022