Skip to content

Instantly share code, notes, and snippets.

@dangerouse
Last active April 30, 2020 22:58
Show Gist options
  • Save dangerouse/102c7c99f05772ab19df25bded25c778 to your computer and use it in GitHub Desktop.
Save dangerouse/102c7c99f05772ab19df25bded25c778 to your computer and use it in GitHub Desktop.
CloudSponge Angular component
// Add the CloudSponge contact picker to your page and initialize it using this component.
// options are passed as a property to the component.
// You will still need to add a launch link to the page and a place to receive the selected contacts.
// For example:
// <cs-contact-picker [key]="MY-CLOUDSPONGE-KEY" [options]="{}">
// <label for="to">To: <a class="cloudsponge-launch">Pick from my contacts</a></label>
// <textarea id="to" class="cloudsponge-contacts"></textarea>
// </cs-contact-picker>
// Alternately, you may specify the options in your parent component:
// import { CsContactPickerComponent } from './cs-contact-picker/cs-contact-picker.component';
// CsContactPickerComponent.key = "MY-CLOUDSPONGE-KEY";
// CsContactPickerComponent.options = {}
// See a working example here: https://stackblitz.com/edit/angular-r81skb
import { Component, OnInit, Input } from '@angular/core';
const addJavascript = function(u, id, callback) {
// if the script already exists, just callback and return
if (window['cloudsponge']) {
callback && callback();
return;
}
var a = document.createElement('script');
a.async = true;
a.src = u;
if (id) {
a.id = id;
}
if (callback) {
a.onload = function() {
callback();
}
}
// add the script to the page
const m = document.getElementsByTagName('script')[0];
m.parentNode.insertBefore(a, m);
}
@Component({
selector: 'cs-contact-picker',
template: '<ng-content></ng-content>'
})
export class CsContactPickerComponent implements OnInit {
@Input() options;
@Input() key;
constructor() { }
ngOnInit() {
this.key = this.key || CsContactPickerComponent['key'];
Object.assign(this.options, CsContactPickerComponent['options']);
addJavascript(`https://api.cloudsponge.com/widget/${this.key}.js`, "cloudsponge-contact-picker", function() {
window['cloudsponge'] && window['cloudsponge'].init(this.options);
}.bind(this));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment