Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // Custom transition for Scriptaculous
- Effect.Transitions.easeInBack = function(pos) {
- var x = 1.618;
- return Math.pow(pos, 2) * ((x + 1) * pos - x);
- };
- var WebcallPlugin = {
- actionInProcess : false,
- validateResult : false,
- interval : null,
- webcall_id : null,
- // Initialize plugin
- initialize: function(options) {
- this.defaults = options;
- // Action button handling
- this.defaults.actionButton.observe('mouseup', function() {
- if (this.actionInProcess) return;
- this.actionInProcess = true;
- // Making validation
- this.validate();
- if (this.validateResult) {
- this.doCall();
- $('webcall-calling').setStyle({
- 'display' : this.defaults.haveMoney ? 'block' : 'none'
- });
- $('webcall-no-money').setStyle({
- 'display' : this.defaults.haveMoney ? 'none' : 'block'
- });
- this.slideTo(-this.defaults.frameWidth);
- this.defaults.actionButton.addClassName('form-submit-disabled');
- }
- }.bind(this));
- // Back to main screen
- [$$('#webcall-calling a')[0], $$('#webcall-no-money a')[0]].each(function(a, i) {
- a.observe('mouseup', function() {
- if (this.actionInProcess) return;
- this.actionInProcess = true;
- this.slideTo(0, function() {
- this.defaults.actionButton.removeClassName('form-submit-disabled')
- clearInterval(this.interval);
- }.bind(this));
- }.bind(this));
- }.bind(this));
- // Select element handling
- $$('.webcall-selectbox').each(this.change.bind(this));
- // Input handling
- /*$$('.webcall-input input').each(function(input) {
- input.observe('keyup', this.setDescription.bind(this, input));
- }.bind(this));
- */
- $$('.webcall-destin input')[0].observe('keyup',
- this.setRatePerMin.bind(this));
- },
- // Set rate per min (when no money)
- setRatePerMin: function() {
- // Make AJAX request here
- var phone = $$('.webcall-destin input')[0].value;
- new Ajax.Request('/webcalls/single_cost', {parameters: {number: phone}});
- //$$('.webcall-rate input')[0].value = '0.777';
- },
- // Set description under input
- setDescription: function(input) {
- // Make AJAX request here
- input.next('p').update('text')
- },
- // Input fields validation
- validate: function() {
- this.validateResult = true;
- $$('#webcall-main .form-row').each(function(row) {
- var valid = true;
- var select = row.select('select')[0];
- var input = row.select('input')[0];
- var option = select.options[select.selectedIndex];
- // Validate phone num
- if (option.hasClassName('webcall-phone-icon')) {
- if (!/^\+{0,1}[\d ]+$/.test(input.value))
- valid = false
- }
- // Validate sip address
- else if (option.hasClassName('webcall-sip-icon')) {
- if (!/^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.(([0-9]{1,3})|([a-zA-Z]{2,3})|(aero|coop|info|museum|name))$/i.test(input.value))
- valid = false
- }
- // Validate skype name
- else if (option.hasClassName('webcall-skype-icon')) {
- if (!/^.+$/.test(input.value))
- valid = false
- }
- if (!valid) {
- new Effect.Highlight(input, {
- startcolor : '#ff2c2c',
- endcolor : '#ffffff',
- duration : 1,
- afterFinish : function() {
- this.actionInProcess = false;
- }.bind(this)
- })
- this.validateResult = false;
- }
- }.bind(this));
- },
- // Calling
- doCall: function() {
- if (!this.defaults.haveMoney) {
- return;
- }
- $('webcall_form').onsubmit();
- var callFrom = $$('#webcall-calling .phonenum')[0];
- var callStatusFrom = $$('#webcall-calling .phonenum-from')[0];
- var callStatusTo = $$('#webcall-calling .phonenum-to')[0];
- var callAnsStatusFrom = $$('#webcall-calling .call-status-from')[0];
- var callAnsStatusTo = $$('#webcall-calling .call-status-to')[0];
- var callFromIcons = $$('#webcall-calling .call-from-icon');
- var callToIcons = $$('#webcall-calling .call-to-icon');
- // Update values
- callFrom.update( $('webcall-from').value );
- callStatusFrom.update( $('webcall-from').value );
- callStatusTo.update( $('webcall-to').value );
- // Update icons
- [callFromIcons, callToIcons].each(function(icons) {
- icons.each(function(icon) {
- var classNames = icon.classNames().toArray();
- // For each element className
- classNames.each(function(className) {
- if (className != 'call-from-icon' && className != 'call-to-icon') {
- icon.removeClassName(className);
- }
- });
- var select = icon.hasClassName('call-from-icon')
- ? $('webcall-selectbox-1')
- : $('webcall-selectbox-2');
- var option = select.options[select.selectedIndex];
- icon.addClassName(option.className);
- });
- });
- // Make periodical AJAX request and update call statuses
- this.updateCallStatus(function(callStatuses) {
- callStatuses.each(function(status, statusIndex) {
- [callAnsStatusFrom, callAnsStatusTo].each(function(container, containerIndex) {
- if (statusIndex != containerIndex) return;
- switch (status) {
- case 0: // Calling 0
- container.addClassName('success-calling').update('Calling...');
- break;
- case 1: // Answered 1
- container.addClassName('success-calling').update('Answered');
- break;
- case 2: // Not Answered 2
- container.addClassName('fail-calling').update('Not answered');
- break;
- }
- });
- });
- });
- },
- // Set webcall ID
- setWebcallId : function(webcall_id) {
- this.webcall_id = webcall_id;
- },
- // Try to get call status
- updateCallStatus: function(callback) {
- var scope = this;
- this.interval = setInterval(function() {
- if (scope.webcall_id == null) return;
- var url = '/webcalls/' + scope.webcall_id + '/status';
- new Ajax.Request(url, {
- onSuccess: function(transport) {
- var result = transport.responseText.evalJSON();
- if ((result[0] == 1 && result[1] == 1)
- || (result[0] == 2 || result[1] == 2)) {
- clearInterval(scope.interval);
- }
- callback(result);
- }, method: 'get'
- });
- }.bind(this), 500);
- },
- // Slide to pos
- slideTo: function(pos, afterFinishCallback) {
- afterFinishCallback = typeof afterFinishCallback == 'undefined'
- ? function() {}
- : afterFinishCallback;
- return this.defaults.frameContainer.morph({ marginLeft : pos + 'px'}, {
- duration : 0.45,
- transition : Effect.Transitions.easeInBack,
- afterFinish : function() {
- afterFinishCallback();
- this.actionInProcess = false;
- }.bind(this)
- });
- },
- // Change select
- change: function(el) {
- var span = el.previous('h3').select('span')[0];
- var select = el.select('select')[0];
- var handler = function() {
- var option = select.options[select.selectedIndex];
- var input = el.next('div').select('input')[0];
- var i = el.next('div').select('i')[0];
- i.setStyle({ display : 'none' });
- input.setStyle({ padding : '0' });
- if (option.hasClassName('webcall-phone-icon')) {
- span.update(this.defaults.captions.phone);
- i.setStyle({ display : 'block' });
- input.setStyle({ padding : '0 0 0 18px' });
- } else if (option.hasClassName('webcall-sip-icon')) {
- span.update(this.defaults.captions.sip);
- } else if (option.hasClassName('webcall-skype-icon')) {
- span.update(this.defaults.captions.skype);
- }
- }.bind(this);
- handler();
- select.observe('change', handler);
- }
- };
Add Comment
Please, Sign In to add comment