Skip to content

K
kityminder-core
Commit 00f399e3 authored by techird's avatar techird
Browse files
Options

merge help-dialog

parents 79881238 40e0e99b
Hide whitespace changes
Inline Side-by-side
Showing with 330 additions and 76 deletions
.gitignore
View file @ 00f399e3
.idea .idea
.DS_Store
*.sublime-project *.sublime-project
*.sublime-workspace *.sublime-workspace
node_modules/ node_modules/
\ No newline at end of file
dialogs/help/help.js
View file @ 00f399e3
( function () { (function() {
var helpContent = '<div class="help-content" style="padding:20px;width:360px;">';
// 用于存储整个快捷菜单的机构信息的字符串
helpContent += '<h2>基本操作</h2>'; var helpInfo = '';
helpContent += '<p>编辑脑图的时候，最基本的操作是插入节点、编辑节点、删除节点、设置节点样式</p>';
helpContent += '<ul>'; $.ajax({
helpContent += ' <li><h3>插入子节点：</h3>在选中的节点中按 Tab 键</li>'; type: 'get',
helpContent += ' <li><h3>插入同级节点：</h3>在选中的节点中按 Enter/Return 键</li>'; dataType: 'text',
helpContent += ' <li><h3>编辑节点：</h3>选中节点直接输入文字、双击节点或选中节点按F2键均可进入编辑模式</li>'; url: 'dialogs/help/operation.txt',
helpContent += ' <li><h3>设置节点文本格式：</h3>你可以选中一个或多个节点后，在工具栏中改变选中节点的文本格式。也可以使用快捷键来使用这些功能：撤销（Ctrl+Z）、重做（Ctrl+Y）、加粗（Ctrl+B）、斜体（Ctrl+I）</li>'; success: function(text) {
helpContent += ' <li><h3>添加标签：</h3>选中节点，点击工具栏上的‘添加标签’按钮可以为节点添加/删除标签</li>'; createHelpHtml(text);
helpContent += ' <li><h3>添加/删除超链接：</h3>选中节点，点击工具栏上的‘添加超链接’/‘删除超链接’按钮可以为节点添加、删除超链接</li>'; }
helpContent += '</ul>'; });
helpContent += '<h2>导入导出</h2>'; function createHelpHtml(text) {
helpContent += '<p>您可以导出你的脑图到本地，方法是点击工具栏上的导出按钮，然后选择要导出的格式。下面列出支持的格式列表：</p>'; var txt = text;
helpContent += '<ul>';
helpContent += ' <li><h3>大纲文本：</h3>导出成以制表符界定大纲的文本，此格式可以被导入</li>'; // 用于存储获取的某一行数据
helpContent += ' <li><h3>KityMinder格式：</h3>KityMinder自身的保存格式（JSON），此格式可以被导入</li>'; var line = '';
helpContent += ' <li><h3>PNG 图片：</h3>导出成 PNG 位图格式，此格式不可被导入</li>'; // 用于临时存储处理一条line字符串之后的结果
helpContent += ' <li><h3>SVG 矢量图：</h3>导出成 SVG 矢量图格式，可以被矢量工具二次加工，此格式不可被导入</li>'; var result = '';
helpContent += '</ul>'; // 判断是否为第一个份菜单，用于控制div.shortcuts-table标签前是否添加</div>。
var isFirstTable = true;
helpContent += '<p>导出的文件可以直接拖放到 KityMinder 上直接打开</p>'; // // 判断是否为每份菜单的第一项
// var isFirstTr = true;
helpContent += '<h2>云盘功能</h2>';
helpContent += '<p>使用百度账号登录后，您可以使用云存储和分享功能</p>'; // 正则表达式 start
helpContent += '<ul>'; // 1、匹配菜单分类标题
helpContent += ' <li><h3>登录：</h3>点击登录按钮</li>'; var reg_thead = /^##/g;
helpContent += ' <li><h3>保存(CTRL+S)：</h3>点击保存按钮，将会把文件保存到你的云盘里</li>'; // 2、匹配菜单项
helpContent += ' <li><h3>分享(CTRL+SHIFT+S)：</h3>点击分享按钮，会生成分享链接，该链接可以打开您分享的脑图</li>'; var reg_tcell = /\:/g;
helpContent += ' <li><h3>打开：</h3>点击您账号的下拉按钮，会列出最近保存的脑图文件，点击即可打开</li>'; // 3、匹配键值
helpContent += '</ul>'; var reg_key = /\`(.+?)\`/g;
// var 4、匹配快捷键组合选择
helpContent += '<h2>视野导航</h2>'; var reg_opt = /or|\+|,/gi;
helpContent += '<p>视野导航包括以下几个功能：</p>'; // 菜单分类标题1
helpContent += '<ul>'; var temp = '';
helpContent += ' <li><h3>视野拖动：</h3>根节点未被选中的情况下，拖动根节点可以拖动视野；或者使用空格键切换拖动状态</li>'; var xmlhttp;
helpContent += ' <li><h3>视野缩放：</h3>点击工具栏中的“放大”和“缩小”按钮可以缩放视野，或者按着 Ctrl 键使用滚轮缩放</li>'; var arr, keys, info;
helpContent += ' <li><h3>视野复位：</h3>双击空白处，可以将视野复位</li>';
helpContent += ' <li><h3>展开／收起节点：</h3>选中单个节点，点击工具栏中的“展开节点”和“收起节点”按钮可以展开／收起节点下的全部子节点</li>';
helpContent += '</ul>'; // help-container start
helpInfo += '<div class="help-container' + (kity.Browser.mac ? ' mac' : '') + '">';
helpContent += '</div>'; // help-header start
helpInfo += '<h2 class="help-header">操作说明</h2>';
KM.registerWidget( 'help', { // help-header end
tpl: helpContent, // help-article start
initContent: function ( km ) { helpInfo += '<div class="help-article row">';
var lang = km.getLang( 'dialogs.help' ), // 开始读取operation.txt文件信息
html;
if ( lang ) { txt.split('\n').forEach(function(line) {
html = $.parseTmpl( this.tpl, lang ); result = '';
// 如果line以##开头，表明是菜单分类标题
if (reg_thead.test(line)) {
// isFirstTr = true;
// 如果不是第一个分类菜单，那么就需要在添加下一个开始标签之前，为上一个菜单添加结束标签
if (!isFirstTable) {
result += '</table>';
}
// 处理第一个分类菜单后，就需要把标示第一个分类菜单的变量改变
else {
isFirstTable = false;
}
temp = line.substring(line.lastIndexOf(' '));
result += '<table class="shortcuts-table "><tr><td></td><td><span class="shortcuts-thead">' + temp + '</span></td>';
} else if (/\S/.test(line)) {
// else if(reg_tcell.test(line)) {
result += '<tr class="shortcuts-tbody"><td class="shortcuts-group"><div class="right">';
arr = line.split(':');
keys = arr[0];
info = arr[1];
keys = keys.toLowerCase().replace(reg_key, '<span class="shortcuts-key label $1">$1</span>');
result += keys;
result += '</div></td><td class="shortcuts-use">' + info + '</td>';
// 加最后一项的结尾标签
result += '</tr>';
}
// 处理完每一行之后，将result添加到helpInfo之后
helpInfo += result;
result = '';
});
// 要在处理完最后一个分类菜单后，为这个菜单添加结束标签
helpInfo += '<table>';
// 读取operation.txt文件信息完毕
helpInfo += '</div>';
// help-article end
helpInfo += '</div>';
// // help-container end
// $("#help").html(helpInfo);
KM.registerWidget('help', {
tpl: helpInfo,
initContent: function(km) {
var lang = km.getLang('dialogs.help'),
html;
if (lang) {
html = $.parseTmpl(this.tpl, lang);
}
this.root().html(html);
},
initEvent: function(km, $w) {
} }
this.root().html( html ); });
},
initEvent: function ( km, $w ) {}, }
width: 400 })();
} ); \ No newline at end of file
} )();
\ No newline at end of file
dialogs/help/operation.txt 0 → 100644
View file @ 00f399e3
## 节点操作
`Enter`: 插入兄弟节点
`Tab`: 插入子节点
`Delete`: 删除节点
`Up`, `Down`, `Left`, `Right`: 节点导航
`Alt` + `Up`, `Alt` + `Down`: 向上/向下调整顺序
`/`: 展开/收起节点
`F2`: 编辑节点
`Ctrl` + `A`: 全选节点
`Ctrl` + `C`: 复制节点
`Ctrl` + `X`: 剪切节点
`Ctrl` + `V`: 粘贴节点
`Ctrl` + `B`: 加粗
`Ctrl` + `I`: 斜体
## 视野控制
`Space`: 切换编辑/抓手模式
`滚轮`: 移动视野
`右键拖动`: 拖动视野
`空白处双击`: 居中根节点
`+`, `-`: 放大/缩小视野
## 文件操作
`Ctrl` + `N`: 新建
`Ctrl` + `S`: 保存
`Ctrl` + `Shift` + `S`: 分享
## 后悔药
`Ctrl` + `Z`: 撤销
`Ctrl` + `Y`: 重做
\ No newline at end of file
src/adapter/dialog.js
View file @ 00f399e3
...@@ -33,6 +33,16 @@ KM.registerToolbarUI('markers help preference resource', function(name) { ...@@ -33,6 +33,16 @@ KM.registerToolbarUI('markers help preference resource', function(name) {
} }
KM.setWidgetBody(name, $dialog, me); KM.setWidgetBody(name, $dialog, me);
}).attachTo($btn); }).attachTo($btn);
if (name == 'help') {
$dialog.kmui().on('beforeshow', function() {
$btn.kmui().active(true);
$('.kmui-editor-body').addClass('blur');
}).on('beforehide', function() {
$btn.kmui().active(false);
$('.kmui-editor-body').removeClass('blur');
});
}
}); });
me.on('interactchange', function() { me.on('interactchange', function() {
......
themes/default/css/help.css
View file @ 00f399e3
.help-content{ .blur {
line-height: 20px; -webkit-filter: blur(5px);
font-size: 12px; -moz-filter: blur(5px);
} -mz-filter: blur(5px);
.help-content ul{ -o-filter: blur(5px);
list-style: none; filter: blur(5px);
padding:0; /* transition: all ease 0.5s; */
} }
.help-content ul li{
color:#666; .kmui-modal.kmui-dialog-help .kmui-modal-header {
} display: none;
.help-content h2{color:#333;font-size: 18px;} }
.help-content h3{ .kmui-modal.kmui-dialog-help .kmui-modal-body {
color:#333; position: fixed;
display: inline; left: 0;
font-size: 14px; top: 85px;
right: 0;
bottom: 0;
max-height: 1000000px;
background: hsla(222, 14%, 41%, 0.8);
}
.shortcuts-opt {
margin: 0px 7px;
background-color: #fff;
font-size: 14px;
}
.shortcuts-group {
padding-right: 15px;
width: 220px;
text-shadow: none;
}
.shortcuts-thead {
font-size: 14px;
font-weight: bold;
line-height: 14px;
}
#div1 {
display: none;
}
/*.help-container {
width: 586px;
float: left;
}*/
.shortcuts-use {
width: 160px;
font-size: 14px;
font-weight: lighter;
}
.help-header {
padding-bottom: 9px;
margin: 20px 20px 30px;
border-bottom: 1px solid #EEE;
display: none;
}
.shortcuts-table {
max-width: 100%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0px;
float: left;
margin-left: 10px;
margin-top: 30px;
}
.shortcuts-table tr:first-child td span{
padding: 10px 0;
font-size: 18px;
display: block;
color: white;
}
.shortcuts-table td {
display: table-cell;
float: none;
margin-left: 0px;
padding-bottom: 7px;
}
.shortcuts-table td[colspan] {
text-align: center;
}
.shortcuts-table h2 {
font-size: 31.5px;
line-height: 40px;
}
.help-container {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 20px;
color: hsl(0, 100%, 100%);
text-shadow: 0 1px black;
margin: 30px;
}
.shortcuts-key {
display: inline-block;
padding: 3px 8px 5px;
font-size: 14px;
font-weight: normal;
line-height: 14px;
color: hsl(0, 0%, 43%);
/* text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25); */
white-space: nowrap;
vertical-align: baseline;
background-color: hsl(0, 0%, 99%);
border-radius: 3px;
border: 1px solid hsl(0, 0%, 60%);
text-transform: capitalize;
box-shadow: inset 0 -2px hsl(0, 0%, 92%), inset 0 -3px hsl(0, 100%, 100%);
}
.mac .shortcuts-key.ctrl,
.mac .shortcuts-key.shift,
.mac .shortcuts-key.alt,
.shortcuts-key.up,
.shortcuts-key.down,
.shortcuts-key.left,
.shortcuts-key.right {
text-indent: -1000px;
position: relative;
width: 9px;
}
.mac .shortcuts-key.ctrl:after,
.mac .shortcuts-key.shift:after,
.mac .shortcuts-key.alt:after,
.shortcuts-key.up:after,
.shortcuts-key.down:after,
.shortcuts-key.left:after,
.shortcuts-key.right:after {
display: block;
position: absolute;
text-align: center;
left: 5px;
top: 4px;
width: 16px;
height: 16px;
text-indent: 0;
}
.mac .shortcuts-key.ctrl:after {
content: '⌘';
}
.mac .shortcuts-key.shift:after {
content: '⇧';
}
.mac .shortcuts-key.alt:after {
content: '⌥';
}
.shortcuts-key.up:after {
content: '↑';
top: 2px;
}
.shortcuts-key.down:after {
content: '↓';
top: 2px;
}
.shortcuts-key.left:after {
content: '←';
top: 2px;
}
.shortcuts-key.right:after {
content: '→';
top: 2px;
}
div.right {
float: right;
} }
\ No newline at end of file
themes/default/css/kityminder.css
View file @ 00f399e3
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
html, body, div { html, body, div {
margin: 0; margin: 0;
padding: 0; padding: 0;
margin-top: 0 !important;
} }
html, body, #kityminder, div.kmui-editor-body { html, body, #kityminder, div.kmui-editor-body {
overflow: hidden; overflow: hidden;
...@@ -233,13 +232,20 @@ button#share-btn:hover { ...@@ -233,13 +232,20 @@ button#share-btn:hover {
.km-minderNode{ .km-minderNode{
cursor:default; cursor:default;
} }
.kmui-container, .kmui-editor-body { .kmui-container {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
.kmui-editor-body {
position: absolute;
left: 0;
top: 37px;
right: 0;
bottom: 0;
}
.kmui-container .kmui-toolbar{ .kmui-container .kmui-toolbar{
background-color: #fff; background-color: #fff;
z-index: 999; z-index: 999;
......
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