lundi 24 juillet 2017

How to call Bootstrap jquery function from Ember 2 on specific action

I am doing Chat application ,Currently I managed to add bootstrap/bootsnipp code(Html,css,jquery) in my Ember2.14 project and jquery works fine when I add it in this folder public/assets/Chat.js then I add reference to it in app/index.html.it is now loaded in vendor.js and jquery is working fine when I am loading the page...

-My Question is: How can I call the jquery function (again) from Ember and where to put the code.. I want when I press Send button to put my input Message in Chat window with jquery effect like the Bootstrap example in the below link ..

I am totally new to jquery & Ember so I am not sure which function from the below jquery code I need to call (I think it may be sendMessage) and how to call it from Ember..

jquery:

(function () {
    var Message;
    Message = function (arg) {
        this.text = arg.text, this.message_side = arg.message_side;
        this.draw = function (_this) {
            return function () {
                var $message;
                $message = $($('.message_template').clone().html());
                $message.addClass(_this.message_side).find('.text').html(_this.text);
                $('.messages').append($message);
                return setTimeout(function () {
                    return $message.addClass('appeared');
                }, 0);
            };
        }(this);
        return this;
    };
    $(function () {
        var getMessageText, message_side, sendMessage;
        message_side = 'right';
        getMessageText = function () {
            var $message_input;
            $message_input = $('.message_input');
            return $message_input.val();
        };
        sendMessage = function (text) {
            var $messages, message;
            if (text.trim() === '') {
                return;
            }
            $('.message_input').val('');
            $messages = $('.messages');
            message_side = message_side === 'left' ? 'right' : 'left';
            message = new Message({
                text: text,
                message_side: message_side
            });
            message.draw();
            return $messages.animate({ scrollTop: $messages.prop('scrollHeight') }, 300);
        };
        $('.send_message').click(function (e) {
            return sendMessage(getMessageText());
        });
        $('.message_input').keyup(function (e) {
            if (e.which === 13) {
                return sendMessage(getMessageText());
            }
        });
        sendMessage('Hello Philip! :)');
        setTimeout(function () {
            return sendMessage('Hi Sandy! How are you?');
        }, 1000);
        return setTimeout(function () {
            return sendMessage('I\'m fine, thank you!');
        }, 2000);
    });
}.call(this)); 


Full BootstarpCode: http://ift.tt/2tT9j7J




Aucun commentaire:

Enregistrer un commentaire