chat designer: fix loader, add new api
This commit is contained in:
Felix Niklas
parent
d3605697df
commit
cde67e113b
|
|
@ -9,7 +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'
|
||||
'click .js-swatch': 'usePaletteColor'
|
||||
|
||||
elements:
|
||||
'.js-browser': 'browser'
|
||||
|
|
@ -19,8 +19,10 @@ class App.ChannelChat extends App.Controller
|
|||
'.js-backgroundColor': 'chatBackground'
|
||||
'.js-paramsBlock': 'paramsBlock'
|
||||
'.js-code': 'code'
|
||||
'.js-swatches': 'swatches'
|
||||
'.js-palette': 'palette'
|
||||
'.js-color': 'colorField'
|
||||
'.js-screenshot': 'screenshot'
|
||||
'.js-website': 'website'
|
||||
|
||||
apiOptions: [
|
||||
{
|
||||
|
|
@ -140,10 +142,11 @@ class App.ChannelChat extends App.Controller
|
|||
width = parseInt value, 10
|
||||
|
||||
# reset zoom
|
||||
@chat.css('transform', '')
|
||||
@chat
|
||||
.css('transform', '')
|
||||
.removeClass('is-fullscreen')
|
||||
@browser.css('width', '')
|
||||
@chat.removeClass('is-fullscreen')
|
||||
@iframe.css
|
||||
@website.css
|
||||
transform: ''
|
||||
width: ''
|
||||
height: ''
|
||||
|
|
@ -156,7 +159,7 @@ class App.ChannelChat extends App.Controller
|
|||
else
|
||||
percentage = @el.width()/width
|
||||
@chat.css('transform', "scale(#{ percentage })")
|
||||
@iframe.css
|
||||
@website.css
|
||||
transform: "scale(#{ percentage })"
|
||||
width: @el.width() / percentage
|
||||
height: @el.height() / percentage
|
||||
|
|
@ -166,56 +169,67 @@ class App.ChannelChat extends App.Controller
|
|||
|
||||
# fire both on enter and blur
|
||||
# but cache url
|
||||
return if @urlInput.val() is '' or @urlInput.val() is @url
|
||||
@url = @urlInput.val()
|
||||
return if @urlInput.val() is '' or @urlInput.val() is @urlCache
|
||||
@urlCache = @urlInput.val()
|
||||
|
||||
src = @url
|
||||
if !src.startsWith('http')
|
||||
src = "http://#{ src }"
|
||||
@url = @urlCache
|
||||
if !@url.startsWith('http')
|
||||
@url = "http://#{ @url }"
|
||||
|
||||
@urlInput.addClass('is-loading')
|
||||
|
||||
# clear swatches and iframe
|
||||
@swatches.empty()
|
||||
@iframe.attr('src', '').css('background-image', '')
|
||||
# clear palette and iframe
|
||||
@palette.empty()
|
||||
@website.attr('data-mode', '')
|
||||
@iframe.attr('src', '')
|
||||
@screenshot.attr('src', '')
|
||||
|
||||
$.ajax
|
||||
url: 'https://images.zammad.com/api/v1/webpage/colors'
|
||||
url: 'https://images.zammad.com/api/v1/webpage/combined'
|
||||
data:
|
||||
url: src
|
||||
url: @url
|
||||
count: 20
|
||||
success: @renderDemoWebsite
|
||||
dataType: 'json'
|
||||
|
||||
renderDemoWebsite: (data) =>
|
||||
imageSource = data['data_url']
|
||||
|
||||
# @iframe.attr 'src', src
|
||||
@renderSwatches data
|
||||
if imageSource
|
||||
console.log "renderDemoWebsite", typeof imageSource, imageSource
|
||||
@screenshot.attr 'src', imageSource
|
||||
@website.attr('data-mode', 'screenshot')
|
||||
else
|
||||
@iframe.attr 'src', @url
|
||||
@website.attr('data-mode', 'iframe')
|
||||
|
||||
@renderPalette data['palette']
|
||||
|
||||
@urlInput.removeClass('is-loading')
|
||||
|
||||
renderSwatches: (swatches) ->
|
||||
renderPalette: (palette) ->
|
||||
|
||||
swatches = _.map swatches, tinycolor
|
||||
palette = _.map palette, tinycolor
|
||||
|
||||
# filter white
|
||||
swatches = _.filter swatches, (color) =>
|
||||
0.25 < color.getLuminance() < 0.85
|
||||
palette = _.filter palette, (color) =>
|
||||
color.getLuminance() < 0.85
|
||||
|
||||
htmlString = ''
|
||||
|
||||
max = 8
|
||||
for color, i in swatches
|
||||
for color, i in palette
|
||||
htmlString += App.view('channel/color_swatch')
|
||||
color: color.toHexString()
|
||||
break if i is max
|
||||
|
||||
@swatches.html htmlString
|
||||
@palette.html htmlString
|
||||
|
||||
# auto use first color
|
||||
if swatches[0]
|
||||
@useSwatchColor undefined, swatches[0].toHexString()
|
||||
if palette[0]
|
||||
@usePaletteColor undefined, palette[0].toHexString()
|
||||
|
||||
useSwatchColor: (event, code) ->
|
||||
usePaletteColor: (event, code) ->
|
||||
if event
|
||||
code = $(event.currentTarget).attr('data-color')
|
||||
@colorField.val code
|
||||
|
|
|
|||
|
|
@ -63,11 +63,14 @@
|
|||
<div class="browser-head">
|
||||
<form class="browser-input js-testurl" novalidate>
|
||||
<input type="url" class="js-testurl-input" id="preview-iframe" placeholder="zammad.org">
|
||||
<div class="loading icon small"></div>
|
||||
<div class="loading icon small muted"></div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="browser-body js-demo">
|
||||
<iframe class="js-iframe"></iframe>
|
||||
<div class="browser-website js-website">
|
||||
<iframe class="js-iframe" sandbox></iframe>
|
||||
<img class="js-screenshot">
|
||||
</div>
|
||||
<style>@import "/assets/chat/chat.css";</style>
|
||||
<div class="chat-demo-animationHolder">
|
||||
<div class="js-chat zammad-chat zammad-chat-is-visible zammad-chat-is-open" style="bottom: 0px;">
|
||||
|
|
@ -122,7 +125,7 @@
|
|||
<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 class="align-right horizontal js-palette"></div>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<input class="js-color" type="text" id="form-chat-background" name="background" value="">
|
||||
|
|
|
|||
|
|
@ -2317,6 +2317,10 @@ ol.tabs li {
|
|||
height: 12px;
|
||||
}
|
||||
|
||||
.loading.icon.muted {
|
||||
background: hsl(195,20%,96%);
|
||||
}
|
||||
|
||||
@keyframes rotateplane {
|
||||
0% {
|
||||
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||
|
|
@ -7431,6 +7435,18 @@ output {
|
|||
height: 450px;
|
||||
width: 100%;
|
||||
|
||||
.browser-website {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
transform-origin: left top;
|
||||
overflow: auto;
|
||||
|
||||
&[data-mode=screenshot] iframe,
|
||||
&[data-mode=iframe] img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
border: none;
|
||||
|
|
@ -7438,7 +7454,11 @@ output {
|
|||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-origin: left top;
|
||||
background: white;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -7455,6 +7475,10 @@ output {
|
|||
input {
|
||||
min-width: 0;
|
||||
padding-right: 40px;
|
||||
|
||||
&.is-loading + .loading.icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.loading.icon {
|
||||
|
|
@ -7463,10 +7487,6 @@ output {
|
|||
top: 11px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-loading .loading.icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.help-block {
|
||||
|
|
|
|||
Loading…
Reference in a new issue