JSFiddle - React, Tailwind, and code Playground

by Barry Carter

HTML

<script src="https://rawgit.com/millermedeiros/js-signals/master/dist/signals.min.js"></script>
<button data-bind="click: callInProgress">CalInProgress</button>
<button data-bind="click: callOnHold">CallOnHold</button>
<br/><br/>
<b>script button</b>
<button data-bind="visible: holdEnabled">Hold Call</button>

JavaScript

// https://github.com/millermedeiros/js-signals/wiki/Examples
var Signal = signals.Signal;

//custom object that dispatch signals
var TeleEvents = {
  CallDisposed : new Signal(),
  CallStarted : new Signal(),
  CallHoldStatusChanged: new Signal()
};
/* End Events implementation */

// namespaces
var max = { scripting: {} }
max.agent = { script: {} }

max.agent.script.API = function() {
	this.registerCallbacks = function(options) {
		// and stuff  		
  }
}

max.scripting.API = function() {
	  var Telephony = function() {
    	// the4se would call agentAPI functions to perform the action
    	this.hangup = function() {};	
      this.dispose = function() {};
      this.hold = function() {};
      this.unhold = function() {};
      this.stopRecording = function() {};
      this.startRecording = function() {};
    };
        
    // event callbacks
    this.OnCallStatusChanged = function(callId, status) {
    	// re-fire our own event?
    };
    
    var CUSTOMER = 0;
    var TRANSFER = 1;
    
    this.OnCallDisposed = function(callId, status) {
    	TeleEvents.CallDisposed(CUSTOMER);
    };
    
    this.OnCallHoldStatusChanged = function(callId, status) {
    	TeleEvents.CallHoldStatusChanged(CUSTOMER);
    };
    
    this.OnRecordingStatusChanged = function(callId, status) {
    	// re-fire our own event?
    };
    
    // init the script
    this.init = function(callId, etc) {
    	// hook up the events from agentAPI
      //max.agent.script.API.registerCallbacks(Telephony);
    }
    
    this.navigate = function(pageName) {
    }
    
    this.save  = function() {
    }
    
    this.getFieldValue  = function(fieldName) {
    }
    
    this.setFieldValue = function(fieldName, value) {
    }
};


// fakeout model
var ViewModel = function() {
	  var self = this;
	  this.holdEnabled = ko.observable(false);
    
	  // This will be defined inside of the field component, such as a dispose button
  	TeleEvents.CallDisposed.add(function(type) {
    	// I will be...