chat designer: connect color-swatches api

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

@@ -9,6 +9,7 @@ class App.ChannelChat extends App.Controller
     'submit .js-testurl': 'changeDemoWebsite'
     'blur .js-testurl-input': 'changeDemoWebsite'
     'click .js-selectBrowserWidth': 'selectBrowserWidth'
+    'click .js-swatch': 'useSwatchColor'
 
   elements:
     '.js-browser': 'browser'
@@ -18,6 +19,8 @@ class App.ChannelChat extends App.Controller
     '.js-backgroundColor': 'chatBackground'
     '.js-paramsBlock': 'paramsBlock'
     '.js-code': 'code'
+    '.js-swatches': 'swatches'
+    '.js-color': 'colorField'
 
   apiOptions: [
     { 
@@ -165,6 +168,41 @@ class App.ChannelChat extends App.Controller
       src = "http://#{ src }"
 
     @iframe.attr 'src', src
+    @swatches.empty()
+
+    $.ajax
+      url: 'https://images.zammad.com/api/v1/webpage/colors'
+      data:
+        url: src
+        count: 6
+      success: @renderSwatches
+      dataType: 'json'
+
+  renderSwatches: (data, xhr, status) =>
+
+    # filter white
+    data = _.filter data, (color) =>
+      @getLuminance(color) < 0.85
+
+    htmlString = ""
+
+    for color in data
+      htmlString += App.view('channel/color_swatch')
+        color: color
+
+    @swatches.html htmlString
+
+  getLuminance: (hex) ->
+    # input: #ffffff, output: 1
+    result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec hex
+    r = parseInt(result[1], 16)
+    g = parseInt(result[2], 16)
+    b = parseInt(result[3], 16)
+    return (0.2126*r + 0.7152*g + 0.0722*b)/255
+
+  useSwatchColor: (event) ->
+    @colorField.val $(event.currentTarget).attr('data-color')
+    @updateParams()
 
   new: (e) =>
     new App.ControllerGenericNew(

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

@@ -122,9 +122,10 @@
       <div class="input form-group formGroup--halfSize">
         <div class="formGroup-label">
           <label for="form-chat-background"><%- @T('Background color') %></label>
+          <div class="align-right horizontal js-swatches"></div>
         </div>
         <div class="controls">
-          <input type="text" id="form-chat-background" name="background" value="">
+          <input class="js-color" type="text" id="form-chat-background" name="background" value="">
         </div>
         <span class="help-block"><%- @T('Can be in any CSS color format.') %></span>
       </div>

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

@@ -0,0 +1 @@
+<div class="color-swatch js-swatch" style="background: <%= @color %>" data-color="<%= @color %>"></div>

app/assets/stylesheets/zammad.scss

@@ -2327,6 +2327,11 @@ ol.tabs li {
   border-radius: 100%;
   width: 11px;
   height: 11px;
+  cursor: pointer;
+  
+  & + .color-swatch {
+    margin-left: 4px;
+  }
 }
 
 .icon-status {