Update examples

904d0281 · Fred Chasen · 3a4a2131 · 904d0281 · 904d0281 · 904d0281
Commit 904d0281 authored Apr 07, 2018 by Fred Chasen
15 changed files
--- a/examples/assets/styles/examples.css
+++ b/examples/assets/styles/examples.css
+#main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+#navigation {
+  width: 500px;
+  position: fixed;
+  overflow: auto;
+  top: 0;
+  left: -525px;
+
+  background: #ECECEC;
+  min-height: 100%;
+  height: 100%;
+  height: 100vh;
+
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
+  padding: 9px;
+  padding-top: 10px;
+
+  transition: left .2s ease-out;
+  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+
+  z-index: 1;
+}
+
+#navigation.open {
+  left: 0;
+}
+
+#opener {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 10px;
+  stroke: #E2E2E2;
+  fill: #E2E2E2;
+}
+
+#opener:hover {
+  stroke: #777;
+  fill: #777;
+}
+
+#header {
+  height: 30px;
+}
+
+#update {
+  float: right;
+}
+
+.CodeMirror {
+  border: 1px solid #eee;
+  height: calc(100vh - 24px);
+  box-sizing: border-box;
+  background: #fbfbfb;
+  box-shadow: inset 0 0 1px rgba(0,0,0,.8);
+}
+
+.material-icons {
+  color: #333;
+  cursor: pointer;
+}
+
+.material-icons:hover {
+  color: #525252;
+}
+
+.material-icons:active {
+  color: #000;
+}
+
+.page {
+  box-shadow: 0 0 4px #ccc;
+}
--- a/examples/assets/styles/index.css
+++ b/examples/assets/styles/index.css
@@ -39,6 +39,7 @@
    flex-wrap: wrap;
    justify-content: flex-start;
    transform-origin: 0 0;
+    margin: 0 auto;
  }

  .pages > .section {

--- a/examples/aurorae/book.css
+++ b/examples/aurorae/book.css
-/* counters, page-breaks, figure */
+html{
+  --serif: 'spectral', serif;
+  --sans-serif: 'hk-grotesk', sans-serif;
+  --font-size: 13px;
+  --font-size-notes: 9px;
+  --line-height: 15px;
+  --line-height-notes: calc(15px*2/3);
+  --indent: 6mm;
+  --baseline: 15px;
+}
+
+@page {
+  size: 148mm 210mm portait;
+}
+
+@media screen {
+  .page {
+    background-image:  repeating-linear-gradient(180deg, transparent  0, transparent 14px , rgba(0,255,0,0.7) var(--baseline)) ;
+    background-size: cover;
+    background-position:  0 -3px , 0 0
+  }
+}
+
+@page cover {
+  margin: 0;
+  background: url("images/cover.jpg");
+  background-position: center;
+  background-size: 104%;
+  background-repeat: no-repeat;
+
+  @top-left{ content: none; }
+  @top-center{ content: none; }
+  @top-right{ content: none; }
+  @bottom-left{ content: none; }
+}
+
+@page:blank {
+  @top-left-corner{ content: none; }
+  @top-left{ content: none; }
+  @top-center{ content: none; }
+  @top-right{ content: none; }
+  @top-right-corner{ content: none; }
+  @right-top{ content: none; }
+  @right-middle{ content: none; }
+  @right-bottom{ content: none; }
+  @bottom-right-corner{ content: none; }
+  @bottom-right{ content: none; }
+  @bottom-center{ content: none; }
+  @bottom-left{ content: none; }
+  @bottom-left-corner{ content: none; }
+  @left-bottom{ content: none; }
+  @left-middle{ content: none; }
+  @left-top{ content: none; }
+}
+
+@page:left {
+  margin-left:22mm;
+  margin-right:14mm;
+  margin-top: 73px;
+  margin-bottom: 73px;
+
+  @top-left{
+    content: counter(page);
+    font-weight: 400;
+    font-family: var(--serif);
+    font-size: var(--font-size);
+    font-weight: normal;
+    line-height: var(--line-height);
+    vertical-align: bottom;
+    margin-bottom: 14px;
+    font-variant-numeric: oldstyle-nums;
+  }
+
+  @top-center{
+    content: string(booktitle);
+    font-weight: 400;
+    font-family: var(--serif);
+    font-size: var(--font-size);
+    font-weight: normal;
+    line-height: var(--line-height);
+    vertical-align: bottom;
+    margin-bottom: 14px;
+    font-variant-numeric: oldstyle-nums;
+    font-variant: small-caps;
+    width: 85mm;
+    text-align: left;
+  }
+}
+
+@page:right {
+  margin-left:14mm;
+  margin-right:22mm;
+  margin-top: 73px;
+  margin-bottom: 73px;
+  @top-right{
+    content: counter(page);
+    font-weight: 400;
+    font-family: var(--serif);
+    font-size: var(--font-size);
+    font-weight: normal;
+    line-height: var(--line-height);
+    vertical-align: bottom;
+    margin-bottom: 14px;
+    font-variant-numeric: oldstyle-nums;
+    text-align: right;
+  }
+
+  @top-center{
+    content: element(shorter);
+    vertical-align: bottom;
+    text-align: right;
+    margin-bottom: 1px;
+    width: 85mm;
+  }
+}
+
+.sidenote, .footnote {
+    display:none!important;
+}
+
+.footnote::footnote-call, .footnote::footnote-marker{
+    display:none!important;
+}
+
+.part h2, #appendices h2,
+section[data-type="half-title"],
+section[data-type="titlepage"],
+section[data-type="copyright"],
+section[data-type="dedication"],
+section[data-type="epigraph"],
+#toc {
+  margin-left: 10mm /*center the page*/
+}
+
+.part h2, #appendices h2{
+  page: part;
+}
+
+/* running elements */
+
+#cover h1 {
+  string-set: booktitle content(text);
+}
+
+#cover {
+  page: cover;
+}
+
+.shorter{
+  position: running(shorter);
+  font-weight: 400;
+  font-family: var(--serif);
+  font-size: var(--font-size);
+  font-weight: normal;
+  line-height: var(--line-height);
+  text-align: right;
+  /* font-style: italic; */
+  font-variant-numeric: oldstyle-nums;
+}


+/* flexbox */
+section[data-type="copyright"] #flexbox {
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  left:0;
+}
+
+/* table of content */
+#toc{
+  counter-reset: chaptoc apptoc;
+}
+.toc-part a[href]::before{
+  content: target-text(attr(href), before);
+
+}
+
+.toc-part a[href]::after,
+.toc-chap a[href]::before,
+.toc-part-app a[href]::before,
+.toc-app a[href]::before {
+  content: target-text(attr(href url), content);
+}
+
+.toc-chap{
+  counter-increment: chaptoc;
+}
+.toc-chap::before{
+  content: "Chapter " counter(chaptoc);
+}
+
+.toc-app {
+  counter-increment: apptoc;
+}
+
+.toc-app::before{
+  content: "Appendix " counter(apptoc);
+}
+
+
+.toc-chap a[href]::after,
+.toc-app a[href]::after {
+  content: leader(dotted) target-counter(attr(href), page);
+  float:right;
+}
+
+.toc-subchap a[href]::before{
+  content: target-text(attr(href)); /* pdfreactor */
+}
+
+.toc-subchap a[href]::after {
+    content: target-counter(attr(href), page);
+    float:right;
+}
+
+/* counters, page-breaks, figure */
+
 a {
  color: black;
  text-decoration: none;
@@ -126,7 +346,7 @@ h3:before, h2:before {
  font-size: 13px;
  line-height: 15px;
  margin-bottom: 9px;
-  
+
 }

 h4:not(.h4-appe), #appendix-e h5 {

--- a/examples/aurorae/index.html
+++ b/examples/aurorae/index.html
@@ -35,6 +35,7 @@
    <link rel="stylesheet" href="fonts/hk-grotesk/stylesheet.css" />

    <link rel="stylesheet" type="text/css" href="../assets/styles/index.css">
+    <link rel="stylesheet" type="text/css" href="../assets/styles/examples.css">
    <script>this.ready=new Promise(function($){document.addEventListener('DOMContentLoaded',$,{once:true})})</script>
    <script src="../../dist/paged.js"></script>

@@ -54,26 +55,29 @@

      // styles
      let styles = new Paged.Styler();
-      let styleText = await styles.add("book.css", "paged-js/layout-pagedjs.css");
-      styles.contents(flowText.content);
+      let styleText = await styles.add("book.css");
      // console.log(moby);

      let t0 = performance.now();

-      let flow = new Paged.Chunker(flowText.content, undefined, styles.breaks, preview).then((flow) => {
+      let chunker = new Paged.Chunker(flowText.content, undefined, styles, preview).then((flow) => {
        let t1 = performance.now();

        console.log("Rendering " + flow.total + " pages took " + (t1 - t0) + " milliseconds.");

-        // let pages = document.querySelector(".pages");
-        // styles.counters(pages);
+
      });

+
      let resizer = () => {
        let pages = document.querySelector(".pages");
        let scale = ((window.innerWidth * .9 ) / pages.offsetWidth);

-        pages.style.transform = `scale(${scale}) translate(${(window.innerWidth / 2) - ((pages.offsetWidth * scale / 2) ) }px, 0)`;
+        if (scale < 1) {
+          pages.style.transform = `scale(${scale}) translate(${(window.innerWidth / 2) - ((pages.offsetWidth * scale / 2) ) }px, 0)`;
+        } else {
+          pages.style.transform = "none";
+        }
      };
      resizer();


--- a/examples/aurorae/paged-js/layout-pagedjs.css
+++ b/examples/aurorae/paged-js/layout-pagedjs.css
-/* CSS DEMO pagedjs*/
-.sidenote, .footnote {
-    display:none!important;
-}
-
-.footnote::footnote-call, .footnote::footnote-marker{
-    display:none!important;
-}
-
-html{
-    --serif: 'spectral', serif;
-    --sans-serif: 'hk-grotesk', sans-serif;
-    --font-size: 13px;
-    --font-size-notes: 9px;
-    --line-height: 15px;
-    --line-height-notes: calc(15px*2/3);
-    --indent: 6mm;
-    --baseline: 15px;
-  }
-
-  @page {
-    size: 148mm 210mm portait;
-  }
-
-  @media screen {
-    .page {
-      background-image:  repeating-linear-gradient(180deg, transparent  0, transparent 14px , rgba(0,255,0,0.7) var(--baseline)) ;
-      background-size: cover;
-      background-position:  0 -3px , 0 0
-    }
-  }
-
-  /*@page:first {
-    margin: 0;
-    background: url("../images/cover.jpg");
-    background-position: center;
-    background-size: 104%;
-    background-repeat: no-repeat;
-
-    @top-left{ content: none; }
-    @top-center{ content: none; }
-    @top-right{ content: none; }
-    @bottom-left{ content: none; }
-  }*/
-
-  @page cover {
-    margin: 0;
-    background: url("../images/cover.jpg");
-    background-position: center;
-    background-size: 104%;
-    background-repeat: no-repeat;
-
-    @top-left{ content: none; }
-    @top-center{ content: none; }
-    @top-right{ content: none; }
-    @bottom-left{ content: none; }
-  }
-
-  @page:blank {
-    @top-left-corner{ content: none; }
-    @top-left{ content: none; }
-    @top-center{ content: none; }
-    @top-right{ content: none; }
-    @top-right-corner{ content: none; }
-    @right-top{ content: none; }
-    @right-middle{ content: none; }
-    @right-bottom{ content: none; }
-    @bottom-right-corner{ content: none; }
-    @bottom-right{ content: none; }
-    @bottom-center{ content: none; }
-    @bottom-left{ content: none; }
-    @bottom-left-corner{ content: none; }
-    @left-bottom{ content: none; }
-    @left-middle{ content: none; }
-    @left-top{ content: none; }
-  }
-
-
-
-
-  @page:left {
-    margin-left:22mm;
-    margin-right:14mm;
-    margin-top: 73px;
-    margin-bottom: 73px;
-
-    @top-left{
-        content: counter(page);
-        font-weight: 400;
-        font-family: var(--serif);
-        font-size: var(--font-size);
-        font-weight: normal;
-        line-height: var(--line-height);
-        vertical-align: bottom;
-        margin-bottom: 14px;
-        font-variant-numeric: oldstyle-nums;
-    }
-
-    @top-center{
-        content: string(booktitle);
-        font-weight: 400;
-        font-family: var(--serif);
-        font-size: var(--font-size);
-        font-weight: normal;
-        line-height: var(--line-height);
-        vertical-align: bottom;
-        margin-bottom: 14px;
-        font-variant-numeric: oldstyle-nums;
-        font-variant: small-caps;
-        width: 85mm;
-        text-align: left;
-
-    }
-
-
-  }
-
-  @page:right {
-    margin-left:14mm;
-    margin-right:22mm;
-    margin-top: 73px;
-    margin-bottom: 73px;
-    @top-right{
-        content: counter(page);
-        font-weight: 400;
-        font-family: var(--serif);
-        font-size: var(--font-size);
-        font-weight: normal;
-        line-height: var(--line-height);
-        vertical-align: bottom;
-        margin-bottom: 14px;
-        font-variant-numeric: oldstyle-nums;
-        text-align: right;
-    }
-
-    @top-center{
-        content: element(shorter);
-        vertical-align: bottom;
-        text-align: right;
-        margin-bottom: 1px;
-        width: 85mm;
-      }
-  }
-
-
-  .part h2, #appendices h2,
-  section[data-type="half-title"],
-  section[data-type="titlepage"],
-  section[data-type="copyright"],
-  section[data-type="dedication"],
-  section[data-type="epigraph"],
-  #toc {
-    margin-left: 10mm /*center the page*/
-  }
-
-
-
-
-
-  .part h2, #appendices h2{
-    page: part;
-  }
-
-
-
-  /* running elements */
-
-  #cover h1 {
-    string-set: booktitle content(text);
-  }
-
-  #cover {
-    page: cover;
-  }
-
-  .shorter{
-    position: running(shorter);
-    font-weight: 400;
-    font-family: var(--serif);
-    font-size: var(--font-size);
-    font-weight: normal;
-    line-height: var(--line-height);
-    text-align: right;
-    /* font-style: italic; */
-    font-variant-numeric: oldstyle-nums;
-  }
-
-
-  /* flexbox */
-  section[data-type="copyright"] #flexbox {
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    left:0;
-  }
-
-
-}
-
-/* table of content */
-#toc{
-  counter-reset: chaptoc apptoc;
-}
-.toc-part a[href]::before{
-  content: target-text(attr(href), before);
-
-}
-
-.toc-part a[href]::after,
-.toc-chap a[href]::before,
-.toc-part-app a[href]::before,
-.toc-app a[href]::before {
-  content: target-text(attr(href url), content);
-}
-
-.toc-chap{
-  counter-increment: chaptoc;
-}
-.toc-chap::before{
-  content: "Chapter " counter(chaptoc);
-}
-
-.toc-app {
-  counter-increment: apptoc;
-}
-
-.toc-app::before{
-  content: "Appendix " counter(apptoc);
-}
-
-
-.toc-chap a[href]::after,
-.toc-app a[href]::after {
-  content: leader(dotted) target-counter(attr(href), page);
-}
-
-.toc-subchap a[href]::before{
-  content: target-text(attr(href)); /* pdfreactor */
-}
-
-.toc-subchap a[href]::after {
-    content: target-counter(attr(href), page);
-    float:right;
-}
-
-.toc-subchap a[href]::before{
-  content: target-text(attr(href)); /* pdfreactor */
-}
--- a/examples/index.html
+++ b/examples/index.html
@@ -30,7 +30,7 @@

      let t0 = performance.now();

-      let flow = new Paged.Chunker(flowText.content, undefined, preview).then((flow) => {
+      let flow = new Paged.Chunker(flowText.content, undefined, undefined, preview).then((flow) => {
        let t1 = performance.now();

        console.log("Rendering " + flow.total + " pages took " + (t1 - t0) + " milliseconds.");
@@ -40,7 +40,11 @@
        let pages = document.querySelector(".pages");
        let scale = ((window.innerWidth * .9 ) / pages.offsetWidth);

-        pages.style.transform = `scale(${scale}) translate(${(window.innerWidth / 2) - ((pages.offsetWidth * scale / 2) ) }px, 0)`;
+        if (scale < 1) {
+          pages.style.transform = `scale(${scale}) translate(${(window.innerWidth / 2) - ((pages.offsetWidth * scale / 2) ) }px, 0)`;
+        } else {
+          pages.style.transform = "none";
+        }
      };
      resizer();


--- a/examples/styler.html
+++ b/examples/styler.html
--- a/package-lock.json
+++ b/package-lock.json
@@ -1127,6 +1127,14 @@
        "source-map": "0.5.7"
      }
    },
+    "d": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
+      "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
+      "requires": {
+        "es5-ext": "0.10.42"
+      }
+    },
    "date-time": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/date-time/-/date-time-2.1.0.tgz",
@@ -1214,6 +1222,35 @@
        "prr": "1.0.1"
      }
    },
+    "es5-ext": {
+      "version": "0.10.42",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.42.tgz",
+      "integrity": "sha512-AJxO1rmPe1bDEfSR6TJ/FgMFYuTBhR5R57KW58iCkYACMyFbrkqVyzXSurYoScDGvgyMpk7uRF/lPUPPTmsRSA==",
+      "requires": {
+        "es6-iterator": "2.0.3",
+        "es6-symbol": "3.1.1",
+        "next-tick": "1.0.0"
+      }
+    },
+    "es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
+      "requires": {
+        "d": "1.0.0",
+        "es5-ext": "0.10.42",
+        "es6-symbol": "3.1.1"
+      }
+    },
+    "es6-symbol": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
+      "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
+      "requires": {
+        "d": "1.0.0",
+        "es5-ext": "0.10.42"
+      }
+    },
    "escape-string-regexp": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -1232,6 +1269,15 @@
      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
      "dev": true
    },
+    "event-emitter": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
+      "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
+      "requires": {
+        "d": "1.0.0",
+        "es5-ext": "0.10.42"
+      }
+    },
    "evp_bytestokey": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
@@ -2907,6 +2953,11 @@
      "dev": true,
      "optional": true
    },
+    "next-tick": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
+      "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
+    },
    "normalize-path": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",

--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
  "browser": "dist/paged.js",
  "dependencies": {
    "css-tree": "^1.0.0-alpha.28",