Skip to content

NEW: Popover on copy text, new social media option and tooltip icon name #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

NEW: Popover on copy text, new social media option and tooltip icon name #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7c6f9e9
NEW: add popover on copy text
AAKASHBANSAL96 Oct 4, 2023
7a88eed
NEW: added new option
AAKASHBANSAL96 Oct 4, 2023
7190551
FIX: update readme.md and icon name
AAKASHBANSAL96 Oct 4, 2023
8178608
UPDATE: remove testing text
AAKASHBANSAL96 Oct 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ To get started with Selection.js, download the [Script](https://github.com/prate
var selection = new Selection();
selection.config({
facebook: true,
instagram: true,
twitter: true,
search:true,
copy:true,
Expand Down
51 changes: 31 additions & 20 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,38 @@
.logo{
width: 200px;
height: 200px;
margin-top: 2%;
.logo {
width: 200px;
height: 200px;
margin-top: 2%;
}
.lcolor{
color: #D91B5B;
.lcolor {
color: #d91b5b;
}
.btns{
margin-top: 1%
.btns {
margin-top: 1%;
}
#note{
border: 2px dotted black;
padding-bottom: 7px;
width: 60%;
margin-bottom:1%;
#note {
border: 2px dotted black;
padding-bottom: 7px;
width: 60%;
margin-bottom: 1%;
}
#note:hover{
border: 2px dashed #D91B5B;
#note:hover {
border: 2px dashed #d91b5b;
}

.header{
font-family: Francois One;
.header {
font-family: Francois One;
}
.list-group-item {
font-family: Noticia Text;
}
.popup-box {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
background-color: #7edda4;
font-weight: 600;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 10px;
border-radius: 5px;
}
.list-group-item{
font-family: Noticia Text;
}
61 changes: 39 additions & 22 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,34 @@
<!DOCTYPE html>
<html>

<head>
<title>Selection.js</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="index.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"
integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+"
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Bree+Serif|Jua|Francois+One|Noticia+Text" rel="stylesheet">

</head>

<body>
<div class="container center-block">
<img src="logo.png" class="logo img-responsive center-block">
<div class="btns text-center">
<a href="https://drive.google.com/file/d/1wXOwKf50dAGyyv7_jAwN8uMSY1gjirUo/view?usp=sharing" class="lcolor btn-lg" download="selection.min.js"> <i class="fas fa-download"></i> Download</a>
<a href="https://github.com/prateekkalra/Selection.js" target="_" class=" lcolor btn-lg"><i class="fab fa-github"></i> Github</a>
<a href="https://drive.google.com/file/d/1wXOwKf50dAGyyv7_jAwN8uMSY1gjirUo/view?usp=sharing"
class="lcolor btn-lg" download="selection.min.js"> <i class="fas fa-download"></i> Download</a>
<a href="https://github.com/prateekkalra/Selection.js" target="_" class=" lcolor btn-lg"><i
class="fab fa-github"></i> Github</a>
</div>

<h3 class="text-center center-block" style="width: 75%;font-family: Jua">A lightweight javascript library which provides users with a set of options in the form of a small popover over the selected portion of text.</h3>
<h3 class="text-center center-block" style="width: 75%;font-family: Jua">A lightweight javascript library which
provides users with a set of options in the form of a small popover over the selected portion of text.</h3>
<div id="note" class="center-block">
<h2 class="text-uppercase text-center" style="font-family: Bree Serif">Try selecting any text on this page</h2>
<h2 class="text-uppercase text-center" style="font-family: Bree Serif">Try selecting any text on this page
</h2>
</div>
<div class="row">
<div class="col-md-6">
Expand Down Expand Up @@ -48,32 +57,40 @@ <h3 class="text-center header">Menu Options Available</h3>
<h2 class="header text-center">Basic Usage</h2>
<script src="https://gist.github.com/prateekkalra/3320fdad383b4ffd8050b87239c5bb2a.js"></script>
<div class="text-center" style="margin-top: 31%">
<p>Designed with <i style="color:red" class="fa fa-heart"></i> by <a style="color: crimson" href="https://www.linkedin.com/in/prateek-kalra/" target="_blank">Prateek Kalra</a>.</p>
</div>
<p>Designed with <i style="color:red" class="fa fa-heart"></i> by <a style="color: crimson"
href="https://www.linkedin.com/in/prateek-kalra/" target="_blank">Prateek Kalra</a>.</p>
</div>
</div>
<div class="col-md-6">
<h2 class="header text-center">Advanced Usage</h2>
<script src="https://gist.github.com/prateekkalra/a858930c0955576892a8aa400a18b472.js"></script>
</div>
</div>

</div>



<footer>
<!-- show message on success copy -->
<div id="popup-box" class="popup-box">
<span>Copied successfully...</span>
</div>
</footer>
</body>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="selection.js"></script>
<script type="text/javascript">
var selection = new Selection();
selection.config({
facebook: true,
twitter: true,
search:true,
copy:true,
speak:true,
translate:true,
backgroundColor: 'crimson',
iconColor: '#fff',
}).init();
selection.config({
facebook: true,
instagram: true,
twitter: true,
search: true,
copy: true,
speak: true,
translate: true,
backgroundColor: 'crimson',
iconColor: '#fff',
}).init();
</script>

</html>
51 changes: 44 additions & 7 deletions selection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,21 @@
const Selection = (function() {
// Function to display the pop-up
function showPopup() {
const popup = document.getElementById("popup-box");
popup.style.display = "block";

// Close the pop-up after 5 seconds (5000 milliseconds)
setTimeout(() => {
closePopup();
}, 1000);
}

// Function to close the pop-up
function closePopup() {
const popup = document.getElementById("popup-box");
popup.style.display = "none";
}

function copyTextToClipboard(text) {
let textArea = document.createElement('textarea');
textArea.style.position = 'fixed';
Expand All @@ -20,7 +37,7 @@ const Selection = (function() {
try {
let successful = document.execCommand('copy');
let msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
showPopup();
} catch (err) {
console.log('Oops, unable to copy');
}
Expand Down Expand Up @@ -68,25 +85,31 @@ const Selection = (function() {
const twitterConfig = {
url: 'https://twitter.com/intent/tweet?text=',
icon:
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="selection__icon"><path d="M8.2,20.2c6.5,0,11.7-5.2,11.8-11.6c0-0.1,0-0.1,0-0.2c0-0.2,0-0.4,0-0.5c0.8-0.6,1.5-1.3,2.1-2.2c-0.8,0.3-1.6,0.6-2.4,0.7c0.9-0.5,1.5-1.3,1.8-2.3c-0.8,0.5-1.7,0.8-2.6,1c-1.6-1.7-4.2-1.7-5.9-0.1c-1.1,1-1.5,2.5-1.2,3.9C8.5,8.7,5.4,7.1,3.3,4.6c-1.1,1.9-0.6,4.3,1.3,5.5c-0.7,0-1.3-0.2-1.9-0.5l0,0c0,2,1.4,3.7,3.3,4.1c-0.6,0.2-1.2,0.2-1.9,0.1c0.5,1.7,2.1,2.8,3.9,2.9c-1.7,1.4-3.9,2-6.1,1.7C3.8,19.5,6,20.2,8.2,20.2"/></svg>'
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="selection__icon"><title>Twitter</title><path d="M8.2,20.2c6.5,0,11.7-5.2,11.8-11.6c0-0.1,0-0.1,0-0.2c0-0.2,0-0.4,0-0.5c0.8-0.6,1.5-1.3,2.1-2.2c-0.8,0.3-1.6,0.6-2.4,0.7c0.9-0.5,1.5-1.3,1.8-2.3c-0.8,0.5-1.7,0.8-2.6,1c-1.6-1.7-4.2-1.7-5.9-0.1c-1.1,1-1.5,2.5-1.2,3.9C8.5,8.7,5.4,7.1,3.3,4.6c-1.1,1.9-0.6,4.3,1.3,5.5c-0.7,0-1.3-0.2-1.9-0.5l0,0c0,2,1.4,3.7,3.3,4.1c-0.6,0.2-1.2,0.2-1.9,0.1c0.5,1.7,2.1,2.8,3.9,2.9c-1.7,1.4-3.9,2-6.1,1.7C3.8,19.5,6,20.2,8.2,20.2"/></svg>'
};

const instagramConfig = {
url : 'https://www.instagram.com/',
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" class="selection__icon" enable-background="new 0 0 24 24"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>'
}

const facebookConfig = {
url: 'https://www.facebook.com/sharer/sharer.php?quote=',
icon:
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="24" height="24" class="selection__icon"><path d="M20,2H4C2.9,2,2,2.9,2,4v16c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M18.4,7.4H17c-0.9,0-1,0.3-1,1l0,1.3 h2.1L18,12h-1.9v7h-3.2v-7h-1.2V9.6h1.2V8.1c0-2,0.8-3.1,3.1-3.1h2.4V7.4z"/></svg>'
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="24" height="24" class="selection__icon"><title>Facebook</title><path d="M20,2H4C2.9,2,2,2.9,2,4v16c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M18.4,7.4H17c-0.9,0-1,0.3-1,1l0,1.3 h2.1L18,12h-1.9v7h-3.2v-7h-1.2V9.6h1.2V8.1c0-2,0.8-3.1,3.1-3.1h2.4V7.4z"/></svg>'
};
const searchConfig = {
url: 'https://www.google.co.in/search?q=',
icon:
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="24" height="24" class="selection__icon"><path d="M23.111 20.058l-4.977-4.977c.965-1.52 1.523-3.322 1.523-5.251 0-5.42-4.409-9.83-9.829-9.83-5.42 0-9.828 4.41-9.828 9.83s4.408 9.83 9.829 9.83c1.834 0 3.552-.505 5.022-1.383l5.021 5.021c2.144 2.141 5.384-1.096 3.239-3.24zm-20.064-10.228c0-3.739 3.043-6.782 6.782-6.782s6.782 3.042 6.782 6.782-3.043 6.782-6.782 6.782-6.782-3.043-6.782-6.782zm2.01-1.764c1.984-4.599 8.664-4.066 9.922.749-2.534-2.974-6.993-3.294-9.922-.749z"/></svg>'
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="24" height="24" class="selection__icon"><title>Search</title><path d="M23.111 20.058l-4.977-4.977c.965-1.52 1.523-3.322 1.523-5.251 0-5.42-4.409-9.83-9.829-9.83-5.42 0-9.828 4.41-9.828 9.83s4.408 9.83 9.829 9.83c1.834 0 3.552-.505 5.022-1.383l5.021 5.021c2.144 2.141 5.384-1.096 3.239-3.24zm-20.064-10.228c0-3.739 3.043-6.782 6.782-6.782s6.782 3.042 6.782 6.782-3.043 6.782-6.782 6.782-6.782-3.043-6.782-6.782zm2.01-1.764c1.984-4.599 8.664-4.066 9.922.749-2.534-2.974-6.993-3.294-9.922-.749z"/></svg>'
};
const copyConfig = {
icon:
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="24" height="24" class="selection__icon"><path d="M18 6v-6h-18v18h6v6h18v-18h-6zm-12 10h-4v-14h14v4h-10v10zm16 6h-14v-14h14v14z"/></svg>'
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="24" height="24" class="selection__icon"><title>Copy</title><path d="M18 6v-6h-18v18h6v6h18v-18h-6zm-12 10h-4v-14h14v4h-10v10zm16 6h-14v-14h14v14z"/></svg>'
};
const speakConfig = {
icon:
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="24" height="24" class="selection__icon"><path d="M16 11c0 2.209-1.791 4-4 4s-4-1.791-4-4v-7c0-2.209 1.791-4 4-4s4 1.791 4 4v7zm4-2v2c0 4.418-3.582 8-8 8s-8-3.582-8-8v-2h2v2c0 3.309 2.691 6 6 6s6-2.691 6-6v-2h2zm-7 13v-2h-2v2h-4v2h10v-2h-4z"/></svg>'
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="24" height="24" class="selection__icon"><title>Speak</title><path d="M16 11c0 2.209-1.791 4-4 4s-4-1.791-4-4v-7c0-2.209 1.791-4 4-4s4 1.791 4 4v7zm4-2v2c0 4.418-3.582 8-8 8s-8-3.582-8-8v-2h2v2c0 3.309 2.691 6 6 6s6-2.691 6-6v-2h2zm-7 13v-2h-2v2h-4v2h10v-2h-4z"/></svg>'
};
const translateConfig = {
url:'https://translate.google.com/#auto/',
Expand Down Expand Up @@ -115,6 +138,19 @@ const Selection = (function() {
let top = 0;
let left = 0;

function instagramButtom(){
const instaBtn = new Button(instagramConfig.icon, function() {
let sharelink = window.location.href;
let finalurl = instagramConfig.url;
if (sharelink.substring(0, 4) !== 'http') {
sharelink = 'http://www.demourl.com';
}
finalurl += text + '?u=' + sharelink;
popupwindow(finalurl, 'Share', 600, 500);
});
return instaBtn;
}

function facebookButton() {
const fbbtn = new Button(facebookConfig.icon, function() {
let sharelink = window.location.href;
Expand Down Expand Up @@ -177,7 +213,7 @@ const Selection = (function() {
}

function appendIcons() {
const myitems=[{feature:'twitter',call:twitterButton()},{feature:'facebook',call:facebookButton()},{feature:'search',call:searchButton()},{feature:'translate',call:translateButton()},
const myitems=[{feature:'twitter',call:twitterButton()},{feature:'facebook',call:facebookButton()},{feature:'instagram',call:instagramButtom()},{feature:'search',call:searchButton()},{feature:'translate',call:translateButton()},
{feature:'copy',call:copyButton()},{feature:'speak',call:speakButton()}]
const div = document.createElement('div');
let count = 0;
Expand Down Expand Up @@ -299,6 +335,7 @@ const Selection = (function() {

function config(options) {
menu.twitter = options.twitter === undefined ? menu.twitter : options.twitter;
menu.instagram = options.instagram === undefined ? menu.instagram : options.instagram;
menu.facebook = options.facebook === undefined ? menu.facebook : options.facebook;
menu.search = options.search === undefined ? menu.search : options.search;
menu.translate = options.translate === undefined ? menu.translate : options.translate;
Expand Down