chat designer: allow to toggle the chat and change title

app/assets/javascripts/app/controllers/_channel/chat.coffee

@@ -10,6 +10,8 @@ class App.ChannelChat extends App.Controller
     'blur .js-testurl-input': 'changeDemoWebsite'
     'click .js-selectBrowserWidth': 'selectBrowserWidth'
     'click .js-swatch': 'usePaletteColor'
+    'click .js-toggle-chat': 'toggleChat'
+    'input .js-chatTitle': 'changeTitle'
 
   elements:
     '.js-browser': 'browser'
@@ -23,6 +25,7 @@ class App.ChannelChat extends App.Controller
     '.js-color': 'colorField'
     '.js-screenshot': 'screenshot'
     '.js-website': 'website'
+    '.js-chat-welcome': 'chatWelcome'
 
   apiOptions: [
     {
@@ -178,11 +181,11 @@ class App.ChannelChat extends App.Controller
 
     @urlInput.addClass('is-loading')
 
-    # clear palette and iframe
     @palette.empty()
-    @website.attr('data-mode', '')
+
-    @iframe.attr('src', '')
     @screenshot.attr('src', '')
+    @website.attr('data-mode', 'iframe')
+    @iframe.attr('src', @url)
 
     $.ajax
       url: 'https://images.zammad.com/api/v1/webpage/combined'
@@ -196,12 +199,9 @@ class App.ChannelChat extends App.Controller
     imageSource = data['data_url']
 
     if imageSource 
-      console.log "renderDemoWebsite", typeof imageSource, imageSource
       @screenshot.attr 'src', imageSource
+      @iframe.attr('src', '')
       @website.attr('data-mode', 'screenshot')
-    else
-      @iframe.attr 'src', @url
-      @website.attr('data-mode', 'iframe')
 
     @renderPalette data['palette']
 
@@ -235,6 +235,12 @@ class App.ChannelChat extends App.Controller
     @colorField.val code
     @updateParams()
 
+  toggleChat: =>
+    @chat.toggleClass('is-open')
+
+  changeTitle: (event) ->
+    @chatWelcome.html $(event.currentTarget).val()
+
   new: (e) =>
     new App.ControllerGenericNew(
       pageData:
@@ -294,6 +300,7 @@ class App.ChannelChat extends App.Controller
       params.flat = true
     else
       @chat.removeClass('zammad-chat--flat')
+    @chatWelcome.html params.title
 
     if @permanent
       for key, value of @permanent

app/assets/javascripts/app/views/channel/chat.jst.eco

@@ -60,7 +60,7 @@
   
   <label for="preview-iframe" class="formGroup-label"><%- @T('Preview') %></label>
   <div class="browser chat-demo js-browser">
-    <div class="browser-head">
+    <div class="browser-head js-demo-head">
       <form class="browser-input js-testurl" novalidate>
         <input type="url" class="js-testurl-input" id="preview-iframe" placeholder="zammad.org">
         <div class="loading icon small muted"></div>
@@ -68,18 +68,18 @@
     </div>
     <div class="browser-body js-demo">
       <div class="browser-website js-website">
-        <iframe class="js-iframe" sandbox></iframe>
+        <iframe class="js-iframe" sandbox="allow-scripts allow-same-origin"></iframe>
         <img class="js-screenshot">
       </div>
       <style>@import "/assets/chat/chat.css";</style>
       <div class="chat-demo-animationHolder">
-        <div class="js-chat zammad-chat zammad-chat-is-visible zammad-chat-is-open" style="bottom: 0px;">
+        <div class="js-chat zammad-chat zammad-chat-is-open zammad-chat-is-visible">
-          <div class="zammad-chat-header js-chat-open js-backgroundColor">
+          <div class="zammad-chat-header js-toggle-chat js-backgroundColor">
             <div class="zammad-chat-header-controls">
               <span class="zammad-chat-agent-status" data-status="online"><%- @T('Online') %></span>
               <span class="zammad-chat-header-icon">
                 <svg class="zammad-chat-header-icon-open" viewBox="0 0 13 7"><path d="M10.807 7l1.4-1.428-5-4.9L6.5-.02l-.7.7-4.9 4.9 1.414 1.413L6.5 2.886 10.807 7z" fill-rule="evenodd"></path></svg>
-                <svg class="zammad-chat-header-icon-close js-chat-close" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"></path></svg>
+                <svg class="zammad-chat-header-icon-close" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"></path></svg>
               </span>
             </div>
             <div class="zammad-chat-agent">
@@ -90,7 +90,7 @@
             </div>
             <div class="zammad-chat-welcome zammad-chat-is-hidden">
               <svg class="zammad-chat-icon" viewBox="0 0 24 24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z" fill-rule="evenodd"></path></svg>
-              <span class="zammad-chat-welcome-text"><%- @T('<strong>Chat</strong> with us!') %></span>
+              <span class="zammad-chat-welcome-text js-chat-welcome"><strong>Chat</strong> with us!</span>
             </div>
           </div>
           <div class="zammad-chat-body">
@@ -118,7 +118,7 @@
           <label for="form-chat-title"><%- @T('Chat Title') %></label>
         </div>
         <div class="controls">
-          <input type="text" id="form-chat-title" name="title" value="&lt;strong&gt;Chat&lt;/strong&gt; with us!">
+          <input class="js-chatTitle" type="text" id="form-chat-title" name="title" value="&lt;strong&gt;Chat&lt;/strong&gt; with us!">
         </div>
         <span class="help-block"><%- @T('Shown when the chat is closed.') %></span>
       </div>

app/assets/stylesheets/zammad.scss

@@ -7484,7 +7484,7 @@ output {
     .loading.icon {
       position: absolute;
       right: 11px;
-      top: 11px;
+      top: 10px;
       display: none;
     }
   }
@@ -7508,9 +7508,38 @@ output {
     position: absolute;
     transform-origin: right bottom;
     transition: 500ms;
+    bottom: -318px;
 
-    .zammad-chat-body {
+    .zammad-chat-welcome {
-      transition: 500ms; 
+      display: block !important;
+    }
+
+    .zammad-chat-header-icon-open {
+      display: inline !important;
+    }
+
+    .zammad-chat-agent-status,
+    .zammad-chat-header-icon-close,
+    .zammad-chat-agent { 
+      display: none !important;
+    }
+
+    &.is-open {
+      bottom: 0;
+      
+      .zammad-chat-agent {
+        display: block !important;
+      }
+      
+      .zammad-chat-header-icon-close,
+      .zammad-chat-agent-status {
+        display: inline-block !important;
+      }
+    
+      .zammad-chat-welcome,
+      .zammad-chat-header-icon-open {
+        display: none !important;
+      }
     }
     
     &.is-fullscreen {
@@ -7533,7 +7562,7 @@ output {
     width: 100%;
     height: 100%;
     animation: slide-up 500ms;
-    pointer-events: none;
+    // pointer-events: none;
   }
 }