mdg:camera | Localization functionality added.

meteor · Nov 19, 2016 · b76f76e · b76f76e
1 parent 3af4aaa
commit b76f76e
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 25 deletions.
diff --git a/packages/mdg:camera/README.md b/packages/mdg:camera/README.md
@@ -24,3 +24,25 @@ Prompt the user to take a photo with their device and get the picture as a Data
 
 > Warning: In the iOS simulator, the device camera is not accessible so you will get an error that says "source type 1 not available."
 > I'm working on a fallback for iOS that will use the photo library when the camera is not available, but for now just test in your web browser, a physical device, or the Android simulator.
+
+### Localize
+
+Replace these fields before executing `MeteorCamera.getPicture()` like:
+
+```javascript
+MeteorCamera.locale.errorBrowserNotSupported = "Sorry, this browser is currently not supported for camera functionality.";
+MeteorCamera.locale.errorAccesingCamera = "There was an error accessing the camera.";
+MeteorCamera.locale.usePhoto = "Use Photo";
+MeteorCamera.locale.takeNewPhoto = "Take New Photo";
+MeteorCamera.locale.waitingPermissions = "Waiting for camera permissions...";
+MeteorCamera.locale.takePhoto = "Take Photo";
+MeteorCamera.locale.cancel = "Cancel";
+MeteorCamera.locale.closePopup = "Close Popup";
+MeteorCamera.locale.permissionsDenied = "Camera Permissions Denied";
+MeteorCamera.locale.permissionsDeniedExp = "You have denied this app permission to use your camera. If you would like to allow permissions, follow the directions for your browser below.";
+MeteorCamera.locale.howToChrome = 'Go to Settings > "Show advanced settings..." > "Content settings..." > Media heading > "Manage exceptions...", then find this website in the list and allow video capture.';
+MeteorCamera.locale.howToFirefox = "Reload the page and try again.";
+MeteorCamera.locale.howToOpera = 'Go to Preferences > Websites > Media heading > "Manage exceptions...", then find this website in the list and allow video capture.';
+```
+
+with corresponding translations in your language.
diff --git a/packages/mdg:camera/photo-browser.js b/packages/mdg:camera/photo-browser.js
@@ -10,6 +10,22 @@ var canvasHeight = 0;
 
 var quality = 80;
 
+MeteorCamera.locale = {
+    errorBrowserNotSupported: "Sorry, this browser is currently not supported for camera functionality.",
+    errorAccesingCamera: "There was an error accessing the camera.",
+    usePhoto: "Use Photo",
+    takeNewPhoto: "Take New Photo",
+    waitingPermissions: "Waiting for camera permissions...",
+    takePhoto: "Take Photo",
+    cancel: "Cancel",
+    closePopup: "Close Popup",
+    permissionsDenied: "Camera Permissions Denied",
+    permissionsDeniedExp: "You have denied this app permission to use your camera. If you would like to allow permissions, follow the directions for your browser below.",
+    howToChrome: 'Go to Settings > "Show advanced settings..." > "Content settings..." > Media heading > "Manage exceptions...", then find this website in the list and allow video capture.',
+    howToFirefox: "Reload the page and try again.",
+    howToOpera: 'Go to Preferences > Websites > Media heading > "Manage exceptions...", then find this website in the list and allow video capture.'
+}
+
 Template.viewfinder.rendered = function() {
   var template = this;
 
@@ -113,6 +129,9 @@ Template.camera.helpers({
   error: function () {
     return error.get();
   },
+  translate: function (string) {
+    return MeteorCamera.locale[string];
+  },
   permissionDeniedError: permissionDeniedError,
   browserNotSupportedError: browserNotSupportedError
 });
@@ -134,7 +153,7 @@ Template.camera.events({
     } else {
       closeAndCallback(new Meteor.Error("cancel", "Photo taking was cancelled."));
     }
-    
+
     if (stream) {
       stopStream(stream);
     }
@@ -158,6 +177,21 @@ Template.viewfinder.events({
 Template.viewfinder.helpers({
   "waitingForPermission": function () {
     return waitingForPermission.get();
+  },
+  translate: function (string) {
+    return MeteorCamera.locale[string];
+  }
+});
+
+Template.genericError.helpers({
+  translate: function (string) {
+    return MeteorCamera.locale[string];
+  }
+});
+
+Template.permissionDenied.helpers({
+  translate: function (string) {
+    return MeteorCamera.locale[string];
   }
 });
 
@@ -198,14 +232,14 @@ MeteorCamera.getPicture = function (options, callback) {
   canvasHeight = Math.round(canvasHeight);
 
   var view;
-  
+
   closeAndCallback = function () {
     var originalArgs = arguments;
     UI.remove(view);
     photo.set(null);
     callback.apply(null, originalArgs);
   };
-  
+
   view = UI.renderWithData(Template.camera);
   UI.insert(view, document.body);
 };
diff --git a/packages/mdg:camera/photo.html b/packages/mdg:camera/photo.html
@@ -9,18 +9,18 @@
         {{> permissionDenied}}
       {{else}}
         {{#if browserNotSupportedError}}
-          {{> genericError message="Sorry, this browser is currently not supported for camera functionality."}}
+          {{> genericError message="errorBrowserNotSupported"}}
         {{else}}
-          {{> genericError message="There was an error accessing the camera."}}
+          {{> genericError message="errorAccesingCamera"}}
         {{/if}}
       {{/if}}
     {{else}}
       {{#if photo}}
         <div class="center">
           <img src="{{photo}}" class="photo-preview" />
           <div>
-            <button class="button use-photo">Use Photo</button>
-            <button class="button new-photo">Take New Photo</button>
+            <button class="button use-photo">{{translate "usePhoto"}}</button>
+            <button class="button new-photo">{{translate "takeNewPhoto"}}</button>
           </div>
         </div>
       {{else}}
@@ -34,14 +34,14 @@
   <div class="viewfinder">
     <video id="video" class="{{#if waitingForPermission}}hidden{{/if}}">
       </video>
-    
+
     <div>
       {{#if waitingForPermission}}
-        <p>Waiting for camera permissions...</p>
+        <p>{{translate "waitingPermissions"}}</p>
       {{else}}
-        <button class="button shutter">Take Photo</button>
+        <button class="button shutter">{{translate "takePhoto"}}</button>
       {{/if}}
-      <button class="button cancel">Cancel</button>
+      <button class="button cancel">{{translate "cancel"}}</button>
     </div>
   </div>
 
@@ -50,34 +50,28 @@
 
 <template name="genericError">
   <div class="generic-error">
-    <p>{{message}}</p>
-    <button class="button cancel">Close Popup</button>
+    <p>{{translate message}}</p>
+    <button class="button cancel">{{translate "closePopup"}}</button>
   </div>
 </template>
 
 <template name="permissionDenied">
   <div class="permission-denied-error">
-    <h2>Camera Permissions Denied</h2>
+    <h2>{{translate "permissionsDenied"}}</h2>
 
     <p>
-      You have denied this app permission to use your camera.
-      If you would like to allow permissions, follow the directions for your
-      browser below.
+      {{translate "permissionsDeniedExp"}}
     </p>
 
     <dl class="permissions-howto">
       <dt>Google Chrome</dt>
-        <dd>Go to Settings > "Show advanced settings..." >
-          "Content settings..." > Media heading > "Manage exceptions...",
-          then find this website in the list and allow video capture.</dd>
+        <dd>{{translate "howToChrome"}}</dd>
       <dt>Mozilla Firefox</dt>
-        <dd>Reload the page and try again.</dd>
+        <dd>{{translate "howToFirefox"}}</dd>
       <dt>Opera</dt>
-        <dd>Go to Preferences > Websites > Media heading >
-          "Manage exceptions...", then find this website in the list and
-          allow video capture.</dd>
+        <dd>{{translate "howToOpera"}}</dd>
     </dl>
 
-    <button class="button cancel">Close Popup</button>
+    <button class="button cancel">{{translate "closePopup"}}</button>
   </div>
 </template>