Ebook Reader
X-Reader is a HTML5 Web Component, recreating the layout and controls of e-book readers.
<acidjs-xreader
booktitle="A Clockwork Orange"
author="Anthony Burgess"
source="books/a-clockwork-orange.html">
</acidjs-xreader>
<acidjs-xreader
booktitle="Nineteen Eighty-Four"
author="George Orwell"
controls
width="800"
height="600"
source="books/nineteen-eighty-four.html">
</acidjs-xreader>
<acidjs-xreader
width="320"
height="240"
defaultpage="1"
source="books/lorem.html">
</acidjs-xreader>
Demo
Default Size, Book Title, Author, Controls are Off
Custom Size, Controls are On, Book Title, Author
Custom Size, Custom Default Page, Controls are Off
Register Mozilla's X-Tags
You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.
<script src="AcidJs.XReader/lib/x-tag-components.js"></script>
Register the Component on the Page via HTML5 @import
You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.
<link rel="import" href="AcidJs.XReader/classes/XReader.html" />
HTML Attributes
Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).
JavaScript API: Methods, Getters and Setters
Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).
Usage and Code Insight
<h4>Default Size, Book Title, Author, Controls are Off</h4>
<acidjs-xreader id="book-1" booktitle="A Clockwork Orange" author="Anthony Burgess" source="pages/x-reader-html5-web-component/example/books/a-clockwork-orange.html"></acidjs-xreader>
<br /><br />
<h4>Custom Size, Controls are On, Book Title, Author</h4>
<acidjs-xreader id="book-2" booktitle="Nineteen Eighty-Four" author="George Orwell" controls width="800" height="600" source="pages/x-reader-html5-web-component/example/books/nineteen-eighty-four.html"></acidjs-xreader>
<br /><br />
<h4>Custom Size, Custom Default Page, Controls are Off</h4>
<acidjs-xreader id="book-3" width="320" height="240" defaultpage="1" source="pages/x-reader-html5-web-component/example/books/lorem.html"></acidjs-xreader>
<br /><br />
/*
* X-Reader HTML5 Web Component by Martin Ivanov (@wemakesitesnet)
* More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
* @author Martin Ivanov
* @url developer website: http://wemakesites.net/
* @url developer twitter: https://twitter.com/wemakesitesnet
* @url developer blog http://martinivanov.net
**/
/*
* USAGE:
* 1. If you are planning to use this component for a personal project, please retain the credits in the code. Donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS), however is highly appreciated.
* 2. If you will use it on a live website, donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS) is required.
**/
acidjs-xreader nav,
acidjs-xreader button,
acidjs-xreader content,
acidjs-xreader nav input,
acidjs-xreader input[type="checkbox"],
acidjs-xreader input[type="checkbox"] + label
{
position: absolute;
}
acidjs-xreader nav,
acidjs-xreader nav h1,
acidjs-xreader nav h2,
acidjs-xreader nav ul,
acidjs-xreader form > input[type="checkbox"] + label span::after,
acidjs-xreader form > input[type="checkbox"] + label span::before
{
display: block;
}
acidjs-xreader,
acidjs-xreader nav *,
acidjs-xreader form > input[type="checkbox"] + label span
{
display: inline-block;
}
acidjs-xreader button,
acidjs-xreader form > input[type="checkbox"] + label span::after,
acidjs-xreader form > input[type="checkbox"] + label span::before
{
width: 1em;
}
acidjs-xreader *
{
outline: 0;
border: 0;
}
acidjs-xreader nav *,
acidjs-xreader form,
acidjs-xreader button
{
margin: 0;
padding: 0;
}
acidjs-xreader nav span:hover,
acidjs-xreader nav input:checked + span,
acidjs-xreader input[type="checkbox"]:checked ~ nav
{
opacity: 1;
}
acidjs-xreader button,
acidjs-xreader nav span,
acidjs-xreader form > input[type="checkbox"] + label
{
cursor: pointer;
}
acidjs-xreader form,
acidjs-xreader form > input[type="checkbox"] + label span::after,
acidjs-xreader form > input[type="checkbox"] + label span::before
{
position: relative;
}
acidjs-xreader nav,
acidjs-xreader button,
acidjs-xreader form > input[type="checkbox"] + label span
{
color: #fff;
}
acidjs-xreader nav,
acidjs-xreader nav button,
acidjs-xreader form > input[type="checkbox"] + label
{
text-align: center;
}
acidjs-xreader,
acidjs-xreader *
{
box-sizing: border-box;
}
acidjs-xreader nav input,
acidjs-xreader form > input[type="checkbox"]
{
clip: rect(0, 0, 0, 0);
}
acidjs-xreader button,
acidjs-xreader content
{
top: 0;
bottom: 0;
}
acidjs-xreader content,
acidjs-xreader:hover button[name="next"]
{
right: 0;
}
acidjs-xreader content,
acidjs-xreader:hover button[name="prev"]
{
left: 0;
}
acidjs-xreader form > input[type="checkbox"] + label:hover span,
acidjs-xreader form > input[type="checkbox"]:checked + label span
{
background: #000;
}
acidjs-xreader form > input[type="checkbox"] + label span::after,
acidjs-xreader form > input[type="checkbox"] + label span::before
{
content: "";
margin: auto;
height: 0;
}
acidjs-xreader button,
acidjs-xreader form > input[type="checkbox"] + label span
{
background: rgba(0, 0, 0, .5);
}
acidjs-xreader nav *,
acidjs-xreader content *
{
font-weight: normal;
}
acidjs-xreader nav button,
acidjs-xreader form > input[type="checkbox"] + label span
{
font-size: 1em;
line-height: 1em;
}
acidjs-xreader
{
vertical-align: top;
border: solid 1px rgba(0, 0, 0, .5);
overflow: hidden;
font-family: "Arial Rounded MT", Arial, Sans-serif;
cursor: default;
font-size: 16px;
background: #fff;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
acidjs-xreader button:-moz-focus-inner
{
margin: 0;
border: 0;
padding: 0;
outline: 0;
}
acidjs-xreader button::-moz-focus-inner
{
margin: 0;
border: 0;
padding: 0;
outline: 0;
}
acidjs-xreader content
{
font-family: "Times New Roman", "Nueva Roman", Georgia, Garamond, Serif;
margin: 0;
transition: margin .5s cubic-bezier(0.250, 0.460, 0.450, 0.940);
-webkit-column-count: 2;
-webkit-column-gap: 0;
-moz-column-count: 2;
-moz-column-gap: 0;
-ms-column-count: 2;
-ms-column-gap: 0;
column-count: 2;
column-gap: 0;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
acidjs-xreader content > div
{
padding: 1em;
}
acidjs-xreader nav
{
top: 10%;
left: 10%;
z-index: 5;
width: 80%;
height: 80%;
background: rgba(0, 0, 0, .75);
opacity: 0;
overflow: auto;
box-shadow: 0 0 1em .25em rgba(0, 0, 0, .5);
transform: scale(0);
}
acidjs-xreader nav h1
{
font-size: 2em;
}
acidjs-xreader nav ul
{
vertical-align: middle;
}
acidjs-xreader form > input[type="checkbox"]:checked ~ nav
{
transform: scale(1);
transition: all .5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
acidjs-xreader nav span
{
font-size: .9em;
padding: .25em;
opacity: .5;
transition: opacity .5s;
}
acidjs-xreader nav input:checked + span
{
transform: scale(1.25);
}
acidjs-xreader button
{
font: bold 3em "Arial Rounded MT", Arial, Sans-serif;
transition: all .5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
acidjs-xreader button[name="prev"]
{
left: -5em;
}
acidjs-xreader button[name="next"]
{
right: -5em;
}
acidjs-xreader form > input[type="checkbox"] + label
{
z-index: 10;
width: 100%;
}
acidjs-xreader form > input[type="checkbox"] + label span
{
margin: .25em 0 0;
width: 1.5em;
height: 1.5em;
font-weight: bold;
transition: background .5s;
}
acidjs-xreader form > input[type="checkbox"] + label span::before
{
top: 4px;
border-top: solid 2px #fff;
}
acidjs-xreader form > input[type="checkbox"] + label span::after
{
border-bottom: solid 2px #fff;
}
acidjs-xreader nav button
{
z-index: 15;
top: .25em;
right: .25em;
width: 1.25em;
height: 1.25em;
text-transform: lowercase;
border-radius: 1em;
background: rgba(255, 255, 255, .5);
color: rgba(0, 0, 0, .75);
}