-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #250 from lewisl9029/feature-invite-modal-qr-reader
- Loading branch information
Showing
31 changed files
with
496 additions
and
155 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| export let directiveName = 'tocAutoSelect'; | ||
| export default /*@ngInject*/ function tocAutoSelect( | ||
| ) { | ||
| return { | ||
| restrict: 'A', | ||
| link: function linkAutoSelect(scope, element) { | ||
| element.bind('click', function() { | ||
| element[0].select(); | ||
| }); | ||
| } | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import angular from 'angular'; | ||
|
|
||
| import directive, { directiveName } from './auto-select-directive'; | ||
|
|
||
| export default angular.module('toc.components.auto-select', []) | ||
| .directive(directiveName, directive); |
165 changes: 165 additions & 0 deletions
165
app/components/begin-conversation-modal/begin-conversation-modal-directive.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,165 @@ | ||
| import template from './begin-conversation-modal.html!text'; | ||
|
|
||
| export let directiveName = 'tocBeginConversationModal'; | ||
| export default /*@ngInject*/ function tocBeginConversationModal() { | ||
| return { | ||
| restrict: 'E', | ||
| template: template, | ||
| scope: { | ||
| hideModal: '&' | ||
| }, | ||
| controllerAs: 'beginConversationModal', | ||
| controller: /*@ngInject*/ function BeginConversationModalController( | ||
| $cordovaBarcodeScanner, | ||
| $ionicPopup, | ||
| $log, | ||
| $q, | ||
| $window, | ||
| $scope, | ||
| contacts, | ||
| devices, | ||
| identity, | ||
| state | ||
| ) { | ||
| this.hideModal = $scope.hideModal; | ||
| this.userInfo = state.cloud.identity.get().userInfo; | ||
| this.userId = this.userInfo.id; | ||
| this.isCordovaApp = devices.isCordovaApp(); | ||
|
|
||
| this.contactId = ''; | ||
|
|
||
| let initializeSentInvite = (contactChannel) => { | ||
| return state.save( | ||
| state.cloud.channels, | ||
| [contactChannel.id, 'sentInvite'], | ||
| true | ||
| ) | ||
| .then(() => state.save( | ||
| state.cloud.contacts, | ||
| [this.contactId, 'statusId'], | ||
| 0 | ||
| )) | ||
| .then(() => { | ||
| this.hideModal(); | ||
| return $q.when(); | ||
| }); | ||
| }; | ||
|
|
||
| this.inviteMethod = 'enter'; | ||
|
|
||
| this.inviteMethods = { | ||
| 'enter': { | ||
| icon: 'ion-ios-compose', | ||
| text: 'Enter someone\'s ID', | ||
| isEnabled: true, | ||
| doInvite: () => { | ||
| let invitePopup = $ionicPopup.show({ | ||
| template: ` | ||
| <input type="text" placeholder="Your contact's user ID." | ||
| ng-model="beginConversationModal.contactId" toc-auto-focus> | ||
| `, | ||
| title: 'Enter ID', | ||
| scope: $scope, | ||
| buttons: [ | ||
| { | ||
| text: 'Cancel', | ||
| type: 'button-outline button-calm' | ||
| }, | ||
| { | ||
| text: 'Invite', | ||
| type: 'button-outline button-balanced', | ||
| onTap: (event) => { | ||
| if (!identity.validateId(this.contactId)) { | ||
| event.preventDefault(); | ||
| $log.error('This is not a valid Toc ID.'); | ||
| return; | ||
| } | ||
|
|
||
| return contacts.invite(this.contactId) | ||
| .then(initializeSentInvite) | ||
| .then(() => { | ||
| this.contactId = ''; | ||
| }); | ||
| } | ||
| } | ||
| ] | ||
| }); | ||
| } | ||
| }, | ||
| 'scan': { | ||
| icon: 'ion-camera', | ||
| text: 'Scan a picture ID', | ||
| isEnabled: this.isCordovaApp, | ||
| doInvite: () => { | ||
| if (this.isCordovaApp) { | ||
| return $cordovaBarcodeScanner.scan() | ||
| .then((barcodeData) => { | ||
| let contactId = barcodeData.text; | ||
| if (!identity.validateId(contactId)) { | ||
| return $q.reject('This is not a valid Toc picture ID.'); | ||
| } | ||
|
|
||
| return contacts.invite(contactId); | ||
| }) | ||
| .then(initializeSentInvite) | ||
| .catch((error) => $log.error(error)); | ||
| } | ||
|
|
||
| } | ||
| }, | ||
| 'mail': { | ||
| icon: 'ion-email', | ||
| text: 'Send an invite email', | ||
| isEnabled: true, | ||
| doInvite: () => { | ||
| let mailSubject = encodeURIComponent( | ||
| `An invite for Toc Messenger` | ||
| ); | ||
|
|
||
| let mailBody = encodeURIComponent( | ||
| 'Please invite me as a contact on Toc Messenger:\n' + | ||
| 'http://lewisl9029.github.io/toc\n\n' + | ||
|
|
||
| 'It\'s pretty great. ^^\n\n' + | ||
|
|
||
| `My Toc ID is ${this.userId}.` | ||
| ); | ||
|
|
||
| $window.open( | ||
| `mailto:?to=&body=${mailBody}&subject=${mailSubject}`, | ||
| '_system' | ||
| ); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| this.doInvite = () => { | ||
| this.inviteMethods[this.inviteMethod].doInvite(); | ||
| }; | ||
|
|
||
| this.showIdPopup = () => { | ||
| $ionicPopup.show({ | ||
| title: 'Your ID', | ||
| cssClass: 'toc-id-popup', | ||
| scope: $scope, | ||
| buttons: [{ | ||
| text: 'Ok', | ||
| type: 'button-balanced button-outline' | ||
| }], | ||
| template: ` | ||
| <div class="list"> | ||
| <label class="toc-id-input item item-input"> | ||
| <input type="text" ng-model="::beginConversationModal.userId" | ||
| readonly toc-auto-select> | ||
| </label> | ||
| <div class="item item-image"> | ||
| <toc-qr-image data="{{::beginConversationModal.userId}}"> | ||
| </toc-qr-image> | ||
| </div> | ||
| </div> | ||
| ` | ||
| }); | ||
| }; | ||
| } | ||
| }; | ||
| } |
42 changes: 42 additions & 0 deletions
42
app/components/begin-conversation-modal/begin-conversation-modal.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| <ion-modal-view> | ||
| <ion-header-bar class="bar-royal"> | ||
| <h1 class="title">Start a Conversation</h1> | ||
| </ion-header-bar> | ||
| <ion-content class="has-subfooter"> | ||
| <div class="list"> | ||
| <div class="item item-divider item-calm item-clear"> | ||
| How would you like to start? | ||
| </div> | ||
| <ion-radio class="item-icon-left" | ||
| ng-repeat="(id, inviteMethod) in ::beginConversationModal.inviteMethods | ||
| track by id" | ||
| ng-model="beginConversationModal.inviteMethod" | ||
| ng-value="::id" ng-if="::inviteMethod.isEnabled"> | ||
| <i class="icon" ng-class="::inviteMethod.icon"></i> | ||
| {{::inviteMethod.text}} | ||
| </ion-radio> | ||
| </div> | ||
| </ion-content> | ||
| <div class="bar bar-subfooter"> | ||
| <div class="col"> | ||
| <button type="button" ng-click="::beginConversationModal.showIdPopup()" | ||
| class="button button-outline button-block button-royal"> | ||
| Show your own ID | ||
| </button> | ||
| </div> | ||
| </div> | ||
| <ion-footer-bar> | ||
| <div class="col"> | ||
| <button class="button button-block button-outline button-calm" | ||
| ng-click="::beginConversationModal.hideModal()"> | ||
| Cancel | ||
| </button> | ||
| </div> | ||
| <div class="col"> | ||
| <button class="button button-block button-outline button-balanced" | ||
| ng-click="::beginConversationModal.doInvite()"> | ||
| Start | ||
| </button> | ||
| </div> | ||
| </ion-footer-bar> | ||
| </ion-modal-view> |
6 changes: 6 additions & 0 deletions
6
app/components/begin-conversation-modal/begin-conversation-modal.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import angular from 'angular'; | ||
|
|
||
| import directive, { directiveName } from './begin-conversation-modal-directive'; | ||
|
|
||
| export default angular.module('toc.components.begin-conversation-modal', []) | ||
| .directive(directiveName, directive); |
14 changes: 14 additions & 0 deletions
14
app/components/begin-conversation-modal/begin-conversation-modal.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| .toc-id-popup { | ||
| .popup { | ||
| width: 350px; | ||
| max-width: 90%; | ||
| } | ||
|
|
||
| .toc-id-input { | ||
| border-color: transparent; | ||
| input { | ||
| cursor: pointer; | ||
| background-color: transparent; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.