chat designer: remove tabs, add documentation

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

@@ -1,35 +1,4 @@
-class App.ChannelChat extends App.ControllerTabs
-  header: 'Chat Widget'
-  addTab: true
-
-  constructor: ->
-    super
-
-    @title @header, true
-
-    @load()
-
-  load: =>
-    @tabs = []
-    @ajax(
-      id:   'chat_index'
-      type: 'GET'
-      url:  @apiPath + '/chats'
-      processData: true
-      success: (data, status, xhr) =>
-        App.Collection.loadAssets(data.assets)
-        for chat in App.Chat.all()
-          tab =
-            name: chat.name
-            target: "chat-#{chat.id}"
-            controller: App.ChannelChatDesigner
-            params:
-              model: chat
-          @tabs.push tab
-        @render()
-    )
-
-class App.ChannelChatDesigner extends App.Controller
+class App.ChannelChat extends App.Controller
   events:
     'click .js-add': 'new'
     'click .js-edit': 'edit'
@@ -48,6 +17,72 @@ class App.ChannelChatDesigner extends App.Controller
     '.js-chat': 'chat'
     '.js-testurl-input': 'urlInput'
     '.js-backgroundColor': 'chatBackground'
+    '.js-paramsBlock': 'paramsBlock'
+    '.js-code': 'code'
+
+  apiOptions: [
+    { 
+      name: 'channel'
+      default: "'default'"
+      type: 'String'
+      description: 'Name of the chat-channel.'
+    }
+    { 
+      name: 'show'
+      default: true
+      type: 'Boolean'
+      description: 'Show the chat when ready.'
+    }
+    { 
+      name: 'target'
+      default: "$('body')"
+      type: 'jQuery Object'
+      description: 'Where to append the chat to.'
+    }
+    { 
+      name: 'host'
+      default: "(Empty)"
+      type: 'String'
+      description: "If left empty, the host gets auto-detected - in this case %s. The auto-detection reads out the host from the <script> tag. If you don't include it via a <script> tag you need to specify the host."
+      descriptionSubstitute: window.location.origin
+    }
+    { 
+      name: 'port'
+      default: 6042
+      type: 'Int'
+      description: ''
+    }
+    { 
+      name: 'debug'
+      default: false
+      type: 'Boolean'
+      description: 'Enables console logging.'
+    }
+    { 
+      name: 'fontSize'
+      default: "undefined"
+      type: 'String'
+      description: 'CSS font-size with a unit like 12px, 1.5em. If left to undefined it inherits the font-size of the website.'
+    }
+    { 
+      name: 'buttonClass'
+      default: "'open-zammad-chat'"
+      type: 'String'
+      description: 'Add this class to a button on your page that should open the chat.'
+    }
+    { 
+      name: 'inactiveClass'
+      default: "'is-inactive'"
+      type: 'String'
+      description: 'This class gets added to the button on initialization and gets removed once the chat connection got established.'
+    }
+    { 
+      name: 'title'
+      default: "'<strong>Chat</strong> with us!'"
+      type: 'String'
+      description: 'Welcome Title shown on the closed chat. Can contain HTML.'
+    }
+  ]
 
   constructor: ->
     super
@@ -80,15 +115,14 @@ class App.ChannelChatDesigner extends App.Controller
     @html App.view('channel/chat')(
       baseurl: window.location.origin
       chats: chats
+      apiOptions: @apiOptions
     )
 
+    @code.each (i, block) ->
+      hljs.highlightBlock block
+
     @updateParams()
 
-    new App.SettingsArea(
-      el:   @$('.js-settings')
-      area: 'Chat::Base'
-    )
-
   selectBrowserWidth: (event) =>
     tab = $(event.target).closest('[data-value]')
 
@@ -202,4 +236,8 @@ class App.ChannelChatDesigner extends App.Controller
           paramString += "    #{key}: '#{quote(value)}'"
     @$('.js-modal-params').html(paramString)
 
-App.Config.set( 'Chat', { prio: 4000, name: 'Chat', parent: '#channels', target: '#channels/chat', controller: App.ChannelChat, role: ['Admin'] }, 'NavBarAdmin' )
+    # highlight
+    @paramsBlock.each (i, block) ->
+      hljs.highlightBlock block
+
+App.Config.set( 'Chat Widget', { prio: 4000, name: 'Chat Widget', parent: '#channels', target: '#channels/chat', controller: App.ChannelChat, role: ['Admin'] }, 'NavBarAdmin' )

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

@@ -1,9 +1,14 @@
-<p><%- @T('You can create chat widgets for your webpages to allow visitors to chat with you.') %></p>
+<div class="page-header">
+  <div class="page-header-title">
+    <h1><%- @T('Chat Widget') %> <small></small></h1>
+  </div>
+</div>
+<div class="page-content">
+  <p><%- @T('You can create chat widgets for your webpages to allow visitors to chat with you.') %></p>
 
-<% if _.isEmpty(@chats): %>
-<p><%- @T('You have no configured chat\'s right now.') %></p>
-<% else: %>
-<table class="settings-list">
+  <h2><%- @T('Channels') %></h2>
+  <p><%- @T('You can create multiple chat channels.') %></p>
+  <table class="settings-list">
     <thead>
       <tr>
         <th style="white-space: nowrap;"><%- @T('Name') %></th>
@@ -13,7 +18,7 @@
       </tr>
     </thead>
     <tbody>
-<% for chat in @chats: %>
+  <% for chat in @chats: %>
       <tr data-id="<%= chat.id %>">
         <td>
           <label class="inline-label">
@@ -33,23 +38,16 @@
               <%- @Icon('trash') %> <%- @T('Remove') %>
             </div>
           </div>
-<% end %>
-    <tr class="settings-list-controlRow">
-      <td>
-      <td>
-      <td>
-      <td>
-        <div class="btn btn--text js-add">
-          <%- @Icon('plus-small') %> <%- @T('Add') %>
-        </div>
-
+  <% end %>
+      <tr>
+        <td colspan="4" class="settings-list-action-cell js-add">
+          <%- @Icon('plus-small') %>
     </tbody>
-</table>
-<% end %>
+  </table>
 
-<h2><%- @T('Designer') %></h2>
+  <h2><%- @T('Designer') %></h2>
 
-<div class="form-group">
+  <div class="form-group">
     <label class="formGroup-label"><%- @T('Preview Width') %></label>
     <div class="control">
       <div class="select-tabs js-selectBrowserWidth">
@@ -58,9 +56,9 @@
         <div class="tab" data-value="1280">MacBook</div>
       </div>
     </div>
-</div>
+  </div>
 
-<div class="browser chat-demo js-browser">
+  <div class="browser chat-demo js-browser">
     <div class="browser-head">
       <form class="browser-input js-testurl" novalidate>
         <input type="url" class="js-testurl-input" placeholder="zammad.org">
@@ -106,9 +104,9 @@
         </div>
       </div>
     </div>
-</div>
+  </div>
 
-<form class="js-params">
+  <form class="js-params">
     <fieldset>
       <div class="input form-group formGroup--halfSize">
         <div class="formGroup-label">
@@ -170,19 +168,72 @@
             </label>
       </tbody>
     </table>
+  </form>
 
-  <p><%- @T('You need to add the following Java Script code snipped to your web page') %>:
+  <h2><%- @T('Usage') %></h2>
 
-  <pre>
-&lt;script src="<%= @baseurl %>/assets/chat/chat.min.js"&gt;&lt;/script&gt;
+  <p><%- @T('Insert the widget-code into the source code of every page the chat should be visible on. It should be placed at the end of the page source code before the `&lt;/body&gt;` closing tag.') %></p>
 
+  <h3>Requirements</h3>
+  <p><%- @T("Zammad Chat requires jQuery. If you don't already use it on your website include it like this:") %></p>
+  <pre><code class="language-html js-code">&lt;script src="https://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;</code></pre>
+
+  <h3><%- @T('Auto-show chat') %></h3>
+  <p><%- @T('The chat will show up once the connection to the server got established and if there is someone online to chat with.') %></p>
+
+  <pre><code class="language-html js-paramsBlock">&lt;script src="<%= @baseurl %>/assets/chat/chat.min.js"&gt;&lt;/script&gt;
 &lt;script&gt;
 $(function() {
-new ZammadChat({
+  new ZammadChat({
 <span class="js-modal-params"></span>
+  });
 });
-});
-&lt;/script&gt;</pre>
-</form>
+&lt;/script&gt;</code></pre>
 
-<div class="js-settings"></div>
+  <h3><%- @T('Manually open chat') %></h3>
+  <p><%- marked(@T('If you want to open the chat by the press of a button set the option `show` to `false` and add the class `open-zammad-chat` to the button.')) %></p>
+  <pre><code class="language-html js-paramsBlock">&lt;button class="open-zammad-chat"&gt;Chat with us&lt;/button&gt;
+
+&lt;script src="<%= @baseurl %>/assets/chat/chat.min.js"&gt;&lt;/script&gt;
+&lt;script&gt;
+$(function() {
+  new ZammadChat({
+<span class="js-modal-params"></span>
+    show: false
+  });
+});
+&lt;/script&gt;</code></pre>
+
+  <h3><%- @T("Why doesn't the chat show up?") %></h3>
+  <p>
+    <%- @T('There can be several reasons for the chat to not show up:') %>
+    <ol>
+      <li><%- @T('The browser is outdated. It does not support WebSocket - the technology we use for the chat.') %>
+      <li><%- @T('The is no agent online.') %>
+      <li><%- @T('The chat is turned off.') %>
+      <li><%- @T('There are too many people in queue for the chat.') %>
+    </ol>
+    <%- marked(@T('When you turn on debubbing by setting the option `debug` to `true` the reason gets printed to the javascript console.')) %>
+  </p>
+  
+  <h3><%- @T('Options') %></h3>
+
+  <table class="settings-list">
+    <thead>
+      <tr>
+        <th><%- @T('Options') %>
+        <th><%- @T('Default') %>
+        <th><%- @T('Type') %>
+        <th><%- @T('Description') %>
+    </thead>
+    <tbody>
+    <% for option in @apiOptions: %>
+      <tr>
+        <td><%- @T(option.name) %>
+        <td style="white-space: nowrap;"><code class="language-javascript js-code"><%= option.default %></code>
+        <td style="white-space: nowrap;"><code class="language-javascript js-code"><%= option.type %></code>
+        <td><%- @T(option.description, option.descriptionSubstitute) %>
+    <% end %>
+    </tbody>
+  </table>
+</div>

app/assets/stylesheets/application.css

@@ -11,6 +11,7 @@
  *= require ./sew.css
  *= require ./font.css
  *= require ./svg-dimensions.css
+ *= require ./highlighter-github.css
  *= require ./zammad.scss
  *
  *= require_tree ./custom/

app/assets/stylesheets/bootstrap.css

@@ -687,13 +687,6 @@ pre,
 samp {
   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
 }
-code {
-  padding: 2px 4px;
-  font-size: 90%;
-  color: #c7254e;
-  background-color: #f9f2f4;
-  border-radius: 4px;
-}
 kbd kbd {
   padding: 0;
   font-size: 100%;

app/assets/stylesheets/highlighter-github.css

@@ -0,0 +1,123 @@
+/*
+
+github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #333;
+  background: #f8f8f8;
+  -webkit-text-size-adjust: none;
+}
+
+.hljs-comment,
+.diff .hljs-header {
+  color: #998;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.css .rule .hljs-keyword,
+.hljs-winutils,
+.nginx .hljs-title,
+.hljs-subst,
+.hljs-request,
+.hljs-status {
+  color: #333;
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-hexcolor,
+.ruby .hljs-constant {
+  color: #008080;
+}
+
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-doctag,
+.tex .hljs-formula {
+  color: #d14;
+}
+
+.hljs-title,
+.hljs-id,
+.scss .hljs-preprocessor {
+  color: #900;
+  font-weight: bold;
+}
+
+.hljs-list .hljs-keyword,
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-class .hljs-title,
+.hljs-type,
+.vhdl .hljs-literal,
+.tex .hljs-command {
+  color: #458;
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-tag .hljs-title,
+.hljs-rule .hljs-property,
+.django .hljs-tag .hljs-keyword {
+  color: #000080;
+  font-weight: normal;
+}
+
+.hljs-attribute,
+.hljs-variable,
+.lisp .hljs-body,
+.hljs-name {
+  color: #008080;
+}
+
+.hljs-regexp {
+  color: #009926;
+}
+
+.hljs-symbol,
+.ruby .hljs-symbol .hljs-string,
+.lisp .hljs-keyword,
+.clojure .hljs-keyword,
+.scheme .hljs-keyword,
+.tex .hljs-special,
+.hljs-prompt {
+  color: #990073;
+}
+
+.hljs-built_in {
+  color: #0086b3;
+}
+
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
+  color: #999;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: #fdd;
+}
+
+.hljs-addition {
+  background: #dfd;
+}
+
+.diff .hljs-change {
+  background: #0086b3;
+}
+
+.hljs-chunk {
+  color: #aaa;
+}

app/assets/stylesheets/zammad.scss

@@ -255,10 +255,9 @@ pre {
   color: #333;
   word-break: break-all;
   word-wrap: break-word;
-  background: hsl(197,20%,93%);
-  border: 1px solid hsl(198,18%,86%);
+  background: white;
+  border: 1px solid hsl(0,0%,90%);
   border-radius: 3px;
-  box-shadow: 0 1px 3px rgba(0,0,0,.05) inset;
 }
 pre code {
   padding: 0;
@@ -269,6 +268,23 @@ pre code {
   border-radius: 0;
 }
 
+.hljs,
+code {
+  background: none;
+  padding: 2px 4px;
+  font-size: 0.88em;
+}
+
+code:not(.hljs) {
+  border: 1px solid rgba(0,0,0,.2);
+  border-radius: 3px;
+  white-space: nowrap;
+}
+
+pre code.hljs {
+  font-size: 1em;
+}
+
 .textarea::placeholder,
 .form-control::placeholder,
 .token-input::placeholder {

public/assets/chat/chat.coffee

@@ -14,8 +14,8 @@ do($ = window.jQuery, window) ->
       port: 6042
       debug: false
       fontSize: undefined
-      buttonSelector: '.open-zammad-chat'
-      hiddenButtonClass: 'is-inactive'
+      buttonClass: 'open-zammad-chat'
+      inactiveClass: 'is-inactive'
       title: '<strong>Chat</strong> with us!'
 
     _messageCount: 0
@@ -87,6 +87,9 @@ do($ = window.jQuery, window) ->
 
       @input = @el.find('.zammad-chat-input')
 
+      # disable open button
+      $(".#{ @options.buttonClass }").addClass @inactiveClass
+
       @el.find('.js-chat-open').click @open
       @el.find('.js-chat-close').click @close
       @el.find('.zammad-chat-controls').on 'submit', @onSubmit
@@ -154,14 +157,14 @@ do($ = window.jQuery, window) ->
                 @reopenSession pipe.data
 
     onReady: =>
-      $(@options.buttonSelector).click(@open).removeClass(@hiddenButtonClass)
+      $(".#{ @options.buttonClass }").click(@open).removeClass(@inactiveClass)
 
       if @options.show
         @show()
 
     onError: (message) =>
       @log 'debug', message
-      $(@options.buttonSelector).hide()
+      $(".#{ @options.buttonClass }").hide()
 
     reopenSession: (data) =>
       unfinishedMessage = sessionStorage.getItem 'unfinished_message'