diff --git a/examples/article.html b/examples/article.html
index 1d40d46..ab59dbb 100644
--- a/examples/article.html
+++ b/examples/article.html
@@ -2,7 +2,8 @@
-
+
+
diff --git a/src/components.js b/src/components.js
index e3006c9..564d005 100644
--- a/src/components.js
+++ b/src/components.js
@@ -16,6 +16,7 @@ import { Code } from './components/d-code';
import { Footnote } from './components/d-footnote';
import { FootnoteList } from './components/d-footnote-list';
import { FrontMatter } from './components/d-front-matter';
+import { HoverBox } from './components/d-hover-box';
import { Title } from './components/d-title';
import { DMath } from './components/d-math';
import { References } from './components/d-references';
@@ -53,7 +54,7 @@ const distillMain = function() {
/* Article will register controller which takes control from there */
const components = [
Abstract, Appendix, Article, Bibliography, Byline, Cite, CitationList, Code,
- Footnote, FootnoteList, FrontMatter, Title, DMath, References, TOC, Figure,
+ Footnote, FootnoteList, FrontMatter, HoverBox, Title, DMath, References, TOC, Figure,
Slider, Interstitial
];
diff --git a/src/components/d-cite.js b/src/components/d-cite.js
index fe1ddd6..964bef6 100644
--- a/src/components/d-cite.js
+++ b/src/components/d-cite.js
@@ -1,6 +1,5 @@
import { Template } from '../mixins/template';
import { hover_cite, bibliography_cite } from '../helpers/citation';
-import { HoverBox } from '../helpers/hover-box';
const T = Template('d-cite', `
-
+
`);
@@ -75,15 +56,12 @@ export class Cite extends T(HTMLElement) {
// }
connectedCallback() {
- // this.notify();
-
- this.hoverDiv = this.root.querySelector('.dt-hover-box');
this.outerSpan = this.root.querySelector('#citation-');
this.innerSpan = this.root.querySelector('.citation-number');
- // this.outerSpan.id = `citation-${this.citeId}`;
- // this.hoverDiv.id = `dt-cite-hover-box-${this.citeId}`;
- // console.log(this, this.hoverDiv, this.outerSpan, this.innerSpan);
- this.hoverbox = new HoverBox(this.hoverDiv, this.outerSpan);
+ this.hoverBox = this.root.querySelector('d-hover-box');
+ window.customElements.whenDefined('d-hover-box').then(() => {
+ this.hoverBox.listen(this);
+ });
}
disconnectedCallback() {
diff --git a/src/components/d-footnote.js b/src/components/d-footnote.js
index 1fe5048..084106b 100644
--- a/src/components/d-footnote.js
+++ b/src/components/d-footnote.js
@@ -1,5 +1,4 @@
import { Template } from '../mixins/template.js';
-import { HoverBox } from '../helpers/hover-box';
const T = Template('d-footnote', `
-
+
+
+
@@ -79,23 +76,24 @@ export class Footnote extends T(HTMLElement) {
// const slot = this.shadowRoot.querySelector('#slot');
// console.warn(slot.textContent);
// slot.addEventListener('slotchange', this.notify);
-
+ this.hoverBox = this.root.querySelector('d-hover-box');
+ window.customElements.whenDefined('d-hover-box').then(() => {
+ this.hoverBox.listen(this);
+ });
// create numeric ID
Footnote.currentFootnoteId += 1;
const IdString = Footnote.currentFootnoteId.toString();
this.root.host.id = 'd-footnote-' + IdString;
// set up hidden hover box
- const div = this.root.querySelector('.dt-hover-box');
- div.id = 'dt-fn-hover-box-' + IdString;
+ const id = 'dt-fn-hover-box-' + IdString;
+ this.hoverBox.id = id
// set up visible footnote marker
const span = this.root.querySelector('#fn-');
span.setAttribute('id', 'fn-' + IdString);
- span.setAttribute('data-hover-ref', div.id);
+ span.setAttribute('data-hover-ref', id);
span.textContent = IdString;
-
- this.hoverbox = new HoverBox(div, span);
}
}
diff --git a/src/components/d-hover-box.js b/src/components/d-hover-box.js
new file mode 100644
index 0000000..cb8a0ff
--- /dev/null
+++ b/src/components/d-hover-box.js
@@ -0,0 +1,132 @@
+import { Template } from '../mixins/template.js';
+
+const T = Template('d-hover-box', `
+
+
+
+`);
+
+export class HoverBox extends T(HTMLElement) {
+
+ constructor() {
+ super();
+ }
+
+ connectedCallback() {
+
+ }
+
+ listen(element) {
+ console.log(element)
+ this.bindDivEvents(this);
+ this.bindTriggerEvents(element);
+ // this.style.display = "block";
+ }
+
+ bindDivEvents(element) {
+ // For mice, same behavior as hovering on links
+ element.addEventListener('mouseover', () => {
+ if (!this.visible) this.showAtNode(element);
+ this.stopTimeout();
+ });
+ element.addEventListener('mouseout', () => {
+ this.extendTimeout(500);
+ });
+ // Don't trigger body touchstart event when touching within box
+ element.addEventListener('touchstart', (event) => {
+ event.stopPropagation();
+ }, {passive: true});
+ // Close box when touching outside box
+ document.body.addEventListener('touchstart', () => {
+ this.hide();
+ }, {passive: true});
+ }
+
+ bindTriggerEvents(node) {
+ node.addEventListener('mouseover', () => {
+ if (!this.visible) {
+ this.showAtNode(node);
+ }
+ this.stopTimeout();
+ });
+
+ node.addEventListener('mouseout', () => {
+ this.extendTimeout(300);
+ });
+
+ node.addEventListener('touchstart', (event) => {
+ if (this.visible) {
+ this.hide();
+ } else {
+ this.showAtNode(node);
+ }
+ // Don't trigger body touchstart event when touching link
+ event.stopPropagation();
+ }, {passive: true});
+ }
+
+ show(position) {
+ this.visible = true;
+ this.style.display = 'block';
+ }
+
+ showAtNode(node) {
+ const bbox = node.getBoundingClientRect();
+ this.show([bbox.right, bbox.bottom]);
+ }
+
+ hide() {
+ this.visible = false;
+ this.style.display = 'none';
+ this.stopTimeout();
+ }
+
+ stopTimeout() {
+ if (this.timeout) {
+ clearTimeout(this.timeout);
+ }
+ }
+
+ extendTimeout(time) {
+ this.stopTimeout();
+ this.timeout = setTimeout(() => {
+ this.hide();
+ }, time);
+ }
+
+}
diff --git a/src/helpers/hover-box.js b/src/helpers/hover-box.js
deleted file mode 100644
index 5194e87..0000000
--- a/src/helpers/hover-box.js
+++ /dev/null
@@ -1,109 +0,0 @@
-// function make_hover_css(target_node, pos) {
-// const pretty = window.innerWidth > 600;
-// const padding = pretty? 18 : 12;
-// const outer_padding = pretty ? 18 : 0;
-// // const bbox = document.querySelector('body').getBoundingClientRect();
-// const bbox = target_node.offsetParent.getBoundingClientRect();
-// let left = pos[0] - bbox.left, top = pos[1] - bbox.top;
-// let width = Math.min(window.innerWidth-2*outer_padding, 648);
-// left = Math.min(left, window.innerWidth-width-outer_padding);
-// width = width - 2 * padding;
-// return (`position: absolute;
-// background-color: #FFF;
-// opacity: 0.95;
-// max-width: ${width}px;
-// top: ${top}px;
-// left: ${left}px;
-// border: 1px solid rgba(0, 0, 0, 0.25);
-// padding: ${padding}px;
-// border-radius: ${pretty? 3 : 0}px;
-// box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);
-// z-index: ${1e6};`);
-// }
-
-export class HoverBox {
-
- constructor(contentHTML, triggerElement) {
- this.visible = false;
- // div hold teh contents of the box that will become visible
- this.div = contentHTML;
- this.bindDivEvents(this.div);
- // triggerElement holds the element that needs to be hovered etc to show contents
- this.triggerElement = triggerElement;
- this.bindTriggerEvents(this.triggerElement);
- this.hide();
- }
-
- bindDivEvents(node) {
- // For mice, same behavior as hovering on links
- this.div.addEventListener('mouseover', () => {
- if (!this.visible) this.showAtNode(node);
- this.stopTimeout();
- });
- this.div.addEventListener('mouseout', () => {
- this.extendTimeout(500);
- });
- // Don't trigger body touchstart event when touching within box
- this.div.addEventListener('touchstart', (event) => {
- event.stopPropagation();
- }, {passive: true});
- // Close box when touching outside box
- document.body.addEventListener('touchstart', () => {
- this.hide();
- }, {passive: true});
- }
-
- bindTriggerEvents(node) {
- node.addEventListener('mouseover', () => {
- if (!this.visible) {
- this.showAtNode(node);
- }
- this.stopTimeout();
- });
-
- node.addEventListener('mouseout', () => {
- this.extendTimeout(500);
- });
-
- node.addEventListener('touchstart', (event) => {
- if (this.visible) {
- this.hide();
- } else {
- this.showAtNode(node);
- }
- // Don't trigger body touchstart event when touching link
- event.stopPropagation();
- }, {passive: true});
- }
-
- show(position) {
- this.visible = true;
- // const css = make_hover_css(this.triggerElement, position);
- this.div.setAttribute('style', 'display: block;' );
- }
-
- showAtNode(node) {
- const bbox = node.getBoundingClientRect();
- this.show([bbox.right, bbox.bottom]);
- }
-
- hide() {
- this.visible = false;
- this.div.setAttribute('style', 'display: none;');
- this.stopTimeout();
- }
-
- stopTimeout() {
- if (this.timeout) {
- clearTimeout(this.timeout);
- }
- }
-
- extendTimeout(time) {
- this.stopTimeout();
- this.timeout = setTimeout(() => {
- this.hide();
- }, time);
- }
-
-}
diff --git a/src/styles/styles-base.css b/src/styles/styles-base.css
index da6d929..cc679d7 100644
--- a/src/styles/styles-base.css
+++ b/src/styles/styles-base.css
@@ -10,7 +10,9 @@ html {
}
@media(min-width: 768px) {
- font-size: 16px;
+ html {
+ font-size: 16px;
+ }
}
body {