### Responsive PDF.js Viewer Logic (jQuery)

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/test/mobile_responsive.html

This JavaScript code initializes the PDF.js viewer, dynamically setting the iframe height based on screen dimensions. It switches the iframe source between a desktop and mobile viewer based on screen width. It also includes event handlers for buttons to manually toggle between the desktop and mobile viewer.

```javascript
$(document).ready(function() {
    var viewerDesktop = '../generic/web/viewer_readonly.html?file=../../test/Lorem_ipsum';
    var viewerMobile = '../mobile-viewer/viewer_readonly.html?file=../test/Lorem_ipsum';
    var screenWidth = $(window).width();
    var screenHeight = $(window).height();
    var topSize = 50; // pixels
    var iframeHeight = screenHeight - topSize; // window height reduced by top size (navbar)
    console.log( 'screenWidth: ' + screenWidth +'px' );
    console.log( 'screenHeight: ' + screenHeight +'px' );
    $('iframe').attr('height', iframeHeight +'px');
    if ( screenWidth > 767) {
        $('iframe').attr('src', viewerDesktop);
    } else {
        $('iframe').attr('src', viewerMobile);
    }
    $('#btnDesktop').click(function(){
        $('iframe').remove();
        $('#content').append('<iframe class="desktop" height="'+ iframeHeight +'px" />');
        $('iframe').attr('src', viewerDesktop);
    });
    $('#btnMobile').click(function(){
        $('iframe').remove();
        $('#content').append('<iframe class="mobile" height="'+ iframeHeight +'px" />');
        $('iframe').attr('src', viewerMobile);
    });
});
```

--------------------------------

### PDF Access Protection: Nginx Configuration

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/README.md

This Nginx configuration protects PDF files by validating the HTTP referer. It allows access only from specified domains ('example.com', 'www.example.com') and returns a 403 Forbidden error for requests from other referers.

```ini
server {
  ...

  location ~* \.(pdf)$ {
    # only allow from following domain(s):
    valid_referers example.com www.example.com;

    if ($invalid_referer) {
      return 403;
    }
  }

  ...
}
```

--------------------------------

### PDF Access Protection: Apache Configuration

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/README.md

This Apache configuration uses `mod_rewrite` to protect PDF files from direct access. It checks the HTTP referer and denies access if the request does not originate from the specified domain ('example.com').

```apacheconf
RewriteEngine on 
# only allow from following domain(s):
RewriteCond %{HTTP_REFERER} !^http://(www\.)?example.com*$ [NC] 
RewriteRule \.(pdf)$ - [F]
```

--------------------------------

### Web Viewer Read-Only Integration

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/README.md

Demonstrates how to integrate the read-only PDF.js viewer into a web application. It shows the URL structure for specifying the PDF file, including local files and remote URLs.

```html
/generic/web/viewer_readonly.html?file={filename}
For example: [/generic/web/viewer_readonly.html?file=compressed.tracemonkey-pldi-09](https://latuminggi.github.io/pdf.js_readonly/generic/web/viewer_readonly.html?file=compressed.tracemonkey-pldi-09)
```

```html
/generic/web/viewer_readonly.html?file={http(s)://example.com/filename(.pdf)}
For example: [/generic/web/viewer_readonly.html?file=https://latuminggi.github.io/pdf.js_readonly/generic/web/compressed.tracemonkey-pldi-09](https://latuminggi.github.io/pdf.js_readonly/generic/web/viewer_readonly.html?file=https://latuminggi.github.io/pdf.js_readonly/generic/web/compressed.tracemonkey-pldi-09)
```

--------------------------------

### CSS for PDF.js Viewer Iframes

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/test/mobile_responsive.html

These CSS rules define the styling for the desktop and mobile iframes used in the PDF.js viewer. They control positioning, sizing, and appearance to ensure responsiveness and proper display on different screen sizes.

```css
iframe.desktop {
    position: fixed;
    top: 50px;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    /* height: 93%; */
    border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 999;
}

iframe.mobile {
    position: fixed;
    top: 50px;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    /* height: 93%; */
    border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 999;
}
```

--------------------------------

### Directly Access PDF via URL Query String

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/README.md

This shows how to directly open a PDF file by passing its filename as a query parameter in the URL. The viewer_readonly.html can be accessed with a '?file=' argument followed by the PDF filename.

```html
/generic/web/viewer_readonly.html?file={filename.pdf}
```

```html
/generic/web/viewer_readonly.html?file=compressed.tracemonkey-pldi-09.pdf
```

--------------------------------

### PDF Access Protection: PHP Script

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/README.md

This PHP script provides a method to serve PDF files securely. It checks for specific cookies and HTTP referers before sending the PDF content. It also sets appropriate headers, including `application/octet-stream` for the Content-Type to prevent direct sniffing and avoids `.pdf` extensions in the URL.

```php
<?php
$file = '/path/to/file.pdf';
// only allow if specific cookie(s) available, for example:
if ( isset( $_COOKIE['yourCookie'] ) && $_COOKIE['yourCookie'] === 'yourCookieValue' ) {
  // only allow from following domain(s), for example:
  if ( isset( $_SERVER['HTTP_REFERER'] ) && strpos( $_SERVER['HTTP_REFERER'], 'example.com' ) ) {
    if ( file_exists($file) ) {
      header('Access-Control-Allow-Origin: http(s)://example.com');
      /*  use HTTP header Content-Type application/octet-stream instead application/pdf
       *  this can avoid like IDM to sniff PDF file with mime type application/pdf
       *  and makesure the URL you create does NOT have .pdf extension in the end 
       */
      header('Content-Type: application/octet-stream');
      header('Content-Length: '. filesize($file));
      header('Cache-Control: no-cache');
      header('Pragma: no-cache');
      readfile($file);
      exit;
    }
  }
}

```

--------------------------------

### JavaScript for PDF.js Viewer Initialization

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/test/desktop_mobile.html

This JavaScript code initializes PDF.js viewers for desktop and mobile. It dynamically sets iframe dimensions based on screen width and height, and switches to a mobile-optimized view for screens smaller than 767px.

```javascript
$(document).ready(function() {
    var viewerDesktop = '../generic/web/viewer_readonly.html?file=../../test/Lorem_ipsum';
    var viewerMobile = '../mobile-viewer/viewer_readonly.html?file=../test/Lorem_ipsum';
    var screenWidth = $(window).width();
    var screenHeight = $(window).height();
    var topSize = 50; // pixels
    var iframeHeight = screenHeight - topSize; // window height reduced by top size (navbar)

    console.log( 'screenWidth: ' + screenWidth +'px' );
    console.log( 'screenHeight: ' + screenHeight +'px' );

    $('iframe').attr('height', iframeHeight +'px');
    $('iframe.desktop').attr('width', (screenWidth * 0.75) +'px');
    $('iframe.desktop').attr('src', viewerDesktop);
    $('iframe.mobile').attr('width', (screenWidth * 0.25) +'px');
    $('iframe.mobile').attr('left', (screenWidth * 0.75) +'px');
    $('iframe.mobile').attr('src', viewerMobile);

    if ( screenWidth <= 767) {
        $('iframe').remove();
        $('#content').append('<iframe class="mobile" height="'+ iframeHeight +'px" />');
        $('iframe').attr('style', 'border:none;width:'+ screenWidth +'px');
        $('iframe').attr('left', '0px').attr('src', viewerMobile);
        alert( 'You currently viewing this page on mobile screen size.\n'+ 'For better experience, view this page on desktop screen!' );
    }
});
```

--------------------------------

### PDF.js Readonly Viewer Usage

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/test/iframe_readonly.html

This HTML snippet demonstrates how to embed the PDF.js read-only viewer using an iframe. It shows how to specify the path to the viewer and how to pass the URL of the PDF file to be displayed as a query parameter.

```html
<!-- or you can use full URL to your PDF file -->
<!-- <iframe src="https://latuminggi.github.io/pdf.js_readonly/generic/web/viewer_readonly.html?file=https://latuminggi.github.io/pdf.js_readonly/test/Lorem_ipsum" /> -->
```

--------------------------------

### Protect PDF File Source and Enable Cross-Domain Access

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/README.md

This section provides guidance on protecting PDF file sources from direct download and enabling access from different domains. It suggests removing the '.PDF' extension from filenames to deter automatic downloads and configuring server-side headers like 'Access-Control-Allow-Origin'.

```javascript
// value: "compressed.tracemonkey-pldi-09.pdf",
/*  Modified for PDF.js Read Only
 *  It's better to NOT having .PDF extension in the end of file name
 *  This can avoid like IDM to sniff PDF file type automatically download
 *  You also can protect PDF file source from direct access using .htaccess
 *  Or you can never reveal its original file name such as encoding it first!
 */
value: "compressed.tracemonkey-pldi-09",
```

```javascript
const HOSTED_VIEWER_ORIGINS = ["null", "http://mozilla.github.io", "https://mozilla.github.io", "https://yourdomain.here"];
```

```http
Access-Control-Allow-Origin: http(s)://yourPDFjsViewerDomain.here
```

--------------------------------

### Custom Progress Indicator for Document Loading

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/README.md

This snippet demonstrates how to implement a custom progress indicator for document loading in the PDF viewer. It involves adding a div with an image to the HTML and making corresponding adjustments in the JavaScript, as referenced by a commit diff.

```html
<!-- PDF.js Read Only Adjustment --> 
<!-- Custom Progress Document Loading --> 
<div id="customProgress" style="text-align:center;background:#FDFDFB;min-height:95vh">
  <img src="https://latuminggi.github.io/pdf.js_readonly/img/documentLoading.gif" /> 
</div> 
```

--------------------------------

### Custom Progress Document Loading in HTML

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/README.md

This HTML snippet demonstrates a custom progress indicator for document loading in a PDF viewer. It displays a centered image with a specified width to provide visual feedback while the PDF is loading.

```html
<!-- PDF.js Read Only Adjustment --> 
<!-- Custom Progress Document Loading --> 
<div id="customProgress" style="text-align:center;background:#FFF;min-height:95vh"> 
  <img src="https://latuminggi.github.io/pdf.js_readonly/img/documentLoadingMobile.gif" width="100%" /> 
</div>
```

--------------------------------

### Integrate pdf.js_readonly into HTML

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/README.md

This snippet shows how to include the pdf.js_readonly library in an HTML file. It involves commenting out the default viewer.js script and adding the pdf.js_readonly.js script, along with jQuery.

```html
<!-- PDF.js Read Only Adjustment -->
<!-- <script src="viewer.js"></script> --> <!-- you need to comment or remove this line -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <!-- adjust your jquery if necessary -->
<script src="../../js/pdf.js_readonly.js"></script> <!-- adjust path to pdf.js_readonly.js -->
```

--------------------------------

### Mobile Viewer Read-Only Configuration

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/README.md

Provides instructions for configuring the mobile viewer for read-only access. This includes modifying the `viewer_readonly.html` file to include custom scripts and adjusting settings for cache canvas.

```html
<!-- PDF.js Read Only Adjustment -->
<!-- <script src="viewer.js"></script> --> <!-- you need to comment or remove this line -->
<script src="viewer_mod.js"></script> <!-- adjust path to viewer_mod.js -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <!-- adjust your jquery if necessary -->
<script src="../js/pdf.js_mobile_readonly.js"></script> <!-- adjust path to pdf.js_mobile_readonly.js -->
```

```html
<!-- PDF.js Read Only Adjustment -->
<!-- <script src="build/pdf.min.js"></script> --> <!-- use pdf(.min).js to enable cache canvas on mobile -->
<script src="build/pdf_mod.min.js"></script> <!-- use pdf_mod(.min).js to disable cache canvas on mobile -->
```

--------------------------------

### Disable Context Menu and Hotkeys in PDF.js

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/README.md

This snippet demonstrates how to implement a read-only mode for PDF.js by disabling the context menu (right-click) and specific keyboard shortcuts. It prevents users from copying text, opening new PDFs, printing, saving, or taking screenshots.

```javascript
document.addEventListener('contextmenu', event => event.preventDefault());

document.addEventListener('keydown', event => {
  if (
    event.ctrlKey && (
      event.key === 'c' ||
      event.key === 'o' ||
      event.key === 'p' ||
      event.key === 's'
    )
  ) {
    event.preventDefault();
  }
  if (event.key === 'PrintScreen') {
    event.preventDefault();
  }
});
```

--------------------------------

### CSS for PDF.js Viewer Styling

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/test/desktop_mobile.html

These CSS rules define the styling for desktop and mobile iframes used in the PDF.js viewer. They control positioning, dimensions, borders, and z-index for proper display on different screen sizes.

```css
iframe.desktop {
    position: fixed;
    top: 50px;
    left: 0;
    bottom: 0;
    right: 0;
    /* width: 100%; */
    /* height: 93%; */
    border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 999;
}

iframe.mobile {
    position: fixed;
    top: 50px;
    /* left: 0; */
    bottom: 0;
    right: 0;
    /* width: 100%; */
    /* max-width: 420px; */
    /* height: 93%; */
    border: none;
    border-left: 1px solid black;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 999;
}
```

--------------------------------

### CORS Header for Cross-Domain PDF Access

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/README.md

Specifies the necessary HTTP header (`Access-Control-Allow-Origin`) required on the PDF file's web server to allow access from a different domain when using the PDF.js viewer.

```http
Access-Control-Allow-Origin: http(s)://yourPDFjsViewerDomain.here
```

--------------------------------

### Mobile Viewer JavaScript Modifications for Large Images and Query String

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/README.md

Details modifications made to `viewer.js` to create `viewer_mod.js` for the mobile viewer. These changes enable handling of large PDF image sizes and retrieving the PDF file from query string parameters.

```js
/*  Modified for PDF.js Read Only
 *  To enable PDF large image size
 */
// const MAX_IMAGE_SIZE = 1024 * 1024; // Limited Max Image Size
const MAX_IMAGE_SIZE = false; // Unlimited Max Image Size
```

```js
/*  Modified for PDF.js Read Only
 *  To enable get query string of file
 *  How can I get query string values in JavaScript? https://stackoverflow.com/a/901144/17754812
 */
function getParameterByName(name, url = window.location.href) {
  name = name.replace(/[[]]/g, '\$&');
  var regex   = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
      results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

/*  Modified for PDF.js Read Only
 *  To get query string of file or using default PDF file
 */
// const DEFAULT_URL = "web/compressed.tracemonkey-pldi-09.pdf";
// Get PDF file whether from "DEFAULT_URL" or "file" query string
var file = getParameterByName('file');
const DEFAULT_URL = (file === null || file === "") ? "web/compressed.tracemonkey-pldi-09" : file;
```

--------------------------------

### PDF.js Readonly Iframe Styling

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/test/iframe_readonly.html

This CSS defines the styling for an iframe used to display PDF.js in a read-only mode. It ensures the iframe occupies the full viewport, has no borders or margins, and is positioned on top of other content.

```css
iframe {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 999;
}
```

--------------------------------

### Configure Read-Only Preferences in pdf.js_readonly.js

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/README.md

This JavaScript code configures various read-only preferences for pdf.js, such as disabling right-click, text copying, opening, printing, downloading, presentation, and print screen. It also conditionally loads viewer_noprint.js or viewer.js based on the disablePrintPdf setting.

```javascript
// Read Only Preferences
var disableRghtClck = true; // Disable Right Click,   value: true || false
var disableCopyText = true; // Disable Copy Text,     value: true || false
var disableOpenFile = true; // Disable Open PDF,      value: true || false
var disablePrintPdf = true; // Disable Print PDF,     value: true || false
var disableDownload = true; // Disable Save PDF,      value: true || false
var disablePresents = true; // Disable Presentation,  value: true || false
var disablePrntScrn = true; // Disable Print Screen,  value: true || false (experimental)

// Load Specific viewer.js
if ( disablePrintPdf ) {
  $.getScript( '../../js/viewer_noprint.js' ); // Adjust path to viewer_noprint.js if necessary
} else {
  $.getScript( 'viewer.js' );  // Adjust path to viewer.js if necessary
}
```

--------------------------------

### Mobile Viewer JavaScript Read-Only Preferences

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/README.md

Configures various read-only preferences within the mobile viewer's JavaScript file (`pdf.js_mobile_readonly.js`). These settings control features like right-click, text copying, file opening, printing, and screen printing.

```js
// Read Only Preferences
var disableRghtClck = true; // Disable Right Click,   value: true || false
var disableCopyText = true; // Disable Copy Text,     value: true || false
var disableOpenFile = true; // Disable Open PDF,      value: true || false
var disablePrintPdf = true; // Disable Print PDF,     value: true || false
var disableDownload = true; // Disable Save PDF,      value: true || false
var disablePrntScrn = true; // Disable Print Screen,  value: true || false (experimental)
```

--------------------------------

### Disable Print Overlay in viewer_noprint.js

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/README.md

This JavaScript code, intended for viewer_noprint.js, comments out functionality that would trigger a print action via keyboard shortcuts (Ctrl+P or Cmd+P). This is part of the read-only implementation to prevent printing.

```javascript
/*  Modified for PDF.js Read Only
 *  To disable print overlay
 */
/* window.addEventListener("keydown", function (event) {
  if (event.keyCode === 80 && (event.ctrlKey || event.metaKey) && !event.altKey && (!event.shiftKey || window.chrome || window.opera)) {
    window.print();
    event.preventDefault();

    if (event.stopImmediatePropagation) {
      event.stopImmediatePropagation();
    } else {
      event.stopPropagation();
    }
  }
}, true); */
```

--------------------------------

### PDF.js Read-Only Mobile Cache Modification

Source: https://github.com/latuminggi/pdf.js_readonly/blob/master/README.md

This JavaScript snippet modifies the PDF.js caching behavior for read-only mobile viewing. It disables canvas caching on mobile devices by creating a new canvas entry when a cached ID is found, ensuring a fresh canvas is used.

```javascript
if (this.cache[id] !== undefined) {
  /*  Modified for PDF.js Read Only
   *  To disable cache canvas on mobile
   */
  /* canvasEntry = this.cache[id]; */
  canvasEntry = this.canvasFactory.create(width, height);
  this.canvasFactory.reset(canvasEntry, width, height);
  canvasEntry.context.setTransform(1, 0, 0, 1, 0, 0);
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.