SMusatov
/
zammad
зеркало из https://github.com/zammad/zammad.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
							<!doctype html>
<meta charset="utf-8">
<title>Zammad Chat</title>
<link rel="stylesheet" href="chat.css">
<meta name="viewport" content="width=device-width">
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35738/livereload.js?snipver=1"></' + 'script>')</script>
<style>
  body {
    margin: 0;
    font-family: sans-serif;
  }

  .mockup {
    vertical-align: bottom;
  }

  .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);
  }

  .settings input {
    vertical-align: middle;
  }
  .settings input + input {
    margin-right: 3px;
  }

  table td:first-child {
    text-align: right;
    padding-right: 0;
  }

  td {
    padding: 5px;
  }

  h2 {
    font-size: 1em;
    margin: 0;
  }

  @media only screen and (max-width: 768px) {
    .settings {
      display: none;
    }
  }

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

<img class="mockup" width="100%" src="website.png">

<div class="settings">
  <table>
    <tr>
      <td>
      <td><h2>Settings</h2>
    <tr>
      <td>
        <input id="flat" type="checkbox" data-option="flat">
      <td>
        <label for="flat">Flat Design</label>
    <tr>
      <td>
        <input type="color" id="color" value="#AE99D6" data-option="color"> 
      <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>
  </table>
</div>

<script src="jquery-2.1.4.min.js"></script>
<!--
<script src="node_modules/sass.js/dist/sass.js"></script>
-->
<script src="chat.js"></script>
<!--
<script>
  var sass = new Sass();
  var scss = '';
  var $scss = $('<style id="scss"></style>').appendTo('body');

  $.get('style.scss', function(result){ scss = result });

  function setScssVariable(name, value){
    if(!scss){
      return 'scss file not yet loaded';
    }

    scss = scss.replace(new RegExp('(\\$'+ name +':\ ).*(;)'), '$1'+ value +'$2');
  }

  function updateStyle(){
    if(!scss){
      return 'scss file not yet loaded';
    }

    sass.compile(scss, function(result) {
      if(result.status != 0){
        // error
        console.error(result.formatted);
      } else {
        $scss.text(result.text);
      }
    });
  }
-->
<script>
  var chat = new ZammadChat({
    chatId: 1,
    host: 'ws://localhost:6042',
    debug: true
  });

  $('.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;
      }
    }
  });
</script>