enhancements and modal window 0.1 -- needs work

ext/cloud-view.js

@@ -25,7 +25,7 @@ jx.cloudview.oauth.init = function (id, key,callback) {
 		jx.cloudview.handler = null
 		jx.cloudview.popup = window.open(url, 'oauth', 'width=405, height=900')
 		
-		jx.cloudview.oauth.listen(key,callback)
+		//jx.cloudview.oauth.listen(key,callback)
 	})	
 }
 /**
@@ -34,6 +34,7 @@ jx.cloudview.oauth.init = function (id, key,callback) {
 jx.cloudview.oauth.listen = function (key,callback) { 
 	if (jx.cloudview.handler != null) {
 		clearInterval(jx.cloudview.handler)
+		jx.cloudview.handler = null;
 	}
 	jx.cloudview.handler = setInterval(function () {
 		try { 
@@ -57,6 +58,7 @@ jx.cloudview.oauth.listen = function (key,callback) {
 
 			}
 			jx.cloudview.popup.close()
+			
 		} catch (error) {
 			// console.log(error)
 		}

ext/modal.js

@@ -0,0 +1,122 @@
+/**
+ * Steve L. Nyemba
+ * This namespace is designed to run modal windows types {dialog,alert,custom} 
+ */
+var __jx_modalw__ = {width:0,height:0}
+/**
+ * @param {*} info  {uri|html}
+ */
+__jx_modalw__.init = function(info,pointers){
+    // if(info.match(/^[a-z](+\/[a-z,.]+){1,}/i)){
+    //     var uri = info
+    //     var http = HttpClient.instance()
+    //     http.get(uri,function(x){
+    //         var html = x.responseText
+    //         __jx_modalw__.render.modal(html,pointers)
+    //     })
+    // }else{
+    //     var html = info
+    //     __jx_modalw__.render.modal(id,html,pointers)
+    // }
+}
+
+__jx_modalw__.render = {}
+__jx_modalw__.render.modal = function(id,html,pointers){
+    var bg      = jx.dom.get.instance('DIV')
+    var frame   = jx.dom.get.instance('DIV')
+    
+    var buttons  = jx.dom.get.instance('DIV')
+    bg.style.position       = 'relative'
+    bg.style.zIndex         = 1
+    bg.style.width          = '98.5%'
+    bg.style.height         = '98%'
+    bg.style.backgroundColor= 'rgba(242,242,242,0.7)'
+    bg.style.display = 'grid'
+    
+    if(html.match(/^http|^\//)){
+        bg.style.gridTemplateColumns = '10% 80% 10%'
+        bg.style.gridTemplateRows = '10% 80% 10%'
+        var iframe = jx.dom.get.instance('IFRAME')
+        iframe.src = html
+        iframe.frameBorder = 0
+        iframe.style.width = '99%'
+        iframe.style.height= '99%'
+        iframe.style.backgroundColor = '#ffffff'
+        iframe.className = 'border-round border'
+        frame.appendChild(iframe)
+            
+    }else{
+        var text   = jx.dom.get.instance('DIV')
+        text.innerHTML = html
+        frame.appendChild(text)
+        bg.style.gridTemplateColumns = '20% 60% 20%'
+        bg.style.gridTemplateRows = '20% 60% 20%'
+        frame.style.display = 'flex'
+        frame.style.justifyContent = 'center'
+        frame.style.alignItems = 'center'
+        // frame.style.resize = 'both'
+        text.className = 'border border-round'
+        text.style.backgroundColor = '#ffffff'
+        
+    }
+    frame.style.gridRow = '2/3'
+    frame.style.gridColumn = '2/3'
+
+    bg.appendChild(frame)
+    bg.onclick = function(){
+        jx.dom.remove(this)
+    }
+    return {id:id,background:bg,frame:frame}
+}
+/**
+ * This function is designed to layout the pane with the background on it
+ */
+__jx_modalw__.render.show = function(info){
+    info.background.className = 'border-round border'
+    info.background.style.position = 'relative'
+    
+    var parent = (info.id != null)?jx.dom.get.instance(info.id): document.body
+    var height = $(parent).height()
+    var width = $(parent).width()
+    parent.appendChild(info.background)
+    if(info.id == null){
+        info.background.style.top = 0
+        info.background.style.left =0
+        info.background.style.position = 'absolute'
+    }else{
+        $(info.background).width(width+(width*0.01))
+        $(info.background).height(height+(height*0.1))
+        info.background.style.top =  -(height)
+        info.background.style.left= -10
+    
+    }
+    
+    
+    
+}
+
+if(! jx){
+    var jx = {}
+}
+/**
+ * This function will generate a modal window
+ * @param {*} html 
+ * @param {*} args 
+ */
+jx.modal= function(html,args){
+    if(args == null){
+        args = null
+    }
+    var info = __jx_modalw__.render.modal(args,html)
+    __jx_modalw__.render.show(info)
+}
+// jx.modal.render = function(id,html){
+//     var info = __jx_modalw__.render.modal(id,html)
+//     // console.log(info)
+    
+// }
+jx.modal_example = function(){
+    
+    busy = '<div class="small" align="center">Please wait</div><i class="fa fa-cog fa-5x faa-wrench animated" style="color:#4682b4"></i><i class="fa fa-cog fa-spin fa-3x" style="color:black"></i><i class="fa fa-cog faa-wrench animated fa-5x" style="color:#4682B4"></i>'
+    jx.modal(busy)
+}

utils.js

@@ -107,6 +107,21 @@ jx.utils.join = function(x,y){
 		return rec ;
 	}
 }
+jx.utils.size = function(id){
+	if(id.match(/window|screen/i)){
+		var width = window.innerWidth
+		|| document.documentElement.clientWidth
+		|| document.body.clientWidth;	
+		var height = window.innerHeight
+		|| document.body.clientHeight;
+	}else if(jx.dom.exists(id)){
+		var element = jx.dom.get.instance(id)
+		var width = element.clientWdith
+		var height = element.clientHeight
+	}
+	return {width:width,height:height}
+	
+}
 /**
  * Implementation of a few standard design patterns. Their use is user/dependent
  * For more information on how/when to use a design pattern please use google/wikipedia ;-)