commit

README.md

@@ -1,54 +1,68 @@
-# epubreader-js
+# EpubReader
 
-![UI](demo-ui.png)
+<img src="./demo-ui.png"/>
 
 ## About the Reader
 
-The **epubreader-js** application is based on the [epub.js](https://github.com/futurepress/epub.js) library and is a fork of the [epubjs-reader](https://github.com/futurepress/epubjs-reader) repository.
+The <strong>epubreader</strong> application is based on the <a style="text-decoration: underline;"><strong>epub.js</strong></a> library and is a fork of the <a style="text-decoration: underline;"><strong>epub-reader</strong></a> repository.
 
 ## Getting Started
 
-Open up [epubreader-js](https://intity.github.io/epubreader-js/) in a browser.
+Open up <a style="text-decoration: underline;"><strong>epubreader</strong></a> in a browser.
 
-You can change the ePub it opens by passing a link to `bookPath` in the url:
+You can change the ePub it opens by passing a link to <code>bookPath</code> in the url:
 
-`?bookPath=https://s3.amazonaws.com/epubjs/books/alice.epub`
+<code>?bookPath=https://s3.amazonaws.com/epubjs/books/alice.epub</code>
+
+or to open through path `public/epub-book` folder
+
+<code>?bookPath=epub-book/[filename].epub</code>
 
 ## Running Locally
 
-Install [node.js](https://nodejs.org/en/)
+Install <a href="https://nodejs.org/en/" style="text-decoration: underline;"><strong>node.js</strong></a>
 
-Then install the project dependences with npm
+Then install the project dependencies with <code>npm</code>
 
-```javascript
+```sh
 npm install
 ```
 
+Next you need to clone the repository into local with below command
+
+```sh
+git clone <repo_url>
+```
+
+After that, you need to move to repo directory.
 You can run the reader locally with the command
 
-```javascript
-npm run serve
+```sh
+cd <repo_directory>
+npm start
 ```
 
-Builds are concatenated and minified using [webpack](https://github.com/webpack/webpack)
+The application automatically starts at `localhost:8088`.
+
+Builds are concated and minified using <a href="https://github.com/webpack/webpack" style="text-decoration: underline;">webpack</a>
 
 To generate a new build run
 
-```javascript
+```sh
 npm run build
 ```
 
-or rebuilding all *.js files
+or rebuilding all \*.js files
 
-```javascript
+```sh
 npm run prepare
 ```
 
 ## Pre-configuration
 
-The **epubreader-js** application settings is a JavaScript object that you pass as an argument to the `Reader` constructor. You can make preliminary settings in the file [index.html](dist/index.html). For example, this is what the default `Reader` initialization looks like:
+The <strong>epubreader</strong> application settings is a JavaScript object that you pass an argument to the `Reader` constructor. You can make prelimitary settings in the file <a style="text-decoration: underline;">index.html</a>. For example, this is what the default `Reader` initialization looks like:
 
-```html
+```js
 <script type="module">
     import { Reader } from "./js/epubreader.min.js"
     const url = new URL(window.location)
@@ -59,7 +73,7 @@ The **epubreader-js** application settings is a JavaScript object that you pass
 
 Let's say we want to disable the `openbook` feature, which is designed to open an epub file on a personal computer. This can be useful for integrating a public library into your site. Let's do this:
 
-```html
+```js
 <script type="module">
     import { Reader } from "./js/epubreader.min.js"
     const url = "{{bookPath}}"
@@ -70,14 +84,12 @@ Let's say we want to disable the `openbook` feature, which is designed to open a
 > Note that the `{{bookPath}}` replacement token is used to define the `url` string variable. This simple solution will allow you to set up a route to pass the target URL.
 
 ## Features
-
-The **epubreader-js** application supports the following features:
-
-- Initial support for mobile devices
-- Saving settings in the browser’s local storage
-- Opening a book file from the device’s file system
-- Bookmarks
-- Annotations
-- Search by sections of the book
-- Output epub metadata
-- [Keybindings](docs/keybindings.md)
+The <strong>epubreader</strong> application supports the following features:
+* Initial support for mobile devices
+* Saving settings in the browser’s local storage
+* Opening a book file from the device’s file system
+* Bookmarks
+* Annotations
+* Search by sections of the book
+* Output epub metadata
+* <a style="text-decoration: underline;">Keybindings</a>

dist/css/bookmark.css

@@ -0,0 +1,86 @@
+#toolbar-bookmarks-list {
+    margin: 0;
+    list-style: none;
+}
+
+#toolbar-bookmarks-list {
+    position: absolute;
+    top: 46px;
+    left: 10px;
+    background: #fff;
+    border: 1px solid #ebebeb;
+    border-radius: 10px;
+    box-shadow: 0px 4px 12px 0px #0000000D;
+    box-shadow: 3px -3px 8.1px 0px #0000000D;
+    padding: 20px 20px 0 20px;
+    max-width: 300px;
+    width: 300px;
+    overflow-y: auto;
+    transform: translateY(-10px);
+}
+
+#toolbar-bookmarks-list {
+    max-height: 0;
+    opacity: 0;
+}
+
+#toolbar-bookmarks-list {
+    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+}
+
+#toolbar-bookmarks-list.active {
+    max-height: 500px;
+    opacity: 1;
+    transform: translateY(0);
+}
+
+#toolbar-bookmarks-list::-webkit-scrollbar {
+    width: 5px;
+    display: none;
+}
+
+#toolbar-bookmarks-list::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background-color: #ccc;
+}
+
+#toolbar-bookmarks-list::-webkit-scrollbar-thumb:hover {
+    background-color: #999;
+}
+
+#toolbar-bookmarks-list h3 {
+    font-family: 'Be Vietnam Pro', sans-serif;
+    font-size: 18px;
+    margin-left: 4px;
+    border-bottom: 1px solid #E6E6E6;
+    padding-bottom: 16px;
+    margin-top: 0;
+    margin-bottom: 16px;
+}
+
+#toolbar-bookmarks-list li {
+    line-height: 25px;
+    display: inline-grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
+#toolbar-bookmarks-list li a {
+    padding: 5px;
+    text-decoration: none;
+    color: #1A1A1A;
+    font-weight: 700;
+    font-family: Be Vietnam Pro, san-serif;
+    font-size: 14px;
+}
+
+#toolbar-bookmarks-list li a.active,
+#toolbar-bookmarks-list li a:hover {
+    color: #966412;
+}
+
+#toolbar-bookmarks-list li span {
+    cursor: pointer;
+}

dist/css/common.css

@@ -1,4 +1,5 @@
-#sidebar, #notedlg {
+#sidebar,
+#notedlg {
 	display: grid;
 	overflow: hidden;
 	position: absolute;
@@ -29,6 +30,7 @@
 	background-position: center;
 }
 
+[id^="btn-"].box input.active,
 [id^="btn-"].box input:hover {
 	opacity: 0.7;
 	background-color: #F2F3F4;
@@ -51,6 +53,47 @@
 	background-image: url("../img/menu.svg");
 }
 
+/* CSS for font-size in toolbar menu-1 */
+#btn-fontsize {
+	display: flex;
+	width: auto !important;
+	align-items: center;
+	margin-left: 10px;
+}
+
+.font-size-px {
+	font-weight: 600;
+	color: #6e6d6d;
+	display: none;
+}
+
+.btn-font-decrease {
+	background-image: url("../img/text-down.svg");
+	opacity: 0.8 !important;
+}
+
+.btn-font-increase {
+	background-image: url("../img/text-up.svg");
+	opacity: 0.8 !important;
+}
+
+#btn-fontsize .input-font-size {
+	cursor: text;
+	outline: 1px solid #ccc;
+	border: 1px solid #ccc;
+	margin: 0;
+	width: 30px;
+	padding: 0 10px;
+	font-size: 1rem;
+	font-weight: bold;
+	border-radius: 10px;
+}
+
+/* Hide the input that show font-size text */
+#btn-fontsize .input-font-size {
+	display: none;
+}
+
 #btn-p.box input {
 	background-image: url("../img/prev.svg");
 }
@@ -65,14 +108,43 @@
 
 #btn-b.box input {
 	background-image: url("../img/bookmark.svg");
+	opacity: 0.8;
 }
 
 #btn-b.box.bookmarked input {
 	background-image: url("../img/bookmarked.svg");
 }
 
 #btn-d.box input {
-	background-image: url("../img/bookmarks.svg");
+	background-image: url("../img/bookmarks03.svg");
+	opacity: 0.8;
+}
+
+#btn-close.box input {
+	background-image: url("../img/close.svg");
+	opacity: 0.8;
+}
+
+#btn-close::before {
+	content: "";
+	position: absolute;
+	border: 1px solid white;
+	height: 35px;
+	border-radius: 2px;
+	/* transform: translate(0px, 0px); */
+}
+
+/*----------------- Add style for button change background color ----------------*/
+/* Hide the background-changing button */
+#btn-bg {
+	display: none;
+}
+
+#btn-bg .color-picker {
+	outline: none;
+	border: 2px solid #000;
+	border-radius: 5px;
+	padding: 0px;
 }
 
 #btn-f.box input {
@@ -84,15 +156,18 @@
 }
 
 #btn-t.box input {
-	background-image: url("../img/toc.svg");
+	background-image: url("../img/list-view-circle.svg");
+	opacity: 0.8;
 }
 
 #btn-a.box input {
-	background-image: url("../img/annotations.svg");
+	background-image: url("../img/highlight-note.svg");
+	opacity: 0.8;
 }
 
 #btn-s.box input {
-	background-image: url("../img/search.svg");
+	background-image: url("../img/search-02.svg");
+	opacity: 0.8;
 }
 
 #btn-c.box input {
@@ -103,11 +178,14 @@
 	background-image: url("../img/info.svg");
 }
 
+#btn-ar.box input {
+	background-image: url("../img/apps-rectangle.svg");
+}
+
 /**
  * iPhone 5 : 320 x 568
  */
-@media
-only screen and (width: 320px) and (orientation: portrait),
+@media only screen and (width: 320px) and (orientation: portrait),
 only screen and (height: 320px) and (orientation: landscape) {
 	.box {
 		min-height: 30px;