From da947aa7d9300614ff75f4ce664a0857fe44f662 Mon Sep 17 00:00:00 2001 From: dseligson Date: Wed, 27 Mar 2019 02:41:28 -0700 Subject: [PATCH] Adding new LWC Version called SearchGiphyLwc --- .../lwc/searchGiphyLwc/searchGiphyLwc.css | 35 ++++++ .../lwc/searchGiphyLwc/searchGiphyLwc.html | 75 ++++++++++++ .../lwc/searchGiphyLwc/searchGiphyLwc.js | 113 ++++++++++++++++++ .../searchGiphyLwc/searchGiphyLwc.js-meta.xml | 10 ++ sfdx-project.json | 8 +- 5 files changed, 237 insertions(+), 4 deletions(-) create mode 100644 force-app/main/default/lwc/searchGiphyLwc/searchGiphyLwc.css create mode 100644 force-app/main/default/lwc/searchGiphyLwc/searchGiphyLwc.html create mode 100644 force-app/main/default/lwc/searchGiphyLwc/searchGiphyLwc.js create mode 100644 force-app/main/default/lwc/searchGiphyLwc/searchGiphyLwc.js-meta.xml diff --git a/force-app/main/default/lwc/searchGiphyLwc/searchGiphyLwc.css b/force-app/main/default/lwc/searchGiphyLwc/searchGiphyLwc.css new file mode 100644 index 0000000..1690597 --- /dev/null +++ b/force-app/main/default/lwc/searchGiphyLwc/searchGiphyLwc.css @@ -0,0 +1,35 @@ +.backgroundInverse { + position: relative; + background-color: #16325c; +} + +.loading { + position: fixed; + z-index: 9999999999; + height: 2em; + width: 2em; + overflow: show; + margin: auto; + top: 0; + left: 0; + bottom: 0; + right: 0; +} +/* Transparent Overlay */ +.loading:before { + content: ''; + display: block; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.3); + } + .preview-image { + text-align: center; + } + .path-to-zip { + margin-bottom: 12px; + } + \ No newline at end of file diff --git a/force-app/main/default/lwc/searchGiphyLwc/searchGiphyLwc.html b/force-app/main/default/lwc/searchGiphyLwc/searchGiphyLwc.html new file mode 100644 index 0000000..1398d86 --- /dev/null +++ b/force-app/main/default/lwc/searchGiphyLwc/searchGiphyLwc.html @@ -0,0 +1,75 @@ + \ No newline at end of file diff --git a/force-app/main/default/lwc/searchGiphyLwc/searchGiphyLwc.js b/force-app/main/default/lwc/searchGiphyLwc/searchGiphyLwc.js new file mode 100644 index 0000000..7d72e2a --- /dev/null +++ b/force-app/main/default/lwc/searchGiphyLwc/searchGiphyLwc.js @@ -0,0 +1,113 @@ +import { LightningElement, track } from 'lwc'; +import { NavigationMixin } from 'lightning/navigation'; +import { ShowToastEvent } from 'lightning/platformShowToastEvent' +import { loadScript } from 'lightning/platformResourceLoader'; +import _GIPHY from '@salesforce/resourceUrl/GIPHY'; +import chatterPostWithImage from '@salesforce/apex/ChatterHelper.getChatterGroups'; + +export default class SearchGiphyLwc extends NavigationMixin(LightningElement) { + @track searchTerms = ''; + @track results; + + @track showPopup = false; + @track showSpinner = false; + chatterText = ''; + selectedGif; + selectedGifUrl; + feedItemId; + apiKey; + + connectedCallback() { + loadScript(this, _GIPHY) + .then(() => { + this.apiKey = window._GIPHY.getApiKey(); + }) + .catch(error => { + this.dispatchEvent( + new ShowToastEvent({ + title: 'Error reading Api Key', + message: error.message, + variant: 'error' + }) + ); + }) + } + + navigateToChatterPost() { + this[NavigationMixin.Navigate]({ + type: 'standard__recordPage', + attributes: { + recordId: this.feedItemId, + objectApiName: 'FeedItem', + actionName: 'view' + } + }); + } + + createChatterPost() { + this.showSpinner = true; + chatterPostWithImage({ imageUrl:this.selectedGifUrl, chatterText:this.chatterText}) + .then(result => { + this.feedItemId = result; + this.chatterText = ''; + this.selectedGif = ''; + this.selectedGifUrl = ''; + this.showSpinner = false; + this.showPopup = false; + this.navigateToChatterPost(); + }) + .catch(error => { + this.dispatchEvent( + new ShowToastEvent({ + title: 'Error Creating Post', + message: error.message, + variant: 'error' + }) + ); + this.showSpinner = false; + }) + } + + togglePopup() { + this.showPopup = !this.showPopup; + } + + handleGiphySearch(event) { + this.searchTerms = this.template.querySelector(".inputClass").value; + let searchTerms = encodeURI(this.searchTerms); + let url = "https://api.giphy.com/v1/gifs/search?api_key=" + this.apiKey + "&q=" + searchTerms + "&limit=8&offset=0&rating=G&lang=en"; + fetch(url) + .then(response => { + return response.json(); + }) + .then(resp => { + // Here we get the data array from the response object + this.results = resp.data; + }) + .catch(error => { + this.dispatchEvent( + new ShowToastEvent({ + title: 'Error Searching Giphy', + message: error.message, + variant: 'error' + }) + ); + }) + } + keyCheck(event) { + if (event.which == 13) { this.handleGiphySearch(); } + } + gifSelect(event){ + let id = event.target.dataset.index; + this.selectedGif = this.results.find(item => item.id === id); + const regex = /media[0-9].giphy/gi; + let imageUrl = this.selectedGif.images.fixed_height.url; + this.selectedGifUrl = imageUrl.replace(regex, 'media0.giphy'); + this.togglePopup(); + } + postToChatter(event){ + this.chatterText = this.template.querySelector(".chatterText").value; + this.createChatterPost(); + } + +} diff --git a/force-app/main/default/lwc/searchGiphyLwc/searchGiphyLwc.js-meta.xml b/force-app/main/default/lwc/searchGiphyLwc/searchGiphyLwc.js-meta.xml new file mode 100644 index 0000000..1e0a49e --- /dev/null +++ b/force-app/main/default/lwc/searchGiphyLwc/searchGiphyLwc.js-meta.xml @@ -0,0 +1,10 @@ + + + 45.0 + true + + lightning__AppPage + lightning__RecordPage + lightning__HomePage + + \ No newline at end of file diff --git a/sfdx-project.json b/sfdx-project.json index 31b5f42..e698e2c 100644 --- a/sfdx-project.json +++ b/sfdx-project.json @@ -3,12 +3,12 @@ { "path": "force-app", "default": true, - "id": "YOUR_PACKAGE_ID", - "versionNumber": "1.0.0.NEXT", - "versionName": "Spring ‘18" + "package": "GIFter", + "versionNumber": "2.0.0.NEXT", + "versionName": "Spring '19" } ], "namespace": "", "sfdcLoginUrl": "https://login.salesforce.com", - "sourceApiVersion": "42.0" + "sourceApiVersion": "45.0" }