ionic-Material Design , Codecanyon
This commit is contained in:
Carsten Hilmer
@@ -0,0 +1,33 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Dropbox Feed -->
|
||||
<!--Controller name : dropboxFeedCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/dropbox/js/controllers.js-->
|
||||
<!--State name : app.dropboxFeed-->
|
||||
<!--URL : #app/dropboxFeed-->
|
||||
|
||||
<ion-view view-title="dropbox feed">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons> <!--end left button on navigation bar-->
|
||||
|
||||
<ion-content>
|
||||
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
|
||||
</ion-refresher>
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-subheader class="dropbox-color">Dropbox Directory</md-subheader>
|
||||
<md-list-item class="md-list-item-default" ng-click="popUpFileName(item,$event)"
|
||||
ng-repeat="item in feedList">
|
||||
<i class=" {{ getIcon(item.icon)}} dropbox-color"></i>
|
||||
|
||||
<p>{{item.path}}</p>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
<!--end list section-->
|
||||
<ion-infinite-scroll ng-if="shouldLoadData" on-infinite="getFeedData(true)" distance="1%">
|
||||
</ion-infinite-scroll>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Dropbox Login -->
|
||||
<!--Controller name : dropboxLoginCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/dropbox/js/controllers.js-->
|
||||
<!--State name : app.dropboxLogin-->
|
||||
<!--URL : #app/dropboxLogin-->
|
||||
|
||||
<ion-view title="Dropbox Connect">
|
||||
<!--login content section-->
|
||||
<ion-content scroll="false" id="social-login">
|
||||
<form>
|
||||
|
||||
<div>
|
||||
<i class="fa fa-dropbox dropbox-color"></i>
|
||||
</div>
|
||||
<div class="sub-header">Connect data with dropbox.</div>
|
||||
|
||||
<div class="ng-hide" ng-show="isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme dropbox-color-background"
|
||||
ng-click="goToUserProfile()">
|
||||
GO TO DROPBOX APP
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="ng-hide" ng-show="!isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme dropbox-color-background"
|
||||
ng-click="login()">
|
||||
LOG IN WITH DROPBOX
|
||||
</a>
|
||||
<br/>
|
||||
<a href="#/app/fakeSignUp" class="md-raised md-button md-default-theme social-default-button">SIGN
|
||||
UP</a>
|
||||
<a href="#/app/tryApp" class="md-raised md-button md-default-theme social-default-button">TRY APP</a>
|
||||
|
||||
<div class="footer">Already have an account? <a href="#/app/fakeLogin">Sign In</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</ion-content><!--end login content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,81 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Dropbox Profile -->
|
||||
<!--Controller name : dropboxProfileCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/dropbox/js/controllers.js-->
|
||||
<!--State name : app.dropboxProfile-->
|
||||
<!--URL : #app/dropboxProfile-->
|
||||
|
||||
<ion-view title="Social">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons> <!--end left button on navigation bar-->
|
||||
|
||||
<ion-content scroll="false" class="fade-in" id="dropbox-profile-content">
|
||||
<md-tabs md-dynamic-height md-border-bottom>
|
||||
<md-tab label="Profile">
|
||||
<!--social profile content section-->
|
||||
<md-content id="social-profile-content" class="md-padding">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-card"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.id}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-person"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.name}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-mail"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.email}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-link"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.link}}</div>
|
||||
</div>
|
||||
</md-content><!--end social profile content section-->
|
||||
|
||||
</md-tab>
|
||||
<md-tab label="More">
|
||||
<md-content class="md-padding">
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-subheader class="dropbox-color">More Dropbox APIs.</md-subheader>
|
||||
<md-list-item class="md-list-item-default"
|
||||
ng-click="navigateTo('app.dropboxFeed')">
|
||||
<i class="ion-android-list"></i>
|
||||
|
||||
<p>View Directory</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default" ng-click="logOut($event)">
|
||||
<i class="ion-locked"></i>
|
||||
|
||||
<p>Log Out</p>
|
||||
</md-list-item>
|
||||
</md-list><!--end list section-->
|
||||
</md-content>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
|
||||
</ion-content>
|
||||
|
||||
<!--loading progress-->
|
||||
<div id="dropbox-profile-loading-progress" class="loading-progress fade-in">
|
||||
<ion-spinner ng-if="!isAndroid" class="progress-circular"></ion-spinner>
|
||||
<md-progress-circular ng-if="isAndroid" class="md-warn md-progress-social-profile"
|
||||
md-mode="indeterminate"></md-progress-circular>
|
||||
</div><!--end loading progress-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,281 @@
|
||||
// For connecting with dropbox you have to install $cordovaOauth by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove org.apache.cordova.inappbrowser
|
||||
// $ ionic plugin add org.apache.cordova.inappbrowser
|
||||
//
|
||||
// Learn more about $cordovaOauth :
|
||||
// http://ngcordova.com/docs/plugins/oauth/
|
||||
//
|
||||
// object schema of dropboxProfile that keep in localStorage is:
|
||||
// [{
|
||||
// name: dropbox name,
|
||||
// id: dropbox id,
|
||||
// email: email,
|
||||
// link: link,
|
||||
// access_token: access_token
|
||||
// }]
|
||||
//
|
||||
// Controller of dropbox login Page.
|
||||
appControllers.controller('dropboxLoginCtrl', function ($scope, $state, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
// $scope.isLogin is the variable for check that user is login or not.
|
||||
$scope.isLogin = false;
|
||||
|
||||
// $scope.isLoading is the variable for loading progress.
|
||||
$scope.isLoading = false;
|
||||
|
||||
// $scope.userInfo is the variable that store user information data.
|
||||
$scope.userInfo = {
|
||||
name: "",
|
||||
id: "",
|
||||
email: "",
|
||||
link: "",
|
||||
access_token: ""
|
||||
};
|
||||
|
||||
// Getting user information.
|
||||
$scope.userInfo = $scope.getUserProfile();
|
||||
};// End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
$scope.navigateTo = function (targetPage) {
|
||||
$state.go(targetPage);
|
||||
};// End navigateTo.
|
||||
|
||||
// goToUserProfile is for navigate to dropbox Profile page.
|
||||
$scope.goToUserProfile = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
$scope.navigateTo('app.dropboxProfile');
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
};// End goToUserProfile.
|
||||
|
||||
//getUserProfile is for get user information form localStorage by calling localStorage.get service.
|
||||
$scope.getUserProfile = function () {
|
||||
$scope.userInfo = localStorage.get("Dropbox");
|
||||
if ($scope.userInfo != null) {
|
||||
$scope.isLogin = true;
|
||||
}
|
||||
|
||||
return $scope.userInfo;
|
||||
};// End getUserProfile.
|
||||
|
||||
// login for dropbox login.
|
||||
$scope.login = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
|
||||
// Calling $cordovaOauth.dropbox for login dropbox.
|
||||
// Format:
|
||||
// $cordovaOauth.dropbox(APP_KEY,[DROPBOX_PERMISION])
|
||||
// For APP_KEY is window.globalVariable.oAuth.dropbox from www/js/app.js at globalVariable session.
|
||||
$cordovaOauth.dropbox(window.globalVariable.oAuth.dropbox).then(function (result) {
|
||||
//After call cordovaOauth.dropbox it will return access_token for you to calling dropbox API.
|
||||
$scope.accessToken = result.access_token;
|
||||
// Calling http service for getting user profile from dropbox.
|
||||
$http.get("https://api.dropbox.com/1/account/info?access_token=" + result.access_token, {
|
||||
params: {}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
// Store user profile information from dropbox API to userInfo variable.
|
||||
$scope.userInfo = {
|
||||
name: result.data.display_name,
|
||||
id: result.data.uid,
|
||||
email: result.data.email,
|
||||
link: result.data.referral_link,
|
||||
access_token: $scope.accessToken
|
||||
};
|
||||
// Store user profile information to localStorage service.
|
||||
localStorage.set("Dropbox", $scope.userInfo);
|
||||
// Navigate to dropbox profile page.
|
||||
$scope.navigateTo("app.dropboxProfile");
|
||||
});
|
||||
|
||||
}
|
||||
, function (error) {
|
||||
// Error retrieve data.
|
||||
console.log(error);
|
||||
});
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
};// End login.
|
||||
$scope.initialForm();
|
||||
});// End of dropbox login controller.
|
||||
|
||||
// Controller of dropbox profile Page.
|
||||
appControllers.controller('dropboxProfileCtrl', function ($mdDialog, $scope, $state, $stateParams, $cordovaOauth, $ionicHistory, $http, localStorage, $timeout) {
|
||||
|
||||
// This function is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
|
||||
// $scope.userInfo is the variable for store user profile information
|
||||
// It get data from localStorage service.
|
||||
$scope.userInfo = localStorage.get("Dropbox");
|
||||
|
||||
// $scope.loading is the variable for loading progress.
|
||||
$scope.loading = true;
|
||||
|
||||
// The function for show/hide loading progress.
|
||||
$timeout(function () {
|
||||
if ($scope.isAndroid) {
|
||||
jQuery('#dropbox-profile-loading-progress').show();
|
||||
}
|
||||
else {
|
||||
jQuery('#dropbox-profile-loading-progress').fadeIn(700);
|
||||
}
|
||||
}, 400);
|
||||
|
||||
$timeout(function () {
|
||||
jQuery('#dropbox-profile-loading-progress').hide();
|
||||
jQuery('#dropbox-profile-content').fadeIn();
|
||||
}, 2000);
|
||||
};// End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
$scope.navigateTo = function (targetPage) {
|
||||
$state.go(targetPage);
|
||||
};// End navigateTo.
|
||||
|
||||
// logOut is for log out it will clear dropbox data in localStorage service.
|
||||
$scope.logOut = function ($event) {
|
||||
$mdDialog.show({
|
||||
//mdDialog.show use for show alert box for Confirm to log out.
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm to Logout",
|
||||
content: "Do you want to logout Dropbox?",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to log out.
|
||||
// Clear dropbox data in localStorage service.
|
||||
localStorage.set("Dropbox", null);
|
||||
// Navigate to log in page.
|
||||
$state.go('app.dropboxLogin');
|
||||
$scope.userinfoData = localStorage.get("Dropbox");
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.dropboxLogin');
|
||||
}
|
||||
|
||||
}, function () {
|
||||
// For cancel button to log out.
|
||||
});
|
||||
|
||||
};// End logOut.
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of dropbox profile controller.
|
||||
|
||||
// Controller of dropbox feed Page.
|
||||
appControllers.controller('dropboxFeedCtrl', function ($scope, $state, $ionicHistory, $stateParams, $mdDialog, $cordovaOauth, $http, $filter, localStorage) {
|
||||
|
||||
// This function is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
// $scope.feedList is the variable that store feed data.
|
||||
$scope.feedList = [];
|
||||
|
||||
// $scope.feedList is the variable for loading status.
|
||||
$scope.shouldLoadData = true;
|
||||
|
||||
// $scope.userInfo is the variable for store user profile information
|
||||
// It get data from localStorage service.s
|
||||
$scope.userInfo = localStorage.get("Dropbox");
|
||||
}
|
||||
// popUpFileName for show pop up file name and detail.
|
||||
$scope.popUpFileName = function (fileData, $event) {
|
||||
var optionDropboxDialog = $mdDialog.alert()
|
||||
.parent(angular.element(document.body))
|
||||
.title(fileData.path + ' (' + fileData.size + ')')
|
||||
.content('Last Modified : ' + $filter('date')(new Date(fileData.modified), "MMM dd yyyy"))
|
||||
.ariaLabel('Alert Dialog filename')
|
||||
.ok('OK')
|
||||
.targetEvent($event)
|
||||
$mdDialog.show(optionDropboxDialog);
|
||||
};// End popUpFileName.
|
||||
|
||||
// getFeedData is for get feed by calling to dropbox API.
|
||||
// Parameter :
|
||||
// IsInit(bool) = for check that page are loading more data or refresh data.
|
||||
$scope.getFeedData = function (IsInit) {
|
||||
$scope.isLoading = true;
|
||||
// Call http service with this api to get dropbox feed data.
|
||||
// By send parameter access_token that get from dropbox user profile from localStorage.
|
||||
$http.get("https://api.dropbox.com/1/metadata/auto", {
|
||||
params: {
|
||||
access_token: $scope.userInfo.access_token
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// store feed data to $scope.feedList variable to show in feed.
|
||||
$scope.feedList = result.data.contents;
|
||||
|
||||
// To stop loading progress.
|
||||
if (IsInit == true) {
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
|
||||
} else {
|
||||
$scope.$broadcast('scroll.refreshComplete');
|
||||
}
|
||||
$scope.shouldLoadData = false;
|
||||
},
|
||||
function (error) {
|
||||
// Error retrieve data it will log out.
|
||||
if (error.status = 401) {
|
||||
$scope.logout();
|
||||
}
|
||||
});
|
||||
};// End getFeedData.
|
||||
|
||||
//getIcon to get icon for file name.
|
||||
$scope.getIcon = function (icon) {
|
||||
var iconName = icon.substr(0, 6);
|
||||
if (iconName == "folder") {
|
||||
return "fa fa-folder-o";
|
||||
}
|
||||
else {
|
||||
return "fa fa-file-o";
|
||||
}
|
||||
};// End getIcon.
|
||||
|
||||
// logout for log out.
|
||||
$scope.logout = function () {
|
||||
// Clear dropbox data in localStorage service.
|
||||
localStorage.set("Dropbox", null);
|
||||
// Navigate to log in page.
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableBack: true
|
||||
});
|
||||
$scope.userinfoData = localStorage.get("Dropbox");
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.dropboxLogin');
|
||||
};
|
||||
};// End logout.
|
||||
|
||||
// doRefresh is for refresh feed.
|
||||
$scope.doRefresh = function () {
|
||||
$scope.shouldLoadData = true;
|
||||
$scope.getFeedData(false);
|
||||
};// End doRefresh.
|
||||
|
||||
$scope.initialForm();
|
||||
}); // End of dropbox feed controller.
|
||||
@@ -0,0 +1,65 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Facebook Feed -->
|
||||
<!--Controller name : facebookFeedCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/facebook/js/controllers.js-->
|
||||
<!--State name : app.facebookFeed-->
|
||||
<!--URL : #app/facebookFeed-->
|
||||
|
||||
<ion-view title="Facebook feed">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
|
||||
<!--social feed content section-->
|
||||
<ion-content id="social-feed-content">
|
||||
|
||||
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
|
||||
</ion-refresher>
|
||||
|
||||
<!--social card section-->
|
||||
<md-card ng-repeat="item in feedList" class="social-card">
|
||||
<md-card-content>
|
||||
<md-list-item class="md-2-line md-no-proxy" role="listitem">
|
||||
<img ng-src="https://graph.facebook.com/{{ item.from.id }}/picture"
|
||||
class="md-avatar">
|
||||
|
||||
<div class="md-list-item-text">
|
||||
<h3>{{item.from.name}}</h3>
|
||||
|
||||
<p>{{item.created_time | date:"short" }}</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<p ng-show="item.message != null ? true : false">{{item.message}}</p>
|
||||
|
||||
<p ng-show="item.link != null && item.message == null ? true : false">was shared: {{item.link}}</p>
|
||||
</md-card-content>
|
||||
<!--social card image section-->
|
||||
<div class="social-card-image">
|
||||
<img ng-src="{{item.full_picture}}"
|
||||
ng-show="item.full_picture != null ? true : false"
|
||||
class="ng-hide">
|
||||
</div><!--end social card image section-->
|
||||
|
||||
<!--social card footer section-->
|
||||
<div class="social-card-footer">
|
||||
<div class="row-content" layout="row">
|
||||
<div class="col-33">
|
||||
{{item.likes.summary.total_count | numberSuffix}} <span>Likes</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
{{item.comments.summary.total_count | numberSuffix}} <span>Comments</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
{{ item.shares != null ? item.shares.count : 0 | numberSuffix }} <span>Shared</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end social card footer section-->
|
||||
</md-card><!--end social card section-->
|
||||
|
||||
<ion-infinite-scroll ng-if="!paging.shouldLoadData" on-infinite="loadMore()" distance="1%">
|
||||
</ion-infinite-scroll>
|
||||
</ion-content><!--end social feed content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,32 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Facebook Friend List -->
|
||||
<!--Controller name : facebookFriendListCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/facebook/js/controllers.js-->
|
||||
<!--State name : app.facebookFriendList-->
|
||||
<!--URL : #app/facebookFriendList-->
|
||||
|
||||
<ion-view view-title="Friend List">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
|
||||
<ion-content>
|
||||
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
|
||||
</ion-refresher>
|
||||
|
||||
<!--list section-->
|
||||
<md-list class="md-list-padding-left">
|
||||
<md-list-item ng-repeat="item in friendsList">
|
||||
<img alt="{{item.name}}" ng-src="{{ item.picture.data.url }}" class="md-avatar"/>
|
||||
|
||||
<p>{{ item.name }}</p>
|
||||
</md-list-item>
|
||||
</md-list><!--end list section-->
|
||||
|
||||
<ion-infinite-scroll ng-if="!paging.shouldLoadData" on-infinite="loadMore()" distance="1%">
|
||||
</ion-infinite-scroll>
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Facebook Login-->
|
||||
<!--Controller name : facebookLoginCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/facebook/js/controllers.js-->
|
||||
<!--State name : app.facebookLogin-->
|
||||
<!--URL : #app/facebookLogin-->
|
||||
|
||||
<ion-view title="Facebook Connect">
|
||||
<!--login content section-->
|
||||
<ion-content scroll="false" id="social-login">
|
||||
<form>
|
||||
|
||||
<div>
|
||||
<i class="fa fa-facebook facebook-color"></i>
|
||||
</div>
|
||||
<div class="sub-header">Connect data with facebook.</div>
|
||||
|
||||
<div class="ng-hide" ng-show="isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme facebook-background"
|
||||
ng-click="goToUserProfile()">
|
||||
GO TO FACEBOOK APP
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="ng-hide" ng-show="!isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme facebook-background" ng-click="login()">
|
||||
LOG IN WITH FACEBOOK
|
||||
</a>
|
||||
<br/>
|
||||
<a href="#/app/fakeSignUp" class="md-raised md-button md-default-theme social-default-button">SIGN
|
||||
UP</a>
|
||||
<a href="#/app/tryApp" class="md-raised md-button md-default-theme social-default-button">TRY APP</a>
|
||||
|
||||
<div class="footer">Already have an account? <a href="#/app/fakeLogin">Sign In</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</ion-content><!--end login content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,100 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Facebook Profile-->
|
||||
<!--Controller name : facebookProfileCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/facebook/js/controllers.js-->
|
||||
<!--State name : app.facebookProfile-->
|
||||
<!--URL : #app/facebookProfile-->
|
||||
|
||||
<ion-view title="Social">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
|
||||
<ion-content>
|
||||
<div class="toolbar-image-cover" style="background-image: url('{{userInfo.pictureProfileUrl}}');"></div>
|
||||
|
||||
<md-tabs class="ng-hide" ng-show="!loading" md-dynamic-height md-border-bottom>
|
||||
<md-tab label="Profile">
|
||||
<!--social profile content section-->
|
||||
<md-content id="social-profile-content" class="md-padding">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-card"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.id}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-person"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.name}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-circle-thin"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.gender}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-birthday-cake"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.birthday}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-mail"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.email}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-link"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.link}}</div>
|
||||
</div>
|
||||
|
||||
</md-content><!--end social profile content section-->
|
||||
|
||||
</md-tab>
|
||||
<md-tab label="More">
|
||||
<md-content class="md-padding">
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-subheader class="facebook-color">More Facebook APIs.</md-subheader>
|
||||
<md-list-item class="md-list-item-default"
|
||||
ng-click="navigateTo('app.facebookFeed')">
|
||||
<i class="ion-android-list"></i>
|
||||
|
||||
<p>View Timeline Feed</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default"
|
||||
ng-click="navigateTo('app.facebookFriendList')">
|
||||
<i class="ion-person-stalker"></i>
|
||||
|
||||
<p>Friends List</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default" ng-click="logOut($event)">
|
||||
<i class="ion-locked"></i>
|
||||
|
||||
<p>Log Out</p>
|
||||
</md-list-item>
|
||||
</md-list><!--end list section-->
|
||||
</md-content>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
<!--social loading progress section-->
|
||||
<md-progress-circular ng-show="loading" class="md-warn md-progress-social-profile ng-hide"
|
||||
md-mode="indeterminate"></md-progress-circular><!--end social loading progress section-->
|
||||
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -0,0 +1,492 @@
|
||||
// For connecting with facebook you have to install $cordovaOauth by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove org.apache.cordova.inappbrowser
|
||||
// $ ionic plugin add org.apache.cordova.inappbrowser
|
||||
//
|
||||
// Learn more about $cordovaOauth :
|
||||
// http://ngcordova.com/docs/plugins/oauth/
|
||||
//
|
||||
// object schema of facebookProfile that keep in localStorage is:
|
||||
// [{
|
||||
// name: facebook name,
|
||||
// first_name: facebook firstname,
|
||||
// last_name: facebook lastname,
|
||||
// email: email,
|
||||
// birthday: birthday,
|
||||
// link: facebook link,
|
||||
// cover: facebook cover,
|
||||
// pictureProfileUrl: facebook picture profile url,
|
||||
// gender: gender,
|
||||
// id: facebook id,
|
||||
// access_token: access_token
|
||||
// }]
|
||||
//
|
||||
// Controller of facebook login Page.
|
||||
appControllers.controller('facebookLoginCtrl', function ($scope, $state, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
|
||||
// $scope.isLogin is the variable for check that user is login or not.
|
||||
$scope.isLogin = false;
|
||||
|
||||
// $scope.isLoading is the variable for loading progress.
|
||||
$scope.isLoading = false;
|
||||
|
||||
// $scope.userInfo is the variable that store user information data.
|
||||
$scope.userInfo = {
|
||||
name: "",
|
||||
first_name: "",
|
||||
last_name: "",
|
||||
email: "",
|
||||
birthday: "",
|
||||
link: "",
|
||||
cover: "",
|
||||
pictureProfileUrl: "",
|
||||
gender: "",
|
||||
id: "",
|
||||
access_token: ""
|
||||
};
|
||||
|
||||
// Getting user information.
|
||||
$scope.userInfo = $scope.getUserProfile();
|
||||
}; // End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
$scope.navigateTo = function (targetPage) {
|
||||
$state.go(targetPage);
|
||||
};// End navigateTo.
|
||||
|
||||
// goToUserProfile is for navigate to facebook Profile page.
|
||||
$scope.goToUserProfile = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
$scope.navigateTo('app.facebookProfile');
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
};// End goToUserProfile.
|
||||
|
||||
//getUserProfile is for get user information form localStorage by calling localStorage.get service.
|
||||
$scope.getUserProfile = function () {
|
||||
$scope.userInfo = localStorage.get("Facebook");
|
||||
if ($scope.userInfo != null) {
|
||||
$scope.isLogin = true;
|
||||
}
|
||||
;
|
||||
return $scope.userInfo;
|
||||
};// End getUserProfile.
|
||||
|
||||
// login for facebook login
|
||||
$scope.login = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
|
||||
// Calling $cordovaOauth.facebook for login facebook.
|
||||
// Format:
|
||||
// $cordovaOauth.facebook(APP_ID,[FACEBOOK_PERMISION])
|
||||
// For APP_ID is window.globalVariable.oAuth.facebook from www/js/app.js at globalVariable session.
|
||||
$cordovaOauth.facebook(window.globalVariable.oAuth.facebook, ["publish_actions", "user_status", "user_birthday", "user_posts", "user_events"
|
||||
, "email", "user_actions.news", "user_friends", "public_profile"]).then(function (result) {
|
||||
//After call cordovaOauth.facebook it will return access_token for you to calling facebook API.
|
||||
|
||||
$scope.accessToken = result.access_token;
|
||||
// Calling http service for getting user profile from facebook.
|
||||
// By send parameter access_token , fields, format.
|
||||
$http.get("https://graph.facebook.com/v2.4/me", {
|
||||
params: {
|
||||
access_token: result.access_token,
|
||||
fields: "birthday,first_name,email,last_name,name,link,cover,gender,id",
|
||||
format: "json"
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
// Store user profile information from facebook API to userInfo variable.
|
||||
$scope.userInfo = {
|
||||
name: result.data.name,
|
||||
first_name: result.data.first_name,
|
||||
last_name: result.data.last_name,
|
||||
email: result.data.email,
|
||||
birthday: result.data.birthday,
|
||||
link: result.data.link,
|
||||
cover: result.data.cover,
|
||||
pictureProfileUrl: "http://graph.facebook.com/" + result.data.id + "/picture?width=500&height=500",
|
||||
gender: result.data.gender,
|
||||
id: result.data.id,
|
||||
access_token: $scope.accessToken
|
||||
};
|
||||
// Store user profile information to localStorage service.
|
||||
localStorage.set("Facebook", $scope.userInfo);
|
||||
// Navigate to facebook profile page.
|
||||
$scope.navigateTo("app.facebookProfile");
|
||||
});
|
||||
}
|
||||
, function (error) {
|
||||
// Error retrieve data.
|
||||
console.log(error);
|
||||
});
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
};// End login.
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of facebook login controller.
|
||||
|
||||
// Controller of facebook profile Page.
|
||||
appControllers.controller('facebookProfileCtrl', function ($mdDialog, $scope, $state, $stateParams, $cordovaOauth, $ionicHistory, $http, localStorage, $timeout) {
|
||||
|
||||
// This function is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
|
||||
// $scope.userInfo is the variable for store user profile information
|
||||
// It get data from localStorage service.
|
||||
$scope.userInfo = localStorage.get("Facebook");
|
||||
|
||||
// $scope.loading is the variable for loading progress.
|
||||
$scope.loading = true;
|
||||
|
||||
// The function for show/hide loading progress.
|
||||
$timeout(function () {
|
||||
$scope.loading = false;
|
||||
}, 2000);
|
||||
};// End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page
|
||||
// and sending objectData to the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
// objectData = object that will sent to destination page.
|
||||
$scope.navigateTo = function (targetPage, objectData) {
|
||||
$state.go(targetPage, {
|
||||
access_token: objectData
|
||||
});
|
||||
};// End navigateTo.
|
||||
|
||||
// logOut is for log out it will clear facebook data in localStorage service.
|
||||
$scope.logOut = function ($event) {
|
||||
//mdDialog.show use for show alert box for Confirm to log out.
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm to Logout",
|
||||
content: "Do you want to logout Facebook?",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to log out.
|
||||
// Clear facebook data in localStorage service.
|
||||
localStorage.set("Facebook", null);
|
||||
$scope.userinfoData = localStorage.get("Facebook");
|
||||
|
||||
// Navigate to log in page.
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.facebookLogin');
|
||||
}
|
||||
|
||||
}, function () {
|
||||
// For cancel button to log out.
|
||||
});
|
||||
|
||||
|
||||
};// End logOut.
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of facebook profile controller.
|
||||
|
||||
// Controller of facebook feed Page.
|
||||
appControllers.controller('facebookFeedCtrl', function ($scope, $state, $ionicHistory, $stateParams, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
|
||||
// $scope.paging is the variable that store page index of feed data.
|
||||
$scope.paging = {
|
||||
next: "",
|
||||
shouldLoadData: false
|
||||
};
|
||||
|
||||
// $scope.userInfo is the variable for store user profile information
|
||||
// It get data from localStorage service.
|
||||
$scope.userInfo = localStorage.get("Facebook");
|
||||
|
||||
// $scope.loading is the variable for loading progress.
|
||||
$scope.isLoading = false;
|
||||
|
||||
// $scope.feedList is the variable that store feed data.
|
||||
$scope.feedList = [];
|
||||
|
||||
}; // End initialForm.
|
||||
|
||||
// getFeedData is for get feed by calling to facebook API.
|
||||
// Parameter :
|
||||
// IsInit(bool) = for check that page are loading more data or refresh data.
|
||||
$scope.getFeedData = function (IsInit) {
|
||||
|
||||
// Call http service with this api to get facebook feed data.
|
||||
// By send parameter access_token that get from facebook user profile from localStorage.
|
||||
$http.get("https://graph.facebook.com/me/feed?fields=from,full_picture,message,created_time,icon,to,id,caption,link,picture,shares,likes.limit(1).summary(true),comments.limit(1).summary(true)", {
|
||||
params: {
|
||||
access_token: $scope.userInfo.access_token
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// Store feed data to $scope.feedList variable to show in feed.
|
||||
$scope.feedList = result.data.data;
|
||||
|
||||
// If it don't have data. Loading progress will stop and appear empty feed.
|
||||
if ($scope.feedList == []) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
}
|
||||
// Checking for next page data
|
||||
if (result.data.paging.next == null) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
}
|
||||
else {
|
||||
$scope.paging.next = result.data.paging.next;
|
||||
}// End checking for next page data.
|
||||
|
||||
// To stop loading progress.
|
||||
if (IsInit == true) {
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
} else {
|
||||
$scope.$broadcast('scroll.refreshComplete');
|
||||
}
|
||||
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
, function (error) {
|
||||
// Error retrieve data it will log out.
|
||||
if (error.data.error.code = 190) {
|
||||
$scope.logout();
|
||||
}
|
||||
|
||||
});
|
||||
}; // End getFeedData.
|
||||
|
||||
// logout for log out.
|
||||
$scope.logout = function () {
|
||||
|
||||
// Clear facebook data in localStorage service.
|
||||
localStorage.set("Facebook", null);
|
||||
|
||||
// Navigate to log in page.
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableBack: true
|
||||
});
|
||||
$scope.userinfoData = localStorage.get("Facebook");
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.facebookLogin');
|
||||
};
|
||||
}; // End logout.
|
||||
|
||||
// getNextFeedData for get next page of feed data.
|
||||
$scope.getNextFeedData = function () {
|
||||
$scope.isLoading = true;
|
||||
|
||||
// Call http service with $scope.paging.next url that get from the previous feed.
|
||||
$http.get($scope.paging.next, {
|
||||
params: {
|
||||
format: "json"
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// If it don't have data. Loading progress will stop.
|
||||
if(result.data.data.length == 0){
|
||||
$scope.paging.shouldLoadData = true;
|
||||
}
|
||||
|
||||
// Storing feed data to $scope.feedList.
|
||||
for (var feedItem = 0; feedItem < result.data.data.length; feedItem++) {
|
||||
$scope.feedList.push(result.data.data[feedItem]);
|
||||
}
|
||||
|
||||
// Checking for next page data.
|
||||
if (result.data.paging.next == null) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
} else {
|
||||
$scope.paging.next = result.data.paging.next;
|
||||
}// End checking for next page data.
|
||||
|
||||
// To stop loading progress.
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
$scope.isLoading = false;
|
||||
});
|
||||
};// End getNextFeedData.
|
||||
|
||||
// doRefresh is for refresh feed.
|
||||
$scope.doRefresh = function () {
|
||||
$scope.paging.shouldLoadData = false;
|
||||
$scope.getFeedData(false);
|
||||
};// End doRefresh.
|
||||
|
||||
// loadMore is for loading more feed.
|
||||
$scope.loadMore = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
if ($scope.paging.next == "") {
|
||||
$scope.getFeedData(true);
|
||||
} else {
|
||||
$scope.getNextFeedData();
|
||||
}
|
||||
}
|
||||
};// End loadMore.
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of facebook feed controller.
|
||||
|
||||
// Controller of facebook friend list Page.
|
||||
appControllers.controller('facebookFriendListCtrl', function ($scope, $state, $ionicHistory, $stateParams, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
|
||||
// $scope.paging is the variable that store page index of friends list data.
|
||||
$scope.paging = {
|
||||
next: "",
|
||||
shouldLoadData: false
|
||||
};
|
||||
|
||||
// $scope.userInfo is the variable for store user profile information
|
||||
// It get data from localStorage service.
|
||||
$scope.userInfo = localStorage.get("Facebook");
|
||||
|
||||
// $scope.loading is the variable for loading progress.
|
||||
$scope.isLoading = false;
|
||||
|
||||
// $scope.feedList is the variable that store friends list data.
|
||||
$scope.friendsList = [];
|
||||
|
||||
}; // End initialForm.
|
||||
|
||||
// getFriendsData is for get friend list by calling to facebook API.
|
||||
// Parameter :
|
||||
// IsInit(bool) = for check that page are loading more data or refresh data.
|
||||
$scope.getFriendsData = function (IsInit) {
|
||||
|
||||
// call http service with this api to get facebook friend list data.
|
||||
// By send parameter access_token that get from facebook user profile from localStorage.
|
||||
$http.get("https://graph.facebook.com/me/taggable_friends", {
|
||||
params: {
|
||||
access_token: $scope.userInfo.access_token
|
||||
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// Store friend list data to $scope.feedList variable to show in page.
|
||||
$scope.friendsList = result.data.data;
|
||||
|
||||
// If it don't have data. Loading progress will stop and appear empty feed.
|
||||
if ($scope.friendsList == []) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
}
|
||||
|
||||
// Checking for next page data
|
||||
if (result.data.paging.next == null) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
}
|
||||
else {
|
||||
$scope.paging.next = result.data.paging.next;
|
||||
}// End checking for next page data.
|
||||
|
||||
// To stop loading progress.
|
||||
if (IsInit == true) {
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
} else {
|
||||
$scope.$broadcast('scroll.refreshComplete');
|
||||
}
|
||||
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
, function (error) {
|
||||
// Error retrieve data it will log out.
|
||||
if (error.data.error.code = 190) {
|
||||
$scope.logout();
|
||||
}
|
||||
|
||||
});
|
||||
}; // End getFeedData.
|
||||
|
||||
// logout for log out.
|
||||
$scope.logout = function () {
|
||||
// Clear facebook data in localStorage service.
|
||||
localStorage.set("Facebook", null);
|
||||
// Navigate to log in page.
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableBack: true
|
||||
});
|
||||
$scope.userinfoData = localStorage.get("Facebook");
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.facebookLogin');
|
||||
}
|
||||
;
|
||||
}; // End logout.
|
||||
|
||||
// getNextFriendsData for get next page of friend list data.
|
||||
$scope.getNextFriendsData = function () {
|
||||
$scope.isLoading = true;
|
||||
|
||||
// Call http service with $scope.paging.next url that get from the previous friend list.
|
||||
$http.get($scope.paging.next, {
|
||||
params: {
|
||||
format: "json"
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// Storing friend list data to $scope.friendsList.
|
||||
for (var friendsItem = 0; friendsItem < result.data.data.length; friendsItem++) {
|
||||
$scope.friendsList.push(result.data.data[friendsItem]);
|
||||
}
|
||||
|
||||
// Checking for next page data.
|
||||
if (result.data.paging.next == null) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
} else {
|
||||
$scope.paging.next = result.data.paging.next;
|
||||
}// End checking for next page data.
|
||||
|
||||
// To stop loading progress.
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
$scope.isLoading = false;
|
||||
});
|
||||
}; // End getNextFriendsData.
|
||||
|
||||
// doRefresh is for refresh friends list.
|
||||
$scope.doRefresh = function () {
|
||||
$scope.paging.shouldLoadData = false;
|
||||
$scope.getFriendsData(false);
|
||||
};// End doRefresh.
|
||||
|
||||
// loadMore is for loading more friends list.
|
||||
$scope.loadMore = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
if ($scope.paging.next == "") {
|
||||
$scope.getFriendsData(true);
|
||||
} else {
|
||||
$scope.getNextFriendsData();
|
||||
}
|
||||
}
|
||||
};// End loadMore.
|
||||
|
||||
$scope.initialForm();
|
||||
});// End of facebook friend list controller.
|
||||
@@ -0,0 +1,66 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Foursquare Feed-->
|
||||
<!--Controller name : foursquareFeedCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/foursquare/js/controllers.js-->
|
||||
<!--State name : app.foursquareFeed-->
|
||||
<!--URL : #app/foursquareFeed-->
|
||||
|
||||
<ion-view view-title="foursquare feed">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
|
||||
<!--social feed content section-->
|
||||
<ion-content id="social-feed-content">
|
||||
|
||||
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
|
||||
</ion-refresher>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<!--social card section-->
|
||||
<md-card ng-repeat="item in feedList" class="social-card">
|
||||
<md-card-content>
|
||||
<md-list-item class="md-2-line md-no-proxy" role="listitem">
|
||||
<img ng-src="{{ item.venue.photos.groups[0].items[0].prefix }}256x256{{item.venue.photos.groups[0].items[0].suffix }}"
|
||||
class="md-avatar">
|
||||
|
||||
<div class="md-list-item-text">
|
||||
<h3>{{item.venue.name}}</h3>
|
||||
|
||||
<p>{{item.createdAt |epochToDate | date:"short"}}</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<p>{{item.text}}</p>
|
||||
</md-card-content>
|
||||
<!--social card image section-->
|
||||
<div class="social-card-image">
|
||||
<img ng-src="{{item.photourl}}"
|
||||
ng-show="item.photourl != null ? true : false"
|
||||
class="ng-hide">
|
||||
</div><!--end social card image section-->
|
||||
|
||||
<!--social card footer section-->
|
||||
<div class="social-card-footer">
|
||||
<div class="row-content" layout="row">
|
||||
<div class="col-33">
|
||||
{{item.likes.count | numberSuffix}} <span>Likes</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
{{item.todo.count | numberSuffix}} <span>Todo</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
{{item.viewCount | numberSuffix}} <span>Views</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end social card footer section-->
|
||||
</md-card><!--end social card section-->
|
||||
|
||||
<ion-infinite-scroll ng-if="shouldLoadData" on-infinite="getFeedData(true)" distance="1%">
|
||||
</ion-infinite-scroll>
|
||||
|
||||
</ion-content><!--end social feed content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Foursquare Login-->
|
||||
<!--Controller name : foursquareLoginCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/foursquare/js/controllers.js-->
|
||||
<!--State name : app.foursquareLogin-->
|
||||
<!--URL : #app/foursquareLogin-->
|
||||
|
||||
<ion-view title="Foursquare Connect">
|
||||
<!--login content section-->
|
||||
<ion-content scroll="false" id="social-login">
|
||||
<form>
|
||||
|
||||
<div>
|
||||
<i class="fa fa-foursquare foursquare-color"></i>
|
||||
</div>
|
||||
<div class="sub-header">Connect data with foursquare</div>
|
||||
|
||||
<div class="ng-hide" ng-show="isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme foursquare-color-background"
|
||||
ng-click="goToUserProfile()">
|
||||
GO TO FOURSQUARE APP
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="ng-hide" ng-show="!isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme foursquare-color-background"
|
||||
ng-click="login()">
|
||||
LOG IN WITH FOURSQUARE
|
||||
</a>
|
||||
<br/>
|
||||
<a href="#/app/fakeSignUp" class="md-raised md-button md-default-theme social-default-button">SIGN
|
||||
UP</a>
|
||||
<a href="#/app/tryApp" class="md-raised md-button md-default-theme social-default-button">TRY APP</a>
|
||||
|
||||
<div class="footer">Already have an account? <a href="#/app/fakeLogin">Sign In</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</ion-content><!--end login content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,84 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Foursquare Profile-->
|
||||
<!--Controller name : foursquareProfileCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/foursquare/js/controllers.js-->
|
||||
<!--State name : app.foursquareProfile-->
|
||||
<!--URL : #app/foursquareProfile-->
|
||||
|
||||
<ion-view title="Social">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
|
||||
<ion-content>
|
||||
<div class="toolbar-image-cover" style="background-image: url('{{userInfo.pictureProfileUrl}}');"></div>
|
||||
<md-tabs class="ng-hide" ng-show="!loading" md-dynamic-height md-border-bottom>
|
||||
<md-tab label="Profile">
|
||||
<!--social profile content section-->
|
||||
<md-content id="social-profile-content" class="md-padding">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-card"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.id}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-person"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.name}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-circle-thin"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.gender}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-home"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.homeCity}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-mail"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.email}}</div>
|
||||
</div>
|
||||
|
||||
</md-content><!--end social profile content section-->
|
||||
</md-tab>
|
||||
<md-tab label="More">
|
||||
<md-content class="md-padding">
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-subheader class="foursquare-color">More Foursquare APIs.</md-subheader>
|
||||
<md-list-item class="md-list-item-default" ng-click="navigateTo('app.foursquareFeed')">
|
||||
<i class="ion-android-list"></i>
|
||||
|
||||
<p>View Feed</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default" ng-click="logOut($event)">
|
||||
<i class="ion-locked"></i>
|
||||
|
||||
<p>Log Out</p>
|
||||
</md-list-item>
|
||||
</md-list><!--end list section-->
|
||||
</md-content>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
<!--social loading progress section-->
|
||||
<md-progress-circular ng-show="loading" class="md-warn md-progress-social-profile ng-hide"
|
||||
md-mode="indeterminate"></md-progress-circular><!--end social loading progress section-->
|
||||
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -0,0 +1,262 @@
|
||||
// For connecting with foursquare you have to install $cordovaOauth by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove org.apache.cordova.inappbrowser
|
||||
// $ ionic plugin add org.apache.cordova.inappbrowser
|
||||
//
|
||||
// Learn more about $cordovaOauth :
|
||||
// http://ngcordova.com/docs/plugins/oauth/
|
||||
//
|
||||
// object schema of foursquareProfile that keep in localStorage is:
|
||||
// [{
|
||||
// name: foursquare name,
|
||||
// gender: gender,
|
||||
// email: email,
|
||||
// pictureProfileUrl: foursquare picture profile url,
|
||||
// id: foursquare id,
|
||||
// homeCity: homeCity,
|
||||
// access_token: access_token
|
||||
// }]
|
||||
//
|
||||
// Controller of foursquare login Page.
|
||||
appControllers.controller('foursquareLoginCtrl', function ($scope, $filter, $state, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
|
||||
// $scope.isLogin is the variable for check that user is login or not.
|
||||
$scope.isLogin = false;
|
||||
|
||||
// $scope.isLoading is the variable for loading progress.
|
||||
$scope.isLoading = false;
|
||||
|
||||
// $scope.userInfo is the variable that store user information data.
|
||||
$scope.userInfo = {
|
||||
name: "",
|
||||
gender: "",
|
||||
email: "",
|
||||
pictureProfileUrl: "",
|
||||
id: "",
|
||||
homeCity: "",
|
||||
access_token: ""
|
||||
};
|
||||
// Getting user information.
|
||||
$scope.userInfo = $scope.getUserProfile();
|
||||
// Getting current date.
|
||||
$scope.today = $filter('date')(new Date(), "yyyyMMdd");
|
||||
};// End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
$scope.navigateTo = function (targetPage) {
|
||||
$state.go(targetPage);
|
||||
};// End navigateTo.
|
||||
|
||||
// goToUserProfile is for navigate to foursquare Profile page.
|
||||
$scope.goToUserProfile = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
$scope.navigateTo('app.foursquareProfile');
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
};// End goToUserProfile.
|
||||
|
||||
//getUserProfile is for get user information form localStorage by calling localStorage.get service.
|
||||
$scope.getUserProfile = function () {
|
||||
$scope.userInfo = localStorage.get("Foursquare");
|
||||
if ($scope.userInfo != null) {
|
||||
$scope.isLogin = true;
|
||||
}
|
||||
;
|
||||
return $scope.userInfo;
|
||||
};// End getUserProfile.
|
||||
|
||||
// login for foursquare login
|
||||
$scope.login = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
|
||||
// Calling $cordovaOauth.foursquare for login foursquare.
|
||||
// Format:
|
||||
// $cordovaOauth.foursquare(CLIENT_ID,[FOURSQUARE_PERMISION])
|
||||
// For CLIENT_ID is window.globalVariable.oAuth.foursquare from www/js/app.js at globalVariable session.
|
||||
$cordovaOauth.foursquare(window.globalVariable.oAuth.foursquare).then(function (result) {
|
||||
//After call cordovaOauth.foursquare it will return access_token for you to calling foursquare API.
|
||||
$scope.accessToken = result.access_token;
|
||||
// Calling http service for getting user profile from foursquare.
|
||||
// By send parameter access_token , v (v is current version date).
|
||||
$http.get("https://api.foursquare.com/v2/users/self", {
|
||||
params: {
|
||||
oauth_token: result.access_token,
|
||||
v: $scope.today
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
// Store user profile information from foursquare API to userInfo variable.
|
||||
$scope.userInfo = {
|
||||
name: result.data.response.user.firstName + " " + result.data.response.user.lastName,
|
||||
gender: result.data.response.user.gender,
|
||||
email: result.data.response.user.contact.email,
|
||||
pictureProfileUrl: result.data.response.user.photo.prefix + "256x256" + result.data.response.user.photo.suffix,
|
||||
id: result.data.response.user.id,
|
||||
homeCity: result.data.response.user.homeCity,
|
||||
access_token: $scope.accessToken
|
||||
};
|
||||
// Store user profile information to localStorage service.
|
||||
localStorage.set("Foursquare", $scope.userInfo);
|
||||
// Navigate to foursquare profile page.
|
||||
$scope.navigateTo("app.foursquareProfile");
|
||||
});
|
||||
|
||||
}
|
||||
, function (error) {
|
||||
// Error retrieve data.
|
||||
console.log(error);
|
||||
});
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
};// End login.
|
||||
$scope.initialForm();
|
||||
});// End of foursquare login controller.
|
||||
|
||||
// Controller of foursquare Profile Page.
|
||||
appControllers.controller('foursquareProfileCtrl', function ($scope, $timeout, $mdDialog, $state, $ionicHistory, $stateParams, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
|
||||
// $scope.userInfo is the variable for store user profile information
|
||||
// It get data from localStorage service.
|
||||
$scope.userInfo = localStorage.get("Foursquare");
|
||||
|
||||
// $scope.loading is the variable for loading progress.
|
||||
$scope.loading = true;
|
||||
|
||||
// The function for show/hide loading progress.
|
||||
$timeout(function () {
|
||||
$scope.loading = false;
|
||||
}, 2000);
|
||||
};// End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
$scope.navigateTo = function (targetPage) {
|
||||
$state.go(targetPage);
|
||||
};// End navigateTo.
|
||||
|
||||
// logOut is for log out it will clear foursquare data in localStorage service.
|
||||
$scope.logOut = function ($event) {
|
||||
//mdDialog.show use for show alert box for Confirm to log out.
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm to Logout",
|
||||
content: "Do you want to logout Foursquare?",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to log out.
|
||||
// Clear foursquare data in localStorage service.
|
||||
localStorage.set("Foursquare", null);
|
||||
$scope.userinfoData = localStorage.get("Foursquare");
|
||||
// Navigate to log in page.
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.foursquareLogin');
|
||||
}
|
||||
|
||||
}, function () {
|
||||
// For cancel button to log out.
|
||||
});
|
||||
};// End logOut.
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of foursquare profile controller.
|
||||
|
||||
// Controller of foursquare feed Page.
|
||||
appControllers.controller('foursquareFeedCtrl', function ($scope, $filter, $state, $ionicHistory, $stateParams, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
// $scope.feedList is the variable that store feed data.
|
||||
$scope.feedList = [];
|
||||
|
||||
// $scope.today is current date
|
||||
$scope.today = $filter('date')(new Date(), "yyyyMMdd");
|
||||
|
||||
// $scope.feedList is the variable for loading status.
|
||||
$scope.shouldLoadData = true;
|
||||
|
||||
// $scope.userInfo is the variable for store user profile information
|
||||
// It get data from localStorage service.
|
||||
$scope.userInfo = localStorage.get("Foursquare");
|
||||
}// End initialForm.
|
||||
|
||||
// getFeedData is for get feed by calling to foursquare API.
|
||||
// Parameter :
|
||||
// IsInit(bool) = for check that page are loading more data or refresh data.
|
||||
$scope.getFeedData = function (IsInit) {
|
||||
|
||||
// Call http service with this api to get foursquare feed data.
|
||||
// By send parameter access_token that get from foursquare user profile from localStorage.
|
||||
// v for version date.
|
||||
$http.get("https://api.foursquare.com/v2/users/self/tips?sort=recent", {
|
||||
params: {
|
||||
oauth_token: $scope.userInfo.access_token,
|
||||
v: $scope.today
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// Store feed data to $scope.feedList variable to show in feed.
|
||||
$scope.feedList = result.data.response.tips.items;
|
||||
|
||||
// To stop loading progress.
|
||||
if (IsInit == true) {
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
} else {
|
||||
$scope.$broadcast('scroll.refreshComplete');
|
||||
}
|
||||
$scope.shouldLoadData = false;
|
||||
},
|
||||
function (error) {
|
||||
// Error retrieve data it will log out.
|
||||
if (error.data.meta.code = 401) {
|
||||
$scope.logout();
|
||||
}
|
||||
});
|
||||
};// End getFeedData.
|
||||
|
||||
// logout for log out.
|
||||
$scope.logout = function () {
|
||||
// Clear foursquare data in localStorage service.
|
||||
localStorage.set("Foursquare", null);
|
||||
// Navigate to log in page.
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableBack: true
|
||||
});
|
||||
$scope.userinfoData = localStorage.get("Foursquare");
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.foursquareLogin');
|
||||
};
|
||||
};// End logout.
|
||||
|
||||
// doRefresh is for refresh feed.
|
||||
$scope.doRefresh = function () {
|
||||
$scope.shouldLoadData = true;
|
||||
$scope.getFeedData(false);
|
||||
};// End doRefresh.
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of foursquare feed controller.
|
||||
@@ -0,0 +1,66 @@
|
||||
<!--View Information-->
|
||||
<!--View name : google Plus Feed-->
|
||||
<!--Controller name : googlePlusFeedCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/google-plus/js/controllers.js-->
|
||||
<!--State name : app.googlePlusFeed-->
|
||||
<!--URL : #app/googlePlusFeed-->
|
||||
|
||||
<ion-view view-title="Google feed">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
|
||||
<!--social feed content section-->
|
||||
<ion-content id="social-feed-content">
|
||||
|
||||
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
|
||||
</ion-refresher>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<!--social card section-->
|
||||
<md-card ng-repeat="item in feedList" class="social-card">
|
||||
<md-card-content>
|
||||
<md-list-item class="md-2-line md-no-proxy" role="listitem">
|
||||
<img ng-src="{{item.actor.image.url}}"
|
||||
class="md-avatar">
|
||||
|
||||
<div class="md-list-item-text">
|
||||
<h3>{{item.actor.displayName}}</h3>
|
||||
|
||||
<p>{{item.published | date:"short" }}</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<p>{{item.title}}</p>
|
||||
</md-card-content>
|
||||
<!--social card image section-->
|
||||
<div class="social-card-image">
|
||||
<img ng-src="{{item.object.attachments[0].image.url}}"
|
||||
ng-show="item.object.attachments[0].image.url != null ? true : false"
|
||||
class="ng-hide">
|
||||
</div><!--end social card image section-->
|
||||
|
||||
<!--social card footer section-->
|
||||
<div class="social-card-footer">
|
||||
<div class="row-content" layout="row">
|
||||
<div class="col-33">
|
||||
{{item.object.plusoners.totalItems | numberSuffix}} <span> Likes</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
{{item.object.replies.totalItems | numberSuffix}} <span>Comments</span>
|
||||
</div>
|
||||
<div class="col-33">
|
||||
{{item.object.resharers.totalItems | numberSuffix}} <span>Shared</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end social card footer section-->
|
||||
</md-card><!--end social card section-->
|
||||
|
||||
<ion-infinite-scroll ng-if="!paging.shouldLoadData" on-infinite="loadMore()" distance="1%">
|
||||
</ion-infinite-scroll>
|
||||
|
||||
</ion-content><!--end social feed content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!--View Information-->
|
||||
<!--View name : google Plus Login-->
|
||||
<!--Controller name : googlePlusLoginCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/google-plus/js/controllers.js-->
|
||||
<!--State name : app.googlePlusLogin-->
|
||||
<!--URL : #app/googlePlusLogin-->
|
||||
|
||||
<ion-view title="Google Plus Connect">
|
||||
<!--login content section-->
|
||||
<ion-content scroll="false" id="social-login">
|
||||
<form>
|
||||
|
||||
<div>
|
||||
<i class="fa fa-google-plus google-plus-color"></i>
|
||||
</div>
|
||||
<div class="sub-header">Connect data with google plus.</div>
|
||||
|
||||
<div class="ng-hide" ng-show="isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme google-plus-color-background"
|
||||
ng-click="goToUserProfile()">
|
||||
GO TO GOOGLE PLUS APP
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="ng-hide" ng-show="!isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme google-plus-color-background"
|
||||
ng-click="login()">
|
||||
LOG IN WITH GOOGLE PLUS
|
||||
</a>
|
||||
<br/>
|
||||
<a href="#/app/fakeSignUp" class="md-raised md-button md-default-theme social-default-button">SIGN
|
||||
UP</a>
|
||||
<a href="#/app/tryApp" class="md-raised md-button md-default-theme social-default-button">TRY APP</a>
|
||||
|
||||
<div class="footer">Already have an account? <a href="#/app/fakeLogin">Sign In</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</ion-content><!--end login content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,85 @@
|
||||
<!--View Information-->
|
||||
<!--View name : google Plus Profile-->
|
||||
<!--Controller name : googlePlusProfileCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/google-plus/js/controllers.js-->
|
||||
<!--State name : app.googlePlusProfile-->
|
||||
<!--URL : #app/googlePlusProfile-->
|
||||
|
||||
<ion-view title="Social">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
|
||||
<ion-content>
|
||||
<div class="toolbar-image-cover" style="background-image: url('{{userInfo.pictureProfileUrl}}');"></div>
|
||||
<md-tabs class="ng-hide" ng-show="!loading" md-dynamic-height md-border-bottom>
|
||||
<md-tab label="Profile">
|
||||
<!--social profile content section-->
|
||||
<md-content id="social-profile-content" class="md-padding">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-card"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.id}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-person"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.name}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="fa fa-circle-thin"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.gender}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-mail"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.email}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-link"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.link}}</div>
|
||||
</div>
|
||||
|
||||
</md-content><!--end social profile content section-->
|
||||
</md-tab>
|
||||
<md-tab label="More">
|
||||
<md-content class="md-padding">
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-subheader class="google-plus-color">More Google Plus APIs.</md-subheader>
|
||||
<md-list-item class="md-list-item-default"
|
||||
ng-click="navigateTo('app.googlePlusFeed')">
|
||||
<i class="ion-android-list"></i>
|
||||
|
||||
<p>View Feed</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default" ng-click="logOut($event)">
|
||||
<i class="ion-locked"></i>
|
||||
|
||||
<p>Log Out</p>
|
||||
</md-list-item>
|
||||
</md-list><!--end list section-->
|
||||
</md-content>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
<!--social loading progress section-->
|
||||
<md-progress-circular ng-show="loading" class="md-warn md-progress-social-profile ng-hide"
|
||||
md-mode="indeterminate"></md-progress-circular><!--end social loading progress section-->
|
||||
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -0,0 +1,326 @@
|
||||
// For connecting with google you have to install $cordovaOauth by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove org.apache.cordova.inappbrowser
|
||||
// $ ionic plugin add org.apache.cordova.inappbrowser
|
||||
//
|
||||
// Learn more about $cordovaOauth :
|
||||
// http://ngcordova.com/docs/plugins/oauth/
|
||||
//
|
||||
// object schema of google plus profile that keep in localStorage is:
|
||||
// [{
|
||||
// name: google plus name,
|
||||
// email: email,
|
||||
// link: google plus link,
|
||||
// pictureProfileUrl: google plus profile url,
|
||||
// gender: gender,
|
||||
// id: google plus id,
|
||||
// access_token: access_token
|
||||
// }]
|
||||
//
|
||||
// Controller of google plus login Page.
|
||||
appControllers.controller('googlePlusLoginCtrl', function ($scope, $state, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
|
||||
// $scope.isLogin is the variable for check that user is login or not.
|
||||
$scope.isLogin = false;
|
||||
|
||||
// $scope.isLoading is the variable for loading progress.
|
||||
$scope.isLoading = false;
|
||||
|
||||
// $scope.userInfo is the variable that store user information data.
|
||||
$scope.userInfo = {
|
||||
name: "",
|
||||
email: "",
|
||||
link: "",
|
||||
pictureProfileUrl: "",
|
||||
gender: "",
|
||||
id: "",
|
||||
access_token: ""
|
||||
};
|
||||
|
||||
// Getting user information.
|
||||
$scope.userInfo = $scope.getUserProfile();
|
||||
};// End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
$scope.navigateTo = function (targetPage) {
|
||||
$state.go(targetPage);
|
||||
};// End navigateTo.
|
||||
|
||||
// goToUserProfile is for navigate to Google Plus Profile page.
|
||||
$scope.goToUserProfile = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
$scope.navigateTo('app.googlePlusProfile');
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
};// End goToUserProfile.
|
||||
|
||||
//getUserProfile is for get user information form localStorage by calling localStorage.get service.
|
||||
$scope.getUserProfile = function () {
|
||||
$scope.userInfo = localStorage.get("GooglePlus");
|
||||
if ($scope.userInfo != null) {
|
||||
$scope.isLogin = true;
|
||||
}
|
||||
;
|
||||
return $scope.userInfo;
|
||||
};// End getUserProfile.
|
||||
|
||||
// login for google login
|
||||
$scope.login = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
|
||||
// Calling $cordovaOauth.google for login google.
|
||||
// Format:
|
||||
// $cordovaOauth.google(CLIENT_ID,[GOOGLE_PERMISION])
|
||||
// For CLIENT_ID is window.globalVariable.oAuth.googlePlus from www/js/app.js at globalVariable session.
|
||||
$cordovaOauth.google(window.globalVariable.oAuth.googlePlus
|
||||
, ["https://www.googleapis.com/auth/urlshortener",
|
||||
"https://www.googleapis.com/auth/userinfo.email"]).then(function (result) {
|
||||
//After call cordovaOauth.google it will return access_token for you to calling google API.
|
||||
|
||||
$scope.accessToken = result.access_token;
|
||||
// Calling http service for getting user profile from google.
|
||||
// By send parameter access_token, format.
|
||||
$http.get("https://www.googleapis.com/oauth2/v1/userinfo", {
|
||||
params: {
|
||||
access_token: result.access_token,
|
||||
format: "json"
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
// Store user profile information from google API to userInfo variable.
|
||||
$scope.userInfo = {
|
||||
name: result.data.name,
|
||||
email: result.data.email,
|
||||
link: result.data.link,
|
||||
pictureProfileUrl: result.data.picture,
|
||||
gender: result.data.gender,
|
||||
id: result.data.id,
|
||||
access_token: $scope.accessToken
|
||||
};
|
||||
// Store user profile information to localStorage service.
|
||||
localStorage.set("GooglePlus", $scope.userInfo);
|
||||
// Navigate to google plus profile page.
|
||||
$scope.navigateTo("app.googlePlusProfile");
|
||||
});
|
||||
|
||||
}
|
||||
, function (error) {
|
||||
// Error retrieve data.
|
||||
console.log(error);
|
||||
});
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
};// End login.
|
||||
|
||||
$scope.initialForm();
|
||||
});// End of google plus login controller.
|
||||
|
||||
// Controller of google plus profile Page.
|
||||
appControllers.controller('googlePlusProfileCtrl', function ($mdDialog, $scope, $state, $stateParams, $cordovaOauth, $ionicHistory, $http, localStorage, $timeout) {
|
||||
|
||||
// This function is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
|
||||
// $scope.userInfo is the variable for store user profile information
|
||||
// It get data from localStorage service.
|
||||
$scope.userInfo = localStorage.get("GooglePlus");
|
||||
|
||||
// $scope.loading is the variable for loading progress.
|
||||
$scope.loading = true;
|
||||
|
||||
// The function for show/hide loading progress.
|
||||
$timeout(function () {
|
||||
$scope.loading = false;
|
||||
}, 2000);
|
||||
};// End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
$scope.navigateTo = function (targetPage) {
|
||||
$state.go(targetPage);
|
||||
};// End navigateTo
|
||||
|
||||
// logOut is for log out it will clear google plus data in localStorage service.
|
||||
$scope.logOut = function ($event) {
|
||||
//mdDialog.show use for show alert box for confirm to log out.
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm to Logout",
|
||||
content: "Do you want to logout Google Plus?",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to log out.
|
||||
// Clear google plus data in localStorage service.
|
||||
localStorage.set("GooglePlus", null);
|
||||
// Navigate to log in page.
|
||||
$scope.userinfoData = localStorage.get("GooglePlus");
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.googlePlusLogin');
|
||||
}
|
||||
|
||||
}, function () {
|
||||
// For cancel button to log out.
|
||||
});
|
||||
};// End logOut
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of google plus profile controller.
|
||||
|
||||
// Controller of google plus feed Page.
|
||||
appControllers.controller('googlePlusFeedCtrl', function ($scope, $state, $ionicHistory, $stateParams, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
|
||||
// $scope.paging is the variable that store page index of feed data.
|
||||
$scope.paging = {
|
||||
next: "",
|
||||
shouldLoadData: false
|
||||
};
|
||||
// $scope.userInfo is the variable for store user profile information
|
||||
// It get data from localStorage service.
|
||||
$scope.userInfo = localStorage.get("GooglePlus");
|
||||
|
||||
// $scope.loading is the variable for loading progress.
|
||||
$scope.isLoading = false;
|
||||
|
||||
// $scope.feedList is the variable that store feed data.
|
||||
$scope.feedList = [];
|
||||
}// End initialForm.
|
||||
|
||||
// getFeedData is for get feed by calling to google API.
|
||||
// Parameter :
|
||||
// IsInit(bool) = for check that page are loading more data or refresh data.
|
||||
$scope.getFeedData = function (IsInit) {
|
||||
// Call http service with this api to get google plus feed data.
|
||||
// By send parameter access_token that get from google plus user profile from localStorage.
|
||||
$http.get("https://www.googleapis.com/plus/v1/people/me/activities/public", {
|
||||
params: {
|
||||
access_token: $scope.userInfo.access_token
|
||||
}
|
||||
})
|
||||
.then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// Store feed data to $scope.feedList variable to show in feed.
|
||||
$scope.feedList = result.data.items;
|
||||
|
||||
// If it don't have data. Loading progress will stop and appear empty feed.
|
||||
if ($scope.feedList == []) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
};
|
||||
|
||||
// Checking for next page data
|
||||
if (result.data.nextPageToken == null) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
}
|
||||
else {
|
||||
$scope.paging.next = result.data.nextPageToken;
|
||||
}// End checking for next page data.
|
||||
|
||||
// To stop loading progress.
|
||||
if (IsInit == true) {
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
} else {
|
||||
$scope.$broadcast('scroll.refreshComplete');
|
||||
}
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
, function (error) {
|
||||
// Error retrieve data it will log out.
|
||||
if (error.code = 403) {
|
||||
$scope.logout();
|
||||
}
|
||||
$scope.paging.shouldLoadData = true;
|
||||
});
|
||||
|
||||
}; // End getFeedData.
|
||||
|
||||
// logout for log out.
|
||||
$scope.logout = function () {
|
||||
// Clear google plus data in localStorage service.
|
||||
localStorage.set("GooglePlus", null);
|
||||
// Navigate to log in page.
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableBack: true
|
||||
});
|
||||
$scope.userinfoData = localStorage.get("GooglePlus");
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.googlePlusLogin');
|
||||
};
|
||||
};// End logout.
|
||||
|
||||
// getNextFeedData for get next page of feed data.
|
||||
$scope.getNextFeedData = function () {
|
||||
$scope.isLoading = true;
|
||||
// Call http service with google API and send parameter pageToken that get from the previous feed.
|
||||
$http.get("https://www.googleapis.com/plus/v1/people/me/activities/public", {
|
||||
params: {
|
||||
access_token: $scope.userInfo.access_token,
|
||||
pageToken: $scope.paging.next
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// storing feed data to $scope.feedList.
|
||||
for (var feedItem = 0; feedItem < result.data.items.length; feedItem++) {
|
||||
$scope.feedList.push(result.data.items[feedItem]);
|
||||
}
|
||||
// Checking for next page data.
|
||||
if (result.data.nextPageToken == null) {
|
||||
|
||||
$scope.paging.shouldLoadData = true;
|
||||
}
|
||||
else {
|
||||
|
||||
$scope.paging.next = result.data.nextPageToken;
|
||||
}// End checking for next page data.
|
||||
|
||||
// To stop loading progress.
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
$scope.isLoading = false;
|
||||
});
|
||||
};// End getNextFeedData.
|
||||
|
||||
// doRefresh is for refresh feed.
|
||||
$scope.doRefresh = function () {
|
||||
$scope.paging.shouldLoadData = false;
|
||||
$scope.getFeedData(false);
|
||||
};// End doRefresh.
|
||||
|
||||
// loadMore is for loading more feed.
|
||||
$scope.loadMore = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
if ($scope.paging.next == "") {
|
||||
$scope.getFeedData(true);
|
||||
} else {
|
||||
$scope.getNextFeedData();
|
||||
}
|
||||
}
|
||||
};// End loadMore.
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of google plus feed controller.
|
||||
@@ -0,0 +1,64 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Instagram Feed-->
|
||||
<!--Controller name : instagramFeedCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/instagram/js/controllers.js-->
|
||||
<!--State name : app.instagramFeed-->
|
||||
<!--URL : #app/instagramFeed-->
|
||||
|
||||
<ion-view view-title="Instagram feed">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
|
||||
<!--social feed content section-->
|
||||
<ion-content id="social-feed-content">
|
||||
|
||||
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
|
||||
</ion-refresher>
|
||||
|
||||
<ion-list>
|
||||
<!--social card section-->
|
||||
<md-card ng-repeat="item in feedList" class="social-card">
|
||||
|
||||
<md-card-content>
|
||||
<md-list-item class="md-2-line md-no-proxy" role="listitem">
|
||||
<img ng-src="{{item.user.profile_picture}}"
|
||||
class="md-avatar">
|
||||
|
||||
<div class="md-list-item-text">
|
||||
<h3>{{item.user.username}}</h3>
|
||||
|
||||
<p>{{item.created_time |epochToDate | date:"short"}}</p>
|
||||
|
||||
<p ng-show="item.location.name != null ? true : false"><i class="fa fa-location-arrow"></i>
|
||||
{{item.location.name}}</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<p>{{item.caption.text}}</p>
|
||||
</md-card-content>
|
||||
<!--social card image section-->
|
||||
<div class="social-card-image">
|
||||
<img ng-src="{{item.images.standard_resolution.url}}">
|
||||
</div><!--end social card image section-->
|
||||
|
||||
<!--social card footer section-->
|
||||
<div class="social-card-footer">
|
||||
<div class="row-content" layout="row">
|
||||
<div class="col-50">
|
||||
{{item.likes.count | numberSuffix}} <span> Likes</span>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
{{item.comments.count | numberSuffix}} <span>Comments</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--end social card footer section-->
|
||||
</md-card><!--end social card section-->
|
||||
|
||||
<ion-infinite-scroll ng-if="!paging.shouldLoadData" on-infinite="loadMore()" distance="1%">
|
||||
</ion-infinite-scroll>
|
||||
|
||||
</ion-content><!--end social feed content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Instagram Login-->
|
||||
<!--Controller name : instagramLoginCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/instagram/js/controllers.js-->
|
||||
<!--State name : app.instagramLogin-->
|
||||
<!--URL : #app/instagramLogin-->
|
||||
|
||||
<ion-view title="Instagram Connect">
|
||||
<!--login content section-->
|
||||
<ion-content scroll="false" id="social-login">
|
||||
<form>
|
||||
|
||||
<div>
|
||||
<i class="fa fa-instagram instagram-color"></i>
|
||||
</div>
|
||||
<div class="sub-header">Connect data with instagram.</div>
|
||||
|
||||
<div class="ng-hide" ng-show="isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme instagram-color-background"
|
||||
ng-click="goToUserProfile()">
|
||||
GO TO INSTAGRAM APP
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="ng-hide" ng-show="!isLogin">
|
||||
<a class="md-raised social-button md-button md-default-theme instagram-color-background"
|
||||
ng-click="login()">
|
||||
LOG IN WITH INSTAGRAM
|
||||
</a>
|
||||
<br/>
|
||||
<a href="#/app/fakeSignUp" class="md-raised md-button md-default-theme social-default-button">SIGN
|
||||
UP</a>
|
||||
<a href="#/app/tryApp" class="md-raised md-button md-default-theme social-default-button">TRY APP</a>
|
||||
|
||||
<div class="footer">Already have an account? <a href="#/app/fakeLogin">Sign In</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</ion-content><!--end login content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,101 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Instagram Profile-->
|
||||
<!--Controller name : instagramProfileCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/instagram/js/controllers.js-->
|
||||
<!--State name : app.instagramProfile-->
|
||||
<!--URL : #app/instagramProfile-->
|
||||
|
||||
<ion-view title="Social">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
|
||||
<ion-content>
|
||||
<div class="toolbar-image-cover material-background-nav-bar">
|
||||
<img ng-src="{{userInfo.pictureProfileUrl}}" class="user-img"/>
|
||||
</div>
|
||||
<md-tabs class="ng-hide" ng-show="!loading" md-dynamic-height md-border-bottom>
|
||||
<md-tab label="Profile">
|
||||
<!--social profile content section-->
|
||||
<md-content id="social-profile-content" class="md-padding">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-card"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.id}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-person"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.name}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-information-circled"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.bio}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-desktop"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.website}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-images"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.post}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-people"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.followers}}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-33">
|
||||
<i class="ion-android-person-add"></i>
|
||||
</div>
|
||||
<div class="col-66">{{userInfo.following}}</div>
|
||||
</div>
|
||||
|
||||
</md-content><!--end social profile content section-->
|
||||
</md-tab>
|
||||
<md-tab label="More">
|
||||
<md-content class="md-padding">
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-subheader class="instagram-color">More Instagram APIs.</md-subheader>
|
||||
<md-list-item class="md-list-item-default"
|
||||
ng-click="navigateTo('app.instagramFeed')">
|
||||
<i class="ion-android-list"></i>
|
||||
|
||||
<p>View Feed</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default" ng-click="logOut($event)">
|
||||
<i class="ion-locked"></i>
|
||||
|
||||
<p>Log Out</p>
|
||||
</md-list-item>
|
||||
</md-list><!--end list section-->
|
||||
</md-content>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
|
||||
<!--social loading progress section-->
|
||||
<md-progress-circular ng-show="loading" class="md-warn md-progress-social-profile ng-hide"
|
||||
md-mode="indeterminate"></md-progress-circular><!--end social loading progress section-->
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -0,0 +1,328 @@
|
||||
// For connecting with instagram you have to install $cordovaOauth by running the following
|
||||
// command in your cmd.exe for windows or terminal for mac:
|
||||
// $ cd your_project_path
|
||||
// $ ionic plugin remove org.apache.cordova.inappbrowser
|
||||
// $ ionic plugin add org.apache.cordova.inappbrowser
|
||||
//
|
||||
// Learn more about $cordovaOauth :
|
||||
// http://ngcordova.com/docs/plugins/oauth/
|
||||
//
|
||||
// object schema of instagramProfile that keep in localStorage is:
|
||||
// [{
|
||||
// name: instagram name,
|
||||
// bio: bio,
|
||||
// website: website,
|
||||
// pictureProfileUrl: instagram picture profile url,
|
||||
// id: instagram id,
|
||||
// post: post,
|
||||
// followers: followers,
|
||||
// following: following,
|
||||
// access_token: access_token
|
||||
// }]
|
||||
//
|
||||
// Controller of instagram login Page.
|
||||
appControllers.controller('instagramLoginCtrl', function ($scope, $state, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
|
||||
// $scope.isLogin is the variable for check that user is login or not.
|
||||
$scope.isLogin = false;
|
||||
|
||||
// $scope.isLoading is the variable for loading progress.
|
||||
$scope.isLoading = false;
|
||||
|
||||
// $scope.userInfo is the variable that store user information data.
|
||||
$scope.userInfo = {
|
||||
name: "",
|
||||
bio: "",
|
||||
website: "",
|
||||
pictureProfileUrl: "",
|
||||
id: "",
|
||||
post: 0,
|
||||
followers: 0,
|
||||
following: 0,
|
||||
access_token: ""
|
||||
};
|
||||
|
||||
// Getting user information.
|
||||
$scope.userInfo = $scope.getUserProfile();
|
||||
};// End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
$scope.navigateTo = function (targetPage) {
|
||||
$state.go(targetPage);
|
||||
};// End navigateTo.
|
||||
|
||||
// goToUserProfile is for navigate to instagram Profile page.
|
||||
$scope.goToUserProfile = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
$scope.navigateTo('app.instagramProfile');
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
};// End goToUserProfile.
|
||||
|
||||
//getUserProfile is for get user information form localStorage by calling localStorage.get service.
|
||||
$scope.getUserProfile = function () {
|
||||
$scope.userInfo = localStorage.get("Instagram");
|
||||
if ($scope.userInfo != null) {
|
||||
$scope.isLogin = true;
|
||||
}
|
||||
;
|
||||
return $scope.userInfo;
|
||||
};// End getUserProfile.
|
||||
|
||||
// login for instagram.
|
||||
$scope.login = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
|
||||
// Calling $cordovaOauth.instagram for login instagram.
|
||||
// Format:
|
||||
// $cordovaOauth.instagram(CLIENT_ID,[INSTAGRAM_PERMISION])
|
||||
// For CLIENT_ID is window.globalVariable.oAuth.instagram from www/js/app.js at globalVariable session.
|
||||
$cordovaOauth.instagram(window.globalVariable.oAuth.instagram, ["basic", "likes", "comments"]).then(function (result) {
|
||||
//After call cordovaOauth.instagram it will return access_token for you to calling instagram API.
|
||||
$scope.accessToken = result.access_token;
|
||||
// Calling http service for getting user profile from instagram.
|
||||
// By send parameter access_token , format.
|
||||
$http.get("https://api.instagram.com/v1/users/self", {
|
||||
params: {
|
||||
access_token: result.access_token,
|
||||
format: "json"
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
// Store user profile information from instagram API to userInfo variable.
|
||||
$scope.userInfo = {
|
||||
name: result.data.data.username,
|
||||
bio: result.data.data.bio,
|
||||
website: result.data.data.website,
|
||||
pictureProfileUrl: result.data.data.profile_picture,
|
||||
id: result.data.data.id,
|
||||
post: result.data.data.counts.media,
|
||||
followers: result.data.data.counts.followed_by,
|
||||
following: result.data.data.counts.follows,
|
||||
access_token: $scope.accessToken
|
||||
};
|
||||
// Store user profile information to localStorage service.
|
||||
localStorage.set("Instagram", $scope.userInfo);
|
||||
// Navigate to instagram profile page.
|
||||
$scope.navigateTo("app.instagramProfile");
|
||||
|
||||
});
|
||||
}
|
||||
, function (error) {
|
||||
// Error retrieve data.
|
||||
console.log(error);
|
||||
});
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
};// End login.
|
||||
$scope.initialForm();
|
||||
});// End of instagram login controller.
|
||||
|
||||
// Controller of instagram profile Page.
|
||||
appControllers.controller('instagramProfileCtrl', function ($mdDialog, $scope, $state, $stateParams, $cordovaOauth, $ionicHistory, $http, localStorage, $timeout) {
|
||||
|
||||
// This function is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
|
||||
// $scope.userInfo is the variable for store user profile information
|
||||
// It get data from localStorage service.
|
||||
$scope.userInfo = localStorage.get("Instagram");
|
||||
|
||||
// $scope.loading is the variable for loading progress.
|
||||
$scope.loading = true;
|
||||
|
||||
// The function for show/hide loading progress.
|
||||
$timeout(function () {
|
||||
$scope.loading = false;
|
||||
}, 2000);
|
||||
};// End initialForm.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
$scope.navigateTo = function (targetPage) {
|
||||
$state.go(targetPage);
|
||||
};// End navigateTo.
|
||||
|
||||
// logOut is for log out it will clear instagram data in localStorage service.
|
||||
$scope.logOut = function ($event) {
|
||||
//mdDialog.show use for show alert box for Confirm to log out.
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm to Logout",
|
||||
content: "Do you want to logout Instagram?",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
// For confirm button to log out.
|
||||
// Clear instagram data in localStorage service.
|
||||
localStorage.set("Instagram", null);
|
||||
$scope.userinfoData = localStorage.get("Instagram");
|
||||
// Navigate to log in page.
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.instagramLogin');
|
||||
}
|
||||
|
||||
|
||||
}, function () {
|
||||
// For cancel button to log out.
|
||||
});
|
||||
|
||||
|
||||
};// End logOut.
|
||||
$scope.initialForm();
|
||||
});// End of instagram profile controller.
|
||||
|
||||
// Controller of instagram feed Page.
|
||||
appControllers.controller('instagramFeedCtrl', function ($scope, $state, $ionicHistory, $stateParams, $cordovaOauth, $http, localStorage) {
|
||||
|
||||
// This function is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
|
||||
// $scope.paging is the variable that store page index of feed data.
|
||||
$scope.paging = {
|
||||
next: "",
|
||||
shouldLoadData: false
|
||||
};
|
||||
// $scope.userInfo is the variable for store user profile information.
|
||||
// It get data from localStorage service.
|
||||
$scope.userInfo = localStorage.get("Instagram");
|
||||
|
||||
// $scope.loading is the variable for loading progress.
|
||||
$scope.isLoading = false;
|
||||
|
||||
// $scope.feedList is the variable that store feed data.
|
||||
$scope.feedList = [];
|
||||
}// End initialForm.
|
||||
|
||||
// getFeedData is for get feed by calling to instagram API.
|
||||
// Parameter :
|
||||
// IsInit(bool) = for check that page are loading more data or refresh data.
|
||||
$scope.getFeedData = function (IsInit) {
|
||||
|
||||
// Call http service with this api to get instagram feed data.
|
||||
// By send parameter access_token that get from instagram user profile from localStorage.
|
||||
$http.get("https://api.instagram.com/v1/users/self/feed", {
|
||||
params: {
|
||||
access_token: $scope.userInfo.access_token
|
||||
}
|
||||
})
|
||||
.then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// store feed data to $scope.feedList variable to show in feed.
|
||||
$scope.feedList = result.data.data;
|
||||
|
||||
// If it don't have data. Loading progress will stop and appear empty feed.
|
||||
if ($scope.feedList == []) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
}
|
||||
// Checking for next page data
|
||||
if (result.data.pagination.next_url == null) {
|
||||
|
||||
$scope.paging.shouldLoadData = true;
|
||||
}
|
||||
else {
|
||||
$scope.paging.next = result.data.pagination.next_url;
|
||||
}// End checking for next page data.
|
||||
|
||||
// To stop loading progress.
|
||||
if (IsInit == true) {
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
} else {
|
||||
$scope.$broadcast('scroll.refreshComplete');
|
||||
}
|
||||
|
||||
$scope.isLoading = false;
|
||||
}
|
||||
, function (error) {
|
||||
// Error retrieve data it will log out.
|
||||
if (error.data.meta.code = 400) {
|
||||
$scope.logout();
|
||||
}
|
||||
});
|
||||
};// End getFeedData.
|
||||
|
||||
// logout for log out.
|
||||
$scope.logout = function () {
|
||||
// Clear instagram data in localStorage service.
|
||||
localStorage.set("Instagram", null);
|
||||
|
||||
// Navigate to log in page.
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableBack: true
|
||||
});
|
||||
$scope.userinfoData = localStorage.get("Instagram");
|
||||
if ($scope.userinfoData == null) {
|
||||
$state.go('app.instagramLogin');
|
||||
};
|
||||
}; // End logout.
|
||||
|
||||
// getNextFeedData for get next page of feed data.
|
||||
$scope.getNextFeedData = function () {
|
||||
$scope.isLoading = true;
|
||||
// Call http service with $scope.paging.next url that get from the previous feed.
|
||||
$http.get($scope.paging.next, {
|
||||
params: {
|
||||
format: "json"
|
||||
}
|
||||
}).then(function (result) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// Storing feed data to $scope.feedList.
|
||||
for (var feedItem = 0; feedItem < result.data.data.length; feedItem++) {
|
||||
$scope.feedList.push(result.data.data[feedItem]);
|
||||
}
|
||||
|
||||
// Checking for next page data.
|
||||
if (result.data.pagination.next_url == null) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
} else {
|
||||
$scope.paging.next = result.data.pagination.next_url;
|
||||
}// End checking for next page data.
|
||||
|
||||
// To stop loading progress.
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
$scope.isLoading = false;
|
||||
});
|
||||
};// End getNextFeedData.
|
||||
|
||||
// doRefresh is for refresh feed.
|
||||
$scope.doRefresh = function () {
|
||||
$scope.paging.shouldLoadData = false;
|
||||
$scope.getFeedData(false);
|
||||
};// End doRefresh.
|
||||
|
||||
// loadMore is for loading more feed.
|
||||
$scope.loadMore = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
if ($scope.paging.next == "") {
|
||||
$scope.getFeedData(true);
|
||||
} else {
|
||||
$scope.getNextFeedData();
|
||||
}
|
||||
}
|
||||
};// End loadMore.
|
||||
|
||||
$scope.initialForm();
|
||||
|
||||
});// End of instagram feed controller.
|
||||
@@ -0,0 +1,71 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Wordpress Feed-->
|
||||
<!--Controller name : wordpressFeedCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/wordpress/js/controllers.js-->
|
||||
<!--State name : app.wordpressFeed-->
|
||||
<!--URL : #app/wordpressFeed-->
|
||||
|
||||
<ion-view view-title="wordpress">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="goBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
<!--social feed content section-->
|
||||
<ion-content id="social-feed-content">
|
||||
<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()">
|
||||
</ion-refresher>
|
||||
|
||||
<!--social card section-->
|
||||
<md-card ng-repeat="item in feedList" ng-click="navigateTo('app.wordpressPost',item,wordpressUrl)"
|
||||
class="social-card">
|
||||
<md-card-content>
|
||||
<md-list-item class="md-2-line md-no-proxy" role="listitem">
|
||||
<img ng-src="{{item.author.avatar}}" class="md-avatar">
|
||||
|
||||
<div class="md-list-item-text">
|
||||
<h3>{{item.author.username}}</h3>
|
||||
|
||||
<p>{{item.date | date:"short" }}</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<p class="feed-name">{{item.title}}</p>
|
||||
|
||||
<div class="wp-content" data-ng-bind-html="item.content"></div>
|
||||
</md-card-content>
|
||||
|
||||
<!--social card wordpress footer section-->
|
||||
<div class="social-card-wp-footer row">
|
||||
<div class="col">
|
||||
<i class="ion-android-folder"></i>
|
||||
<span ng-repeat="category in item.terms.category">
|
||||
{{category.name}}{{($index != item.terms.category.length-1) ? ",":""}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="social-card-wp-footer row">
|
||||
<div class="col">
|
||||
<i class="ion-pricetags"></i>
|
||||
<span ng-repeat="tag in item.terms.post_tag">
|
||||
{{tag.name}}{{($index != item.terms.post_tag.length-1) ? ",":""}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="social-card-wp-footer row">
|
||||
<div class="col no-border-bottom">
|
||||
<i class="ion-android-chat"></i>
|
||||
<span> View comments </span>
|
||||
</div>
|
||||
</div>
|
||||
<!--social card wordpress footer section-->
|
||||
|
||||
</md-card> <!--end social card section-->
|
||||
|
||||
<ion-infinite-scroll ng-if="!paging.shouldLoadData" on-infinite="loadMore()" distance="1%">
|
||||
</ion-infinite-scroll>
|
||||
|
||||
</ion-content><!--social feed content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,36 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Wordpress Login-->
|
||||
<!--Controller name : wordpressLoginCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/wordpress/js/controllers.js-->
|
||||
<!--State name : app.wordpressLogin-->
|
||||
<!--URL : #app/wordpressLogin-->
|
||||
|
||||
<ion-view title="Wordpress Connect">
|
||||
<!--login content section-->
|
||||
<ion-content scroll="false" id="social-login">
|
||||
<form>
|
||||
|
||||
<div>
|
||||
<i class="fa fa-wordpress wordpress-color"></i>
|
||||
</div>
|
||||
<div class="sub-header">Connect data with Wordpress.</div>
|
||||
|
||||
|
||||
<div class="wordpress-login">
|
||||
|
||||
<md-input-container md-no-float="">
|
||||
<input ng-model="wpUrl" placeholder="Wordpress address url.">
|
||||
</md-input-container>
|
||||
<a class="md-raised social-button md-button md-default-theme wordpress-background {{ wpUrl.length ==0 ? 'disabled-link' : ''}}"
|
||||
ng-click="login(wpUrl)">
|
||||
GO TO WORDPRESS
|
||||
</a>
|
||||
|
||||
|
||||
<div class="footer">
|
||||
Plugins json REST Api is required.
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</ion-content><!--end login content section-->
|
||||
</ion-view>
|
||||
@@ -0,0 +1,79 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Wordpress Post-->
|
||||
<!--Controller name : wordpressPostCtrl-->
|
||||
<!--Controller path : www/templates/social-network-connect/wordpress/js/controllers.js-->
|
||||
<!--State name : app.wordpressPost-->
|
||||
<!--URL : #app/wordpressPost-->
|
||||
|
||||
<ion-view view-title="Post Detail">
|
||||
<!--left button on navigation bar-->
|
||||
<ion-nav-buttons side="left">
|
||||
<a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
|
||||
<i class="ion-android-arrow-back"></i>
|
||||
</a>
|
||||
</ion-nav-buttons><!--end left button on navigation bar-->
|
||||
<!--wordpress post content section-->
|
||||
<ion-content id="wordpress-post-content" class="fade-in">
|
||||
<md-card-content>
|
||||
|
||||
<p class="feed-name">{{post.title}}</p>
|
||||
<!--wordpress content section-->
|
||||
<div class="wp-content" data-ng-bind-html="post.content"></div><!--end wordpress content section-->
|
||||
<md-list-item class="md-2-line md-no-proxy" role="listitem">
|
||||
<img ng-src="{{post.author.avatar}}" class="md-avatar">
|
||||
|
||||
<div class="md-list-item-text">
|
||||
<h3>{{post.author.username}}</h3>
|
||||
|
||||
<p>{{post.date | date:"short" }}</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
|
||||
</md-card-content>
|
||||
<!--card footer section-->
|
||||
<div class="social-card-wp-footer row" ng-show="post.terms.category != null ? true : false">
|
||||
<div class="col">
|
||||
<i class="ion-android-folder"></i>
|
||||
<span ng-repeat="category in post.terms.category">
|
||||
{{category.name}}{{($index != post.terms.category.length-1) ? ",":""}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="social-card-wp-footer row" ng-show="post.terms.post_tag != null ? true : false">
|
||||
<div class="col">
|
||||
<i class="ion-pricetags"></i>
|
||||
<span ng-repeat="tag in post.terms.post_tag">
|
||||
{{tag.name}}{{($index != post.terms.post_tag.length-1) ? ",":""}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!--end card footer section-->
|
||||
|
||||
<!--list comment section-->
|
||||
<md-list class="comment">
|
||||
<md-subheader>Comments</md-subheader>
|
||||
<md-list-item class="md-3-line" ng-repeat="comment in comments">
|
||||
<img ng-src="{{comment.author.avatar}}" class="md-avatar"/>
|
||||
|
||||
<div class="md-list-item-text">
|
||||
<h3>{{comment.author.name}}</h3>
|
||||
|
||||
<p data-ng-bind-html="comment.content"></p>
|
||||
</div>
|
||||
<md-divider></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
</md-list><!--end list comment section-->
|
||||
|
||||
|
||||
</ion-content><!--end wordpress post content section-->
|
||||
|
||||
<!--loading progress-->
|
||||
<div id="wordpress-post-loading-progress" class="loading-progress fade-in">
|
||||
<ion-spinner ng-if="!isAndroid" class="progress-circular"></ion-spinner>
|
||||
<md-progress-circular ng-if="isAndroid" class="md-warn md-progress-social-profile"
|
||||
md-mode="indeterminate"></md-progress-circular>
|
||||
</div><!--end loading progress-->
|
||||
|
||||
</ion-view>
|
||||
@@ -0,0 +1,205 @@
|
||||
// Controller of WordPress feed Page.
|
||||
// To connect with WordPress feed you have to install WP REST API to your WordPress site.
|
||||
// by this link: https://wordpress.org/plugins/json-rest-api/
|
||||
// Add WP REST API plugin to your WordPress site.
|
||||
// Set website format to support with WP REST API.
|
||||
// You can find more information at project documentation.
|
||||
|
||||
appControllers.controller('wordpressFeedCtrl', function ($scope, $http, $state, $stateParams, $ionicHistory) {
|
||||
|
||||
// This function is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
// $scope.feedList is the variable that store feed data from wordPress API.
|
||||
$scope.feedList = [];
|
||||
|
||||
// $scope.paging is the variable that store page index of feed data from wordPress API.
|
||||
$scope.paging = {
|
||||
page: 1,
|
||||
shouldLoadData: false
|
||||
};
|
||||
|
||||
// $scope.wordpressUrl is the variable that use to call wordPress API.
|
||||
// It get wordpressUrl from state parameter that pass from wordpressLogin page.
|
||||
$scope.wordpressUrl = $stateParams.wordpressUrl;
|
||||
|
||||
// $scope.isLoading is the variable use for loading.
|
||||
$scope.isLoading = false;
|
||||
};// End initialForm.
|
||||
|
||||
// getPostData is for get feed by calling to wordpress API.
|
||||
// Parameter :
|
||||
// IsInit(bool) = for check that page are loading more data or refresh data.
|
||||
$scope.getPostData = function (IsInit) {
|
||||
|
||||
// API format is YOUR_WORDPRESS_URL/wp-json/posts?_jsonp=JSON_CALLBACK&page=PAGE_NUMBER
|
||||
var dataURL = $scope.wordpressUrl + "/wp-json/posts?_jsonp=JSON_CALLBACK&page=" + $scope.paging.page;
|
||||
|
||||
// http will return feed data.
|
||||
$http.jsonp(dataURL).success(function (data, status, headers, config) {
|
||||
// Success retrieve data by calling http service.
|
||||
|
||||
// If it don't have data. Loading progress will stop and appear empty feed.
|
||||
if (data.length == 0) {
|
||||
$scope.paging.shouldLoadData = true;
|
||||
}
|
||||
|
||||
// If have data it will store feed data to $scope.feedList variable to show in feed.
|
||||
else {
|
||||
for (var postItem = 0; postItem < data.length; postItem++) {
|
||||
$scope.feedList.push(data[postItem]);
|
||||
}
|
||||
$scope.paging.page = $scope.paging.page + 1;
|
||||
}
|
||||
|
||||
// To stop loading progress.
|
||||
if (IsInit == true) {
|
||||
$scope.$broadcast('scroll.infiniteScrollComplete');
|
||||
} else {
|
||||
$scope.$broadcast('scroll.refreshComplete');
|
||||
}
|
||||
|
||||
$scope.isLoading = false;
|
||||
}).
|
||||
error(function (data, status, headers, config) {
|
||||
// Error retrieve data it will navigate back to wordpressLogin page.
|
||||
$scope.isLoading = false;
|
||||
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableBack: true
|
||||
});
|
||||
|
||||
$state.go("app.wordpressLogin", {
|
||||
isShowError: true
|
||||
});
|
||||
|
||||
});
|
||||
};// End getPostData.
|
||||
|
||||
// navigateTo is for navigate to other page
|
||||
// by using targetPage to be the destination page.
|
||||
// Sending objectData and wordpress url to the destination page.
|
||||
// Parameter :
|
||||
// targetPage = destination page.
|
||||
// objectData = object that will sent to destination page.
|
||||
// wordpressUrl = wordpress url
|
||||
$scope.navigateTo = function (targetPage, objectData, wordpressUrl) {
|
||||
$state.go(targetPage, {
|
||||
postDetail: objectData,
|
||||
wordpressUrl: wordpressUrl
|
||||
});
|
||||
};// End navigateTo.
|
||||
|
||||
// goBack is for navigate back to wordpressLogin page
|
||||
$scope.goBack = function () {
|
||||
$ionicHistory.nextViewOptions({
|
||||
disableBack: true
|
||||
});
|
||||
$state.go("app.wordpressLogin", {
|
||||
isShowError: false
|
||||
});
|
||||
}// End goBack.
|
||||
|
||||
// doRefresh is for refresh feed and it will set page number to be 1 for refresh.
|
||||
$scope.doRefresh = function () {
|
||||
$scope.feedList = [];
|
||||
$scope.paging.page = 1;
|
||||
$scope.paging.shouldLoadData = false;
|
||||
$scope.getPostData(false);
|
||||
};// End doRefresh.
|
||||
|
||||
// loadMore is for loading more feed.
|
||||
$scope.loadMore = function () {
|
||||
if ($scope.isLoading == false) {
|
||||
$scope.isLoading = true;
|
||||
$scope.getPostData(true);
|
||||
}
|
||||
};// End loadMore.
|
||||
|
||||
$scope.initialForm();
|
||||
});// End of WordPress Feed Page Controller.
|
||||
|
||||
// Controller of WordPress Post Page.
|
||||
appControllers.controller('wordpressPostCtrl', function ($scope, $http, $timeout, $stateParams) {
|
||||
|
||||
// This function is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
|
||||
// $scope.post is post that pass from state parameter from WordPress Feed.
|
||||
$scope.post = $stateParams.postDetail;
|
||||
|
||||
// $scope.wordpressUrl is url that pass from state parameter from WordPress Feed.
|
||||
$scope.wordpressUrl = $stateParams.wordpressUrl;
|
||||
|
||||
// $scope.comments is the variable that store comments of post.
|
||||
$scope.comments = [];
|
||||
|
||||
//To get comment.
|
||||
$scope.getcomment();
|
||||
|
||||
// The function for show/hide loading progress.
|
||||
$timeout(function () {
|
||||
if ($scope.isAndroid) {
|
||||
jQuery('#wordpress-post-loading-progress').show();
|
||||
}
|
||||
else {
|
||||
jQuery('#wordpress-post-loading-progress').fadeIn(700);
|
||||
}
|
||||
}, 400);// End loading progress.
|
||||
}// End initialForm.
|
||||
|
||||
// get comment is for get comment by calling to wordpress API.
|
||||
$scope.getcomment = function () {
|
||||
// API format is YOUR_WORDPRESS_URL/wp-json/posts/POST_ID/comments
|
||||
$http.get($scope.wordpressUrl + "/wp-json/posts/" + $scope.post.ID + "/comments", {
|
||||
params: {}
|
||||
}).then(function (result) {
|
||||
//success retrieve data by calling http service. it will store comment data to $scope.comments.
|
||||
$scope.comments = result.data;
|
||||
$timeout(function () {
|
||||
jQuery('#wordpress-post-loading-progress').hide();
|
||||
jQuery('#wordpress-post-content').fadeIn();
|
||||
}, 1000);
|
||||
},
|
||||
function (error) {
|
||||
//Error retrieve data.
|
||||
});
|
||||
};// End get comment.
|
||||
$scope.initialForm();
|
||||
});// End of WordPress Post Page Controller.
|
||||
|
||||
// Controller of WordPress Login Page.
|
||||
appControllers.controller('wordpressLoginCtrl', function ($mdToast, $scope, $state, $stateParams) {
|
||||
|
||||
// This function is the first activity in the controller.
|
||||
// It will initial all variable data and let the function works when page load.
|
||||
$scope.initialForm = function () {
|
||||
// $scope.wpUrl is the variable that store wordPress url.
|
||||
$scope.wpUrl = "http://YOUR_WORDPRESS_URL";
|
||||
|
||||
// If wordPress url is error it will show that Can not connect to Url toast.
|
||||
if ($stateParams.isShowError) {
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 1200,
|
||||
position: 'top',
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Can not connect to Url."
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};// End initialForm.
|
||||
|
||||
// login is for url login.
|
||||
$scope.login = function (wpUrl) {
|
||||
$state.go("app.wordpressFeed", {
|
||||
wordpressUrl: wpUrl
|
||||
});
|
||||
};// End login.
|
||||
|
||||
$scope.initialForm();
|
||||
});// End of WordPress Login Page Controller.
|
||||
Reference in New Issue
Block a user