Created
September 21, 2011 14:22
-
-
Save libryder/1232159 to your computer and use it in GitHub Desktop.
clicktocall widtget
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Written by Jay Phillips | |
| // The "viewer_element" arg should be a <div> with one <p> child that's hidden by default. | |
| function AhnCall(viewer_element, source, destination) { | |
| this.viewer = viewer_element; | |
| this.text_holder = $(viewer_element.children()[0]); | |
| this.source = source; | |
| this.destination = destination; | |
| this.viewer.slideDown(); | |
| var self = this; | |
| // Using the more sophisticated jQuery.ajax method instead of jQuery.post in order to handle errors. | |
| jQuery.ajax({ | |
| url: "call", | |
| type: "POST", | |
| success: function(event) { self.transition_to("ringing") }, | |
| error: function(event) { self.transition_to("error") }, | |
| data: { "destination": self.destination, "source": self.source } | |
| }); | |
| // Possible states: new, connecting, error, ringing, established, hanging_up, finished | |
| self.state = "new"; | |
| self.transition_to = function(new_state) { | |
| self.state = new_state; | |
| self.state_transitions[new_state](); | |
| }; | |
| self.state_transitions = { | |
| connecting: function() { | |
| self.update_text("Connecting"); | |
| self.viewer.removeClass("hidden"); | |
| self.viewer.children("button").remove(); | |
| self.viewer.slideDown("slow"); | |
| }, | |
| ringing: function() { | |
| self.update_text("Ringing"); | |
| self.queue_next_heartbeat(false); | |
| }, | |
| established: function() { | |
| self.update_text("Call in progress!"); | |
| self.viewer.append(self.get_hangup_button()); | |
| }, | |
| hanging_up: function() { | |
| self.update_text("Hanging up"); | |
| }, | |
| finished: function() { | |
| self.update_text("Call finished"); | |
| self.viewer.children("button").remove(); | |
| self.viewer.append(self.viewer_hide_button()); | |
| }, | |
| error: function() { | |
| self.update_text("Whoops. Error occurred!"); | |
| self.viewer.children("button").remove(); | |
| self.viewer.append(self.viewer_hide_button()); | |
| } | |
| }; | |
| self.viewer_hide_button = function() { | |
| hide_link = $(document.createElement("button")); | |
| hide_link.text("Hide"); | |
| hide_link.click(function() { self.viewer.slideUp(); }); | |
| return hide_link; | |
| }; | |
| self.get_hangup_button = function() { | |
| if(!self.hangup_button) { | |
| self.hangup_button = $(document.createElement("button")); | |
| self.hangup_button.text("Hangup"); | |
| self.hangup_button.click(function() { | |
| self.hangup(); | |
| }); | |
| } | |
| return self.hangup_button; | |
| }; | |
| self.update_text = function(new_text) { | |
| self.text_holder.text(new_text); | |
| }; | |
| self.heartbeat = function(has_been_answered) { | |
| jQuery.getJSON("status", {source: self.source}, function(data) { | |
| call_status = data.result; | |
| if(call_status == "alive" || call_status == "resultalive") { | |
| if(self.state == "connecting" || self.state == "ringing") { | |
| self.transition_to("established"); | |
| } | |
| self.queue_next_heartbeat(true); | |
| } | |
| else if(call_status == "dead" || call_status == "resultdead") { | |
| if(has_been_answered) { | |
| self.transition_to("finished") | |
| // Do not queue next heartbeat | |
| } | |
| else { | |
| self.queue_next_heartbeat(false) | |
| } | |
| } | |
| else { | |
| throw "Unrecognized call status " + call_status + "!"; | |
| } | |
| }); | |
| }; | |
| self.heartbeat_timeout = 1000; | |
| self.queue_next_heartbeat = function(has_been_answered) { | |
| //var has_been_answered = has_been_answered; | |
| setTimeout(function() { self.heartbeat(has_been_answered) }, self.heartbeat_timeout); | |
| }; | |
| /*self.hangup = function() { | |
| self.transition_to("hanging_up"); | |
| jQuery.ajax({ | |
| url: "hangup", | |
| type: "POST", | |
| success: function(event) { self.transition_to("finished") }, | |
| error: function(event) { self.transition_to("error") }, | |
| data: { "call_to_hangup": self.destination } | |
| }); | |
| };*/ | |
| self.transition_to("connecting"); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html><head> | |
| <title>Record a greeting</title> | |
| <script src="jquery.js" type="text/javascript"></script> | |
| <script src="call.js" type="text/javascript"></script> | |
| <link href="style.css" media="screen" rel="stylesheet" type="text/css" /> | |
| </head><body> | |
| <div id="content"> | |
| <h1>Record a greeting</h1> | |
| <div id="call-form"> | |
| <p><label for="source">Ringto: </label><input type="text" id="source" name="source"/></p> | |
| <p><label for="source">Destination: </label><input type="text" id="destination" name="destination"/></p> | |
| <p><button onclick="new AhnCall($('#call'), $('#source').val(), $('#destination').val())">Start call</button></p> | |
| </div> | |
| </div> | |
| <div id="call" class="hidden"> | |
| <p>Starting...</p> | |
| </div> | |
| </body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: sans-serif; | |
| background-color: #7ad2ff; | |
| } | |
| #content { | |
| background-color: white; | |
| width: 360px; | |
| margin: 0 auto; | |
| padding: 10px; | |
| border: 20px solid #5da0c3; | |
| } | |
| #content h1 { | |
| margin: 0; | |
| background-color: #5da0c3; | |
| font-size: 38px; | |
| letter-spacing: -1px; | |
| color: white; | |
| text-align: center; | |
| padding: 15px 0; | |
| } | |
| #content h2 { | |
| letter-spacing: -1px; | |
| text-align: center; | |
| } | |
| #content input, #content label { | |
| font-size: 18px; | |
| } | |
| #content input { | |
| width: 150px; | |
| } | |
| #call-form p { | |
| text-align: center; | |
| } | |
| #call { | |
| background-color: #cfcfcf; | |
| border: 20px solid black; | |
| text-align: center; | |
| padding: 6px 3px; | |
| width: 374px; | |
| font-size: 30px; | |
| margin: 10px auto 0 auto; | |
| } | |
| .hidden { | |
| display: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment