chat channel: add eyedropper and remove iframe

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

@@ -3,16 +3,15 @@ class App.ChannelChat extends App.Controller
     'change .js-params': 'updateParams'
     'input .js-params': 'updateParams'
     'submit .js-demo-head': 'onUrlSubmit'
-    'blur .js-testurl-input': 'changeDemoWebsite'
     'click .js-selectBrowserWidth': 'selectBrowserWidth'
     'click .js-swatch': 'usePaletteColor'
     'click .js-toggle-chat': 'toggleChat'
     'click .js-chatSetting': 'toggleChatSetting'
+    'click .js-eyedropper': 'pickColor'
 
   elements:
     '.js-browser': 'browser'
     '.js-browserBody': 'browserBody'
-    '.js-iframe': 'iframe'
     '.js-screenshot': 'screenshot'
     '.js-website': 'website'
     '.js-chat': 'chat'
@@ -25,6 +24,7 @@ class App.ChannelChat extends App.Controller
     '.js-palette': 'palette'
     '.js-color': 'colorField'
     '.js-chatSetting input': 'chatSetting'
+    '.js-eyedropper': 'eyedropper'
 
   apiOptions: [
     {
@@ -105,6 +105,7 @@ class App.ChannelChat extends App.Controller
   isOpen: true
   browserWidth: 1280
   previewUrl: ''
+  previewScale: 1
 
   constructor: ->
     super
@@ -155,6 +156,7 @@ class App.ChannelChat extends App.Controller
 
   release: ->
     $(window).off 'resize.chat-designer'
+    @website.off('click.eyedropper')
 
   selectBrowserWidth: (event) =>
     tab = $(event.target).closest('[data-value]')
@@ -177,6 +179,7 @@ class App.ChannelChat extends App.Controller
       transform: ''
       width: ''
       height: ''
+    @previewScale = 1
 
     return if @browserWidth is 'fit'
 
@@ -184,12 +187,12 @@ class App.ChannelChat extends App.Controller
       @chat.addClass('is-fullscreen').css 'transform', "translateY(#{ @getChatOffset(true) }px)"
       @browser.css('width', "#{ width }px")
     else
-      percentage = @el.width()/width
-      @chat.css 'transform', "translateY(#{ @getChatOffset() * percentage }px) scale(#{ percentage })"
+      @previewScale = @el.width()/width
+      @chat.css 'transform', "translateY(#{ @getChatOffset() * @previewScale }px) scale(#{ @previewScale })"
       @website.css
-        transform: "scale(#{ percentage })"
-        width: @el.width() / percentage
-        height: @browserBody.height() / percentage
+        transform: "scale(#{ @previewScale })"
+        width: @el.width() / @previewScale
+        height: @browserBody.height() / @previewScale
 
   getChatOffset: (fullscreen) ->
     return 0 if @isOpen
@@ -217,8 +220,6 @@ class App.ChannelChat extends App.Controller
     @palette.empty()
 
     @screenshot.attr('src', '')
-    @website.attr('data-mode', 'iframe')
-    @iframe.attr('src', @url)
 
     $.ajax
       url: 'https://images.zammad.com/api/v1/webpage/combined'
@@ -229,12 +230,9 @@ class App.ChannelChat extends App.Controller
       dataType: 'json'
 
   renderDemoWebsite: (data) =>
-    imageSource = data['data_url']
+    @_screenshotSource = data['data_url']
 
-    if imageSource
-      @screenshot.attr 'src', imageSource
-      @iframe.attr('src', '')
-      @website.attr('data-mode', 'screenshot')
+    @screenshot.attr 'src', @_screenshotSource
 
     @renderPalette data['palette']
 
@@ -268,6 +266,40 @@ class App.ChannelChat extends App.Controller
     @colorField.val code
     @updateParams()
 
+  pickColor: ->
+    return if !@_screenshotSource
+
+    if @_pickingColor
+      @_pickingColor = false
+      @website
+        .off('click.eyedropper')
+        .removeClass('is-picking')
+      @eyedropper.removeClass('is-active')
+    else
+      @_pickingColor = true
+      @website
+        .on('click.eyedropper', @onColorPicked)
+        .addClass('is-picking')
+      @eyedropper.addClass('is-active')
+
+  onColorPicked: (event) =>
+    x = event.pageX - @website.offset().left
+    y = event.pageY - @website.offset().top
+
+    image = new Image()
+    image.src = @_screenshotSource
+
+    canvas = document.createElement('canvas')
+    ctx = canvas.getContext('2d')
+
+    canvas.width = image.width
+    canvas.height = image.height
+
+    ctx.drawImage(image, 0, 0, @previewScale * canvas.width, @previewScale * canvas.height)
+    pixels = ctx.getImageData(x, y, 1, 1).data
+
+    @colorField.val("rgb(#{pixels.slice(0,3).join(',')})").trigger('change')
+
   toggleChat: =>
     @chat.toggleClass('is-open')
     @isOpen = @chat.hasClass('is-open')

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

@@ -38,7 +38,6 @@
     </form>
     <div class="browser-body js-browserBody">
       <div class="browser-website js-website">
-        <iframe class="js-iframe" sandbox="allow-scripts allow-same-origin"></iframe>
         <img class="js-screenshot">
       </div>
       <style>@import "/assets/chat/chat.css";</style>
@@ -97,8 +96,13 @@
           <label for="form-chat-background"><%- @T('Background color') %></label>
           <div class="align-right horizontal js-palette"></div>
         </div>
-        <div class="controls">
-          <input class="js-color" type="text" id="form-chat-background" name="background" value="">
+        <div class="controls controls--button">
+          <input class="js-color" type="text" id="form-chat-background" name="background">
+          <div class="controls-button js-eyedropper">
+            <div class="controls-button-inner u-clickable">
+              <%- @Icon('eyedropper') %>
+            </div>
+          </div>
         </div>
         <span class="help-block"><%- @T('Can be in any CSS color format.') %></span>
       </div>

app/assets/stylesheets/svg-dimensions.css

@@ -17,6 +17,7 @@
 .icon-dropdown-list { width: 19px; height: 14px; }
 .icon-email-button { width: 29px; height: 22px; }
 .icon-email { width: 17px; height: 17px; }
+.icon-eyedropper { width: 17px; height: 17px; }
 .icon-facebook-button { width: 29px; height: 22px; }
 .icon-facebook { width: 17px; height: 17px; }
 .icon-full-logo { width: 175px; height: 50px; }

public/assets/images/icons/eyedropper.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
+    <title>eyedropper</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="eyedropper" sketch:type="MSArtboardGroup" fill="#50E3C2">
+            <path d="M10.2240424,7.9513151 L3.86040601,14.3149515 L4.18181818,14.1818182 L3.27272727,14.1818182 C3.15217432,14.1818182 3.03655891,14.2297077 2.9513151,14.3149515 L2.04222419,15.2240424 L2.68504854,15.2240424 L1.77595763,14.3149515 L1.77595763,14.9577758 L2.68504854,14.0486849 C2.77029235,13.9634411 2.81818182,13.8478257 2.81818182,13.7272727 L2.81818182,12.8181818 L2.68504854,13.139594 L9.0486849,6.77595763 L10.2240424,7.9513151 Z M13.4058606,1.13313328 L10.2240424,4.31495146 L10.8668667,4.31495146 L9.95777581,3.40586055 C9.78026477,3.22834951 9.4924625,3.22834951 9.31495146,3.40586055 L7.49676964,5.22404237 C7.3192586,5.40155341 7.3192586,5.68935568 7.49676964,5.86686672 L8.40586055,6.77595763 L8.40586055,6.13313328 L2.04222419,12.4967696 C1.95698038,12.5820135 1.90909091,12.6976289 1.90909091,12.8181818 L1.90909091,13.7272727 L2.04222419,13.4058606 L1.13313328,14.3149515 C0.95562224,14.4924625 0.95562224,14.7802648 1.13313328,14.9577758 L2.04222419,15.8668667 C2.21973523,16.0443778 2.5075375,16.0443778 2.68504854,15.8668667 L3.59413945,14.9577758 L3.27272727,15.0909091 L4.18181818,15.0909091 C4.30237113,15.0909091 4.41798655,15.0430196 4.50323036,14.9577758 L10.8668667,8.59413945 L10.2240424,8.59413945 L11.1331333,9.50323036 C11.3106443,9.6807414 11.5984466,9.6807414 11.7759576,9.50323036 L13.5941394,7.68504854 C13.7716505,7.5075375 13.7716505,7.21973523 13.5941394,7.04222419 L12.6850485,6.13313328 L12.6850485,6.77595763 L15.8668667,3.59413945 C16.0443778,3.4166284 16.0443778,3.12882614 15.8668667,2.9513151 L14.0486849,1.13313328 C13.8711739,0.95562224 13.5833716,0.95562224 13.4058606,1.13313328 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>