Last active
October 1, 2017 15:44
-
-
Save danielpataki/220838aa9dd3804a7dee to your computer and use it in GitHub Desktop.
Select And Tweet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// actions when the user starts the selection | |
$('.entry-content').mousedown(function (event) { | |
// take the position of the mouse where the user starts the selection | |
// we need this for showing the share button in the middle of the selection | |
$('body').attr('mouse-top',event.clientY+window.pageYOffset); //-> sets up the top value as attribute on body tag. | |
$('body').attr('mouse-left',event.clientX); //-> sets up the left value as attribute on body tag. | |
// remove share button and the old selection - ! Just if the user clicks the left button of the mouse. For right click we must show the genuine browser menu. | |
if(!getRightClick(event) && getSelectionText().length > 0) { | |
$('.twtshare').remove(); //-> remove share button | |
document.getSelection().removeAllRanges(); //-> remove old selection | |
} | |
}); | |
// actions when the user ends the selection | |
$('.entry-content').mouseup(function (event) { | |
var t = $(event.target); | |
var st = getSelectionText(); | |
// go further just if user click is left mouse click and the selection length is grater than 3 characters | |
if(st.length > 3 && !getRightClick(event)) { | |
// get the mouse top position when the selection ends | |
mts = $('body').attr('mouse-top'); | |
mte = event.clientY+window.pageYOffset; | |
if(parseInt(mts) < parseInt(mte)) mt = mts; | |
else mt = mte; | |
// get left mouse position when the selection ends | |
mlp = $('body').attr('mouse-left'); | |
mrp = event.clientX; | |
ml = parseInt(mlp)+(parseInt(mrp)-parseInt(mlp))/2; | |
// create the sharing link parameter that will be pass to twitter | |
sl = window.location.href.split('?')[0]; | |
// cut the selection to a maximum of 107 - twitter accepts ~120 chars but we have some other info to display, like the account name | |
maxl = 107; | |
st = st.substring(0,maxl); | |
// create the sharing button | |
$('body').append("<a href=\"https://twitter.com/share?url="+encodeURIComponent(sl)+"&text="+encodeURIComponent(st)+"\" class='twtshare icon-social-twitter' onclick=\"window.open(this.href, \'\', \'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600\');return false;\"></a>"); | |
// show link on calculated position (top of selection and middle of it horizontaly) | |
$('.twtshare').css({ | |
position: 'absolute', | |
top: parseInt(mt)-60, | |
left: parseInt(ml) | |
}); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/* | |
Plugin Name: Select And Tweet | |
Plugin URI: http://www.danielpataki.com/ | |
Description: This plugin allows users to select text and tweet it. | |
Version: 3.4.2 | |
Author: Daniel Pataki | |
Author URI: http://www.danielpataki.com/ | |
Text Domain: select-and-tweet | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function sat_enqueue_assets() { | |
if ( is_single() ) { | |
wp_enqueue_style( 'select-and-tweet', plugins_url( '/select-and-tweet.css', __FILE__ ) ); | |
wp_enqueue_script( 'select-and-tweet', plugins_url( '/select-and-tweet.js', __FILE__ ), array( 'jquery' ), '1.0', true ); | |
} | |
} | |
add_action( 'wp_enqueue_scripts', 'sat_enqueue_assets' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(document).ready(function($) { | |
function getRightClick(e) { | |
var rightclick; | |
if (!e) var e = window.event; | |
if (e.which) rightclick = (e.which == 3); | |
else if (e.button) rightclick = (e.button == 2); | |
return rightclick; // true or false | |
} | |
function getSelectionText() { | |
var text = ""; | |
if (window.getSelection) { | |
text = window.getSelection().toString(); | |
} else if (document.selection && document.selection.type != "Control") { | |
text = document.selection.createRange().text; | |
} | |
return text; | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@charset "UTF-8"; | |
@font-face { | |
font-family: "t"; | |
src:url("fonts/t.eot"); | |
src:url("fonts/t.eot?#iefix") format("embedded-opentype"), | |
url("fonts/t.woff") format("woff"), | |
url("fonts/t.ttf") format("truetype"), | |
url("fonts/t.svg#t") format("svg"); | |
font-weight: normal; | |
font-style: normal; | |
} | |
[data-icon]:before { | |
font-family: "t" !important; | |
content: attr(data-icon); | |
font-style: normal !important; | |
font-weight: normal !important; | |
font-variant: normal !important; | |
text-transform: none !important; | |
speak: none; | |
line-height: 1; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
[class^="icon-"]:before, | |
[class*=" icon-"]:before { | |
font-family: "t" !important; | |
font-style: normal !important; | |
font-weight: normal !important; | |
font-variant: normal !important; | |
text-transform: none !important; | |
speak: none; | |
line-height: 1; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
.icon-social-twitter:before { | |
content: "t"; | |
} | |
@keyframes twtfade { | |
0% { @include opacity(0); } | |
100% { @include opacity(100); } | |
} | |
@-webkit-keyframes twtfade { | |
0% { @include opacity(0); } | |
100% { @include opacity(100); } | |
} | |
/* button body */ | |
.twtshare { | |
border-radius: 4px; | |
-moz-border-radius: 4px; | |
-webkit-border-radius: 4px; | |
margin-left: -35px; | |
background: #14485f; | |
color: #FFF; | |
width: 70px; | |
height: 35px; | |
display: block; | |
-webkit-animation-name: twtfade; | |
animation-name: twtfade; | |
-webkit-animation-duration: 0.3s; | |
animation-duration: 0.3s; | |
cursor: pointer; | |
text-decoration: none; | |
} | |
/* button bottom arrow */ | |
.twtshare:after { | |
margin-top: 0; | |
margin-left: -7px; | |
left: 50%; | |
position: absolute; | |
content: ''; | |
width: 0; | |
height: 0; | |
border-style: solid; | |
border-width: 8px 7.5px 0 7.5px; | |
border-color: #14485f transparent transparent transparent; | |
-moz-transition: border-color 0.3s; | |
-webkit-transition: border-color 0.3s; | |
-o-transition: border-color 0.3s; | |
-ms-transition: border-color 0.3s; | |
transition: border-color 0.3s; | |
} | |
/* button icon */ | |
.twtshare:before { | |
display: block; | |
width: 70px; | |
height: 35px; | |
line-height: 39px; | |
font-size: 18px; | |
text-align: center; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment