Commit 58eea84c authored by techird's avatar techird

草稿箱功能

parent 359e26b6
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
<script src="../lang/zh-cn/zh-cn.js" charset="utf-8"></script> <script src="../lang/zh-cn/zh-cn.js" charset="utf-8"></script>
<script src="../lib/baidu-frontia-js-full-1.0.0.js" charset="utf-8"></script> <script src="../lib/baidu-frontia-js-full-1.0.0.js" charset="utf-8"></script>
<script src="../social/draftmanager.js" charset="utf-8"></script>
<script src="../social/social.js" charset="utf-8"></script> <script src="../social/social.js" charset="utf-8"></script>
<link href="../social/social.css" rel="stylesheet"> <link href="../social/social.css" rel="stylesheet">
......
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
<script src="../lang/zh-cn/zh-cn.js" charset="utf-8"></script> <script src="../lang/zh-cn/zh-cn.js" charset="utf-8"></script>
<script src="../lib/baidu-frontia-js-full-1.0.0.js" charset="utf-8"></script> <script src="../lib/baidu-frontia-js-full-1.0.0.js" charset="utf-8"></script>
<script src="../social/draftmanager.js" charset="utf-8"></script>
<script src="../social/social.js" charset="utf-8"></script> <script src="../social/social.js" charset="utf-8"></script>
<link href="../social/social.css" rel="stylesheet"> <link href="../social/social.css" rel="stylesheet">
......
!function(){var a,b,c,d;!function(){var e={},f={};a=function(a,b,c){e[a]={deps:b,callback:c}},d=c=b=function(a){function c(b){if("."!==b.charAt(0))return b;for(var c=b.split("/"),d=a.split("/").slice(0,-1),e=0,f=c.length;f>e;e++){var g=c[e];if(".."===g)d.pop();else{if("."===g)continue;d.push(g)}}return d.join("/")}if(d._eak_seen=e,f[a])return f[a];if(f[a]={},!e[a])throw new Error("Could not find module "+a);for(var g,h=e[a],i=h.deps,j=h.callback,k=[],l=0,m=i.length;m>l;l++)"exports"===i[l]?k.push(g={}):k.push(b(c(i[l])));var n=j.apply(this,k);return f[a]=g||n}}(),a("promise/all",["./utils","exports"],function(a,b){"use strict";function c(a){var b=this;if(!d(a))throw new TypeError("You must pass an array to all.");return new b(function(b,c){function d(a){return function(b){f(a,b)}}function f(a,c){h[a]=c,0===--i&&b(h)}var g,h=[],i=a.length;0===i&&b([]);for(var j=0;j<a.length;j++)g=a[j],g&&e(g.then)?g.then(d(j),c):f(j,g)})}var d=a.isArray,e=a.isFunction;b.all=c}),a("promise/asap",["exports"],function(a){"use strict";function b(){return function(){process.nextTick(e)}}function c(){var a=0,b=new i(e),c=document.createTextNode("");return b.observe(c,{characterData:!0}),function(){c.data=a=++a%2}}function d(){return function(){j.setTimeout(e,1)}}function e(){for(var a=0;a<k.length;a++){var b=k[a],c=b[0],d=b[1];c(d)}k=[]}function f(a,b){var c=k.push([a,b]);1===c&&g()}var g,h="undefined"!=typeof window?window:{},i=h.MutationObserver||h.WebKitMutationObserver,j="undefined"!=typeof global?global:this,k=[];g="undefined"!=typeof process&&"[object process]"==={}.toString.call(process)?b():i?c():d(),a.asap=f}),a("promise/cast",["exports"],function(a){"use strict";function b(a){if(a&&"object"==typeof a&&a.constructor===this)return a;var b=this;return new b(function(b){b(a)})}a.cast=b}),a("promise/config",["exports"],function(a){"use strict";function b(a,b){return 2!==arguments.length?c[a]:(c[a]=b,void 0)}var c={instrument:!1};a.config=c,a.configure=b}),a("promise/polyfill",["./promise","./utils","exports"],function(a,b,c){"use strict";function d(){var a="Promise"in window&&"cast"in window.Promise&&"resolve"in window.Promise&&"reject"in window.Promise&&"all"in window.Promise&&"race"in window.Promise&&function(){var a;return new window.Promise(function(b){a=b}),f(a)}();a||(window.Promise=e)}var e=a.Promise,f=b.isFunction;c.polyfill=d}),a("promise/promise",["./config","./utils","./cast","./all","./race","./resolve","./reject","./asap","exports"],function(a,b,c,d,e,f,g,h,i){"use strict";function j(a){if(!w(a))throw new TypeError("You must pass a resolver function as the first argument to the promise constructor");if(!(this instanceof j))throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.");this._subscribers=[],k(a,this)}function k(a,b){function c(a){p(b,a)}function d(a){r(b,a)}try{a(c,d)}catch(e){d(e)}}function l(a,b,c,d){var e,f,g,h,i=w(c);if(i)try{e=c(d),g=!0}catch(j){h=!0,f=j}else e=d,g=!0;o(b,e)||(i&&g?p(b,e):h?r(b,f):a===F?p(b,e):a===G&&r(b,e))}function m(a,b,c,d){var e=a._subscribers,f=e.length;e[f]=b,e[f+F]=c,e[f+G]=d}function n(a,b){for(var c,d,e=a._subscribers,f=a._detail,g=0;g<e.length;g+=3)c=e[g],d=e[g+b],l(b,c,d,f);a._subscribers=null}function o(a,b){var c,d=null;try{if(a===b)throw new TypeError("A promises callback cannot return that same promise.");if(v(b)&&(d=b.then,w(d)))return d.call(b,function(d){return c?!0:(c=!0,b!==d?p(a,d):q(a,d),void 0)},function(b){return c?!0:(c=!0,r(a,b),void 0)}),!0}catch(e){return c?!0:(r(a,e),!0)}return!1}function p(a,b){a===b?q(a,b):o(a,b)||q(a,b)}function q(a,b){a._state===D&&(a._state=E,a._detail=b,u.async(s,a))}function r(a,b){a._state===D&&(a._state=E,a._detail=b,u.async(t,a))}function s(a){n(a,a._state=F)}function t(a){n(a,a._state=G)}var u=a.config,v=(a.configure,b.objectOrFunction),w=b.isFunction,x=(b.now,c.cast),y=d.all,z=e.race,A=f.resolve,B=g.reject,C=h.asap;u.async=C;var D=void 0,E=0,F=1,G=2;j.prototype={constructor:j,_state:void 0,_detail:void 0,_subscribers:void 0,then:function(a,b){var c=this,d=new this.constructor(function(){});if(this._state){var e=arguments;u.async(function(){l(c._state,d,e[c._state-1],c._detail)})}else m(this,d,a,b);return d},"catch":function(a){return this.then(null,a)}},j.all=y,j.cast=x,j.race=z,j.resolve=A,j.reject=B,i.Promise=j}),a("promise/race",["./utils","exports"],function(a,b){"use strict";function c(a){var b=this;if(!d(a))throw new TypeError("You must pass an array to race.");return new b(function(b,c){for(var d,e=0;e<a.length;e++)d=a[e],d&&"function"==typeof d.then?d.then(b,c):b(d)})}var d=a.isArray;b.race=c}),a("promise/reject",["exports"],function(a){"use strict";function b(a){var b=this;return new b(function(b,c){c(a)})}a.reject=b}),a("promise/resolve",["exports"],function(a){"use strict";function b(a){var b=this;return new b(function(b){b(a)})}a.resolve=b}),a("promise/utils",["exports"],function(a){"use strict";function b(a){return c(a)||"object"==typeof a&&null!==a}function c(a){return"function"==typeof a}function d(a){return"[object Array]"===Object.prototype.toString.call(a)}var e=Date.now||function(){return(new Date).getTime()};a.objectOrFunction=b,a.isFunction=c,a.isArray=d,a.now=e}),b("promise/polyfill").polyfill()}();
\ No newline at end of file
function DraftManager( minder ) {
var current = null,
localStorage = window.localStorage,
drafts;
init();
function init() {
drafts = localStorage.getItem( 'drafts' );
drafts = drafts ? JSON.parse( drafts ) : [];
}
function store() {
localStorage.setItem( 'drafts', JSON.stringify( drafts ) );
}
function create( path ) {
current = {
path: path || 'local/' + ( +new Date() )
};
drafts.unshift( current );
save();
}
function open( index ) {
current = drafts[ index ];
if ( !current ) return false;
// bring it first
drafts.splice( index, 1 );
drafts.unshift( current );
store();
return current;
}
function load() {
if ( current ) {
minder.importData( current.data, "json" );
}
return current;
}
function openByPath( path ) {
for ( var i = 0; i < drafts.length; i++ ) {
if ( drafts[ i ].path == path ) return open( i );
}
return false;
}
function save( path ) {
if ( current === null ) {
create();
} else {
current.path = path || current.path;
current.name = minder.getMinderTitle();
current.data = minder.exportData( "json" );
current.update = new Date();
store();
}
}
function list() {
return drafts.slice();
}
function remove( remove_index ) {
drafts.splice( remove_index, 1 );
store();
}
function clear() {
drafts.splice( 1 );
store();
}
return {
open: open,
openByPath: openByPath,
load: load,
save: save,
create: create,
list: list,
remove: remove,
clear: clear
};
}
\ No newline at end of file
#social { #social{position:absolute;right:10px;top:10px;line-height:20px;text-align:right;overflow:hidden}
position: absolute; .dropdown{padding-right:28px}.dropdown:after{content:' ';display:block;position:absolute;right:10px;top:15px;width:0;height:0;border:solid;border-width:4px 5px;border-color:#fff transparent transparent transparent}
right: 10px; button{font-family:Arial,"Heiti SC","Microsoft Yahei";outline:none;display:inline-block;padding:0 15px;height:35px;font-size:13px;line-height:35px;text-align:center;border-radius:5px;color:#fff;text-decoration:none;border:none;margin-left:5px;cursor:pointer;background:#0099f2;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOTlmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDA5NmVlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNzZkZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);background:-moz-linear-gradient(top, #0099f2 0, #4096ee 0, #0076dd 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #0099f2), color-stop(0, #4096ee), color-stop(100%, #0076dd));background:-webkit-linear-gradient(top, #0099f2 0, #4096ee 0, #0076dd 100%);background:-o-linear-gradient(top, #0099f2 0, #4096ee 0, #0076dd 100%);background:-ms-linear-gradient(top, #0099f2 0, #4096ee 0, #0076dd 100%);background:linear-gradient(to bottom, #0099f2 0, #4096ee 0, #0076dd 100%);}button:hover{background:#009fff}
top: 10px; button:active{background:#007fcc;box-shadow:inset 0 2px 3px rgba(0,0,0,0.2)}
line-height: 20px; button[disabled]{background:#aaa}
text-align: right; button.baidu-cloud{padding-left:35px;position:relative}button.baidu-cloud:before{content:' ';display:block;width:24px;height:24px;background:url(../themes/default/images/baiducloud.png);position:absolute;left:7px;top:5px}
overflow: hidden; button.share{padding-left:35px;position:relative}button.share:before{content:' ';display:block;width:24px;height:24px;background:url(../themes/default/images/share.png) no-repeat;position:absolute;left:7px;top:5px}
} button img{position:relative;top:3px;border-radius:2px;margin-right:7px}
#social button { button.user-file{position:relative;padding-right:28px}button.user-file:after{content:' ';display:block;position:absolute;right:10px;top:15px;width:0;height:0;border:solid;border-width:4px 5px;border-color:#fff transparent transparent transparent}
font-family: Arial, "Heiti SC", "Microsoft Yahei"; #draft-btn{position:absolute;left:10px;bottom:10px;padding-left:35px;padding-right:28px}#draft-btn:before{content:' ';display:block;width:24px;height:24px;background:url(../themes/default/images/draft.png) no-repeat;position:absolute;left:7px;top:5px}
outline: none; #draft-btn:after{content:' ';display:block;position:absolute;right:10px;top:15px;width:0;height:0;border:solid;border-width:4px 5px;border-color:#fff transparent transparent transparent}
display: inline-block; .draft-menu span.update-time{float:right;color:#ccc;margin-left:20px;padding-right:16px}
padding: 0 15px; .draft-menu li.draft-item a{position:relative}.draft-menu li.draft-item a:before{content:' ';display:block;width:24px;height:24px;background:url(../themes/default/images/draft.png) no-repeat 0 -24px;position:absolute;left:4px;top:2px}
height: 35px; .draft-menu li.draft-item:hover a:before{background-position:0 -48px}
font-size: 13px; .draft-menu li.draft-item{position:relative}.draft-menu li.draft-item:hover a.delete{display:block}
line-height: 35px; .draft-menu li.draft-item a.delete{display:none;cursor:pointer;position:absolute;width:20px;height:20px;right:4px;top:4px;padding:0;background:url(../themes/default/images/close-button.png) no-repeat 0 0}.draft-menu li.draft-item a.delete:before{display:none}
text-align: center; .draft-menu li.draft-item a.delete:hover{background-position:0 -20px}
border-radius: 5px; .draft-menu.kmui-combobox-menu .kmui-combobox-checked{overflow:hidden;opacity:1;color:#ccc}.draft-menu.kmui-combobox-menu .kmui-combobox-checked .kmui-combobox-icon{float:left;margin:5px 0;width:28px;background-position:center 0;opacity:.3}
color: #ffffff; .draft-menu.kmui-combobox-menu .kmui-combobox-checked .kmui-combobox-item-label{display:block;margin-left:28px}
text-decoration: none; .draft-menu.kmui-combobox-menu .kmui-combobox-checked:hover{color:#ccc}.draft-menu.kmui-combobox-menu .kmui-combobox-checked:hover .kmui-combobox-icon{background-position:center 0}
border: none; .user-file-menu{margin-top:20px;margin-left:1px}
margin-left: 5px;
cursor: pointer;
background: #0099f2;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOTlmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDA5NmVlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNzZkZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, #0099f2 0%, #4096ee 0%, #0076dd 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0099f2), color-stop(0%, #4096ee), color-stop(100%, #0076dd));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0099f2 0%, #4096ee 0%, #0076dd 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0099f2 0%, #4096ee 0%, #0076dd 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #0099f2 0%, #4096ee 0%, #0076dd 100%);
/* IE10+ */
background: linear-gradient(to bottom, #0099f2 0%, #4096ee 0%, #0076dd 100%);
/* W3C */
}
#social button:hover {
background: #009fff;
}
#social button[disabled] {
background: #AAA;
}
#social button.baidu-cloud {
padding-left: 35px;
position: relative;
}
#social button.baidu-cloud:before {
content: ' ';
display: block;
width: 24px;
height: 24px;
background: url(../themes/default/images/baiducloud.png);
position: absolute;
left: 7px;
top: 5px;
}
#social button.share {
padding-left: 35px;
position: relative;
}
#social button.share:before {
content: ' ';
display: block;
width: 24px;
height: 24px;
background: url(../themes/default/images/share.png) no-repeat;
position: absolute;
left: 7px;
top: 5px;
}
#social button img {
position: relative;
top: 3px;
border-radius: 2px;
margin-right: 7px;
}
#social button.user-file {
padding-right: 28px;
position: relative;
}
#social button.user-file:after {
content: ' ';
display: block;
position: absolute;
right: 10px;
top: 15px;
width: 0;
height: 0;
border: solid;
border-width: 4px 5px;
border-color: #FFFFFF transparent transparent transparent;
}
.user-file-menu {
margin-top: 20px;
margin-left: 1px;
}
/* global Promise: true */
/**
* @author techird
*/
$.extend( $.fn, { $.extend( $.fn, {
disabled: function ( value ) { disabled: function ( value ) {
if ( value === undefined ) return !!this.attr( 'disabled' ); if ( value === undefined ) return !!this.attr( 'disabled' );
...@@ -33,85 +38,194 @@ $.extend( $.fn, { ...@@ -33,85 +38,194 @@ $.extend( $.fn, {
} )() } )()
} ); } );
$( function () { $( function () {
var $panel = $( '<div id="social"></div>' ).appendTo( 'body' );
var $login_btn, $save_btn, $share_btn, $user_btn, $user_menu; // UI 元素
var $panel, $login_btn, $save_btn, $share_btn, $user_btn, $user_menu, $draft_btn, $draft_menu,
var baseUrl = ( function () {
var scripts = document.getElementsByTagName( 'script' ); // 当前文件的远端路径
for ( var i = 0; i < scripts.length; i++ ) { remotePath = null,
var index = scripts[ i ].src.indexOf( 'social.js' );
if ( ~index ) { // 当前登录的账户
return scripts[ i ].src.substr( 0, index ); currentAccount,
// 当前连接是否指示要加载一个分享的脑图
isShareLink,
uuid = function () {
return ( ( +new Date() * 10000 ) + ( Math.random() * 9999 ) ).toString( 36 );
},
// 当前脑图的分享连接
shareId = uuid(),
// 查找 baseUrl
baseUrl = ( function () {
var scripts = document.getElementsByTagName( 'script' );
for ( var i = 0; i < scripts.length; i++ ) {
var index = scripts[ i ].src.indexOf( 'social.js' );
if ( ~index ) {
return scripts[ i ].src.substr( 0, index );
}
} }
} } )(),
} )();
notice = window.alert,
minder = window.km,
draftManager = new window.DraftManager( minder ),
watchingChanges = true;
start();
function start() {
initUI();
initFrontia();
loadShare();
loadPath();
checkLogin();
bindShortCuts();
watchChanges();
bindDraft();
loadDraft( 0 );
}
// 创建 UI
function initUI() {
$panel = $( '<div id="social"></div>' ).appendTo( 'body' );
$login_btn = $( '<button>登录</button>' ).addClass( 'login' ).click( login ).appendTo( $panel );
$user_btn = $( '<button><span class="text"></span></button>' ).addClass( 'user-file' );
$user_menu = $.kmuidropmenu( {
data: [ {
label: '新建脑图',
click: newFile
}, {
label: '到网盘管理文件...',
click: function () {
window.open( 'http://pan.baidu.com/disk/home#dir/path=/apps/kityminder' );
}
}, {
divider: true
} ]
} ).addClass( 'user-file-menu' ).appendTo( 'body' ).kmui();
$login_btn = $( '<button>登录</button>' ).addClass( 'login' ).click( login ).appendTo( $panel ); $user_menu.attachTo( $user_btn );
$user_btn = $( '<button><span class="text"></span></button>' ).addClass( 'user-file' ); $save_btn = $( '<button id="save-btn">保存</button>' ).click( save )
.addClass( 'baidu-cloud' ).appendTo( $panel ).disabled( true );
$user_menu = $.kmuidropmenu( { $share_btn = $( '<button id="share-btn">分享</button>' ).click( share )
data: [ { .addClass( 'share' ).appendTo( $panel ).disabled( true );
label: '新建脑图',
click: newFile $draft_btn = $( '<button id="draft-btn">草稿箱</button>' ).appendTo( 'body' );
}, {
label: '到网盘管理文件...', $draft_menu = $.kmuidropmenu().addClass( 'draft-menu kmui-combobox-menu' ).appendTo( 'body' );
click: function () { $draft_menu.kmui().attachTo( $draft_btn );
window.open( 'http://pan.baidu.com/disk/home#dir/path=/apps/kityminder' ); $draft_menu.on( 'aftershow', showDraftList );
}
// 初始化云平台 frontia
function initFrontia() {
var AK = 'wiE55BGOG8BkGnpPs6UNtPbb';
baidu.frontia.init( AK );
baidu.frontia.social.setLoginCallback( {
success: setAccount,
error: function ( error ) {
notice( '登录失败!' );
} }
}, { } );
divider: true }
} ]
} ).addClass( 'user-file-menu' ).appendTo( 'body' ).kmui(); // 检查 URL 是否分享连接,是则加载分享内容
function loadShare() {
var pattern = /shareId=(\w+)([&#]|$)/;
var match = pattern.exec( window.location ) || pattern.exec( document.referrer );
if ( !match ) return;
$user_menu.attachTo( $user_btn ); var shareId = match[ 1 ];
var query = new baidu.frontia.storage.Query();
query.on( 'shareMinder.id' ).equal( shareId );
$save_btn = $( '<button id="save-btn">保存</button>' ).click( saveThisFile ) $share_btn.loading( '正在加载分享内容...' );
.addClass( 'baidu-cloud' ).appendTo( $panel ).disabled( true );
$share_btn = $( '<button id="share-btn">分享</button>' ).click( shareThisFile ) baidu.frontia.storage.findData( query, {
.addClass( 'share' ).appendTo( $panel ).disabled( true ); success: function ( ret ) {
minder.importData( ret.result[ 0 ].obj.shareMinder.data, 'json' );
$share_btn.loading( false );
},
error: function ( e ) {
console.log( e );
}
} );
isShareLink = true;
}
var AK, thisMapFilename, currentUser, share_id = uuid(), // 检查 URL 是否请求加载用户文件,是则加载
isShareLink, isFileSaved = true, function loadPath() {
draft = {}; var pattern = /path=(.+?)([&#]|$)/;
// documemt.referrer 是为了支持被嵌在 iframe 里的情况
var match = pattern.exec( window.location ) || pattern.exec( document.referrer );
if ( !match ) return;
setRemotePath( decodeURIComponent( match[ 1 ], true ) );
loadRemote();
}
AK = 'wiE55BGOG8BkGnpPs6UNtPbb'; function setRemotePath( path, saved ) {
var filename;
remotePath = path;
if ( remotePath ) {
filename = getFileName( remotePath );
if ( !saved ) {
filename = '* ' + filename;
}
$user_btn.text( filename );
} else if ( currentAccount ) {
$user_btn.text( '* ' + minder.getMinderTitle() );
}
}
baidu.frontia.init( AK ); // 检查是否在 Cookie 中登录过了
baidu.frontia.social.setLoginCallback( { function checkLogin() {
success: setCurrentUser, var account = baidu.frontia.getCurrentAccount();
error: function ( error ) { if ( account ) {
console.log( error ); setAccount( account );
} }
} ); }
// 用户点击登录按钮主动登录
function login() { function login() {
var options = { baidu.frontia.social.login( {
response_type: 'token', response_type: 'token',
media_type: 'baidu', media_type: 'baidu',
redirect_uri: window.location.href, redirect_uri: window.location.href,
client_type: 'web' client_type: 'web'
}; } );
baidu.frontia.social.login( options );
} }
function setCurrentUser( user ) { // 设置用户后为其初始化
currentUser = user; function setAccount( account ) {
$user_btn.text( user.getName() + ' 的脑图' ); currentAccount = account;
$user_btn.prependTo( $panel ); $user_btn.prependTo( $panel );
$save_btn.disabled( false ); $save_btn.disabled( false );
$share_btn.disabled( false ); $share_btn.disabled( false );
$login_btn.detach(); $login_btn.detach();
loadRecent();
loadAvator(); loadAvator();
loadRecent();
window.location.hash = ''; window.location.hash = '';
} }
// 加载用户头像
function loadAvator() { function loadAvator() {
currentUser.getDetailInfo( { currentAccount.getDetailInfo( {
success: function ( user ) { success: function ( user ) {
var $img = $( '<img />' ).attr( { var $img = $( '<img />' ).attr( {
'src': user.extra.tinyurl, 'src': user.extra.tinyurl,
...@@ -123,29 +237,63 @@ $( function () { ...@@ -123,29 +237,63 @@ $( function () {
} ); } );
} }
// 加载用户最近使用的文件
function loadRecent() { function loadRecent() {
var sto = baidu.frontia.personalStorage; var sto = baidu.frontia.personalStorage;
$user_btn.loading( '加载最近脑图...' ); //$user_btn.loading( '加载最近脑图...' );
sto.listFile( 'apps/kityminder/', { sto.listFile( 'apps/kityminder/', {
by: 'time', by: 'time',
success: function ( result ) { success: function ( result ) {
if ( result.list.length ) { if ( result.list.length ) {
if ( !isShareLink && !thisMapFilename && !draft.data ) { //$user_btn.loading( false );
loadPersonal( result.list[ 0 ].path );
} else {
$user_btn.loading( false );
}
if ( draft.data ) {
setFileSaved( false );
}
addToRecentMenu( result.list ); addToRecentMenu( result.list );
} }
},
error: function () {
notice( '加载最近脑图失败!' );
//$user_btn.loading( false );
} }
} ); } );
} }
// 加载当前 remoteUrl 中制定的文件
function loadRemote() {
var sto = baidu.frontia.personalStorage;
$user_btn.loading( '加载“' + getFileName( remotePath ) + '”...' );
sto.getFileUrl( remotePath, {
success: function ( url ) {
$.ajax( {
cache: false,
url: url,
dataType: 'text',
success: function ( result ) {
watchingChanges = false;
minder.importData( result, 'json' );
if ( !draftManager.openByPath( remotePath ) ) {
draftManager.create();
}
draftManager.save( remotePath );
watchingChanges = true;
minder.execCommand( 'camera', minder.getRoot() );
$user_btn.loading( false ).text( getFileName( remotePath ) );
}
} );
},
error: notice
} );
}
// 添加文件到最近文件列表
function addToRecentMenu( list ) { function addToRecentMenu( list ) {
list.splice( 8 ); list.splice( 12 );
list.forEach( function ( file ) { list.forEach( function ( file ) {
$user_menu.appendItem( { $user_menu.appendItem( {
item: { item: {
...@@ -157,100 +305,83 @@ $( function () { ...@@ -157,100 +305,83 @@ $( function () {
} ); } );
} }
// 从路径中抽取文件名
function getFileName( path ) { function getFileName( path ) {
var filename = path.substr( path.lastIndexOf( '/' ) + 1 ); var filename = path.substr( path.lastIndexOf( '/' ) + 1 );
return filename.substr( 0, filename.lastIndexOf( '.' ) ); return filename.substr( 0, filename.lastIndexOf( '.' ) );
} }
// 点击文件菜单
function openFile( e ) { function openFile( e ) {
var path = $( this ).data( 'value' ); setRemotePath( $( this ).data( 'value' ), true );
loadPersonal( path ); loadRemote();
}
function loadPersonal( path ) {
var sto = baidu.frontia.personalStorage;
$user_btn.loading( '加载“' + getFileName( path ) + '”...' );
sto.getFileUrl( path, {
success: function ( url ) {
$.ajax( {
cache: false,
url: url,
dataType: 'text',
success: function ( result ) {
thisMapFilename = path;
window.km.importData( result, 'json' );
window.km.execCommand( 'camera', window.km.getRoot() );
$user_btn.loading( false );
setFileSaved( true );
clearDraft();
}
} );
}
} );
}
function getMapFileName() {
return '/apps/kityminder/' + window.km.getMinderTitle() + '.km';
} }
// 新建文件
function newFile() { function newFile() {
thisMapFilename = null; setRemotePath( null, true );
window.km.importData( '新建脑图', 'plain' ); watchingChanges = false;
window.km.execCommand( 'camera', window.km.getRoot() ); minder.importData( '新建脑图', 'plain' );
draftManager.create();
watchingChanges = true;
minder.execCommand( 'camera', minder.getRoot() );
$user_btn.text( '<新建脑图>' ); $user_btn.text( '<新建脑图>' );
} }
function saveThisFile() { function generateRemotePath() {
var data = window.km.exportData( 'json' ); return '/apps/kityminder/' + minder.getMinderTitle() + '.km';
save( data, thisMapFilename || getMapFileName(), function ( success, info ) {
if ( success ) {
thisMapFilename = info.path;
$save_btn.text( '已保存!' );
if ( !thisMapFilename ) {
addToRecentMenu( [ info ] );
$user_btn.text( getFileName( thisMapFilename ) );
checkAutoSave();
}
setFileSaved( true );
} else {
$save_btn.loading( false ).text( '保存失败!' );
}
} );
$save_btn.loading( '正在保存...' );
} }
function save( file, filename, callback ) { function save() {
if ( !currentAccount ) return;
var data = minder.exportData( 'json' );
var sto = baidu.frontia.personalStorage; var sto = baidu.frontia.personalStorage;
var options = {
ondup: thisMapFilename ? sto.constant.ONDUP_OVERWRITE : sto.constant.ONDUP_NEWCOPY, sto.uploadTextFile( data, remotePath || generateRemotePath(), {
success: function ( result ) { ondup: remotePath ? sto.constant.ONDUP_OVERWRITE : sto.constant.ONDUP_NEWCOPY,
callback( !!result.path, result ); success: function ( savedFile ) {
if ( savedFile.path ) {
if ( !remotePath ) {
addToRecentMenu( [ savedFile ] );
}
setRemotePath( savedFile.path, true );
$save_btn.text( '已保存!' );
}
draftManager.save( remotePath );
}, },
error: function ( error ) { error: function ( error ) {
callback( false, error ); window.alert( '保存到云盘失败,建议您将脑图以 .km 格式导出到本地!' );
$save_btn.loading( false );
} }
}; } );
sto.uploadTextFile( file, filename, options );
clearDraft();
}
function uuid() { $save_btn.loading( '正在保存...' );
return ( ( +new Date() * 10000 ) + ( Math.random() * 9999 ) ).toString( 36 );
} }
function shareThisFile() { function share() {
if ( $share_btn.disabled() ) { if ( $share_btn.disabled() ) {
return; return;
} }
var data = window.km.exportData( 'json' ); var currentUrl = window.location.origin + window.location.pathname,
shareUrl = currentUrl + '?shareId=' + shareId,
shareData = new baidu.frontia.Data( {
shareMinder: {
id: shareId,
data: minder.exportData( 'json' )
}
} );
$share_btn.loading( '正在分享...' ); $share_btn.loading( '正在分享...' );
var currentUrl = window.location.origin + window.location.pathname; baidu.frontia.storage.insertData( shareData, {
var shareUrl = currentUrl + '?share_id=' + share_id; success: function () {
share( data, share_id, function ( success ) { var $popup, $url;
if ( success ) {
var $popup = $( '<div></div>' ).addClass( 'popup' ).appendTo( 'body' ); $popup = $( '<div></div>' ).addClass( 'popup' ).appendTo( 'body' );
$popup.css( { $popup.css( {
'position': 'absolute', 'position': 'absolute',
'right': 10, 'right': 10,
...@@ -263,154 +394,149 @@ $( function () { ...@@ -263,154 +394,149 @@ $( function () {
} ); } );
$popup.append( '<p style="margin: 5px 0; font-size: 12px;">分享成功,请复制URL:</p>' ); $popup.append( '<p style="margin: 5px 0; font-size: 12px;">分享成功,请复制URL:</p>' );
var $input = $( '<input type="text" style="width: 250px;" value="' + shareUrl + '"></input>' ).appendTo( $popup ); $url = $( '<input type="text" style="width: 250px;" value="' + shareUrl + '"></input>' ).appendTo( $popup );
$input[ 0 ].select();
$url[ 0 ].select();
$popup.mousedown( function ( e ) { $popup.mousedown( function ( e ) {
e.stopPropagation(); e.stopPropagation();
} ); } );
$( 'body' ).on( 'mousedown', function ( e ) {
$( 'body' ).one( 'mousedown', function ( e ) {
$popup.fadeOut( 'fast', function () { $popup.fadeOut( 'fast', function () {
$popup.remove(); $popup.remove();
} ); } );
$share_btn.loading( false ); $share_btn.loading( false );
$( 'body' ).off( 'mousedown', arguments.callee );
} ); } );
} }
} ); } );
} }
function share( text, shareId, callback ) { function bindShortCuts() {
var data = new baidu.frontia.Data( {
shareMinder: { $( document.body ).keydown( function ( e ) {
id: shareId,
data: text var keyCode = e.keyCode || e.which;
//添加快捷键
if ( ( e.ctrlKey || e.metaKey ) ) {
switch ( keyCode ) {
//保存
case KM.keymap.s:
if ( e.shiftKey ) {
share();
} else {
save();
}
e.preventDefault();
break;
case KM.keymap.n:
newFile();
e.preventDefault();
break;
}
} }
} ); } );
var handles = {
success: function ( result ) {
callback( true );
},
error: function ( e ) {
callback( false );
}
};
baidu.frontia.storage.insertData( data, handles );
} }
function loadShare() { function watchChanges() {
var pattern = /share_id=(\w+)([&#]|$)/; minder.on( 'contentchange', function () {
var match = pattern.exec( window.location ) || pattern.exec( document.referrer ); if ( !watchingChanges ) return;
if ( !match ) return; var currentData = minder.exportData( 'json' );
var shareId = match[ 1 ]; if ( watchChanges.lastData != currentData ) {
var query = new baidu.frontia.storage.Query(); if ( currentAccount ) {
query.on( 'shareMinder.id' ).equal( shareId ); $save_btn.disabled( false ).text( '保存' );
watchChanges.lastData = currentData;
$share_btn.loading( '正在加载分享内容...' ); setRemotePath( remotePath, false );
baidu.frontia.storage.findData( query, { }
success: function ( ret ) { draftManager.save();
window.km.importData( ret.result[ 0 ].obj.shareMinder.data, 'json' );
$share_btn.loading( false );
},
error: function ( e ) {
console.log( e );
} }
} ); } );
isShareLink = true;
} }
function loadPath() { function showDraftList() {
var pattern = /path=(.+?)([&#]|$)/; var list = draftManager.list(),
var match = pattern.exec( window.location ) || pattern.exec( document.referrer ); draft, $draft, index;
if ( !match ) return; if ( !list.length ) {
var path = decodeURIComponent( match[ 1 ] ); return false;
loadPersonal( path ); }
}
function setFileSaved( saved ) { draft = list.shift();
$save_btn.disabled( !currentUser || saved ); $draft_menu.empty().append( '<li disabled="disabled" class="current-draft kmui-combobox-item kmui-combobox-item-disabled kmui-combobox-checked">' +
if ( saved ) { '<span class="kmui-combobox-icon"></span>' +
$user_btn.text( getFileName( thisMapFilename ) ); '<label class="kmui-combobox-item-label">' + draft.name +
clearDraft(); '<span class="update-time">' + getFriendlyTimeSpan( +new Date( draft.update ), +new Date() ) + '</span>' +
} else { '</label>' +
$save_btn.text( '保存' ); '</li>' );
$user_btn.text( getFileName( thisMapFilename || draft.filename || getMapFileName() ) + ' *' );
$draft_menu.append( '<li class="kmui-divider"></li>' );
index = 1;
while ( list.length ) {
draft = list.shift();
$draft = $( '<li class="draft-item">' +
'<a href="#">' + draft.name + '<span class="update-time">' + getFriendlyTimeSpan( +new Date( draft.update ), +new Date() ) + '</span></a><a class="delete" title="删除该草稿"></a></li>' );
$draft.data( 'draft-index', index++ );
$draft.appendTo( $draft_menu );
}
if ( index > 1 ) {
$draft_menu.append( '<li class="kmui-divider"></li>' );
$draft_menu.append( '<li class="draft-clear"><a href="#">清空草稿箱</a></li>' );
} }
}
function checkAutoSave() { adjustDraftMenu();
var sto = window.localStorage;
if ( !sto ) return;
draft = {
filename: thisMapFilename || getMapFileName(),
data: window.km.exportData( 'json' )
};
sto.setItem( 'draft_filename', draft.filename );
sto.setItem( 'draft_data', draft.data );
setFileSaved( false );
} }
function loadAutoSave() { function adjustDraftMenu() {
var sto = window.localStorage; var pos = $draft_btn.offset();
pos.top -= $draft_menu.outerHeight() + 15;
if ( !sto ) return; $draft_menu.offset( pos );
draft.data = sto.getItem( 'draft_data' );
thisMapFilename = draft.filename = sto.getItem( 'draft_filename' );
if ( draft.data ) {
window.km.importData( draft.data, 'json' );
setFileSaved( false );
}
} }
function clearDraft() { function bindDraft() {
var sto = window.localStorage; $draft_menu.delegate( 'a.delete', 'click', function ( e ) {
if ( !sto ) return; var $li = $( this ).closest( 'li.draft-item' );
draftManager.remove( +$li.data( 'draft-index' ) );
$li.remove();
showDraftList();
e.stopPropagation();
} )
.delegate( 'li.draft-clear', 'click', function ( e ) {
if ( window.confirm( '确认清除草稿箱吗?' ) ) {
draftManager.clear();
showDraftList();
}
e.stopPropagation();
} )
sto.removeItem( 'draft_data' ); .delegate( 'li.draft-item', 'click', function ( e ) {
sto.removeItem( 'draft_filename' ); loadDraft( +$( this ).data( 'draft-index' ) );
} );
} }
function loadDraft( index ) {
loadShare(); var draft = draftManager.open( index ),
isRemote = draft.path.indexOf( '/apps/kityminder' ) === 0;
if ( !isShareLink ) { if ( draft && isRemote ) {
loadAutoSave(); setRemotePath( draft.path, false );
}
draftManager.load();
if ( !isRemote ) {
setRemotePath( null, false );
}
} }
currentUser = baidu.frontia.getCurrentAccount(); function getFriendlyTimeSpan( t1_in_ms, t2_in_ms ) {
if ( currentUser ) { var ms = Math.abs( t1_in_ms - t2_in_ms ),
setCurrentUser( currentUser ); s = ms / 1000,
loadPath(); m = s / 60,
h = m / 60,
d = h / 24;
if ( s < 60 ) return "刚刚";
if ( m < 60 ) return ( m | 0 ) + "分钟前";
if ( h < 24 ) return ( h | 0 ) + "小时前";
if ( d <= 30 ) return ( d | 0 ) + "天前";
return "很久之前";
} }
window.km.on( 'contentchange', checkAutoSave ); } );
\ No newline at end of file
//添加快捷键
$(document.body).keydown(function(e){
var keyCode = e.keyCode || e.which;
//添加快捷键
if((e.ctrlKey || e.metaKey)){
switch (keyCode){
//保存
case KM.keymap.s :
if(e.shiftKey){
shareThisFile()
}else{
saveThisFile();
}
e.preventDefault();
break;
case KM.keymap.n :
newFile();
e.preventDefault();
break;
}
}
})
} );
...@@ -5,87 +5,184 @@ ...@@ -5,87 +5,184 @@
line-height: 20px; line-height: 20px;
text-align: right; text-align: right;
overflow: hidden; overflow: hidden;
button { }
font-family: Arial, "Heiti SC", "Microsoft Yahei";
outline: none;
display: inline-block;
padding: 0 15px;
height: 35px;
font-size: 13px;
line-height: 35px;
text-align: center;
border-radius: 5px;
color: #ffffff;
text-decoration: none;
border: none;
margin-left: 5px;
cursor: pointer;background: #0099f2; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOTlmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDA5NmVlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNzZkZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, #0099f2 0%, #4096ee 0%, #0076dd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0099f2), color-stop(0%,#4096ee), color-stop(100%,#0076dd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0099f2 0%,#4096ee 0%,#0076dd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0099f2 0%,#4096ee 0%,#0076dd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0099f2 0%,#4096ee 0%,#0076dd 100%); /* IE10+ */
background: linear-gradient(to bottom, #0099f2 0%,#4096ee 0%,#0076dd 100%); /* W3C */
&:hover {
background: #009fff;
}
&[disabled] { .dropdown {
background: #AAA; padding-right: 28px;
} &:after {
content: ' ';
display: block;
position: absolute;
right: 10px;
top: 15px;
width: 0;
height: 0;
border: solid;
border-width: 4px 5px;
border-color: #FFFFFF transparent transparent transparent;
}
}
&.baidu-cloud { button {
padding-left: 35px; font-family: Arial, "Heiti SC", "Microsoft Yahei";
position: relative; outline: none;
&:before { display: inline-block;
content: ' '; padding: 0 15px;
display: block; height: 35px;
width: 24px; font-size: 13px;
height: 24px; line-height: 35px;
background: url(../themes/default/images/baiducloud.png); text-align: center;
position: absolute; border-radius: 5px;
left: 7px; color: #ffffff;
top: 5px; text-decoration: none;
} border: none;
margin-left: 5px;
cursor: pointer;
background: #0099f2; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOTlmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDA5NmVlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNzZkZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, #0099f2 0%, #4096ee 0%, #0076dd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0099f2), color-stop(0%,#4096ee), color-stop(100%,#0076dd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0099f2 0%,#4096ee 0%,#0076dd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0099f2 0%,#4096ee 0%,#0076dd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0099f2 0%,#4096ee 0%,#0076dd 100%); /* IE10+ */
background: linear-gradient(to bottom, #0099f2 0%,#4096ee 0%,#0076dd 100%); /* W3C */
&:hover {
background: #009fff;
}
&:active {
background: darken(#009fff, 10%);
box-shadow: inset 0 2px 3px rgba(0,0,0, .2);
}
&[disabled] {
background: #AAA;
}
&.baidu-cloud {
padding-left: 35px;
position: relative;
&:before {
content: ' ';
display: block;
width: 24px;
height: 24px;
background: url(../themes/default/images/baiducloud.png);
position: absolute;
left: 7px;
top: 5px;
} }
}
&.share { &.share {
padding-left: 35px; padding-left: 35px;
position: relative; position: relative;
&:before {
content: ' ';
display: block;
width: 24px;
height: 24px;
background: url(../themes/default/images/share.png) no-repeat;
position: absolute;
left: 7px;
top: 5px;
}
}
img {
position: relative;
top: 3px;
border-radius: 2px;
margin-right: 7px;
}
&.user-file {
position: relative;
.dropdown;
}
}
#draft-btn {
position: absolute;
left: 10px;
bottom: 10px;
&:before {
content: ' ';
display: block;
width: 24px;
height: 24px;
background: url(../themes/default/images/draft.png) no-repeat;
position: absolute;
left: 7px;
top: 5px;
}
padding-left: 35px;
.dropdown;
}
.draft-menu {
span.update-time {
float: right;
color: #CCC;
margin-left: 20px;
padding-right: 16px;
}
li.draft-item a {
position: relative;
&:before {
content: ' ';
display: block;
width: 24px;
height: 24px;
background: url(../themes/default/images/draft.png) no-repeat 0 -24px;
position: absolute;
left: 4px;
top: 2px;
}
}
li.draft-item:hover a:before {
background-position: 0 -48px;
}
li.draft-item {
position: relative;
&:hover a.delete{
display: block;
}
a.delete {
display: none;
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
right: 4px;
top: 4px;
padding: 0;
background: url(../themes/default/images/close-button.png) no-repeat 0 0;
&:before { &:before {
content: ' '; display: none;
display: block;
width: 24px;
height: 24px;
background: url(../themes/default/images/share.png) no-repeat;
position: absolute;
left: 7px;
top: 5px;
} }
&:hover {
background-position: 0 -20px;
}
}
}
&.kmui-combobox-menu .kmui-combobox-checked {
overflow: hidden;
opacity: 1;
color: #CCC;
.kmui-combobox-icon {
float: left;
margin: 5px 0;
width: 28px;
background-position: center 0;
opacity: .3;
} }
img { .kmui-combobox-item-label {
position: relative; display: block;
top: 3px; margin-left: 28px;
border-radius: 2px;
margin-right: 7px;
} }
&.user-file { &:hover {
padding-right: 28px; color: #CCC;
position: relative; .kmui-combobox-icon {
&:after { background-position: center 0;
content: ' ';
display: block;
position: absolute;
right: 10px;
top: 15px;
width: 0;
height: 0;
border: solid;
border-width: 4px 5px;
border-color: #FFFFFF transparent transparent transparent;
} }
} }
} }
......
//dropmenu 类 //dropmenu 类
KM.ui.define('dropmenu', { KM.ui.define( 'dropmenu', {
tmpl: '<ul class="kmui-dropdown-menu" aria-labelledby="dropdownMenu" >' + tmpl: '<ul class="kmui-dropdown-menu" aria-labelledby="dropdownMenu" >' +
'<%if(data && data.length){for(var i=0,ci;ci=data[i++];){%>' + '<%if(data && data.length){for(var i=0,ci;ci=data[i++];){%>' +
'<%if(ci.divider){%><li class="kmui-divider"></li><%}else{%>' + '<%if(ci.divider){%><li class="kmui-divider"></li><%}else{%>' +
'<li <%if(ci.active||ci.disabled){%>class="<%= ci.active|| \'\' %> <%=ci.disabled||\'\' %>" <%}%> data-value="<%= ci.value%>" data-label="<%= ci.label%>">' + '<li <%if(ci.active||ci.disabled){%>class="<%= ci.active|| \'\' %> <%=ci.disabled||\'\' %>" <%}%> data-value="<%= ci.value%>" data-label="<%= ci.label%>">' +
'<a href="#" tabindex="-1"><em class="kmui-dropmenu-checkbox"><i class="kmui-icon-ok"></i></em><%= ci.label%></a>' + '<a href="#" tabindex="-1"><em class="kmui-dropmenu-checkbox"><i class="kmui-icon-ok"></i></em><%= ci.label%></a>' +
'</li><%}}%>' + '</li><%}}%>' +
'<%}%>'+ '<%}%>' +
'</ul>', '</ul>',
subTmpl:'<%if(data && data.length){for(var i=0,ci;ci=data[i++];){%>' + subTmpl: '<%if(data && data.length){for(var i=0,ci;ci=data[i++];){%>' +
'<%if(ci.divider){%><li class="kmui-divider"></li><%}else{%>' + '<%if(ci.divider){%><li class="kmui-divider"></li><%}else{%>' +
'<li <%if(ci.active||ci.disabled){%>class="<%= ci.active|| \'\' %> <%=ci.disabled||\'\' %>" <%}%> data-value="<%= ci.value%>" data-label="<%= ci.label%>">' + '<li <%if(ci.active||ci.disabled){%>class="<%= ci.active|| \'\' %> <%=ci.disabled||\'\' %>" <%}%> data-value="<%= ci.value%>" data-label="<%= ci.label%>">' +
'<a href="#" tabindex="-1"><em class="kmui-dropmenu-checkbox"><i class="kmui-icon-ok"></i></em><%= ci.label%></a>' + '<a href="#" tabindex="-1"><em class="kmui-dropmenu-checkbox"><i class="kmui-icon-ok"></i></em><%= ci.label%></a>' +
...@@ -16,32 +16,34 @@ KM.ui.define('dropmenu', { ...@@ -16,32 +16,34 @@ KM.ui.define('dropmenu', {
'<%}%>', '<%}%>',
defaultOpt: { defaultOpt: {
data: [], data: [],
click: function () { anchor: 'top',
} click: function () {}
}, },
setData:function(items){ setData: function ( items ) {
this.root().html($.parseTmpl(this.subTmpl,items)); this.root().html( $.parseTmpl( this.subTmpl, items ) );
return this; return this;
}, },
position:function(offset){ position: function ( offset ) {
this.root().css({ this.root().css( {
left:offset.x, left: offset.x,
top:offset.y top: offset.y
}); } );
return this; return this;
}, },
show:function(){ show: function () {
if(this.trigger('beforeshow') === false){ if ( this.trigger( 'beforeshow' ) === false ) {
return; return;
}else{ } else {
this.root().css({display:'block'}); this.root().css( {
this.trigger('aftershow'); display: 'block'
} );
this.trigger( 'aftershow' );
} }
return this; return this;
}, },
init: function (options) { init: function ( options ) {
var me = this; var me = this;
var eventName = { var eventName = {
click: 1, click: 1,
...@@ -49,55 +51,57 @@ KM.ui.define('dropmenu', { ...@@ -49,55 +51,57 @@ KM.ui.define('dropmenu', {
mouseout: 1 mouseout: 1
}; };
this.root($($.parseTmpl(this.tmpl, options))).on('click', 'li[class!="kmui-disabled kmui-divider kmui-dropdown-submenu"]',function (evt) { this.root( $( $.parseTmpl( this.tmpl, options ) ) ).on( 'click', 'li[class!="kmui-disabled kmui-divider kmui-dropdown-submenu"]', function ( evt ) {
$.proxy(options.click, me, evt, $(this).data('value'), $(this).data('label'),$(this))() $.proxy( options.click, me, evt, $( this ).data( 'value' ), $( this ).data( 'label' ), $( this ) )();
}).find('li').each(function (i, el) { } ).find( 'li' ).each( function ( i, el ) {
var $this = $(this); var $this = $( this );
if (!$this.hasClass("kmui-disabled kmui-divider kmui-dropdown-submenu")) { if ( !$this.hasClass( "kmui-disabled kmui-divider kmui-dropdown-submenu" ) ) {
var data = options.data[i]; var data = options.data[ i ];
$.each(eventName, function (k) { $.each( eventName, function ( k ) {
data[k] && $this[k](function (evt) { if ( data[ k ] ) {
$.proxy(data[k], el)(evt, data, me.root) $this[ k ]( function ( evt ) {
}) $.proxy( data[ k ], el )( evt, data, me.root );
}) } );
} }
}); } );
}
} );
}, },
_initEvent:function(){ _initEvent: function () {
this.root().on('mouseover','li[class="kmui-dropdown-submenu',function(e){ this.root().on( 'mouseover', 'li[class="kmui-dropdown-submenu', function ( e ) {
var $submenu = $(this).data('widget'); var $submenu = $( this ).data( 'widget' );
$submenu.kmui().show($(this),'right','position',5,2) $submenu.kmui().show( $( this ), 'right', 'position', 5, 2 );
}); } );
}, },
disabled: function (cb) { disabled: function ( cb ) {
$('li[class!=kmui-divider]', this.root()).each(function () { $( 'li[class!=kmui-divider]', this.root() ).each( function () {
var $el = $(this); var $el = $( this );
if (cb === true) { if ( cb === true ) {
$el.addClass('kmui-disabled') $el.addClass( 'kmui-disabled' );
} else if ($.isFunction(cb)) { } else if ( $.isFunction( cb ) ) {
$el.toggleClass('kmui-disabled', cb(li)) $el.toggleClass( 'kmui-disabled', cb( $el ) );
} else { } else {
$el.removeClass('kmui-disabled') $el.removeClass( 'kmui-disabled' );
} }
}); } );
}, },
val: function (val) { val: function ( val ) {
var currentVal; var currentVal;
$('li[class!="kmui-divider kmui-disabled kmui-dropdown-submenu"]', this.root()).each(function () { $( 'li[class!="kmui-divider kmui-disabled kmui-dropdown-submenu"]', this.root() ).each( function () {
var $el = $(this); var $el = $( this );
if (val === undefined) { if ( val === undefined ) {
if ($el.find('em.kmui-dropmenu-checked').length) { if ( $el.find( 'em.kmui-dropmenu-checked' ).length ) {
currentVal = $el.data('value'); currentVal = $el.data( 'value' );
return false return false;
} }
} else { } else {
$el.find('em').toggleClass('kmui-dropmenu-checked', $el.data('value') == val) $el.find( 'em' ).toggleClass( 'kmui-dropmenu-checked', $el.data( 'value' ) == val );
} }
}); } );
if (val === undefined) { if ( val === undefined ) {
return currentVal return currentVal;
} }
}, },
appendItem: function ( item ) { appendItem: function ( item ) {
...@@ -109,18 +113,18 @@ KM.ui.define('dropmenu', { ...@@ -109,18 +113,18 @@ KM.ui.define('dropmenu', {
var $item = $( html ).click( item.click ); var $item = $( html ).click( item.click );
this.root().append( $item ); this.root().append( $item );
}, },
addSubmenu: function (label, menu, index) { addSubmenu: function ( label, menu, index ) {
index = index || 0; index = index || 0;
var $list = $('li[class!=kmui-divider]', this.root()); var $list = $( 'li[class!=kmui-divider]', this.root() );
var $node = $('<li class="kmui-dropdown-submenu"><a tabindex="-1" href="#">' + label + '</a></li>').append(menu); var $node = $( '<li class="kmui-dropdown-submenu"><a tabindex="-1" href="#">' + label + '</a></li>' ).append( menu );
$node.data('widget',menu); $node.data( 'widget', menu );
if (index >= 0 && index < $list.length) { if ( index >= 0 && index < $list.length ) {
$node.insertBefore($list[index]); $node.insertBefore( $list[ index ] );
} else if (index < 0) { } else if ( index < 0 ) {
$node.insertBefore($list[0]); $node.insertBefore( $list[ 0 ] );
} else if (index >= $list.length) { } else if ( index >= $list.length ) {
$node.appendTo($list); $node.appendTo( $list );
} }
} }
}, 'menu'); }, 'menu' );
\ No newline at end of file \ No newline at end of file
...@@ -41,8 +41,8 @@ ...@@ -41,8 +41,8 @@
text-decoration: none; text-decoration: none;
} }
.kmui-dropdown-menu > li > a:hover, .kmui-dropdown-menu > li:hover > a,
.kmui-dropdown-menu > li > a:focus { .kmui-dropdown-menu > li:focus > a {
background: #0099f2; /* Old browsers */ background: #0099f2; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOTlmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDA5NmVlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNzZkZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOTlmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNDA5NmVlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNzZkZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
......
...@@ -24,6 +24,7 @@ html, body, #kityminder, div.kmui-editor-body { ...@@ -24,6 +24,7 @@ html, body, #kityminder, div.kmui-editor-body {
.kmui-container .kmui-toolbar{ .kmui-container .kmui-toolbar{
background-color: #fafafa; background-color: #fafafa;
z-index: 99999; z-index: 99999;
margin-right: 400px;
} }
.kmui-toolbar .kmui-btn-toolbar{ .kmui-toolbar .kmui-btn-toolbar{
padding: 5px; padding: 5px;
......
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