projects/maplander/shared/src/lib/components/share/share.component.ts
| selector | lib-share |
| styleUrls | ./share.component.scss |
| templateUrl | ./share.component.html |
Properties |
|
Methods |
constructor(_data: string, _dialog: MatDialogRef
|
|||||||||||||||
|
Parameters :
|
| close |
close()
|
|
Returns :
void
|
| copyLink |
copyLink()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Static shareFacebook |
shareFacebook(url: string, mobile?: boolean)
|
|
Returns :
void
|
| Static shareTwitter | |||||||||
shareTwitter(window: Window, url: string)
|
|||||||||
|
Parameters :
Returns :
void
|
| shareWithFacebook |
shareWithFacebook()
|
|
Returns :
void
|
| shareWithTwitter |
shareWithTwitter()
|
|
Returns :
void
|
| shareWithWhatsApp |
shareWithWhatsApp()
|
|
Returns :
void
|
| Public url |
Type : string
|
import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
import {Platform} from '@angular/cdk/platform';
import {ClipboardService} from '@maplander/core';
declare var FB: any;
@Component({
selector: 'lib-share',
templateUrl: './share.component.html',
styleUrls: ['./share.component.scss']
})
export class ShareComponent implements OnInit {
public url: string;
constructor(
@Inject(MAT_DIALOG_DATA) private _data: string,
private _dialog: MatDialogRef<ShareComponent>,
private _clipboard: ClipboardService,
private _platform: Platform
) {
}
static shareFacebook(url: string, mobile?: boolean): void {
FB.ui({
method: 'share',
mobile_iframe: mobile,
href: url
});
}
static shareTwitter(window: Window, url: string): void {
const baseUrl = 'https://twitter.com/intent/tweet?url=' + url;
window.open(baseUrl, 'sharer', 'resizable=no,top=' + ((window.innerWidth / 2) - (window.innerWidth)) + ',left='
+ (window.innerHeight / 2 - (window.innerHeight)) + ',toolbar=0,status=0,width=' +
(window.innerWidth / 2) + ',height=' + (window.innerHeight / 2));
}
ngOnInit() {
this.url = this._data;
}
close(): void {
this._dialog.close();
}
shareWithFacebook(): void {
ShareComponent.shareFacebook(this._data, this._platform.ANDROID);
}
shareWithTwitter(): void {
ShareComponent.shareTwitter(window, this._data);
}
shareWithWhatsApp(): void {
window.open(`https://wa.me/?text=${this._data}`, '_blank');
}
copyLink(): void {
this._clipboard.copy(this._data);
}
}
<div class="share-dialog">
<h3>Compartir</h3>
<button mat-icon-button="" class="share-dialog__close" (click)="close()">
<mat-icon>close</mat-icon>
</button>
<div class="share-dialog__container-button">
<button mat-button="" (click)="shareWithFacebook()" class="container-button__button facebook">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32"
height="32" viewBox="0 0 32 32">
<path fill="currentColor"
d="M16.18,13,16.69,9H12.8V6.53c0-1.13.31-1.91,1.94-1.91h2.08V1.11a27.61,27.61,0,0,0-3-.15c-3,0-5,1.83-5,5.19V9H5.35V13H8.74V23H12.8V13Z"/>
</svg>
</button>
<span class="container-button__label">Facebook</span>
</div>
<div class="share-dialog__container-button">
<button mat-button="" (click)="shareWithTwitter()" class="container-button__button twitter">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24"
height="24" viewBox="0 0 24 24">
<path fill="currentColor"
d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21-.36.1-.74.15-1.13.15-.27 0-.54-.03-.8-.08.54 1.69 2.11 2.95 4 2.98-1.46 1.16-3.31 1.84-5.33 1.84-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
</svg>
</button>
<span class="container-button__label">Twitter</span>
</div>
<div class="share-dialog__container-button">
<button mat-button="" (click)="shareWithWhatsApp()" class="container-button__button whatsapp">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24"
height="24" viewBox="0 0 24 24">
<path fill="currentColor" d="M24,11.7c0,6.5-5.3,11.7-11.8,11.7c-2.1,0-4-0.5-5.7-1.5L0,24l2.1-6.3c-1.1-1.8-1.7-3.8-1.7-6
C0.4,5.2,5.7,0,12.2,0C18.7,0,24,5.2,24,11.7z M12.2,1.9c-5.5,0-9.9,4.4-9.9,9.8c0,2.2,0.7,4.1,1.9,5.8L3,21.1l3.8-1.2
c1.6,1,3.4,1.6,5.4,1.6c5.5,0,9.9-4.4,9.9-9.8S17.7,1.9,12.2,1.9z M18.2,14.4c-0.1-0.1-0.3-0.2-0.6-0.3c-0.3-0.1-1.7-0.8-2-0.9
C15.4,13,15.2,13,15,13.3c-0.2,0.3-0.7,0.9-0.9,1.1c-0.2,0.2-0.3,0.2-0.6,0.1c-0.3-0.1-1.2-0.4-2.3-1.4c-0.9-0.8-1.4-1.7-1.6-2
c-0.2-0.3,0-0.4,0.1-0.6c0.1-0.1,0.3-0.3,0.4-0.5c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.2,0-0.4,0-0.5c-0.1-0.1-0.7-1.6-0.9-2.1
C9.2,6.3,9,6.4,8.8,6.4c-0.2,0-0.4,0-0.6,0S7.7,6.4,7.5,6.7c-0.3,0.3-1,1-1,2.4c0,1.4,1,2.8,1.2,3c0.1,0.2,2,3.2,4.9,4.3
c2.9,1.1,2.9,0.8,3.5,0.7c0.5,0,1.7-0.7,1.9-1.4C18.2,15.1,18.2,14.5,18.2,14.4z"/>
</svg>
</button>
<span class="container-button__label">Whatsapp</span>
</div>
<div class="link">
<input [value]="url" placeholder="Enlace" title="Link">
<button mat-flat-button="" (click)="copyLink()" color="primary">COPIAR</button>
</div>
</div>
./share.component.scss
/*!
* Copyright (C) MapLander S de R.L de C.V - All Rights Reserved
* Unauthorized copying of this file, via any medium is strictly prohibited
* Proprietary and confidential
*
*/
$whatsapp: #25D366;
$facebook: #3B5998;
$twitter: #1DA1F2;
::ng-deep .panel-class-share-dialog{
width: 40%;
mat-dialog-container{
padding: 0;
}
@media screen and (max-width: 600px){
width: 90%;
}
}
.share-dialog {
padding: 16px;
position: relative;
box-sizing: border-box;
.share-dialog__close {
position: absolute;
top: 16px;
right: 16px;
}
.share-dialog__container-button {
display: inline-block;
margin-right: 16px;
}
.container-button__label {
display: block;
padding: 8px;
font-size: 12px;
}
.container-button__button {
min-width: 60px;
height: 60px;
border-radius: 50%;
padding: 0;
display: inline-block;
}
.btn mat-icon {
margin: auto;
}
.whatsapp, .twitter, .facebook {
color: white;
}
.whatsapp {
background: $whatsapp;
}
.twitter {
background: $twitter;
}
.facebook {
background: $facebook;
}
.link {
position: relative;
}
.link input {
border: 1px solid lightgray;
width: 100%;
padding: 16px 98px 16px 16px;
box-sizing: border-box;
margin: 16px 0;
border-radius: 4px;
}
.link button {
position: absolute;
right: 8px;
top: 24px;
}
}