share projects in project page

Author: femave

bower.json

@@ -19,11 +19,12 @@
     "angular": "^1.6.6",
     "angular-route": "^1.6.6",
     "font-awesome": "^4.7.0",
-    "sweetalert":"1.1.3",
+    "sweetalert": "1.1.3",
     "ngSweetAlert": "latest",
     "ng-tags-input": "3.2.0",
     "angular-jwt": "^0.1.9",
     "ng-file-upload": "^12.2.13",
-    "AngularJS-Toaster": "angularjs-toaster#^2.2.0"
+    "AngularJS-Toaster": "angularjs-toaster#^2.2.0",
+    "angular-socialshare": "angularjs-socialshare#^2.3.11"
   }
 }

public/app/app.js

@@ -1,4 +1,4 @@
-angular.module('mainApp', ['ngRoute', 'oitozero.ngSweetAlert', 'ngTagsInput', 'angular-jwt', 'ngFileUpload', 'toaster', 'ngAnimate'])
+angular.module('mainApp', ['ngRoute', 'oitozero.ngSweetAlert', '720kb.socialshare', 'ngTagsInput', 'angular-jwt', 'ngFileUpload', 'toaster', 'ngAnimate'])
 
 .config(function ($httpProvider) {
 	$httpProvider.interceptors.push('authInterceptor')

public/app/index.html

@@ -58,6 +58,9 @@
   <script src="https://code.angularjs.org/1.6.5/angular-animate.min.js" ></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/toaster.min.js"></script>
 
+  <!-- share -->
+  <script src="../bower_components/angular-socialshare/dist/angular-socialshare.min.js"></script>
+
   <!-- app js -->
   <script src="app.js"></script>
 

public/app/routes/projectPage/controller.js

@@ -1,13 +1,13 @@
 angular.module('mainApp')
-.controller('projectPageController', function($scope, $routeParams, $location, dataService, $rootScope, toaster, SweetAlert) {
+.controller('projectPageController', function($scope, Socialshare, $routeParams, $location, dataService, $rootScope, toaster, SweetAlert) {
 
   const id = $routeParams.id
 
   dataService.getProjectPage(id)
   .then(data => {
-      $scope.project = data.data.data
-      $scope.creator = data.data.creator
-      })
+    $scope.project = data.data.data
+    $scope.creator = data.data.creator
+  })
 
   $scope.enableEditor = function(toggle) {
     if($scope.options === true){
@@ -121,42 +121,77 @@ $scope.followProject = function(){
       SweetAlert.swal({
         title: 'Project already following',
         type: 'info',
-        })
-      }
-    })
+      })
     }
+  })
+}
 
-    $scope.clickMeToShowMessageEdit = function(options) {
-      $scope.options = options
-      if($scope.options === true){
-        SweetAlert.swal({
-          title: 'Edit mode ON',
-          text: "You can edit content!",
-          type: 'info',
-        })
-      }
-    }
+$scope.clickMeToShowMessageEdit = function(options) {
+  $scope.options = options
+  if($scope.options === true){
+    SweetAlert.swal({
+      title: 'Edit mode ON',
+      text: "You can edit content!",
+      type: 'info',
+    })
+  }
+}
 
-    $scope.joinProject = function (){
-      const user = $rootScope.loggedUser
-      const {creatorName, creatorMail} = $scope.project
-      toaster.info('Sending mail to project admin')
-      dataService.joinProject(user, creatorMail, creatorName)
-      .then(mail => {
-        toaster.success("Mail sended succes, admin project will response you as soon as posible!");
-      }) 
+$scope.joinProject = function (){
+  const user = $rootScope.loggedUser
+  const {creatorName, creatorMail} = $scope.project
+  toaster.info('Sending mail to project admin')
+  dataService.joinProject(user, creatorMail, creatorName)
+  .then(mail => {
+    toaster.success("Mail sended succes, admin project will response you as soon as posible!");
+  }) 
 
+}
+
+$('.myAffix').affix({
+  offset: {
+    top: 475,
+    bottom: function () {
+      return (this.bottom = $('.footer').outerHeight(true))
     }
+  }
+})
+
+$scope.shareFacebook = function(){
+  const actualUrl = $location.$$absUrl
+  Socialshare.share({
+    'provider': 'facebook',
+    'attrs': {
+      'socialshareQuote': 'One of the amazin proejcts of web-developers!',
+      'socialshareUrl': actualUrl
+    }
+  });
+}
 
-    $('.myAffix').affix({
-      offset: {
-        top: 475,
-        bottom: function () {
-          return (this.bottom = $('.footer').outerHeight(true))
-        }
+$scope.shareTwitter = function(){
+  const actualUrl = $location.$$absUrl
+  Socialshare.share({
+    'provider': 'twitter',
+      'attrs': {
+        'socialshareText': 'One of the amazin proejcts of web-developers!',
+        'socialshareUrl': actualUrl,
+        'socialshareHashtags': 'webdeveloper, angular, project'
       }
-    })
+  });
+}
+
+$scope.shareGoogle = function(){
+  const actualUrl = $location.$$absUrl
+  Socialshare.share({
+    'provider': 'google',
+      'attrs': {
+        'socialshareText': 'One of the amazin proejcts of web-developers!',
+        'socialshareUrl': actualUrl,
+        'socialshareHashtags': 'webdeveloper, angular, project'
+      }
+  });
+}
 
 
 
-  })
+})

public/app/routes/projectPage/template.html

@@ -76,9 +76,9 @@ <h3>Developers needed:</h3>
 			<button class="btn btn-primary center-block" ng-click='followProject()'>Follow this project</button>
 			<nav class="navbar">
 				<ul class="nav navbar-nav">
-					<li><a href="#"><i class="fa fa-facebook"></i></a></li>
-					<li><a href="#"><i class="fa fa-twitter"></i></a></li>
-					<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
+					<li><a ng-click="shareFacebook()"><i class="fa fa-facebook"></i></a></li>
+					<li><a ng-click="shareTwitter()"><i class="fa fa-twitter"></i></a></li>
+					<li><a ng-click="shareGoogle()"><i class="fa fa-google-plus"></i></a></li>
 				</ul>
 			</nav>
 		</div>