app/views/media_entries/document.html.haml

Summary

Maintainability
Test Coverage
- content_for :head do
  = stylesheet_link_tag "/mozilla-pdf/web/viewer.css"
  %meta{:name=>"viewport", :content=>"width=device-width, initial-scale=1, maximum-scale=1"}
  = javascript_include_tag "/mozilla-pdf/core/pdf.js"
  = javascript_include_tag "/mozilla-pdf/core/pdf.js"
  = javascript_include_tag "/mozilla-pdf/web/l10n.js"
  = javascript_include_tag "/mozilla-pdf/web/compatibility.js"
  = javascript_include_tag "/mozilla-pdf/web/debugger.js"
  = javascript_include_tag "/mozilla-pdf/web/viewer.js"


%body{tabindex: "1"}
  #outerContainer.loadingInProgress
    #sidebarContainer
      #toolbarSidebar
        .splitToolbarButton.toggled
          %button#viewThumbnail.toolbarButton.group.toggled{"data-l10n-id" => "thumbs", tabindex: "2", title: "Show Thumbnails"}
            %span{"data-l10n-id" => "thumbs_label"} Thumbnails
          %button#viewOutline.toolbarButton.group{"data-l10n-id" => "outline", tabindex: "3", title: "Show Document Outline"}
            %span{"data-l10n-id" => "outline_label"} Document Outline
          %button#viewAttachments.toolbarButton.group{"data-l10n-id" => "attachments", tabindex: "4", title: "Show Attachments"}
            %span{"data-l10n-id" => "attachments_label"} Attachments
      #sidebarContent
        #thumbnailView
        #outlineView.hidden
        #attachmentsView.hidden
    / sidebarContainer
    #mainContainer
      #findbar.findbar.hidden.doorHanger.hiddenSmallView
        %label.toolbarLabel{"data-l10n-id" => "find_label", for: "findInput"} Find:
        %input#findInput.toolbarField{tabindex: "41"}/
        .splitToolbarButton
          %button#findPrevious.toolbarButton.findPrevious{"data-l10n-id" => "find_previous", tabindex: "42", title: ""}
            %span{"data-l10n-id" => "find_previous_label"} Previous
          .splitToolbarButtonSeparator
          %button#findNext.toolbarButton.findNext{"data-l10n-id" => "find_next", tabindex: "43", title: ""}
            %span{"data-l10n-id" => "find_next_label"} Next
        %input#findHighlightAll.toolbarField{type: "checkbox"}/
        %label.toolbarLabel{"data-l10n-id" => "find_highlight", for: "findHighlightAll", tabindex: "44"} Highlight all
        %input#findMatchCase.toolbarField{type: "checkbox"}/
        %label.toolbarLabel{"data-l10n-id" => "find_match_case_label", for: "findMatchCase", tabindex: "45"} Match case
        %span#findMsg.toolbarLabel
      / findbar
      #secondaryToolbar.secondaryToolbar.hidden.doorHangerRight
        #secondaryToolbarButtonContainer
          %button#secondaryPresentationMode.secondaryToolbarButton.presentationMode.visibleLargeView{"data-l10n-id" => "presentation_mode", tabindex: "19", title: "Switch to Presentation Mode"}
            %span{"data-l10n-id" => "presentation_mode_label"} Presentation Mode
          %button#secondaryOpenFile.secondaryToolbarButton.openFile.visibleLargeView{"data-l10n-id" => "open_file", tabindex: "20", title: "Open File"}
            %span{"data-l10n-id" => "open_file_label"} Open
          %button#secondaryPrint.secondaryToolbarButton.print.visibleMediumView{"data-l10n-id" => "print", tabindex: "21", title: "Print"}
            %span{"data-l10n-id" => "print_label"} Print
          %button#secondaryDownload.secondaryToolbarButton.download.visibleMediumView{"data-l10n-id" => "download", tabindex: "22", title: "Download"}
            %span{"data-l10n-id" => "download_label"} Download
          %a#secondaryViewBookmark.secondaryToolbarButton.bookmark.visibleSmallView{"data-l10n-id" => "bookmark", href: "#", tabindex: "23", title: "Current view (copy or open in new window)"}
            %span{"data-l10n-id" => "bookmark_label"} Current View
          .horizontalToolbarSeparator.visibleLargeView
          %button#firstPage.secondaryToolbarButton.firstPage{"data-l10n-id" => "first_page", tabindex: "24", title: "Go to First Page"}
            %span{"data-l10n-id" => "first_page_label"} Go to First Page
          %button#lastPage.secondaryToolbarButton.lastPage{"data-l10n-id" => "last_page", tabindex: "25", title: "Go to Last Page"}
            %span{"data-l10n-id" => "last_page_label"} Go to Last Page
          .horizontalToolbarSeparator
          %button#pageRotateCw.secondaryToolbarButton.rotateCw{"data-l10n-id" => "page_rotate_cw", tabindex: "26", title: "Rotate Clockwise"}
            %span{"data-l10n-id" => "page_rotate_cw_label"} Rotate Clockwise
          %button#pageRotateCcw.secondaryToolbarButton.rotateCcw{"data-l10n-id" => "page_rotate_ccw", tabindex: "27", title: "Rotate Counterclockwise"}
            %span{"data-l10n-id" => "page_rotate_ccw_label"} Rotate Counterclockwise
          .horizontalToolbarSeparator
          %button#toggleHandTool.secondaryToolbarButton.handTool{"data-l10n-id" => "hand_tool_enable", tabindex: "28", title: "Enable hand tool"}
            %span{"data-l10n-id" => "hand_tool_enable_label"} Enable hand tool
          .horizontalToolbarSeparator
          %button#documentProperties.secondaryToolbarButton.documentProperties{"data-l10n-id" => "document_properties", tabindex: "29", title: "Document Properties…"}
            %span{"data-l10n-id" => "document_properties_label"} Document Properties…
      / secondaryToolbar
      .toolbar
        #toolbarContainer
          #toolbarViewer
            #toolbarViewerLeft
              %button#sidebarToggle.toolbarButton{"data-l10n-id" => "toggle_sidebar", tabindex: "5", title: "Toggle Sidebar"}
                %span{"data-l10n-id" => "toggle_sidebar_label"} Toggle Sidebar
              .toolbarButtonSpacer
              %button#viewFind.toolbarButton.group.hiddenSmallView{"data-l10n-id" => "findbar", tabindex: "6", title: "Find in Document"}
                %span{"data-l10n-id" => "findbar_label"} Find
              .splitToolbarButton
                %button#previous.toolbarButton.pageUp{"data-l10n-id" => "previous", tabindex: "7", title: "Previous Page"}
                  %span{"data-l10n-id" => "previous_label"} Previous
                .splitToolbarButtonSeparator
                %button#next.toolbarButton.pageDown{"data-l10n-id" => "next", tabindex: "8", title: "Next Page"}
                  %span{"data-l10n-id" => "next_label"} Next
              %label#pageNumberLabel.toolbarLabel{"data-l10n-id" => "page_label", for: "pageNumber"} Page:
              %input#pageNumber.toolbarField.pageNumber{min: "1", size: "4", tabindex: "9", type: "number", value: "1"}/
              %span#numPages.toolbarLabel
            #toolbarViewerRight
              %button#presentationMode.toolbarButton.presentationMode.hiddenLargeView{"data-l10n-id" => "presentation_mode", tabindex: "13", title: "Switch to Presentation Mode"}
                %span{"data-l10n-id" => "presentation_mode_label"} Presentation Mode
              %button#openFile.toolbarButton.openFile.hiddenLargeView{"data-l10n-id" => "open_file", tabindex: "14", title: "Open File"}
                %span{"data-l10n-id" => "open_file_label"} Open
              %button#print.toolbarButton.print.hiddenMediumView{"data-l10n-id" => "print", tabindex: "15", title: "Print"}
                %span{"data-l10n-id" => "print_label"} Print
              %button#download.toolbarButton.download.hiddenMediumView{"data-l10n-id" => "download", tabindex: "16", title: "Download"}
                %span{"data-l10n-id" => "download_label"} Download
              / <div class="toolbarButtonSpacer"></div>
              %a#viewBookmark.toolbarButton.bookmark.hiddenSmallView{"data-l10n-id" => "bookmark", href: "#", tabindex: "17", title: "Current view (copy or open in new window)"}
                %span{"data-l10n-id" => "bookmark_label"} Current View
              .verticalToolbarSeparator.hiddenSmallView
              %button#secondaryToolbarToggle.toolbarButton{"data-l10n-id" => "tools", tabindex: "18", title: "Tools"}
                %span{"data-l10n-id" => "tools_label"} Tools
            .outerCenter
              #toolbarViewerMiddle.innerCenter
                .splitToolbarButton
                  %button#zoomOut.toolbarButton.zoomOut{"data-l10n-id" => "zoom_out", tabindex: "10", title: "Zoom Out"}
                    %span{"data-l10n-id" => "zoom_out_label"} Zoom Out
                  .splitToolbarButtonSeparator
                  %button#zoomIn.toolbarButton.zoomIn{"data-l10n-id" => "zoom_in", tabindex: "11", title: "Zoom In"}
                    %span{"data-l10n-id" => "zoom_in_label"} Zoom In
                %span#scaleSelectContainer.dropdownToolbarButton
                  %select#scaleSelect{"data-l10n-id" => "zoom", tabindex: "12", title: "Zoom"}
                    %option#pageAutoOption{"data-l10n-id" => "page_scale_auto", selected: "selected", title: "", value: "auto"} Automatic Zoom
                    %option#pageActualOption{"data-l10n-id" => "page_scale_actual", title: "", value: "page-actual"} Actual Size
                    %option#pageFitOption{"data-l10n-id" => "page_scale_fit", title: "", value: "page-fit"} Fit Page
                    %option#pageWidthOption{"data-l10n-id" => "page_scale_width", title: "", value: "page-width"} Full Width
                    %option#customScaleOption{title: "", value: "custom"}
                    %option{title: "", value: "0.5"} 50%
                    %option{title: "", value: "0.75"} 75%
                    %option{title: "", value: "1"} 100%
                    %option{title: "", value: "1.25"} 125%
                    %option{title: "", value: "1.5"} 150%
                    %option{title: "", value: "2"} 200%
          #loadingBar
            .progress
              .glimmer
      %menu#viewerContextMenu{type: "context"}
        %menuitem#contextFirstPage{"data-l10n-id" => "first_page", label: "First Page"}
        %menuitem#contextLastPage{"data-l10n-id" => "last_page", label: "Last Page"}
        %menuitem#contextPageRotateCw{"data-l10n-id" => "page_rotate_cw", label: "Rotate Clockwise"}
        %menuitem#contextPageRotateCcw{"data-l10n-id" => "page_rotate_ccw", label: "Rotate Counter-Clockwise"}
      #viewerContainer{tabindex: "0"}
        #viewer
      #errorWrapper{hidden: "true"}
        #errorMessageLeft
          %span#errorMessage
          %button#errorShowMore{"data-l10n-id" => "error_more_info"}
            More Information
          %button#errorShowLess{"data-l10n-id" => "error_less_info", hidden: "true"}
            Less Information
        #errorMessageRight
          %button#errorClose{"data-l10n-id" => "error_close"}
            Close
        .clearBoth
        %textarea#errorMoreInfo{hidden: "true", readonly: "readonly"}
    / mainContainer
    #overlayContainer.hidden
      #passwordOverlay.container.hidden
        .dialog
          .row
            %p#passwordText{"data-l10n-id" => "password_label"} Enter the password to open this PDF file:
          .row
            %input#password.toolbarField{type: "password"}/
          .buttonRow
            %button#passwordCancel.overlayButton
              %span{"data-l10n-id" => "password_cancel"} Cancel
            %button#passwordSubmit.overlayButton
              %span{"data-l10n-id" => "password_ok"} OK
      #documentPropertiesOverlay.container.hidden
        .dialog
          .row
            %span{"data-l10n-id" => "document_properties_file_name"} File name:
            %p#fileNameField -
          .row
            %span{"data-l10n-id" => "document_properties_file_size"} File size:
            %p#fileSizeField -
          .separator
          .row
            %span{"data-l10n-id" => "document_properties_title"} Title:
            %p#titleField -
          .row
            %span{"data-l10n-id" => "document_properties_author"} Author:
            %p#authorField -
          .row
            %span{"data-l10n-id" => "document_properties_subject"} Subject:
            %p#subjectField -
          .row
            %span{"data-l10n-id" => "document_properties_keywords"} Keywords:
            %p#keywordsField -
          .row
            %span{"data-l10n-id" => "document_properties_creation_date"} Creation Date:
            %p#creationDateField -
          .row
            %span{"data-l10n-id" => "document_properties_modification_date"} Modification Date:
            %p#modificationDateField -
          .row
            %span{"data-l10n-id" => "document_properties_creator"} Creator:
            %p#creatorField -
          .separator
          .row
            %span{"data-l10n-id" => "document_properties_producer"} PDF Producer:
            %p#producerField -
          .row
            %span{"data-l10n-id" => "document_properties_version"} PDF Version:
            %p#versionField -
          .row
            %span{"data-l10n-id" => "document_properties_page_count"} Page Count:
            %p#pageCountField -
          .buttonRow
            %button#documentPropertiesClose.overlayButton
              %span{"data-l10n-id" => "document_properties_close"} Close
    / overlayContainer
  / outerContainer
  #printContainer
  #mozPrintCallback-shim{hidden: ""}
    %style{scoped: ""}
      :cdata
        \#mozPrintCallback-shim {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 9999999;
        
        display: block;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5);
        }
        \#mozPrintCallback-shim[hidden] {
        display: none;
        }
        @media print {
        \#mozPrintCallback-shim {
        display: none;
        }
        }
        
        \#mozPrintCallback-shim .mozPrintCallback-dialog-box {
        display: inline-block;
        margin: -50px auto 0;
        position: relative;
        top: 45%;
        left: 0;
        min-width: 220px;
        max-width: 400px;
        
        padding: 9px;
        
        border: 1px solid hsla(0, 0%, 0%, .5);
        border-radius: 2px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        
        background-color: #474747;
        
        color: hsl(0, 0%, 85%);
        font-size: 16px;
        line-height: 20px;
        }
        \#mozPrintCallback-shim .progress-row {
        clear: both;
        padding: 1em 0;
        }
        \#mozPrintCallback-shim progress {
        width: 100%;
        }
        \#mozPrintCallback-shim .relative-progress {
        clear: both;
        float: right;
        }
        \#mozPrintCallback-shim .progress-actions {
        clear: both;
        }
    .mozPrintCallback-dialog-box
      / TODO: Localise the following strings
      Preparing document for printing...
      .progress-row
        %progress{max: "100", value: "0"}
        %span.relative-progress 0%
      .progress-actions
        %input.mozPrintCallback-cancel{type: "button", value: "Cancel"}/

:coffeescript
  
  PDFJS.workerSrc = #{asset_path("pdf.js").to_json}