You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
3.7 KiB
JavaScript
122 lines
3.7 KiB
JavaScript
/**
|
|
* 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)
|
|
} |