From 324ea1d743987f1987ff2633d9ea575991064815 Mon Sep 17 00:00:00 2001 From: Artur Adib Date: Wed, 11 Apr 2012 16:12:51 -0700 Subject: [PATCH 001/106] first mockup, loads tracemonkey pages OK --- web/images/texture.png | Bin 0 -> 2459 bytes web/images/toolbarButton-bookmark.png | Bin 0 -> 244 bytes web/images/toolbarButton-download.png | Bin 0 -> 334 bytes web/images/toolbarButton-menuArrows.png | Bin 0 -> 237 bytes web/images/toolbarButton-pageDown.png | Bin 0 -> 353 bytes web/images/toolbarButton-pageUp.png | Bin 0 -> 344 bytes web/images/toolbarButton-print.png | Bin 0 -> 474 bytes web/images/toolbarButton-sidebarToggle.png | Bin 0 -> 349 bytes web/images/toolbarButton-viewOutline.png | Bin 0 -> 300 bytes web/images/toolbarButton-viewThumbnail.png | Bin 0 -> 211 bytes web/images/toolbarButton-zoomIn.png | Bin 0 -> 228 bytes web/images/toolbarButton-zoomOut.png | Bin 0 -> 143 bytes web/viewer.css | 876 +++++++++++---------- web/viewer.html | 152 +++- 14 files changed, 569 insertions(+), 459 deletions(-) create mode 100644 web/images/texture.png create mode 100644 web/images/toolbarButton-bookmark.png create mode 100644 web/images/toolbarButton-download.png create mode 100644 web/images/toolbarButton-menuArrows.png create mode 100644 web/images/toolbarButton-pageDown.png create mode 100644 web/images/toolbarButton-pageUp.png create mode 100644 web/images/toolbarButton-print.png create mode 100644 web/images/toolbarButton-sidebarToggle.png create mode 100644 web/images/toolbarButton-viewOutline.png create mode 100644 web/images/toolbarButton-viewThumbnail.png create mode 100644 web/images/toolbarButton-zoomIn.png create mode 100644 web/images/toolbarButton-zoomOut.png diff --git a/web/images/texture.png b/web/images/texture.png new file mode 100644 index 0000000000000000000000000000000000000000..df00864932368d75024b46b3a1993d0f51f1d59a GIT binary patch literal 2459 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 O5r8?-l2B*lk?>!&x?|k{ literal 0 HcmV?d00001 diff --git a/web/images/toolbarButton-bookmark.png b/web/images/toolbarButton-bookmark.png new file mode 100644 index 0000000000000000000000000000000000000000..1e5259a97ae3b79f7ea01ced902e0c43798dbc2d GIT binary patch literal 244 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`yFFbTLn?0dPPXMb+v(^&c9yfp;>!C z`yk7ix`lgj&0zuYI7|}jbIT6QfUz^ z>Oks6r=eWyo;1N6*7twq{!dk?jQ_7bLpg6wvGo&O3C*=vmZ%$lnc>8deT3~wf=0%@ qjDERb)?>R2G`?iUWv@R~e($|o)93%X-@1U_VDNPHb6Mw<&;$V3Ut?_m literal 0 HcmV?d00001 diff --git a/web/images/toolbarButton-download.png b/web/images/toolbarButton-download.png new file mode 100644 index 0000000000000000000000000000000000000000..a0a9ce3e00581a3a2bd395ca25b554eb9c80394e GIT binary patch literal 334 zcmV-U0kQsxP)P6Fi0>kh$p6hZ~Ko0erXF& zWDo;|pk6@1*ZTix@MFDOF3=KSh%z#8Gw6BdeyaLkiGc5_9J7F~-~!4rK$Pe@XMHI7 zUkrh7ORO`1x}nlAB|5elZwvnC{m*-qZ=S}W3A7q64N=0yply+IJ?CnUX(FaHLDkDn+0QuIaD$uLUrvLx|07*qoM6N<$g276H{r~^~ literal 0 HcmV?d00001 diff --git a/web/images/toolbarButton-menuArrows.png b/web/images/toolbarButton-menuArrows.png new file mode 100644 index 0000000000000000000000000000000000000000..31b06b5af9e548b15e274677b8ecaac1c1d06e77 GIT binary patch literal 237 zcmeAS@N?(olHy`uVBq!ia0vp^>_9BQ!2%=;I@VSLDajJoh?3y^w370~qErUQl>DSr z1<%~X^wgl##FWaylc_d9Mg5*Gjv*Y;$q5RA21W%&988AFF7neS9({Y$O^hc-fzNvT zy{kX}UyqMIu=e3{csed~)S6b>9XaCpJd2PXwsj@)uEyTHN9Cd}ro z5XP`c@(2I(zwen392I~4ZeZ0+OPe6@{r)uVcjpxtQN)i16KOjF~A%cy9L}N?{*aRypMbKt#Y{Wu@^dWzc zB43gw@m?5VSf4XKI1uvgxkJb(Jp(WVYhVPnHDj;=mcX2{j2A`GW>r;L-}l82ZQFh| zO*2i?^oZrQ5>KD9SC-`y?f{*0oaG|B7xlwaLz8mj}qKT!aP_teqVs_y##kUGoqtiwOACzF#-<;cM@iX z4qc!Yz$DM}D=cpR1G99rt30p*4zet}M&QNP=Y&2{#AlocLCwd zgzqHz&yp|CdBw$>ph$U z)hTRj6#q=2*TFhKHzx|6MzWGs8Z{*folGT{Oft!nX+2TscPHu_w7sJZOjQKt!iL$+`E7GKObZu1M&0Q qn}h0!&|(*d3p}p4q{kr^2K)fvg`AtvZ>v!N0000R2Ufr!B0z*aR30|=ePH_&CN9b zGN^_S5((O&!lLLBgeMOj6rwNSAv$&FSRbGusH=zQ0~B`t^> zpB)1Fs#D*~H_PunS@$ytit4NLmr{cOfV~gJ%dc(f25{V@8oB_8*zr}9|K~7)w!vn| QtpET307*qoM6N<$g4lo5;s5{u literal 0 HcmV?d00001 diff --git a/web/images/toolbarButton-sidebarToggle.png b/web/images/toolbarButton-sidebarToggle.png new file mode 100644 index 0000000000000000000000000000000000000000..5a937c712b054defb99910aa8884e5a8e426f26e GIT binary patch literal 349 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!60wlNoGJgf6BuiW)N`mv#O3D+9QW+dm@{>{( zJaZG%Q-e|yQz{EjrrH1%{r7Zn43UszJ!tC}5-7oN;q!xH1;GqArn>^|FHPP#a!Xx% zV3)ICNs{aokqa{eqB0qEBO+h8F#Skq_-!nHp7Zp*h|LTP4a>@9&DQZ9d(FUb;QapE z@rMfbB(X6t^n~*qc1X(K`rkIzI_s|a{sXJ;epeUfaawL*{lBKt#;EKed&lMK=od^g z6aPQFe?9%?V(SY#rz%be6hFP^6hoYeBvWV5)F4%c2?`T3eRF-;7?1=`xSn)nV&G(& z+5T?j)tx*E2OZiRo_)Rj_vX_!b>;5~na}6)EYy^_C$Vskj}OCD9^EhLZy(>0eIUhf o&PjgR{C&4Y7#LRkoAHmGL7HL7NZJOXS)XL_>Q+(9#k#HnsNx;vxi^`wkeeE@AMj(2^v%5-EeHiadiL2+m;`o}~kg;LFgGbsKGZJ59kX1xFE y?>+E+e@CR94=VC|VB5CkIF2Rlyj4-jJ@^0&o=tDjU66bL0000;0 literal 0 HcmV?d00001 diff --git a/web/images/toolbarButton-viewThumbnail.png b/web/images/toolbarButton-viewThumbnail.png new file mode 100644 index 0000000000000000000000000000000000000000..3a27f043939942d23aa6cb9992c35a6b526c449f GIT binary patch literal 211 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`vpiiKLn>}9y|j>vDNv;4;bmU4 z-%Yu!vp3|*ADX@)!bk1?!3?8Foih1%R?L&9HSTviSpk+Ka&^`vn5+K)IU-oAe*-xp*r a > img { - margin: 4px; - height: 16px; -} - -#controls > button { - line-height: 16px; -} - -#controls > button > img { - width: 16px; - height: 16px; -} - -#controls > button[disabled] > img { - opacity: 0.5; -} - -#pageNumber { - text-align: right; -} - -#fileInput { - line-height: 16px; -} - -/* === Sidebar === */ -#sidebar { - position: fixed; - width: 350px; - top: 62px; - bottom: 18px; - left: -290px; - transition: left 0.25s ease-in-out 1s; - -o-transition: left 0.25s ease-in-out 1s; - -moz-transition: left 0.25s ease-in-out 1s; - -webkit-transition: left 0.25s ease-in-out 1s; - z-index: 1; -} - -#sidebar:hover, -#sidebar.pinned { - left: 0px; - transition: left 0.25s ease-in-out 0s; - -o-transition: left 0.25s ease-in-out 0s; - -moz-transition: left 0.25s ease-in-out 0s; - -webkit-transition: left 0.25s ease-in-out 0s; -} - -#pinIcon { - position: absolute; - top: 4px; - right: 55px; - width: 15px; - height: 15px; - background: center no-repeat; - background-image: url('images/pin-up.svg'); - background-size: 15px 15px; -} - -#pinIcon:hover { - background-color: rgba(255,255,255,0.35); -} - -#sidebar.pinned #pinIcon { - background-image: url('images/pin-down.svg'); - background-size: 15px 15px; -} - -#sidebarBox { - background-color: rgba(0, 0, 0, 0.7); - width: 300px; height: 100%; - border-top-right-radius: 8px; - border-bottom-right-radius: 8px; - -moz-border-radius-topright: 8px; - -moz-border-radius-bottomright: 8px; - -webkit-border-top-right-radius: 8px; - -webkit-border-bottom-right-radius: 8px; - box-shadow: 0px 2px 8px #000; - -moz-box-shadow: 0px 2px 8px #000; - -webkit-box-shadow: 0px 2px 8px #000; + background-color: #404040; + background-image: url(images/texture.png); + font-family: Segoe UI, Verdana, sans-serif; } -#sidebarScrollView { - position: absolute; - overflow: hidden; - overflow-y: auto; - top: 20px; - bottom: 10px; - left: 10px; - width: 280px; +#outerContainer { + display: -moz-box; + -moz-box-orient: horizontal; + width: 100%; + height: 100%; + -moz-user-select:none; + cursor: default; +} + +#sidebarContainer { + width: 200px; + height: 100%; + background-color: hsla(0,0%,0%,.1); + box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25); + overflow: auto; +} + +#viewerContainer { + -moz-box-flex: 1; + height: 100%; + box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05); +} + +.toolbar { + position: fixed; + width: 100%; + height: 32px; + z-index: 9999; + -moz-user-select:none; + cursor: default; +} + +#toolbarContainer { + display: -moz-box; + width: 100%; +} + +#toolbarSidebar { + display: -moz-box; + width: 200px; + height: 32px; + background-image: url(images/texture.png), + -moz-linear-gradient(hsla(0,0%,30%,.99), hsla(0,0%,25%,.95)); + box-shadow: inset -2px 0 0 hsla(0,0%,100%,.08), + inset 0 1px 1px hsla(0,0%,0%,.15), + inset 0 -1px 0 hsla(0,0%,100%,.05), + 0 1px 0 hsla(0,0%,0%,.15), + 0 1px 1px hsla(0,0%,0%,.1); +} + +#toolbarViewer { + display: -moz-box; + -moz-box-flex: 1; + margin-left: -1px; + height: 32px; + background-image: url(images/texture.png), + -moz-linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95)); + border-left: 1px solid hsla(0,0%,0%,.5); + box-shadow: inset 1px 0 0 hsla(0,0%,100%,.08), + inset 0 1px 1px hsla(0,0%,0%,.15), + inset 0 -1px 0 hsla(0,0%,100%,.05), + 0 1px 0 hsla(0,0%,0%,.15), + 0 1px 1px hsla(0,0%,0%,.1); +} + +.splitToolbarButton { + margin: 4px 2px 4px 0; + display: -moz-box; +} +.splitToolbarButton > .toolbarButton { + position: relative; + margin: 0 -1px; + padding: 3px 6px; + border-radius: 0; +} +.splitToolbarButton:hover > .toolbarButton, +.splitToolbarButton.toggled > .toolbarButton { + background-color: hsla(0,0%,0%,.12); + background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); + background-clip: padding-box; + border: 1px solid hsla(0,0%,0%,.35); + border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42); + box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, + 0 0 1px hsla(0,0%,100%,.15) inset, + 0 1px 0 hsla(0,0%,100%,.05); + -moz-transition-property: background-color, border-color, box-shadow; + -moz-transition-duration: 150ms; + -moz-transition-timing-function: ease; +} +.splitToolbarButton > .toolbarButton:hover, +.dropdownToolbarButton:hover { + background-color: hsla(0,0%,0%,.2); + box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, + 0 0 1px hsla(0,0%,100%,.15) inset, + 0 0 1px hsla(0,0%,0%,.05); + z-index: 199; +} +.splitToolbarButton > .toolbarButton:first-child { + position: relative; + margin: 0; + margin-right: -1px; + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; + border-right-color: transparent; +} +.splitToolbarButton > .toolbarButton:last-child { + position: relative; + margin: 0; + margin-left: -1px; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; + border-left-color: transparent; +} +.splitToolbarButtonSeparator { + margin: 4px 0; + width: 1px; + background-color: hsla(0,0%,00%,.5); + z-index: 99; + box-shadow: 0 0 0 1px hsla(0,0%,100%,.08); +} +.splitToolbarButton:hover > .splitToolbarButtonSeparator, +.splitToolbarButton.toggled > .splitToolbarButtonSeparator { + margin: 1px 0; + box-shadow: 0 0 0 1px hsla(0,0%,100%,.03); + -moz-transition-property: margin; + -moz-transition-duration: 10ms; + -moz-transition-timing-function: ease; +} + +.toolbarButton, +.dropdownToolbarButton { + -moz-box-flex: 0; + min-width: 16px; + padding: 3px 7px; + margin: 4px 2px 4px 0; + border: 1px solid transparent; + border-radius: 2px; + color: hsl(0,0%,95%); + font-size: 12px; + line-height: 14px; + -moz-user-select:none; + cursor: default; + -moz-transition-property: background-color, border-color, box-shadow; + -moz-transition-duration: 150ms; + -moz-transition-timing-function: ease; +} + +.toolbarButton:hover, +.dropdownToolbarButton { + background-color: hsla(0,0%,0%,.12); + background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); + background-clip: padding-box; + border: 1px solid hsla(0,0%,0%,.35); + border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42); + box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, + 0 0 1px hsla(0,0%,100%,.15) inset, + 0 1px 0 hsla(0,0%,100%,.05); +} + +.toolbarButton:hover:active, +.dropdownToolbarButton:hover:active { + background-color: hsla(0,0%,0%,.2); + background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); + border-color: hsla(0,0%,0%,.35) hsla(0,0%,0%,.4) hsla(0,0%,0%,.45); + box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset, + 0 0 1px hsla(0,0%,0%,.2) inset, + 0 1px 0 hsla(0,0%,100%,.05); + -moz-transition-property: background-color, border-color, box-shadow; + -moz-transition-duration: 10ms; + -moz-transition-timing-function: linear; +} + +.toolbarButton.toggled, +.splitToolbarButton.toggled > .toolbarButton.toggled { + background-color: hsla(0,0%,0%,.3); + background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); + border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.45) hsla(0,0%,0%,.5); + box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset, + 0 0 1px hsla(0,0%,0%,.2) inset, + 0 1px 0 hsla(0,0%,100%,.05); + -moz-transition-property: background-color, border-color, box-shadow; + -moz-transition-duration: 10ms; + -moz-transition-timing-function: linear; +} + +.toolbarButton.toggled:hover:active, +.splitToolbarButton.toggled > .toolbarButton.toggled:hover:active { + background-color: hsla(0,0%,0%,.4); + border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.5) hsla(0,0%,0%,.55); + box-shadow: 0 1px 1px hsla(0,0%,0%,.2) inset, + 0 0 1px hsla(0,0%,0%,.3) inset, + 0 1px 0 hsla(0,0%,100%,.05); +} + +.dropdownToolbarButton { + min-width: 124px; +} +.dropdownToolbarButton::after { + display: inline-block; + float: right; + content: url(images/toolbarButton-menuArrows.png); +} + +.splitToolbarButton:first-child, +.toolbarButton:first-child { + margin-left: 4px; +} +.splitToolbarButton:last-child, +.toolbarButton:last-child { + margin-right: 4px; +} + +.toolbarButtonSpacer { + width: 30px; +} + +.toolbarButtonFlexibleSpacer { + -moz-box-flex: 1; + min-width: 30px; +} + +.toolbarButton.sidebarToggle::before { + display: inline-block; + content: url(images/toolbarButton-sidebarToggle.png); +} + +.toolbarButton.pageUp::before { + display: inline-block; + content: url(images/toolbarButton-pageUp.png); +} + +.toolbarButton.pageDown::before { + display: inline-block; + content: url(images/toolbarButton-pageDown.png); +} + +.toolbarButton.zoomOut::before { + display: inline-block; + content: url(images/toolbarButton-zoomOut.png); +} + +.toolbarButton.zoomIn::before { + display: inline-block; + content: url(images/toolbarButton-zoomIn.png); +} + +.toolbarButton.print::before { + display: inline-block; + content: url(images/toolbarButton-print.png); +} + +.toolbarButton.download::before { + display: inline-block; + content: url(images/toolbarButton-download.png); +} + +.toolbarButton.bookmark::before { + display: inline-block; + content: url(images/toolbarButton-bookmark.png); +} + +.toolbarButton.viewThumbnail::before { + display: inline-block; + content: url(images/toolbarButton-viewThumbnail.png); +} + +.toolbarButton.viewOutline::before { + display: inline-block; + content: url(images/toolbarButton-viewOutline.png); +} + +.toolbarField { + min-width: 16px; + width: 32px; + padding: 3px 6px; + margin: 4px 0 4px 0; + border: 1px solid transparent; + border-radius: 2px; + background-color: hsla(0,0%,100%,.09); + background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); + background-clip: padding-box; + border: 1px solid hsla(0,0%,0%,.35); + border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42); + box-shadow: 0 1px 0 hsla(0,0%,0%,.05) inset, + 0 1px 0 hsla(0,0%,100%,.05); + color: hsl(0,0%,95%); + font-size: 12px; + line-height: 14px; + text-align: right; + outline-style: none; + -moz-user-select:none; + cursor: default; + -moz-transition-property: background-color, border-color, box-shadow; + -moz-transition-duration: 150ms; + -moz-transition-timing-function: ease; +} + +.toolbarField:hover { + background-color: hsla(0,0%,100%,.11); + border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.43) hsla(0,0%,0%,.45); +} + +.toolbarField:focus { + background-color: hsla(0,0%,100%,.15); + border-color: hsla(204,100%,65%,.8) hsla(204,100%,65%,.85) hsla(204,100%,65%,.9); +} + +.toolbarLabel { + min-width: 16px; + padding: 3px 6px 3px 2px; + margin: 4px 2px 4px 0; + border: 1px solid transparent; + border-radius: 2px; + color: hsl(0,0%,85%); + font-size: 12px; + line-height: 14px; + text-align: left; + -moz-user-select:none; + cursor: default; +} + +.viewer { + width: 100%; + height: 100%; + margin-top: -27px; + -moz-user-select:none; + cursor: default; +} + +.viewerImage { +/* width: 50%; */ + margin: 80px 20px 20px; + box-shadow: 0 0 0 1px hsla(0,0%,0%,.5), + 0 2px 8px hsla(0,0%,0%,.3); + +} + + +#thumbnailView { + position: fixed; + width: 120px; + height: 100%; + padding: 51px 40px 0; + overflow: auto; } .thumbnail { - width: 134px; - height: 134px; - margin-top: 5px; - margin-bottom: 5px; - margin-left:auto; - margin-right:auto; - line-height: 134px; - text-align: center; - overflow: hidden; + position: relative; + float: left; + width: 120px; + height: 150px; + +/* + width: 98px; + height: 128px; + margin: 0 10px 20px; + background-color: white; + background-image: url(images/thumbnail.png); + border: 1px solid transparent; + box-shadow: 0 0 0 1px hsla(0,0%,0%,.5), + 0 2px 8px hsla(0,0%,0%,.3); + opacity: .8; + -moz-transition-duration: 150ms; +*/ } -.thumbnail:not([data-loaded]) { - background-color: gray; -} - -.thumbnail > canvas { - vertical-align: middle; - display: inline-block; -} - -#outlineScrollView { +.thumbnailImage { position: absolute; - background-color: #fff; - overflow: auto; - top: 20px; - bottom: 10px; + top: 10px; left: 10px; - width: 280px; + width: 98px; + height: 128px; +/* background-image: url(images/thumbnail.png);*/ + border: 1px solid transparent; + box-shadow: 0 0 0 1px hsla(0,0%,0%,.5), + 0 2px 8px hsla(0,0%,0%,.3); + opacity: .8; + z-index: 99; + -moz-transition-duration: 150ms; +} +.thumbnailSelectionRing { + position: absolute; + width: 112px; + height: 142px; + margin: 4px; + border-radius: 2px; + -moz-transition-duration: 150ms; +} + +.thumbnail:hover > .thumbnailImage { + opacity: .9; +} + +.thumbnail:hover > .thumbnailSelectionRing { + background-color: hsla(0,0%,100%,.15); + background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); + background-clip: padding-box; + box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, + 0 0 1px hsla(0,0%,100%,.2) inset, + 0 0 1px hsla(0,0%,0%,.2); + color: hsla(0,0%,100%,.9); +} + +.thumbnail.selected > .thumbnailImage { + box-shadow: 0 0 0 1px hsla(0,0%,0%,.5); + opacity: 1; +} + +.thumbnail.selected > .thumbnailSelectionRing { + background-color: hsla(0,0%,100%,.3); + background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); + background-clip: padding-box; + box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, + 0 0 1px hsla(0,0%,100%,.1) inset, + 0 0 1px hsla(0,0%,0%,.2); + color: hsla(0,0%,100%,1); } #outlineView { - padding-top: 4px; - padding-bottom: 100px; - padding-left: 6px; - padding-right: 6px; - font-size: smaller; + position: fixed; + width: 188px; + height: 100%; + padding: 52px 4px 0; + overflow: auto; } -.outlineItem > .outlineItems { - margin-left: 20px; +.outlineEntry { + width: -moz-calc(100% - 8px); + height: 20px; + padding: 2px 0 0 10px; + margin-bottom: 1px; + border-radius: 2px; + color: hsla(0,0%,100%,.8); + font-size: 13px; + line-height: 15px; + -moz-user-select:none; + cursor: default; } -.outlineItem > a { - text-decoration: none; - color: black; +.outlineEntry:hover { + background-color: hsla(0,0%,100%,.02); + background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); + background-clip: padding-box; + box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, + 0 0 1px hsla(0,0%,100%,.2) inset, + 0 0 1px hsla(0,0%,0%,.2); + color: hsla(0,0%,100%,.9); } -.outlineItem > a:hover { - background: #ff0; - box-shadow: 0px 2px 10px #ff0; +.outlineEntry.selected { + background-color: hsla(0,0%,100%,.08); + background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0)); + background-clip: padding-box; + box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, + 0 0 1px hsla(0,0%,100%,.1) inset, + 0 0 1px hsla(0,0%,0%,.2); + color: hsla(0,0%,100%,1); } -#sidebarControls { - position:absolute; - width: 120px; - height: 32px; - left: 15px; - bottom: 35px; -} - -#sidebarControls > button { - box-shadow: 0px 4px 10px #000; - -moz-box-shadow: 0px 4px 10px #000; - -webkit-box-shadow: 0px 4px 10px #000; -} - -#sidebarControls > button > img { - width: 32px; - height: 32px; -} - -#sidebarControls > button[disabled] > img { - opacity: 0.5; -} - -#sidebarControls > button[data-selected] { - box-shadow: 0px 4px 10px #ff0; - -moz-box-shadow: 0px 4px 10px #ff0; - -webkit-box-shadow: 0px 4px 10px #ff0; -} - -/* === Content view === */ canvas { margin: auto; display: block; @@ -245,230 +504,3 @@ canvas { -moz-box-shadow: 0px 2px 10px #ff0; -webkit-box-shadow: 0px 2px 10px #ff0; } - -.loadingIcon { - position: absolute; - display: block; - left: 0; - top: 0; - right: 0; - bottom: 0; - background: url('images/loading-icon.gif') center no-repeat; -} - -.textLayer { - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 0; - color: #000; - font-family: sans-serif; -} - -.textLayer > div { - color: transparent; - position: absolute; - line-height:1.3; -} - -.annotComment > div { - position: absolute; -} - -.annotComment > img { - position: absolute; -} - -.annotComment > img:hover { - cursor: pointer; - opacity: 0.7; -} - -.annotComment > div { - padding: 0.2em; - max-width: 20em; - background-color: #F1E47B; - box-shadow: 0px 2px 10px #333; - -moz-box-shadow: 0px 2px 10px #333; - -webkit-box-shadow: 0px 2px 10px #333; -} - -.annotComment > div > h1 { - font-weight: normal; - font-size: 1.2em; - border-bottom: 1px solid #000000; - margin: 0px; -} - -/* TODO: file FF bug to support ::-moz-selection:window-inactive - so we can override the opaque grey background when the window is inactive; - see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */ -::selection { background:rgba(0,0,255,0.3); } -::-moz-selection { background:rgba(0,0,255,0.3); } - -#viewer { - margin: 44px 0px 0px; - padding: 8px 0px; -} - -#sidebarView canvas:hover { - background: #ff0; - box-shadow: 0px 2px 10px #ff0; - -moz-box-shadow: 0px 2px 10px #ff0; - -webkit-box-shadow: 0px 2px 10px #ff0; -} - -#pageWidthOption { - border-top: 1px solid black; -} - -#customScaleOption { - display: none; -} - -#errorWrapper { - background: none repeat scroll 0 0 #FF5555; - color: white; - left: 0; - position: fixed; - right: 0; - top: 30px; - z-index: 1000; - padding: 3px; - font-size: 0.8em; -} - -#errorMessageLeft { - float: left; -} - -#errorMessageRight { - float: right; -} - -#errorMoreInfo { - background-color: #FFFFFF; - color: black; - padding: 3px; - margin: 3px; - width: 98%; -} - -.clearBoth { - clear: both; -} - -/* === Printed media overrides === */ -@media print { - #sidebar { - display: none; - } - - #controls { - display: none; - } - - #viewer { - margin: 0; - padding: 0; - } - - .page { - display: none; - margin: 0; - } - - .page canvas { - box-shadow: none; - -moz-box-shadow: none; - -webkit-box-shadow: none; - } - - .page[data-loaded] { - display: block; - page-break-after: always; - } -} - -#loadingBox { - margin: 100px 0; - text-align: center; -} - -#loadingBar { - background-color: #333; - display: inline-block; - border: 1px solid black; - clear: both; - margin:0px; - line-height: 0; - border-radius: 4px; - width: 15em; - height: 1.5em; -} - -#loadingBar .progress { - background-color: green; - display: inline-block; - float: left; - - background: #b4e391; - background: -moz-linear-gradient(top, #b4e391 0%, #61c419 50%, #b4e391 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4e391), color-stop(50%,#61c419), color-stop(100%,#b4e391)); - background: -webkit-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); - background: -o-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); - background: -ms-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); - background: linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); - - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - - width: 0%; - height: 100%; -} - -#PDFBug { - font-size: 10px; - position: fixed; - top: 35px; - bottom: 5px; - right: 2px; - width: 300px; - background: white; - border: 1px solid #666; - padding: 0; -} -#PDFBug .controls { - border-bottom: 1px solid #666; - padding: 3px; - background: -moz-linear-gradient(center bottom, #eee 0%, #fff 100%); -} -#PDFBug .panels { - overflow: auto; - position: absolute; - top: 27px; - left: 0; - right: 0; - bottom: 0; -} -#PDFBug button.active { - font-weight: bold; -} -.debuggerShowText { - background: yellow; - color: blue; - opacity: 0.3; -} -.debuggerHideText:hover { - background: yellow; - opacity: 0.3; -} -#PDFBug .stats { - font-size: 10px; - white-space: pre; - font-family: courier; -} -#PDFBug .stats .title { - font-weight: bold; -} diff --git a/web/viewer.html b/web/viewer.html index d275f77c1..001b0b04f 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -1,44 +1,120 @@ - - - Simple pdf.js page viewer - + + PDF viewer + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
1
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Page 1
+
Page 2
+
Page 3
+
Page 4
+
Page 5
+
+
+ +
+
+
+ +
+ + +
+
-
+ +
+ From c8695cfa0a182c264551702a3a7b5b3ecb93f3fe Mon Sep 17 00:00:00 2001 From: Artur Adib Date: Thu, 12 Apr 2012 15:08:07 -0700 Subject: [PATCH 002/106] sidebar toggle working --- web/viewer.css | 72 +++++++++++++++---------------------------------- web/viewer.html | 39 +++++++++------------------ web/viewer.js | 38 +++++++++++++------------- 3 files changed, 55 insertions(+), 94 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index ac61a7943..8168b330e 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -31,12 +31,17 @@ body { background-color: hsla(0,0%,0%,.1); box-shadow: inset -1px 0 0 hsla(0,0%,0%,.25); overflow: auto; + padding-top: 33px; +} +#sidebarContainer.hidden { + display:none; } #viewerContainer { -moz-box-flex: 1; height: 100%; box-shadow: inset 1px 0 0 hsla(0,0%,100%,.05); + padding-top: 30px; } .toolbar { @@ -65,6 +70,9 @@ body { 0 1px 0 hsla(0,0%,0%,.15), 0 1px 1px hsla(0,0%,0%,.1); } +#toolbarSidebar.hidden { + display:none; +} #toolbarViewer { display: -moz-box; @@ -237,7 +245,7 @@ body { min-width: 30px; } -.toolbarButton.sidebarToggle::before { +.toolbarButton#sidebarToggle::before { display: inline-block; content: url(images/toolbarButton-sidebarToggle.png); } @@ -337,65 +345,26 @@ body { cursor: default; } -.viewer { - width: 100%; - height: 100%; - margin-top: -27px; - -moz-user-select:none; - cursor: default; -} - -.viewerImage { -/* width: 50%; */ - margin: 80px 20px 20px; - box-shadow: 0 0 0 1px hsla(0,0%,0%,.5), - 0 2px 8px hsla(0,0%,0%,.3); - -} - - #thumbnailView { position: fixed; width: 120px; height: 100%; - padding: 51px 40px 0; + padding: 10px 40px 0; overflow: auto; } .thumbnail { - position: relative; - float: left; - width: 120px; - height: 150px; - -/* - width: 98px; - height: 128px; - margin: 0 10px 20px; - background-color: white; - background-image: url(images/thumbnail.png); - border: 1px solid transparent; - box-shadow: 0 0 0 1px hsla(0,0%,0%,.5), - 0 2px 8px hsla(0,0%,0%,.3); - opacity: .8; - -moz-transition-duration: 150ms; -*/ + width: 134px; + height: 134px; + margin-top: 15px; + margin-bottom: 15px; + margin-left:auto; + margin-right:auto; + line-height: 134px; + text-align: center; + overflow: hidden; } -.thumbnailImage { - position: absolute; - top: 10px; - left: 10px; - width: 98px; - height: 128px; -/* background-image: url(images/thumbnail.png);*/ - border: 1px solid transparent; - box-shadow: 0 0 0 1px hsla(0,0%,0%,.5), - 0 2px 8px hsla(0,0%,0%,.3); - opacity: .8; - z-index: 99; - -moz-transition-duration: 150ms; -} .thumbnailSelectionRing { position: absolute; width: 112px; @@ -441,6 +410,9 @@ body { padding: 52px 4px 0; overflow: auto; } +#outlineView.hidden { + display:none; +} .outlineEntry { width: -moz-calc(100% - 8px); diff --git a/web/viewer.html b/web/viewer.html index 001b0b04f..9f835b6ee 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -41,7 +41,7 @@
-
+
-
+
@@ -74,30 +74,11 @@
-
+
-
Loading... 0%
+
Loading... 0%
diff --git a/web/viewer.js b/web/viewer.js index 340cf2005..49571e9f8 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -15,6 +15,8 @@ var kMaxScale = 4.0; var kImageDirectory = './images/'; var kSettingsMemory = 20; +var mozL10n = document.mozL10n || document.webL10n; + function getFileName(url) { var anchor = url.indexOf('#'); var query = url.indexOf('?'); @@ -326,11 +328,11 @@ var PDFView = { }, function getDocumentError(message, exception) { var loadingIndicator = document.getElementById('loading'); - loadingIndicator.textContent = 'Error'; + loadingIndicator.textContent = mozL10n.get('loading_error_indicator'); var moreInfo = { message: message }; - self.error('An error occurred while loading the PDF.', moreInfo); + self.error(mozL10n.get('loading_error'), moreInfo); self.loading = false; }, function getDocumentProgress(progressData) { @@ -437,17 +439,24 @@ var PDFView = { }; moreInfoButton.removeAttribute('hidden'); lessInfoButton.setAttribute('hidden', 'true'); - errorMoreInfo.value = 'PDF.JS Build: ' + PDFJS.build + '\n'; + errorMoreInfo.value = + mozL10n.get('error_build', {build: PDFJS.build}) + '\n'; if (moreInfo) { - errorMoreInfo.value += 'Message: ' + moreInfo.message; + errorMoreInfo.value += + mozL10n.get('error_message', {message: moreInfo.message}); if (moreInfo.stack) { - errorMoreInfo.value += '\n' + 'Stack: ' + moreInfo.stack; + errorMoreInfo.value += '\n' + + mozL10n.get('error_stack', {stack: moreInfo.stack}); } else { - if (moreInfo.filename) - errorMoreInfo.value += '\n' + 'File: ' + moreInfo.filename; - if (moreInfo.lineNumber) - errorMoreInfo.value += '\n' + 'Line: ' + moreInfo.lineNumber; + if (moreInfo.filename) { + errorMoreInfo.value += '\n' + + mozL10n.get('error_file', {file: moreInfo.filename}); + } + if (moreInfo.lineNumber) { + errorMoreInfo.value += '\n' + + mozL10n.get('error_line', {line: moreInfo.lineNumber}); + } } } errorMoreInfo.rows = errorMoreInfo.value.split('\n').length - 1; @@ -456,7 +465,7 @@ var PDFView = { progress: function pdfViewProgress(level) { var percent = Math.round(level * 100); var loadingIndicator = document.getElementById('loading'); - loadingIndicator.textContent = 'Loading... ' + percent + '%'; + loadingIndicator.textContent = mozL10n.get('loading', {percent: percent}); PDFView.loadingBar.percent = percent; }, @@ -992,7 +1001,7 @@ var PageView = function pageView(container, pdfPage, id, scale, } if (error) - PDFView.error('An error occurred while rendering the page.', error); + PDFView.error(mozL10n.get('rendering_error'), error); self.stats = pdfPage.stats; self.updateStats(); @@ -1309,6 +1318,9 @@ window.addEventListener('load', function webViewerLoad(evt) { if ('disableWorker' in hashParams) PDFJS.disableWorker = (hashParams['disableWorker'] === 'true'); + if ('locale' in hashParams) + mozL10n.language.code = hashParams['locale']; + if ('disableTextLayer' in hashParams) PDFJS.disableTextLayer = (hashParams['disableTextLayer'] === 'true'); From 7859ba89c31eb1e11edd7ff2ce38fb95ea98142c Mon Sep 17 00:00:00 2001 From: Yury Delendik Date: Mon, 30 Apr 2012 15:33:37 -0500 Subject: [PATCH 060/106] Missing webL10n library files --- external/webL10n/README.md | 3 + external/webL10n/l10n.js | 304 +++++++++++++++++++++++++++++++++++++ 2 files changed, 307 insertions(+) create mode 100644 external/webL10n/README.md create mode 100644 external/webL10n/l10n.js diff --git a/external/webL10n/README.md b/external/webL10n/README.md new file mode 100644 index 000000000..52995522c --- /dev/null +++ b/external/webL10n/README.md @@ -0,0 +1,3 @@ +The source code for the library can be found at + + https://github.com/fabi1cazenave/webL10n diff --git a/external/webL10n/l10n.js b/external/webL10n/l10n.js new file mode 100644 index 000000000..fedf70cde --- /dev/null +++ b/external/webL10n/l10n.js @@ -0,0 +1,304 @@ +/* Copyright (c) 2011-2012 Fabien Cazenave, Mozilla. + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to + * deal in the Software without restriction, including without limitation the + * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or + * sell copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS + * IN THE SOFTWARE. + */ + +'use strict'; + +(function(window) { + var gL10nData = {}; + var gTextData = ''; + var gLanguage = ''; + + // parser + + function evalString(text) { + return text.replace(/\\\\/g, '\\') + .replace(/\\n/g, '\n') + .replace(/\\r/g, '\r') + .replace(/\\t/g, '\t') + .replace(/\\b/g, '\b') + .replace(/\\f/g, '\f') + .replace(/\\{/g, '{') + .replace(/\\}/g, '}') + .replace(/\\"/g, '"') + .replace(/\\'/g, "'"); + } + + function parseProperties(text, lang) { + var reBlank = /^\s*|\s*$/; + var reComment = /^\s*#|^\s*$/; + var reSection = /^\s*\[(.*)\]\s*$/; + var reImport = /^\s*@import\s+url\((.*)\)\s*$/i; + + // parse the *.properties file into an associative array + var currentLang = '*'; + var supportedLang = []; + var skipLang = false; + var data = []; + var match = ''; + var entries = text.replace(reBlank, '').split(/[\r\n]+/); + for (var i = 0; i < entries.length; i++) { + var line = entries[i]; + + // comment or blank line? + if (reComment.test(line)) + continue; + + // section start? + if (reSection.test(line)) { + match = reSection.exec(line); + currentLang = match[1]; + skipLang = (currentLang != lang) && (currentLang != '*'); + continue; + } else if (skipLang) { + continue; + } + + // @import rule? + if (reImport.test(line)) { + match = reImport.exec(line); + } + + // key-value pair + var tmp = line.split('='); + if (tmp.length > 1) + data[tmp[0]] = evalString(tmp[1]); + } + + // find the attribute descriptions, if any + for (var key in data) { + var id, prop, index = key.lastIndexOf('.'); + if (index > 0) { // attribute + id = key.substring(0, index); + prop = key.substr(index + 1); + } else { // textContent, could be innerHTML as well + id = key; + prop = 'textContent'; + } + if (!gL10nData[id]) + gL10nData[id] = {}; + gL10nData[id][prop] = data[key]; + } + } + + function parse(text, lang) { + gTextData += text; + // we only support *.properties files at the moment + return parseProperties(text, lang); + } + + // load and parse the specified resource file + function loadResource(href, lang, onSuccess, onFailure) { + var xhr = new XMLHttpRequest(); + xhr.open('GET', href, true); + xhr.overrideMimeType('text/plain; charset=utf-8'); + xhr.onreadystatechange = function() { + if (xhr.readyState == 4) { + if (xhr.status == 200 || xhr.status == 0) { + parse(xhr.responseText, lang); + if (onSuccess) + onSuccess(); + } else { + if (onFailure) + onFailure(); + } + } + }; + xhr.send(null); + } + + // load and parse all resources for the specified locale + function loadLocale(lang, callback) { + clear(); + + // check all nodes + // and load the resource files + var langLinks = document.querySelectorAll('link[type="application/l10n"]'); + var langCount = langLinks.length; + + // start the callback when all resources are loaded + var onResourceLoaded = null; + var gResourceCount = 0; + onResourceLoaded = function() { + gResourceCount++; + if (gResourceCount >= langCount) { + // execute the [optional] callback + if (callback) + callback(); + // fire a 'localized' DOM event + var evtObject = document.createEvent('Event'); + evtObject.initEvent('localized', false, false); + evtObject.language = lang; + window.dispatchEvent(evtObject); + } + } + + // load all resource files + function l10nResourceLink(link) { + var href = link.href; + var type = link.type; + this.load = function(lang, callback) { + var applied = lang; + loadResource(href, lang, callback, function() { + console.warn(href + ' not found.'); + applied = ''; + }); + return applied; // return lang if found, an empty string if not found + }; + } + + gLanguage = lang; + for (var i = 0; i < langCount; i++) { + var resource = new l10nResourceLink(langLinks[i]); + var rv = resource.load(lang, onResourceLoaded); + if (rv != lang) // lang not found, used default resource instead + gLanguage = ''; + } + } + + // fetch an l10n object, warn if not found + function getL10nData(key) { + var data = gL10nData[key]; + if (!data) + console.warn('[l10n] #' + key + ' missing for [' + gLanguage + ']'); + return data; + } + + // replace {{arguments}} with their values + function substArguments(str, args) { + var reArgs = /\{\{\s*([a-zA-Z\.]+)\s*\}\}/; + var match = reArgs.exec(str); + while (match) { + if (!match || match.length < 2) + return str; // argument key not found + + var arg = match[1]; + var sub = ''; + if (arg in args) { + sub = args[arg]; + } else if (arg in gL10nData) { + sub = gL10nData[arg].textContent; + } else { + console.warn('[l10n] could not find argument {{' + arg + '}}'); + return str; + } + + str = str.substring(0, match.index) + sub + + str.substr(match.index + match[0].length); + match = reArgs.exec(str); + } + return str; + } + + // translate a string + function translateString(key, args) { + var data = getL10nData(key); + if (!data) + return '{{' + key + '}}'; + return substArguments(data.textContent, args); + } + + // translate an HTML element + function translateElement(element) { + if (!element || !element.dataset) + return; + + // get the related l10n object + var key = element.dataset.l10nId; + var data = getL10nData(key); + if (!data) + return; + + // get arguments (if any) + // TODO: more flexible parser? + var args; + if (element.dataset.l10nArgs) try { + args = JSON.parse(element.dataset.l10nArgs); + } catch (e) { + console.warn('[l10n] could not parse arguments for #' + key + ''); + } + + // translate element + // TODO: security check? + for (var k in data) + element[k] = substArguments(data[k], args); + } + + // translate an HTML subtree + function translateFragment(element) { + element = element || document.querySelector('html'); + + // check all translatable children (= w/ a `data-l10n-id' attribute) + var children = element.querySelectorAll('*[data-l10n-id]'); + var elementCount = children.length; + for (var i = 0; i < elementCount; i++) + translateElement(children[i]); + + // translate element itself if necessary + if (element.dataset.l10nId) + translateElement(element); + } + + // clear all l10n data + function clear() { + gL10nData = {}; + gTextData = ''; + gLanguage = ''; + } + + // load the default locale on startup + window.addEventListener('DOMContentLoaded', function() { + var lang = navigator.language; + if (navigator.mozSettings) { + var req = navigator.mozSettings.getLock().get('language.current'); + req.onsuccess = function() { + loadLocale(req.result['language.current'] || lang, translateFragment); + }; + req.onerror = function() { + loadLocale(lang, translateFragment); + }; + } else { + loadLocale(lang, translateFragment); + } + }); + + // Public API + document.mozL10n = { + // get a localized string + get: translateString, + + // get|set the document language and direction + get language() { + return { + // get|set the document language (ISO-639-1) + get code() { return gLanguage; }, + set code(lang) { loadLocale(lang, translateFragment); }, + + // get the direction (ltr|rtl) of the current language + get direction() { + // http://www.w3.org/International/questions/qa-scripts + // Arabic, Hebrew, Farsi, Pashto, Urdu + var rtlList = ['ar', 'he', 'fa', 'ps', 'ur']; + return (rtlList.indexOf(gLanguage) >= 0) ? 'rtl' : 'ltr'; + } + }; + } + }; +})(this); From cf67d4567ff4f29e31fbeb3f96a6bd1ed4eaedfe Mon Sep 17 00:00:00 2001 From: Brendan Dahl Date: Mon, 30 Apr 2012 13:35:26 -0700 Subject: [PATCH 061/106] One more container fix. --- web/viewer.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/web/viewer.js b/web/viewer.js index d4c67f49f..238b4adae 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -1469,9 +1469,10 @@ function updateThumbViewArea() { } window.addEventListener('resize', function webViewerResize(evt) { - if (document.getElementById('pageWidthOption').selected || + if (PDFView.initialized && + (document.getElementById('pageWidthOption').selected || document.getElementById('pageFitOption').selected || - document.getElementById('pageAutoOption').selected) + document.getElementById('pageAutoOption').selected)) PDFView.parseScale(document.getElementById('scaleSelect').value); updateViewarea(); }); From 68321ae671fb2a15f48799f53a0f7a79edf35876 Mon Sep 17 00:00:00 2001 From: Brendan Dahl Date: Mon, 30 Apr 2012 14:23:26 -0700 Subject: [PATCH 062/106] Add back the browse button for the web viewer. --- web/viewer.css | 1 + web/viewer.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/web/viewer.css b/web/viewer.css index daac25075..ceac25c2c 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -771,6 +771,7 @@ canvas { .fileInput { background: white; color: black; + margin-top: 5px; } #PDFBug { diff --git a/web/viewer.html b/web/viewer.html index 4a39566d6..63dbcc608 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -74,7 +74,7 @@
- + From 7b02cb3a30ee494768ef693c2b85e2ced85bb953 Mon Sep 17 00:00:00 2001 From: Brendan Dahl Date: Mon, 30 Apr 2012 14:58:12 -0700 Subject: [PATCH 063/106] Fix the bookmark button alignment. --- web/viewer.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web/viewer.css b/web/viewer.css index ceac25c2c..2397f7ef5 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -404,7 +404,8 @@ body { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; - margin-top: 5px; + margin-top: 3px; + padding-top: 4px; } .toolbarButton.bookmark::before { From 08daef9c72ae98dca9d545c204fe7212eaf0b7fd Mon Sep 17 00:00:00 2001 From: Yury Delendik Date: Mon, 30 Apr 2012 18:38:10 -0500 Subject: [PATCH 064/106] Fix ru language --- web/locale.properties | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/web/locale.properties b/web/locale.properties index 328e00538..bad40715a 100644 --- a/web/locale.properties +++ b/web/locale.properties @@ -46,8 +46,9 @@ error_file=Файл: {{file}} error_line=Строка: {{line}} page_scale_width=Ширина страницы page_scale_fit=Вся страница -page_scale_auto=Автоматически +page_scale_auto=Автоматический page_scale_actual=Настоящий размер +toggle_slider.title=Открыть/закрыть вспомогательную панель thumbs.title=Показать уменьшенные изображения outline.title=Показать содержание документа loading=Загрузка... {{percent}}% From 72eb2d2e5b27ceea29d791bcd9bbe1d7451eceb4 Mon Sep 17 00:00:00 2001 From: Yury Delendik Date: Mon, 30 Apr 2012 18:47:10 -0500 Subject: [PATCH 065/106] Localize 'No outline' message --- web/locale.properties | 3 +++ web/viewer.js | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/web/locale.properties b/web/locale.properties index bad40715a..20f70915a 100644 --- a/web/locale.properties +++ b/web/locale.properties @@ -27,6 +27,7 @@ loading_error=An error occurred while loading the PDF. rendering_error=An error occurred while rendering the page. page_label=Page: page_of=of {{pageCount}} +no_outline=No Outline Available [ru] bookmark.title=Ссылка на текущий вид (скопировать или открыть в новом окне) @@ -57,6 +58,7 @@ loading_error=Произошла ошибка во время загрузки P rendering_error=Произошла ошибка во время создания страницы. page_label=Страница: page_of=из {{pageCount}} +no_outline=Содержание не доступно [xx] bookmark.title=<<<_¢ȗггεпţ ṿiεẂ (¢OÞӳ Oг OÞεп iп пεẂ ẂiпÐOẂ)_>>> @@ -87,3 +89,4 @@ loading_error=<<<_ãп εггOг O¢¢ȗггεÐ ẂНiḻε ḻOãÐiпģ ţН rendering_error=<<<_ãп εггOг O¢¢ȗггεÐ ẂНiḻε гεпÐεгiпģ ţНε Þãģε._>>> page_label=Þãģε: page_of=<<<_O£ {{pageCount}}_>>> +no_outline=<<<_пO Oȗţḻiпε ãṿãiḻãьḻε_>>> \ No newline at end of file diff --git a/web/viewer.js b/web/viewer.js index eb18b881b..bc235aac9 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -1163,7 +1163,7 @@ var DocumentOutlineView = function documentOutlineView(outline) { if (!outline) { var noOutline = document.createElement('div'); noOutline.classList.add('noOutline'); - noOutline.textContent = 'No Outline Available'; + noOutline.textContent = mozL10n.get('no_outline'); outlineView.appendChild(noOutline); return; } From 00543a1c89cfb1a5bfadea64271d23ff3e42fa37 Mon Sep 17 00:00:00 2001 From: Yury Delendik Date: Mon, 30 Apr 2012 21:55:21 -0500 Subject: [PATCH 066/106] Embed locale.properties in the viewer.html for extension --- external/webL10n/l10n.js | 12 ++++++++++-- make.js | 4 ++++ web/viewer-snippet-firefox-extension.html | 14 +++++++++++++- web/viewer-snippet.html | 1 + web/viewer.html | 3 ++- 5 files changed, 30 insertions(+), 4 deletions(-) diff --git a/external/webL10n/l10n.js b/external/webL10n/l10n.js index fedf70cde..bb847ee10 100644 --- a/external/webL10n/l10n.js +++ b/external/webL10n/l10n.js @@ -131,7 +131,10 @@ // check all nodes // and load the resource files var langLinks = document.querySelectorAll('link[type="application/l10n"]'); - var langCount = langLinks.length; + var langLinksCount = langLinks.length; + var langScripts = document.querySelectorAll('script[type="application/l10n"]'); + var langScriptCount = langScripts.length; + var langCount = langLinksCount + langScriptCount; // start the callback when all resources are loaded var onResourceLoaded = null; @@ -165,12 +168,17 @@ } gLanguage = lang; - for (var i = 0; i < langCount; i++) { + for (var i = 0; i < langLinksCount; i++) { var resource = new l10nResourceLink(langLinks[i]); var rv = resource.load(lang, onResourceLoaded); if (rv != lang) // lang not found, used default resource instead gLanguage = ''; } + for (var i = 0; i < langScriptCount; i++) { + var scriptText = langScripts[i].text; + parse(scriptText, lang); + onResourceLoaded(); + } } // fetch an l10n object, warn if not found diff --git a/make.js b/make.js index c8cd49610..36f4ef073 100755 --- a/make.js +++ b/make.js @@ -252,6 +252,8 @@ target.firefox = function() { FIREFOX_EXTENSION_NAME = 'pdf.js.xpi', FIREFOX_AMO_EXTENSION_NAME = 'pdf.js.amo.xpi'; + var LOCALE_CONTENT = cat('web/locale.properties'); + target.production(); target.buildnumber(); cd(ROOT_DIR); @@ -278,6 +280,8 @@ target.firefox = function() { // Modify the viewer so it does all the extension-only stuff. cd(FIREFOX_BUILD_CONTENT_DIR + '/web'); sed('-i', /.*PDFJSSCRIPT_INCLUDE_BUNDLE.*\n/, cat(ROOT_DIR + BUILD_TARGET), 'viewer-snippet-firefox-extension.html'); + sed('-i', /.*PDFJSSCRIPT_OTHER_SCRIPTS.*\n/, cat(ROOT_DIR + 'external/webL10n/l10n.js'), 'viewer-snippet-firefox-extension.html'); + sed('-i', /PDFJSSCRIPT_LOCALE_DATA/, JSON.stringify({text: LOCALE_CONTENT}), 'viewer-snippet-firefox-extension.html'); sed('-i', /.*PDFJSSCRIPT_REMOVE_CORE.*\n/g, '', 'viewer.html'); sed('-i', /.*PDFJSSCRIPT_REMOVE_FIREFOX_EXTENSION.*\n/g, '', 'viewer.html'); sed('-i', /.*PDFJSSCRIPT_INCLUDE_FIREFOX_EXTENSION.*\n/, cat('viewer-snippet-firefox-extension.html'), 'viewer.html'); diff --git a/web/viewer-snippet-firefox-extension.html b/web/viewer-snippet-firefox-extension.html index 72cf3f095..d3faaae51 100644 --- a/web/viewer-snippet-firefox-extension.html +++ b/web/viewer-snippet-firefox-extension.html @@ -1,6 +1,18 @@ - + From bc094a84f4cfd020fbcb77ed94dc280904585b8e Mon Sep 17 00:00:00 2001 From: Yury Delendik Date: Mon, 30 Apr 2012 22:06:54 -0500 Subject: [PATCH 067/106] Keeping l10n.js file reference; removing temp/unused files --- make.js | 3 ++- web/viewer-snippet-firefox-extension.html | 3 +-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/make.js b/make.js index 36f4ef073..8c1319554 100755 --- a/make.js +++ b/make.js @@ -280,7 +280,6 @@ target.firefox = function() { // Modify the viewer so it does all the extension-only stuff. cd(FIREFOX_BUILD_CONTENT_DIR + '/web'); sed('-i', /.*PDFJSSCRIPT_INCLUDE_BUNDLE.*\n/, cat(ROOT_DIR + BUILD_TARGET), 'viewer-snippet-firefox-extension.html'); - sed('-i', /.*PDFJSSCRIPT_OTHER_SCRIPTS.*\n/, cat(ROOT_DIR + 'external/webL10n/l10n.js'), 'viewer-snippet-firefox-extension.html'); sed('-i', /PDFJSSCRIPT_LOCALE_DATA/, JSON.stringify({text: LOCALE_CONTENT}), 'viewer-snippet-firefox-extension.html'); sed('-i', /.*PDFJSSCRIPT_REMOVE_CORE.*\n/g, '', 'viewer.html'); sed('-i', /.*PDFJSSCRIPT_REMOVE_FIREFOX_EXTENSION.*\n/g, '', 'viewer.html'); @@ -289,6 +288,8 @@ target.firefox = function() { // We don't need pdf.js anymore since its inlined rm('-Rf', FIREFOX_BUILD_CONTENT_DIR + BUILD_DIR); + rm(FIREFOX_BUILD_CONTENT_DIR + '/web/viewer-snippet-firefox-extension.html'); + rm(FIREFOX_BUILD_CONTENT_DIR + '/web/locale.properties'); // Remove '.DS_Store' and other hidden files find(FIREFOX_BUILD_DIR).forEach(function(file) { if (file.match(/^\./)) diff --git a/web/viewer-snippet-firefox-extension.html b/web/viewer-snippet-firefox-extension.html index d3faaae51..a5c0da0a5 100644 --- a/web/viewer-snippet-firefox-extension.html +++ b/web/viewer-snippet-firefox-extension.html @@ -10,9 +10,8 @@ script.text = localeData.text; document.getElementsByTagName('head')[0].appendChild(script); })(); - -/* PDFJSSCRIPT_OTHER_SCRIPTS */ +