Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge remote branch 'upstream/componentry' into componentry

  • Loading branch information...
commit 1c2d428a7779cfceeeec32e520d4003d22ac1d8b 2 parents 9a1ce72 + 3ca6fdd
@aronwoost authored
View
1  src/compat.js
@@ -158,6 +158,7 @@ Monocle.Browser.has.transform3d = Monocle.Browser.CSSProps.isSupported([
'OPerspective',
'msPerspective'
]) && Monocle.Browser.CSSProps.supportsMediaQueryProperty('transform-3d');
+Monocle.Browser.has.embedded = (top != self);
// iOS (at least up to version 4.1) makes a complete hash of touch events
// when an iframe is overlapped by other elements. It's a dog's breakfast.
View
39 src/flippers/slider.js
@@ -102,6 +102,7 @@ Monocle.Flippers.Slider = function (reader) {
function setPage(pageDiv, locus, callback) {
+ ensureWaitControl();
p.reader.getBook().setOrLoadPageAt(
pageDiv,
locus,
@@ -183,6 +184,7 @@ Monocle.Flippers.Slider = function (reader) {
checkPoint(boxPointX);
p.turnData.releasing = true;
+ showWaitControl(lowerPage());
if (dir == k.FORWARDS) {
if (
@@ -227,14 +229,18 @@ Monocle.Flippers.Slider = function (reader) {
function onGoingBackward(x) {
- var lp = lowerPage();
+ var lp = lowerPage(), up = upperPage();
+ showWaitControl(up);
jumpOut(lp, // move lower page off-screen
function () {
flipPages(); // flip lower to upper
setPage( // set upper page to previous
lp,
getPlace(lowerPage()).getLocus({ direction: k.BACKWARDS }),
- function () { lifted(x); }
+ function () {
+ lifted(x);
+ hideWaitControl(up);
+ }
);
}
);
@@ -242,8 +248,10 @@ Monocle.Flippers.Slider = function (reader) {
function afterGoingForward() {
- var up = upperPage();
+ var up = upperPage(), lp = lowerPage();
if (p.interactive) {
+ showWaitControl(up);
+ showWaitControl(lp);
setPage( // set upper (off screen) to current
up,
getPlace().getLocus({ direction: k.FORWARDS }),
@@ -254,6 +262,7 @@ Monocle.Flippers.Slider = function (reader) {
}
);
} else {
+ showWaitControl(lp);
flipPages();
jumpIn(up, function () { prepareNextPage(announceTurn); });
}
@@ -313,6 +322,8 @@ Monocle.Flippers.Slider = function (reader) {
function announceTurn() {
+ hideWaitControl(upperPage());
+ hideWaitControl(lowerPage());
p.reader.dispatchEvent('monocle:turn');
resetTurnData();
}
@@ -514,6 +525,28 @@ Monocle.Flippers.Slider = function (reader) {
}
+ function ensureWaitControl() {
+ if (p.waitControl) { return; }
+ p.waitControl = {
+ createControlElements: function (holder) {
+ return holder.dom.make('div', 'flippers_slider_wait');
+ }
+ }
+ p.reader.addControl(p.waitControl, 'page');
+ }
+
+
+ function showWaitControl(page) {
+ var ctrl = p.reader.dom.find('flippers_slider_wait', page.m.pageIndex);
+ ctrl.style.opacity = 0.5;
+ }
+
+
+ function hideWaitControl(page) {
+ var ctrl = p.reader.dom.find('flippers_slider_wait', page.m.pageIndex);
+ ctrl.style.opacity = 0;
+ }
+
// THIS IS THE CORE API THAT ALL FLIPPERS MUST PROVIDE.
API.pageCount = p.pageCount;
API.addPage = addPage;
View
17 src/monocle.css
@@ -223,6 +223,19 @@ div.monelem_controls_scrubber_bubble {
}
+/*===========================================================================
+ Flippers
+---------------------------------------------------------------------------*/
+
+div.monelem_flippers_slider_wait {
+ position: absolute;
+ right: 2px;
+ top: 2px;
+ width: 20px;
+ height: 20px;
+ background-repeat: no-repeat;
+ opacity: 0.5;
+}
/*===========================================================================
@@ -239,3 +252,7 @@ div.monelem_controls_spinner_anim {
div.monelem_panels_imode_toggleIcon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAaCAYAAABPY4eKAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1%2B%2FAAAABV0RVh0Q3JlYXRpb24gVGltZQAzMC82LzEwBMfmVwAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAANYSURBVEiJtdZbiNVVFMfxj8cx85JkIGlqSESgOGA9WIQgGmTRUyRaYFJDnUWYGV2eyiCpkIbEKJI1UqYvUkmFDxFBgpghonajSDCM7hcxLSnt4ulh%2F2c4HufMTOH8Xs75%2F%2Ffa67v3%2Bu%2B91hphGJWZNUzCXJyKiHd6xxqNhhGDTB6NOViAyzARY3EaP%2BNL7MCBiPi9Ze4leBlTsR9jcCnuiYgDbeGZeV4F7EINe7EP3%2BJ49W4GrsZ8NPAGXouIk5k5F93YFhHPVT5H4kbcjaX1ev3kWfDMPB9P4ko8ERE7BopONWcOVmMc1uBRrG8Oc5Ptq1hdr9cPdrQMTMUWfBQRCweD9ioiPsQtmbkeu7G8P3ClsZSI98EzcxqeUsLXM1RwZs7ErRiJKXgQN2Tmzoj4qsV2Hn7BYcq369UaHIqI5yPizyGCx2MPfsRVOBoR6%2FA%2BNmXmqCbbm%2FAiMiJO9cEzcwEuwLODwMZk5oXVLYA6PouIF%2FC6cvBgI37D0mreStyJroh4r9df785XYGtEHG8Hfnjb1w08Xu2qq3regtOZuaka2whV5NZieWY%2BhkV4ICJ2N%2FusZeYMJQm8NdCuuxdPH4HENGzsXjx9REQcqRxvR2dEfNBrHxF7lHywGPXW7085cEvwZkScHAheaRz%2BwngcqyAnlEPan%2Fbh5oj4rr%2FBDlyOXUMA%2Fx%2F9oFytM5SZs3t6epbWlOtxeJjg%2BzEmMye3vF%2BCYx2YhdFnTTs3OoQT2JqZ3TiC2zETyzrwrnIwhkMTqwVsxW24GLsiYmWj0dCBo2gNy7nSRfgpIjZjM6WU1ut1lHt%2BGLOHCd6J79sN1pSkMSUzJwwD%2FBoD5I9aRHyiFIVFQ3D2j1KR%2Fh7MMDPnY1JE7GwLr3434N5BnI3GFRiFzuai0Ub34aWBDGr0pcKPM%2FPpqovpT11KoVinNAvXt1lkLTNXKFesXU1HUz3HI0plWqW0QGcoIjYoERpMy7AS17b2da06o43KzLF4RanRzwwx3%2FfOHYW7lL5ubUR83p9do9Ho%2B99fDzcZDynfdxPejog%2FBoCOxHW4AxOwKiK%2BaGc%2FILzJ6ULcXznciwM4qFSzCUob3Km0UCeU3W5v5%2B8%2FwZsWMQvzlN1Nq8C%2F4ht8qkRm72B%2B%2BoP%2FC0sEOftJmUbfAAAAAElFTkSuQmCC);
}
+
+div.monelem_flippers_slider_wait {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABeElEQVR42rXUv0sCYRzHcaEyiCiJBmkIHCJH4ejXEIJDSKtLIjQ0REscSFE0JRQUFZEgLUE%2FKCmiX0NkLWIuDUFDEDRWBM35B1zvLzwnx9llmj3wwuf7fR4%2BfO84dBmGUVM1D%2Fx2aZrWjQmsYR1zCKPecseHJPLYRGdJoDTVYQYbmEIUM6r3hjGE8Ilx%2BBFHWgKtYb04gQ6Pw%2BQBXOERfbZBrouBFE14x5DUDmGzuMGL%2Bl1BgzpbkloCpajDIXQ5%2FCGwAB0FVWcQQRp78JiBPty5yiz17nYQVnUE91iEW3pm4DQSrgqXTIQPaFJbA5cRkUYVoa8YVfsojmRzjliVgVnkcYAcAtJc%2BEPgBQYxjFbzkUeQtFwyUqmU4bS3fXuXaJQgYQZ6cQp%2FhdMlMG8NQ%2FFwEvsVhPXgFl6nwGZsYwttZcKCeEBI6tLA0sd4Qgwtlr4bslZxhqD0nQLtof3YxTOyOEZO7eNol3u%2FDrRN1YUBdDhc%2B%2F9%2F7C%2F2YLggaYNChgAAAABJRU5ErkJggg%3D%3D);
+}
View
17 test/embedded/content/1.html
@@ -0,0 +1,17 @@
+<h3>I</h3>
+<p>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec sapien libero. Nam sed nunc felis. <a href="http://monocle.inventivelabs.com.au" target="_blank">Curabitur commodo</a> tellus vitae ipsum interdum imperdiet. Ut sapien justo, lacinia ac sollicitudin vitae, condimentum at ante. Aliquam placerat, lorem et ultricies cursus, nunc turpis lacinia nulla, vitae bibendum sem velit sit amet ligula. Ut sit amet erat erat. Nam fermentum interdum imperdiet. Curabitur eu euismod leo. Pellentesque nec tellus enim, sit amet ultricies sem. Ut imperdiet libero id metus iaculis malesuada. Sed faucibus malesuada dui at rutrum. Suspendisse gravida ultricies lorem non porta. Aenean purus nisl, pellentesque eu consectetur vitae, molestie vel neque. Sed lacinia arcu ac metus dignissim dignissim. Aenean tristique consectetur orci. Suspendisse potenti. Nunc sit amet erat arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+</p>
+<p>
+Donec quis felis venenatis diam elementum pellentesque. Pellentesque ullamcorper, urna ac bibendum varius, odio est dictum purus, non euismod diam eros ac turpis. Sed vehicula semper nisi, id elementum orci semper accumsan. Morbi at neque id sapien eleifend hendrerit. Mauris interdum lectus vitae elit dapibus at viverra lorem semper. Nullam lacinia, lacus ut vulputate rutrum, erat purus vehicula libero, non varius felis felis sit amet sapien. Cras ornare nisi non nunc convallis rhoncus. In semper est eget diam imperdiet vitae dignissim justo lacinia. Morbi lorem arcu, feugiat non suscipit vitae, adipiscing ut tellus. Proin eget sem mi.
+</p>
+<p>
+Aenean vitae elit augue. In blandit accumsan sem non aliquet. Quisque risus elit, pellentesque quis pharetra id, facilisis sit amet nibh. Aenean convallis tincidunt arcu quis posuere. Vivamus dictum facilisis felis eget vestibulum. Pellentesque lacinia lectus ac dolor lacinia eget commodo tellus mollis. In felis ante, ornare vitae fermentum vel, gravida sit amet sapien. Integer quis neque ut mi mollis rhoncus eget eget nisl. Nunc est elit, venenatis non lobortis in, interdum id orci. Phasellus malesuada, nibh non rutrum ornare, ligula risus viverra arcu, nec sagittis lectus est vel lorem. Aliquam et lectus id eros cursus scelerisque eu sed metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer pharetra dapibus euismod. Aliquam laoreet pharetra diam in aliquet. Vivamus leo ligula, bibendum sit amet sodales ac, ultrices volutpat orci. Mauris nec velit vel lectus lacinia tempus eget a massa.
+</p>
+<p>
+Nullam faucibus, ante at ultrices tempor, nulla enim fringilla nunc, et vehicula risus tellus sit amet ipsum. Nullam ultrices imperdiet ligula, eget fermentum ante bibendum eu. Donec sollicitudin massa congue velit suscipit convallis. Quisque nec congue lacus. Etiam risus arcu, scelerisque et congue vitae, ullamcorper vitae felis. Etiam orci magna, viverra sit amet sodales at, sollicitudin eget dolor. Morbi congue diam sit amet magna fermentum vitae faucibus diam consequat. Phasellus et scelerisque lacus. Cras aliquam risus sed sem venenatis viverra. Nullam elit magna, vestibulum sed semper ut, tempus quis nisl. Pellentesque velit lectus, consequat vitae porttitor ac, adipiscing vel mi. Sed lobortis tincidunt dolor. Nulla placerat bibendum dui, pellentesque volutpat nisi tincidunt eu. Proin quis nulla nulla. Nullam interdum venenatis tempor. Nullam porta venenatis urna quis pharetra. Ut at purus id velit fermentum aliquam eget id justo. Sed vel urna ante. Suspendisse ligula dui, interdum quis venenatis vitae, egestas at turpis. Nulla eros elit, sollicitudin eu euismod vel, tincidunt non leo.
+</p>
+<p>
+Nullam quis augue in erat dictum iaculis sed a tellus. Suspendisse tristique varius nisi, eget eleifend dolor commodo vestibulum. In auctor consequat venenatis. In bibendum tincidunt ipsum, ac faucibus tortor dapibus mollis. Vivamus a lorem metus, et aliquam turpis. Duis gravida pulvinar interdum. Morbi ut quam eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse nisl massa, interdum et elementum in, tincidunt id nisl. Nunc sodales risus et neque scelerisque porttitor. Etiam eget dui ipsum. Quisque vestibulum, quam sed adipiscing eleifend, arcu diam ornare leo, quis tincidunt nunc erat ultricies dui. Etiam libero tellus, adipiscing a volutpat sed, sagittis ac lorem. Integer sed erat nec nulla condimentum interdum. Integer mi metus, congue eget congue sed, accumsan at lectus. Nulla consequat venenatis odio sed tristique.
+</p>
+
View
28 test/embedded/content/2.html
@@ -0,0 +1,28 @@
+<h3>II</h3>
+<p>
+Mauris ac felis et justo pulvinar adipiscing ac quis metus. Duis sollicitudin nisi vel neque posuere auctor pretium urna pharetra. Nunc bibendum, tellus a interdum ultrices, enim velit pretium lorem, ut eleifend turpis ipsum vitae turpis. Cras accumsan sem vitae sapien semper varius. Sed eget orci magna, a sodales est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent non tincidunt eros. Praesent iaculis, lectus sit amet rutrum dignissim, odio arcu auctor elit, sit amet imperdiet neque elit in lorem. Nam consectetur semper tellus, vel blandit dui porttitor eu. Quisque at metus non urna pulvinar tempus. Nunc a neque sed arcu blandit aliquam. Nam orci sapien, suscipit et suscipit sodales, tempus sed purus.
+</p>
+<p>
+Integer pulvinar nisl a ante sodales id viverra justo molestie. Cras quis mauris nulla. Quisque posuere dignissim consectetur. Curabitur eget augue sed ligula consectetur pulvinar sit amet vel velit. Pellentesque id massa egestas tellus vulputate tincidunt. Vestibulum vel congue arcu. Etiam nisi turpis, consequat sed vehicula vel, congue in leo. Aenean mauris leo, adipiscing nec scelerisque sed, ultricies in nisl. Fusce mollis semper nibh, id gravida libero iaculis quis. Curabitur id mi nisi, vel varius massa. Fusce suscipit rhoncus eleifend. Sed venenatis, velit sit amet consectetur sagittis, felis lacus viverra massa, sit amet suscipit ligula risus vitae urna. In euismod enim eu felis pretium at interdum dolor faucibus. Aenean eu felis orci. Nulla posuere tellus et justo porttitor non commodo sapien elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id accumsan velit. Ut eu ligula molestie risus ornare eleifend eget vitae enim.
+</p>
+<p>
+Phasellus dictum, magna id venenatis egestas, ligula purus sagittis mi, ut egestas ipsum risus a nisl. Quisque aliquet imperdiet lectus, sit amet cursus leo vestibulum id. Praesent nibh purus, pulvinar in tincidunt a, pharetra et urna. Praesent ornare, nisi sed tempor laoreet, lorem nibh tempor est, lacinia ultricies erat felis quis elit. Etiam et elit et lacus lacinia lacinia at sit amet diam. Fusce laoreet ligula non sem volutpat ut porta ipsum tempor. Mauris justo nisi, ornare sodales suscipit at, fermentum placerat justo. Aliquam quis consequat nunc. Mauris turpis ligula, cursus a accumsan sed, porttitor aliquet neque. Quisque vel enim tortor, a rutrum libero. Donec et molestie justo. Sed auctor, tellus at bibendum auctor, nulla sem aliquam dui, nec viverra ante erat eu tellus. Quisque et nisi tortor. Morbi semper odio quis quam accumsan dignissim. Cras ut augue nunc, quis molestie mi. Sed felis arcu, venenatis quis ultrices eget, tempus ac felis. Nunc porta neque non neque convallis nec consectetur orci sollicitudin. Sed leo lectus, feugiat in euismod eget, semper vitae lacus. Vestibulum non lacus a dui fermentum lobortis sed sit amet felis.
+</p>
+<p>
+Praesent quis odio a nulla facilisis pulvinar in in dolor. Donec lacinia mauris non turpis dignissim viverra. Pellentesque sollicitudin dolor nec ipsum sagittis vitae dapibus odio aliquet. Donec ultrices consequat ligula eu volutpat. Vestibulum vitae tortor eu mi pulvinar cursus eget sit amet est. Nulla sagittis adipiscing faucibus. Suspendisse commodo sapien in arcu euismod eleifend. Aliquam porta velit vel leo sagittis vel venenatis urna sagittis. Quisque vulputate egestas scelerisque. Fusce porttitor sagittis neque, sit amet pharetra odio imperdiet at. Cras sodales hendrerit tellus, ut aliquam velit pellentesque id. Vivamus lacus augue, semper ut hendrerit mollis, elementum et velit. Donec lorem nunc, mollis ac pharetra at, bibendum a nisi. Vivamus porta turpis nec magna tempus venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean vitae quam viverra neque interdum ultricies eu in diam. Integer tempus metus in nibh mattis adipiscing tincidunt leo porttitor. Vivamus at velit quis risus tincidunt dapibus.
+</p>
+<p>
+Aliquam erat volutpat. Maecenas nec neque nulla, eget ullamcorper ligula. Phasellus dapibus quam a odio congue consectetur. Quisque sagittis nisl elementum dolor porttitor venenatis. Sed non pulvinar urna. Suspendisse nunc nibh, lacinia id venenatis in, consectetur vitae mauris. Donec ac quam nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porttitor dui urna, facilisis rhoncus nisl. Pellentesque elit sem, molestie nec iaculis id, laoreet sagittis massa. Integer imperdiet sollicitudin nulla non rutrum. Phasellus egestas leo vel erat viverra vel ornare lorem dignissim. Mauris justo ligula, iaculis at vulputate in, viverra ut est. Praesent hendrerit enim eget sem ultricies non ultrices purus facilisis. Pellentesque commodo egestas iaculis. Aliquam erat volutpat. Vestibulum ornare cursus elit, vel mollis lorem elementum sit amet.
+</p>
+<p>
+
+Pellentesque ornare facilisis semper. Pellentesque lorem sem, molestie iaculis mattis vel, molestie at orci. Quisque non arcu lorem. Donec consectetur volutpat turpis, eget aliquam velit dapibus eget. Ut nec iaculis massa. Nam vel metus non augue tempor scelerisque. Vestibulum lectus neque, gravida ac tempor vitae, feugiat in lacus. Mauris vitae ipsum et massa commodo aliquet vitae ac massa. Cras ac nisi sapien, et tempus nibh. Curabitur porta nunc ac mauris porta vel pretium ligula egestas. Integer ut lacus quam. In purus diam, lacinia at congue in, placerat sed lorem. Mauris ultrices, magna in tempor malesuada, est massa dapibus augue, semper tempor turpis dui vel sapien. Nulla facilisi. Nam malesuada, nibh vitae vestibulum mattis, massa nulla interdum ipsum, et venenatis urna magna vel ante.
+</p>
+<p>
+Donec cursus, eros at cursus consequat, augue massa sagittis dolor, id dapibus elit nisi ac dolor. Sed lorem velit, semper in dapibus ullamcorper, ultricies vel dolor. Vestibulum ac tortor nec magna elementum congue in volutpat tortor. Pellentesque tellus turpis, sodales interdum gravida in, aliquam a velit. Ut massa mi, blandit a rhoncus vitae, ultrices ac felis. Curabitur urna nulla, malesuada id mollis et, elementum vel augue. Aenean rhoncus feugiat augue, vitae feugiat libero aliquet non. Aliquam auctor vestibulum malesuada. Phasellus ultrices, urna sed accumsan faucibus, turpis massa rutrum nibh, sed pellentesque metus massa in quam. Morbi bibendum, diam auctor malesuada sagittis, urna tellus adipiscing est, vitae accumsan nibh erat sit amet lorem. Nulla malesuada, lorem a viverra blandit, justo est tristique est, sed lobortis risus sapien sit amet quam. Suspendisse odio enim, posuere in convallis sed, porttitor ut libero. Quisque ultricies euismod consequat. Aliquam nec nunc diam. Aenean interdum erat faucibus enim scelerisque semper. Vestibulum porttitor lorem ullamcorper metus tincidunt ut convallis nisi tempus.
+</p>
+<p>
+Cras id mauris purus. Nullam id tortor tellus. Pellentesque vitae orci eu lacus pulvinar commodo. Aliquam erat volutpat. Integer tellus sapien, tincidunt non luctus nec, tempor a mauris. Nunc quis odio ut erat pellentesque aliquam quis et massa. Praesent lectus lectus, luctus non pellentesque et, facilisis auctor quam. Proin vestibulum eleifend interdum. Ut sit amet justo diam, ut pulvinar massa. Proin vel felis augue. Praesent sed quam sem, dapibus egestas quam. Mauris in magna leo. Nulla eget ipsum vel turpis commodo rutrum ut eu lorem. Morbi ultricies magna non mi eleifend eget pulvinar nulla egestas.
+</p>
+
+
View
91 test/embedded/embed.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <meta
+ name="viewport"
+ content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"
+ />
+ <title>Embedding in an iframe</title>
+
+ <!-- MONOCLE CORE -->
+ <script type="text/javascript" src="../../src/monocle.js"></script>
+ <script type="text/javascript" src="../../src/compat.js"></script>
+ <script type="text/javascript" src="../../src/events.js"></script>
+ <script type="text/javascript" src="../../src/factory.js"></script>
+ <script type="text/javascript" src="../../src/styles.js"></script>
+ <script type="text/javascript" src="../../src/reader.js"></script>
+ <script type="text/javascript" src="../../src/book.js"></script>
+ <script type="text/javascript" src="../../src/component.js"></script>
+ <script type="text/javascript" src="../../src/place.js"></script>
+
+ <!-- MONOCLE FLIPPERS -->
+ <script type="text/javascript" src="../../src/controls/panel.js"></script>
+ <script type="text/javascript" src="../../src/panels/imode.js"></script>
+ <script type="text/javascript" src="../../src/dimensions/columns.js"></script>
+ <script type="text/javascript" src="../../src/flippers/slider.js"></script>
+ <script type="text/javascript" src="../../src/flippers/legacy.js"></script>
+
+ <script type="text/javascript" src="../../src/controls/contents.js"></script>
+
+ <link rel="stylesheet" type="text/css" href="../../src/monocle.css" />
+
+ <style type="text/css">
+ body {
+ margin: 0;
+ padding: 0;
+ }
+ #reader {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: #000;
+ }
+ </style>
+
+ <script type="text/javascript">
+ (function () {
+ var bookData = {
+ getComponents: function () {
+ return ['content/1.html', 'content/2.html'];
+ },
+ getComponent: function (cmptId) {
+ return { url: cmptId }
+ },
+ getContents: function () {
+ return [
+ {
+ title: "Part I",
+ src: "content/1.html"
+ },
+ {
+ title: "Part II",
+ src: "content/2.html"
+ }
+ ];
+ },
+ getMetaData: function(key) {
+ return { title: "Lorem Ipsum", creator: "Mr Monocle" }[key];
+ }
+ }
+
+ // Initialize the reader element.
+ var rdrOptions = {
+ panels: Monocle.Panels.IMode
+ }
+ Monocle.Events.listen(
+ window,
+ 'load',
+ function () {
+ window.reader = Monocle.Reader('reader', bookData, rdrOptions);
+ }
+ );
+ })();
+ </script>
+
+ </head>
+
+ <body>
+ <div id="reader"></div>
+ </body>
+</html>
View
13 test/embedded/index.html
@@ -0,0 +1,13 @@
+<html>
+ <head>
+ <title>Embed test</title>
+ <style>
+ body {
+ margin: 8em;
+ }
+ </style>
+ </head>
+ <body>
+ <iframe src="embed.html" width="300" height="400" scrolling="no" frameborder="0" style="border: 1px solid #000;"></iframe>
+ </body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.