From 55e8ad6b0c2547d83be50b59472411920115e70a Mon Sep 17 00:00:00 2001 From: Daniel James Date: Thu, 15 Oct 2015 23:29:01 +0100 Subject: [PATCH 1/2] The twitter share can now use a short URL, specified using a link tag like so: --- README.md | 3 +++ dist/selection-sharer.js | 2 +- src/selection-sharer.js | 5 +++-- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 34d57c2..e592a30 100644 --- a/README.md +++ b/README.md @@ -27,6 +27,9 @@ The url shared can be set using the og:url tag: +The url shared via twitter can be set using a link tag with the "shortlink" rel attribute -- see http://microformats.org/wiki/rel-shortlink for more information: + + Or if you are using [requirejs](http://requirejs.org), you can do: diff --git a/dist/selection-sharer.js b/dist/selection-sharer.js index 92d178e..58f5453 100644 --- a/dist/selection-sharer.js +++ b/dist/selection-sharer.js @@ -1 +1 @@ -/* @author: Xavier Damman (@xdamman) - http://github.com/xdamman/selection-sharer - @license: MIT */!function(a){var b=function(b){var c=this;b=b||{},"string"==typeof b&&(b={elements:b}),this.sel=null,this.textSelection="",this.htmlSelection="",this.appId=a('meta[property="fb:app_id"]').attr("content")||a('meta[property="fb:app_id"]').attr("value"),this.url2share=a('meta[property="og:url"]').attr("content")||a('meta[property="og:url"]').attr("value")||window.location.href,this.getSelectionText=function(a){var b="",d="",a=a||window.getSelection();if(a.rangeCount){for(var e=document.createElement("div"),f=0,g=a.rangeCount;g>f;++f)e.appendChild(a.getRangeAt(f).cloneContents());d=e.textContent,b=e.innerHTML}return c.textSelection=d,c.htmlSelection=b||d,d},this.selectionDirection=function(a){var b=a||window.getSelection(),c=document.createRange();if(!b.anchorNode)return 0;c.setStart(b.anchorNode,b.anchorOffset),c.setEnd(b.focusNode,b.focusOffset);var d=c.collapsed?"backward":"forward";return c.detach(),d},this.showPopunder=function(){c.popunder=c.popunder||document.getElementById("selectionSharerPopunder");var a=window.getSelection(),b=c.getSelectionText(a);if(a.isCollapsed||b.length<10||!b.match(/ /))return c.hidePopunder();if(c.popunder.classList.contains("fixed"))return c.popunder.style.bottom=0;var d=a.getRangeAt(0),e=d.endContainer.parentNode;if(c.popunder.classList.contains("show")){if(Math.ceil(c.popunder.getBoundingClientRect().top)==Math.ceil(e.getBoundingClientRect().bottom))return;return c.hidePopunder(c.showPopunder)}if(e.nextElementSibling)c.pushSiblings(e);else{c.placeholder||(c.placeholder=document.createElement("div"),c.placeholder.className="selectionSharerPlaceholder");var f=window.getComputedStyle(e).marginBottom;c.placeholder.style.height=f,c.placeholder.style.marginBottom=-2*parseInt(f,10)+"px",e.parentNode.insertBefore(c.placeholder)}var g=window.pageYOffset+e.getBoundingClientRect().bottom;c.popunder.style.top=Math.ceil(g)+"px",setTimeout(function(){c.placeholder&&c.placeholder.classList.add("show"),c.popunder.classList.add("show")},0)},this.pushSiblings=function(a){for(;a=a.nextElementSibling;)a.classList.add("selectionSharer"),a.classList.add("moveDown")},this.hidePopunder=function(a){if(a=a||function(){},"fixed"==c.popunder)return c.popunder.style.bottom="-50px",a();c.popunder.classList.remove("show"),c.placeholder&&c.placeholder.classList.remove("show");for(var b=document.getElementsByClassName("moveDown");el=b[0];)el.classList.remove("moveDown");setTimeout(function(){c.placeholder&&document.body.insertBefore(c.placeholder),a()},600)},this.show=function(a){setTimeout(function(){var b=window.getSelection(),d=c.getSelectionText(b);if(!b.isCollapsed&&d&&d.length>10&&d.match(/ /)){var e=b.getRangeAt(0),f=e.getBoundingClientRect().top-5,g=f+window.scrollY-c.$popover.height(),h=0;if(a)h=a.pageX;else{var i=b.anchorNode.parentNode;h+=i.offsetWidth/2;do h+=i.offsetLeft;while(i=i.offsetParent)}switch(c.selectionDirection(b)){case"forward":h-=c.$popover.width();break;case"backward":h+=c.$popover.width();break;default:return}c.$popover.removeClass("anim").css("top",g+10).css("left",h).show(),setTimeout(function(){c.$popover.addClass("anim").css("top",g)},0)}},10)},this.hide=function(a){c.$popover.hide()},this.smart_truncate=function(a,b){if(!a||!a.length)return a;var c=a.length>b,d=c?a.substr(0,b-1):a;return d=c?d.substr(0,d.lastIndexOf(" ")):d,c?d+"...":d},this.getRelatedTwitterAccounts=function(){var b=[],c=a('meta[name="twitter:creator"]').attr("content")||a('meta[name="twitter:creator"]').attr("value");c&&b.push(c);for(var d=document.getElementsByTagName("a"),e=0,f=d.length;f>e;e++)if(d[e].attributes.href&&"string"==typeof d[e].attributes.href.value){var g=d[e].attributes.href.value.match(/^https?:\/\/twitter\.com\/([a-z0-9_]{1,20})/i);g&&g.length>1&&-1==["widgets","intent"].indexOf(g[1])&&b.push(g[1])}return b.length>0?b.join(","):""},this.shareTwitter=function(a){a.preventDefault();var b="“"+c.smart_truncate(c.textSelection.trim(),114)+"”",d="http://twitter.com/intent/tweet?text="+encodeURIComponent(b)+"&related="+c.relatedTwitterAccounts+"&url="+encodeURIComponent(window.location.href);c.viaTwitterAccount&&b.length<114-c.viaTwitterAccount.length&&(d+="&via="+c.viaTwitterAccount);var e=640,f=440,g=screen.width/2-e/2,h=screen.height/2-f/2-100;return window.open(d,"share_twitter","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width="+e+", height="+f+", top="+h+", left="+g),c.hide(),!1},this.shareFacebook=function(a){a.preventDefault();var b=c.htmlSelection.replace(/]*>/gi,"\n").replace(/<\/p>| /gi,"").trim(),d="https://www.facebook.com/dialog/feed?app_id="+c.appId+"&display=popup&caption="+encodeURIComponent(b)+"&link="+encodeURIComponent(c.url2share)+"&href="+encodeURIComponent(c.url2share)+"&redirect_uri="+encodeURIComponent(c.url2share),e=640,f=440,g=screen.width/2-e/2,h=screen.height/2-f/2-100;window.open(d,"share_facebook","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width="+e+", height="+f+", top="+h+", left="+g)},this.shareEmail=function(b){var d=c.htmlSelection.replace(/]*>/gi,"\n").replace(/<\/p>| /gi,"").trim(),e={};return e.subject=encodeURIComponent("Quote from "+document.title),e.body=encodeURIComponent("“"+d+"”")+"%0D%0A%0D%0AFrom: "+document.title+"%0D%0A"+window.location.href,a(this).attr("href","mailto:?subject="+e.subject+"&body="+e.body),c.hide(),!0},this.render=function(){var b='',d='
';c.$popover=a(b),c.$popover.find("a.tweet").click(c.shareTwitter),c.$popover.find("a.facebook").click(c.shareFacebook),c.$popover.find("a.email").click(c.shareEmail),a("body").append(c.$popover),c.$popunder=a(d),c.$popunder.find("a.tweet").click(c.shareTwitter),c.$popunder.find("a.facebook").click(c.shareFacebook),c.$popunder.find("a.email").click(c.shareEmail),a("body").append(c.$popunder),c.appId&&c.url2share&&a(".selectionSharer a.facebook").css("display","inline-block")},this.setElements=function(b){"string"==typeof b&&(b=a(b)),c.$elements=b instanceof a?b:a(b),c.$elements.mouseup(c.show).mousedown(c.hide).addClass("selectionShareable"),c.$elements.bind("touchstart",function(a){c.isMobile=!0}),document.onselectionchange=c.selectionChanged},this.selectionChanged=function(a){c.isMobile&&(c.lastSelectionChanged&&clearTimeout(c.lastSelectionChanged),c.lastSelectionChanged=setTimeout(function(){c.showPopunder(a)},300))},this.render(),b.elements&&this.setElements(b.elements)};a.fn.selectionSharer=function(){var a=new b;return a.setElements(this),this},"function"==typeof define?define(function(){return b.load=function(a,c,d,e){var f=new b;f.setElements("p"),d()},b}):window.SelectionSharer=b}(jQuery); \ No newline at end of file +/* @author: Xavier Damman (@xdamman) - http://github.com/xdamman/selection-sharer - @license: MIT */!function(e){var t=function(t){var o=this;t=t||{},"string"==typeof t&&(t={elements:t}),this.sel=null,this.textSelection="",this.htmlSelection="",this.appId=e('meta[property="fb:app_id"]').attr("content")||e('meta[property="fb:app_id"]').attr("value"),this.url2share=e('meta[property="og:url"]').attr("content")||e('meta[property="og:url"]').attr("value")||window.location.href,this.shorturl=e('link[rel="shortlink"]').attr("href")||this.url2share,this.getSelectionText=function(e){var t="",n="",e=e||window.getSelection();if(e.rangeCount){for(var i=document.createElement("div"),r=0,a=e.rangeCount;a>r;++r)i.appendChild(e.getRangeAt(r).cloneContents());n=i.textContent,t=i.innerHTML}return o.textSelection=n,o.htmlSelection=t||n,n},this.selectionDirection=function(e){var t=e||window.getSelection(),o=document.createRange();if(!t.anchorNode)return 0;o.setStart(t.anchorNode,t.anchorOffset),o.setEnd(t.focusNode,t.focusOffset);var n=o.collapsed?"backward":"forward";return o.detach(),n},this.showPopunder=function(){o.popunder=o.popunder||document.getElementById("selectionSharerPopunder");var e=window.getSelection(),t=o.getSelectionText(e);if(e.isCollapsed||t.length<10||!t.match(/ /))return o.hidePopunder();if(o.popunder.classList.contains("fixed"))return o.popunder.style.bottom=0;var n=e.getRangeAt(0),i=n.endContainer.parentNode;if(o.popunder.classList.contains("show")){if(Math.ceil(o.popunder.getBoundingClientRect().top)==Math.ceil(i.getBoundingClientRect().bottom))return;return o.hidePopunder(o.showPopunder)}if(i.nextElementSibling)o.pushSiblings(i);else{o.placeholder||(o.placeholder=document.createElement("div"),o.placeholder.className="selectionSharerPlaceholder");var r=window.getComputedStyle(i).marginBottom;o.placeholder.style.height=r,o.placeholder.style.marginBottom=-2*parseInt(r,10)+"px",i.parentNode.insertBefore(o.placeholder)}var a=window.pageYOffset+i.getBoundingClientRect().bottom;o.popunder.style.top=Math.ceil(a)+"px",setTimeout(function(){o.placeholder&&o.placeholder.classList.add("show"),o.popunder.classList.add("show")},0)},this.pushSiblings=function(e){for(;e=e.nextElementSibling;)e.classList.add("selectionSharer"),e.classList.add("moveDown")},this.hidePopunder=function(e){if(e=e||function(){},"fixed"==o.popunder)return o.popunder.style.bottom="-50px",e();o.popunder.classList.remove("show"),o.placeholder&&o.placeholder.classList.remove("show");for(var t=document.getElementsByClassName("moveDown");el=t[0];)el.classList.remove("moveDown");setTimeout(function(){o.placeholder&&document.body.insertBefore(o.placeholder),e()},600)},this.show=function(e){setTimeout(function(){var t=window.getSelection(),n=o.getSelectionText(t);if(!t.isCollapsed&&n&&n.length>10&&n.match(/ /)){var i=t.getRangeAt(0),r=i.getBoundingClientRect().top-5,a=r+window.scrollY-o.$popover.height(),s=0;if(e)s=e.pageX;else{var l=t.anchorNode.parentNode;s+=l.offsetWidth/2;do s+=l.offsetLeft;while(l=l.offsetParent)}switch(o.selectionDirection(t)){case"forward":s-=o.$popover.width();break;case"backward":s+=o.$popover.width();break;default:return}o.$popover.removeClass("anim").css("top",a+10).css("left",s).show(),setTimeout(function(){o.$popover.addClass("anim").css("top",a)},0)}},10)},this.hide=function(){o.$popover.hide()},this.smart_truncate=function(e,t){if(!e||!e.length)return e;var o=e.length>t,n=o?e.substr(0,t-1):e;return n=o?n.substr(0,n.lastIndexOf(" ")):n,o?n+"...":n},this.getRelatedTwitterAccounts=function(){var t=[],o=e('meta[name="twitter:creator"]').attr("content")||e('meta[name="twitter:creator"]').attr("value");alert(o),o&&t.push(o);for(var n=document.getElementsByTagName("a"),i=0,r=n.length;r>i;i++)if(n[i].attributes.href&&"string"==typeof n[i].attributes.href.value){var a=n[i].attributes.href.value.match(/^https?:\/\/twitter\.com\/([a-z0-9_]{1,20})/i);a&&a.length>1&&-1==["widgets","intent"].indexOf(a[1])&&t.push(a[1])}return t.length>0?t.join(","):""},this.shareTwitter=function(e){e.preventDefault();var t="“"+o.smart_truncate(o.textSelection.trim(),114)+"”",n="http://twitter.com/intent/tweet?text="+encodeURIComponent(t)+"&related="+o.relatedTwitterAccounts+"&url="+encodeURIComponent(o.shorturl);o.viaTwitterAccount&&t.length<114-o.viaTwitterAccount.length&&(n+="&via="+o.viaTwitterAccount);var i=640,r=440,a=screen.width/2-i/2,s=screen.height/2-r/2-100;return window.open(n,"share_twitter","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width="+i+", height="+r+", top="+s+", left="+a),o.hide(),!1},this.shareFacebook=function(e){e.preventDefault();var t=o.htmlSelection.replace(/]*>/gi,"\n").replace(/<\/p>| /gi,"").trim(),n="https://www.facebook.com/dialog/feed?app_id="+o.appId+"&display=popup&caption="+encodeURIComponent(t)+"&link="+encodeURIComponent(o.url2share)+"&href="+encodeURIComponent(o.url2share)+"&redirect_uri="+encodeURIComponent(o.url2share),i=640,r=440,a=screen.width/2-i/2,s=screen.height/2-r/2-100;window.open(n,"share_facebook","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width="+i+", height="+r+", top="+s+", left="+a)},this.shareEmail=function(){var t=o.textSelection.replace(/]*>/gi,"\n").replace(/<\/p>| /gi,"").trim(),n={};return n.subject=encodeURIComponent("Quote from "+document.title),n.body=encodeURIComponent("“"+t+"”")+"%0D%0A%0D%0AFrom: "+document.title+"%0D%0A"+window.location.href,e(this).attr("href","mailto:?subject="+n.subject+"&body="+n.body),o.hide(),!0},this.render=function(){var t='',n='
';o.$popover=e(t),o.$popover.find("a.tweet").click(o.shareTwitter),o.$popover.find("a.facebook").click(o.shareFacebook),o.$popover.find("a.email").click(o.shareEmail),e("body").append(o.$popover),o.$popunder=e(n),o.$popunder.find("a.tweet").click(o.shareTwitter),o.$popunder.find("a.facebook").click(o.shareFacebook),o.$popunder.find("a.email").click(o.shareEmail),e("body").append(o.$popunder),o.appId&&o.url2share&&e(".selectionSharer a.facebook").css("display","inline-block")},this.setElements=function(t){"string"==typeof t&&(t=e(t)),o.$elements=t instanceof e?t:e(t),o.$elements.mouseup(o.show).mousedown(o.hide).addClass("selectionShareable"),o.$elements.bind("touchstart",function(){o.isMobile=!0}),document.onselectionchange=o.selectionChanged},this.selectionChanged=function(e){o.isMobile&&(o.lastSelectionChanged&&clearTimeout(o.lastSelectionChanged),o.lastSelectionChanged=setTimeout(function(){o.showPopunder(e)},300))},this.render(),t.elements&&this.setElements(t.elements)};e.fn.selectionSharer=function(){var e=new t;return e.setElements(this),this},"function"==typeof define?define(function(){return t.load=function(e,o,n){var i=new t;i.setElements("p"),n()},t}):window.SelectionSharer=t}(jQuery); \ No newline at end of file diff --git a/src/selection-sharer.js b/src/selection-sharer.js index 5912af2..b8ccdd1 100644 --- a/src/selection-sharer.js +++ b/src/selection-sharer.js @@ -25,6 +25,7 @@ this.appId = $('meta[property="fb:app_id"]').attr("content") || $('meta[property="fb:app_id"]').attr("value"); this.url2share = $('meta[property="og:url"]').attr("content") || $('meta[property="og:url"]').attr("value") || window.location.href; + this.shorturl = $('link[rel="shortlink"]').attr("href") || this.url2share; this.getSelectionText = function(sel) { var html = "", text = ""; @@ -190,9 +191,9 @@ var usernames = []; var creator = $('meta[name="twitter:creator"]').attr("content") || $('meta[name="twitter:creator"]').attr("value"); + alert(creator); if(creator) usernames.push(creator); - // We scrape the page to find a link to http(s)://twitter.com/username var anchors = document.getElementsByTagName('a'); for(var i=0, len=anchors.length;i]*>/ig,'\n').replace(/<\/p>| /ig,'').trim(); + var text = self.htmlSelection.replace(/]*>/ig,'\n').replace(/<\/p>| /ig,'').trim(); + var name = $('h1[itemprop="headline"]').text() || $('h1.p-name').text() || $('h1').text(); + var img = $('img.u-img').attr('src') || $('img[itemprop="image"]').attr('src'); + var picture = document.location.origin + img; + var url = 'https://www.facebook.com/dialog/feed?' + 'app_id='+self.appId + '&display=popup'+ - '&caption='+encodeURIComponent(text)+ + '&picture='+encodeURIComponent(picture)+ + '&caption='+document.domain+ + '&name='+encodeURIComponent(name)+ + '&description='+encodeURIComponent(text)+ '&link='+encodeURIComponent(self.url2share)+ '&href='+encodeURIComponent(self.url2share)+ '&redirect_uri='+encodeURIComponent(self.url2share);