Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Changing Javacript Classes

    I have a piece of code I want to change. I will call this from a native method. If anyone will help me about this, I dont know hell about javascript and I am really stuck.

    Normally I was supposed to embed this using <script> tag into my html.
    Code:
    var dgFlow = new PAYPAL.apps.DGFlow({ trigger: 'submitBtn' });
    Since, in Smartgwt, I can not do that, I want it to work like this when I call it in a native Java method:

    Code:
    var dgFlow = new PAYPAL.apps.DGFlow(url);
    open the lightbox popup and redirect the given url.

    Here is the source code of Javascript lighbox popup:

    Code:
    if (typeof PAYPAL == 'undefined' || !PAYPAL) {
    	var PAYPAL = {};
    }
    PAYPAL.apps = PAYPAL.apps || {};
    (function() {
    	var defaultConfig = {
    		trigger : null,
    		expType : null,
    		sole : 'true',
    		stage : null,
    		port : null
    	};
    	PAYPAL.apps.DGFlow = function(userConfig) {
    		var that = this;
    		that.UI = {};
    		that._init(userConfig);
    		return {
    			setTrigger : function(el) {
    				that._setTrigger(el);
    			},
    			startFlow : function(url) {
    				var win = that._render();
    				if (win.location) {
    					win.location = url;
    				} else {
    					win.src = url;
    				}
    			},
    			closeFlow : function() {
    				that._destroy();
    			},
    			isOpen : function() {
    				return that.isOpen;
    			}
    		};
    	};
    	PAYPAL.apps.DGFlow.prototype = {
    		name : 'PPDGFrame',
    		isOpen : false,
    		NoB : true,
    		_init : function(userConfig) {
    			if (userConfig) {
    				for ( var key in defaultConfig) {
    					if (typeof userConfig[key] !== 'undefined') {
    						this[key] = userConfig[key];
    					} else {
    						this[key] = defaultConfig[key];
    					}
    				}
    			}
    			this.port = (this.port == null) ? "" : ":" + this.port;
    			this.stage = (this.stage == null) ? "www.paypal.com" : "www."
    					+ this.stage + ".paypal.com" + this.port;
    			if (this.trigger) {
    				this._setTrigger(this.trigger);
    			}
    			this._addCSS();
    			if (this.NoB == true && this.sole == 'true') {
    				var url = "https://" + this.stage
    						+ "/webapps/checkout/nameOnButton.gif";
    				this._getImage(url, this._addImage);
    			}
    		},
    		_render : function() {
    			var ua = navigator.userAgent, win;
    			if (ua.match(/iPhone|iPod|Android|Blackberry.*WebKit/i)) {
    				win = window.open('', this.name);
    				return win;
    			} else if (this.expType == 'mini') {
    				var width = 400, height = 550, left, top;
    				if (window.outerWidth) {
    					left = Math.round((window.outerWidth - width) / 2)
    							+ window.screenX;
    					top = Math.round((window.outerHeight - height) / 2)
    							+ window.screenY;
    				} else if (window.screen.width) {
    					left = Math.round((window.screen.width - width) / 2);
    					top = Math.round((window.screen.height - height) / 2);
    				}
    				win = window
    						.open(
    								'',
    								this.name,
    								'top='
    										+ top
    										+ ', left='
    										+ left
    										+ ', width='
    										+ width
    										+ ', height='
    										+ height
    										+ ', location=0, status=0, toolbar=0, menubar=0, resizable=0');
    				return win;
    			} else {
    				this._buildDOM();
    				this._createMask();
    				this._centerLightbox();
    				this._bindEvents();
    				this.isOpen = true;
    				return this.UI.iframe;
    			}
    		},
    		_addCSS : function() {
    			var css = '', styleEl = document.createElement('style');
    			css += '#' + this.name
    					+ ' { z-index:20002; position:absolute; top:0; left:0; }';
    			css += '#' + this.name
    					+ ' .panel { z-index:20003; position:relative; }';
    			css += '#' + this.name
    					+ ' .panel iframe { width:385px; height:550px; border:0; }';
    			css += '#'
    					+ this.name
    					+ ' .mask { z-index:20001; position:absolute; top:0; left:0; background-color:#000; opacity:0.2; filter:alpha(opacity=20); }';
    			css += '.nameOnButton { display: inline-block; text-align: center; }';
    			css += '.nameOnButton img { border:none; }';
    			styleEl.type = 'text/css';
    			if (styleEl.styleSheet) {
    				styleEl.styleSheet.cssText = css;
    			} else {
    				styleEl.appendChild(document.createTextNode(css));
    			}
    			document.getElementsByTagName('head')[0].appendChild(styleEl);
    		},
    		_buildDOM : function() {
    			this.UI.wrapper = document.createElement('div');
    			this.UI.wrapper.id = this.name;
    			this.UI.panel = document.createElement('div');
    			this.UI.panel.className = 'panel';
    			try {
    				this.UI.iframe = document.createElement('<iframe name="'
    						+ this.name + '">');
    			} catch (e) {
    				this.UI.iframe = document.createElement('iframe');
    				this.UI.iframe.name = this.name;
    			}
    			this.UI.iframe.frameBorder = '0';
    			this.UI.iframe.border = '0';
    			this.UI.iframe.scrolling = 'no';
    			this.UI.iframe.allowTransparency = 'true';
    			this.UI.mask = document.createElement('div');
    			this.UI.mask.className = 'mask';
    			this.UI.panel.appendChild(this.UI.iframe);
    			this.UI.wrapper.appendChild(this.UI.mask);
    			this.UI.wrapper.appendChild(this.UI.panel);
    			document.body.appendChild(this.UI.wrapper);
    		},
    		_createMask : function(e) {
    			var windowWidth, windowHeight, scrollWidth, scrollHeight, width, height;
    			if (window.innerHeight && window.scrollMaxY) {
    				scrollWidth = window.innerWidth + window.scrollMaxX;
    				scrollHeight = window.innerHeight + window.scrollMaxY;
    			} else if (document.body.scrollHeight > document.body.offsetHeight) {
    				scrollWidth = document.body.scrollWidth;
    				scrollHeight = document.body.scrollHeight;
    			} else {
    				scrollWidth = document.body.offsetWidth;
    				scrollHeight = document.body.offsetHeight;
    			}
    			if (window.innerHeight) {
    				windowWidth = window.innerWidth;
    				windowHeight = window.innerHeight;
    			} else if (document.documentElement
    					&& document.documentElement.clientHeight) {
    				windowWidth = document.documentElement.clientWidth;
    				windowHeight = document.documentElement.clientHeight;
    			} else if (document.body) {
    				windowWidth = document.body.clientWidth;
    				windowHeight = document.body.clientHeight;
    			}
    			width = (windowWidth > scrollWidth) ? windowWidth : scrollWidth;
    			height = (windowHeight > scrollHeight) ? windowHeight
    					: scrollHeight;
    			this.UI.mask.style.width = width + 'px';
    			this.UI.mask.style.height = height + 'px';
    		},
    		_centerLightbox : function(e) {
    			var width, height, scrollY;
    			if (window.innerWidth) {
    				width = window.innerWidth;
    				height = window.innerHeight;
    				scrollY = window.pageYOffset;
    			} else if (document.documentElement
    					&& (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
    				width = document.documentElement.clientWidth;
    				height = document.documentElement.clientHeight;
    				scrollY = document.documentElement.scrollTop;
    			} else if (document.body
    					&& (document.body.clientWidth || document.body.clientHeight)) {
    				width = document.body.clientWidth;
    				height = document.body.clientHeight;
    				scrollY = document.body.scrollTop;
    			}
    			this.UI.panel.style.left = Math
    					.round((width - this.UI.iframe.offsetWidth) / 2)
    					+ 'px';
    			var panelTop = Math
    					.round((height - this.UI.iframe.offsetHeight) / 2)
    					+ scrollY;
    			if (panelTop < 5) {
    				panelTop = 10;
    			}
    			this.UI.panel.style.top = panelTop + 'px';
    		},
    		_bindEvents : function() {
    			addEvent(window, 'resize', this._createMask, this);
    			addEvent(window, 'resize', this._centerLightbox, this);
    			addEvent(window, 'unload', this._destroy, this);
    		},
    		_setTrigger : function(el) {
    			if (el.constructor.toString().indexOf('Array') > -1) {
    				for ( var i = 0; i < el.length; i++) {
    					this._setTrigger(el[i]);
    				}
    			} else {
    				el = (typeof el == 'string') ? document.getElementById(el) : el;
    				if (el && el.form) {
    					el.form.target = this.name;
    				} else if (el && el.tagName.toLowerCase() == 'a') {
    					el.target = this.name;
    				}
    				addEvent(el, 'click', this._triggerClickEvent, this);
    			}
    		},
    		_getImage : function(url, callback) {
    			if (typeof this.callback != 'undefined') {
    				url = this.url;
    				callback = this.callback;
    			}
    			var self = this;
    			var imgElement = new Image();
    			imgElement.src = "";
    			if (imgElement.readyState) {
    				imgElement.onreadystatechange = function() {
    					if (imgElement.readyState == 'complete'
    							|| imgElement.readyState == 'loaded') {
    						callback(imgElement, self);
    					}
    				};
    			} else {
    				imgElement.onload = function() {
    					callback(imgElement, self);
    				};
    			}
    			imgElement.src = url;
    		},
    		_addImage : function(img, obj) {
    			if (checkEmptyImage(img)) {
    				var url = "https://" + obj.stage
    						+ "/webapps/checkout/clearNob.gif";
    				var wrapperObj = {};
    				wrapperObj.callback = obj._removeImage;
    				wrapperObj.url = url;
    				wrapperObj.outer = obj;
    				var el = obj.trigger;
    				if (el.constructor.toString().indexOf('Array') > -1) {
    					for ( var i = 0; i < el.length; i++) {
    						var tempImg = img.cloneNode(true);
    						obj._placeImage(el[i], tempImg, wrapperObj);
    					}
    				} else {
    					obj._placeImage(el, img, wrapperObj);
    				}
    			}
    		},
    		_placeImage : function(el, img, obj) {
    			el = (typeof el == 'string') ? document.getElementById(el) : el;
    			var root = getParent(el);
    			var spanElement = document.createElement("span");
    			spanElement.className = "nameOnButton";
    			var lineBreak = document.createElement("br");
    			var link = document.createElement("a");
    			link.href = "javascript:";
    			link.appendChild(img);
    			root.insertBefore(spanElement, el);
    			spanElement.appendChild(el);
    			spanElement.insertBefore(link, el);
    			spanElement.insertBefore(lineBreak, el);
    			obj.span = spanElement;
    			obj.link = link;
    			obj.lbreak = lineBreak;
    			addEvent(link, 'click', obj.outer._getImage, obj);
    		},
    		_removeImage : function(img, obj) {
    			if (!checkEmptyImage(img)) {
    				var el = obj.outer.trigger;
    				if (el.constructor.toString().indexOf('Array') > -1) {
    					obj.outer._removeMultiImages(obj.outer.trigger);
    				} else {
    					spanElement = obj.span;
    					link = obj.link;
    					lineBreak = obj.lbreak;
    					spanElement.removeChild(link);
    					spanElement.removeChild(lineBreak);
    				}
    			}
    		},
    		_removeMultiImages : function(obj) {
    			for ( var i = 0; i < obj.length; i++) {
    				obj[i] = (typeof obj[i] == 'string') ? document
    						.getElementById(obj[i]) : obj[i];
    				rootNode = getParent(obj[i]);
    				if (rootNode.className == 'nameOnButton') {
    					lineBreak = getPreviousSibling(obj[i]);
    					linkNode = getPreviousSibling(lineBreak);
    					rootNode.removeChild(linkNode);
    					rootNode.removeChild(lineBreak);
    				}
    			}
    		},
    		_triggerClickEvent : function(e) {
    			this._render();
    		},
    		_destroy : function(e) {
    			if (this.isOpen && this.UI.wrapper.parentNode) {
    				this.UI.wrapper.parentNode.removeChild(this.UI.wrapper);
    			}
    			if (this.interval) {
    				clearInterval(this.interval);
    			}
    			removeEvent(window, 'resize', this._createMask);
    			removeEvent(window, 'resize', this._centerLightbox);
    			removeEvent(window, 'unload', this._destroy);
    			removeEvent(window, 'message', this._windowMessageEvent);
    			this.isOpen = false;
    		}
    	};
    	var eventCache = [];
    	function addEvent(obj, type, fn, scope) {
    		scope = scope || obj;
    		var wrappedFn;
    		if (obj.addEventListener) {
    			wrappedFn = function(e) {
    				fn.call(scope, e);
    			};
    			obj.addEventListener(type, wrappedFn, false);
    		} else if (obj.attachEvent) {
    			wrappedFn = function() {
    				var e = window.event;
    				e.target = e.target || e.srcElement;
    				e.preventDefault = function() {
    					window.event.returnValue = false;
    				};
    				fn.call(scope, e);
    			};
    			obj.attachEvent('on' + type, wrappedFn);
    		}
    		eventCache.push([ obj, type, fn, wrappedFn ]);
    	}
    	function removeEvent(obj, type, fn) {
    		var wrappedFn, item, len, i;
    		for (i = 0; i < eventCache.length; i++) {
    			item = eventCache[i];
    			if (item[0] == obj && item[1] == type && item[2] == fn) {
    				wrappedFn = item[3];
    				if (wrappedFn) {
    					if (obj.removeEventListener) {
    						obj.removeEventListener(type, wrappedFn, false);
    					} else if (obj.detachEvent) {
    						obj.detachEvent('on' + type, wrappedFn);
    					}
    				}
    			}
    		}
    	}
    	function getParent(el) {
    		do {
    			el = el.parentNode;
    		} while (el && el.nodeType != 1);
    		return el;
    	}
    	function getPreviousSibling(el) {
    		do {
    			el = el.previousSibling;
    		} while (el && el.nodeType != 1);
    		return el;
    	}
    	function checkEmptyImage(img) {
    		return (img.width > 1 || img.height > 1);
    	}
    }());

    #2
    Start by Googling "gwt jsni"

    Comment


      #3
      A common gotcha is overlooking to add $wnd within JSNI code.

      Code:
      var dgFlow = new $wnd.PAYPAL.apps.DGFlow(url);

      Comment


        #4
        Yeah I learnt that as soon as Isomorphic suggested me to google JSNI. But still that does not get me anywhere because my problem is mainly not understanding the javascript code I have. I changed it just like you did hoping it has some method taking a url and doing what i want. I even took it down a nodge and thought of a way around the trigger by writing:
        Code:
        var dgFlow = new $wnd.PAYPAL.apps.DGFlow({trigger:'isc_ButtonItem_2'});
        isc_ButtonItem_2 being the name of my trigger SmartGwt button. But now I get a JavaScriptException.

        Code:
        com.google.gwt.core.client.JavaScriptException: (TypeError): obj is null
         fileName: https://www.paypalobjects.com/js/external/dg.js
         lineNumber: 24
        Originally posted by smartgwt.dev
        A common gotcha is overlooking to add $wnd within JSNI code.

        Code:
        var dgFlow = new $wnd.PAYPAL.apps.DGFlow(url);
        Last edited by schwa; 23 Jun 2011, 07:55.

        Comment


          #5
          Update: Altough I covered the basics of Javascipt, the code parts I wrote in JSNI method, which are with $wnd keyword accessing the injected class, seems to be not working. $wnd keyword has some limitations ?? I guess. Still working on it. Any help or idea is appreciated.
          Last edited by schwa; 30 Jun 2011, 00:32.

          Comment

          Working...
          X