Move B2G viewer to the examples folder

examples/mobile-viewer/viewer.css

@@ -0,0 +1,241 @@
+/* Copyright 2012 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * 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.
+ */
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  font-size: 10px;
+}
+
+body {
+  background: url(images/document_bg.png);
+  color: #fff;
+  font-family: sans-serif;
+  font-size: 10px;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  padding-bottom: 5rem;
+}
+
+section {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-size: 2rem;
+}
+
+footer {
+  background-image: url(images/toolbar_background.png);
+  height: 4rem;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  box-shadow: 0 -0.2rem 0.5rem rgba(50, 50, 50, 0.75);
+}
+
+
+.toolbarButton {
+  display: block;
+  padding: 0;
+  margin: 0;
+  border-width: 0;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-color: transparent;
+}
+
+.toolbarButton.pageUp {
+  position: absolute;
+  width: 18%;
+  height: 100%;
+  left: 0;
+  background-image: url(images/icon_previous_page.png);
+  background-size: 2rem;
+}
+
+.toolbarButton.pageDown {
+  position: absolute;
+  width: 18%;
+  height: 100%;
+  left: 18%;
+  background-image: url(images/icon_next_page.png);
+  background-size: 2rem;
+}
+
+#pageNumber {
+  -moz-appearance: textfield; /* hides the spinner in moz */
+  position: absolute;
+  width: 28%;
+  height: 100%;
+  left: 36%;
+  text-align: center;
+  border: 0;
+  background-color: transparent;
+  font-size: 1.2rem;
+  color: #FFF;
+  background-image: url(images/div_line_left.png), url(images/div_line_right.png);
+  background-repeat: no-repeat;
+  background-position: left, right;
+  background-size: 0.2rem, 0.2rem;
+}
+
+.toolbarButton.zoomOut {
+  position: absolute;
+  width: 18%;
+  height: 100%;
+  left: 64%;
+  background-image: url(images/icon_zoom_out.png);
+  background-size: 2.4rem;
+}
+
+.toolbarButton.zoomIn {
+  position: absolute;
+  width: 18%;
+  height: 100%;
+  left: 82%;
+  background-image: url(images/icon_zoom_in.png);
+  background-size: 2.4rem;
+}
+
+.toolbarButton[disabled] {
+  opacity: .3;
+}
+
+.hidden {
+  display: none;
+}
+[hidden] {
+  display: none !important;
+}
+
+#viewerContainer {
+  position: absolute;
+  overflow: auto;
+  width: 100%;
+  top: 5rem;
+  bottom: 4rem;
+  left: 0;
+  right: 0;
+}
+
+canvas {
+  margin: auto;
+  display: block;
+}
+
+.pdfViewer .page .loadingIcon {
+  width: 2.9rem;
+  height: 2.9rem;
+  background: url("images/spinner.png") no-repeat left top / 38rem ;
+  border: medium none;
+  animation: 1s steps(10, end) 0s normal none infinite moveDefault;
+  display: block;
+  position: absolute;
+  top: calc((100% - 2.9rem) / 2);
+  left: calc((100% - 2.9rem) / 2);
+}
+
+@keyframes moveDefault {
+  from {
+    background-position: 0 top;
+  }
+
+  to {
+    background-position: -39rem top;
+  }
+}
+
+#loadingBar {
+  position: relative;
+  height: .6rem;
+  background-color: #333;
+  border-bottom: 1px solid #333;
+  margin-top: 5rem;
+}
+
+#loadingBar .progress {
+  position: absolute;
+  left: 0;
+  width: 0;
+  height: 100%;
+  background-color: #ddd;
+  overflow: hidden;
+  transition: width 200ms;
+}
+
+@keyframes progressIndeterminate {
+  0% { left: 0; }
+  50% { left: 100%; }
+  100% { left: 100%; }
+}
+
+#loadingBar .progress.indeterminate {
+  background-color: #999;
+  transition: none;
+}
+
+#loadingBar .indeterminate .glimmer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 5rem;
+
+  background-image: linear-gradient(to right, #999 0%, #fff 50%, #999 100%);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+
+  animation: progressIndeterminate 2s linear infinite;
+}
+
+#errorWrapper {
+  background: none repeat scroll 0 0 #FF5555;
+  color: white;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 3.2rem;
+  z-index: 1000;
+  padding: 0.3rem;
+  font-size: 0.8em;
+}
+
+#errorMessageLeft {
+  float: left;
+}
+
+#errorMessageRight {
+  float: right;
+}
+
+#errorMoreInfo {
+  background-color: #FFFFFF;
+  color: black;
+  padding: 0.3rem;
+  margin: 0.3rem;
+  width: 98%;
+}

examples/mobile-viewer/viewer.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<!--
+Copyright 2012 Mozilla Foundation
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+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.
+-->
+<html dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <title>PDF.js viewer</title>
+
+    <script src="../pdfjs-components/build/pdf.js"></script>
+    <script src="../pdfjs-components/web/pdf_viewer.js"></script>
+    <script src="/shared/js/l10n.js"></script>
+
+    <!-- Localization -->
+    <meta name="defaultLanguage" content="en-US">
+    <meta name="availableLanguages" content="ach,af,ak,an,ar,as,ast,az,be,bg,bn-BD,bn-IN,br,bs,ca,cs,csb,cy,da,de,el,en-GB,en-ZA,eo,es-AR,es-CL,es-ES,es-MX,et,eu,fa,ff,fi,fr,fy-NL,ga-IE,gd,gl,gu-IN,he,hi-IN,hr,hu,hy-AM,id,is,it,ja,ka,kk,km,kn,ko,ku,lg,lij,lt,lv,mai,mk,ml,mn,mr,ms,my,nb-NO,nl,nn-NO,nso,oc,or,pa-IN,pl,pt-BR,pt-PT,rm,ro,ru,rw,sah,si,sk,sl,son,sq,sr,sv-SE,sw,ta,ta-LK,te,th,tl,tn,tr,uk,ur,vi,wo,xh,zh-CN,zh-TW,zu">
+    <link rel="localization" href="locale/{locale}/viewer.properties">
+
+    <script src="viewer.js"></script>
+
+    <!-- Web Components -->
+    <link rel="stylesheet" type="text/css" href="/shared/elements/gaia-theme/gaia-theme.css">
+    <script src="/shared/elements/config.js" defer></script>
+    <script src="/shared/elements/gaia-header/dist/gaia-header.js" defer></script>
+
+    <link rel="stylesheet" type="text/css" href="../pdfjs-components/web/pdf_viewer.css">
+    <link rel="stylesheet" type="text/css" href="viewer.css">
+  </head>
+
+  <body>
+    <section role="region" id="activityHeader" class="skin-organic theme-settings">
+      <gaia-header id="header" action="close">
+        <h1 id="activityTitle"></h1>
+      </gaia-header>
+
+      <footer id="open-toolbar">
+        <button class="toolbarButton pageUp" title="Previous Page" id="previous" data-l10n-id="previous"></button>
+        <button class="toolbarButton pageDown" title="Next Page" id="next" data-l10n-id="next"></button>
+
+        <input type="number" id="pageNumber" class="toolbarField pageNumber" value="1" size="4" min="1">
+
+        <button class="toolbarButton zoomOut" title="Zoom Out" id="zoomOut" data-l10n-id="zoom_out"></button>
+        <button class="toolbarButton zoomIn" title="Zoom In" id="zoomIn" data-l10n-id="zoom_in"></button>
+      </footer>
+    </section>
+
+    <div id="viewerContainer">
+      <div id="viewer" class="pdfViewer"></div>
+    </div>
+
+    <div id="loadingBar">
+      <div class="progress"></div>
+      <div class="glimmer"></div>
+    </div>
+
+    <div id="errorWrapper" hidden='true'>
+      <div id="errorMessageLeft">
+        <span id="errorMessage"></span>
+        <button id="errorShowMore" data-l10n-id="error_more_info">
+          More Information
+        </button>
+        <button id="errorShowLess" data-l10n-id="error_less_info" hidden='true'>
+          Less Information
+        </button>
+      </div>
+      <div id="errorMessageRight">
+        <button id="errorClose" data-l10n-id="error_close">
+          Close
+        </button>
+      </div>
+      <div class="clearBoth"></div>
+      <textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
+    </div>
+  </body>
+</html>

examples/mobile-viewer/viewer.js

@@ -0,0 +1,347 @@
+/* Copyright 2014 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * 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.
+ */
+
+/* globals PDFJS, Promise */
+
+'use strict';
+
+PDFJS.useOnlyCssZoom = true;
+PDFJS.disableTextLayer = true;
+PDFJS.maxImageSize = 1024 * 1024;
+PDFJS.workerSrc = '../pdfjs-components/build/pdf.worker.js';
+PDFJS.cMapUrl = '../pdfjs-components/cmaps/';
+PDFJS.cMapPacked = true;
+
+var DEFAULT_SCALE_DELTA = 1.1;
+var MIN_SCALE = 0.25;
+var MAX_SCALE = 10.0;
+var DEFAULT_SCALE_VALUE = 'auto';
+
+var PDFViewerApplication = {
+  pdfDocument: null,
+  pdfViewer: null,
+  pdfHistory: null,
+  pdfLinkService: null,
+
+  open: function (params) {
+    var url = params.url, originalUrl = params.originalUrl;
+    var self = this;
+    this.setTitleUsingUrl(originalUrl);
+
+    // Loading document.
+    var loadingTask = PDFJS.getDocument(url);
+    loadingTask.onProgress = function (progressData) {
+      self.progress(progressData.loaded / progressData.total);
+    };
+    loadingTask.then(function (pdfDocument) {
+      // Document loaded, specifying document for the viewer.
+      this.pdfDocument = pdfDocument;
+      this.pdfViewer.setDocument(pdfDocument);
+      this.pdfLinkService.setDocument(pdfDocument);
+      this.pdfHistory.initialize(pdfDocument.fingerprint);
+
+      this.loadingBar.hide();
+      this.setTitleUsingMetadata(pdfDocument);
+    }.bind(this), function (exception) {
+      var message = exception && exception.message;
+      var loadingErrorMessage = mozL10n.get('loading_error', null,
+        'An error occurred while loading the PDF.');
+
+      if (exception instanceof PDFJS.InvalidPDFException) {
+        // change error message also for other builds
+        loadingErrorMessage = mozL10n.get('invalid_file_error', null,
+          'Invalid or corrupted PDF file.');
+      } else if (exception instanceof PDFJS.MissingPDFException) {
+        // special message for missing PDFs
+        loadingErrorMessage = mozL10n.get('missing_file_error', null,
+          'Missing PDF file.');
+      } else if (exception instanceof PDFJS.UnexpectedResponseException) {
+        loadingErrorMessage = mozL10n.get('unexpected_response_error', null,
+          'Unexpected server response.');
+      }
+
+      var moreInfo = {
+        message: message
+      };
+      self.error(loadingErrorMessage, moreInfo);
+      self.loadingBar.hide();
+    });
+  },
+
+  get loadingBar() {
+    var bar = new PDFJS.ProgressBar('#loadingBar', {});
+
+    return PDFJS.shadow(this, 'loadingBar', bar);
+  },
+
+  setTitleUsingUrl: function pdfViewSetTitleUsingUrl(url) {
+    this.url = url;
+    var title = PDFJS.getFilenameFromUrl(url) || url;
+    try {
+      title = decodeURIComponent(title);
+    } catch (e) {
+      // decodeURIComponent may throw URIError,
+      // fall back to using the unprocessed url in that case
+    }
+    this.setTitle(title);
+  },
+
+  setTitleUsingMetadata: function (pdfDocument) {
+    var self = this;
+    pdfDocument.getMetadata().then(function(data) {
+      var info = data.info, metadata = data.metadata;
+      self.documentInfo = info;
+      self.metadata = metadata;
+
+      // Provides some basic debug information
+      console.log('PDF ' + pdfDocument.fingerprint + ' [' +
+                  info.PDFFormatVersion + ' ' + (info.Producer || '-').trim() +
+                  ' / ' + (info.Creator || '-').trim() + ']' +
+                  ' (PDF.js: ' + (PDFJS.version || '-') +
+                  (!PDFJS.disableWebGL ? ' [WebGL]' : '') + ')');
+
+      var pdfTitle;
+      if (metadata && metadata.has('dc:title')) {
+        var title = metadata.get('dc:title');
+        // Ghostscript sometimes returns 'Untitled', so prevent setting the
+        // title to 'Untitled.
+        if (title !== 'Untitled') {
+          pdfTitle = title;
+        }
+      }
+
+      if (!pdfTitle && info && info['Title']) {
+        pdfTitle = info['Title'];
+      }
+
+      if (pdfTitle) {
+        self.setTitle(pdfTitle + ' - ' + document.title);
+      }
+    });
+  },
+
+  setTitle: function pdfViewSetTitle(title) {
+    document.title = title;
+    document.getElementById('activityTitle').textContent = title;
+  },
+
+  error: function pdfViewError(message, moreInfo) {
+    var moreInfoText = mozL10n.get('error_version_info',
+      {version: PDFJS.version || '?', build: PDFJS.build || '?'},
+      'PDF.js v{{version}} (build: {{build}})') + '\n';
+
+    if (moreInfo) {
+      moreInfoText +=
+        mozL10n.get('error_message', {message: moreInfo.message},
+          'Message: {{message}}');
+      if (moreInfo.stack) {
+        moreInfoText += '\n' +
+        mozL10n.get('error_stack', {stack: moreInfo.stack},
+          'Stack: {{stack}}');
+      } else {
+        if (moreInfo.filename) {
+          moreInfoText += '\n' +
+          mozL10n.get('error_file', {file: moreInfo.filename},
+            'File: {{file}}');
+        }
+        if (moreInfo.lineNumber) {
+          moreInfoText += '\n' +
+          mozL10n.get('error_line', {line: moreInfo.lineNumber},
+            'Line: {{line}}');
+        }
+      }
+    }
+
+    var errorWrapper = document.getElementById('errorWrapper');
+    errorWrapper.removeAttribute('hidden');
+
+    var errorMessage = document.getElementById('errorMessage');
+    errorMessage.textContent = message;
+
+    var closeButton = document.getElementById('errorClose');
+    closeButton.onclick = function() {
+      errorWrapper.setAttribute('hidden', 'true');
+    };
+
+    var errorMoreInfo = document.getElementById('errorMoreInfo');
+    var moreInfoButton = document.getElementById('errorShowMore');
+    var lessInfoButton = document.getElementById('errorShowLess');
+    moreInfoButton.onclick = function() {
+      errorMoreInfo.removeAttribute('hidden');
+      moreInfoButton.setAttribute('hidden', 'true');
+      lessInfoButton.removeAttribute('hidden');
+      errorMoreInfo.style.height = errorMoreInfo.scrollHeight + 'px';
+    };
+    lessInfoButton.onclick = function() {
+      errorMoreInfo.setAttribute('hidden', 'true');
+      moreInfoButton.removeAttribute('hidden');
+      lessInfoButton.setAttribute('hidden', 'true');
+    };
+    moreInfoButton.removeAttribute('hidden');
+    lessInfoButton.setAttribute('hidden', 'true');
+    errorMoreInfo.value = moreInfoText;
+  },
+
+  progress: function pdfViewProgress(level) {
+    var percent = Math.round(level * 100);
+    // Updating the bar if value increases.
+    if (percent > this.loadingBar.percent || isNaN(percent)) {
+      this.loadingBar.percent = percent;
+    }
+  },
+
+  get pagesCount() {
+    return this.pdfDocument.numPages;
+  },
+
+  set page(val) {
+    this.pdfViewer.currentPageNumber = val;
+  },
+
+  get page() {
+    return this.pdfViewer.currentPageNumber;
+  },
+
+  zoomIn: function pdfViewZoomIn(ticks) {
+    var newScale = this.pdfViewer.currentScale;
+    do {
+      newScale = (newScale * DEFAULT_SCALE_DELTA).toFixed(2);
+      newScale = Math.ceil(newScale * 10) / 10;
+      newScale = Math.min(MAX_SCALE, newScale);
+    } while (--ticks && newScale < MAX_SCALE);
+    this.pdfViewer.currentScaleValue = newScale;
+  },
+
+  zoomOut: function pdfViewZoomOut(ticks) {
+    var newScale = this.pdfViewer.currentScale;
+    do {
+      newScale = (newScale / DEFAULT_SCALE_DELTA).toFixed(2);
+      newScale = Math.floor(newScale * 10) / 10;
+      newScale = Math.max(MIN_SCALE, newScale);
+    } while (--ticks && newScale > MIN_SCALE);
+    this.pdfViewer.currentScaleValue = newScale;
+  },
+
+  initUI: function pdfViewInitUI() {
+    var linkService = new PDFJS.PDFLinkService();
+    this.pdfLinkService = linkService;
+
+    var container = document.getElementById('viewerContainer');
+    var pdfViewer = new PDFJS.PDFViewer({
+      container: container,
+      linkService: linkService
+    });
+    this.pdfViewer = pdfViewer;
+    linkService.setViewer(pdfViewer);
+
+    this.pdfHistory = new PDFJS.PDFHistory({
+      linkService: linkService
+    });
+    linkService.setHistory(this.pdfHistory);
+
+    document.getElementById('previous').addEventListener('click', function() {
+      PDFViewerApplication.page--;
+    });
+
+    document.getElementById('next').addEventListener('click', function() {
+      PDFViewerApplication.page++;
+    });
+
+    document.getElementById('zoomIn').addEventListener('click', function() {
+      PDFViewerApplication.zoomIn();
+    });
+
+    document.getElementById('zoomOut').addEventListener('click', function() {
+      PDFViewerApplication.zoomOut();
+    });
+
+    document.getElementById('pageNumber').addEventListener('click', function() {
+      this.select();
+    });
+
+    document.getElementById('pageNumber').addEventListener('change',
+        function() {
+      // Handle the user inputting a floating point number.
+      PDFViewerApplication.page = (this.value | 0);
+
+      if (this.value !== (this.value | 0).toString()) {
+        this.value = PDFViewerApplication.page;
+      }
+    });
+
+    container.addEventListener('pagesinit', function () {
+      // We can use pdfViewer now, e.g. let's change default scale.
+      pdfViewer.currentScaleValue = DEFAULT_SCALE_VALUE;
+    });
+
+    container.addEventListener('pagechange', function (evt) {
+      var page = evt.pageNumber;
+      var numPages = PDFViewerApplication.pagesCount;
+
+      document.getElementById('pageNumber').value = page;
+      document.getElementById('previous').disabled = (page <= 1);
+      document.getElementById('next').disabled = (page >= numPages);
+    }, true);
+  }
+};
+
+document.addEventListener('DOMContentLoaded', function () {
+  PDFViewerApplication.initUI();
+}, true);
+
+(function animationStartedClosure() {
+  // The offsetParent is not set until the PDF.js iframe or object is visible.
+  // Waiting for first animation.
+  PDFViewerApplication.animationStartedPromise = new Promise(
+    function (resolve) {
+      window.requestAnimationFrame(resolve);
+    });
+})();
+
+// Support of the new version of navigator.mozL10n -- in PDF.js older/custom
+// version is used.
+var mozL10n = {
+  get: function (id, args, fallback) {
+    var s = (navigator.mozL10n && navigator.mozL10n.get(id)) || fallback;
+    s = s.replace(/\{\{\s*(\w+)\s*\}\}/g, function (all, key) {
+      return args[key] || '';
+    });
+    return s;
+  },
+
+  translate: function (fragment) {
+    if (navigator.mozL10n) {
+      navigator.mozL10n.translateFragment(fragment);
+    }
+  }
+};
+
+window.navigator.mozSetMessageHandler('activity', function(activity) {
+  var blob = activity.source.data.blob;
+  var fileURL = activity.source.data.url ||
+                activity.source.data.filename ||
+                ' '; // if no url or filename, use a non-empty string
+
+  var url = URL.createObjectURL(blob);
+  // We need to delay opening until all HTML is loaded.
+  PDFViewerApplication.animationStartedPromise.then(function () {
+    PDFViewerApplication.open({url: url, originalUrl: fileURL});
+
+    var header = document.getElementById('header');
+    header.addEventListener('action', function() {
+      activity.postResult('close');
+    });
+  });
+});