znuny-no-jquery-open_by_button.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <!doctype html>
  2. <html lang="de-de">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Zammad Chat</title>
  6. <link rel="stylesheet" href="znuny.css">
  7. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  8. <style>
  9. body {
  10. margin: 0;
  11. font-family: sans-serif;
  12. }
  13. .mockup {
  14. vertical-align: bottom;
  15. }
  16. .settings {
  17. position: fixed;
  18. left: 20px;
  19. top: 20px;
  20. background: white;
  21. font-size: 14px;
  22. padding: 10px;
  23. border-radius: 5px;
  24. box-shadow: 0 3px 10px rgba(0,0,0,.3);
  25. width: 500px;
  26. }
  27. .settings input {
  28. vertical-align: middle;
  29. }
  30. .settings input + input {
  31. margin-right: 3px;
  32. }
  33. table td:first-child {
  34. text-align: right;
  35. padding-right: 0;
  36. }
  37. table td.log {
  38. text-align: left;
  39. padding-right: 0;
  40. word-break: break-all;
  41. }
  42. td {
  43. padding: 5px;
  44. }
  45. h2 {
  46. font-size: 1em;
  47. margin: 0;
  48. }
  49. @media only screen and (max-width: 768px) {
  50. .settings {
  51. display: none;
  52. }
  53. }
  54. .Box {
  55. background: hsl(0,0%,91%);
  56. width: 26px;
  57. height: 24px;
  58. color: hsl(0,0%,47%);
  59. float: left;
  60. }
  61. .Box.Active {
  62. background: hsl(0,0%,36%);
  63. color: white;
  64. }
  65. </style>
  66. </head>
  67. <body>
  68. <img class="mockup" width="100%" src="znuny.png">
  69. <img class="mockup" width="100%" src="znuny.png">
  70. <img class="mockup" width="100%" src="znuny.png">
  71. <img class="mockup" width="100%" src="znuny.png">
  72. <img class="mockup" width="100%" src="znuny.png">
  73. <img class="mockup" width="100%" src="znuny.png">
  74. <img class="mockup" width="100%" src="znuny.png">
  75. <img class="mockup" width="100%" src="znuny.png">
  76. <img class="mockup" width="100%" src="znuny.png">
  77. <img class="mockup" width="100%" src="znuny.png">
  78. <img class="mockup" width="100%" src="znuny.png">
  79. <img class="mockup" width="100%" src="znuny.png">
  80. <form class="settings" onsubmit="return false">
  81. <table>
  82. <tr>
  83. <td><h2>Settings</h2>
  84. <td>
  85. <tr>
  86. <td>
  87. <input id="flat" type="checkbox" onchange="updateStyle(this.form)">
  88. <td>
  89. <label for="flat">Flat Design</label>
  90. <tr>
  91. <td>
  92. <input type="color" id="color" value="#AE99D6" oninput="updateStyle(this.form)">
  93. <td>
  94. <label for="color">Color</label>
  95. <tr>
  96. <td>
  97. <input type="range" id="fontSize" value="12" min="11" max="18" name="fontSize" oninput="updateStyle(this.form)">
  98. <output for="fontSize" id="fontSizeOutput" style="width: 20px; display: inline-block">12</output>px
  99. <td>
  100. <label for="fontSize">Font Size</label>
  101. <tr>
  102. <td>
  103. <td><button class="open-zammad-chat">Open Chat</button>
  104. <tr>
  105. <td class="log"><h2>Log</h2>
  106. <td>
  107. <tr>
  108. <td colspan="2" class="log js-chatLogDisplay">
  109. </table>
  110. </form>
  111. <script src="chat-no-jquery.js"></script>
  112. <script>
  113. function getSearchParameters() {
  114. var prmstr = window.location.search.substr(1);
  115. return prmstr != null && prmstr != '' ? transformToAssocArray(prmstr) : {};
  116. }
  117. function transformToAssocArray( prmstr ) {
  118. var params = {};
  119. var prmarr = prmstr.split('&');
  120. for ( var i = 0; i < prmarr.length; i++) {
  121. var tmparr = prmarr[i].split('=');
  122. params[tmparr[0]] = tmparr[1];
  123. }
  124. return params;
  125. }
  126. var hostname = window.location.hostname;
  127. var port = window.location.port;
  128. var protocol = window.location.protocol;
  129. var wsProtocol = protocol === 'https:' ? 'wss:' : 'ws:';
  130. var params = getSearchParameters();
  131. var host = wsProtocol + '//'+ (location.host || 'localhost').split(':')[0] +':6042'
  132. if (params['port']) {
  133. host = wsProtocol + '//' + hostname + ':' + params['port']
  134. }
  135. cssUrl = protocol + '//' + hostname + ':' + port + '/assets/chat/chat.css'
  136. var chat = new ZammadChat({
  137. chatId: 1,
  138. host: host,
  139. cssUrl: cssUrl,
  140. debug: true,
  141. background: '#494d52',
  142. flat: true,
  143. show: false,
  144. idleTimeout: 0.1,
  145. idleTimeoutIntervallCheck: 0.11,
  146. inactiveTimeout: 2,
  147. inactiveTimeoutIntervallCheck: 0.5,
  148. waitingListTimeout: 1.2,
  149. waitingListTimeoutIntervallCheck: 0.5,
  150. });
  151. function updateStyle(form){
  152. chat.el.classList.toggle('zammad-chat--flat', form.flat.checked);
  153. var surfaces = document.querySelectorAll('.zammad-chat-header, .zammad-chat-message--customer .zammad-chat-message-body, .zammad-chat-button');
  154. for(var i=0; i<surfaces.length; i++){
  155. surfaces[i].style.background = form.color.value;
  156. }
  157. chat.options.background = form.color.value;
  158. chat.el.style.fontSize = form.fontSize.value +'px';
  159. form.fontSizeOutput.textContent = form.fontSize.value;
  160. }
  161. </script>
  162. </body>
  163. </html>