Merge pull request #29 from akivajgordon/develop

v1.1 – Tooltip to show how to toggle annotations with keyboard shortcut
akivajgordon · Jul 8, 2018 · 41b3c7b · 41b3c7b
2 parents 9fc7864 + dd44f9f
commit 41b3c7b
Show file tree

Hide file tree

Showing 11 changed files with 143 additions and 91 deletions.
diff --git a/components/Line.js b/components/Line.js
@@ -0,0 +1,20 @@
+import { displayRange, textFilter } from '../src'
+
+const petuchaClass = (isPetucha) => isPetucha ? 'mod-petucha' : ''
+const setumaClass = (column) => column.length > 1 ? 'mod-setuma' : ''
+
+const Line = ({ text, verses, aliyot, isPetucha }, annotated) => `
+  <div class="line ${petuchaClass(isPetucha)}">
+    ${text.map((column) => (`
+      <div class="column">
+        ${column.map((fragment) => (`
+          <span class="fragment ${setumaClass(column)}">${textFilter({ text: fragment, annotated })}</span>
+        `)).join('')}
+      </div>
+    `)).join('')}
+    <span class="location-indicator mod-verses" ${annotated ? '' : 'hidden'}>${displayRange.asVersesRange(verses)}</span>
+    <span class="location-indicator mod-aliyot" ${annotated ? '' : 'hidden'}>${displayRange.asAliyotRange(aliyot)}</span>
+  </div>
+`
+
+export default Line
diff --git a/components/Page.js b/components/Page.js
@@ -0,0 +1,13 @@
+import Line from './Line'
+
+const Page = (lines, annotated) => `
+  <table>
+    ${lines.map((line) => (`
+      <tr>
+        <td>${Line(line, annotated)}</td>
+      </tr>
+    `)).join('')}
+  </table>
+`
+
+export default Page
diff --git a/components/ParshaPicker.js b/components/ParshaPicker.js
@@ -0,0 +1,11 @@
+import parshiyot from '../build/parshiyot.json'
+
+const ParshaPicker = () => `
+  <div class="parsha-picker">
+    <ol class="parsha-list">
+      ${parshiyot.map(({ he, page }) => (`<li class="parsha" data-target-id="parsha" data-jump-to-page="${page}">${he}</li>`)).join('')}
+    </ol>
+  </div>
+`
+
+export default ParshaPicker
diff --git a/css/master.css b/css/master.css
@@ -2,6 +2,7 @@
 @import "/dist/normalize.css";
 
 @import "./app-layout.css";
+@import "./tooltip.css";
 @import "./page.css";
 @import "./parsha-picker.css";
 @import "./toggle.css";

diff --git a/css/toolbar.css b/css/toolbar.css
@@ -17,7 +17,8 @@
 }
 
 .annotations-toggle {
-  font-family: ShlomosemiStam
+  font-family: ShlomosemiStam;
+  position: relative;
 }
 
 .parsha-title {

diff --git a/css/tooltip.css b/css/tooltip.css
@@ -0,0 +1,23 @@
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  background-color: hsl(0, 0%, 20%);
+  color: white;
+  display: inline-block;
+  position: absolute;
+  top: 200%;
+  padding: 1em 1.5em;
+  border-radius: 4px;
+  font-size: 0.8em;
+  white-space: nowrap;
+  left: 50%;
+  transform: translate(-50%, 0) scale(0);
+  transform-origin: top center;
+  box-shadow: 0 0 8px -4px black;
+  font-family: sans-serif;
+}
+
+[data-tooltip]:hover::after {
+  transform: translate(-50%, 0) scale(1.0);
+  transition: transform 0.15s;
+  transition-delay: 1s;
+}
diff --git a/cypress/integration/app.cypress.test.js b/cypress/integration/app.cypress.test.js
@@ -124,4 +124,6 @@ describe('app', () => {
 
     cy.contains('בראשית ברא אלהים את השמים ואת הארץ')
   })
+
+  it('shows a tooltip to press the "Shift" key to toggle quickly') // can't test this because cypress does not have `cy.get('...').hover` – see https://docs.cypress.io/api/commands/hover.html#
 })
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Practice torah reading using this online tikkun.">
 
         <meta name="apple-mobile-web-app-capable" content="yes">
         <link rel="icon" type="image/png" href="/assets/images/android-chrome-192x192.png" sizes="192x192">
@@ -18,7 +19,7 @@
                 <div class="toolbar-content u-page-wrap">
                     <div class="toolbar-wrapper mod-left">
                         <div class="toolbar-item">
-                            <div class="annotations-toggle" data-test-id="annotations-toggle">
+                            <div class="annotations-toggle" data-test-id="annotations-toggle" data-tooltip="Tip: Hold &quot;Shift&quot; to toggle quickly">
                                 <label class="toggle">
                                     <input data-target-id="annotations-toggle" type="checkbox" checked />
                                     <span class="toggle-state mod-off">א</span>

diff --git a/index.js b/index.js
@@ -1,43 +1,8 @@
-import { displayRange, textFilter, InfiniteScroller, IntegerIterator, title as getTitle } from './src'
-import parshiyot from './build/parshiyot.json'
+import { InfiniteScroller, IntegerIterator, title as getTitle } from './src'
+import Page from './components/Page'
+import ParshaPicker from './components/ParshaPicker'
 import pageTitles from './build/page-titles.json'
 
-const petuchaClass = (isPetucha) => isPetucha ? 'mod-petucha' : ''
-
-const setumaClass = (column) => column.length > 1 ? 'mod-setuma' : ''
-
-const Line = ({ text, verses, aliyot, isPetucha }, annotated) => `
-  <div class="line ${petuchaClass(isPetucha)}">
-    ${text.map((column) => (`
-      <div class="column">
-        ${column.map((fragment) => (`
-          <span class="fragment ${setumaClass(column)}">${textFilter({ text: fragment, annotated })}</span>
-        `)).join('')}
-      </div>
-    `)).join('')}
-    <span class="location-indicator mod-verses" ${annotated ? '' : 'hidden'}>${displayRange.asVersesRange(verses)}</span>
-    <span class="location-indicator mod-aliyot" ${annotated ? '' : 'hidden'}>${displayRange.asAliyotRange(aliyot)}</span>
-  </div>
-`
-
-const Page = (lines, annotated) => `
-  <table>
-    ${lines.map((line) => (`
-      <tr>
-        <td>${Line(line, annotated)}</td>
-      </tr>
-    `)).join('')}
-  </table>
-`
-
-const ParshaPicker = () => `
-  <div class="parsha-picker">
-    <ol class="parsha-list">
-      ${parshiyot.map(({ he, page }) => (`<li class="parsha" data-target-id="parsha" data-jump-to-page="${page}">${he}</li>`)).join('')}
-    </ol>
-  </div>
-`
-
 const insertBefore = (parent, child) => {
   parent.insertAdjacentElement('afterbegin', child)
 }
@@ -109,34 +74,28 @@ const emptyNode = (node) => {
   while (node.firstChild) node.removeChild(node.firstChild)
 }
 
+const makePageNode = (n) => {
+  const node = document.createElement('div')
+  node.classList.add('tikkun-page')
+  node.setAttribute('data-page-number', n)
+
+  return node
+}
+
 const showParshaPicker = () => {
   document.querySelector('#js-app').appendChild(htmlToElement(ParshaPicker()))
   ;[...document.querySelectorAll('[data-target-id="parsha"]')]
     .forEach((parsha) => {
       parsha.addEventListener('click', (e) => {
         const page = Number(e.target.getAttribute('data-jump-to-page'))
-        const title = getTitle(pageTitles[page - 1])
 
         emptyObject(cache)
         state.iterator = IntegerIterator.new({ startingAt: page })
 
         emptyNode(document.querySelector('[data-target-id="tikkun-book"]'))
 
         fetchPage(state.iterator.next())
-          .then(({ key, content }) => {
-            const node = document.createElement('div')
-            node.classList.add('tikkun-page')
-            node.setAttribute('data-page-number', key)
-
-            cache[key] = { node, content }
-            insertAfter(document.querySelector('[data-target-id="tikkun-book"]'), node)
-
-            setState({
-              cache,
-              showAnnotations: document.querySelector('[data-target-id="annotations-toggle"]').checked,
-              title
-            })
-          })
+          .then(renderNext)
 
         toggleParshaPicker()
       })
@@ -200,35 +159,33 @@ const debounce = (f) => {
   timeout = setTimeout(f, 100)
 }
 
+const renderPage = ({ doInsert }) => ({ key, content }) => {
+  const node = makePageNode(key)
+
+  cache[key] = { node, content }
+  doInsert(document.querySelector('[data-target-id="tikkun-book"]'), node)
+
+  setState({
+    cache,
+    showAnnotations: document.querySelector('[data-target-id="annotations-toggle"]').checked,
+    title: getTitle(pageTitles[key - 1])
+  })
+}
+
+const renderPrevious = renderPage({ doInsert: insertBefore })
+const renderNext = renderPage({ doInsert: insertAfter })
+
 document.addEventListener('DOMContentLoaded', () => {
   InfiniteScroller
     .new({
       container: document.querySelector('[data-target-id="tikkun-book"]'),
       fetchPreviousContent: {
         fetch: () => fetchPage(state.iterator.previous()),
-        render: (container, { key, content }) => {
-          const node = document.createElement('div')
-          node.classList.add('tikkun-page')
-          node.setAttribute('data-page-number', key)
-
-          insertBefore(container, node)
-          cache[key] = { node, content }
-
-          setState({ cache })
-        }
+        render: (container, { key, content }) => renderPrevious({ key, content })
       },
       fetchNextContent: {
         fetch: () => fetchPage(state.iterator.next()),
-        render: (container, { key, content }) => {
-          const node = document.createElement('div')
-          node.classList.add('tikkun-page')
-          node.setAttribute('data-page-number', key)
-
-          insertAfter(container, node)
-          cache[key] = { node, content }
-
-          setState({ cache })
-        }
+        render: (container, { key, content }) => renderNext({ key, content })
       }
     })
     .attach()
@@ -249,18 +206,5 @@ document.addEventListener('DOMContentLoaded', () => {
   document.querySelector('[data-target-id="parsha-title"]').addEventListener('click', toggleParshaPicker)
 
   fetchPage(state.iterator.next())
-    .then(({ key, content }) => {
-      const node = document.createElement('div')
-      node.classList.add('tikkun-page')
-      node.setAttribute('data-page-number', key)
-
-      cache[key] = { node, content }
-      insertAfter(document.querySelector('[data-target-id="tikkun-book"]'), node)
-
-      setState({
-        cache,
-        showAnnotations: document.querySelector('[data-target-id="annotations-toggle"]').checked,
-        title: getTitle(pageTitles[key - 1])
-      })
-    })
+    .then(renderNext)
 })
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "build:css": "cp node_modules/normalize.css/normalize.css dist/",
     "webpack": "webpack --mode development index.js -o dist/bundle.js",
     "build": "npm run build:css && npm run webpack",
-    "watch": "onchange index.js 'src/*.js' -- npm run build"
+    "watch": "onchange index.js 'src/*.js' 'components/*.js' -- npm run build"
   },
   "repository": {
     "type": "git",
-Original file line number
+Diff line change
@@ Expand Up / @@ -124,4 +124,6 @@ describe('app', () => { @@
         cy.contains('בראשית ברא אלהים את השמים ואת הארץ')
       })
+      it('shows a tooltip to press the "Shift" key to toggle quickly') // can't test this because cypress does not have `cy.get('...').hover` – see https://docs.cypress.io/api/commands/hover.html#
     })