wassname/template
1
0
Fork 0
mirror of https://github.com/wassname/template.git synced 2026-06-27 16:32:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'v2' of github.com:distillpub/template into v2

Browse Source
This commit is contained in:
Ludwig Schubert
2017-10-24 14:05:40 -07:00
parent bc68238be9 94bba88924
commit 00076d3123
14 changed files with 252 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/article.html
+3
View File
@@ -2,9 +2,12 @@
<head>
<script src="../dist/template.v2.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" >
<meta charset="utf8">
</head>
<body>
<distill-header></distill-header>
<d-front-matter>
<script id='distill-front-matter' type="text/json">{
"title": "Why Momentum Really Works",
src/components.js
+2 -1
View File
@@ -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
];
src/components/d-article.js
-1
View File
@@ -1,6 +1,5 @@
import { Template } from '../mixins/template';
import { Controller } from '../controller';
import style from '../styles/d-article.css';
const isOnlyWhitespace = /^\s*$/;
src/components/d-cite.js
+7 -29
View File
@@ -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', `
<style>
@@ -35,31 +34,13 @@ figcaption .citation-number {
line-height: 1em;
}
.container {
position: fixed;
width: 100%;
left: 0;
z-index: 10000;
margin-top: 2em;
}
.dt-hover-box {
margin: 0 auto;
width: 400px;
max-width: 700px;
background-color: #FFF;
opacity: 0.95;
border: 1px solid rgba(0, 0, 0, 0.25);
padding: 8px 16px;
border-radius: 3px;
box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);
d-hover-box {
margin-top: 1.9em;
}
</style>
<div class="container">
<div id="hover-box" class="dt-hover-box"></div>
</div>
<d-hover-box id="hover-box"></d-hover-box>
<div id="citation-" class="citation"><slot></slot><span class="citation-number"></span></div>
`);
@@ -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() {
src/components/d-footnote.js
+14 -16
View File
@@ -1,5 +1,4 @@
import { Template } from '../mixins/template.js';
import { HoverBox } from '../helpers/hover-box';
const T = Template('d-footnote', `
<style>
@@ -9,7 +8,6 @@ d-math[block] {
}
:host {
position: relative;
}
sup {
@@ -26,7 +24,7 @@ span {
}
.container {
position: fixed;
position: absolute;
width: 100%;
left: 0;
z-index: 10000;
@@ -34,23 +32,22 @@ span {
.dt-hover-box {
margin: 0 auto;
width: 400px;
max-width: 700px;
width: 704px;
max-width: 100vw;
background-color: #FFF;
opacity: 0.95;
border: 1px solid rgba(0, 0, 0, 0.25);
padding: 8px 16px;
border-radius: 3px;
box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
}
</style>
<div class="container">
<div id="hover-box" class="dt-hover-box">
<slot id="slot"></slot>
</div>
</div>
<d-hover-box>
<slot id="slot"></slot>
</d-hover-box>
<sup>
<span id="fn-" data-hover-ref=""></span>
@@ -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);
}
}
src/components/d-hover-box.js
+132
View File
@@ -0,0 +1,132 @@
import { Template } from '../mixins/template.js';
const T = Template('d-hover-box', `
<style>
:host {
position: absolute;
width: 100%;
left: 0;
z-index: 10000;
display: none;
}
.container {
position: relative;
width: 704px;
max-width: 100vw;
margin: 0 auto;
}
.panel {
position: absolute;
top: 0;
left: 0;
width: 100%;
border: 1px solid rgba(0, 0, 0, 0.1);
background-color: rgb(250, 250, 250);
box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
border-radius: 4px;
padding: 10px;
box-sizing: border-box;
}
</style>
<div class="container">
<div class="panel">
<slot></slot>
</div>
</div>
`);
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);
}
}
src/components/d-title.js
+2 -49
View File
@@ -1,50 +1,3 @@
import { Template } from '../mixins/template';
const T = Template('d-title', `
<style>
:host {
padding: 4rem 0 1.5rem;
contain: content;
display: block;
}
::slotted(h1) {
grid-column: text;
font-size: 60px;
font-weight: 600;
line-height: 1.05em;
margin: 0 0 1rem;
}
::slotted(p) {
font-weight: 300;
font-size: 1.5rem;
line-height: 1.2em;
grid-column: text;
}
.status {
margin-top: 0px;
font-size: 12px;
color: #009688;
opacity: 0.8;
grid-column: kicker;
}
.status span {
line-height: 1;
display: inline-block;
padding: 6px 0;
border-bottom: 1px solid #80cbc4;
font-size: 11px;
text-transform: uppercase;
}
</style>
<!-- <div class="status"><span>✓ Peer Reviewed</span></div> -->
<slot></slot>
`);
export class Title extends T(HTMLElement) {
export class Title extends HTMLElement {
static get is() { return 'd-title'; }
}
src/distill-components/distill-footer.js
+1 -1
View File
@@ -7,7 +7,7 @@ const T = Template('distill-footer', `
:host {
color: rgba(255, 255, 255, 0.5);
font-weight: 300;
padding: 60px 0;
padding: 2rem 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
background-color: hsl(180, 5%, 15%); /*hsl(200, 60%, 15%);*/
text-align: left;
src/helpers/hover-box.js
-109
View File
@@ -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);
}
}
src/styles/d-article.css
+10 -3
View File
@@ -3,6 +3,7 @@ d-article {
border-top: 1px solid rgba(0, 0, 0, 0.1);
padding-top: 2rem;
color: rgba(0, 0, 0, 0.8);
overflow: hidden;
}
d-article > * {
@@ -17,7 +18,7 @@ d-article > * {
@media(min-width: 1024px) {
d-article {
font-size: 1rem;
font-size: 1.06rem;
line-height: 1.7em;
}
}
@@ -102,7 +103,6 @@ d-article blockquote {
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
-webkit-font-smoothing: antialiased;
}
d-article blockquote {
@@ -132,11 +132,15 @@ d-article ol {
}
d-article li {
margin-bottom: 24px;
margin-bottom: 1em;
margin-left: 0;
padding-left: 0;
}
d-article li:last-child {
margin-bottom: 0;
}
d-article pre {
font-size: 14px;
margin-bottom: 20px;
@@ -165,11 +169,14 @@ d-article span.equation-mimic {
d-article > d-code,
d-article section > d-code {
display: block;
overflow-x: scroll;
}
d-article > d-math[block],
d-article section > d-math[block] {
display: block;
overflow-x: scroll;
}
d-article .citation {
src/styles/d-byline.css
+17 -3
View File
@@ -7,14 +7,28 @@ d-byline {
min-height: 1.8em;
}
d-byline .byline {
grid-template-columns: 2fr 1fr 1fr;
grid-template-columns: 1fr 1fr;
grid-column: text;
}
d-byline .authors-affiliations {
grid-template-columns: 1fr 1fr;
@media(min-width: 768px) {
d-byline .byline {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
d-byline .authors-affiliations {
grid-column-end: span 2;
grid-template-columns: 1fr 1fr;
margin-bottom: 1em;
}
@media(min-width: 768px) {
d-byline .authors-affiliations {
margin-bottom: 0;
}
}
d-byline h3 {
src/styles/d-title.css
+55
View File
@@ -0,0 +1,55 @@
d-title {
padding: 2rem 0 1.5rem;
contain: content;
overflow: hidden;
}
@media(min-width: 768px) {
d-title {
padding: 4rem 0 1.5rem;
}
}
d-title h1 {
grid-column: text;
font-size: 40px;
font-weight: 700;
line-height: 1.05em;
margin: 0 0 1rem;
}
@media(min-width: 768px) {
d-title h1 {
font-size: 60px;
}
}
d-title p {
font-weight: 300;
font-size: 1.2rem;
line-height: 1.7em;
grid-column: text;
}
@media(min-width: 768px) {
d-title p {
font-size: 1.5rem;
}
}
d-title .status {
margin-top: 0px;
font-size: 12px;
color: #009688;
opacity: 0.8;
grid-column: kicker;
}
d-title .status span {
line-height: 1;
display: inline-block;
padding: 6px 0;
border-bottom: 1px solid #80cbc4;
font-size: 11px;
text-transform: uppercase;
}
src/styles/styles-base.css
+7 -1
View File
@@ -1,5 +1,5 @@
html {
font-size: 16px;
font-size: 14px;
line-height: 1.6em;
/* font-family: "Libre Franklin", "Helvetica Neue", sans-serif; */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
@@ -9,6 +9,12 @@ html {
-webkit-text-size-adjust: 100%;
}
@media(min-width: 768px) {
html {
font-size: 16px;
}
}
body {
margin: 0;
}
src/styles/styles.js
+2 -1
View File
@@ -3,9 +3,10 @@ import layout from './styles-layout.css';
import print from './styles-print.css';
import byline from './d-byline.css';
import article from './d-article.css';
import title from './d-title.css';
import math from './d-math.css';
export const styles = base + layout + byline + article + math + print;
export const styles = base + layout + title + byline + article + math + print;
export function makeStyleTag(dom) {