chat designer: connect color-swatches api

This commit is contained in:
Felix Niklas 2015-11-23 17:05:10 +01:00
parent c7a6d5f62f
commit 331083317d
4 changed files with 46 additions and 1 deletions

View file

@ -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(

View file

@ -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>

View file

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

View file

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