From 23b4343483104b21ce501f481e0001827f7f994b Mon Sep 17 00:00:00 2001 From: Vladimir Kotikov Date: Thu, 17 Dec 2015 17:19:18 +0300 Subject: [PATCH] Improve native look and feel for windows platform * Add support for hardware "Back" button * Add native-like AppBar with cancel button --- plugin.xml | 2 + src/windows/BarcodeScannerProxy.js | 54 +++++++++++---- src/windows/assets/plugin-barcodeScanner.css | 73 ++++++++++++++++++++ 3 files changed, 115 insertions(+), 14 deletions(-) create mode 100644 src/windows/assets/plugin-barcodeScanner.css diff --git a/plugin.xml b/plugin.xml index f9035ed4..1d2c4ecf 100644 --- a/plugin.xml +++ b/plugin.xml @@ -300,6 +300,7 @@ + @@ -312,6 +313,7 @@ + diff --git a/src/windows/BarcodeScannerProxy.js b/src/windows/BarcodeScannerProxy.js index 6021fa2b..73fd6388 100644 --- a/src/windows/BarcodeScannerProxy.js +++ b/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); } /** diff --git a/src/windows/assets/plugin-barcodeScanner.css b/src/windows/assets/plugin-barcodeScanner.css new file mode 100644 index 00000000..0e0a5f14 --- /dev/null +++ b/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"; +}