rhymix/modules/menu/tpl/sitemap.html
2012-09-19 06:11:04 +00:00

534 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<load target="./css/themes/classic/style.css" />
<load target="./js/_lib/jquery.cookie.js" />
<load target="./js/_lib/jquery.hotkeys.js" />
<load target="./js/jquery.jstree.js" />
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<div class="x_page-header">
<h1>{$lang->menu_gnb_sub['siteMap']}</h1>
</div>
<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
<p>{$XE_VALIDATOR_MESSAGE}</p>
</div>
<div id="site">
<div class="col map">
<section class="mapi" id="siteMapTree">
<script id="tmpl_menuTree" type="text/x-jquery-tmpl">
<ul>
{{html Nodes}}
</ul>
</script>
<script id="tmpl_menuTreeNode" type="text/x-jquery-tmpl">
<li id="${MenuId}">
<a href="#">${MenuTitle}</a>
<span class="side">
<button data-toggle="#add">메뉴추가</button>
<button data-toggle="#info">속성편집</button>
</span>
{{html SubTree}}
</li>
</script>
</section>
<div class="x_btn-group" style="margin:15px 0;padding:10px 0;border-top:1px solid #ccc;text-align:right">
<button type="button" class="x_btn x_btn-small x_btn-inverse"><i class="x_icon-plus x_icon-white"></i> 사이트맵 추가</button>
</div>
</div>
<div class="col" id="add_root">
<section>
<h1><a href="#" target="_blank">{사이트맵 이름}</a></h1>
<ul class="nav">
<li><a href="#add" data-show="#add">메뉴 추가 <i class="x_icon-circle-arrow-right"></i></a></li>
<li><button type="button" disabled>붙여넣기</button></li>
<li><button type="button">삭제</button></li>
</ul>
</section>
<button type="button" class="x_close" data-hide="#add_root">&times;</button>
</div>
<div class="col" id="properties">
<section>
<h1><a href="#" target="_blank">{메뉴 이름}</a></h1>
<ul>
<li><strong>메뉴 ID</strong>: idx0</li>
<li><strong>메뉴 타입</strong>: 문서 페이지</li>
<li class="add"><a href="#add" data-show="#add">메뉴 추가 <i class="x_icon-circle-arrow-right"></i></a></li>
<li><button type="button">잘라내기</button></li>
<li><button type="button">복사</button></li>
<li><button type="button" disabled>붙여넣기</button></li>
<li><button type="button" onClick="confirm('메뉴를 삭제하면 콘텐츠도 삭제됩니다. 정말 삭제하시겠습니까?')">삭제</button></li>
<li class="default"><a href="#default" data-show="#default">기본 설정 <i class="x_icon-circle-arrow-right"></i></a></li>
<li><a href="#imgbtn" data-show="#imgbtn">이미지 버튼 <i class="x_icon-circle-arrow-right"></i></a></li>
<li><a href="#design" data-show="#design">디자인 <i class="x_icon-circle-arrow-right"></i></a></li>
<li><a href="#auth" data-show="#auth">권한 <i class="x_icon-circle-arrow-right"></i></a></li>
<li><a href="#details" data-show="#details">상세 설정 <i class="x_icon-circle-arrow-right"></i></a></li>
</ul>
</section>
<button type="button" class="x_close" data-hide="#properties">&times;</button>
</div>
<div class="col" id="add">
<section>
<h1>메뉴 추가</h1>
<ul class="nav">
<li><a href="#add_page" data-show="#add_page" data-param='{ "t" : "value of t" }'>문서 페이지 <i class="x_icon-circle-arrow-right"></i></a></li>
<li><a href="#add_page" data-show="#add_page">위젯 페이지 <i class="x_icon-circle-arrow-right"></i></a></li>
<li><a href="#add_page" data-show="#add_page">게시판 <i class="x_icon-circle-arrow-right"></i></a></li>
<li><a href="#add_url" data-show="#add_url">URL 링크 <i class="x_icon-circle-arrow-right"></i></a></li>
</ul>
<div class="x_btn-group" style="margin:0;padding:10px 0;text-align:right">
<a href="#download" class="x_btn x_btn-small x_btn-inverse" data-show="#download"><i class="x_icon-plus x_icon-white"></i> 다른 메뉴타입설치</a>
</div>
</section>
<button type="button" class="x_close" data-hide="#add">&times;</button>
</div>
<div class="col" id="add_page">
<fieldset>
<h1>{문서 페이지}</h1>
<ul>
<li>
<label for="menuName1">메뉴이름(브라우저 제목)</label>
<input id="menuName1" type="text" required />
</li>
<li>
<label for="menuId">메뉴 아이디 <a href="#help_menuId" class="x_icon-question-sign" data-toggle="#help_menuId">?</a></label>
<div id="help_menuId" class="x_alert x_alert-info" style="display:none;width:169px">
<button type="button" class="x_close" data-hide="#help_menuId">×</button>
<p>페이지 URL로 사용. URL을 사용할 필요가 없다면 생략 가능. 메뉴 생성 후 [속성&gt;일반]에서 수정 가능.</p>
</div>
<input id="menuId" type="text" required placeholder="생략시 임의값 사용" />
</li>
</ul>
<div class="x_btn-group" style="margin:0;padding:10px 0;border-top:1px solid #ccc;text-align:right">
<button type="button" class="x_btn x_btn-small x_btn-primary">확인</button>
</div>
</fieldset>
<button type="button" class="x_close" data-hide="#add_page">&times;</button>
</div>
<div class="col" id="add_url">
<fieldset>
<h1>URL 링크</h1>
<ul>
<li>
<label for="menuName2">메뉴이름(브라우저 제목)</label>
<input id="menuName2" type="text" required />
</li>
<li>
<div class="x_tabbable">
<ul class="x_nav x_nav-tabs">
<li class="x_active"><a href="#linkUrl">URL 링크</a></li>
<li><a href="#linkMenu">메뉴 링크</a></li>
</ul>
<div class="x_tabcontent">
<div class="x_tab-pane x_active" id="linkUrl">
<input type="text" required title="URL 링크" />
</div>
<div class="x_tab-pane" id="linkMenu">
<input type="text" required title="메뉴 링크" disabled placeholder="메뉴를 선택하면 자동 입력됨" />
</div>
</div>
</div>
</li>
</ul>
<div class="x_btn-group" style="margin:0;padding:10px 0;border-top:1px solid #ccc;text-align:right">
<button type="button" class="x_btn x_btn-small x_btn-primary">확인</button>
</div>
</fieldset>
<button type="button" class="x_close" data-hide="#add_url">&times;</button>
</div>
<div class="col" id="download">
<section>
<h1>다른 메뉴타입설치</h1>
<div class="list">
<div class="item">
<h2>모듈 이름</h2>
<p>많은 기능과 쉬운 사용법으로 사용자를 도와줄 게시판 모듈입니다. 주요기능 : 목록, 갤러리, 웹진, 블로그, 방명록, 한줄메모, 포인트경매등...</p>
<p>별점 9.7/58 <i>|</i> 최근 업데이트 2012-08-03 14:40 <i>|</i> 전체 다운로드 : 46,184</p>
<a href="#" class="x_icon-download-alt x_icon-white">설치</a>
</div>
<div class="item">
<h2>모듈 이름</h2>
<p>많은 기능과 쉬운 사용법으로 사용자를 도와줄 게시판 모듈입니다. 주요기능 : 목록, 갤러리, 웹진, 블로그, 방명록, 한줄메모, 포인트경매등...</p>
<p>별점 9.7/58 <i>|</i> 최근 업데이트 2012-08-03 14:40 <i>|</i> 전체 다운로드 : 46,184</p>
<a href="#" class="x_icon-download-alt x_icon-white">설치</a>
</div>
<div class="item">
<h2>모듈 이름</h2>
<p>많은 기능과 쉬운 사용법으로 사용자를 도와줄 게시판 모듈입니다. 주요기능 : 목록, 갤러리, 웹진, 블로그, 방명록, 한줄메모, 포인트경매등...</p>
<p>별점 9.7/58 <i>|</i> 최근 업데이트 2012-08-03 14:40 <i>|</i> 전체 다운로드 : 46,184</p>
<a href="#" class="x_icon-download-alt x_icon-white">설치</a>
</div>
<div class="item">
<h2>모듈 이름</h2>
<p>많은 기능과 쉬운 사용법으로 사용자를 도와줄 게시판 모듈입니다. 주요기능 : 목록, 갤러리, 웹진, 블로그, 방명록, 한줄메모, 포인트경매등...</p>
<p>별점 9.7/58 <i>|</i> 최근 업데이트 2012-08-03 14:40 <i>|</i> 전체 다운로드 : 46,184</p>
<a href="#" class="x_icon-download-alt x_icon-white">설치</a>
</div>
<div class="item">
<h2>모듈 이름</h2>
<p>많은 기능과 쉬운 사용법으로 사용자를 도와줄 게시판 모듈입니다. 주요기능 : 목록, 갤러리, 웹진, 블로그, 방명록, 한줄메모, 포인트경매등...</p>
<p>별점 9.7/58 <i>|</i> 최근 업데이트 2012-08-03 14:40 <i>|</i> 전체 다운로드 : 46,184</p>
<a href="#" class="x_icon-download-alt x_icon-white">설치</a>
</div>
</div>
<div class="x_pagination x_pagination-centered">
<ul>
<li class="x_disabled"><a href="#">&laquo;</a></li>
<li class="x_active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
</div>
</section>
<button type="button" class="x_close" data-hide="#download">&times;</button>
</div>
<div class="col" >
<section>
<h1>메뉴 1</h1>
</section>
</div>
<div class="col" >
<section>
<h1>메뉴 2</h1>
</section>
</div>
<div class="col" >
<section>
<h1>메뉴 3</h1>
</section>
</div>
<div class="col" >
<section>
<h1>메뉴 4</h1>
</section>
</div>
</div>
<style>
/* Site */
#site{position:relative;overflow-x:auto;overflow-y:hidden;white-space:nowrap}
.col{display:inline-block;vertical-align:top;position:relative;white-space:normal;height:100%;min-width:220px;padding:10px 25px 10px 10px;margin:0 4px 0 0;overflow-y:auto;overflow-x:hidden;border:1px solid #ddd}
.col>*>h1{line-height:30px;font-size:16px;border-bottom:2px solid #666;margin:0;color:#333}
.col>*>ul{margin:0;padding:0;list-style:none}
.col>.x_close{position:absolute;top:0;right:0;width:32px;height:32px}
/* .mapi * */
.mapi{margin:0 0 15px 0;min-width:200px;background-color:transparent !important}
.mapi ul{margin:0;padding:0;list-style:none}
.mapi li{padding:0 80px 0 0;white-space:nowrap;position:relative;line-height:30px;border-radius:3px;vertical-align:top}
.mapi li>ul{margin:0}
.mapi a{text-decoration:none}
.mapi>ul{padding:1px}
/* Root */
.mapi>ul>li{margin-top:30px;position:relative}
.mapi>ul>li:before{ content:"";display:block;border-top:1px dashed #ccc;position:relative;top:-15px}
.mapi>ul>li:first-child{margin-top:0}
.mapi>ul>li:first-child:before{ content:normal}
.mapi>ul>li>a{font-weight:bold}
.mapi>ul>li>ul{border-top:2px solid #666;margin-top:7px;padding-top:7px}
/* li>a */
.mapi li>a{border:0 !important; padding:0 8px !important; margin:0 60px 0 0; border-radius:3px; position:relative;z-index:2;height:23px;line-height:23px;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s}
.mapi .x_icon-home{opacity:.5;filter:alpha(opacity=50)}
.mapi .jstree-hovered>.x_icon-home{background-image:url({getUrl('')}common/img/glyphicons-halflings-white.png);opacity:1;filter:alpha(opacity=100)}
/* li>.side */
.mapi .side{position:absolute;z-index:2;top:0;right:0;line-height:0}
.mapi .side>button{border:0;border-radius:3px;width:23px;height:23px;overflow:hidden;font-size:0;line-height:0;text-indent:24px;background:url({getUrl('')}common/img/glyphicons-halflings.png) no-repeat;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s}
.mapi .side>button[data-toggle="#add"]{background-position:4px -91px}
.mapi .side>button[data-toggle="#info"]{background-position:-428px 5px}
.mapi .side>button:hover,
.mapi .side>button:focus{background-color:#333;background-image:url({getUrl('')}common/img/glyphicons-halflings-white.png)}
/* Plugin style override */
.mapi a>.jstree-icon{display:none}
/* Nav */
.col .nav li{border-bottom:1px solid #ddd;position:relative;white-space:nowrap}
.col .nav li:first-child{border-top:0}
.col .nav li>a,
.col .nav li>button{text-align:left;color:#000;background-color:transparent;border:0;display:block;padding:5px 15px 5px 8px;color:#333;text-decoration:none;background:#fff;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s}
.col .nav li>button{width:100%}
.col .nav li>a:hover,
.col .nav li>a:focus,
.col .nav li.active>a,
.col .nav li>button:hover,
.col .nav li>button:focus{background:#666;color:#fff}
.col .nav li>a>i{position:absolute;top:50%;right:5px;margin:-7px 0 0 0;opacity:.5;filter:alpha(opacity=50)}
.col .nav li>a:hover>i,
.col .nav li>a:focus>i,
.col .nav li.active>a>i{background-image:url({getUrl('')}common/img/glyphicons-halflings-white.png);background-repeat:no-repeat;opacity:1;filter:alpha(opacity=100)}
/* Properties */
#properties ul{margin:15px 0 0 0;padding:0 0 8px 0;border-bottom:1px solid #ddd}
#properties li{position:relative;white-space:nowrap}
#properties li.navitem>a,
#properties li.navitem>button{margin:0 -8px}
#properties li>a,
#properties li>button{position:relative;display:block;padding:0 8px;height:30px;line-height:30px;background-color:transparent;border:0;text-align:left;text-decoration:none}
#properties li>a{padding:0 24px 0 8px}
#properties li.add{border:1px solid #ddd;border-left:0;border-right:0;margin-top:8px;margin-bottom:8px}
#properties li.default{margin:8px 0 0 0;padding-top:8px;border-top:1px solid #ddd}
#properties li.add>a{height:32px;line-height:32px}
#properties li>button{width:100%}
#properties li>a:hover,
#properties li>button:hover,
#properties li>a:active,
#properties li>button:active,
#properties li>a:focus,
#properties li>button:focus,
#properties li.active>a{background-color:#666;color:#fff}
#properties li>*>i{position:absolute;top:50%;right:5px;margin:-7px 0 0 0;opacity:.5;filter:alpha(opacity=50)}
#properties li>*:hover>i,
#properties li>*:active>i,
#properties li>*:focus>i,
#properties li.active>*>i{background-image:url({getUrl('')}common/img/glyphicons-halflings-white.png);opacity:1;filter:alpha(opacity=100)}
/* Add Page */
#add_page ul{margin:15px 0}
/* Add URL */
#add_url ul{margin:15px 0}
#add_url .clone ul{margin:0}
#add_url .clone li{list-style:none}
#add_url .clone ul ul{padding-left:15px}
#add_url .clone .root{margin-top:15px}
/* Download */
#download.col{max-width:500px}
#download .list{padding:1px 0;border-bottom:1px solid #ccc;}
#download .item{border-top:1px solid #ddd;padding:1px 0;position:relative}
#download .item:first-child{border:0}
#download h2{font-size:14px}
#download a.x_icon-download-alt{width:24px;height:24px;background-color:#94A55C;position:absolute;top:7px;right:0;border-radius:3px;background-position:-90px -19px}
#download a.x_icon-download-alt:hover,
#download a.x_icon-download-alt:focus{background-color:#333}
#download p>i{font-style:normal;color:#ccc}
</style>
<!--[if IE 7]>
<script>
jQuery(function($){
// IE .col width bug fix
$('.col').each(function(){
var $this = $(this);
setTimeout(function(){
var childW = $this.children().width();
$this.width(childW);
},0);
});
});
</script>
<![endif]-->
<script>
//<![CDATA[
function onSiteMapReceived(htData){
var $ = jQuery;
var aMenuList = htData.menuList;
//console.log(aMenuList, aMenuList.length);
//console.log(createTreeMarkup(aMenuList));
$("#siteMapTree").html(createTreeMarkup(aMenuList));
$("#siteMapTree")
// call `.jstree` with the options object
.jstree({
// the `plugins` array allows you to configure the active plugins on this instance
"plugins" : ["themes","html_data","ui","crrm","hotkeys","contextmenu", "dnd"],
//"themes","json_data","ui","crrm","cookies","dnd","search","types","hotkeys","contextmenu"
// each plugin you have included can have its own config object
"core" : { "initially_open" : [ "nhtml_1" ] }
// it makes sense to configure a plugin only if overriding the defaults
})
.bind("create_node.jstree", function (event, data) {
var btns = $("<span>").addClass("side").html('<button data-toggle="#add">메뉴추가</button> <button data-toggle="#info">속성편집</button>');
data.rslt.obj.append(btns);
});
}
var htNodeInfo = {};
// return html
function createTreeMarkup(aNode){
var $ = jQuery;
if(aNode.length == 0){
return "";
}
var sActiveBtn, sNormalBtn, sHoverBtn, sExpand, sLink, aSubNodes, sNodeSrl, sOpenWindow, sParentSrl, nSelected, sText, sURL, sIsStartModule, aSubNode;
// 1: Sitemap node, 2: Menu node
var nNodeType;
var sResult = "";
for(var i=0, nLen=aNode.length; i<nLen; i++){
//console.log(aNode[i]);
// Only sitemap node has menuSrl
if(aNode[i].menuSrl){
nNodeType = 1;
}else{
nNodeType = 2;
}
switch(nNodeType){
/*
list: Array[1]
menuSrl: "59"
title: "welcome_menu"
*/
case 1:
sText = aNode[i].title;
sNodeSrl = aNode[i].menu_srl;
aSubNode = aNode[i].menuItems.list;
break;
/*
active_btn: ""
expand: "N"
hover_btn: ""
href: ""
link: "menu1"
list: Array[1]
node_srl: "60"
normal_btn: ""
open_window: "N"
parent_srl: "0"
selected: 0
text: "menu1"
url: ""
is_start_module: 1 or true
*/
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;
break;
default:
}
htNodeInfo[sNodeSrl] = aNode[i];
htNodeInfo[sNodeSrl].nNodeType = nNodeType;
sSubTree = "";
if(aSubNode && aSubNode.length>0){
sSubTree = createTreeMarkup(aSubNode, aNode[i]);
}
/*
if(sMenuType === "shortcut"){
sText = sText + " ${s}";
}
*/
if(sIsStartModule){
sText = sText + " ${h}";
}
sResult += $.tmpl( "menuTreeNode", {MenuTitle:sText,MenuId:sNodeSrl,SubTree:sSubTree} ).get()[0].outerHTML.replace("${s}", "<i class='icon-share-alt'></i>").replace("${h}", "<i class='x_icon-home' title='Home Page'>HOME</i>");
}
return $.tmpl( "menuTree", {Nodes:sResult} ).get()[0].outerHTML;
}
jQuery(function($){
var _oldhide = $.fn.hide;
$.fn.hide = function(speed, callback) {
$(this).trigger('hide');
return _oldhide.apply(this,arguments);
}
var _oldshow = $.fn.show;
$.fn.show = function(speed, callback) {
$(this).trigger('show');
return _oldshow.apply(this,arguments);
}
//$( "#tmpl_siteMap" ).template( "siteMap" );
$( "#tmpl_menuTree" ).template( "menuTree" );
$( "#tmpl_menuTreeNode" ).template( "menuTreeNode" );
var params = {};
var response_tags = new Array('menuList');
params['menu_srl'] = 0;
$.exec_json("menu.getMenuAdminSiteMap", params, onSiteMapReceived);
//$.jstree._themes = "PATH/TO/FOLDER/";
//$.jstree._themes = "/maserati/modules/menu/tpl/css/themes/";
$.jstree._themes = '{getUrl("")}/modules/menu/tpl/css/themes/';
// Prepare parms
$(document.body).on("click", ".x [data-param]", function(ev){
console.log($(ev.srcElement).attr('data-param'));
$._htMarkupActionParam = $.parseJSON($(ev.srcElement).attr('data-param'));
console.log($._htMarkupActionParam);
return false;
});
// TARGET toggle
$(document.body).on("click", ".x [data-toggle]", function(ev){
$($(ev.srcElement).attr('data-toggle')).toggle();
return false;
});
// TARGET show
$(document.body).on("click", ".x [data-show]", function(ev){
var $target = $($(ev.srcElement).attr('data-show'));
if($target.hasClass("col")){
$target.nextAll().hide();
}
$target.show();
});
// TARGET hide
$(document.body).on("click", ".x [data-hide]", function(ev){
var $target = $($(ev.srcElement).attr('data-hide'));
if($target.hasClass("col")){
$target.nextAll().hide();
}
$target.hide();
});
$('#add_url').bind("show", function(){console.log('show');});
$('#add_url').bind("hide", function(){console.log('hide');});
// Set #site height fix
$(window).resize(function(){
var wHeigh = $(window).height();
$('#site').height(wHeigh - 270).children('.col').height(wHeigh - 315);
}).resize();
// #linkMenu copy and set text to input
setTimeout(function(){
$('.mapi').clone().removeClass().removeAttr('id').addClass('clone').appendTo('#linkMenu').find('li').removeAttr('id').removeAttr('class').find('ins, .side').remove();
$('.clone a').click(function(){
$('#linkMenu>input').val($(this).text());
});
}, 1000);
// Navigation a active/inactive
var $navAnchor = $('a>i.x_icon-circle-arrow-right').parent('a');
$navAnchor.click(function(){
$(this).parent('li').addClass('active').siblings('li').removeClass('active');
});
$('.x_close[data-hide]').click(function(){
var inactiveTarget = $(this).attr('data-hide');
$navAnchor.each(function(){
var href = $(this).attr('href');
if(href == inactiveTarget){
$(this).parent('li').removeClass('active');
}
});
});
});
//]]>
</script>