/disruptive/js/jquery.callme.js
JavaScript | 231 lines | 194 code | 33 blank | 4 comment | 16 complexity | 4f43b3cc1d20abd7af7a9b3a7af4d843 MD5 | raw file
- (function( $ ){
-
- $.fn.callme = function( options ) {
-
- var thisPhone = this, dispatcher = $({}), callMeOptions = {}, phono, call;
- var settings = {
- apikey : "",
- dialpad: true,
- togglemic: true,
- slideopen: true,
- buttontext: "loading...",
- buttontextready: "Call me",
- numbertodial: "app:9991457008"
- };
-
- if(options) {
- //lowercase all options passed in
- $.each(options, function(k,v){
- callMeOptions[k.toLowerCase()] = v;
- });
- }
-
- return this.each(function(){
-
- if ( options ) {
- $.extend( settings, callMeOptions );
- }
-
- var phone = buildPhone( settings );
-
- $(this).append(phone);
-
- // event handlers
- phone.find(".phono-digit").bind({
- mouseenter: function(){
- $(this).addClass("ui-state-hover");
- },
- mouseleave: function(){
- $(this).removeClass("ui-state-hover");
- },
- mousedown: function(){
- $(this).addClass("ui-state-active");
- },
- mouseup: function(){
- $(this).removeClass("ui-state-active");
- },
- click: function(e){
- if( call )
- call.digit( $(this).attr("title") );
- e.preventDefault();
- }
- });
-
- phone.find(".phono-mic-toggle").bind({
- click: function(){
- (this.checked)? phono.phone.headset(true): phono.phone.headset(false);
- }
- });
-
- dispatcher.bind({
- // phono is ready, bind events to the call button
- phonoReady: function(){
- var btn = phone.find("a.phono-phone-button");
- btn.bind({
- click: function(e){
- (call) ? hangUpCall(settings, phone) : makeCall(settings, phone);
- e.preventDefault();
- }
- });
-
- btn.text(settings.buttontextready);
- }
- });
- // initialize phono
- phono = $.phono({
- apiKey: settings.apikey,
- onReady: function(){
- dispatcher.trigger("phonoReady");
- },
- phone: {
- onDisconnect: function(event) {
- hangUpCall(settings, phone);
- }
- }
- });
-
- });
-
- function buildPhone( settings ){
- var phoneHldr = $( "<div/>")
- .addClass("phono-hldr ui-widget ui-corner-all");
-
- var phoneContent = $("<div/>")
- .addClass("ui-widget-content ui-corner-all")
- .css("padding","2px")
- .appendTo(phoneHldr);
-
- var statusLink = $("<a>")
- .attr("href","#")
- .addClass("phono-phone-button ui-widget-header ui-corner-all")
- .css({
- "text-align":"center",
- "display":"block",
- "padding":"8px 10px",
- "text-decoration":"none"
- })
- .html(settings.buttontext)
- .appendTo(phoneContent);
-
- if ( settings.togglemic ){
- var micToggle = $("<div/>")
- .addClass("phono-mic-toggle-hldr")
- .css({
- "margin":"5px 0",
- "font-size":"75%",
- "text-align":"center"
- })
- .html("<input class='phono-mic-toggle' type='checkbox'/> Wearing a headset?")
- .appendTo(phoneContent);
-
- if(settings.slideopen)
- micToggle.css("display","none");
- }
-
- if( settings.dialpad ){
- var digitTblHldr = $("<div/>")
- .addClass("phono-digit-hldr")
- .appendTo(phoneContent);
-
- if(settings.slideopen)
- digitTblHldr.css("display","none");
-
- var digitTbl = $( "<table/>" )
- .addClass( "phono-digits-tbl" )
- .css({
- "width": "100%"
- })
- .appendTo( digitTblHldr );
-
- var digits = [
- {key:"1", value:" "},
- {key:"2", value:"ABC"},
- {key:"3", value:"DEF"},
- {key:"4", value:"GHI"},
- {key:"5", value:"JKL"},
- {key:"6", value:"MNO"},
- {key:"7", value:"PQRS"},
- {key:"8", value:"TUV"},
- {key:"9", value:"WXYZ"},
- {key:"*", value:" "},
- {key:"0", value:"+"},
- {key:"#", value:" "}
- ];
-
- var tblRows = $("<tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr>")
- .appendTo(digitTbl);
-
- $.each(tblRows.find("td"), function( i, el ) {
- var digitObj = digits[i];
- $(el).css({
- "padding":"1px",
- "vertical-align":"top",
- "width":"33%"
- });
-
- var digit = $( "<a/> ")
- .addClass( "phono-digit ui-state-default ui-corner-all" )
- .attr("title", digitObj.key)
- .attr("href","#")
- .css({
- "padding":"3px",
- "display":"block",
- "text-align":"center",
- "text-decoration":"none",
- "font-size":"90%"
- })
- .html( digitObj.key )
- .appendTo( el );
-
- var digitText = $("<span>")
- .css({
- "display":"block",
- "font-size":"60%"
- })
- .html(digitObj.value)
- .appendTo(digit);
- });
- }
- return phoneHldr;
- }
-
- function makeCall(settings, phone){
- phoneBtn = phone.find(".phono-phone-button");
- phoneBtn.text("Calling...");
-
- if( settings.togglemic && settings.slideopen )
- phone.find(".phono-mic-toggle-hldr").slideDown();
- if( settings.dialpad && settings.slideopen )
- phone.find(".phono-digit-hldr").slideDown();
-
- call = phono.phone.dial(settings.numbertodial, {
- tones: true,
- onAnswer: function(event) {
- phoneBtn.text("Hangup");
- },
- onHangup: function() {
- hangUpCall(settings, phone);
- },
- onDisconnect: function() {
- hangUpCall(settings, phone);
- }
- });
- }
-
- function hangUpCall(settings, phone){
- if(call){
- call.hangup();
- call = null;
- }
- phone.find(".phono-phone-button").text(settings.buttontextready);
-
- if( settings.togglemic && settings.slideopen )
- phone.find(".phono-mic-toggle-hldr").slideUp();
- if( settings.dialpad && settings.slideopen )
- phone.find(".phono-digit-hldr").slideUp();
- }
-
- };
-
- })( jQuery );