Merge pull request #131 from MSOpenTech/backbutton-fix

Improve native look and feel for windows platform

plugin.xml

@@ -300,6 +300,7 @@
         </config-file>
 
         <framework src="src/windows/lib/WinRTBarcodeReader.csproj" custom="true" type="projectReference"/>
+        <asset src="src/windows/assets/plugin-barcodeScanner.css" target="css/plugin-barcodeScanner.css" />
     </platform>
 
     <platform name="windows">
@@ -312,6 +313,7 @@
         </config-file>
 
         <framework src="src/windows/lib/WinRTBarcodeReader.csproj" custom="true" type="projectReference"/>
+        <asset src="src/windows/assets/plugin-barcodeScanner.css" target="css/plugin-barcodeScanner.css" />
     </platform>
 
     <!-- Windows Phone 8 -->

src/windows/BarcodeScannerProxy.js

@@ -8,6 +8,8 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
 
+var urlutil = require('cordova/urlutil');
+
 module.exports = {
 
     /**
@@ -21,6 +23,8 @@ module.exports = {
         var capturePreview,
             capturePreviewAlignmentMark,
             captureCancelButton,
+            navigationButtonsDiv,
+            closeButton,
             capture,
             reader;
 
@@ -30,20 +34,42 @@ module.exports = {
         function createPreview() {
 
             // Create fullscreen preview
+            var capturePreviewFrameStyle = document.createElement('link');
+            capturePreviewFrameStyle.rel = "stylesheet";
+            capturePreviewFrameStyle.type = "text/css";
+            capturePreviewFrameStyle.href = urlutil.makeAbsolute("/www/css/plugin-barcodeScanner.css");
+
+            document.head.appendChild(capturePreviewFrameStyle);
+
+            capturePreviewFrame = document.createElement('div');
+            capturePreviewFrame.className = "barcode-scanner-wrap";
+
             capturePreview = document.createElement("video");
-            capturePreview.style.cssText = "position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: black";
+            capturePreview.className = "barcode-scanner-preview";
             capturePreview.addEventListener('click', function () {
                 focus();
             });
 
             capturePreviewAlignmentMark = document.createElement('div');
-            capturePreviewAlignmentMark.style.cssText = "position: absolute; left: 0; top: 50%; width: 100%; height: 3px; background: red";
+            capturePreviewAlignmentMark.className = "barcode-scanner-mark";
+
+            navigationButtonsDiv = document.createElement("div");
+            navigationButtonsDiv.className = "barcode-scanner-app-bar";
+            navigationButtonsDiv.onclick = function (e) {
+                e.cancelBubble = true;
+            };
+
+            closeButton = document.createElement("div");
+            closeButton.innerText = "close";
+            closeButton.className = "app-bar-action action-close";
+            navigationButtonsDiv.appendChild(closeButton);
 
-            // Create cancel button
-            captureCancelButton = document.createElement("button");
-            captureCancelButton.innerText = "Cancel";
-            captureCancelButton.style.cssText = "position: absolute; right: 0; bottom: 0; display: block; margin: 20px";
-            captureCancelButton.addEventListener('click', cancelPreview, false);
+            closeButton.addEventListener("click", cancelPreview, false);
+            document.addEventListener('backbutton', cancelPreview, false);
+
+            [capturePreview, capturePreviewAlignmentMark, navigationButtonsDiv].forEach(function (element) {
+                capturePreviewFrame.appendChild(element);
+            });
 
             capture = new Windows.Media.Capture.MediaCapture();
         }
@@ -140,9 +166,7 @@ module.exports = {
                     capturePreview.play();
 
                     // Insert preview frame and controls into page
-                    document.body.appendChild(capturePreview);
-                    document.body.appendChild(capturePreviewAlignmentMark);
-                    document.body.appendChild(captureCancelButton);
+                    document.body.appendChild(capturePreviewFrame);
 
                     setupFocus(controller.focusControl)
                     .then(function () {
@@ -177,15 +201,17 @@ module.exports = {
             capturePreview.pause();
             capturePreview.src = null;
 
-            [capturePreview, capturePreviewAlignmentMark, captureCancelButton].forEach(function (elem) {
-                elem && document.body.removeChild(elem);
-            });
-            
+            if (capturePreviewFrame) {
+                document.body.removeChild(capturePreviewFrame);
+            }
+
             reader && reader.stop();
             reader = null;
 
             capture && capture.stopRecordAsync();
             capture = null;
+
+            document.removeEventListener('backbutton', cancelPreview);
         }
 
         /**

src/windows/assets/plugin-barcodeScanner.css

@@ -0,0 +1,73 @@
+.barcode-scanner-wrap {
+    margin: 0;
+    padding: 0;
+    outline: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+    background: 0 0 black;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9999999;
+}
+
+.barcode-scanner-preview {
+    width: 100%;
+    height: calc(100% - 70px);
+}
+
+.barcode-scanner-mark {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height: 3px;
+    background: red
+}
+
+.barcode-scanner-app-bar {
+    height: 70px;
+    width: 100%;
+    padding-top: 10px;
+    z-index: 9999999;
+    text-align: center;
+    user-select: none;
+}
+
+.app-bar-action {
+    width: 40px;
+    height: 40px;
+    margin: 0 auto;
+    font-family: "Segoe UI Symbol";
+    color: white;
+    font-size: 12px;
+    text-transform: lowercase;
+    text-align: center;
+    cursor: default;
+}
+
+@media all and (orientation: landscape) {
+    .app-bar-action {
+        float: right;
+        margin-right: 20px;
+    }
+}
+
+.app-bar-action::before {
+    font-size: 28px;
+    display: block;
+    height: 36px;
+}
+
+.action-close::before {
+    content: "\E0C7";
+    /* close icon is larger so we re-size it to fit other icons */
+    font-size: 20px;
+    line-height: 40px;
+}
+
+.action-close:hover::before {
+    content: "\E0CA";
+}