Adds picture taking to moments

TODO: Testing that images are saved into S3

Add Camera service

Adds cleanup method and newImage directive

  TODO: newImage's directive template

Add newImage directive template

Adds new camera and directive js files into index.html

Adds newImage directive tag into newItem template

Adds newImage directives and templates and formatting

Creates media.camera.service

- Uses the ngCordova to inject $cordovaCamera

- Adds the camera service into the core modules

Adding all cordova hooks into the .gitignore

Fixes Camera Feature

Uncommets $httpProvider.withCredentials config

Restores signup as inital page

.gitignore

@@ -8,11 +8,7 @@ pids
 *.seed
 
 #ionic related
-client/hooks/after_platform_add/
-client/hooks/after_plugin_add/
-client/hooks/after_plugin_rm/
-client/hooks/after_prepare/020_remove_sass_from_platforms.js
-client/hooks/before_platform_add/
+client/hooks/
 
 # Compiled Dirs (http://nodejs.org/api/addons.html)
 client/platforms/

bower.json

@@ -4,5 +4,8 @@
   "devDependencies": {
     "ionic": "driftyco/ionic-bower#1.0.0-beta.14",
     "angular-mocks": "~1.3.13"
+  },
+  "dependencies": {
+    "ngCordova": "~0.1.12-alpha"
   }
 }

client/www/app/core/core.module.js

@@ -1,5 +1,5 @@
 (function() {
   'use strict';
 
-  angular.module('app.core', []);
+  angular.module('app.core', ['app.media', 'ngCordova']);
 })();

client/www/app/core/media/media.camera.service.js

@@ -0,0 +1,45 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('app.media')
+    .factory('Camera', Camera);
+
+  /* @ngInject */
+  function Camera($q, $cordovaCamera) {
+
+    var service = {
+      takePhoto: takePhoto      
+    };
+
+    return service;
+
+    function takePhoto() {
+      var q = $q.defer();
+
+      // DOCs about Options
+      // https://github.com/apache/cordova-plugin-camera/blob/master/doc/index.md#cameraoptions   
+      var cameraOptions = {
+        destinationType : 0,
+        sourceType : 1,
+        encodingType: 0,
+        allowEdit : true,
+        quality: 100,
+        targetWidth: 640,
+        targetHeight: 640,
+        correctOrientation: true,
+        saveToPhotoAlbum: false
+      };
+
+      $cordovaCamera.getPicture(cameraOptions)
+      .then(function(result) {
+        q.resolve(result);
+      }, function(err) {
+        q.reject(err);
+      });
+
+      return q.promise;
+    }
+  }
+
+})();

client/www/app/core/media/media.module.js

@@ -0,0 +1,6 @@
+(function() {
+
+  'use strict';
+  angular.module('app.media', []);
+
+})();

client/www/app/moment/items/newImage.directive.html

@@ -0,0 +1,16 @@
+<div ng-show="imageHasBeenTaken" class="card list new-image-container">
+
+  <div class="item item-image-wrap header-area">
+    <h2>Are you happy with your picture?</h2>
+  </div>
+
+  <div class="item item-image-wrap" style="display: block">
+      <img ng-src="data:image/jpeg;base64,{{image}}"/>
+  </div>
+
+  <div class="item action" style="display: block">
+    <button class="save button button-clear button-balanced ion-checkmark-round" on-tap="saveImage(image)"></button>
+    <button class="cancel button button-clear ion-close-round button-assertive" on-tap="cancel()"></button>
+  </div>
+
+</div>

client/www/app/moment/items/newImage.directive.js

@@ -0,0 +1,55 @@
+(function() {
+
+  angular
+      .module('app.moment.items')
+      .directive('newImage', newImage);
+
+      /* @ngInject */      
+      function newImage(Camera) {
+
+        return {
+          restrict: 'EA',
+          replace: true,
+          templateUrl: 'app/moment/items/newImage.directive.html',          
+          link: link         
+        };
+
+        function link (scope, element, attrs) {
+          var vm = scope;
+
+          vm.saveImage         = saveImage;
+          vm.cancel            = cancel;
+
+          vm.imageHasBeenTaken = false;
+          vm.image             = null;
+
+          activate();
+
+          //////////////////////////////////////////
+
+          function activate() {
+            Camera.takePhoto()
+            .then(function(image) {
+              vm.image = image;
+              vm.imageHasBeenTaken = true;              
+            })
+            .catch(function(err) {
+              console.error(err);
+            });
+          }
+
+          function saveImage(image) {
+            vm.insertIntoMoment('image/jpeg', image);
+            vm.imageHasBeenTaken = false;
+            vm.done();
+          }
+
+          function cancel() {
+            vm.imageHasBeenTaken = false;
+            vm.image = null;            
+            vm.done();
+          }
+
+        }
+      }      
+})();

client/www/app/moment/items/newItem.directive.html

@@ -1,11 +1,12 @@
 <div class="new-items">
   <div class="new-item-placeholder">
-    <new-text ng-if="typeSelected === 'text'"></new-text>
+    <new-text  ng-if="typeSelected === 'text'" ></new-text>
+    <new-image ng-if="typeSelected === 'image'"></new-image>
   <div>
 
   <div class="row">
     <button on-tap="selectType('text')" class="col-25 new-text-button button button-outline ion-compose button-calm"></button>
-    <button class="col-25 new-image-button button button-outline ion-image button-calm"></button>
+    <button on-tap="selectType('image')"class="col-25 new-image-button button button-outline ion-image button-calm"></button>
     <button class="col-25 new-video-button button button-outline ion-videocamera button-calm"></button>
     <button class="col-25 new-audio-button button button-outline ion-mic-a button-calm"></button>
   </div>

client/www/app/moment/items/newItem.directive.js

@@ -20,7 +20,7 @@
         return directive;
 
         function link(scope, element, attrs) {
-          scope.typeSelected           = null;          ;
+          scope.typeSelected           = null;
           scope.insertIntoMoment       = insertIntoMoment;          
           scope.selectType             = selectType;
           scope.done                   = done;

client/www/app/moment/items/showImage.directive.html

@@ -0,0 +1,5 @@
+<div class="card image-item-container">
+  <div class="item item-image-wrap">
+    <img ng-src="data:image/jpeg;base64,{{ item.payload }}"/>
+  </div>
+</div>

client/www/app/moment/items/showImage.directive.js

@@ -0,0 +1,19 @@
+(function() {
+
+  angular
+    .module('app.moment.items')
+    .directive('showImage', showImage);
+
+    /* @ngInject */      
+    function showImage() {
+
+      var directive = {
+        restrict: 'EA',          
+        templateUrl: 'app/moment/items/showImage.directive.html',          
+        replace: true
+      };
+
+      return directive;        
+    }
+
+})();

client/www/app/moment/moment.create.html

@@ -13,7 +13,7 @@
     <div class="items">
       <div ng-repeat="item in vm.currentMoment.content">
         <show-text  ng-if="item.type === 'text/plain' "></show-text>
-        <show-image ng-if="item.type === 'image'"></show-image>
+        <show-image ng-if="item.type === 'image/jpeg'"></show-image>
         <show-audio ng-if="item.type === 'audio'"></show-audio>
         <show-video ng-if="item.type === 'video'"></show-video>        
       </div>

client/www/content/css/app.css

@@ -6,6 +6,14 @@
 .new-items .buttons button {
   display: inline-block;
 }
+
+.item-image-wrap img {
+  display: block;
+  height: auto;
+  width: auto;
+  max-width: 85vw;
+  margin: 0 auto;
+}
 .moment-title input[type='text'] {
   text-align: center;
 }

client/www/content/sass/items.scss

@@ -1,10 +1,20 @@
 .new-items {
-	.buttons {
-		display: block;
-		margin: 0 auto;
-
-		button {
-			display: inline-block;
-		}
-	}
-}
+  .buttons {
+    display: block;
+    margin: 0 auto;
+
+    button {
+      display: inline-block;
+    }
+  }
+}
+
+.item-image-wrap {
+  img {
+    display: block;
+    height: auto;
+    width: auto;
+    max-width: 85vw;
+    margin: 0 auto;
+  }
+}

client/www/index.html

@@ -16,6 +16,7 @@
     <script src="lib/ionic/js/ionic.bundle.js"></script>
 
     <!-- cordova script (this will be a 404 during development) -->
+    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
     <script src="cordova.js"></script>
 
     <!-- your app's js -->
@@ -26,13 +27,17 @@
     <script src="app/core/dataservice.js"></script>
     <script src="app/core/upload.js"></script>
     <script src="app/core/CurrentMoment.js"></script>
+    <script src="app/core/media/media.module.js"></script>
+    <script src="app/core/media/media.camera.service.js"></script>
     <script src="app/moment/moment.module.js"></script>
     <script src="app/moment/moment.render.controller.js"></script>
     <script src="app/moment/moment.create.controller.js"></script>
     <script src="app/moment/items/moment.items.module.js"></script>
     <script src="app/moment/items/showText.directive.js"></script>
+    <script src="app/moment/items/showImage.directive.js"></script>
     <script src="app/moment/items/newItem.directive.js"></script>
     <script src="app/moment/items/newText.directive.js"></script>
+    <script src="app/moment/items/newImage.directive.js"></script>
     <script src="app/mementos-list/mementos.module.js"></script>
     <script src="app/mementos-list/mementos.js"></script>
     <script src="app/memento/memento.module.js"></script>