[Issue #22] 添加分享链接复制按钮

dev/index.html

@@ -4,6 +4,10 @@
     <meta charset="utf-8">
 
     <script src="../lib/jquery-2.1.0.min.js" charset="utf-8"></script>
+    <script src="../lib/ZeroClipboard.min.js" charset="utf-8"></script>
+    <script type="text/javascript">
+        ZeroClipboard.setDefaults( { moviePath: '../lib/ZeroClipboard.swf' } );
+    </script>
 
     <script src="../kity/dist/kitygraph.all.js" charset="utf-8"></script>
     <script src="../dev/import.php" charset="utf-8"></script>
@@ -25,7 +29,8 @@
     <div id="share-dialog" >
         <h3>URL分享：</h3>
         <p>
-            <input id="share-url" type="url" value="" />
+            <input id="share-url" type="url" value="http://naotu.baidu.com/?shareId=kcev3dd" />
+            <button id="copy-share-url" data-clipboard-target="share-url" type="button">复制</button>
         </p>
         <h3>社交分享：</h3>
         <p id="share-platform" class="bdsharebuttonbox">

dist/index.html

@@ -28,6 +28,7 @@
         <h3>URL分享：</h3>
         <p>
             <input id="share-url" type="url" value="" />
+            <button id="copy-share-url" type="button">复制</button>
         </p>
         <h3>社交分享：</h3>
         <p id="share-platform" class="bdsharebuttonbox">

lib/ZeroClipboard.min.js

+/*!
+* ZeroClipboard
+* The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.
+* Copyright (c) 2013 Jon Rohan, James M. Greene
+* Licensed MIT
+* http://zeroclipboard.org/
+* v1.2.3
+*/
+!function(){"use strict";var a,b=function(){var a=/\-([a-z])/g,b=function(a,b){return b.toUpperCase()};return function(c){return c.replace(a,b)}}(),c=function(a,c){var d,e,f,g,h,i;if(window.getComputedStyle?d=window.getComputedStyle(a,null).getPropertyValue(c):(e=b(c),d=a.currentStyle?a.currentStyle[e]:a.style[e]),"cursor"===c&&(!d||"auto"===d))for(f=a.tagName.toLowerCase(),g=["a"],h=0,i=g.length;i>h;h++)if(f===g[h])return"pointer";return d},d=function(a){if(p.prototype._singleton){a||(a=window.event);var b;this!==window?b=this:a.target?b=a.target:a.srcElement&&(b=a.srcElement),p.prototype._singleton.setCurrent(b)}},e=function(a,b,c){a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent&&a.attachEvent("on"+b,c)},f=function(a,b,c){a.removeEventListener?a.removeEventListener(b,c,!1):a.detachEvent&&a.detachEvent("on"+b,c)},g=function(a,b){if(a.addClass)return a.addClass(b),a;if(b&&"string"==typeof b){var c=(b||"").split(/\s+/);if(1===a.nodeType)if(a.className){for(var d=" "+a.className+" ",e=a.className,f=0,g=c.length;g>f;f++)d.indexOf(" "+c[f]+" ")<0&&(e+=" "+c[f]);a.className=e.replace(/^\s+|\s+$/g,"")}else a.className=b}return a},h=function(a,b){if(a.removeClass)return a.removeClass(b),a;if(b&&"string"==typeof b||void 0===b){var c=(b||"").split(/\s+/);if(1===a.nodeType&&a.className)if(b){for(var d=(" "+a.className+" ").replace(/[\n\t]/g," "),e=0,f=c.length;f>e;e++)d=d.replace(" "+c[e]+" "," ");a.className=d.replace(/^\s+|\s+$/g,"")}else a.className=""}return a},i=function(){var a,b,c,d=1;return"function"==typeof document.body.getBoundingClientRect&&(a=document.body.getBoundingClientRect(),b=a.right-a.left,c=document.body.offsetWidth,d=Math.round(100*(b/c))/100),d},j=function(a){var b={left:0,top:0,width:0,height:0,zIndex:999999999},d=c(a,"z-index");if(d&&"auto"!==d&&(b.zIndex=parseInt(d,10)),a.getBoundingClientRect){var e,f,g,h=a.getBoundingClientRect();"pageXOffset"in window&&"pageYOffset"in window?(e=window.pageXOffset,f=window.pageYOffset):(g=i(),e=Math.round(document.documentElement.scrollLeft/g),f=Math.round(document.documentElement.scrollTop/g));var j=document.documentElement.clientLeft||0,k=document.documentElement.clientTop||0;b.left=h.left+e-j,b.top=h.top+f-k,b.width="width"in h?h.width:h.right-h.left,b.height="height"in h?h.height:h.bottom-h.top}return b},k=function(a,b){var c=!(b&&b.useNoCache===!1);return c?(-1===a.indexOf("?")?"?":"&")+"nocache="+(new Date).getTime():""},l=function(a){var b=[],c=[];return a.trustedOrigins&&("string"==typeof a.trustedOrigins?c.push(a.trustedOrigins):"object"==typeof a.trustedOrigins&&"length"in a.trustedOrigins&&(c=c.concat(a.trustedOrigins))),a.trustedDomains&&("string"==typeof a.trustedDomains?c.push(a.trustedDomains):"object"==typeof a.trustedDomains&&"length"in a.trustedDomains&&(c=c.concat(a.trustedDomains))),c.length&&b.push("trustedOrigins="+encodeURIComponent(c.join(","))),"string"==typeof a.amdModuleId&&a.amdModuleId&&b.push("amdModuleId="+encodeURIComponent(a.amdModuleId)),"string"==typeof a.cjsModuleId&&a.cjsModuleId&&b.push("cjsModuleId="+encodeURIComponent(a.cjsModuleId)),b.join("&")},m=function(a,b){if(b.indexOf)return b.indexOf(a);for(var c=0,d=b.length;d>c;c++)if(b[c]===a)return c;return-1},n=function(a){if("string"==typeof a)throw new TypeError("ZeroClipboard doesn't accept query strings.");return a.length?a:[a]},o=function(a,b,c,d,e){e?window.setTimeout(function(){a.call(b,c,d)},0):a.call(b,c,d)},p=function(a,b){if(a&&(p.prototype._singleton||this).glue(a),p.prototype._singleton)return p.prototype._singleton;p.prototype._singleton=this,this.options={};for(var c in s)this.options[c]=s[c];for(var d in b)this.options[d]=b[d];this.handlers={},p.detectFlashSupport()&&v()},q=[];p.prototype.setCurrent=function(b){a=b,this.reposition();var d=b.getAttribute("title");d&&this.setTitle(d);var e=this.options.forceHandCursor===!0||"pointer"===c(b,"cursor");return r.call(this,e),this},p.prototype.setText=function(a){return a&&""!==a&&(this.options.text=a,this.ready()&&this.flashBridge.setText(a)),this},p.prototype.setTitle=function(a){return a&&""!==a&&this.htmlBridge.setAttribute("title",a),this},p.prototype.setSize=function(a,b){return this.ready()&&this.flashBridge.setSize(a,b),this},p.prototype.setHandCursor=function(a){return a="boolean"==typeof a?a:!!a,r.call(this,a),this.options.forceHandCursor=a,this};var r=function(a){this.ready()&&this.flashBridge.setHandCursor(a)};p.version="1.2.3";var s={moviePath:"ZeroClipboard.swf",trustedOrigins:null,text:null,hoverClass:"zeroclipboard-is-hover",activeClass:"zeroclipboard-is-active",allowScriptAccess:"sameDomain",useNoCache:!0,forceHandCursor:!1};p.setDefaults=function(a){for(var b in a)s[b]=a[b]},p.destroy=function(){p.prototype._singleton.unglue(q);var a=p.prototype._singleton.htmlBridge;a.parentNode.removeChild(a),delete p.prototype._singleton},p.detectFlashSupport=function(){var a=!1;if("function"==typeof ActiveXObject)try{new ActiveXObject("ShockwaveFlash.ShockwaveFlash")&&(a=!0)}catch(b){}return!a&&navigator.mimeTypes["application/x-shockwave-flash"]&&(a=!0),a};var t=null,u=null,v=function(){var a,b,c=p.prototype._singleton,d=document.getElementById("global-zeroclipboard-html-bridge");if(!d){var e={};for(var f in c.options)e[f]=c.options[f];e.amdModuleId=t,e.cjsModuleId=u;var g=l(e),h='      <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="global-zeroclipboard-flash-bridge" width="100%" height="100%">         <param name="movie" value="'+c.options.moviePath+k(c.options.moviePath,c.options)+'"/>         <param name="allowScriptAccess" value="'+c.options.allowScriptAccess+'"/>         <param name="scale" value="exactfit"/>         <param name="loop" value="false"/>         <param name="menu" value="false"/>         <param name="quality" value="best" />         <param name="bgcolor" value="#ffffff"/>         <param name="wmode" value="transparent"/>         <param name="flashvars" value="'+g+'"/>         <embed src="'+c.options.moviePath+k(c.options.moviePath,c.options)+'"           loop="false" menu="false"           quality="best" bgcolor="#ffffff"           width="100%" height="100%"           name="global-zeroclipboard-flash-bridge"           allowScriptAccess="always"           allowFullScreen="false"           type="application/x-shockwave-flash"           wmode="transparent"           pluginspage="http://www.macromedia.com/go/getflashplayer"           flashvars="'+g+'"           scale="exactfit">         </embed>       </object>';d=document.createElement("div"),d.id="global-zeroclipboard-html-bridge",d.setAttribute("class","global-zeroclipboard-container"),d.setAttribute("data-clipboard-ready",!1),d.style.position="absolute",d.style.left="-9999px",d.style.top="-9999px",d.style.width="15px",d.style.height="15px",d.style.zIndex="9999",d.innerHTML=h,document.body.appendChild(d)}c.htmlBridge=d,a=document["global-zeroclipboard-flash-bridge"],a&&(b=a.length)&&(a=a[b-1]),c.flashBridge=a||d.children[0].lastElementChild};p.prototype.resetBridge=function(){return this.htmlBridge.style.left="-9999px",this.htmlBridge.style.top="-9999px",this.htmlBridge.removeAttribute("title"),this.htmlBridge.removeAttribute("data-clipboard-text"),h(a,this.options.activeClass),a=null,this.options.text=null,this},p.prototype.ready=function(){var a=this.htmlBridge.getAttribute("data-clipboard-ready");return"true"===a||a===!0},p.prototype.reposition=function(){if(!a)return!1;var b=j(a);return this.htmlBridge.style.top=b.top+"px",this.htmlBridge.style.left=b.left+"px",this.htmlBridge.style.width=b.width+"px",this.htmlBridge.style.height=b.height+"px",this.htmlBridge.style.zIndex=b.zIndex+1,this.setSize(b.width,b.height),this},p.dispatch=function(a,b){p.prototype._singleton.receiveEvent(a,b)},p.prototype.on=function(a,b){for(var c=a.toString().split(/\s/g),d=0;d<c.length;d++)a=c[d].toLowerCase().replace(/^on/,""),this.handlers[a]||(this.handlers[a]=b);return this.handlers.noflash&&!p.detectFlashSupport()&&this.receiveEvent("onNoFlash",null),this},p.prototype.addEventListener=p.prototype.on,p.prototype.off=function(a,b){for(var c=a.toString().split(/\s/g),d=0;d<c.length;d++){a=c[d].toLowerCase().replace(/^on/,"");for(var e in this.handlers)e===a&&this.handlers[e]===b&&delete this.handlers[e]}return this},p.prototype.removeEventListener=p.prototype.off,p.prototype.receiveEvent=function(b,c){b=b.toString().toLowerCase().replace(/^on/,"");var d=a,e=!0;switch(b){case"load":if(c&&parseFloat(c.flashVersion.replace(",",".").replace(/[^0-9\.]/gi,""))<10)return this.receiveEvent("onWrongFlash",{flashVersion:c.flashVersion}),void 0;this.htmlBridge.setAttribute("data-clipboard-ready",!0);break;case"mouseover":g(d,this.options.hoverClass);break;case"mouseout":h(d,this.options.hoverClass),this.resetBridge();break;case"mousedown":g(d,this.options.activeClass);break;case"mouseup":h(d,this.options.activeClass);break;case"datarequested":var f=d.getAttribute("data-clipboard-target"),i=f?document.getElementById(f):null;if(i){var j=i.value||i.textContent||i.innerText;j&&this.setText(j)}else{var k=d.getAttribute("data-clipboard-text");k&&this.setText(k)}e=!1;break;case"complete":this.options.text=null}if(this.handlers[b]){var l=this.handlers[b];"string"==typeof l&&"function"==typeof window[l]&&(l=window[l]),"function"==typeof l&&o(l,d,this,c,e)}},p.prototype.glue=function(a){a=n(a);for(var b=0;b<a.length;b++)-1==m(a[b],q)&&(q.push(a[b]),e(a[b],"mouseover",d));return this},p.prototype.unglue=function(a){a=n(a);for(var b=0;b<a.length;b++){f(a[b],"mouseover",d);var c=m(a[b],q);-1!=c&&q.splice(c,1)}return this},"function"==typeof define&&define.amd?define(["require","exports","module"],function(a,b,c){return t=c&&c.id||null,p}):"object"==typeof module&&module&&"object"==typeof module.exports&&module.exports?(u=module.id||null,module.exports=p):window.ZeroClipboard=p}();
\ No newline at end of file

social/social.css

 #social{position:absolute;right:10px;top:10px;line-height:20px;text-align:right;overflow:hidden}
 .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}
-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}
-button:active{background:#007fcc;box-shadow:inset 0 2px 3px rgba(0,0,0,0.2)}
-button[disabled]{background:#aaa}
+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,button.hover{background:#009fff}
+button:active,button.active{background:#007fcc;box-shadow:inset 0 2px 3px rgba(0,0,0,0.2)}
+button[disabled]{background:#aaa;cursor:default}
 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}
 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}
@@ -19,8 +19,9 @@ 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{position:absolute;padding:20px;border-radius:4px;right:10px;top:65px;background:#fff;width:350px;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:260px;height:22px;line-height:22px;padding:4px 4px 0;border:1px solid #999;vertical-align:middle;margin-right:3px;background:#eee}#share-dialog input:focus{border:1px solid #99f;outline:none}
 #share-dialog p,#share-dialog #share-platform{margin:20px 0 30px}
+#share-dialog #copy-share-url{display:inline-block;margin:0;width:70px;height:28px;line-height:28px;border-radius:2px;vertical-align:middle}
 #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

@@ -45,12 +45,14 @@ $.extend( $.fn, {
     } )()
 } );
 
-
+/**
+ * 核心业务逻辑
+ */
 $( function () {
 
     // UI 元素
     var $panel, $login_btn, $save_btn, $share_btn, $user_btn, $user_menu,
-        $draft_btn, $draft_menu, $share_dialog, $share_url,
+        $draft_btn, $draft_menu, $share_dialog, $share_url, $copy_url_btn,
 
         // 当前文件的远端路径
         remotePath = null,
@@ -70,8 +72,6 @@ $( function () {
 
         titleSuffix = document.title || '百度脑图',
 
-        notice = window.alert,
-
         // 脑图实例
         minder = window.km,
 
@@ -79,7 +79,11 @@ $( function () {
         draftManager = new window.DraftManager( minder ),
 
         // 当前是否要检测文档内容是否变化的开关
-        watchingChanges = true;
+        watchingChanges = true,
+
+        notice = (function() {
+            return window.alert;
+        })();
 
     start();
 
@@ -120,10 +124,10 @@ $( function () {
         $user_menu.attachTo( $user_btn );
 
         $save_btn = $( '<button id="save-btn">保存</button>' ).click( save )
-            .addClass( 'baidu-cloud' ).appendTo( $panel ).disabled( true );
+            .addClass( 'baidu-cloud' );
 
         $share_btn = $( '<button id="share-btn">分享</button>' ).click( share )
-            .addClass( 'share' ).appendTo( $panel ).disabled( true );
+            .addClass( 'share' ).appendTo( $panel );
 
         $draft_btn = $( '<button id="draft-btn">草稿箱</button>' ).appendTo( 'body' );
 
@@ -133,15 +137,28 @@ $( function () {
 
         $share_dialog = $( '#share-dialog' );
         $share_url = $( '#share-url' );
-
+        $copy_url_btn = $( '#copy-share-url' );
 
         $share_dialog.mousedown( function ( e ) {
             e.stopPropagation();
         } );
 
+        var copyTrickTimer = 0;
         $( 'body' ).on( 'mousedown', function ( e ) {
+            copyTrickTimer = setTimeout( function () {
                 $share_dialog.hide();
                 $share_btn.loading( false );
+                $copy_url_btn.loading( false );
+            }, 30 );
+        } );
+
+        var clip = new window.ZeroClipboard( $copy_url_btn, {
+            hoverClass: 'hover',
+            activeClass: 'active'
+        } );
+        clip.on( 'dataRequested', function ( client, args ) {
+            $copy_url_btn.loading( '已复制' );
+            clearTimeout( copyTrickTimer );
         } );
     }
 
@@ -173,8 +190,18 @@ $( function () {
 
         baidu.frontia.storage.findData( query, {
             success: function ( ret ) {
-                draftManager.create();
+                if ( ret.count === 0 ) {
+                    $share_btn.loading( false );
+                    return notice( '加载分享内容失败！请确认分享链接正确。' );
+                }
+                var draft = draftManager.openByPath( 'share/' + shareId );
+                if ( draft ) {
+                    draftManager.load();
+                } else {
+                    draftManager.create( 'share/' + shareId );
                     minder.importData( ret.result[ 0 ].obj.shareMinder.data, 'json' );
+                }
+                setRemotePath( null, false );
                 $share_btn.loading( false );
             },
             error: function ( e ) {
@@ -239,8 +266,7 @@ $( function () {
     function setAccount( account ) {
         currentAccount = account;
         $user_btn.prependTo( $panel );
-        $save_btn.disabled( false );
-        $share_btn.disabled( false );
+        $save_btn.appendTo( $panel );
         $login_btn.detach();
         loadAvator();
         loadRecent();

social/social.less

@@ -48,17 +48,18 @@ button {
     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 {
+    &:hover, &.hover {
         background: #009fff;
     }
 
-    &:active {
+    &:active, &.active {
         background: darken(#009fff, 10%);
         box-shadow: inset 0 2px 3px rgba(0,0,0, .2);
     }
 
     &[disabled] {
         background: #AAA;
+        cursor: default;
     }
 
     &.baidu-cloud {
@@ -199,7 +200,7 @@ button {
     right: 10px;
     top: 65px;
     background: white;
-    width: 300px;
+    width: 350px;
     box-shadow: 1px 2px 16px rgba(0, 0, 0, .5);
     display: none;
 
@@ -210,13 +211,34 @@ button {
     }
 
     input {
-        width: 98%;
+        width: 260px;
+        height: 22px;
+        line-height: 22px;
+        padding: 4px 4px 0;
+        border: 1px solid #999;
+        vertical-align: middle;
+        margin-right: 3px;
+        background: #EEE;
+        &:focus {
+            border: 1px solid #99f;
+            outline: none;
+        }
     }
 
     p, #share-platform {
         margin: 20px 0 30px;
     }
 
+    #copy-share-url {
+        display: inline-block;
+        margin: 0;
+        width: 70px;
+        height: 28px;
+        line-height: 28px;
+        border-radius: 2px;
+        vertical-align: middle;
+    }
+
     #share-platform {
         margin-bottom: 0;
     }