2015-11-13 16:03:58 +00:00
|
|
|
<!doctype html>
|
2015-11-25 16:36:06 +00:00
|
|
|
<html lang="de-de">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>Zammad Chat</title>
|
|
|
|
|
<link rel="stylesheet" href="znuny.css">
|
2016-02-05 12:01:47 +00:00
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
2016-02-05 12:49:16 +00:00
|
|
|
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
|
2015-11-25 16:36:06 +00:00
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
}
|
2015-11-13 16:03:58 +00:00
|
|
|
|
2015-11-25 16:36:06 +00:00
|
|
|
.mockup {
|
|
|
|
|
vertical-align: bottom;
|
|
|
|
|
}
|
2015-11-13 16:03:58 +00:00
|
|
|
|
2015-11-25 16:36:06 +00:00
|
|
|
.settings {
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 20px;
|
|
|
|
|
top: 20px;
|
|
|
|
|
background: white;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
box-shadow: 0 3px 10px rgba(0,0,0,.3);
|
2015-12-05 19:41:14 +00:00
|
|
|
width: 500px;
|
2015-11-25 16:36:06 +00:00
|
|
|
}
|
2015-11-13 16:03:58 +00:00
|
|
|
|
2015-11-25 16:36:06 +00:00
|
|
|
.settings input {
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
.settings input + input {
|
|
|
|
|
margin-right: 3px;
|
|
|
|
|
}
|
2015-11-13 16:03:58 +00:00
|
|
|
|
2015-11-25 16:36:06 +00:00
|
|
|
table td:first-child {
|
|
|
|
|
text-align: right;
|
|
|
|
|
padding-right: 0;
|
|
|
|
|
}
|
2015-11-13 16:03:58 +00:00
|
|
|
|
2015-12-05 19:41:14 +00:00
|
|
|
table td.log {
|
|
|
|
|
text-align: left;
|
|
|
|
|
padding-right: 0;
|
|
|
|
|
word-break: break-all;
|
|
|
|
|
}
|
|
|
|
|
|
2015-11-25 16:36:06 +00:00
|
|
|
td {
|
|
|
|
|
padding: 5px;
|
|
|
|
|
}
|
2015-11-13 16:03:58 +00:00
|
|
|
|
2015-11-25 16:36:06 +00:00
|
|
|
h2 {
|
|
|
|
|
font-size: 1em;
|
|
|
|
|
margin: 0;
|
2015-11-13 16:03:58 +00:00
|
|
|
}
|
|
|
|
|
|
2015-11-25 16:36:06 +00:00
|
|
|
@media only screen and (max-width: 768px) {
|
|
|
|
|
.settings {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
2015-11-13 16:03:58 +00:00
|
|
|
|
2015-11-25 16:36:06 +00:00
|
|
|
.Box {
|
|
|
|
|
background: hsl(0,0%,91%);
|
|
|
|
|
width: 26px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
color: hsl(0,0%,47%);
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
.Box.Active {
|
|
|
|
|
background: hsl(0,0%,36%);
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2015-11-13 16:03:58 +00:00
|
|
|
<img class="mockup" width="100%" src="znuny.png">
|
|
|
|
|
|
|
|
|
|
<div class="settings">
|
|
|
|
|
<table>
|
|
|
|
|
<tr>
|
|
|
|
|
<td><h2>Settings</h2>
|
2015-12-05 19:41:14 +00:00
|
|
|
<td>
|
2015-11-13 16:03:58 +00:00
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
<input id="flat" type="checkbox" data-option="flat">
|
|
|
|
|
<td>
|
|
|
|
|
<label for="flat">Flat Design</label>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
2015-12-06 08:49:35 +00:00
|
|
|
<input type="color" id="color" value="#AE99D6" data-option="color">
|
2015-11-13 16:03:58 +00:00
|
|
|
<td>
|
|
|
|
|
<label for="color">Color</label>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
<input type="range" id="borderRadius" value="5" min="0" max="20" data-option="borderRadius">
|
|
|
|
|
<input type="number" value="5" min="5" max="20" data-option="borderRadius">px
|
|
|
|
|
<td>
|
|
|
|
|
<label for="borderRadius">Border Radius</label>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
<input type="range" id="fontSize" value="12" min="11" max="18" data-option="fontSize">
|
|
|
|
|
<input type="number" value="12" min="11" max="18" data-option="fontSize">px
|
|
|
|
|
<td>
|
|
|
|
|
<label for="fontSize">Font Size</label>
|
|
|
|
|
<tr>
|
|
|
|
|
<td>
|
|
|
|
|
<td><button class="open-zammad-chat">Open Chat</button>
|
2015-12-05 19:41:14 +00:00
|
|
|
<tr>
|
|
|
|
|
<td class="log"><h2>Log</h2>
|
|
|
|
|
<td>
|
|
|
|
|
<tr>
|
|
|
|
|
<td colspan="2" class="log js-chatLogDisplay">
|
2015-11-13 16:03:58 +00:00
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="jquery-2.1.4.min.js"></script>
|
|
|
|
|
<script src="chat.js"></script>
|
|
|
|
|
<script>
|
2015-12-06 08:49:35 +00:00
|
|
|
function getSearchParameters() {
|
|
|
|
|
var prmstr = window.location.search.substr(1);
|
|
|
|
|
return prmstr != null && prmstr != '' ? transformToAssocArray(prmstr) : {};
|
|
|
|
|
}
|
|
|
|
|
function transformToAssocArray( prmstr ) {
|
|
|
|
|
var params = {};
|
|
|
|
|
var prmarr = prmstr.split('&');
|
|
|
|
|
for ( var i = 0; i < prmarr.length; i++) {
|
|
|
|
|
var tmparr = prmarr[i].split('=');
|
|
|
|
|
params[tmparr[0]] = tmparr[1];
|
|
|
|
|
}
|
|
|
|
|
return params;
|
|
|
|
|
}
|
|
|
|
|
var hostname = window.location.hostname;
|
|
|
|
|
var port = window.location.port;
|
|
|
|
|
var params = getSearchParameters();
|
2016-02-05 12:01:47 +00:00
|
|
|
var host = 'ws://'+ (location.host || 'localhost').split(':')[0] +':6042'
|
2015-12-06 08:49:35 +00:00
|
|
|
if (params['port']) {
|
|
|
|
|
host = 'ws://' + hostname + ':' + params['port']
|
|
|
|
|
}
|
|
|
|
|
cssUrl = 'http://' + hostname + ':' + port + '/assets/chat/chat.css'
|
|
|
|
|
|
2015-11-13 16:03:58 +00:00
|
|
|
var chat = new ZammadChat({
|
2015-11-25 12:18:56 +00:00
|
|
|
chatId: 1,
|
2015-12-06 08:49:35 +00:00
|
|
|
host: host,
|
|
|
|
|
cssUrl: cssUrl,
|
2015-11-13 16:03:58 +00:00
|
|
|
debug: true,
|
|
|
|
|
background: '#494d52',
|
|
|
|
|
flat: true,
|
2015-12-05 19:41:14 +00:00
|
|
|
shown: false,
|
|
|
|
|
idleTimeout: 1,
|
|
|
|
|
idleTimeoutIntervallCheck: 0.5,
|
|
|
|
|
inactiveTimeout: 2,
|
|
|
|
|
inactiveTimeoutIntervallCheck: 0.5,
|
|
|
|
|
waitingListTimeout: 1.2,
|
|
|
|
|
waitingListTimeoutIntervallCheck: 0.5,
|
2015-11-13 16:03:58 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$('.settings :input').on({
|
|
|
|
|
change: function(){
|
|
|
|
|
switch($(this).attr('data-option')){
|
|
|
|
|
case "flat":
|
|
|
|
|
$('.zammad-chat').toggleClass('zammad-chat--flat', this.checked);
|
|
|
|
|
break;
|
|
|
|
|
case "color":
|
|
|
|
|
setScssVariable('themeColor', this.value);
|
|
|
|
|
updateStyle();
|
|
|
|
|
break;
|
|
|
|
|
case "borderRadius":
|
|
|
|
|
setScssVariable('borderRadius', this.value + "px");
|
|
|
|
|
updateStyle();
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
input: function(){
|
|
|
|
|
switch($(this).attr('data-option')){
|
|
|
|
|
case "borderRadius":
|
|
|
|
|
$('[data-option="borderRadius"]').val(this.value);
|
|
|
|
|
setScssVariable('borderRadius', this.value + "px");
|
|
|
|
|
updateStyle();
|
|
|
|
|
break;
|
|
|
|
|
case "fontSize":
|
|
|
|
|
$('[data-option="fontSize"]').val(this.value);
|
|
|
|
|
setScssVariable('fontSize', this.value + "px");
|
|
|
|
|
updateStyle();
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
2015-11-25 16:36:06 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
