From ac15425092ad8a505e172d7b82da792c5fb7458a Mon Sep 17 00:00:00 2001 From: Fred Chasen Date: Mon, 30 Dec 2013 13:36:07 -0800 Subject: [PATCH] Demo UI updates --- demo/css/main.css | 134 +++++++++++++++++++++++++++------- demo/dev.html | 41 +++++++---- hooks/extensions/highlight.js | 2 +- src/epubcfi.js | 16 ++-- 4 files changed, 145 insertions(+), 48 deletions(-) diff --git a/demo/css/main.css b/demo/css/main.css index 8c44796..53e5cfe 100755 --- a/demo/css/main.css +++ b/demo/css/main.css @@ -1,3 +1,14 @@ +@font-face { + font-family: 'fontello'; + src: url('../font/fontello.eot?60518104'); + src: url('../font/fontello.eot?60518104#iefix') format('embedded-opentype'), + url('../font/fontello.woff?60518104') format('woff'), + url('../font/fontello.ttf?60518104') format('truetype'), + url('../font/fontello.svg?60518104#fontello') format('svg'); + font-weight: normal; + font-style: normal; +} + body { background: #4e4e4e; overflow: hidden; @@ -26,16 +37,16 @@ body { #titlebar { - height: 8%; min-height: 20px; - padding: 10px 0 10px 0; - margin: 0 50px 0 50px; - text-align: center; + padding: 10px; + /* margin: 0 50px 0 50px; */ + position: relative; color: #4f4f4f; font-weight: 100; font-family: Georgia, "Times New Roman", Times, serif; opacity: .5; + text-align: center; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; } @@ -44,6 +55,17 @@ body { opacity: 1; } +#titlebar a { + visibility: hidden; + width: 18px; + overflow: hidden; + display: inline-block; +} + +#titlebar a::before { + visibility: visible; +} + #book-title { font-weight: 600; } @@ -52,7 +74,7 @@ body { display: none; } -#area { +#viewer { width: 80%; height: 80%; /* margin-left: 10%; */ @@ -62,7 +84,7 @@ body { position: absolute; */ } -#area iframe { +#viewer iframe { border: none; } @@ -126,39 +148,58 @@ body { left: 0; top: 0; width: 100%; - height: 15px; padding: 10px 0; + height: 21px; } #opener { - padding: 10px 10px; + /* padding: 10px 10px; */ float: left; } -#opener #open { +#opener #slider { width: 25px; } +#metainfo { + display: inline-block; + text-align: center; + max-width: 80%; +} + +#title-controls { + float: right; +} + #controls a { - float: left; - margin-left: 12px; - opacity: .5; + visibility: hidden; + width: 18px; + height: 20px; + overflow: hidden; + display: inline-block; + color: #ccc; + margin-left: 6px; } -#controls img:hover { - opacity: .8; +#controls a::before { + visibility: visible; } -#controls img:active { - opacity: 1; + +#controls a:hover { + color: #fff; +} + +#controls a.active, +#controls a.active:hover { + color: #AAA; } #searchBox { - width: 155px; + width: 165px; float: left; - margin-left: 5px; - margin-top: -5px; - + margin-left: 10px; + margin-top: -1px; /* border-radius: 5px; background: #9b9b9b; @@ -223,7 +264,7 @@ input:-moz-placeholder { -moz-transition: visibility 0 ease 0; } -#toc > ul{ +#toc > ul { margin-top: 50px; margin-bottom: 50px; padding-left: 20px; @@ -361,7 +402,7 @@ input:-moz-placeholder { .highlight { background-color: yellow } @media only screen and (max-width: 1040px) { - #area{ + #viewer{ width: 50%; margin-left: 25%; } @@ -373,7 +414,7 @@ input:-moz-placeholder { } @media only screen and (max-width: 900px) { - #area{ + #viewer{ width: 60%; margin-left: 20%; } @@ -388,7 +429,7 @@ input:-moz-placeholder { } @media only screen and (max-width: 550px) { - #area{ + #viewer{ width: 80%; margin-left: 10%; } @@ -422,7 +463,7 @@ input:-moz-placeholder { #titlebar { font-size: 10px; - margin: 0 50px 0 50px; + /* margin: 0 50px 0 50px; */ } @@ -439,3 +480,46 @@ input:-moz-placeholder { webkit-padding-start:; } } + + [class^="icon-"]:before, [class*=" icon-"]:before { + font-family: "fontello"; + font-style: normal; + font-weight: normal; + speak: none; + + display: inline-block; + text-decoration: inherit; + width: 1em; + margin-right: .2em; + text-align: center; + /* opacity: .8; */ + + /* For safety - reset parent styles, that can break glyph codes*/ + font-variant: normal; + text-transform: none; + + /* you can be more comfortable with increased icons size */ + font-size: 112%; + } + +.icon-search:before { content: '\e807'; } /* '' */ +.icon-resize-full-1:before { content: '\e804'; } /* '' */ +.icon-cancel-circled2:before { content: '\e80f'; } /* '' */ +.icon-link:before { content: '\e80d'; } /* '' */ +.icon-bookmark:before { content: '\e805'; } /* '' */ +.icon-bookmark-empty:before { content: '\e806'; } /* '' */ +.icon-download-cloud:before { content: '\e811'; } /* '' */ +.icon-edit:before { content: '\e814'; } /* '' */ +.icon-menu:before { content: '\e802'; } /* '' */ +.icon-cog:before { content: '\e813'; } /* '' */ +.icon-cancel-circled:before { content: '\e80e'; } /* '' */ +.icon-resize-small:before { content: '\e808'; } /* '' */ +.icon-up-dir:before { content: '\e80c'; } /* '' */ +.icon-right-dir:before { content: '\e80b'; } /* '' */ +.icon-angle-right:before { content: '\e809'; } /* '' */ +.icon-angle-down:before { content: '\e80a'; } /* '' */ +.icon-list-1:before { content: '\e803'; } /* '' */ +.icon-list-numbered:before { content: '\e801'; } /* '' */ +.icon-columns:before { content: '\e810'; } /* '' */ +.icon-list:before { content: '\e800'; } /* '' */ +.icon-resize-full:before { content: '\e812'; } /* '' */ \ No newline at end of file diff --git a/demo/dev.html b/demo/dev.html index b2a9b52..e3e58fa 100755 --- a/demo/dev.html +++ b/demo/dev.html @@ -27,7 +27,7 @@ EPUBJS.cssPath = "css/"; // fileStorage.filePath = EPUBJS.filePath; - EPUBJSR.app.init("moby-dick/"); + EPUBJS.Reader("moby-dick/"); } }; @@ -64,8 +64,7 @@ - - + @@ -79,12 +78,13 @@
-
- -
+
- -   –   - +
+ Menu +
+
+ +   –   + +
+
+
-
+
diff --git a/hooks/extensions/highlight.js b/hooks/extensions/highlight.js index 55f2671..cf4f885 100644 --- a/hooks/extensions/highlight.js +++ b/hooks/extensions/highlight.js @@ -5,7 +5,7 @@ EPUBJS.Hooks.register("beforeChapterDisplay").highlight = function(callback, ren var s = document.createElement("style"); s.innerHTML =".highlight { background: yellow; font-weight: normal; }"; - renderer.doc.body.appendChild(s); + renderer.doc.head.appendChild(s); if(callback) callback(); diff --git a/src/epubcfi.js b/src/epubcfi.js index 46c0efd..8938641 100644 --- a/src/epubcfi.js +++ b/src/epubcfi.js @@ -20,7 +20,7 @@ EPUBJS.EpubCFI.prototype.generateChapter = function(_spineNodeIndex, _pos, id) { EPUBJS.EpubCFI.prototype.generateFragment = function(element, chapter) { var path = this.pathTo(element), - parts = []; + parts = []; if(chapter) parts.push(chapter); @@ -43,9 +43,9 @@ EPUBJS.EpubCFI.prototype.generateFragment = function(element, chapter) { EPUBJS.EpubCFI.prototype.pathTo = function(node) { var stack = [], - children; + children; - while(node && node.parentNode.nodeName == "html" && node.parentNode !== null) { + while(node && node.parentNode !== null ) { children = node.parentNode.children; stack.unshift({ @@ -54,10 +54,14 @@ EPUBJS.EpubCFI.prototype.pathTo = function(node) { 'tagName' : node.tagName, 'index' : children ? Array.prototype.indexOf.call(children, node) : 0 }); - - node = node.parentNode; + + if(node.parentNode.nodeName != "html") { + node = node.parentNode; + } else { + node = false; + } } - + return stack; };