avatar.client.directive.js

'use strict';

/**
 * Usage:
 * For create and edit:
 * <mega-avatar has-photo="photo" show-controls="true"></mega-avatar>
 * For display only:
 * <mega-avatar has-photo="photo" show-controls="false"></mega-avatar>
 *
 * @attribute [hasPhoto]: hasPhoto is an attribute that contains the path of the photo which is used in this directive to show the photo or update it to a new one.
 */
angular.module('afiliados').directive('megaAvatar', function() {
    return {
      restrict: 'E',
      scope: {
        hasPhoto: '=?',
        showControls: '='
      },
      transclude: true,
      templateUrl: 'modules/afiliados/directives/avatar/avatar.client.directive.html',
      link: function($scope ,element, attr) {

        // control that provide the default avatar for create section
        if ($scope.hasPhoto === '') {
          $scope.hasPhoto = 'modules/afiliados/img/avatars/default_avatar.png';
        }
        $scope.startCamera = function() {
          $scope.showCamera = !$scope.showCamera;
          if ($scope.showWebcamControls) {
            $scope.showWebcamControls = false;
          }
        };


        //FOTO
        var _video = null,
          patData = null;
        //VIDEO
        $scope.showCamera = false;
        $scope.patOpts = {x: 0, y: 0, w: 25, h: 25};
        $scope.webcamError = false;
        $scope.onError = function (err) {
          $scope.$apply(
            function() {
              $scope.webcamError = err;
            }
          );
        };

        $scope.onSuccess = function () {
          // The video element contains the captured camera data
          _video = $scope.channel.video;
          $scope.$apply(function() {
            $scope.patOpts.w = _video.width;
            $scope.patOpts.h = _video.height;
            $scope.showDemos = true;
          });
        };
        $scope.showWebcamControls = false;
        $scope.onStream = function (stream) {
          // You could do something manually with the stream.
          $scope.showWebcamControls = true;
        };

        $scope.channel = {};
        $scope.photoExists = false;

        $scope.makeSnapshot = function makeSnapshot() {
          if (_video) {
            var patCanvas = document.querySelector('#snapshot');
            if (!patCanvas) return;

            patCanvas.width = _video.width;
            patCanvas.height = _video.height;
            var ctxPat = patCanvas.getContext('2d');

            var idata = getVideoData($scope.patOpts.x, $scope.patOpts.y, $scope.patOpts.w, $scope.patOpts.h);
            ctxPat.putImageData(idata, 0, 0);

            sendSnapshotToServer(patCanvas.toDataURL());
            $scope.photoExists = true;

            patData = idata;
          }
        };

        var sendSnapshotToServer = function sendSnapshotToServer(imgBase64) {
          if (typeof $scope.hasPhoto !== 'undefined') {
            $scope.hasPhoto = imgBase64;
          }
        };

        var getVideoData = function getVideoData(x, y, w, h) {
          var hiddenCanvas = document.createElement('canvas');
          hiddenCanvas.width = _video.width;
          hiddenCanvas.height = _video.height;
          var ctx = hiddenCanvas.getContext('2d');
          ctx.drawImage(_video, 0, 0, _video.width, _video.height);
          return ctx.getImageData(x, y, w, h);
        };

        $scope.removeAvatar = function removeAvatar() {
          $scope.hasPhoto = 'modules/afiliados/img/avatars/default_avatar.png';
          $scope.photoExists = false;
        };

      }
    };
  }
);