Module selector

git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@12447 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
nagoon97 2012-12-21 02:11:01 +00:00
parent 13affdc72a
commit eb4ca0c317
4 changed files with 518 additions and 163 deletions

View file

@ -597,3 +597,9 @@ html[lang="mn"] .x .g11n.active>[disabled],
.modal .ie6{position:absolute;left:0;top:0;width:100%;height:100%;border:0;opacity:0;filter:alpha(opacity=0);z-index:1}
.modalClose{position:absolute;right:-8px;top:-8px;border:0;background:#ddd;padding:0;width:28px;height:28px;font-size:14px;font-weight:bold;cursor:pointer;color:#999;border-radius:5px}
.modalBlur{position:absolute;top:0;right:0;border:0;background:none;padding:0;width:1px;height:1px;overflow:hidden}
.x_modal._common {width:600px;margin-left:-300px}
.x_modal._common._small{width:400px;margin-left:-200px}
.x_modal._common._nobody .x_modal-body,
.x_modal._common._type_alert ._cancel{display:none}
.x_modal._common._nobody .x_modal-footer{border-top:0}

View file

@ -922,6 +922,231 @@ jQuery(function($){
}
});
*/
jQuery(function($){
var _hide = $.fn.hide;
$.fn.hide = function(htOpt) {
$(this).trigger('hide', [htOpt]);
return _hide.apply(this, arguments);
}
var _show = $.fn.show;
$.fn.show = function(htOpt) {
$(this).trigger('show', [htOpt]);
return _show.apply(this, arguments);
}
});
jQuery(function($){
/*
<fieldset class="x_modal" id="msgBox" style="display:none">
<div class="x_modal-header">
<h3 class="_title"></h3>
</div>
<div class="x_modal-body">
<p class="_text"></p>
</div>
<div class="x_modal-footer">
<button type="button" class="x_btn x_pull-left _cancel">{$lang->cmd_cancel}</button>
<span class="x_btn-group x_pull-right">
<button type="button" class="x_btn x_btn-inverse _ok">{$lang->cmd_confirm}</button>
</span>
</div>
<button type="button" class="x_close _cancel">&times;</button>
</fieldset>
*/
$.xeMsgBox = {
htOptions : {}
};
var $msgBox = $.xeMsgBox.$msgBox = $("<div>").addClass("x_modal _common x").css('display', 'none');
$msgBox.html('<button type="button" class="x_close _cancel">×</button>\
<div class="x_modal-header">\
<h3 class="_title"></h3>\
</div>\
<div class="x_modal-body">\
<p class="_text"></p>\
</div>\
<div class="x_modal-footer">\
<button type="button" class="x_btn x_pull-left _cancel">{$lang->cmd_cancel}</button>\
<span class="x_btn-group x_pull-right">\
<button type="submit" class="x_btn x_btn-inverse _ok">{$lang->cmd_confirm}</button>\
</span>\
</div>');
//console.log($msgBox.html());
$($.find("body")).append($msgBox);
//console.log($.find("body"));
//$msgBox.show();
/*
<div class="x_modal x" id="exModal-2" style="display: block;"><button type="button" class="x_close">×</button>
<div class="x_modal-header">
<h3>Modal 2 header</h3>
</div>
<div class="x_modal-body">
<p>One fine body</p>
</div>
<div class="x_modal-footer">
<button type="button" class="x_btn x_pull-left" data-hide="#exModal-2">Close</button>
<span class="x_btn-group x_pull-right">
<button type="submit" class="x_btn">Modify</button>
<button type="submit" class="x_btn x_btn-danger">Delete</button>
</span>
</div>
</div>
*/
//var $msgBox = $("#msgBox");
$msgBox.find("._ok").click(function(){
$.xeMsgBox.fnOnOK();
});
$msgBox.find("._cancel").click(function(){
$.xeMsgBox.fnOnCancel();
});
$msgBox.bind("show", function(){
$.xeMsgBox.bVisible = true;
$.xeMsgBox._showFoggy();
$.xeMsgBox.fnOnShow();
if($msgBox.find('input').length > 0){
setTimeout(function(){
$msgBox.find('input').focus()
}, 0);
}
});
$msgBox.bind("hide", function(){
$.xeMsgBox.bVisible = false;
$.xeMsgBox._hideFoggy();
$.xeMsgBox.fnOnHide();
});
$(document.body).on('keydown', function(ev){
if(!$.xeMsgBox.bVisible) return;
if(ev.keyCode === 27){
$msgBox.find("._cancel").click();
}
});
$.xeMsgBox.fnOnOK = function(){
if(typeof $.xeMsgBox.htOptions.fnOnOK === "function"){
if($.xeMsgBox.htOptions.fnOnOK()) return;
}
$msgBox.hide();
};
$.xeMsgBox.fnOnCancel = function(){
if(typeof $.xeMsgBox.htOptions.fnOnCancel === "function") $.xeMsgBox.htOptions.fnOnCancel();
$msgBox.hide();
};
$.xeMsgBox.fnOnShow = function(){
if(typeof $.xeMsgBox.htOptions.fnOnShow === "function") $.xeMsgBox.htOptions.fnOnShow();
};
$.xeMsgBox.fnOnHide = function(){
if(typeof $.xeMsgBox.htOptions.fnOnHide === "function") $.xeMsgBox.htOptions.fnOnHide();
};
$.xeMsgBox.showMsgBox = function(htOptions){
// sTitle, sText, fnOnOK, fnOnCancel, bSmall, bAlert, fnOnShow, fnOnHide, bDanger
htOptions = $.xeMsgBox.htOptions = htOptions || {};
var sTitle = htOptions.sTitle || "";
var sText = htOptions.sText || "";
var bDanger = htOptions.bDanger || false;
$msgBox.find("._title") .html(sTitle);
$msgBox.find("._text").html(sText);
if(sText === ""){
$msgBox.addClass('_nobody');
}else{
$msgBox.removeClass('_nobody');
}
var $confirmBtn = $msgBox.find('._ok');
if(bDanger){
$confirmBtn.removeClass('x_btn-inverse');
$confirmBtn.addClass('x_btn-danger');
}else{
$confirmBtn.removeClass('x_btn-danger');
$confirmBtn.addClass('x_btn-inverse');
}
// #msgBox._small {width:400px;margin-left:-200px}
// #msgBox._type_alert _cancel{display:none}
if(htOptions.bSmall){
$msgBox.addClass("_small");
}else{
$msgBox.removeClass("_small");
}
if(htOptions.bAlert){
$msgBox.addClass("_type_alert");
}else{
$msgBox.removeClass("_type_alert");
}
$msgBox.show();
}
$.xeMsgBox.alertDialog = function(htOptions){
htOptions = htOptions || {};
htOptions.bAlert = true;
this.showMsgBox(htOptions);
}
$.xeMsgBox.confirmDialog = function(htOptions){
htOptions = htOptions || {};
htOptions.bAlert = false;
this.showMsgBox(htOptions);
}
var $foggyLayer = $.xeMsgBox.$foggyLayer = $("<div>");
$foggyLayer.css({
position: 'absolute',
top:0,
left:0,
backgroundColor:'#000',
opacity: 0.5,
display:'none',
zIndex:100
});
//$($.find("body")).append($msgBox);
$($.find("body")).append($foggyLayer);
$.xeMsgBox._resizeFoggy = function(){
$foggyLayer.css({
width: 0,
height: 0
});
setTimeout(function(){
$foggyLayer.css({
width: $(document).width(),
height: $(document).height()
});
}, 0);
}
$(window).resize($.xeMsgBox._resizeFoggy);
$.xeMsgBox._resizeFoggy();
$.xeMsgBox._showFoggy = function(){
$foggyLayer.show();
}
$.xeMsgBox._hideFoggy = function(){
$foggyLayer.hide();
}
});
// Sortable table
jQuery(function($){
var

View file

@ -154,7 +154,286 @@ xe.lang.msg_empty_search_keyword = '{$lang->msg_empty_search_keyword}';
<!-- value="trash|delete|move|copy" -->
</div>
</form>
<style>
.menu_selector {
position:absolute;
width:100%;
border:3px solid green;
top:100px;
z-index: 100;
}
.menu_selector ul {list-style-type:none; margin:0;}
.menu_selector .contents {
border:1px solid black;
background:white;
max-width:500px;
min-width:300px;
height:500px;
box-shadow:10px 10px 5px #888;
border-radius:5px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
}
@media only screen and (max-width:1024px){
.menu_selector li {display:inline;}
.menu_selector .contents {margin-top:0;}
.menu_selector .contents {background:#afa;}
}
@media only screen and (max-width:800px){
.menu_selector li {display:inline;}
.menu_selector .contents {background:#aaf;}
}
</style>
<script>
jQuery._xeAdminVar = jQuery._xeAdminVar || {};
jQuery(function($){
var $container;
var aSelectedModules;
var htNodeInfo;
var fnOnSelect;
$.template( "menuSelector_menuTree", '<ul>{{html Nodes}}</ul>' );
$.template( "menuSelector_menuTreeNode", ' <li>\
<a href="#" class="_nodeType_${NodeType} _menu_url_${MenuUrl}" >${MenuTitle}</a>\
{{html SubTree}}\
</li>' );
//data-param=\'{ "sMenuId":"${MenuId}", "sMenuUrl":"${MenuUrl}", "sMenuTitle":"${MenuTitle}" }\'
function onSiteMapReceived(htData){
var $ = jQuery;
var aMenuList = htData.menuList;
var sTreeHtml = createTreeMarkup(aMenuList, 0, "menuSelector_menuTree", "menuSelector_menuTreeNode");
$container.html(sTreeHtml);
$container
.jstree({
"plugins" : ["themes","html_data","ui","crrm"],
"crrm" : {
"move" : {
"check_move" : function (m) {
var p = this._get_parent(m.o);
// root is not draggable
if(p === -1) return false;
// a menu cann't be dragged to a root position
p = this._get_parent(m.np);
if(!p) return false;
return true;
}
}
},
"core" : { }
})
.bind("loaded.jstree", function (event, data) {
data.inst.open_all();
var sRenameId = $._xeAdminVar.sRenameOnload;
$._xeAdminVar.sRenameOnload = null;
var sSelectOnload = $._xeAdminVar.sSelectOnload;
$._xeAdminVar.sSelectOnload = null;
if(sRenameId){
//console.log('renaming', sRenameId);
$("#siteMapTree").jstree("rename", $("#menu"+sRenameId));
$("#menu"+sRenameId)[0].scrollIntoView(true);
}
if(sSelectOnload){
//console.log('selecting', sSelectOnload);
var el = $("#menu"+sSelectOnload)[0];
if(el){
$("#siteMapTree").jstree("select_node", $(el));
el.scrollIntoView(true);
}
}
})
.bind("select_node.jstree", function(event, data){
//console.log(data);
//jstree-clicked
});
// disable sitemap labels and shortcuts.
$container.find('._nodeType_1, ._nodeType_3').parent('li').addClass('x_disabled');
/*
if(sSelectedModule){
$container.find('._menu_url_'+sSelectedModule).click();
}
*/
}
$.xeShowMenuSelector = function($container_param, fnOnSelect_param, aSelectedModules_param){
var $ = jQuery;
var params = {
menu_srl : 0
};
$container = $container_param;
aSelectedModules = aSelectedModules_param;
fnOnSelect = fnOnSelect_param;
htNodeInfo = {};
$.exec_json("menu.getMenuAdminSiteMap", params, onSiteMapReceived);
}
// return html
function createTreeMarkup(aNode, sParentSrl, sMenuTree, sMenuTreeNode){
var $ = jQuery;
sMenuTree = sMenuTree || "menuSelector_menuTree";
sMenuTreeNode = sMenuTreeNode || "menuSelector_menuTreeNode";
var $ = jQuery;
if(aNode.length == 0){
return "";
}
var sActiveBtn, sNormalBtn, sHoverBtn, sExpand, sLink, aSubNodes, sNodeSrl, sOpenWindow, sParentSrl, nSelected, sText, sURL, sIsStartModule, aSubNode, sModuleType;
// 1: Sitemap node, 2: Menu node
var nNodeType;
var sResult = "";
var sTargetPanel;
for(var i=0, nLen=aNode.length; i<nLen; i++){
aNode[i].sParentSrl = sParentSrl;
// Only sitemap node has menuSrl
if(aNode[i].menuSrl){
nNodeType = 1;
}else{
nNodeType = 2;
}
sURL = "";
switch(nNodeType){
case 1:
sText = aNode[i].title;
sNodeSrl = aNode[i].menuSrl;
aSubNode = aNode[i].menuItems.list;
sTargetPanel = "#propertiesRoot";
break;
case 2:
sText = aNode[i].text;
sLink = aNode[i].link;
sURL = aNode[i].url;
sNodeSrl = aNode[i].node_srl;
//sParentSrl = aNode[i].parent_srl;
sExpand = aNode[i].expand;
sOpenWindow = aNode[i].open_window;
nSelected = aNode[i].selected;
sActiveBtn = aNode[i].active_btn;
sNormalBtn = aNode[i].normal_btn;
sHoverBtn = aNode[i].hover_btn;
sIsStartModule = aNode[i].is_start_module;
aSubNode = aNode[i].list;
sModuleType = aNode[i].module_type;
sModule = aNode[i].module;
sTargetPanel = "#properties";
if(aNode[i].is_shortcut === "Y"){
sModuleType = "_SHORTCUT";
sURL = "";
aNode[i].bShortCut = true;
}else{
aNode[i].bShortCut = false;
}
break;
default:
}
htNodeInfo[sNodeSrl] = aNode[i];
htNodeInfo[sNodeSrl].aNode = aSubNode || [];
htNodeInfo[sNodeSrl].nNodeType = nNodeType;
htNodeInfo[sNodeSrl].sNodeSrl = sNodeSrl;
htNodeInfo[sNodeSrl].sText = sText;
htNodeInfo[sNodeSrl].sMenuNameKey = htNodeInfo[sNodeSrl].menu_name_key;
htNodeInfo[sNodeSrl].sModuleType = sModuleType;
sSubTree = "";
if(aSubNode && aSubNode.length>0){
sSubTree = createTreeMarkup(aSubNode, sNodeSrl, sMenuTree, sMenuTreeNode);
}
/*
if(sMenuType === "shortcut"){
sText = sText + " ${s}";
}
*/
var sTextWithIcons = sText;
if(sIsStartModule){
sTextWithIcons += " ${h}";
}
if(htNodeInfo[sNodeSrl].sModuleType === "_SHORTCUT"){
sTextWithIcons += " ${s}";
nNodeType = 3;
}
var $node = $.tmpl( sMenuTreeNode, {MenuTitleWithHome:sTextWithIcons,MenuTitle:sText,MenuId:sNodeSrl,MenuUrl:sURL,NodeType:nNodeType,SubTree:sSubTree,Target:sTargetPanel} )
.data('sMenuId', sNodeSrl).data('sMenuUrl', sURL).data('sMenuTitle', sText);
//data-param=\'{ "sMenuId":"${MenuId}", "sMenuUrl":"${MenuUrl}", "sMenuTitle":"${MenuTitle}" }\'
//console.log($node);
sResult += $node[0].outerHTML.replace("${h}", "<i class='x_icon-home' title='Home Page'>[HOME]</i>").replace("${s}", "<i class='x_icon-share' title='Shortcut'></i>");
}
return $.tmpl( sMenuTree, {Nodes:sResult} ).get()[0].outerHTML;
}
});
jQuery(function($){
$.xeMsgBox.confirmDialog({
sTitle : 'TITLE',
sText : '<div style="width:368px;height:300px;border:1px solid;overflow:scroll"><div class="tree"></div></div>',
bSmall: true,
bDanger: true,
fnOnOK : function(){
console.log($container.find('.jstree-clicked'));
$container.find('.jstree-clicked').each(function(idx, el){
console.log($(el).closest('li').data('sMenuId'));
});
}
});
$container = $('.x_modal._common .tree');
$.xeShowMenuSelector($container);
});
jQuery(function($){
// Modal anchor activation
var $docTable = $('#documentListTable');

View file

@ -2,9 +2,9 @@
<load target="./css/sitemap.css" index="11" />
<load target="./js/_lib/jquery.cookie.js" />
<load target="./js/_lib/jquery.hotkeys.js" />
<load target="./js/jquery.jstree.js" />
<!--load target="./js/jquery.jstree.js" />
<load target="./js/jquery.tmpl.js" /-->
<load target="./js/jquery.scrollTo-1.4.2.js" />
<load target="./js/jquery.tmpl.js" />
<!--script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script-->
<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
@ -657,21 +657,7 @@
<button type="button" class="x_close" data-admin-hide="#html">&times;</button>
</div>
</div>
<fieldset class="x_modal" id="msgBox" style="display:none">
<div class="x_modal-header">
<h3 class="_title"></h3>
</div>
<div class="x_modal-body">
<p class="_text"></p>
</div>
<div class="x_modal-footer">
<button type="button" class="x_btn x_pull-left _cancel">{$lang->cmd_cancel}</button>
<span class="x_btn-group x_pull-right">
<button type="button" class="x_btn x_btn-inverse _ok">{$lang->cmd_confirm}</button>
</span>
</div>
<button type="button" class="x_close _cancel">&times;</button>
</fieldset>
<iframe name="submitTarget" src="about:_blank" style="position:absolute; top:-10000px; left:-10000px; width:1025px;height:769px"></iframe>
<script>
@ -1171,7 +1157,7 @@ jQuery(function($){
var _hide = $.fn.hide;
$.fn.hide = function(speed, easing, callback, htOpt) {
$(this).trigger('hide', [htOpt]);
//$(this).trigger('hide', [htOpt]);
$(this).find('.active').removeClass('active');
@ -1190,7 +1176,7 @@ jQuery(function($){
var _show = $.fn.show;
$.fn.show = function(speed, easing, callback, htOpt) {
$(this).trigger('show', [htOpt]);
//$(this).trigger('show', [htOpt]);
if($(this).hasClass("col")){
$(this).next().hide(speed, easing, callback, htOpt);
@ -1900,7 +1886,9 @@ jQuery(function($){
//console.log(htInfo);
if(htInfo.sModuleType === "_SHORTCUT"){
if(htInfo.module){
//console.log(htInfo);
//if(htInfo.module){
if(htInfo.href !== htInfo.url){
// Menu shortcut
$(this).find('a[href="#fix_linkMenu"]').click();
//$(this).find('._menu_link').val();
@ -3684,149 +3672,6 @@ jQuery(function($){
$quickHelp.on('click', '._quick_help_nomore', function(){
closeQuickHelp(true);
});
var $foggyLayer = $("<div>");
$foggyLayer.css({
position: 'absolute',
top:0,
left:0,
backgroundColor:'#000',
opacity: 0.5,
display:'none',
zIndex:100
});
$($.find("body")).append($foggyLayer);
$(window).resize(function(){
$foggyLayer.css({
width: 0,
height: 0
});
setTimeout(function(){
$foggyLayer.css({
width: $(document).width(),
height: $(document).height()
});
}, 0);
});
function showFoggy(){
$foggyLayer.show();
}
function hideFoggy(){
$foggyLayer.hide();
}
var $msgBox = $("#msgBox");
$msgBox.find("._ok").click(function(){
$._xeAdminVar.msgBox.fnOnOK();
});
$msgBox.find("._cancel").click(function(){
$._xeAdminVar.msgBox.fnOnCancel();
});
$msgBox.bind("show", function(){
$._xeAdminVar.msgBox.bVisible = true;
showFoggy();
$._xeAdminVar.msgBox.fnOnShow();
if($msgBox.find('input').length > 0){
setTimeout(function(){
$msgBox.find('input').focus()
}, 0);
}
});
$msgBox.bind("hide", function(){
$._xeAdminVar.msgBox.bVisible = false;
hideFoggy();
$._xeAdminVar.msgBox.fnOnHide();
});
$(document.body).on('keydown', function(ev){
if(!$._xeAdminVar.msgBox.bVisible) return;
if(ev.keyCode === 27){
$msgBox.find("._cancel").click();
}
});
$._xeAdminVar.msgBox = {};
function msgBox(htOptions){
// sTitle, sText, fnOnOK, fnOnCancel, bSmall, bAlert, fnOnShow, fnOnHide, bDanger
htOptions = htOptions || {};
var sTitle = htOptions.sTitle || "";
var sText = htOptions.sText || "";
var bDanger = htOptions.bDanger || false;
$msgBox.find("._title") .html(sTitle);
$msgBox.find("._text").html(sText);
if(sText === ""){
$msgBox.addClass('_nobody');
}else{
$msgBox.removeClass('_nobody');
}
var $confirmBtn = $msgBox.find('._ok');
if(bDanger){
$confirmBtn.removeClass('x_btn-inverse');
$confirmBtn.addClass('x_btn-danger');
}else{
$confirmBtn.removeClass('x_btn-danger');
$confirmBtn.addClass('x_btn-inverse');
}
// #msgBox._small {width:400px;margin-left:-200px}
// #msgBox._type_alert _cancel{display:none}
if(htOptions.bSmall){
$msgBox.addClass("_small");
}else{
$msgBox.removeClass("_small");
}
if(htOptions.bAlert){
$msgBox.addClass("_type_alert");
}else{
$msgBox.removeClass("_type_alert");
}
$._xeAdminVar.msgBox = {
fnOnOK : function(){
if(typeof htOptions.fnOnOK === "function"){
if(htOptions.fnOnOK()) return;
}
$msgBox.hide();
},
fnOnCancel : function(){
if(typeof htOptions.fnOnCancel === "function") htOptions.fnOnCancel();
$msgBox.hide();
},
fnOnShow : function(){
if(typeof htOptions.fnOnShow === "function") htOptions.fnOnShow();
},
fnOnHide : function(){
if(typeof htOptions.fnOnHide === "function") htOptions.fnOnHide();
}
};
$msgBox.show();
}
function alertDialog(htOptions){
htOptions = htOptions || {};
htOptions.bAlert = true;
msgBox(htOptions);
}
function confirmDialog(htOptions){
htOptions = htOptions || {};
htOptions.bAlert = false;
msgBox(htOptions);
}
$('#download,#downloadLayout,#downloadSkin').on('click', '._install_this', function(ev){
var $item = $(this).closest('.item');