Skip to content

Commit 426d500

Browse files
mtwomeymtwomey
committed
Added Twitter component
1 parent 3e98bc9 commit 426d500

File tree

9 files changed

+245
-12
lines changed

9 files changed

+245
-12
lines changed

‎bower.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
"dependencies": {
55
"angular-resource": "1.5.3",
66
"nouislider-angular": "^2.4.1",
7-
"ng-cordova-oauth": "^0.2.8"
7+
"ngCordova": "^0.1.26-alpha",
8+
"ng-cordova-oauth": "^0.2.8",
9+
"ng-twitter-api": "^0.1.5"
810
},
911
"devDependencies": {
1012
"ionic": "driftyco/ionic-bower#1.3.1"

‎gulpfile.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
'use strict';
1212

1313
var gulp = require('gulp');
14-
gulp.modules = process.env.ANGULAR_MODULES || "'ionic','ngResource','ya.nouislider'";
14+
gulp.modules = process.env.ANGULAR_MODULES || "'ionic','ngResource','ya.nouislider', 'ngCordova', 'ngCordovaOauth', 'ngTwitter'";
1515
gulp.paths = {
1616
src: 'src',
1717
dist: 'www',

‎package.json

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -30,18 +30,9 @@
3030
"cordova-plugin-splashscreen",
3131
"cordova-plugin-statusbar",
3232
"ionic-plugin-keyboard",
33-
{
34-
"locator": "https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git",
35-
"id": "cordova-plugin-inappbrowser"
36-
}
33+
"cordova-plugin-inappbrowser"
3734
],
3835
"cordovaPlatforms": [
39-
"android",
40-
{
41-
"platform": "android",
42-
"version": "",
43-
"locator": "android"
44-
},
4536
"ios"
4637
]
4738
}

‎src/components/twitter/Deploy Guide.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# [IBP ] [IBP] IONIC STARTERPACK FACEBOOK SHARING
2+
This plugin can only run in Android and iOS, not in browser.
3+
4+
## Dependencies
5+
- [InAppBrowser] (https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/)
6+
- [ngCordova] (http://ngcordova.com/)
7+
8+
## Configuration
9+
10+
The config file in this component is `config.js`
11+
- `consumerKey` the twitter app id
12+
- `consumerSecretKey` the twitter app secret keey
13+
- `description` the feed text content
14+
- `link` the link in the feed
15+
16+
## Setup the Twitter App
17+
18+
If you are not planning to use your own Twitter APP ID (use mine), you can ignore this section.
19+
20+
Visit [http://apps.twitter.com/app/new](http://apps.twitter.com/app/new) to create a twitter app.
21+
Please pay attentions to:
22+
23+
* The OAuth callback url must set to: `http://localhost/callback`
24+
* make sure it have the `read` and `write` permission
25+
26+
you can now change the `consumerKey` and `consumerSecretKey` in `config.js`.
27+
28+
29+
## Run the Ionic App
30+
Read the `README.md` in the project root to see the steps to run the app, the steps are NOT changed in this challenge.
31+

‎src/components/twitter/config.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/*
2+
* Copyright (C) 2016 TopCoder Inc., All Rights Reserved.
3+
*/
4+
5+
/**
6+
* Represents the configurations for Facebook page
7+
*
8+
* @author TCDEVELOPER
9+
* @version 1.0
10+
*/
11+
(function () {
12+
'use strict';
13+
angular.module('app')
14+
.constant('TWITTER_CONFIG', {
15+
consumerKey: 'knXTwn9L5u3OpCUKpJmx4j4uv',
16+
consumerSecretKey: 'Dm2aem0C1XQWYlj3gq4bnVt5sidconLhJe36fTyyPYG73uDmIb',
17+
description: 'I just tried the Topcoder Ionic StarterPack!',
18+
link: 'https://github.com/topcoderinc/Topcoder-StarterPack_API'
19+
});
20+
})();

‎src/components/twitter/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<ion-view view-title="Twitter">
2+
3+
4+
<ion-content>
5+
<button class="button button-block button-positive" ng-click="vm.share()">Tweet</button>
6+
<button class="button button-block button-assertive" ng-click="vm.reset()" ng-show="authorized">Reset</button>
7+
</ion-content>
8+
9+
<script id="twitter-post-popup.html" type="text/ng-template">
10+
<div>
11+
<textarea data-ng-model="post.text" class="social-textarea" rows="5"></textarea>
12+
</div>
13+
</script>
14+
15+
</ion-view>
16+
17+
18+
19+
20+
21+

‎src/components/twitter/index.js

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
/*
2+
* Copyright (C) 2016 TopCoder Inc., All Rights Reserved.
3+
*/
4+
5+
/**
6+
* Represents the angular route,controller for Facebook page
7+
*
8+
* @author TCDEVELOPER
9+
* @version 1.0
10+
*/
11+
12+
(function () {
13+
'use strict';
14+
15+
angular.module('app')
16+
.config(function ($stateProvider) {
17+
$stateProvider
18+
.state('app.twitter', {
19+
url: '/twitter',
20+
views: {
21+
'menuContent': {
22+
templateUrl: 'components/twitter/index.html',
23+
controller: 'TwitterCtrl as vm'
24+
}
25+
}
26+
});
27+
})
28+
.factory('TwitterService', function($cordovaOauth, $q, $window, $twitterApi, TWITTER_CONFIG) {
29+
30+
function getItem(key) {
31+
return JSON.parse($window.localStorage.getItem(key));
32+
}
33+
function setItem(key, value) {
34+
return $window.localStorage.setItem(key, JSON.stringify(value));
35+
}
36+
function removeItem(key) {
37+
return $window.localStorage.removeItem(key);
38+
}
39+
40+
return {
41+
getSession: function() {
42+
var session = getItem('TWITTER_SESSION');
43+
return session;
44+
},
45+
46+
login: function() {
47+
var deferred = $q.defer();
48+
var session = this.getSession();
49+
if (session) {
50+
deferred.resolve(session);
51+
return deferred.promise;
52+
}
53+
54+
$cordovaOauth.twitter(TWITTER_CONFIG.consumerKey, TWITTER_CONFIG.consumerSecretKey, {}).then(function (result) {
55+
// save the twitter login session
56+
setItem('TWITTER_SESSION', result);
57+
// configure the api
58+
$twitterApi.configure(TWITTER_CONFIG.consumerKey, TWITTER_CONFIG.consumerSecretKey, result);
59+
60+
deferred.resolve(result);
61+
}, function (error) {
62+
63+
deferred.reject(error);
64+
});
65+
66+
return deferred.promise;
67+
},
68+
69+
tweet: function(message) {
70+
71+
var deferred = $q.defer();
72+
var session = this.getSession();
73+
if (!session) {
74+
deferred.reject('should login first');
75+
return deferred.promise;
76+
}
77+
78+
$twitterApi.configure(TWITTER_CONFIG.consumerKey, TWITTER_CONFIG.consumerSecretKey, session);
79+
80+
$twitterApi.postStatusUpdate(message + ' ' + TWITTER_CONFIG.link).then(function(response) {
81+
82+
deferred.resolve(response);
83+
}, function(err) {
84+
85+
deferred.reject(err);
86+
});
87+
return deferred.promise;
88+
},
89+
90+
reset: function() {
91+
removeItem('TWITTER_SESSION');
92+
}
93+
};
94+
})
95+
.controller("TwitterCtrl", function ($scope, TwitterService, $ionicPopup, TWITTER_CONFIG) {
96+
$scope.post = {
97+
text: TWITTER_CONFIG.description
98+
};
99+
$scope.authorized = !!TwitterService.getSession();
100+
101+
var vm = this;
102+
vm.share = function() {
103+
$scope.showLoading();
104+
TwitterService.login().then(function () {
105+
$scope.hideLoading();
106+
$scope.authorized = true;
107+
$ionicPopup.show({
108+
templateUrl: 'twitter-post-popup.html',
109+
title: 'Share to Twitter',
110+
scope: $scope,
111+
buttons: [
112+
{text: 'Cancel'},
113+
{
114+
text: '<b>Tweet</b>',
115+
type: 'button-positive',
116+
onTap: function (e) {
117+
if (!$scope.post.text) {
118+
//don't allow the user to close unless he enters the post
119+
e.preventDefault();
120+
} else {
121+
return $scope.post.text;
122+
}
123+
}
124+
}
125+
]
126+
}).then(function(res) {
127+
if (!res) {
128+
return;
129+
}
130+
$scope.showLoading();
131+
TwitterService.tweet($scope.post.text).then(function () {
132+
$scope.hideLoading();
133+
$scope.showInfo('Share to twitter successfully!');
134+
}, function(err) {
135+
$scope.hideLoading();
136+
if (err === 401 || err === 403) {
137+
vm.reset();
138+
} else if (!err) {
139+
$scope.showError('Failed to share to twitter, maybe your are posting the same tweet more than once. This is not allowed by twitter.');
140+
} else {
141+
$scope.showError('Failed to share to twitter!');
142+
}
143+
});
144+
});
145+
}, function (err) {
146+
$scope.hideLoading();
147+
if (err && err.toString().indexOf('sign in flow was canceled') >= 0) {
148+
// does nothing
149+
} else {
150+
$scope.showError('Failed to login to twitter!');
151+
vm.reset();
152+
}
153+
});
154+
};
155+
156+
vm.reset = function() {
157+
$scope.authorized = false;
158+
TwitterService.reset();
159+
}
160+
});
161+
})();

‎src/components/twitter/menu_5.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<ion-item menu-close href="#/app/twitter">
2+
Twitter
3+
</ion-item>

‎src/components/twitter/style.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/*background color for menu and must match menu index from menu_{index}.html */
2+
ion-side-menu ion-list ion-item:nth-child(5) a {
3+
background-color: cadetblue !important;
4+
}

0 commit comments

Comments
 (0)