I am new to Angular (brand new, in-fact) and I have been researching how exactly I can go about completing this task but I have not found anything helpful as of yet. I think perhaps I just have no idea what to search for. I am sure this is something that has been done before.
To give you some context: I am busy helping with an Angular 2 project at the moment and what I want to do is when a user highlights some text within an article, a tooltip should popup with different sharing options (Linkedin, Twitter, Email). When the user selects one of these sharing options the text that they highlighted will be pre-populated in the default sharing window of that social media. Basically it is your standard "share this page" functionality, however I want it to be pre-populated with whatever the user highlighted.
I'm afraid I have no code to share because I don't know where to even start. Angular 2 is pretty overwhelming at the moment. I would appreciate any help, even if it is just some reading material or some steps I could follow to help get me going.
Thanks!
I managed to figure it out (a week later). Here is what I came up with, for anyone who might like to know. Please also note that I used the plugin Popper.js for the popup.
Here is my HTML (component.html file):
<div class="share-highlight" (mouseup)="showSelectedText($event)">
<p>Some test content here</p>
<!-- This here is the actual popup and links to social media -->
<div class="js-popper share-highlight__tooltip" [style.display]="getStyle()">
<div class="share-highlight__tooltip-arrow"></div>
<a target="_blank" class="share-highlight__social-icons" href="{{linkedinlink}}"><span class="fa fa-linkedin"></span></a> <a target="_blank" class="share-highlight__social-icons" href="{{twitterlink}}"><span class="fa fa-twitter"></span></a><a class="share-highlight__social-icons" href="{{emaillink}}"><span class="fa fa-envelope"></span></a>
</div>
</div>
And here is what is in my component.ts file which handles the selection and building the share links:
import { Component, OnInit } from '@angular/core';
import * as Popper from 'popper.js/dist/umd/popper.js'; // plugin
@Component({
selector: 'share-highlight',
templateUrl: './share-highlight.component.html',
styleUrls: ['./share-highlight.component.scss']
})
export class ShareHighlightComponent implements OnInit {
selectedtext : string = '';
twitterlink : string = '';
linkedinlink : string = '';
emaillink : string = '';
showStyle : boolean = false;
showSelectedText(event) {
let element = event; // this was mostly for testing
var text = "";
if (window.getSelection) {
// Get the text that was selected
text = window.getSelection().toString();
if (text != "") {
// See where the selection is and attach popper to it
var selection = window.getSelection().getRangeAt(0);
// Setting up the tooltip (popper)
let popper = document.querySelector('.js-popper');
new Popper(selection,popper, {
placement: 'top'
});
// Show popper
this.showStyle = true;
} else {
// Hide popper
this.showStyle = false;
}
} else {
this.showStyle = false;
}
// Value of the selected Text
this.selectedtext = text;
// Building the share links with highlighted text and additional info you might want to add
this.twitterlink = "https://twitter.com/intent/tweet?url=http%3A%2F%2Fwww.WebsiteLinkHere.com&text=" + this.selectedtext.split(' ').join('%20') + "%20via%20@TwitterHandle ";
this.linkedinlink = "https://www.linkedin.com/shareArticle?mini=true&url=http://www.WebsiteLinkHere.com&title=" + ("Title here.").split(' ').join('%20') + "&summary=" + this.selectedtext.split(' ').join('%20') + "&source=SourceHere";
this.emaillink = "mailto:?subject=" + ("Email subject line here.").split(' ').join('%20') + "&body=" + this.selectedtext.split(' ').join('%20') + (". Some additional text here if you want, http%3A%2F%2Fwww.WebsiteLinkHere.com.").split(' ').join('%20');
}
getStyle() {
if(this.showStyle) {
return "block";
} else {
return "none";
}
}
constructor() { }
ngOnInit() {
}
}
I hope this can help anyone else looking to do something similar!