From 3babd8495e920ac556910aa4e966efc88b8fe090 Mon Sep 17 00:00:00 2001 From: Martin Edenhofer Date: Mon, 24 Jul 2017 09:48:18 +0200 Subject: [PATCH] Implemented issue #443 - Using text modules also in chat. --- app/assets/javascripts/app/controllers/chat.coffee | 11 ++++++++--- .../app/controllers/widget/text_module.coffee | 2 +- .../app/lib/base/jquery.contenteditable.js | 13 +++++++++++-- .../javascripts/app/lib/base/jquery.textmodule.js | 6 +++++- .../app/views/customer_chat/chat_window.jst.eco | 4 +++- app/assets/stylesheets/zammad.scss | 9 +++++++-- 6 files changed, 35 insertions(+), 10 deletions(-) diff --git a/app/assets/javascripts/app/controllers/chat.coffee b/app/assets/javascripts/app/controllers/chat.coffee index 96f4de60d..3934511a2 100644 --- a/app/assets/javascripts/app/controllers/chat.coffee +++ b/app/assets/javascripts/app/controllers/chat.coffee @@ -462,6 +462,11 @@ class ChatWindow extends App.Controller ) ) + # show text module UI + new App.WidgetTextModule( + el: @input + ) + focus: => @input.focus() @@ -473,7 +478,7 @@ class ChatWindow extends App.Controller if event.data and event.data.callback event.data.callback() - @$('.js-customerChatInput').ce({ + @input.ce({ mode: 'richtext' multiline: true maxlength: 40000 @@ -522,7 +527,7 @@ class ChatWindow extends App.Controller switch event.keyCode when TABKEY - allChatInputs = $('.js-customerChatInput').not('[disabled="disabled"]') + allChatInputs = @input.not('[disabled="disabled"]') chatCount = allChatInputs.size() index = allChatInputs.index(@input) @@ -542,7 +547,7 @@ class ChatWindow extends App.Controller allChatInputs.eq(chatCount-1).focus() when ENTERKEY - if !event.shiftKey + if !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey event.preventDefault() @sendMessage() diff --git a/app/assets/javascripts/app/controllers/widget/text_module.coffee b/app/assets/javascripts/app/controllers/widget/text_module.coffee index b4027bfeb..09dc5468c 100644 --- a/app/assets/javascripts/app/controllers/widget/text_module.coffee +++ b/app/assets/javascripts/app/controllers/widget/text_module.coffee @@ -8,7 +8,7 @@ class App.WidgetTextModule extends App.Controller # remember instances @bindElements = [] if @selector - @bindElements = @$( @selector ).textmodule() + @bindElements = @$(@selector).textmodule() else if @el.attr('contenteditable') @bindElements = @el.textmodule() diff --git a/app/assets/javascripts/app/lib/base/jquery.contenteditable.js b/app/assets/javascripts/app/lib/base/jquery.contenteditable.js index d074e3dff..195c33e08 100644 --- a/app/assets/javascripts/app/lib/base/jquery.contenteditable.js +++ b/app/assets/javascripts/app/lib/base/jquery.contenteditable.js @@ -88,7 +88,7 @@ // handle enter this.$element.on('keydown', function (e) { _this.log('keydown', e.keyCode) - if ( _this.preventInput ) { + if (_this.preventInput) { this.log('preventInput', _this.preventInput) return } @@ -97,7 +97,7 @@ if (e.keyCode === 13) { // disbale multi line - if ( !_this.options.multiline ) { + if (!_this.options.multiline) { e.preventDefault() return } @@ -111,6 +111,15 @@ document.execCommand('Outdent') return } + + // behavior to enter new line on alt+enter + // on alt + enter not realy newline is fired, to make + // it compat. to other systems, do it here + if (!e.shiftKey && e.altKey && !e.ctrlKey && !e.metaKey) { + e.preventDefault() + _this.paste('

') + return + } } // on zammad magicKey + i/b/u/s diff --git a/app/assets/javascripts/app/lib/base/jquery.textmodule.js b/app/assets/javascripts/app/lib/base/jquery.textmodule.js index 699ff1847..f294a115e 100644 --- a/app/assets/javascripts/app/lib/base/jquery.textmodule.js +++ b/app/assets/javascripts/app/lib/base/jquery.textmodule.js @@ -54,6 +54,7 @@ // enter if (e.keyCode === 13) { e.preventDefault() + e.stopPropagation() var id = _this.$widget.find('.dropdown-menu li.is-active').data('id') // as fallback use hovered element @@ -92,6 +93,9 @@ var menu = _this.$widget.find('.dropdown-menu') + if (!active.get(0)) { + return + } if (active.position().top < 0) { // scroll up menu.scrollTop( menu.scrollTop() + active.position().top ) @@ -187,7 +191,7 @@ // set height of widget Plugin.prototype.movePosition = function() { if (!this._position) return - var height = this.$element.height() + 2 + var height = this.$element.outerHeight() + 2 var widgetHeight = this.$widget.find('ul').height() //+ 60 // + height var top = -( widgetHeight + height ) + this._position.top var left = this._position.left - 6 diff --git a/app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco b/app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco index 8e6710ef7..1fef2ed9b 100644 --- a/app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco +++ b/app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco @@ -26,6 +26,8 @@
-
+
+
+
<%- @T('Send') %>
\ No newline at end of file diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index 6076f7c66..39e727d9f 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -8199,8 +8199,13 @@ output { .chat-input { margin-right: 10px; - max-height: 50vh; - overflow: auto; + flex-grow: 1; + position: relative; + + .form-control { + overflow: auto; + max-height: 50vh; + } } .browser {