From 2e5b5410decbbd57a5bd0c5b81e8d39931dd655f Mon Sep 17 00:00:00 2001 From: Loic Kartono Date: Sun, 17 May 2015 17:40:31 +1100 Subject: [PATCH] Support callback function after file(s) picked. --- dist/google-picker.js | 34 ++++++++++++++++++---------------- dist/google-picker.min.js | 2 +- example/app.js | 19 ++++++++++++------- example/google-picker.min.js | 2 +- example/index.html | 2 +- src/google-picker.js | 34 ++++++++++++++++++---------------- 6 files changed, 51 insertions(+), 42 deletions(-) diff --git a/dist/google-picker.js b/dist/google-picker.js index f29b77b..239fe44 100644 --- a/dist/google-picker.js +++ b/dist/google-picker.js @@ -10,7 +10,7 @@ angular.module('lk-google-picker', []) -.provider('lkGoogleSettings', function() { +.provider('lkGoogleSettings', function () { this.apiKey = null; this.clientId = null; this.scopes = ['https://www.googleapis.com/auth/drive']; @@ -25,7 +25,7 @@ angular.module('lk-google-picker', []) * Provider factory $get method * Return Google Picker API settings */ - this.$get = ['$window', function($window) { + this.$get = ['$window', function ($window) { return { apiKey : this.apiKey, clientId : this.clientId, @@ -40,26 +40,27 @@ angular.module('lk-google-picker', []) /** * Set the API config params using a hash */ - this.configure = function(config) { + this.configure = function (config) { for (var key in config) { this[key] = config[key]; } }; }) -.directive('lkGooglePicker', ['lkGoogleSettings', function(lkGoogleSettings) { +.directive('lkGooglePicker', ['lkGoogleSettings', function (lkGoogleSettings) { return { restrict: 'A', scope: { - pickerFiles: '=' + pickerFiles: '=', + afterSelect: '&' }, - link: function(scope, element, attrs) { + link: function (scope, element, attrs) { var accessToken = null; /** * Load required modules */ - function instanciate() { + function instanciate () { gapi.load('auth', { 'callback': onApiAuthLoad }); gapi.load('picker'); } @@ -68,7 +69,7 @@ angular.module('lk-google-picker', []) * OAuth autorization * If user is already logged in, then open the Picker modal */ - function onApiAuthLoad() { + function onApiAuthLoad () { var authToken = gapi.auth.getToken(); if (authToken) { @@ -85,7 +86,7 @@ angular.module('lk-google-picker', []) /** * Google API OAuth response */ - function handleAuthResult(result) { + function handleAuthResult (result) { if (result && !result.error) { accessToken = result.access_token; openDialog(); @@ -95,7 +96,7 @@ angular.module('lk-google-picker', []) /** * Everything is good, open the files picker */ - function openDialog() { + function openDialog () { var picker = new google.picker.PickerBuilder() .setLocale(lkGoogleSettings.locale) .setDeveloperKey(lkGoogleSettings.apiKey) @@ -104,13 +105,13 @@ angular.module('lk-google-picker', []) .setOrigin(lkGoogleSettings.origin); if (lkGoogleSettings.features.length > 0) { - angular.forEach(lkGoogleSettings.features, function(feature, key) { + angular.forEach(lkGoogleSettings.features, function (feature, key) { picker.enableFeature(google.picker.Feature[feature]); }); } if (lkGoogleSettings.views.length > 0) { - angular.forEach(lkGoogleSettings.views, function(view, key) { + angular.forEach(lkGoogleSettings.views, function (view, key) { view = eval('new google.picker.' + view); picker.addView(view); }); @@ -123,12 +124,13 @@ angular.module('lk-google-picker', []) * Callback invoked when interacting with the Picker * data: Object returned by the API */ - function pickerResponse(data) { + function pickerResponse (data) { if (data.action == google.picker.Action.PICKED) { - gapi.client.load('drive', 'v2', function() { - angular.forEach(data.docs, function(file, index) { + gapi.client.load('drive', 'v2', function () { + angular.forEach(data.docs, function (file, index) { scope.pickerFiles.push(file); }); + scope.afterSelect(); scope.$apply(); }); } @@ -137,7 +139,7 @@ angular.module('lk-google-picker', []) gapi.load('auth'); gapi.load('picker'); - element.bind('click', function(e) { + element.bind('click', function (e) { instanciate(); }); } diff --git a/dist/google-picker.min.js b/dist/google-picker.min.js index ac398b7..dbdebe5 100644 --- a/dist/google-picker.min.js +++ b/dist/google-picker.min.js @@ -1 +1 @@ -angular.module("lk-google-picker",[]).provider("lkGoogleSettings",function(){this.apiKey=null,this.clientId=null,this.scopes=["https://www.googleapis.com/auth/drive"],this.features=["MULTISELECT_ENABLED"],this.views=["DocsView().setIncludeFolders(true)","DocsUploadView().setIncludeFolders(true)"],this.locale="en",this.$get=["$window",function(e){return{apiKey:this.apiKey,clientId:this.clientId,scopes:this.scopes,features:this.features,views:this.views,locale:this.locale,origin:this.origin||e.location.protocol+"//"+e.location.host}}],this.configure=function(e){for(var i in e)this[i]=e[i]}}).directive("lkGooglePicker",["lkGoogleSettings",function(lkGoogleSettings){return{restrict:"A",scope:{pickerFiles:"="},link:function(scope,element,attrs){function instanciate(){gapi.load("auth",{callback:onApiAuthLoad}),gapi.load("picker")}function onApiAuthLoad(){var e=gapi.auth.getToken();e?handleAuthResult(e):gapi.auth.authorize({client_id:lkGoogleSettings.clientId,scope:lkGoogleSettings.scopes,immediate:!1},handleAuthResult)}function handleAuthResult(e){e&&!e.error&&(accessToken=e.access_token,openDialog())}function openDialog(){var picker=(new google.picker.PickerBuilder).setLocale(lkGoogleSettings.locale).setDeveloperKey(lkGoogleSettings.apiKey).setOAuthToken(accessToken).setCallback(pickerResponse).setOrigin(lkGoogleSettings.origin);lkGoogleSettings.features.length>0&&angular.forEach(lkGoogleSettings.features,function(e){picker.enableFeature(google.picker.Feature[e])}),lkGoogleSettings.views.length>0&&angular.forEach(lkGoogleSettings.views,function(view,key){view=eval("new google.picker."+view),picker.addView(view)}),picker.build().setVisible(!0)}function pickerResponse(e){e.action==google.picker.Action.PICKED&&gapi.client.load("drive","v2",function(){angular.forEach(e.docs,function(e){scope.pickerFiles.push(e)}),scope.$apply()})}var accessToken=null;gapi.load("auth"),gapi.load("picker"),element.bind("click",function(){instanciate()})}}}]); \ No newline at end of file +angular.module("lk-google-picker",[]).provider("lkGoogleSettings",function(){this.apiKey=null,this.clientId=null,this.scopes=["https://www.googleapis.com/auth/drive"],this.features=["MULTISELECT_ENABLED"],this.views=["DocsView().setIncludeFolders(true)","DocsUploadView().setIncludeFolders(true)"],this.locale="en",this.$get=["$window",function(e){return{apiKey:this.apiKey,clientId:this.clientId,scopes:this.scopes,features:this.features,views:this.views,locale:this.locale,origin:this.origin||e.location.protocol+"//"+e.location.host}}],this.configure=function(e){for(var i in e)this[i]=e[i]}}).directive("lkGooglePicker",["lkGoogleSettings",function(lkGoogleSettings){return{restrict:"A",scope:{pickerFiles:"=",afterSelect:"&"},link:function(scope,element,attrs){function instanciate(){gapi.load("auth",{callback:onApiAuthLoad}),gapi.load("picker")}function onApiAuthLoad(){var e=gapi.auth.getToken();e?handleAuthResult(e):gapi.auth.authorize({client_id:lkGoogleSettings.clientId,scope:lkGoogleSettings.scopes,immediate:!1},handleAuthResult)}function handleAuthResult(e){e&&!e.error&&(accessToken=e.access_token,openDialog())}function openDialog(){var picker=(new google.picker.PickerBuilder).setLocale(lkGoogleSettings.locale).setDeveloperKey(lkGoogleSettings.apiKey).setOAuthToken(accessToken).setCallback(pickerResponse).setOrigin(lkGoogleSettings.origin);lkGoogleSettings.features.length>0&&angular.forEach(lkGoogleSettings.features,function(e){picker.enableFeature(google.picker.Feature[e])}),lkGoogleSettings.views.length>0&&angular.forEach(lkGoogleSettings.views,function(view,key){view=eval("new google.picker."+view),picker.addView(view)}),picker.build().setVisible(!0)}function pickerResponse(e){e.action==google.picker.Action.PICKED&&gapi.client.load("drive","v2",function(){angular.forEach(e.docs,function(e){scope.pickerFiles.push(e)}),scope.afterSelect(),scope.$apply()})}var accessToken=null;gapi.load("auth"),gapi.load("picker"),element.bind("click",function(){instanciate()})}}}]); \ No newline at end of file diff --git a/example/app.js b/example/app.js index c04fdfd..d30f754 100644 --- a/example/app.js +++ b/example/app.js @@ -1,6 +1,6 @@ angular.module('GooglePickerExample', ['lk-google-picker']) -.config(['lkGoogleSettingsProvider', function(lkGoogleSettingsProvider) { +.config(['lkGoogleSettingsProvider', function (lkGoogleSettingsProvider) { // Configure the API credentials here lkGoogleSettingsProvider.configure({ @@ -9,13 +9,13 @@ angular.module('GooglePickerExample', ['lk-google-picker']) }); }]) -.filter('getExtension', function() { - return function(url) { +.filter('getExtension', function () { + return function (url) { return url.split('.').pop(); }; }) -.controller('ExampleCtrl', ['$scope', 'lkGoogleSettings', function($scope, lkGoogleSettings) { +.controller('ExampleCtrl', ['$scope', 'lkGoogleSettings', function ($scope, lkGoogleSettings) { $scope.files = []; $scope.languages = [ { code: 'en', name: 'English' }, @@ -25,16 +25,21 @@ angular.module('GooglePickerExample', ['lk-google-picker']) ] // Check for the current language depending on lkGoogleSettings.locale - $scope.initialize = function() { - angular.forEach($scope.languages, function(language, index) { + $scope.initialize = function () { + angular.forEach($scope.languages, function (language, index) { if (lkGoogleSettings.locale === language.code) { $scope.selectedLocale = $scope.languages[index]; } }); } + // Callback triggered after files selection + $scope.afterSelectCallback = function (files) { + alert("After Select Callback\n" + (files.length) + " file(s) selected"); + } + // Define the locale to use - $scope.changeLocale = function(locale) { + $scope.changeLocale = function (locale) { lkGoogleSettings.locale = locale.code; } }]); diff --git a/example/google-picker.min.js b/example/google-picker.min.js index ac398b7..dbdebe5 100644 --- a/example/google-picker.min.js +++ b/example/google-picker.min.js @@ -1 +1 @@ -angular.module("lk-google-picker",[]).provider("lkGoogleSettings",function(){this.apiKey=null,this.clientId=null,this.scopes=["https://www.googleapis.com/auth/drive"],this.features=["MULTISELECT_ENABLED"],this.views=["DocsView().setIncludeFolders(true)","DocsUploadView().setIncludeFolders(true)"],this.locale="en",this.$get=["$window",function(e){return{apiKey:this.apiKey,clientId:this.clientId,scopes:this.scopes,features:this.features,views:this.views,locale:this.locale,origin:this.origin||e.location.protocol+"//"+e.location.host}}],this.configure=function(e){for(var i in e)this[i]=e[i]}}).directive("lkGooglePicker",["lkGoogleSettings",function(lkGoogleSettings){return{restrict:"A",scope:{pickerFiles:"="},link:function(scope,element,attrs){function instanciate(){gapi.load("auth",{callback:onApiAuthLoad}),gapi.load("picker")}function onApiAuthLoad(){var e=gapi.auth.getToken();e?handleAuthResult(e):gapi.auth.authorize({client_id:lkGoogleSettings.clientId,scope:lkGoogleSettings.scopes,immediate:!1},handleAuthResult)}function handleAuthResult(e){e&&!e.error&&(accessToken=e.access_token,openDialog())}function openDialog(){var picker=(new google.picker.PickerBuilder).setLocale(lkGoogleSettings.locale).setDeveloperKey(lkGoogleSettings.apiKey).setOAuthToken(accessToken).setCallback(pickerResponse).setOrigin(lkGoogleSettings.origin);lkGoogleSettings.features.length>0&&angular.forEach(lkGoogleSettings.features,function(e){picker.enableFeature(google.picker.Feature[e])}),lkGoogleSettings.views.length>0&&angular.forEach(lkGoogleSettings.views,function(view,key){view=eval("new google.picker."+view),picker.addView(view)}),picker.build().setVisible(!0)}function pickerResponse(e){e.action==google.picker.Action.PICKED&&gapi.client.load("drive","v2",function(){angular.forEach(e.docs,function(e){scope.pickerFiles.push(e)}),scope.$apply()})}var accessToken=null;gapi.load("auth"),gapi.load("picker"),element.bind("click",function(){instanciate()})}}}]); \ No newline at end of file +angular.module("lk-google-picker",[]).provider("lkGoogleSettings",function(){this.apiKey=null,this.clientId=null,this.scopes=["https://www.googleapis.com/auth/drive"],this.features=["MULTISELECT_ENABLED"],this.views=["DocsView().setIncludeFolders(true)","DocsUploadView().setIncludeFolders(true)"],this.locale="en",this.$get=["$window",function(e){return{apiKey:this.apiKey,clientId:this.clientId,scopes:this.scopes,features:this.features,views:this.views,locale:this.locale,origin:this.origin||e.location.protocol+"//"+e.location.host}}],this.configure=function(e){for(var i in e)this[i]=e[i]}}).directive("lkGooglePicker",["lkGoogleSettings",function(lkGoogleSettings){return{restrict:"A",scope:{pickerFiles:"=",afterSelect:"&"},link:function(scope,element,attrs){function instanciate(){gapi.load("auth",{callback:onApiAuthLoad}),gapi.load("picker")}function onApiAuthLoad(){var e=gapi.auth.getToken();e?handleAuthResult(e):gapi.auth.authorize({client_id:lkGoogleSettings.clientId,scope:lkGoogleSettings.scopes,immediate:!1},handleAuthResult)}function handleAuthResult(e){e&&!e.error&&(accessToken=e.access_token,openDialog())}function openDialog(){var picker=(new google.picker.PickerBuilder).setLocale(lkGoogleSettings.locale).setDeveloperKey(lkGoogleSettings.apiKey).setOAuthToken(accessToken).setCallback(pickerResponse).setOrigin(lkGoogleSettings.origin);lkGoogleSettings.features.length>0&&angular.forEach(lkGoogleSettings.features,function(e){picker.enableFeature(google.picker.Feature[e])}),lkGoogleSettings.views.length>0&&angular.forEach(lkGoogleSettings.views,function(view,key){view=eval("new google.picker."+view),picker.addView(view)}),picker.build().setVisible(!0)}function pickerResponse(e){e.action==google.picker.Action.PICKED&&gapi.client.load("drive","v2",function(){angular.forEach(e.docs,function(e){scope.pickerFiles.push(e)}),scope.afterSelect(),scope.$apply()})}var accessToken=null;gapi.load("auth"),gapi.load("picker"),element.bind("click",function(){instanciate()})}}}]); \ No newline at end of file diff --git a/example/index.html b/example/index.html index 7f9f578..740ecee 100644 --- a/example/index.html +++ b/example/index.html @@ -40,7 +40,7 @@

- + Pick files diff --git a/src/google-picker.js b/src/google-picker.js index f29b77b..239fe44 100644 --- a/src/google-picker.js +++ b/src/google-picker.js @@ -10,7 +10,7 @@ angular.module('lk-google-picker', []) -.provider('lkGoogleSettings', function() { +.provider('lkGoogleSettings', function () { this.apiKey = null; this.clientId = null; this.scopes = ['https://www.googleapis.com/auth/drive']; @@ -25,7 +25,7 @@ angular.module('lk-google-picker', []) * Provider factory $get method * Return Google Picker API settings */ - this.$get = ['$window', function($window) { + this.$get = ['$window', function ($window) { return { apiKey : this.apiKey, clientId : this.clientId, @@ -40,26 +40,27 @@ angular.module('lk-google-picker', []) /** * Set the API config params using a hash */ - this.configure = function(config) { + this.configure = function (config) { for (var key in config) { this[key] = config[key]; } }; }) -.directive('lkGooglePicker', ['lkGoogleSettings', function(lkGoogleSettings) { +.directive('lkGooglePicker', ['lkGoogleSettings', function (lkGoogleSettings) { return { restrict: 'A', scope: { - pickerFiles: '=' + pickerFiles: '=', + afterSelect: '&' }, - link: function(scope, element, attrs) { + link: function (scope, element, attrs) { var accessToken = null; /** * Load required modules */ - function instanciate() { + function instanciate () { gapi.load('auth', { 'callback': onApiAuthLoad }); gapi.load('picker'); } @@ -68,7 +69,7 @@ angular.module('lk-google-picker', []) * OAuth autorization * If user is already logged in, then open the Picker modal */ - function onApiAuthLoad() { + function onApiAuthLoad () { var authToken = gapi.auth.getToken(); if (authToken) { @@ -85,7 +86,7 @@ angular.module('lk-google-picker', []) /** * Google API OAuth response */ - function handleAuthResult(result) { + function handleAuthResult (result) { if (result && !result.error) { accessToken = result.access_token; openDialog(); @@ -95,7 +96,7 @@ angular.module('lk-google-picker', []) /** * Everything is good, open the files picker */ - function openDialog() { + function openDialog () { var picker = new google.picker.PickerBuilder() .setLocale(lkGoogleSettings.locale) .setDeveloperKey(lkGoogleSettings.apiKey) @@ -104,13 +105,13 @@ angular.module('lk-google-picker', []) .setOrigin(lkGoogleSettings.origin); if (lkGoogleSettings.features.length > 0) { - angular.forEach(lkGoogleSettings.features, function(feature, key) { + angular.forEach(lkGoogleSettings.features, function (feature, key) { picker.enableFeature(google.picker.Feature[feature]); }); } if (lkGoogleSettings.views.length > 0) { - angular.forEach(lkGoogleSettings.views, function(view, key) { + angular.forEach(lkGoogleSettings.views, function (view, key) { view = eval('new google.picker.' + view); picker.addView(view); }); @@ -123,12 +124,13 @@ angular.module('lk-google-picker', []) * Callback invoked when interacting with the Picker * data: Object returned by the API */ - function pickerResponse(data) { + function pickerResponse (data) { if (data.action == google.picker.Action.PICKED) { - gapi.client.load('drive', 'v2', function() { - angular.forEach(data.docs, function(file, index) { + gapi.client.load('drive', 'v2', function () { + angular.forEach(data.docs, function (file, index) { scope.pickerFiles.push(file); }); + scope.afterSelect(); scope.$apply(); }); } @@ -137,7 +139,7 @@ angular.module('lk-google-picker', []) gapi.load('auth'); gapi.load('picker'); - element.bind('click', function(e) { + element.bind('click', function (e) { instanciate(); }); }