CleanSpeak Chat Example Integration

HTML

<script src="https://savant.inversoft.org/org/inversoft/prime/prime.js/0.34.14/prime-min-0.34.14.js"></script>
<div id="header">Super Duper Chat</div>
<div id="container">
  <div id="chat" contenteditable="true"></div>
  <div id="button-bar">
    <input type="button" name="send" value="Send">
  </div>
</div>
<div id="results"></div>
<div id="raw"></div>

CSS

#container {
  width: 400px;
  text-align: right;
  margin-left: 10px;
  margin-top: 10px;
}

#chat {
  height: 200px;
  width: 100%;
  border: 1px solid #ccc;
  padding: 5px;
  margin-bottom: 10px;
  text-align: left;
}

.ok {
  color: green !important;
}

#raw {
  white-space: pre;
  font-family: monospace;
  margin-top: 50px;
}

#header {
  margin: 10px;
  padding: 5px;
  border-bottom: 1px solid #ccc;
}

#results {
  color: red;
  margin-left: 10px;
  margin-top: -20px;
}

JavaScript

var CleanSpeak = CleanSpeak || {};
CleanSpeak.FilterRequest = CleanSpeak.FilterRequest || {};

/**
 *  CleanSpeak Filter Request 
 *
 *  @param {Object} request The filter request object.
 *  @constructor
 */
CleanSpeak.FilterRequest = function(request) {
  this.request = request;
  this.results = Prime.Document.queryByID('results');
  this.raw = Prime.Document.queryByID('raw');
};

CleanSpeak.FilterRequest.constructor = CleanSpeak.FilterRequest;
CleanSpeak.FilterRequest.prototype = {

  go: function() {
  	new Prime.Ajax.Request('http://api.inversoft.com:8211/content/item/filter', 'POST')
      .withHeader('Authorization', '70a5f542-6d94-4b4a-8463-b92f31d426c8')
      .withSuccessHandler(this._handleSuccess)
      .withErrorHandler(this._handleError)
      .withContext(this)
      .withJSON(this.request)
      .go();
  },

  _handleSuccess: function(xhr) {
    var response = JSON.parse(xhr.responseText);
    if (response.matches && response.matches.length > 0) {
      this.results.setHTML('Your message contains inappropriate content.').removeClass('ok');
      this.raw.setHTML(JSON.stringify(response, null, 2));
    } else {
      this.results.setHTML('Ok.').addClass('ok');
      this.raw.setHTML('');
    }
  },
  
  _handleError: function(xhr) {
     this.results.setHTML('Status: ' + xhr.status + '\n');
     if (xhr.status === 401) {
       this.results.setHTML('Not Authenticated, change the API key.');
     } else if (xhr.status === 400) {
       var response = JSON.parse(xhr.responseText);
       this.results.setHTML('Failure: \n' + JSON.stringify(response, null, 2));
     } else {
       this.results.setHTML(xhr.errorText);
     }
  }
};

var chat = Prime.Document.queryByID('chat').focus();
var send = Prime.Document.queryFirst('input[type="button"]')
  .addEventListener('click', function() {
    var content = chat.getTextContent();
    // Instantiate a new CleanSpeak Filter Request and call go()
    var data = {
      'content': content
    };
  
    new...