Skip to content

K
kityminder-core
Commit 1f1d26cf authored by techird's avatar techird
Browse files
Options

[Issue #21] 支持分享到社交网络

parent 107c3b09
Show whitespace changes
Inline Side-by-side
Showing with 116 additions and 34 deletions
dev/index.html
View file @ 1f1d26cf
......@@ -22,6 +22,21 @@
<body>
<div id="kityminder" onselectstart="return false"></div>
<div id="share-dialog" >
<h3>URL分享：</h3>
<p>
<input id="share-url" type="url" value="" />
</p>
<h3>社交分享：</h3>
<p id="share-platform" class="bdsharebuttonbox">
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
</p>
</div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdMini":"2","bdMiniList":[],"bdPic":"","bdStyle":"1","bdSize":"32"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
</body>
<script>
// create km instance
......
dist/index.html
View file @ 1f1d26cf
......@@ -24,6 +24,21 @@
<body>
<div id="kityminder" onselectstart="return false"></div>
<div id="share-dialog" >
<h3>URL分享：</h3>
<p>
<input id="share-url" type="url" value="" />
</p>
<h3>社交分享：</h3>
<p id="share-platform" class="bdsharebuttonbox">
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
</p>
</div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdMini":"2","bdMiniList":[],"bdPic":"","bdStyle":"1","bdSize":"32"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
<p id="about">
KityMinder <a id="km-version" href="https://github.com/fex-team/kityminder/blob/dev/CHANGELOG.md" target="blank"></a>, Powered by f-cube, <a href="http://fex.baidu.com" target="_blank">FEX</a> |
<a href="https://github.com/fex-team/kityminder.git" target="_blank">Source</a> |
......
social/social.css
View file @ 1f1d26cf
......@@ -19,3 +19,8 @@ button.user-file{position:relative;padding-right:28px}button.user-file:after{con
.draft-menu.kmui-combobox-menu .kmui-combobox-checked .kmui-combobox-item-label{display:block;margin-left:28px}
.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}
.user-file-menu{margin-top:20px;margin-left:1px}
#share-dialog{position:absolute;padding:20px;border-radius:4px;right:10px;top:65px;background:#fff;width:300px;box-shadow:1px 2px 16px rgba(0,0,0,0.5);display:none}#share-dialog h3{margin:0;font-size:16px;color:#666}
#share-dialog input{width:98%}
#share-dialog p,#share-dialog #share-platform{margin:20px 0 30px}
#share-dialog #share-platform{margin-bottom:0}
#share-dialog:before{position:absolute;content:' ';width:0;height:0;line-height:0;display:block;border:10px solid transparent;border-bottom-color:#fff;right:30px;top:-20px}
social/social.js
View file @ 1f1d26cf
/* global Promise: true */
/**
* 百度脑图社会化功能
*
* 1. 百度账号登陆
* 2. 百度云存储
* 3. 分享
* 4. 草稿箱
* @author techird
*/
$.extend( $.fn, {
disabled: function ( value ) {
if ( value === undefined ) return !!this.attr( 'disabled' );
......@@ -42,7 +49,8 @@ $.extend( $.fn, {
$( function () {
// UI 元素
var $panel, $login_btn, $save_btn, $share_btn, $user_btn, $user_menu, $draft_btn, $draft_menu,
var $panel, $login_btn, $save_btn, $share_btn, $user_btn, $user_menu,
$draft_btn, $draft_menu, $share_dialog, $share_url,
// 当前文件的远端路径
remotePath = null,
......@@ -57,17 +65,20 @@ $( function () {
return ( ( +new Date() * 10000 ) + ( Math.random() * 9999 ) ).toString( 36 );
},
// 当前脑图的分享连接
// 当前脑图的分享ID
shareId = uuid(),
titleSuffix = document.title || 'Kity Minder',
titleSuffix = document.title || '百度脑图',
notice = window.alert,
// 脑图实例
minder = window.km,
// 草稿箱
draftManager = new window.DraftManager( minder ),
// 当前是否要检测文档内容是否变化的开关
watchingChanges = true;
start();
......@@ -119,6 +130,19 @@ $( function () {
$draft_menu = $.kmuidropmenu().addClass( 'draft-menu kmui-combobox-menu' ).appendTo( 'body' );
$draft_menu.kmui().attachTo( $draft_btn );
$draft_menu.on( 'aftershow', showDraftList );
$share_dialog = $( '#share-dialog' );
$share_url = $( '#share-url' );
$share_dialog.mousedown( function ( e ) {
e.stopPropagation();
} );
$( 'body' ).on( 'mousedown', function ( e ) {
$share_dialog.hide();
$share_btn.loading( false );
} );
}
// 初始化云平台 frontia
......@@ -184,7 +208,7 @@ $( function () {
$user_btn.text( '* ' + minder.getMinderTitle() );
}
document.title = [ filename, titleSuffix ].join( ' - ' );
document.title = [ filename || minder.getMinderTitle(), titleSuffix ].join( ' - ' );
if ( saved ) {
$save_btn.disabled( true ).text( '已保存' );
......@@ -399,41 +423,21 @@ $( function () {
}
} );
var shareConfig = window._bd_share_config.common,
resetShare = window._bd_share_main.init;
$share_btn.loading( '正在分享...' );
baidu.frontia.storage.insertData( shareData, {
success: function () {
var $popup, $url;
$popup = $( '<div></div>' ).addClass( 'popup' ).appendTo( 'body' );
$popup.css( {
'position': 'absolute',
'right': 10,
'top': $share_btn.offset().top + $share_btn.height() + 10,
'width': 250,
'padding': 10,
'background': 'white',
'border-radius': '5px',
'box-shadow': '1px 2px 4px rgba(0, 0, 0, .3)'
} );
$popup.append( '<p style="margin: 5px 0; font-size: 12px;">分享成功，请复制URL：</p>' );
$url = $( '<input type="text" style="width: 250px;" value="' + shareUrl + '"></input>' ).appendTo( $popup );
$url[ 0 ].select();
$popup.mousedown( function ( e ) {
e.stopPropagation();
} );
$( 'body' ).one( 'mousedown', function ( e ) {
$popup.fadeOut( 'fast', function () {
$popup.remove();
} );
$share_btn.loading( false );
} );
$share_dialog.show();
$share_url.val( shareUrl )[ 0 ].select();
}
} );
shareConfig.bdTitle = shareConfig.bdText = minder.getMinderTitle();
shareConfig.bdDesc = shareConfig.bdText = '“' + minder.getMinderTitle() + '” - 我用百度脑图制作的思维导图，快看看吧！（地址：' + shareUrl + '）';
shareConfig.bdUrl = shareUrl;
resetShare();
}
function bindShortCuts() {
......
social/social.less
View file @ 1f1d26cf
......@@ -191,3 +191,46 @@ button {
margin-top: 20px;
margin-left: 1px;
}
#share-dialog {
position: absolute;
padding: 20px;
border-radius: 4px;
right: 10px;
top: 65px;
background: white;
width: 300px;
box-shadow: 1px 2px 16px rgba(0, 0, 0, .5);
display: none;
h3 {
margin: 0;
font-size: 16px;
color: #666;
}
input {
width: 98%;
}
p, #share-platform {
margin: 20px 0 30px;
}
#share-platform {
margin-bottom: 0;
}
&:before {
position: absolute;
content: ' ';
width: 0;
height: 0;
line-height: 0;
display: block;
border: 10px solid transparent;
border-bottom-color: white;
right: 30px;
top: -20px;
}
}
\ No newline at end of file
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