mirror of http://localhost:9400/cloud/cms
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.
351 lines
10 KiB
JavaScript
351 lines
10 KiB
JavaScript
/*
|
|
* Let us load the menu items here ...
|
|
*/
|
|
var menu = {}
|
|
/*
|
|
* This function will load menu items from the configuration file
|
|
* :uri
|
|
* :id
|
|
* :pid parent identifier
|
|
*/
|
|
|
|
menu.apply = function (uri,id,pid,_context){
|
|
id = id.replace(/ /g,'-')
|
|
if(uri == null){
|
|
return ;
|
|
}
|
|
$('.content').children().hide()
|
|
|
|
var httpclient = HttpClient.instance()
|
|
|
|
httpclient.setHeader('uri',uri)
|
|
httpclient.setHeader('dom',id)
|
|
httpclient.post(_context+'/page',function(x){
|
|
var _html = x.responseText
|
|
var template = document.createElement('template');
|
|
template.innerHTML = _html.trim();
|
|
var _dom = template.content.firstChild;
|
|
if(jx.dom.exists(pid) && jx.dom.exists(id)){
|
|
jx.dom.remove(id)
|
|
}
|
|
$('#'+pid).append(_dom)
|
|
// jx.dom.append(pid,_dom)
|
|
// $('#'+id).show('fast',function(){
|
|
// $('#'+pid).slideUp()
|
|
// })
|
|
|
|
$('#'+pid).children().slideUp('fast', function(){
|
|
$('#'+id).slideDown('fast',function(){
|
|
$('#'+pid).slideDown('fast',function(){
|
|
var input = $('#'+pid).find('input')
|
|
if (input.length > 0 ){
|
|
$(input[0]).focus()
|
|
}
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
// $('.content').append(_dom)
|
|
})
|
|
|
|
}
|
|
|
|
menu.apply_link =function(_args,_context){
|
|
//
|
|
// type:
|
|
// redirect open new window
|
|
// dialog open in a dialog
|
|
//
|
|
|
|
var url = _args['url']
|
|
_args.type = (_args.type == null)? 'redirect' :_args.type
|
|
|
|
if (_args.type.match(/dialog|embed/i) ) {
|
|
//
|
|
// calling jx.modal.show
|
|
if (_args.url){
|
|
jx.modal.show(_args.url)
|
|
}else{
|
|
// _html = jx.dom.get.value(_args.text)
|
|
// console.log(_html)
|
|
// jx.modal.show(_html)
|
|
var http = HttpClient.instance()
|
|
http.setHeader('uri',_args.uri)
|
|
http.setHeader('dom',(_args.title)?_args.title:'dialog')
|
|
// http.setHeader('dom',_args.text)
|
|
http.get(_context+'/dialog',function(x){
|
|
|
|
jx.modal.show({html:x.responseText,id:'dialog'})
|
|
console.log([$('.jxmodal')])
|
|
menu.runScript ('.jxmodal')
|
|
})
|
|
}
|
|
}else{
|
|
window.open(_args.url,_args.text)
|
|
}
|
|
|
|
}
|
|
|
|
var _delegate = {scripts:{}}
|
|
menu.runScript = function(_id){
|
|
var scripts = $(_id+' script')
|
|
|
|
jx.utils.patterns.visitor(scripts,function(_item){
|
|
if(_item.text.trim().length > 0){
|
|
|
|
var _code = eval(_item.text)
|
|
var id = _id
|
|
if (_item.parentNode != null){
|
|
var id = _item.parentNode.id == null?_item.parentNode.className : _item.parentNode.id
|
|
}
|
|
id = (id != null)?id : _id
|
|
|
|
// _delegate.scripts[id] = _code
|
|
}
|
|
})
|
|
}
|
|
menu.events = {}
|
|
menu.events._dialog = function (_item,_context){
|
|
// var url = _args['url']
|
|
_item.type = (_item.type == null)? 'redirect' :_item.type
|
|
var http = HttpClient.instance()
|
|
http.setHeader('uri',_item.uri)
|
|
http.setHeader('dom',(_item.title)?_item.title:'dialog')
|
|
// http.setHeader('dom',_args.text)
|
|
http.get(_context+'/dialog',function(x){
|
|
|
|
jx.modal.show({html:x.responseText,id:'dialog'})
|
|
// menu.events.finalize ('.jxmodal')
|
|
})
|
|
|
|
}
|
|
menu.events._open = function (id,uri,_context){
|
|
id = id.replace(/ /g,'-')
|
|
|
|
var pid = '#content'
|
|
|
|
|
|
$('.content').children().slideUp()
|
|
$('#'+id).remove()
|
|
var httpclient = HttpClient.instance()
|
|
_context = (_context == null)?'':_context;
|
|
httpclient.setHeader('uri',uri)
|
|
httpclient.setHeader('dom',id)
|
|
httpclient.post(_context+'/page',function(x){
|
|
var _html = x.responseText
|
|
var _dom = $(_html)
|
|
|
|
|
|
if(jx.dom.exists(pid) && jx.dom.exists(id)){
|
|
jx.dom.remove(id)
|
|
|
|
}
|
|
$(pid).append(_dom)
|
|
|
|
// jx.dom.append(pid,_dom)
|
|
// $('#'+id).show('fast',function(){
|
|
// $('#'+pid).slideUp()
|
|
// })
|
|
var ref = pid + ' #'+id
|
|
$(pid).children().slideUp('fast', function(){
|
|
$(ref ).slideDown('fast',function(){
|
|
|
|
$(pid).slideDown('fast',function(){
|
|
var input = $(pid).find('input')
|
|
if (input.length > 0 ){
|
|
$(input[0]).focus()
|
|
}
|
|
})
|
|
|
|
})
|
|
|
|
})
|
|
|
|
menu.events.finalize (ref)
|
|
|
|
|
|
// $('.content').append(_dom)
|
|
})
|
|
|
|
}
|
|
|
|
menu.utils = {}
|
|
menu.utils.format = function(text){
|
|
return text.replace(/(-|_)/g,' ').trim()
|
|
}
|
|
menu.events.finalize = function (ref) {
|
|
var scripts = $(ref+' script')
|
|
jx.utils.patterns.visitor(scripts,function(_item){
|
|
if(_item.text.trim().length > 0){
|
|
|
|
var _code = eval(_item.text)
|
|
var id = ref
|
|
if (_item.parentNode != null){
|
|
var id = _item.parentNode.id == null?_item.parentNode.className : _item.parentNode.id
|
|
}
|
|
id = (id != null)?id : ref
|
|
|
|
// _delegate.scripts[id] = _code
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Let's build the tab handling here ...
|
|
*
|
|
*/
|
|
var QCMSBasic= function(_layout,_context,_clickEvent) {
|
|
this._layout = _layout
|
|
this._context= _context
|
|
this._make = function (_items){
|
|
var _panes = []
|
|
var _context = this._context ;
|
|
_items.forEach(_item=>{
|
|
var _div = jx.dom.get .instance('DIV')
|
|
|
|
_div.innerHTML = menu.utils.format(_item.text)
|
|
|
|
//
|
|
// We need to check for the override text and see if it goes here
|
|
_div.className = 'active'
|
|
_div.data = _item
|
|
_panes.push(_div)
|
|
$(_div).on('click', function (){
|
|
//
|
|
// how do we process this ...
|
|
|
|
if(this.data.uri) {
|
|
|
|
if (this.data.type == 'dialog') {
|
|
menu.events._dialog(this.data,_context)
|
|
}else{
|
|
menu.events._open(menu.utils.format(this.data.text),this.data.uri,_context)
|
|
}
|
|
}else{
|
|
window.open(this.data.url,menu.utils.format(this.data.text))
|
|
}
|
|
})
|
|
|
|
|
|
})
|
|
return _panes ;
|
|
|
|
}
|
|
this.init = function (){
|
|
var _me = this ;
|
|
var _make = this._make
|
|
var _layout = this._layout
|
|
Object.keys(this._layout.menu).forEach(function(_name){
|
|
var _div = me._make(_layout.menu[_name]) ;
|
|
|
|
|
|
var _sub = jx.dom.get.instance('DIV')
|
|
var _menuItem = jx.dom.get.instance('DIV')
|
|
_menuItem.innerHTML = menu.utils.format (_name)
|
|
_sub.className = 'sub-menu border-round border '
|
|
_menuItem.className = 'item'
|
|
_div.forEach(_item=>{$(_sub).append(_item) })
|
|
$(_sub).append(_div)
|
|
_menuItem.appendChild(_sub)
|
|
|
|
$('.main .menu').append(_menuItem)
|
|
})
|
|
}
|
|
}
|
|
|
|
var QCMSTabs = function(_layout,_context,_clickEvent){
|
|
//
|
|
// This object will make tabs in the area of the menu
|
|
// @TODO: we can parameterize where the menu is made to improve flexibility
|
|
//
|
|
this.tabs = jx.dom.get.instance('DIV')
|
|
this.tabs.className = 'tabs'
|
|
this._context = _context
|
|
this._make = function (text,_item,_event){
|
|
var text = text.trim().replace(/(_|-)/ig,' ').trim()
|
|
var _context = this._context;
|
|
if (text.match(/\//)){
|
|
text = text.split(/\//g).slice(-1)[0]
|
|
}
|
|
var _button = jx.dom.get.instance('INPUT')
|
|
var _label = jx.dom.get.instance('LABEL')
|
|
_button.type= 'radio'
|
|
_button.id = text+'tab'
|
|
_button.name = 'menu-tabs'
|
|
_label.innerHTML = text.toLowerCase()
|
|
_label._uri = _item[0].uri
|
|
_label.htmlFor = _button.id
|
|
$(_label).on('click',function (){
|
|
|
|
menu.events._open(this.innerHTML,this._uri,_context)
|
|
})
|
|
// $(this.tabs).append( [_button,_label])
|
|
return [_button,_label]
|
|
|
|
}
|
|
|
|
this._layout = _layout
|
|
this.init = function (){
|
|
var _make = this._make
|
|
var tabs = this.tabs
|
|
Object.keys(_layout.menu).forEach(function(_key){
|
|
_item = _layout.menu[_key]
|
|
// console.log([_item])
|
|
_tabItem = _make(_key,_item)
|
|
$(tabs).append(_tabItem)
|
|
})
|
|
|
|
this.tabs.className = 'tabs'
|
|
$('.main .menu').append(this.tabs)
|
|
$('.main .menu').css({'border':'1px solid transparent'})
|
|
}
|
|
//
|
|
// We need to load the pages here ...
|
|
//
|
|
|
|
|
|
|
|
}
|
|
|
|
menu.tabs = { }
|
|
// menu.tabs.make = function(text,_clickEvent){
|
|
// var _id = text.trim()
|
|
// if (text.match(/\//)){
|
|
// _id = text.split(/\//g).slice(-1)[0]
|
|
// }
|
|
// var _button = jx.dom.get.instance('div')
|
|
// var _label = jx.dom.get.instance('LABEL')
|
|
// _button.type= 'radio'
|
|
// _button.id = _id
|
|
|
|
// _label.innerHTML = _id.toLowerCase()
|
|
// $(_label).on('click',_clickEvent)
|
|
// return [_button,_label]
|
|
// }
|
|
menu.tabs.init =function (_layout,_context){
|
|
//
|
|
// Let us determine what kind of menu is suited for this
|
|
// @TODO: Make menus configurable i.e on other areas of the site
|
|
//
|
|
var _count = 0
|
|
var _items = 0
|
|
Object.keys(_layout.menu).forEach(_name=>{
|
|
_items += _layout.menu[_name].length
|
|
_count += 1
|
|
})
|
|
|
|
if (_count == _items){
|
|
var _menuObject = new QCMSTabs (_layout,_context)
|
|
}else{
|
|
var _menuObject = new QCMSBasic (_layout,_context)
|
|
}
|
|
// console.log(_layout)
|
|
// var _tabs = new QCMSTabs (_layout)
|
|
console.log(_menuObject)
|
|
_menuObject.init()
|
|
|
|
}
|
|
|