chat designer: connect color-swatches api
This commit is contained in:
parent
c7a6d5f62f
commit
331083317d
4 changed files with 46 additions and 1 deletions
|
@ -9,6 +9,7 @@ class App.ChannelChat extends App.Controller
|
||||||
'submit .js-testurl': 'changeDemoWebsite'
|
'submit .js-testurl': 'changeDemoWebsite'
|
||||||
'blur .js-testurl-input': 'changeDemoWebsite'
|
'blur .js-testurl-input': 'changeDemoWebsite'
|
||||||
'click .js-selectBrowserWidth': 'selectBrowserWidth'
|
'click .js-selectBrowserWidth': 'selectBrowserWidth'
|
||||||
|
'click .js-swatch': 'useSwatchColor'
|
||||||
|
|
||||||
elements:
|
elements:
|
||||||
'.js-browser': 'browser'
|
'.js-browser': 'browser'
|
||||||
|
@ -18,6 +19,8 @@ class App.ChannelChat extends App.Controller
|
||||||
'.js-backgroundColor': 'chatBackground'
|
'.js-backgroundColor': 'chatBackground'
|
||||||
'.js-paramsBlock': 'paramsBlock'
|
'.js-paramsBlock': 'paramsBlock'
|
||||||
'.js-code': 'code'
|
'.js-code': 'code'
|
||||||
|
'.js-swatches': 'swatches'
|
||||||
|
'.js-color': 'colorField'
|
||||||
|
|
||||||
apiOptions: [
|
apiOptions: [
|
||||||
{
|
{
|
||||||
|
@ -165,6 +168,41 @@ class App.ChannelChat extends App.Controller
|
||||||
src = "http://#{ src }"
|
src = "http://#{ src }"
|
||||||
|
|
||||||
@iframe.attr 'src', 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: (e) =>
|
||||||
new App.ControllerGenericNew(
|
new App.ControllerGenericNew(
|
||||||
|
|
|
@ -122,9 +122,10 @@
|
||||||
<div class="input form-group formGroup--halfSize">
|
<div class="input form-group formGroup--halfSize">
|
||||||
<div class="formGroup-label">
|
<div class="formGroup-label">
|
||||||
<label for="form-chat-background"><%- @T('Background color') %></label>
|
<label for="form-chat-background"><%- @T('Background color') %></label>
|
||||||
|
<div class="align-right horizontal js-swatches"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="controls">
|
<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>
|
</div>
|
||||||
<span class="help-block"><%- @T('Can be in any CSS color format.') %></span>
|
<span class="help-block"><%- @T('Can be in any CSS color format.') %></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
<div class="color-swatch js-swatch" style="background: <%= @color %>" data-color="<%= @color %>"></div>
|
|
@ -2327,6 +2327,11 @@ ol.tabs li {
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
width: 11px;
|
width: 11px;
|
||||||
height: 11px;
|
height: 11px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
& + .color-swatch {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-status {
|
.icon-status {
|
||||||
|
|
Loading…
Reference in a new issue