Commit 1e41f4c8 authored by zhangbo's avatar zhangbo

mobile share

parent b4d1216c
...@@ -113,7 +113,7 @@ ...@@ -113,7 +113,7 @@
'ui/widget/friendlytimespan.js', 'ui/widget/friendlytimespan.js',
'ui/widget/locallist.js', 'ui/widget/locallist.js',
'ui/widget/netdiskfinder.js', 'ui/widget/netdiskfinder.js',
'ui/widget/menutab', 'ui/widget/menutab.js',
/* UI 菜单 */ /* UI 菜单 */
'ui/menu/menu.js', 'ui/menu/menu.js',
......
/**
* Created by zhangbo21 on 14-9-10.
*/
/**
* 开发版本的文件导入
*/
(function() {
var paths = [
/* 依赖库 */
'lib/jquery-2.1.1.js',
'lib/jquery.transit.min.js',
'lib/promise-1.0.0.js',
'lib/fui/dev-lib/jhtmls.min.js',
'lib/fui/dist/fui.all.js',
/* Kity 依赖库 */
'lib/kity/dist/kity.js',
/* 核心代码 */
'src/core/kityminder.js',
'src/core/utils.js',
'src/core/command.js',
'src/core/node.js',
'src/core/module.js',
'src/core/event.js',
'src/core/minder.js',
'src/core/minder.data.compatibility.js',
'src/core/minder.data.js',
'src/core/minder.event.js',
'src/core/minder.module.js',
'src/core/minder.command.js',
'src/core/minder.node.js',
'src/core/minder.select.js',
'src/core/keymap.js',
'src/core/minder.lang.js',
'src/core/minder.defaultoptions.js',
'src/core/minder.preference.js',
'src/core/browser.js',
'src/core/layout.js',
'src/core/connect.js',
'src/core/render.js',
'src/core/theme.js',
'src/core/template.js',
/* 布局 */
'src/layout/default.js',
'src/layout/default.connect.js',
'src/layout/bottom.js',
'src/layout/filetree.js',
/* 皮肤 */
'src/theme/default.js',
'src/theme/snow.js',
'src/theme/fresh.js',
/* 模板 */
'src/template/structure.js',
/* 模块 */
'src/module/node.js',
'src/module/text.js',
'src/module/expand.js',
'src/module/outline.js',
'src/module/geometry.js',
'src/module/progress.js',
'src/module/priority.js',
'src/module/image.js',
'src/module/resource.js',
'src/module/view.js',
'src/module/dragtree.js',
'src/module/keyboard.js',
'src/module/select.js',
'src/module/basestyle.js',
'src/module/font.js',
'src/module/zoom.js',
'src/module/hyperlink.js',
'src/module/arrange.js',
'src/module/paste.js',
'src/module/style.js',
/* 格式支持 */
'src/protocol/plain.js',
'src/protocol/json.js',
'src/protocol/png.js',
'src/protocol/svg.js',
/* UI 基础 */
'ui/ui.js',
'ui/eve.js',
'ui/fuix.js',
// 'ui/fiox.js',
'ui/doc.js',
/* UI 组件 */
// 'ui/widget/commandbutton.js',
// 'ui/widget/commandbuttonset.js',
// 'ui/widget/commandinputmenu.js',
// 'ui/widget/friendlytimespan.js',
// 'ui/widget/locallist.js',
// 'ui/widget/netdiskfinder.js',
'ui/widget/menutab.js',
/* UI 菜单 */
// 'ui/menu/menu.js',
// 'ui/menu/header.js',
/* UI 菜单 - 新建 */
// 'ui/menu/new/new.js',
/* UI 菜单 - 打开 */
// 'ui/menu/open/open.js',
// 'ui/menu/open/recent.js',
// 'ui/menu/open/netdisk.js',
// 'ui/menu/open/local.js',
// 'ui/menu/open/draft.js',
/* UI 菜单 - 保存 */
// 'ui/menu/save/save.js',
// 'ui/menu/save/netdisk.js',
// 'ui/menu/save/download.js',
/* UI 菜单 - 分享 */
// 'ui/menu/share/share.js',
'ui/menu/share/m-share.js',
/* UI Top Bar */
// 'ui/topbar/history.js',
// 'ui/topbar/user.js',
// 'ui/topbar/search.js',
'ui/topbar/m-logo.js',
'ui/topbar/switch-view.js',
'ui/topbar/title.js'
/* UI Ribbon */
// 'ui/ribbon/tabs.js',
/* UI Ribbon「思路」面板 */
// 'ui/ribbon/idea/insert.js',
// 'ui/ribbon/idea/arrange.js',
// 'ui/ribbon/idea/operation.js',
// 'ui/ribbon/idea/attachment.js',
// 'ui/ribbon/idea/link.js',
// 'ui/ribbon/idea/image.js',
// 'ui/ribbon/idea/priority.js',
// 'ui/ribbon/idea/progress.js',
// 'ui/ribbon/idea/resource.js',
/* UI Ribbon「展示」面板 */
// 'ui/ribbon/appearence/template.js',
// 'ui/ribbon/appearence/theme.js',
// 'ui/ribbon/appearence/layout.js',
// 'ui/ribbon/appearence/style.js',
// 'ui/ribbon/appearence/font.js',
// 'ui/ribbon/appearence/color.js',
/* UI Ribbon「视图」面板 */
// 'ui/ribbon/view/level.js'
];
if (typeof(module) === 'object' && module.exports) {
module.exports = paths;
} else if (document) {
while (paths.length) {
/* jshint browser:true */
window.document.write('<script type="text/javascript" src="' + paths.shift() + '"></script>');
}
}
})();
\ No newline at end of file
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
// 'ui/widget/friendlytimespan.js', // 'ui/widget/friendlytimespan.js',
// 'ui/widget/locallist.js', // 'ui/widget/locallist.js',
// 'ui/widget/netdiskfinder.js', // 'ui/widget/netdiskfinder.js',
'ui/widget/menutab', 'ui/widget/menutab.js',
/* UI 菜单 */ /* UI 菜单 */
'ui/menu/menu.js', 'ui/menu/menu.js',
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="title" content="百度脑图(KityMinder)">
<meta name="keyword" content="kityminder,脑图,思维导图,kity,svg,minder,百度,fex,前端,在线">
<meta name="description" content="百度脑图,便捷的脑图编辑工具。让您在线上直接创建、保存并分享你的思路。">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>百度脑图 - 便捷的思维导图工具</title>
<script src="import.mobile.share.js" charset="utf-8"></script>
<script src="kityminder.config.js" charset="utf-8"></script>
<script src="lang/zh-cn/zh-cn.js" charset="utf-8"></script>
<link href="ui/theme/default/css/default.all.css" type="text/css" rel="stylesheet" />
<link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
<link href="favicon.ico" type="image/x-icon" rel="apple-touch-icon-precomposed">
</head>
<body>
<div id="content-wrapper" class="shared-content">
<div id="panel"><div id="m-logo" class="m-logo"></div></div>
<div id="kityminder" onselectstart="return false"></div>
<div id="km-list-view" onselectstart="return false"></div>
</div>
</body>
<script>
/* global km:true, ZeroClipboard:true, zip:true */
/* jshint browser:true */
$(function() {
// create km instance
km = KM.getMinder('kityminder', window.KITYMINDER_CONFIG);
// init ui for instance
km.initUI();
// New Version Notify
$(function() {
var lastVersion = localStorage.lastKMVersion;
$('#km-version').text( 'v' + KM.version );
if (lastVersion != KM.version) {
$( '#km-version' ).addClass( 'new-version' );
localStorage.lastKMVersion = KM.version;
}
});
});
</script>
<!--Baidu Tongji Code-->
<script type="text/javascript">
if (document.domain == 'naotu.baidu.com') {
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F0703917f224067c887f3664479a03887' type='text/javascript'%3E%3C/script%3E"));
}
</script>
</html>
\ No newline at end of file
...@@ -119,7 +119,7 @@ var MinderNode = KityMinder.MinderNode = kity.createClass('MinderNode', { ...@@ -119,7 +119,7 @@ var MinderNode = KityMinder.MinderNode = kity.createClass('MinderNode', {
* @return {String} * @return {String}
*/ */
getText: function(str2arr) { getText: function(str2arr) {
var text = this.getData('text'); var text = this.getData('text') || '';
if(str2arr){ if(str2arr){
text = text.split('\n'); text = text.split('\n');
......
...@@ -57,6 +57,8 @@ var ViewDragger = kity.createClass("ViewDragger", { ...@@ -57,6 +57,8 @@ var ViewDragger = kity.createClass("ViewDragger", {
.on('normal.mousemove normal.touchmove ' + .on('normal.mousemove normal.touchmove ' +
'readonly.touchmove readonly.mousemove ' + 'readonly.touchmove readonly.mousemove ' +
'inputready.mousemove inputready.touchmove', function(e) { 'inputready.mousemove inputready.touchmove', function(e) {
if(typeof(e) == 'touchmove')
e.preventDefault(); // 阻止浏览器的后退事件
if (!isTempDrag) return; if (!isTempDrag) return;
var offset = kity.Vector.fromPoints(lastPosition, e.getPosition()); var offset = kity.Vector.fromPoints(lastPosition, e.getPosition());
if (offset.length() > 3) this.setStatus('hand'); if (offset.length() > 3) this.setStatus('hand');
......
/**
* @fileOverview
*
* 查看分享文件
*
* @author: techird
* @copyright: Baidu FEX, 2014
*/
KityMinder.registerUI('menu/share/m-share', function (minder) {
var $doc = minder.getUI('doc');
function loadShareDoc() {
var pattern = /(?:shareId|share_id)=(\w+)([&#]|$)/;
var match = pattern.exec(window.location) || pattern.exec(document.referrer);
if (!match) return Promise.resolve(null);
var shareId = match[1];
function renderShareData(data) {
if (data.error) {
window.alert(data.error);
window.location.href = 'index.html';
return;
}
var content = data.shareMinder.data;
return $doc.load({
source: 'share',
content: content,
protocol: 'json',
saved: true,
ownerId: data.uid,
ownerName: data.uname
}).then(function(doc) {
var $title = minder.getUI('topbar/title');
$title.setTitle('[分享的] ' + $title.getTitle());
});
}
return $.pajax({
url: 'http://naotu.baidu.com/share.php', //'http://naotu.baidu.com/mongo.php',
data: {
action: 'find',
id: shareId
},
dataType: 'json'
}).then(renderShareData)['catch'](function(e) {
window.alert('请求分享文件失败,请重试!');
}).then(function() {
$(minder.getRenderTarget()).removeClass('loading');
minder.execCommand('hand');
});
}
minder.on('dblclick', function() {
minder.execCommand('camera', minder.getRoot(), 500);
});
return {
ready: loadShareDoc()
};
});
\ No newline at end of file
...@@ -11,8 +11,6 @@ KityMinder.registerUI('menu/share/view', function (minder) { ...@@ -11,8 +11,6 @@ KityMinder.registerUI('menu/share/view', function (minder) {
var $save = minder.getUI('menu/save/save'); var $save = minder.getUI('menu/save/save');
var $doc = minder.getUI('doc'); var $doc = minder.getUI('doc');
$menu.$tabs.select(0);
$save.$tabs.select(0);
function loadShareDoc() { function loadShareDoc() {
...@@ -50,7 +48,7 @@ KityMinder.registerUI('menu/share/view', function (minder) { ...@@ -50,7 +48,7 @@ KityMinder.registerUI('menu/share/view', function (minder) {
return $.pajax({ return $.pajax({
url: 'http://127.0.0.1/naotu/mongo.php', //'http://naotu.baidu.com/mongo.php', url: 'http://naotu.baidu.com/share.php', //'http://naotu.baidu.com/mongo.php',
data: { data: {
action: 'find', action: 'find',
...@@ -66,9 +64,12 @@ KityMinder.registerUI('menu/share/view', function (minder) { ...@@ -66,9 +64,12 @@ KityMinder.registerUI('menu/share/view', function (minder) {
}).then(function() { }).then(function() {
$(minder.getRenderTarget()).removeClass('loading'); $(minder.getRenderTarget()).removeClass('loading');
minder.execCommand('hand');
}); });
} }
loadShareDoc(); return {
ready: loadShareDoc()
};
}); });
\ No newline at end of file
...@@ -165,7 +165,6 @@ ...@@ -165,7 +165,6 @@
} }
} }
#public-share { #public-share {
p { p {
position: relative; position: relative;
...@@ -190,4 +189,177 @@ ...@@ -190,4 +189,177 @@
.share-body { .share-body {
display: none; display: none;
} }
}
.shared-content {
.left, .right {
float: left;
}
.m-logo {
float: left;
margin-top: 4px;
margin-left: 8px;
}
.switch-view {
float: right;
font-size: 14px;
height: 40px;
line-height: 40px;
margin-right: 8px;
text-align: center;
font-weight: normal;
color: #ffffff;
}
.cur-list, .cur-root {
position: relative;
margin: 0;
padding: 0;
}
.cur-list {
list-style-type: none;
overflow-y: scroll;
}
.cur-list li, .cur-root {
line-height: 50px;
height: 50px;
padding-left: 25px;
border-bottom: 1px solid #ddd;
}
.cur-root {
background-color: #fc8383;
font-size: 16px;
padding-left: 15px;
border-bottom: none;
position: absolute;
width: 100%;
}
.priority {
height: 20px;
width: 20px;
background: url(../images/iconpriority.png) repeat-x;
float: left;
margin: 15px 15px auto 0;
}
.priority-1 {
background-position: 0 0;
}
.priority-2 {
background-position: -20px 0;
}
.priority-3 {
background-position: -40px 0;
}
.priority-4 {
background-position: -60px 0;
}
.priority-5 {
background-position: -80px 0;
}
.priority-6 {
background-position: -100px 0;
}
.priority-7 {
background-position: -120px 0;
}
.priority-8 {
background-position: -140px 0;
}
.priority-9 {
background-position: -160px 0;
}
.priority-0 {
background-position: -180px 0;
}
.progress {
height: 20px;
width: 20px;
background: url(../images/iconprogress.png) repeat-x;
float: left;
margin: 15px 15px auto 0;
}
.progress-1 {
background-position: 0 0;
}
.progress-2 {
background-position: -20px 0;
}
.progress-3 {
background-position: -40px 0;
}
.progress-4 {
background-position: -60px 0;
}
.progress-5 {
background-position: -80px 0;
}
.progress-6 {
background-position: -100px 0;
}
.progress-7 {
background-position: -120px 0;
}
.progress-8 {
background-position: -140px 0;
}
.progress-9 {
background-position: -160px 0;
}
.progress-0 {
background-position: -180px 0;
}
.resource {
padding: 3px 5px;
border-radius: 2px;
font-size: 12px;
color: rgb(77, 65, 0);
vertical-align: middle;
margin-left: 8px;
}
.hyperlink {
display: inline-block;
/* float: left; */
width: 30px;
height: 20px;
margin-left: 15px;
padding: 0;
background: url(../images/icons.png) no-repeat 0 -80px;
background-size: 20px;
vertical-align: middle;
}
.next-level {
width: 32px;
height: 50px;
margin-right: 16px;
float: right;
background: url(../images/next-level.png) no-repeat center center;
}
#km-list-view {
.dock(40px, 0, 0, 0);
overflow: visible;
}
.cur-list {
.dock(50px, 0, 0, 0);
}
.back {
width: 32px;
height: 32px;
background: url(../images/prev-level.png) no-repeat center center;
display: none;
}
.clickable:hover {
background-color: #eee;
}
.clickable:active {
background-color: #eee;
}
#km-list-view > div {
.dock;
}
.text {
width:12em;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow:hidden;
vertical-align: middle;
}
} }
\ No newline at end of file
...@@ -2823,6 +2823,192 @@ div.right { ...@@ -2823,6 +2823,192 @@ div.right {
#public-share .share-body { #public-share .share-body {
display: none; display: none;
} }
.shared-content .left,
.shared-content .right {
float: left;
}
.shared-content .m-logo {
float: left;
margin-top: 4px;
margin-left: 8px;
}
.shared-content .switch-view {
float: right;
font-size: 14px;
height: 40px;
line-height: 40px;
margin-right: 8px;
text-align: center;
font-weight: normal;
color: #ffffff;
}
.shared-content .cur-list,
.shared-content .cur-root {
position: relative;
margin: 0;
padding: 0;
}
.shared-content .cur-list {
list-style-type: none;
overflow-y: scroll;
}
.shared-content .cur-list li,
.shared-content .cur-root {
line-height: 50px;
height: 50px;
padding-left: 25px;
border-bottom: 1px solid #ddd;
}
.shared-content .cur-root {
background-color: #fc8383;
font-size: 16px;
padding-left: 15px;
border-bottom: none;
position: absolute;
width: 100%;
}
.shared-content .priority {
height: 20px;
width: 20px;
background: url(../images/iconpriority.png) repeat-x;
float: left;
margin: 15px 15px auto 0;
}
.shared-content .priority-1 {
background-position: 0 0;
}
.shared-content .priority-2 {
background-position: -20px 0;
}
.shared-content .priority-3 {
background-position: -40px 0;
}
.shared-content .priority-4 {
background-position: -60px 0;
}
.shared-content .priority-5 {
background-position: -80px 0;
}
.shared-content .priority-6 {
background-position: -100px 0;
}
.shared-content .priority-7 {
background-position: -120px 0;
}
.shared-content .priority-8 {
background-position: -140px 0;
}
.shared-content .priority-9 {
background-position: -160px 0;
}
.shared-content .priority-0 {
background-position: -180px 0;
}
.shared-content .progress {
height: 20px;
width: 20px;
background: url(../images/iconprogress.png) repeat-x;
float: left;
margin: 15px 15px auto 0;
}
.shared-content .progress-1 {
background-position: 0 0;
}
.shared-content .progress-2 {
background-position: -20px 0;
}
.shared-content .progress-3 {
background-position: -40px 0;
}
.shared-content .progress-4 {
background-position: -60px 0;
}
.shared-content .progress-5 {
background-position: -80px 0;
}
.shared-content .progress-6 {
background-position: -100px 0;
}
.shared-content .progress-7 {
background-position: -120px 0;
}
.shared-content .progress-8 {
background-position: -140px 0;
}
.shared-content .progress-9 {
background-position: -160px 0;
}
.shared-content .progress-0 {
background-position: -180px 0;
}
.shared-content .resource {
padding: 3px 5px;
border-radius: 2px;
font-size: 12px;
color: #4d4100;
vertical-align: middle;
margin-left: 8px;
}
.shared-content .hyperlink {
display: inline-block;
/* float: left; */
width: 30px;
height: 20px;
margin-left: 15px;
padding: 0;
background: url(../images/icons.png) no-repeat 0 -80px;
background-size: 20px;
vertical-align: middle;
}
.shared-content .next-level {
width: 32px;
height: 50px;
margin-right: 16px;
float: right;
background: url(../images/next-level.png) no-repeat center center;
}
.shared-content #km-list-view {
position: absolute;
top: 40px;
right: 0;
bottom: 0;
left: 0;
overflow: visible;
}
.shared-content .cur-list {
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 0;
}
.shared-content .back {
width: 32px;
height: 32px;
background: url(../images/prev-level.png) no-repeat center center;
display: none;
}
.shared-content .clickable:hover {
background-color: #eee;
}
.shared-content .clickable:active {
background-color: #eee;
}
.shared-content #km-list-view > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.shared-content .text {
width: 12em;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
vertical-align: middle;
}
.command-button .fui-icon { .command-button .fui-icon {
background: url(../images/icons.png) no-repeat; background: url(../images/icons.png) no-repeat;
background-position: 0 20px; background-position: 0 20px;
......
This diff is collapsed.
/**
* @fileOverview
*
* 移动端分享页面加载 logo 功能
*
* @author: zhangbobell
* @copyright: Baidu FEX, 2014
*/
KityMinder.registerUI('topbar/m-logo', function(minder) {
var $logoSvg = $('<svg id="km-cat" viewBox="0 0 1200 1200" width="32px" height="32px"><g id="cat-face"><path d="M1066.769,368.482L1119.5,80L830,131.611C760.552,97.29,682.35,77.999,599.641,77.999c-82.424,0-160.371,19.161-229.641,53.26L81,81l50.769,289l0,0c-33.792,69.019-52.77,146.612-52.77,228.641c0,287.542,233.099,520.642,520.642,520.642s520.642-233.099,520.642-520.642C1120.282,516.011,1101.028,437.88,1066.769,368.482z"/></g><g id="cat-eye"><path style="fill:#FFFFFF;" d="M920.255,371C794.746,371,693,472.746,693,598.255s101.746,227.255,227.255,227.255s227.255-101.746,227.255-227.255S1045.765,371,920.255,371z M920,746c-80.081,0-145-64.919-145-145s64.919-145,145-145s145,64.919,145,145S1000.081,746,920,746z"/><path style="fill:#FFFFFF;" d="M276.255,371C150.746,371,49,472.746,49,598.255s101.746,227.255,227.255,227.255s227.255-101.746,227.255-227.255S401.765,371,276.255,371z M276,745c-80.081,0-145-64.919-145-145s64.919-145,145-145s145,64.919,145,145S356.081,745,276,745z"/></g></svg>');
var $mLogo = $logoSvg.appendTo('#m-logo');
return $mLogo;
});
\ No newline at end of file
/**
* @fileOverview
*
* 移动端分享页面转换视图按钮
*
* @author: zhangbobell
* @copyright: Baidu FEX, 2014
*/
KityMinder.registerUI('topbar/switch-view', function(minder) {
var $switch = $('<span class="switch-view" id="switch-view">转换</span>').appendTo('#panel');
$('<div class="back"></div>').appendTo('#m-logo');
var treeData;
var $curView=$('<div>');
var $preView=$('<div>');
minder.on('uiready', function() {
var shareView = minder.getUI('menu/share/m-share');
shareView.ready.then(function(){
treeData = addParentPointer(minder);
$curView = renderNodeData(treeData, minder, $curView);
$preView = renderNodeData(treeData, minder, $preView);
$('#km-list-view').append($curView);
$('#km-list-view').append($preView);
$preView.css('x', '100%');
$('#km-list-view').css('display', 'none');
});
});
var isListView = false; // mutex : 当前是否是列表视图
$switch.on('click', function(){
if (!isListView ){
$('#kityminder').css('display', 'none');
$('#km-list-view').css('display', 'block');
isListView = true;
} else {
$('#km-list-view').css('display', 'none');
$('#kityminder').css('display', 'block');
isListView = false;
}
});
$('#km-list-view').delegate('li', 'click', function(){
var preViewData = $(this).data();
renderNodeData(preViewData, minder, $preView);
if (preViewData.children) {
$('#km-list-view').transition({
x: '-100%',
duration: 200,
easing: 'ease',
complete: function(){
var $temp = $curView;
$curView = $preView;
$preView = $temp;
}
});
if (preViewData.parent){
$('.back').css('display', 'block');
$('#km-cat').css('display', 'none');
}
}
});
$('.back').on('click', function(){
var parentViewData = $('.cur-root').data();
$preView.css('x', '0');
$('#km-list-view').transition({
x: '0',
duration: 200,
easing: 'ease',
complete: function(){
var $temp = $curView;
$curView = $preView;
$preView = $temp;
}
});
if (!parentViewData.parent){
$('.back').css('display', 'none');
$('#km-cat').css('display', 'block');
}
})
return $switch;
});
/**
* addParentPointer - 给 minder 的 json 数据增加 parent 指针
* @param minder - kityminder 实例
* @returns {*} - 增加了 parent 指针之后的 json 结构
*/
function addParentPointer(minder){
var root = minder.exportJson();
return AddParent(root);
}
/**
* AddParent - 递归的增加 parent 指针
* @param root - 传入的根节点
* @returns {*}
*/
function AddParent(root){
if (root.children){
$.each(root.children, function(idx, ele){
ele.parent = root;
AddParent(ele);
});
}
return root;
}
/**
* creadNodeData - 根据 json 结构创建好视图的 jQuery 对象
* @param node
* @param minder
* @returns {*} - 创建好的 jQuery 对象
*/
function renderNodeData(node, minder, $target){
var $curRoot = createRootNode(node, minder);
var $curList = $('<ul class="cur-list">');
if (node.children){
$.each(node.children, function(idx, ele){
var $listNode = createListNode(ele, minder);
$curList.append($listNode);
});
}
return $target.html($curRoot.add($curList));
}
/**
* createRootNode - 创建当前根节点对应的 jQuery 对象
* @param node 节点的 jQuery 对象
* @param minder kityminder 实例
* @returns {*|jQuery|HTMLElement} 当前根节点的 jQuery 对象
*/
function createRootNode(node, minder){
var $root = $('<h1 class="cur-root">');
$root.append(getNodeHtml(node, minder));
if (node.parent){
$root.data(node.parent);
}
return $root;
}
/**
* createListNode - 创建子节点对应的 jQuery 对象
* @param node 节点的 json 对象
* @param minder kityminder 实例
* @returns {*|jQuery|HTMLElement} 子节点的 jQuery 对象
*/
function createListNode(node, minder){
var $list = $('<li>');
$list.append(getNodeHtml(node, minder));
// 处理子节点
if (node.children){
$list.addClass('clickable');
$list.append('<span class="next-level"></span>');
$list.data(node);
}
return $list;
}
/**
* getNodeHtml - 根据传入节点的 json 对象创建该节点的 html 数据
* @param node 节点的 json 对象
* @param minder kityminder 实例
* @returns {string} 返回的 html 字符串
*/
function getNodeHtml (node, minder){
var data = node.data;
var html = '';
// 处理优先级
if (data.priority){
html += '<div class="priority priority-' + data.priority + '"></div>'
}
// 处理进度
if (data.progress){
html += '<div class="progress progress-' + data.progress + '"></div>'
}
// 处理文字
html += '<span class="text">' + (data.text || '') + '</span>';
// 处理超链接
if (data.hyperlink) {
html +='<a class="hyperlink" href="'+ data.hyperlink +'" target="_blank"></a>';
}
// 处理资源
if (data.resource){
$.each(data.resource, function(idx, ele){
html += '<span class="resource" style="background-color: '+ minder.getResourceColor(ele).toRGB() +'">' + ele + '</span>' + ' ';
});
}
return html;
}
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</head> </head>
<body> <body>
<div id="content-wrapper"> <div id="content-wrapper" class="shared-content">
<div id="panel"></div> <div id="panel"></div>
<div id="kityminder" onselectstart="return false"> <div id="kityminder" onselectstart="return false">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment