Sharing my social sharing dialog component

[walfin]

Free component for you guys!

<template>
<q-dialog v-model="showDialog" @hide="cancel">
	<q-card class="card"><q-card-section class="justify-evenly items-center">
		<q-btn icon="fab fa-facebook" label="Facebook" no-caps color="red-10" glossy push @click="facebook"/>
		<q-btn icon="fab fa-linkedin" label="LinkedIn" no-caps color="red-10" glossy push @click="linkedin"/>
		<q-btn icon="fab fa-twitter" label="Twitter" no-caps color="red-10" glossy push @click="twitter"/>
		<q-btn icon="fas fa-paste" label="Clipboard" no-caps color="red-10" glossy push @click="clipboard"/>
	</q-card-section></q-card>
</q-dialog>
</template>
<script>
export default{
	props:['facebookAppID'],
	data(){
		return{
			showDialog:false,
			message:'',
			url:'',
			resolve:null,
			reject:null
		};
	},
	methods:{
		show(message,url){
			this.message=message;
			this.url=url;
			this.showDialog=true;
			return new Promise((resolve,reject)=>{
				this.resolve=resolve;
				this.reject=reject;
			});
		},
		cancel(){
			this.showDialog=false;
			this.reject();
		},
		facebook(){
			window.open('https://www.facebook.com/dialog/share?app_id='+this.facebookAppID+'&display=popup&href='+encodeURIComponent(this.url)+'&quote='+encodeURIComponent(this.message));
			this.showDialog=false;
			this.resolve();
		},
		linkedin(){
			window.open('https://www.linkedin.com/sharing/share-offsite/?url='+encodeURIComponent(this.url)+'&message='+encodeURIComponent(this.message));
			this.showDialog=false;
			this.resolve();
		},
		twitter(){
			window.open('https://twitter.com/intent/tweet?url='+encodeURIComponent(this.url)+'&text='+encodeURIComponent(this.message));
			this.showDialog=false;
			this.resolve();
		},
		clipboard(){
			if(navigator.clipboard){
				navigator.clipboard.writeText(this.message+' '+this.url);
			}else{
				let textArea=document.createElement("textarea");
				textArea.value=this.message+' '+this.url;
				textArea.style.top="0";
				textArea.style.left="0";
				textArea.style.position="fixed";
				document.body.appendChild(textArea);
				textArea.focus();
				textArea.select();
				document.execCommand('copy');
				document.body.removeChild(textArea);
			}
			this.$q.notify({message:'Copied to clipboard: '+this.message+' '+this.url,timeout:2000});
			this.showDialog=false;
			this.resolve();
		}
	}
};
</script>

[qyloxe]

@walfin nice

Quasar offers clipboard copy OOB here:

https://quasar.dev/quasar-utils/other-utils#Copy-to-Clipboard

This vue component has also social sharing, but of course, yours is more interesting, because it is Quasar based hi hi
https://github.com/nicolasbeauvais/vue-social-sharing

[walfin]

@qyloxe Lol I didn’t know about the copy to clipboard out of the box! Learn a new thing everyday.

[jadedRepublic]

@qyloxe said in Sharing my social sharing dialog component:

https://quasar.dev/quasar-utils/other-utils#Copy-to-Clipboard

Does copy to clipboard have support for all platforms? I’ve been using Capacitor since It’s already in my project but didn’t realise Quasar supports It

[botmadera]

@qyloxe hi! thanks for sharing! how do I install this https://github.com/nicolasbeauvais/vue-social-sharing? How is the Quasar way… i know you do some npm install… but where should I put this lineVue.use(VueSocialSharing); ? should I use components:{ }…

[qyloxe]

@botmadera said in Sharing my social sharing dialog component:

@qyloxe hi! thanks for sharing! how do I install this https://github.com/nicolasbeauvais/vue-social-sharing? How is the Quasar way… i know you do some npm install… but where should I put this lineVue.use(VueSocialSharing); ? should I use components:{ }…

probably by using quasar boot files. More here:

https://quasar.dev/quasar-cli/boot-files#When-to-use-boot-files