Merge pull request #3027 from troggy/refactor/qr-scanner

Add QR scanner directive

public/views/includes/topbar.html

@@ -15,8 +15,7 @@
   </section>
 
   <section class="right-small" ng-show="showCamera">
-    <a id="camera-icon" ng-show="index.isComplete" class="p10"
+    <qr-scanner ng-show="index.isComplete" on-scan="topbar.onQrCodeScanned(data)" before-scan="topbar.openSendScreen()" />
-      ng-click="topbar.openScanner()"><i class="icon-scan size-21"></i></a>
   </section>
 
   <section class="middle tab-bar-section">

src/js/controllers/topbar.js

@@ -1,133 +1,13 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('topbarController', function($rootScope, $scope, $timeout, $modal, isCordova, isMobile, go) {   
+angular.module('copayApp.controllers').controller('topbarController', function($rootScope, go) {
-  var cordovaOpenScanner = function() {
-    window.ignoreMobilePause = true;
-    window.plugins.spinnerDialog.show(null, 'Preparing camera...', true);
-    $timeout(function() {
-      cordova.plugins.barcodeScanner.scan(
-        function onSuccess(result) {
-          $timeout(function() {
-            window.plugins.spinnerDialog.hide();
-            window.ignoreMobilePause = false;
-          }, 100);
-          if (result.cancelled) return;
 
-          $timeout(function() {
+  this.onQrCodeScanned = function(data) {
-            var data = result.text;
+    $rootScope.$emit('dataScanned', data);
-            $rootScope.$emit('dataScanned', data); 
-          }, 1000);
-        },
-        function onError(error) {
-          $timeout(function() {
-            window.ignoreMobilePause = false;
-            window.plugins.spinnerDialog.hide();
-          }, 100);
-          alert('Scanning error');
-        }
-      );
-      go.send(); 
-    }, 100);
   };
 
-  var modalOpenScanner = function() { 
+  this.openSendScreen = function() {
-    var _scope = $scope;
+    go.send();
-    var ModalInstanceCtrl = function($scope, $rootScope, $modalInstance) {
-      // QR code Scanner
-      var video;
-      var canvas;
-      var $video;
-      var context;
-      var localMediaStream;
-
-      var _scan = function(evt) {
-        if (localMediaStream) {
-          context.drawImage(video, 0, 0, 300, 225);
-          try {
-            qrcode.decode();
-          } catch (e) {
-            //qrcodeError(e);
-          }
-        }
-        $timeout(_scan, 500);
-      };
-
-      var _scanStop = function() {
-        if (localMediaStream && localMediaStream.stop) localMediaStream.stop();
-        localMediaStream = null;
-        video.src = '';
-      }; 
-
-      qrcode.callback = function(data) {
-        _scanStop();
-        $modalInstance.close(data);
-      };
-
-      var _successCallback = function(stream) {
-        video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
-        localMediaStream = stream;
-        video.play();
-        $timeout(_scan, 1000);
-      };
-
-      var _videoError = function(err) {
-        $scope.cancel();
-      };
-
-      var setScanner = function() {
-        navigator.getUserMedia = navigator.getUserMedia ||
-          navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
-          navigator.msGetUserMedia;
-        window.URL = window.URL || window.webkitURL ||
-        window.mozURL || window.msURL;
-      };
-
-      $scope.init = function() {
-        setScanner();
-        $timeout(function() {
-          go.send();
-          canvas = document.getElementById('qr-canvas');
-          context = canvas.getContext('2d');
-
-          
-          video = document.getElementById('qrcode-scanner-video');
-          $video = angular.element(video);
-          canvas.width = 300;
-          canvas.height = 225;
-          context.clearRect(0, 0, 300, 225);
-
-          navigator.getUserMedia({
-            video: true
-          }, _successCallback, _videoError);
-        }, 500);
-      };
-
-      $scope.cancel = function() {
-        _scanStop();
-        $modalInstance.dismiss('cancel');
-      };
-    };
-
-    var modalInstance = $modal.open({
-      templateUrl: 'views/modals/scanner.html',
-      windowClass: 'full',
-      controller: ModalInstanceCtrl,
-      backdrop : 'static',
-      keyboard: false
-    });
-    modalInstance.result.then(function(data) {
-      $rootScope.$emit('dataScanned', data); 
-    });
-
-  };
-
-  this.openScanner = function() {
-    if (isCordova) {
-      cordovaOpenScanner();
-    }
-    else {
-      modalOpenScanner();
-    }
   };
 
   this.goHome = function() {

src/js/directives/qrScanner.js

@@ -0,0 +1,159 @@
+'use strict';
+
+angular.module('copayApp.directives')
+    .directive('qrScanner', ['$rootScope', '$timeout', '$modal', 'isCordova',
+      function($rootScope, $timeout, $modal, isCordova) {
+
+        var controller = function($scope) {
+
+          $scope.cordovaOpenScanner = function() {
+            window.ignoreMobilePause = true;
+            window.plugins.spinnerDialog.show(null, 'Preparing camera...', true);
+            $timeout(function() {
+              cordova.plugins.barcodeScanner.scan(
+                  function onSuccess(result) {
+                    $timeout(function() {
+                      window.plugins.spinnerDialog.hide();
+                      window.ignoreMobilePause = false;
+                    }, 100);
+                    if (result.cancelled) return;
+
+                    $timeout(function() {
+                      var data = result.text;
+                      $scope.onScan({ data: data });
+                    }, 1000);
+                  },
+                  function onError(error) {
+                    $timeout(function() {
+                      window.ignoreMobilePause = false;
+                      window.plugins.spinnerDialog.hide();
+                    }, 100);
+                    alert('Scanning error');
+                  }
+              );
+              if ($scope.beforeScan) {
+                $scope.beforeScan();
+              }
+            }, 100);
+          };
+
+          $scope.modalOpenScanner = function() {
+            var parentScope = $scope;
+            var ModalInstanceCtrl = function($scope, $rootScope, $modalInstance) {
+              // QR code Scanner
+              var video;
+              var canvas;
+              var $video;
+              var context;
+              var localMediaStream;
+              var prevResult;
+
+              var _scan = function(evt) {
+                if (localMediaStream) {
+                  context.drawImage(video, 0, 0, 300, 225);
+                  try {
+                    qrcode.decode();
+                  } catch (e) {
+                    //qrcodeError(e);
+                  }
+                }
+                $timeout(_scan, 800);
+              };
+
+              var _scanStop = function() {
+                if (localMediaStream && localMediaStream.stop) localMediaStream.stop();
+                localMediaStream = null;
+                video.src = '';
+              };
+
+              qrcode.callback = function(data) {
+                if (prevResult != data) {
+                  prevResult = data;
+                  return;
+                }
+                _scanStop();
+                $modalInstance.close(data);
+              };
+
+              var _successCallback = function(stream) {
+                video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
+                localMediaStream = stream;
+                video.play();
+                $timeout(_scan, 1000);
+              };
+
+              var _videoError = function(err) {
+                $scope.cancel();
+              };
+
+              var setScanner = function() {
+                navigator.getUserMedia = navigator.getUserMedia ||
+                    navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
+                    navigator.msGetUserMedia;
+                window.URL = window.URL || window.webkitURL ||
+                    window.mozURL || window.msURL;
+              };
+
+              $scope.init = function() {
+                setScanner();
+                $timeout(function() {
+                  if (parentScope.beforeScan) {
+                    parentScope.beforeScan();
+                  }
+                  canvas = document.getElementById('qr-canvas');
+                  context = canvas.getContext('2d');
+
+
+                  video = document.getElementById('qrcode-scanner-video');
+                  $video = angular.element(video);
+                  canvas.width = 300;
+                  canvas.height = 225;
+                  context.clearRect(0, 0, 300, 225);
+
+                  navigator.getUserMedia({
+                    video: true
+                  }, _successCallback, _videoError);
+                }, 500);
+              };
+
+              $scope.cancel = function() {
+                _scanStop();
+                $modalInstance.dismiss('cancel');
+              };
+            };
+
+            var modalInstance = $modal.open({
+              templateUrl: 'views/modals/scanner.html',
+              windowClass: 'full',
+              controller: ModalInstanceCtrl,
+              backdrop : 'static',
+              keyboard: false
+            });
+            modalInstance.result.then(function(data) {
+              parentScope.onScan({ data: data });
+            });
+
+          };
+
+          $scope.openScanner = function() {
+            if (isCordova) {
+              $scope.cordovaOpenScanner();
+            }
+            else {
+              $scope.modalOpenScanner();
+            }
+          };
+        };
+
+        return {
+          restrict: 'E',
+          scope: {
+            onScan: "&",
+            beforeScan: "&"
+          },
+          controller: controller,
+          replace: true,
+          template: '<a id="camera-icon" class="p10" ng-click="openScanner()"><i class="icon-scan size-21"></i></a>'
+        }
+      }
+    ]);