@internetarchive/bookreader 5.0.0-18

package/src/assets/images/icon_two_pages.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="58px" height="43px" viewBox="0 0 58 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="mobile2upTitleID mobile2upDescID">
+  <title id="mobile2upTitleID">Two pages icon</title>
+  <desc id="mobile2upDescID">An illustration of two rectangles in a row representing an open book</desc>
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(1, 1)">
+    <rect stroke="#fff" stroke-width="2" x="0" y="0" width="56" height="40" rx="1"></rect>
+    <rect fill="#fff" x="27" y="0" width="2" height="40"></rect>
+  </g>
+</svg>

package/src/assets/images/marker_chap-off.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="25px" viewBox="0 0 20 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
+    <title>pin icon copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="pin-icon-copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10,0.500000134 C14.9705627,0.500000134 18.9999999,4.5294373 19,9.5 C19,15.5 10,24.5 10,24.5 C10,24.5 1,15.5 1,9.5 C1.00000007,4.5294373 5.0294373,0.500000134 10,0.500000134 Z" id="pin" stroke="#898989" fill="#FFFFFF" fill-rule="nonzero"></path>
+        <path d="M10,13.25 C12.0710678,13.25 13.75,11.5710678 13.75,9.5 C13.75,7.42893219 12.0710678,5.75 10,5.75 C7.92893219,5.75 6.25,7.42893219 6.25,9.5 C6.25,11.5710678 7.92893219,13.25 10,13.25 Z" id="Path" fill="#898989"></path>
+    </g>
+</svg>

package/src/assets/images/marker_chap-on.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="25px" viewBox="0 0 20 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
+    <title>pin icon copy</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="pin-icon-copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10,0.500000134 C14.9705627,0.500000134 18.9999999,4.5294373 19,9.5 C19,15.5 10,24.5 10,24.5 C10,24.5 1,15.5 1,9.5 C1.00000007,4.5294373 5.0294373,0.500000134 10,0.500000134 Z" id="pin" stroke="#898989" fill="#B8B8B8" fill-rule="nonzero"></path>
+        <path d="M10,13.25 C12.0710678,13.25 13.75,11.5710678 13.75,9.5 C13.75,7.42893219 12.0710678,5.75 10,5.75 C7.92893219,5.75 6.25,7.42893219 6.25,9.5 C6.25,11.5710678 7.92893219,13.25 10,13.25 Z" id="Path" fill="#FFFFFF"></path>
+    </g>
+</svg>

package/src/assets/images/marker_srch-on.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="25px" viewBox="0 0 20 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
+    <title>pin icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="pin-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10,0.500000134 C14.9705627,0.500000134 18.9999999,4.5294373 19,9.5 C19,15.5 10,24.5 10,24.5 C10,24.5 1,15.5 1,9.5 C1.00000007,4.5294373 5.0294373,0.500000134 10,0.500000134 Z" id="pin" stroke="#FFFFFF" fill="#0000FF" fill-rule="nonzero"></path>
+        <path d="M10,13.25 C12.0710678,13.25 13.75,11.5710678 13.75,9.5 C13.75,7.42893219 12.0710678,5.75 10,5.75 C7.92893219,5.75 6.25,7.42893219 6.25,9.5 C6.25,11.5710678 7.92893219,13.25 10,13.25 Z" id="Path" fill="#FFFFFF"></path>
+    </g>
+</svg>

package/src/css/BookReader.scss

@@ -0,0 +1,89 @@
+/* Variables */
+$brFontSizeBase: 14px;
+$brFontSizeLarger: 16px;
+$brFontSizeSmaller: 12px;
+$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;
+
+$brColorBirdBook: #FEFDEB;
+$brColorPlaceholderBg: $brColorBirdBook;
+
+// "Controls" are the navbar and toolbar
+
+$brColorControlsLightBg: white;
+$brColorLightBorder: #979797;
+$brColorDarkBorder: #4D4D4D;
+
+$brNavHeightDesktop: 34px; //40px; //34px;
+$brNavHeightMobile: $brNavHeightDesktop;
+
+$brBreakPointMobile: 800px;
+$brBreakPointMid: 1050px;
+
+$brIconSpriteWidth: 40px;
+$brIconWidthDesktop: 34px;
+$brIconWidthMobile: 40px; //34px;
+
+$brZindexBase: 1;
+$brZindexPopup: 3000;
+$brZindexFullscreen: 2000;
+
+$gray13: #222;
+$gray20: #333;
+$gray40: #666;
+$gray80: #ccc;
+$white: #fff;
+$darkBlue: #272958;
+$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;
+$searchMarkerBG: $mediumBlue;
+$searchResultText: $lightBlue;
+$searchResultBG: $darkBlue;
+
+@mixin brDarkControls {
+    background-color: $brColorDarkGreyBg;
+    color: white;
+    a { color: white; }
+}
+@mixin brLightControls {
+    background-color: $brColorControlsLightBg;
+    color: black;
+    a { color: black; }
+}
+
+// These are the main root elements in BookReader
+$brScope: ".BookReader, .BRmobileMenu, .BRfloat";
+
+@import 'colorbox';
+@import 'BRmain';
+@import 'BRpages';
+@import 'BRicon';
+@import 'BRfloat';
+@import 'BRnav';
+@import 'BRtoolbar';
+@import 'BRsearch';
+@import 'MobileNav';
+@import 'BRvendor';
+@import 'icons';
+@import 'controls';
+@import 'TextSelection';
+@import 'BRComponent';
+@import 'BRBookmarks';

package/src/css/_BRBookmarks.scss

@@ -0,0 +1,29 @@
+/* BOOKMARKS - on page */
+.BRpagecontainer .bookmark-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+  opacity: 0;
+}
+.BRtwopageview .BRpagecontainer[data-side="L"] .bookmark-button {
+  right: auto;
+  left: 0;
+}
+
+.BRpagecontainer .bookmark-button.filled {
+  opacity: 1;
+}
+
+.BRpagecontainer .bookmark-button.default {
+  --iconFillColor: var(--defaultBookmarkColor, #eb3223);
+}
+.BRpagecontainer .bookmark-button.blue {
+  --iconFillColor: var(--blueBookmarkColor, #0023f5);
+}
+.BRpagecontainer .bookmark-button.red {
+  --iconFillColor: var(--redBookmarkColor,  #eb3223);
+}
+.BRpagecontainer .bookmark-button.green {
+  --iconFillColor: var(--greenBookmarkColor, #75ef4c);
+}

package/src/css/_BRComponent.scss

@@ -0,0 +1,13 @@
+/**
+ * Hide modal-manager that loads item-navigator-modal 
+ * loading bookmarks related alert messages 
+ */
+#item-navigator-modal {
+  display: none
+}
+
+.BRpagecontainer {
+  --iconWidth: 16px;
+  --iconHeight: 24px;
+  --iconFillColor: #000;
+}

package/src/css/_BRfloat.scss

@@ -0,0 +1,197 @@
+/**
+ * BRfloat is the modal popup used in bookreader
+ */
+.BRfloat {
+  color: rgb(52,52,52);;
+}
+.BRfloat a.title {
+  text-decoration: none;
+}
+
+.BRfloat .floatShut {
+  position:absolute;
+  top: 4px;
+  right: 8px;
+  display:block;
+  width:32px;
+  height:32px;
+  border: none;
+  background-color: transparent;
+  background-image:url("images/icon_close-pop.png");
+  background-position:0 0;
+  background-repeat:no-repeat;
+}
+.BRfloat .floatShut:hover {
+  background-position:0 -32px;
+}
+.BRfloat fieldset {
+  padding: 10px 15px;
+  border: none;
+}
+.BRfloat fieldset.sub {
+  margin-top: 0px;
+  padding: 10px;
+}
+.BRfloat fieldset.center {
+  text-align: center;
+  padding: 10px 20px 30px;
+}
+.BRfloat label {
+  display: block;
+  font-weight: 700;
+  font-size: 1em;
+  margin: 5px 0;
+}
+.BRfloat label.sub {
+  display: inline;
+  padding: 10px 30px 10px 0;
+  font-weight: normal;
+  font-size: 1em;
+  color: #666;
+}
+.BRfloat input[type=text],
+.BRfloat textarea {
+  display: block;
+  margin-top: 10px;
+  width: 100%;
+  padding: 3px;
+  border: 2px inset;
+  font-family: "Lucida Grande", "Verdana", "Arial", sans-serif;
+  font-size: .8em;
+  line-height: 1.25;
+  font-weight: normal;
+}
+.BRfloat textarea {
+  height: 55px;
+}
+
+.BRfloat p {
+  margin: 15px 15px 0;
+}
+.BRfloat p.meta {
+  font-size: 1.1em;
+  color: #748d36;
+  margin: 10px 0 0;
+}
+
+.BRfloatCover {
+  float: left;
+  padding: 0 20px 30px 0;
+}
+
+.BRfloatHead {
+  font-size: 1.2em;
+}
+.BRfloatHead h2 {
+  display: inline;
+  font-size: 1.3em;
+}
+.BRfloatMeta p {
+  margin: 0;
+  padding: 0;
+  font-size: 1.1em;
+  line-height: 1.5em;
+}
+.BRfloatMeta p.moreInfo {
+  line-height: 15px;
+  margin-top: 30px;
+}
+.BRfloatMeta p.moreInfo span {
+  background: url("images/icon_OL-logo-xs.png") no-repeat;
+  display: block;
+  float: left;
+  width: 26px;
+  height: 15px;
+}
+.BRfloatMeta h3 {
+  font-size: 1.1em;
+  font-weight: 700;
+  line-height: 1.5em;
+  margin-top: 30px;
+  color: #333;
+}
+.BRfloatMeta ul.links {
+  float: left;
+  clear: right;
+}
+.BRfloatMeta ul.links li {
+  list-style-type: none;
+  display: block;
+  float: left;
+  font-size: 1.1em;
+  line-height: 1.5em;
+}
+.BRfloatMeta ul.links li span {
+  padding: 0 10px;
+}
+.BRfloatFoot a.problem, a.problem-icon {
+  background: url("images/icon_alert-xs.png") no-repeat;
+  padding-left: 20px;
+}
+
+.BRfloatHead,
+.BRfloatBody {
+  width: 100%;
+  box-sizing: border-box;
+  text-align: center;
+}
+
+
+/* Desktop Only */
+@media (min-width: ($brBreakPointMobile + 1)) {
+  .BRfloat .message,
+  .BRfloatBody {
+      padding: 10px 15px 10px 15px;
+      font-size: $brFontSizeLarger;
+      line-height: normal;
+      margin-top: 0;
+      margin-bottom: 0px;
+  }
+  .BRfloatHead {
+      box-sizing: border-box;
+      line-height: normal;
+      padding: 10px;
+      font-size: $brFontSizeLarger;
+      font-weight: 700;
+      text-align: center;
+      border-bottom:1px solid rgb(216,216,216);
+  }
+  .BRfloatFoot {
+    padding: 10px;
+    margin-bottom: 10px;
+  }
+}
+
+
+/* Mobile Only (with some responsiveness) */
+@media (max-width: $brBreakPointMobile) {
+  .BRfloatBody, { padding: 10px 10px; }
+  .BRfloat .message,
+  .BRfloatBody,
+  .BRfloatHead, {
+      box-sizing: border-box;
+      line-height: normal;
+      border-bottom:1px solid rgb(216,216,216);
+      padding: 10px;
+      min-height: initial;
+      font-size: $brFontSizeBase;
+      font-weight: 700;
+      text-align: center;
+  }
+  .BRfloatFoot {
+    padding: 10px 10px 0 10px;
+    border-top: 1px solid #ccc;
+  }
+  .BRfloatFoot .BRaction { margin-bottom: 10px; }
+}
+
+@media (min-width: ($brBreakPointMobile + 1)) {
+  .BRfloat { max-width: initial; width:455px; }
+  .BRfloat.wide { max-width: initial; width:555px; }
+}
+@media (max-width: $brBreakPointMobile) and (min-width: 341px) {
+  .BRfloat { max-width: initial; width:340px; }
+}
+@media (max-width: 340px) {
+  .BRfloat { max-width: 95%; width:95%; }
+}

package/src/css/_BRicon.scss

@@ -0,0 +1,48 @@
+@mixin sprite-offet($index) {
+  width: $brIconWidthDesktop;
+  height: $brIconWidthDesktop;
+  background-position: (-1 * $index) * $brIconSpriteWidth - (($brIconSpriteWidth - $brIconWidthDesktop) * .5) center;
+
+  @media (max-width: $brBreakPointMobile) {
+    width: $brIconWidthMobile;
+    height: $brIconWidthMobile;
+    background-position: (-1 * $index) * $brIconSpriteWidth - (($brIconSpriteWidth - $brIconWidthMobile) * .5) center;
+  }
+}
+
+.BRToolbarButton, .BRicon {
+  position: relative;
+  transition-duration: .2s;
+  transition-property: background-color, border;
+  &:hover {
+    background-color: rgba(50,50,50,.2);
+  }
+  &:active {
+    background-color: rgba(255,255,255,.2);
+    background-color: rgba(50,50,50,.4);
+  }
+}
+
+.BRicon {
+  padding: 0;
+  margin: 0;
+  vertical-align: middle;
+  border: none;
+  cursor: pointer;
+  background-color: transparent;
+  background-image: url(images/BRicons.svg);
+  background-repeat: no-repeat;
+}
+i.BRicon { display: inline-block; }
+.BRicon.logo { @include sprite-offet(0); }
+.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.fit { @include sprite-offet(9); }
+.BRicon.download { @include sprite-offet(38); }
+.BRicon.return { @include sprite-offet(26); }
+.BRicon.fb { @include sprite-offet(40); }
+.BRicon.twitter { @include sprite-offet(41); }
+.BRicon.email { @include sprite-offet(42); }