Отключение кнопок после нажатия - PullRequest
Новая
       11

Отключение кнопок после нажатия

0 голосов
/ 06 сентября 2018

Есть ли способ отключить кнопку, когда она нажата? Мы сталкиваемся со сценарием разработки приложения чат-бота в Azure Bot (NodeJS), который требует отключения кнопок при нажатии, поэтому пользователь не будет прокручивать назад и пытаться нажать кнопку, которая не даст указанного результата

Мой код JS 

var MyWebChat = function(params) {

    // Webchat client args
    var user = {
        id: params['userid'] || 'userid',
        name: params["username"] || 'username'
    };

    var bot = {
        id: params['botid'] || 'botid',
        name: params["botname"] || 'botname'
    };

    // Create Directline connection and application
    const  botConnection = new BotChat.DirectLine({
        domain: params['domain'],
        token: document.getElementById("directLineToken").value,
        secret: params['s'],
        webSocket: params['webSocket'] && params['webSocket'] === "true" // defaults to true
    });

    BotChat.App({
        locale: params['locale'],
        resize: 'detect',
        speechOptions: speechOptions,
        user: user,
        botConnection: botConnection
    }, document.getElementById(params['targetElement']));

             botConnection.activity$.subscribe(function (activity) {
    $(".wc-message-wrapper[data-activity-id='" + activity.id + "'] .ac-pushButton").click(function () {
        console.log($(this));
        $(this).attr("disabled", "disabled");
    });
});
    this.loadApplication = function() {
        /**
         * Sends custom parameter to the chatbot
         **/

        var sendCustomArg = function() {
            console.log('post message');
            botConnection
                .postActivity({
                    type: "event",
                    value: "loginPageValue",
                    from: {
                        id: "passwordResetID",
                        source: "loginPage"
                    },
                    name: "loginPage"
                })
                .subscribe(function(id) { console.log("YOUR CUSTOM ARG HAS BEEN SENT")});
        }

        sendCustomArg();

        /**
         * When window unloads send endOfConversation
         * This event is catched by the bot that can freeup server resources
         **/
        window.onbeforeunload = function() {
            botConnection
                .postActivity({
                    type: "endOfConversation",
                    from: {
                        id: params['userid']
                    }
                })
                .subscribe(function(id){ console.log("endOfConversation ack")});
        };
    };

    return this;
};

Мой HTML-код: 

<!DOCTYPE html>
<html>
  <head>
    <!-- CSS -->
      <link href="https://XXXXX/QABotUI.css" rel="stylesheet" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700|Roboto+Condensed:400,700' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <script src="https://XXXXX/QASessionDemo.js"></script>

    <div id="chat-application">
       <!-- <span class="btn2" id="button2" style="float:right;right:5px;z-index: 6;position: relative;top:12px;"><svg height="16" viewBox="0 0 48 49" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m45.587 45.632c-2.132 2.135-3.731 3.469-5.863 1.334l-15.724-15.745-15.724 15.745c-2.132 2.135-3.731.534-5.863-1.334-2.133-1.868-3.465-3.736-1.333-5.871l15.724-15.745-15.724-15.745c-2.132-2.135-.533-4.003 1.333-5.871 1.865-1.868 3.731-3.469 5.863-1.334l15.724 15.745 15.724-15.745c2.132-2.135 3.731-.534 5.863 1.334 2.133 1.868 3.465 3.736 1.333 5.871l-15.724 15.745 15.724 15.745c2.132 2.135.8 4.003-1.333 5.871z" fill-rule="evenodd"/></svg> </span> -->
       <div id="botChat" class="wc-narrow"></div>
   </div>

    <!-- JAVASCRIPT -->
    <script src="https://XXXX/QABotChat.js"></script>
   <script>
        var webchatParams = {
            userid:'userid',
            username:'You',
            botid: 'XXXXXX',
            botname:'XXXXX',
            targetElement: 'botChat', // html element where the webchat gets rendered
            s:'XXXXXX',
            customArg: 'common'
        };
          new MyWebChat(webchatParams).loadApplication();
    </script>

  </body>
</html>

1 Ответ

0 голосов
/ 06 сентября 2018

Вам необходимо использовать метод прямой линии для бот-чата. Затем вы можете подписаться на действия и зарегистрировать обработчик кликов на кнопках. Вам необходимо создать объект прямой линии botConnection, а затем зарегистрировать его в приложении перед подпиской на действия. 

const botConnection = new BotChat.DirectLine({
        domain: params['domain'],
        token: document.getElementById("directLineToken").value,
        webSocket: params['webSocket'] && params['webSocket'] === 'true' // defaults to true
    });

BotChat.App({
    bot: bot,
    locale: params['locale'],
    resize: 'detect',
    speechOptions: speechOptions,
    user: user,
    botConnection: botConnection
}, document.getElementById('BotChatGoesHere'));

Следующее отключит нажатую кнопку. 

botConnection.activity$.subscribe(function (activity) {
    $(".wc-message-wrapper[data-activity-id='" + activity.id + "'] .ac-pushButton").click(function () {
        console.log($(this));
        $(this).attr("disabled", "disabled");
    });
});

Следующее отключит все кнопки в этом сообщении. 

botConnection.activity$.subscribe(function (activity) {
    $(".wc-message-wrapper[data-activity-id='" + activity.id + "']").on("click", ".ac-pushButton", function(event) {
        event.preventDefault();
        $(".wc-message-wrapper[data-activity-id='" + activity.id + "'] .ac-pushButton").attr("disabled", "disabled");
    });
});

Чтобы скрыть эффект наведения на отключенных кнопках, добавьте в свой код следующее: 

button[disabled] {
  pointer-events: none;
}
...