@internetarchive/bookreader 5.0.0-10-alpha-3 → 5.0.0-100

package/src/BookReaderPlugin.js

@@ -0,0 +1,52 @@
+// @ts-check
+/** @typedef {import("./BookReader.js").default} BookReader */
+
+/**
+ * @template TOptions
+ */
+export class BookReaderPlugin {
+  /**
+   * @param {BookReader} br
+   */
+  constructor(br) {
+    /** @type {BookReader} */
+    this.br = br;
+    /** @type {TOptions} */
+    this.options;
+  }
+
+  /**
+   * @abstract
+   * @param {TOptions} options
+   **/
+  setup(options) {
+    this.options = Object.assign({}, this.options, options);
+  }
+
+  /** @abstract */
+  init() {}
+
+  /**
+   * @abstract
+   * @protected
+   * @param {import ("./BookReader/PageContainer.js").PageContainer} pageContainer
+   */
+  _configurePageContainer(pageContainer) {
+  }
+
+  /**
+   * @abstract
+   * @protected
+   * @param {JQuery<HTMLElement>} $toolbarElement
+   */
+  _configureToolbar($toolbarElement) {
+  }
+
+  /** @abstract @protected */
+  _bindNavigationHandlers() {}
+
+  /**
+   * @param {JQuery<HTMLElement>} $navBar
+   */
+  extendNavBar($navBar) {}
+}

package/src/assets/icons/magnify-minus.svg

@@ -1,16 +1,12 @@
 <svg
-  width="18"
-  height="18"
-  viewBox="0 0 18 18"
+  viewBox="0 0 100 100"
   version="1.1"
   xmlns="http://www.w3.org/2000/svg"
   aria-labelledby="magnify-minusTitleID magnify-minusDescID"
 >
   <title id="magnify-minusTitleID">Zoom out</title>
   <desc id="magnify-minusDescID">An icon of a minus symbol</desc>
-  <g fill="none" fill-rule="evenodd">
-    <circle cx="7" cy="7" r="6" stroke="#fff" stroke-width="2" />
-    <path d="m12 12 4.335213 4.335213" stroke="#fff" stroke-linecap="round" stroke-width="2" />
-    <path d="m10 7.75v-1.5h-6v1.5z" fill="#fff" fill-rule="nonzero" />
+  <g fill="#fff" fill-rule="evenodd">
+    <path d="m2.3239824 87.3815869 25.8938394-23.8143095c-4.5929593-6.6937643-6.889439-14.1059452-6.889439-22.2365428 0-7.1360431 1.7567382-13.7186647 5.2702146-19.7478649 3.5134763-6.0292002 8.2852035-10.8003118 14.3151815-14.31333499 6.029978-3.51302314 12.6134488-5.26953471 19.7504125-5.26953471s13.7204346 1.75651157 19.7504126 5.26953471c6.029978 3.51302319 10.8017051 8.28413479 14.3151815 14.31333499 3.5134763 6.0292002 5.2702145 12.6118218 5.2702145 19.7478649s-1.7567382 13.7324143-5.2702145 19.7891137c-3.5134764 6.0566994-8.2852035 10.8415607-14.3151815 14.3545838-6.029978 3.5130232-12.6134489 5.2695347-19.7504126 5.2695347-8.5762743 0-16.3217363-2.5723212-23.2363861-7.7169637l-26.3063807 24.2302349c-1.27200216 1.1618413-2.76631826 1.742762-4.48294825 1.742762-1.826641 0-3.38971397-.6496687-4.68921892-1.949006s-1.94925743-2.8622087-1.94925743-4.688614c0-1.9364022.7746608-3.5955208 2.3239824-4.9773557zm58.3436469-19.9162976c7.1919692 0 13.3331041-2.5585716 18.4234048-7.6757149s7.635451-11.2712357 7.635451-18.4622772-2.5451503-13.3313843-7.635451-18.4210284-11.2314356-7.6344661-18.4234048-7.6344661-13.3331042 2.544822-18.4234049 7.6344661-7.635451 11.2299869-7.635451 18.4210284 2.5451503 13.3451339 7.635451 18.4622772 11.2314357 7.6757149 18.4234049 7.6757149zm-14.9374313-21.3256316h31.2878163v-9.5422233h-31.2878163z"/>
   </g>
 </svg>

package/src/assets/icons/magnify-plus.svg

@@ -1,17 +1,13 @@
 <svg
-  width="18"
-  height="18"
-  viewBox="0 0 18 18"
+  viewBox="0 0 100 100"
   version="1.1"
   xmlns="http://www.w3.org/2000/svg"
   aria-labelledby="magnify-plusTitleID magnify-plusDescID"
 >
   <title id="magnify-plusTitleID">Zoom in</title>
   <desc id="magnify-plusDescID">An icon of a plus symbol</desc>
-  <g fill="none" fill-rule="evenodd">
-    <circle cx="7" cy="7" r="6" stroke="#fff" stroke-width="2" />
-    <path d="m12 12 4.335213 4.335213" stroke="#fff" stroke-linecap="round" stroke-width="2" />
-    <path d="m7.75 4v2.25h2.25v1.5h-2.25v2.25h-1.5v-2.25h-2.25v-1.5h2.25v-2.25z" fill="#fff" fill-rule="nonzero" />
+  <g fill="#fff" fill-rule="evenodd">
+    <path d="m2.40305276 87.4017263 25.81133064-23.7730295c-4.5356618-6.5723551-6.8034928-14.000283-6.8034928-22.2837838 0-7.1236734 1.7429868-13.6948847 5.2289603-19.7136338 3.4859736-6.0187491 8.2577006-10.7953163 14.3151813-14.32970144 6.0574806-3.53438517 12.6547027-5.30157776 19.7916662-5.30157776 10.8429591 0 20.0964884 3.85236545 27.760588 11.5570964 7.6640996 7.7047309 11.4950036 16.9684802 11.4927136 27.791248 0 10.8799585-3.8309059 20.1574336-11.4927136 27.8324254-7.6618077 7.6749917-16.915337 11.5124876-27.760588 11.5124876-8.6312796 0-16.431747-2.5678624-23.4014021-7.7035871l-26.1413636 24.188234c-1.21699671 1.2147305-2.73881553 1.8220957-4.56545649 1.8220957s-3.3897139-.6485425-4.68921882-1.9456276c-1.29950493-1.297085-1.94925739-2.8572473-1.94925739-4.6804867 0-1.8781426.80216353-3.5343852 2.4064906-4.9687279zm58.34020784-19.878343c7.1369635 0 13.264347-2.5678623 18.3821503-7.7035871 5.1178034-5.1357247 7.676705-11.2928753 7.676705-18.4714518s-2.5589016-13.3082755-7.676705-18.3890972c-5.1178033-5.0808217-11.2451868-7.6212325-18.3821503-7.6212325-7.2469746 0-13.4156121 2.5404108-18.5059127 7.6212325s-7.6354509 11.2105207-7.6354509 18.3890972 2.5589016 13.3357271 7.676705 18.4714518c5.1178033 5.1357248 11.2726895 7.7035871 18.4646586 7.7035871zm-13.3594607-21.8685793h10.206958v10.1879511h7.2194718v-10.1879511h10.206958v-7.206028h-10.206958v-10.187951h-7.2194718v10.187951h-10.206958z"/>
   </g>
 
 </svg>

package/src/assets/icons/voice.svg

@@ -0,0 +1 @@
+<svg height="100" viewBox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" fill-rule="nonzero"><path d="m38.1709541 1.16927276c-19.3063792 2.35749181-30.77194642 17.49896974-28.52613175 35.69759164l.13778264.9919913c1.32289251 8.56612 5.97731071 16.3013047 12.66398421 21.5397034l.4377858.3337777-.8258922.2818912c-14.58776328 5.1516606-22.0584828 17.3847028-22.0584828 36.1118649 0 1.7258899 1.39911016 3.125 3.125 3.125h75c1.7258898 0 3.125-1.3991101 3.125-3.125l-.0091512-1.1274701c-.2805982-17.166151-7.012296-28.729242-19.9504605-34.1742942l-.7528883-.3076168.3448755-.2543479c4.6971412-3.6170055 8.2730972-8.807671 10.7017508-15.494037l.1033476-.3442854c.358088-1.4990563-.4382762-3.0639387-1.9085796-3.6353549l-12.6163943-2.9594748 15.5382502-5.2151308c1.4455508-.7155993 2.1089731-2.4138059 1.5313094-3.9197953l-.4286041-1.1171368c-7.4117992-18.89492742-19.4315183-27.95356137-35.6325014-26.40787614zm29.1727959 27.11931404-14.3051523 7.0850707-.3458164.1975825c-2.0674045 1.3537943-1.8055096 4.5808459.6002149 5.5158026l11.2601288 4.3765442-.0446544.1053935c-2.9998765 6.5205267-7.382434 10.7639749-13.2036694 12.8974938-2.9669838 1.087418-2.6299355 5.3880614.4702287 5.9999873l.9102021.1897523c14.1147108 3.1023497 21.4110943 12.2993394 22.233518 28.3448731h-68.59375l.06180046-.9883469c1.14099717-16.5385163 9.43185134-25.5919672 25.33818054-27.9334892 3.1343099-.4613921 3.6716909-4.7565726.7476649-5.9759387-8.9190789-3.7193999-15.42583-12.285691-16.6248777-22.0019293-1.8277808-14.8111472 7.2466638-26.79489813 22.9989376-28.71929813 12.5036466-1.191884 21.828781 5.37445053 28.2768952 20.37896473z"/><path d="m76.5037126 22.4247766c.9396111-1.4476971 2.8749067-1.8595821 4.3226037-.9199711 6.1870578 4.0156385 9.4236837 9.4774446 9.4236837 16.1212874s-3.2366259 12.105649-9.4236837 16.1212875c-1.447697.939611-3.3829926.527726-4.3226037-.9199711s-.527726-3.3829927.9199711-4.3226038c4.4796088-2.9074384 6.5763163-6.4456323 6.5763163-10.8787126 0-4.4330802-2.0967075-7.9712741-6.5763163-10.8787125-1.4476971-.9396111-1.8595822-2.8749067-.9199711-4.3226038z"/><path d="m86.6767674 19.1839853c1.0725964-1.3521215 3.0382187-1.5787214 4.3903402-.506125 6.0793735 4.82258 9.1828924 11.2235876 9.1828924 18.9482326 0 7.7246451-3.1035189 14.1256527-9.1828924 18.9482327-1.3521215 1.0725964-3.3177438.8459965-4.3903402-.506125-1.0725964-1.3521216-.8459966-3.3177439.506125-4.3903403 4.5872931-3.6389585 6.8171076-8.2379508 6.8171076-14.0517674 0-5.8138165-2.2298145-10.4128088-6.8171076-14.0517673-1.3521216-1.0725964-1.5787214-3.0382187-.506125-4.3903403z"/></g></svg>

package/src/assets/images/icon_experiment.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" fill-rule="evenodd"><path d="m20.5312017 91.3043478h59.513497c1.2006191 0 2.1739131-.973294 2.1739131-2.173913 0-.3822983-.1008154-.7578365-.2922774-1.0887357l-25.7859388-44.5652174c-.3886001-.6716082-1.1057054-1.0851774-1.8816356-1.0851774h-9.4292698c-.7956659 0-1.5277636.4346832-1.9086489 1.1332607l-24.2982884 44.5652174c-.5747365 1.0541176-.1861212 2.3745648.8679964 2.9493012.3192413.1740599.677043.2652642 1.0406524.2652642z"/><path d="m58.2338112 0c3.9857698 0 7.0754101 2.92605669 7.0754101 6.52173913 0 1.94814675-1.1751392 3.49748367-3.1329548 4.78763887-.7622726.5029309-1.2209368 1.3542647-1.2211436 2.2659686l-.0000001 17.2659447c0 1.4033895.3628136 2.7830137 1.0533233 4.0053358l29.9382305 52.9958632c.6905098 1.2223221 1.0533234 2.6019463 1.0533234 4.0053358 0 4.5023213-3.655118 8.1521739-8.1639346 8.1521739h-69.6705953c-1.3692898 0-2.7165851-.3439149-3.9178929-1.0000939-3.95568315-2.1606754-5.40829754-7.1143442-3.24450505-11.0643289l29.09149695-53.106279c.6571256-1.1995773 1.0015367-2.5449317 1.0015367-3.9122489l-.0000001-17.3410875c-.000193-.8514978-.3997534-1.6498707-1.0727831-2.1614374l-.1478555-.104365c-1.8735444-1.2352818-3.0298253-2.70631266-3.1268298-4.53659758l-.00663-.25182269c0-3.59709019 3.085096-6.52173913 7.07541-6.52173913zm0 5.43478261h-17.4163939c-.3341979 0-.655354.0973303-.9634683.29199092l-.1529759.10543374c-.2276736.17021467-.2742532.49276685-.1040386.72044045l.0538074.06119811.0627915.05193913.1617643.10919499c2.2021208 1.45291154 3.5596356 3.87504265 3.6577257 6.49699115l.0057053.3033755.0000002 17.3417027c0 2.2788621-.5740185 4.5211194-1.6692279 6.5204148l-29.0914969 53.106279c-.7212642 1.3166616-.2370594 2.9678845 1.0815017 3.6881097.4004359.2187263.8495344.3333646 1.3059643.3333646h69.6705953c1.5029388 0 2.7213115-1.2166175 2.7213115-2.7173913 0-.4677965-.1209379-.9276713-.3511078-1.3351119l-29.9382305-52.9958633c-1.1508495-2.0372034-1.7555389-4.336577-1.7555389-6.6755596l.0000002-17.2665599c.0005984-2.6392088 1.2800823-5.10829666 3.4230589-6.63488495l.2416409-.16570308c.2977633-.19621921.380081-.59667116.1838618-.89443446-.0526648-.07991901-.1224381-.14713032-.2042705-.1967699-.2372346-.14393755-.4815228-.22451299-.7328507-.24174888z" fill-rule="nonzero"/></g></svg>

package/src/assets/images/translate.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill="#FFF"><path d="m55.6227664 40v-10.9816972c0-1.2005631.4447386-2.2302572 1.3342157-3.0890823.8894772-.858825 1.9338187-1.2888775 3.1330245-1.2901574h7.702184v6.5391015l14.2078094-10.6188404-14.2078094-10.5593242v6.6005376h-7.8252813c-3.5579086 0-6.6082065 1.2300012-9.1508934 3.6900038-2.542687 2.4600026-3.8146923 5.4095738-3.8160159 8.8487137v10.8607449z" transform="matrix(-1 0 0 1 129 0)"/><path d="m26.6227664 90v-10.9816972c0-1.2005631.4447386-2.2302572 1.3342157-3.0890823.8894772-.858825 1.9338187-1.2888775 3.1330245-1.2901574h7.702184v6.5391015l14.2078094-10.6188404-14.2078094-10.5593242v6.6005376h-7.8252813c-3.5579086 0-6.6082065 1.2300012-9.1508934 3.6900038-2.542687 2.4600026-3.8146923 5.4095738-3.8160159 8.8487137v10.8607449z" transform="matrix(1 0 0 -1 0 150)"/><g fill-rule="evenodd"><path d="m36.1711896 0c.7952259 0 1.5825239.11678603 2.361894.35035809.7793701.23357205 1.3385895.44226661 1.6776582.62608367.3390687.18381707.9354881.50929765 1.7892582.97644177v53.04711647h-41.11634795c-.26466873-.2667421-.47079323-.6253926-.61837349-1.0759518-.14758025-.4505591-.23600644-.8423796-.26527856-1.1754617v-52.7485865zm-15.8773502 11c-2.6260005.9445399-3.9390007 1.4168099-3.9390007 1.4168099.8613947 1.0405262 1.656859 2.1393299 2.3863927 3.2964109.2700118.4282536.5298575.8568906.7795373 1.2859111l-14.5207687.0008681v3l6.4238969.0000134c.8804258 3.5657294 2.3239844 6.8097976 4.3306759 9.7322048 1.0398193 1.5143213 2.176787 2.9231182 3.410903 4.2263908-3.5068695 3.0329696-7.8850877 5.246602-13.13321774 6.6415991 1.30042972 2.2665279 1.95064458 3.3997919 1.95064458 3.3997919 5.83922866-1.8768332 10.47451876-4.3674587 13.90587026-7.4718765.7278161.6172884 1.4851619 1.2034299 2.2700924 1.7596083 3.2815631 2.3252177 6.8996284 4.2293071 10.8541961 5.7122682 1.3246257-2.1759469 1.9869386-3.2639204 1.9869386-3.2639204-3.7993227-1.4042832-7.2042979-3.1143224-10.2149257-5.1301175-.8119265-.5436333-1.5953934-1.1239157-2.3504008-1.7408472 3.3115726-3.9242615 5.6922469-8.5457291 7.1440766-13.8651104l4.3889918-.0000045v-3l-12.2148765-.0011479c-.3495756-.7520023-.7243601-1.4925223-1.1243535-2.2215599-.7129337-1.2994097-1.4911578-2.5585071-2.3346725-3.7772922zm7.4469262 9.0006565c-1.3612535 4.5640835-3.3583061 8.3614158-5.9911579 11.3919968-1.0548712-1.0913671-2.041101-2.2689312-2.9598238-3.5334282-1.7358278-2.3891311-2.9991645-5.0087964-3.79001-7.858996z"/><path d="m94.1711896 45c.7952259 0 1.5825239.116786 2.361894.3503581.7793701.233572 1.3385895.4422666 1.6776582.6260837.3390687.183817.9354881.5092976 1.7892582.9764417v53.0471165h-41.116348c-.2646687-.2667421-.4707932-.6253926-.6183734-1.0759518-.1475803-.4505591-.2360065-.8423796-.2652786-1.1754617v-52.7485865zm-11.1769203 11h-7.8424068l-13.1518625 33h7.6962751l2.7277937-7.3487395h13.0057306l2.6303725 7.3487395h7.9398281zm-3.8794044 8.25 4.1351351 12.375h-8.5l4.272973-12.375z"/></g></g></svg>

package/src/css/BookReader.scss

@@ -7,7 +7,6 @@ $brFontFamily: "Helvetica Neue", Arial, Verdana, sans-serif;
 $brColorThemeblue: #0074D1;
 $brColorThemeBlue2: #4990E2;
 $brColorThemeBlue3: rgb(74,144,226);
-$brColorThemeBlueDarker: rgb(36,94,131);
 $brColorDarkGreyBg: #333;
 $brColorMainBg: black;
 
@@ -44,13 +43,11 @@ $mediumBlue: #428bca;
 $lightBlue: #adaedc;
 $controlsText: $white;
 $controlsBG: $gray20;
-$iconStroke: $white;
 $tooltipBG: $gray20;
 $activeButtonBG: $white;
 $controlsBorder: $gray13;
 $trackColor: $gray40;
 $trackFillColor: $gray80;
-$mobileMenuBG: #151515;
 
 $tooltipBG: $gray20;
 $tooltipText: $white;
@@ -70,7 +67,7 @@ $searchResultBG: $darkBlue;
 }
 
 // These are the main root elements in BookReader
-$brScope: ".BookReader, .BRmobileMenu, .BRfloat";
+$brScope: ".BookReader, .BRfloat";
 
 @import 'colorbox';
 @import 'BRmain';
@@ -80,7 +77,6 @@ $brScope: ".BookReader, .BRmobileMenu, .BRfloat";
 @import 'BRnav';
 @import 'BRtoolbar';
 @import 'BRsearch';
-@import 'MobileNav';
 @import 'BRvendor';
 @import 'icons';
 @import 'controls';

package/src/css/_BRBookmarks.scss

@@ -6,7 +6,7 @@
   z-index: 2;
   opacity: 0;
 }
-.BRtwopageview .BRpagecontainer[data-side="L"] .bookmark-button {
+.BRmode2up .BRpagecontainer[data-side="L"] .bookmark-button {
   right: auto;
   left: 0;
 }

package/src/css/_BRComponent.scss

@@ -2,7 +2,7 @@
  * Hide modal-manager that loads item-navigator-modal 
  * loading bookmarks related alert messages 
  */
-#item-navigator-modal {
+modal-manager[mode="closed"] {
   display: none
 }
 

package/src/css/_BRicon.scss

@@ -38,8 +38,14 @@ i.BRicon { display: inline-block; }
 .BRicon.info { @include sprite-offet(1); }
 .BRicon.share { @include sprite-offet(3); }
 // We can only transition these because they are adjacent
-.BRicon.read { @include sprite-offet(5); transition-property: background-color, border, background-position; }
-.BRicon.unread { @include sprite-offet(7); transition-property: background-color, border, background-position; }
+.BRicon.read {
+  transition-property: background-color, border, background-position;
+  @include sprite-offet(5); 
+}
+.BRicon.unread {
+  transition-property: background-color, border, background-position;
+  @include sprite-offet(7); 
+}
 .BRicon.fit { @include sprite-offet(9); }
 .BRicon.download { @include sprite-offet(38); }
 .BRicon.return { @include sprite-offet(26); }

package/src/css/_BRmain.scss

@@ -20,9 +20,6 @@
     font-weight: 700;
     color: #dedede;
   }
-  a {
-    outline: none;
-  }
   button {
     cursor: pointer;
   }
@@ -43,6 +40,8 @@
   position: relative;
   overflow: hidden;
   background-color: $brColorMainBg;
+
+  contain: strict;
 }
 
 .BRcontainer {
@@ -247,3 +246,17 @@ body.BRfullscreenActive {
   .BRpagediv1up { background-color: white; }
   .BRpagedivthumb { background-color: white; }  
 }
+
+.BRfullscreenAnimation .br-mode-2up__book {
+  transition: transform .2s ease-in-out;
+}
+
+.fullscreenActive.BRmodeThumb .BRcontainer,
+.fullscreenActive.BRmode1up .BRcontainer {
+  animation: flash 0.3s ease-in-out;
+}
+
+@keyframes flash {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}

package/src/css/_BRnav.scss

@@ -1,6 +1,7 @@
 /**
  * BRnav is the bottom control bar (eg footer)
  */
+@use "sass:math";
 
 @mixin pseudoElementLayer {
   content: "";
@@ -34,14 +35,6 @@
       border: 3px solid rgba(255,255,255,0.3);
     }
   }
-
-  .BRnavCntl {
-    z-index: $brZindexBase + 5;
-    background-color: $brColorDarkBorder;
-  }
-  .BRnavCntlBtm:hover {
-    background-color: $brColorThemeblue;
-  }
 }
 
 @mixin brNavLight {
@@ -65,19 +58,11 @@
       border: 3px solid rgba($brColorThemeblue,0.3);
     }
   }
-
-  .BRnavCntl {
-    background-color: $brColorLightBorder;
-  }
-
-  .BRnavCntlBtm:hover {
-    background-color: $brColorThemeblue;
-  }
 }
 
 @keyframes fadeUp {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
+  from { opacity: 0; translate: 0 10px; }
+  to { opacity: 1; translate: 0 0; }
 }
 
 .BRfooter {
@@ -102,12 +87,12 @@
     border: none;
     border-radius: 2px;
     background: transparent;
-    outline: none;
-    &:hover .tooltip {
-      display: block;
-    }
-    &.hide {
-      display: none;
+
+    @media (hover: hover) {
+      /* styles to apply on devices that support hover */
+      &:hover .BRtooltip {
+        display: block;
+      }
     }
   }
 }
@@ -117,7 +102,7 @@
   display: flex;
   justify-content: center;
   margin: 5px;
-  padding: 0 ($brNavHeightMobile / 4);
+  padding: 0 math.div($brNavHeightMobile, 4);
   border-radius: 4px;
   align-self: center;
   height: $toolbarHeight;
@@ -126,18 +111,6 @@
   // Default
   @include brNavDark;
 
-  &.BRnavEmbed {
-    @include brNavLight;
-  }
-
-  /* Full mobile styles */
-  @media (max-width: $brBreakPointMobile) {
-    .BRbodyMobileNavEnabled &,
-    .BRbodyMobileNavEnabledFullscreen.BRfullscreenActive & {
-      @include brNavLight;
-    }
-  }
-
   &--controls {
     display: flex;
   }
@@ -222,25 +195,6 @@
   flex-direction: row;
   border-top: 1px solid $controlsBorder;
 
-  &.BRnavEmbed {
-    padding-top: 0;
-    height: auto;
-    align-items: center;
-
-    .BRembedreturn {
-      flex: 1 auto;
-      overflow-x: hidden;
-    }
-    .logo {
-      display: inline-block;
-      width: 25px;
-      height: 25px;
-      margin: 0 10px;
-      background: transparent url(images/icon_home.svg) no-repeat center center;
-      background-size: contain;
-    }
-  }
-
   /* Theming */
 
   // Default
@@ -263,7 +217,7 @@
 .BRpager.ui-slider  {
   position: relative;
   height: 8px;
-  top: ($brNavHeightDesktop / 2) - 4px;
+  top: math.div($brNavHeightDesktop, 2) - 4px;
   box-sizing: content-box;
   border-radius: 10px;
   cursor: pointer;
@@ -349,23 +303,15 @@
   font-size: .8em;
   vertical-align: top;
 }
-.BRup {
-  background-image: url("images/nav_control-up.png");
-  background-repeat: no-repeat;
-}
-
 
 /* Mobile Only */
 @media (max-width: $brBreakPointMobile) {
   /* hide navline chapters and search in mobile */
   .BRnavline .BRchapter { display: none; }
 
-  .BRnavCntlBtm {
-    bottom: $brNavHeightMobile;
-  }
   .BRpager.ui-slider {
     height: 10px;
-    top: ($brNavHeightMobile / 2) - 5px;
+    top: math.div($brNavHeightMobile, 2) - 5px;
   }
 }
 

package/src/css/_BRpages.scss

@@ -10,17 +10,41 @@
   }
 }
 
-.BRmodeThumb .BRpagecontainer, .BRmode2Up .BRpagecontainer {
+.BRmodeThumb .BRpagecontainer, .BRmode2up .BRpagecontainer {
   cursor: pointer;
 }
 .BRpagecontainer.BRemptypage {
   cursor: unset;
 }
 
+.br-mode-1up__root {
+  display: block;
+  overflow: auto;
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  // This is a performance optimization that basically tells the browser "the size
+  // of this element doesn't depend on the size of its children".
+  contain: strict;
+
+  .br-mode-1up__world {
+    position: absolute;
+    transform-origin: 0 0;
+  }
+  
+  .br-mode-1up__visible-world {
+    position: absolute;
+    transform-origin: 0 0;
+  }
+}
+
 .BRpagecontainer {
   position: relative;
   overflow: hidden;
   background: $brColorPlaceholderBg;
+  overflow: hidden;
+  overflow: clip;
   img {
     position: absolute;
     background: transparent;
@@ -36,9 +60,28 @@
     left: 0;
     z-index: 1;
   }
-  &.BRpageloading img {
+  &.BRpageloading {
     // Don't show the alt text while loading
-    color: transparent;
+    img {
+      color: transparent;
+    }
+
+    // src can be set async, so hide the image if it's not set
+    img:not([src]) {
+      display: none;
+    }
+
+    &::after {
+      display: block;
+      content: "";
+      width: 20px;
+      height: 20px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      background: url("images/loading.gif") center/20px no-repeat;
+    }
   }
   &.BRemptypage {
     background: transparent;
@@ -48,57 +91,134 @@
   }
 }
 
-.BRbookcover {
-  position: absolute;
-  background-image: none;
-  box-shadow: 1px 0 10px #111;
+// Hides page layers during page flip animation
+.BRpageFlipping .BRtextLayer {
+  display: none;
 }
-.BRPreview .BRpageimage {
-  background-color: #eee;
-  -webkit-filter: grayscale(100%);
-  filter: grayscale(100%);
+
+.br-mode-2up__root {
+  display: block;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
 }
 
-.BRleafEdgeR {
-  border-style: solid solid solid none;
-  border-color: rgb(51, 51, 34);
-  border-width: 1px 1px 1px 0px;
+.br-mode-2up__book {
+  position: relative;
+  transform-origin: 0 0;
+  width: 0px;
+  height: 0px;
+}
 
-  background: transparent url(images/back_pages.png) repeat scroll 0% 0%;
-  position: absolute;
-  cursor: pointer;
+.BRmode2up {
+  // Used while loading stuff
+  transition: opacity 0.2s;
 }
 
-.BRleafEdgeL {
-  /* border-style: solid none solid solid;
-  border-color: rgb(51, 51, 34);
-  border-width: 1px 0px 1px 1px; */
-  background: transparent url(images/back_pages.png) repeat scroll 0% 0%; /* XXXmang replace file */
-  position: absolute;
-  cursor: pointer;
+.BRmode2up .BRpagecontainer {
+  backface-visibility: hidden;
+  &:not(.BRpage-visible) {
+    display: none;
+  }
 }
 
-.BRleafEdgeTmp {
-  /* border-style: solid none solid solid;
-  border-color: rgb(51, 51, 34);
-  border-width: 1px 0px 1px 1px; */
-  background: transparent url(images/back_pages.png) repeat scroll 0% 0%; /* XXXmang replace file */
+.br-mode-2up__leafs {
   position: absolute;
+  cursor: pointer;
+  top: 0;
+  transform-style: preserve-3d;
+  
+  &[side=left] {
+    border-radius: 4px 0 0 4px;
+    .br-leaf-edges__label {
+      padding-right: 10px;
+      border-radius: 4px 0 0 4px;
+    }
+  }
+  &[side=right] {
+    border-radius: 0 4px 4px 0;
+    .br-leaf-edges__label {
+      padding-left: 20px;
+      border-radius: 0 4px 4px 0;
+    }
+  }
+  &.br-mode-2up__leafs--flipping {
+    z-index: 200000;
+    transition: transform 5s;
+    transition-timing-function: ease-in-out;
+    border-radius: 0;
+
+    // Have a copy of the background at a perpendicular angle,
+    // so that during the rotation, it's always visible.
+    &:before {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      transform: rotateY(-90deg);
+    }
+  }
+
+  &, &.br-mode-2up__leafs--flipping::before {
+    background: transparent url(images/back_pages.png) repeat scroll 0% 0%;
+  }
+
+  .br-leaf-edges__bar {
+    display: none;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    min-width: 1px;
+    background-color: #9A9B9D;
+    opacity: 0.85;
+    transform: translateX(-50%);
+  }
+  
+  .br-leaf-edges__label {
+    display: none;
+    pointer-events: none;
+    z-index: 1000;
+    position: absolute;
+    padding: 6px;
+    color: white;
+    background-color: #9A9B9D;
+    opacity: 0.85;
+    white-space: nowrap;
+    transform: translateY(-10px);
+  }
 }
 
-.BRgutter {
-  /* border: 1px solid rgb(68, 25, 17); */
-  position: absolute;
-  background: transparent url(images/booksplit.png) repeat scroll 0% 0%;
+.br-mode-2up--flipping-left {
+  .BRpage-entering[data-side=R] {
+    z-index: 10;
+    transform-origin: left;
+    transform: rotateY(0deg);
+  }
+
+  .BRpage-exiting[data-side=L] {
+    z-index: 10;
+    transform-origin: right;
+  }
+
+  .BRpage-exiting[data-side=R] {
+    z-index: 9;
+  }
 }
 
-.BRtwoPagePopUp {
-  padding: 6px;
-  position: absolute;
-  font-size: $brFontSizeSmaller;
-  color: white;
-  background-color: #9A9B9D;
-  opacity: 0.85;
-  border-radius: 4px;
-  white-space: nowrap;
+.br-mode-2up--flipping-right {
+  .BRpage-entering[data-side=L] {
+    z-index: 10;
+    transform-origin: right;
+  }
+
+  .BRpage-exiting[data-side=R] {
+    z-index: 10;
+    transform-origin: left;
+  }
+
+  .BRpage-exiting[data-side=L] {
+    z-index: 9;
+  }
 }