<commit_before><link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/iron-form/iron-form.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-icons/editor-icons.html">
<link rel="import" href="../../bower_components/iron-a11y-keys/iron-a11y-keys.html">

<script src="https://cdnjs.cloudflare.com/ajax/libs/buzz/1.1.10/buzz.min.js"></script>

<dom-module id="send-box">
  <template>
    <style>
      :host {
        display: block;
        box-sizing: border-box;
        max-width: 512px;
      }
      
      #cardMessage {
        background-color: #FFFFFF;
        margin: 12px;
        min-height: 64px;
        padding: 8px 0px 8px 0px;
      }
      
      #messageContent {
        
      }
      
      #form {
        margin: 0px 8px 7px 8px;
      }
      
      paper-button.green {
        color: var(--paper-light-green-500);
        --paper-button-flat-focus-color: var(--paper-light-green-50);
        
        -webkit-transition: 0.2s;
        transition: 0.2s;
      }
      paper-button.green:hover {
        background: var(--paper-light-green-50);
        
        -webkit-transition: 0.2s;
        transition: 0.2s;
      }
      paper-button.ripple {
        --paper-button-ink-color: var(--paper-green-a200);
      }
      
      #sendButton {
        height: 40px;
      }
      
      paper-icon-button.small {
        color: #727272;
        
        margin: 0px;
        
        -webkit-transition: 0.2s;
        transition: 0.2s;
      }
      
      paper-icon-button.small:hover {
        color: var(--default-primary-color);
        
        -webkit-transition: 0.2s;
        transition: 0.2s;
      }
      
      paper-icon-button.small.ripple {
        --paper-button-ink-color: var(--default-primary-color);
      }
      
      .separator {
        height: 1px;
        width: 100%;
        background-color: var(--primary-background-color);
      }
      
    </style>

    <iron-a11y-keys
      id="keys"
      keys="shift+enter || enter"
      target="[[target]]"
      on-keys-pressed="_updatePressed">
    </iron-a11y-keys>

    <paper-material elevation="1" flex id="cardMessage">
      <form is="iron-form" id="form" method="post" action="http://api.oversimplified.io/message">
        <paper-input name="content" label="Send a message" id="messageContent"></paper-input>
        <paper-input name="type" value="text" hidden></paper-input>
        <paper-input name="userId" value="56154da0d32c233e52f30815" hidden></paper-input>
        
        <div class="horizontal layout">
          <div>
            <paper-icon-button icon="editor:insert-emoticon" class="small" id="emoticonButton"></paper-icon-button>
            <paper-icon-button icon="editor:insert-photo" class="small" id="photoButton"></paper-icon-button>
            <paper-icon-button icon="editor:insert-drive-file" class="small" id="fileButton"></paper-icon-button>
            <paper-icon-button icon="editor:insert-chart" class="small" id="chartButton"></paper-icon-button>
            <paper-icon-button icon="room" class="small" id="roomButton"></paper-icon-button>
          </div>
          <div class="flex"> </div>
          <div>
            <paper-button on-click="submitForm" class="green ripple" id="sendButton"><iron-icon icon="send"></iron-icon> Send</paper-button>
          </div>
        </div>
      </form>
      
      <div class="separator"></div>
      
      <div class="editor">
        <div class="emojiPicker">
          <span>{{createEmoji}}</span>
        </div>
      </div>
    </paper-material>

  </template>

</dom-module>

<script>
  Polymer({
    is: 'send-box',
    properties: {
      target: {
        type: Object,
        value: function() {
          return document.body;
        }
      }
    },
    
    submitForm: function() {
      if (this.$.messageContent.value != "") {
        
        this.$.form.submit();
        this.sendSound();
        this.$.messageContent.value = "";
      }
    },
    
    _updatePressed: function(event) {
      this.submitForm();
    },
 
    createEmoji: function() {
      var emojiList = [😀,😁,😂,😃,😄,😅,😆,😇,😈,👿,😉,😊,😋,😌,😍,😎,😏,😐,😑,😒,😓,😔,😕,😖,😗,😘,😙,😚,😛,😜,😝,😞,😟,😠,😡,😢,😣,😤,😥,😦,😧,😨,😩,😪,😫,😬,😭,😮,😯,😰,😱,😲,😳,😴,😵,😶];
      var result = "";
      for (i = 0; i < emojiList.length(); i++) {
        result += "<span>" + emojiList[i] + "</span>";
      }
      return result;
    },
    
    sendSound: function() {
      var sendSound = new buzz.sound( "../../sounds/send", {
          formats: ["wav"],
          preload: true
      });
      
      sendSound.play();
    }
  });
</script>

<!--

<form is="iron-form" id="form" method="post" action="http://back.oversimplified.io/message">
 <paper-input name="content" label="content"></paper-input>
 <input name="type" value="text" hidden>
 <input name="userId" value="56154da0d32c233e52f30815" hidden>
<paper-button raised onclick="submitForm()">Send</paper-button>
</form>

<script>
function submitForm() {
 document.getElementById('form').submit();
}

--><commit_msg>emoji list<commit_after><link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/iron-form/iron-form.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-icons/editor-icons.html">
<link rel="import" href="../../bower_components/iron-a11y-keys/iron-a11y-keys.html">

<script src="https://cdnjs.cloudflare.com/ajax/libs/buzz/1.1.10/buzz.min.js"></script>

<dom-module id="send-box">
  <template>
    <style>
      :host {
        display: block;
        box-sizing: border-box;
        max-width: 512px;
      }
      
      #cardMessage {
        background-color: #FFFFFF;
        margin: 12px;
        min-height: 64px;
        padding: 8px 0px 8px 0px;
      }
      
      #messageContent {
        
      }
      
      #form {
        margin: 0px 8px 7px 8px;
      }
      
      paper-button.green {
        color: var(--paper-light-green-500);
        --paper-button-flat-focus-color: var(--paper-light-green-50);
        
        -webkit-transition: 0.2s;
        transition: 0.2s;
      }
      paper-button.green:hover {
        background: var(--paper-light-green-50);
        
        -webkit-transition: 0.2s;
        transition: 0.2s;
      }
      paper-button.ripple {
        --paper-button-ink-color: var(--paper-green-a200);
      }
      
      #sendButton {
        height: 40px;
      }
      
      paper-icon-button.small {
        color: #727272;
        
        margin: 0px;
        
        -webkit-transition: 0.2s;
        transition: 0.2s;
      }
      
      paper-icon-button.small:hover {
        color: var(--default-primary-color);
        
        -webkit-transition: 0.2s;
        transition: 0.2s;
      }
      
      paper-icon-button.small.ripple {
        --paper-button-ink-color: var(--default-primary-color);
      }
      
      .separator {
        height: 1px;
        width: 100%;
        background-color: var(--primary-background-color);
      }
      
    </style>

    <iron-a11y-keys
      id="keys"
      keys="shift+enter || enter"
      target="[[target]]"
      on-keys-pressed="_updatePressed">
    </iron-a11y-keys>

    <paper-material elevation="1" flex id="cardMessage">
      <form is="iron-form" id="form" method="post" action="http://api.oversimplified.io/message">
        <paper-input name="content" label="Send a message" id="messageContent"></paper-input>
        <paper-input name="type" value="text" hidden></paper-input>
        <paper-input name="userId" value="56154da0d32c233e52f30815" hidden></paper-input>
        
        <div class="horizontal layout">
          <div>
            <paper-icon-button icon="editor:insert-emoticon" class="small" id="emoticonButton"></paper-icon-button>
            <paper-icon-button icon="editor:insert-photo" class="small" id="photoButton"></paper-icon-button>
            <paper-icon-button icon="editor:insert-drive-file" class="small" id="fileButton"></paper-icon-button>
            <paper-icon-button icon="editor:insert-chart" class="small" id="chartButton"></paper-icon-button>
            <paper-icon-button icon="room" class="small" id="roomButton"></paper-icon-button>
          </div>
          <div class="flex"> </div>
          <div>
            <paper-button on-click="submitForm" class="green ripple" id="sendButton"><iron-icon icon="send"></iron-icon> Send</paper-button>
          </div>
        </div>
      </form>
      
      <div class="separator"></div>
      
      <div class="editor">
        <div class="emojiPicker">
          <span>{{createEmoji}}</span>
        </div>
      </div>
    </paper-material>

  </template>

</dom-module>

<script>
  Polymer({
    is: 'send-box',
    properties: {
      target: {
        type: Object,
        value: function() {
          return document.body;
        }
      }
    },
    
    submitForm: function() {
      if (this.$.messageContent.value != "") {
        
        this.$.form.submit();
        this.sendSound();
        this.$.messageContent.value = "";
      }
    },
    
    _updatePressed: function(event) {
      this.submitForm();
    },
 
    createEmoji: function() {
      var emojiList = ['😀','😁','😂','😃','😄','😅','😆','😇','😈','👿','😉','😊','😋','😌','😍','😎','😏','😐','😑','😒','😓','😔','😕','😖','😗','😘','😙','😚','😛','😜','😝','😞','😟','😠','😡','😢','😣','😤',😥,'😦','😧','😨','😩','😪];
      var result = "";
      for (i = 0; i < emojiList.length(); i++) {
        result += "<span>" + emojiList[i] + "</span>";
      }
      return result;
    },
    
    sendSound: function() {
      var sendSound = new buzz.sound( "../../sounds/send", {
          formats: ["wav"],
          preload: true
      });
      
      sendSound.play();
    }
  });
</script>

<!--

<form is="iron-form" id="form" method="post" action="http://back.oversimplified.io/message">
 <paper-input name="content" label="content"></paper-input>
 <input name="type" value="text" hidden>
 <input name="userId" value="56154da0d32c233e52f30815" hidden>
<paper-button raised onclick="submitForm()">Send</paper-button>
</form>

<script>
function submitForm() {
 document.getElementById('form').submit();
}

-->
{'fraction_non_alphanumeric': 0.19647796422644292, 'fraction_numerical': 0.019177576986907616, 'mean_word_length': 2.2263533610945867, 'pattern_counts': {'":': 0, '<': 149, '<?xml version=': 0, '>': 147, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1668559', 'n_tokens_mistral': 3908, 'n_tokens_neox': 3752, 'n_words': 529}