From 26f6f5e80f91900cb3fd457e772102ae23c7eda1 Mon Sep 17 00:00:00 2001 From: Valentin Boettcher Date: Fri, 11 Jan 2019 12:43:44 +0100 Subject: [PATCH] add popovers for footnotes --- README.org | 1 + css/highlight-style.css | 6 ++++++ js/main.js | 32 +++++++++++++++++++++----------- js/tippy.js | 2 ++ manifest.json | 4 ++-- 5 files changed, 32 insertions(+), 13 deletions(-) create mode 100644 js/tippy.js diff --git a/README.org b/README.org index 9cae734..0680f26 100644 --- a/README.org +++ b/README.org @@ -11,6 +11,7 @@ the [[http://www.gigamonkeys.com/book/][online version]] of Practical Common Lis - =right-arrow-key= - next chapter - =left-arrow-key= - previous chapter - =HOME/POS1= - index page + - footnote popvers ** TODO - integrate full index into TOC diff --git a/css/highlight-style.css b/css/highlight-style.css index c8df7d8..d91d274 100644 --- a/css/highlight-style.css +++ b/css/highlight-style.css @@ -155,3 +155,9 @@ h2::before { counter-increment: chapter; /* Increment the value of section counter by 1 */ content: counters(chapter, '.') ' '; /* Display the value of section counter */ } + +.tippy-tooltip.pcl-theme { + background: white; + color: black; + border: solid black; +} diff --git a/js/main.js b/js/main.js index a675521..78d71ef 100644 --- a/js/main.js +++ b/js/main.js @@ -114,12 +114,13 @@ function collectFootnotes() { // collect al footnotes into pairs for(let note of document.querySelectorAll('sup')) { let index = parseInt(note.innerText) - 1; - + // JS forces me to do that! - if(footMap[index]) - footMap[index].push(note); - else - footMap[index] = [ note ]; + if(!footMap[index]) + footMap[index] = {}; + + footMap[index][note.parentElement.parentElement.classList.contains('notes') ? + 'target' : 'origin'] = note; } return footMap; @@ -135,17 +136,26 @@ function linkFootnotes() { origin.innerHTML = ''; origin.appendChild(link); }; + + function createPopover(index, origin, target) { + let content = target.parentElement.innerHTML; + content = content.substring(`${index+1}`.length-1); + if(target.parentElement.nextSibling.tagName !== 'P') + content += '…'; + + tippy(origin, { content, animateFill: false, animation: 'fade', theme: 'pcl'}); + } let footMap = collectFootnotes(); for(let index in footMap) { let pair = footMap[index]; - if(pair && pair.length == 2) { - let first = pair[0]; - let second = pair[1]; - - identifyAndLink(index, 1, 2, first, second); - identifyAndLink(index, 2, 1, second, first); + if(pair && 'origin' in pair && 'target' in pair) { + let origin = pair.origin; + let target = pair.target; + createPopover(index, origin, target); + identifyAndLink(index, 1, 2, origin, target); + identifyAndLink(index, 2, 1, target, origin); } } } diff --git a/js/tippy.js b/js/tippy.js new file mode 100644 index 0000000..84ce70b --- /dev/null +++ b/js/tippy.js @@ -0,0 +1,2 @@ +(function(e,t){'object'==typeof exports&&'undefined'!=typeof module?module.exports=t():'function'==typeof define&&define.amd?define(t):e.tippy=t()})(this,function(){'use strict';function e(e){return e&&'[object Function]'==={}.toString.call(e)}function t(e,t){if(1!==e.nodeType)return[];var r=e.ownerDocument.defaultView,a=r.getComputedStyle(e,null);return t?a[t]:a}function r(e){return'HTML'===e.nodeName?e:e.parentNode||e.host}function a(e){if(!e)return document.body;switch(e.nodeName){case'HTML':case'BODY':return e.ownerDocument.body;case'#document':return e.body;}var p=t(e),o=p.overflow,i=p.overflowX,n=p.overflowY;return /(auto|scroll|overlay)/.test(o+n+i)?e:a(r(e))}function p(e){return 11===e?ht:10===e?bt:ht||bt}function o(e){if(!e)return document.documentElement;for(var r=p(10)?document.body:null,a=e.offsetParent||null;a===r&&e.nextElementSibling;)a=(e=e.nextElementSibling).offsetParent;var i=a&&a.nodeName;return i&&'BODY'!==i&&'HTML'!==i?-1!==['TH','TD','TABLE'].indexOf(a.nodeName)&&'static'===t(a,'position')?o(a):a:e?e.ownerDocument.documentElement:document.documentElement}function n(e){var t=e.nodeName;return'BODY'!==t&&('HTML'===t||o(e.firstElementChild)===e)}function s(e){return null===e.parentNode?e:s(e.parentNode)}function l(e,t){if(!e||!e.nodeType||!t||!t.nodeType)return document.documentElement;var r=e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING,a=r?e:t,p=r?t:e,i=document.createRange();i.setStart(a,0),i.setEnd(p,0);var d=i.commonAncestorContainer;if(e!==d&&t!==d||a.contains(p))return n(d)?d:o(d);var c=s(e);return c.host?l(c.host,t):l(e,s(t).host)}function d(e){var t=1=r.clientWidth&&a>=r.clientHeight}),d=0')):t.className='tippy-arrow',t}function ne(){var e=ee();return e.className='tippy-backdrop',e.setAttribute('data-state','hidden'),e}function se(e,t){e.setAttribute('tabindex','-1'),t.setAttribute('data-interactive','')}function le(e,t){e.removeAttribute('tabindex'),t.removeAttribute('data-interactive')}function de(e,t){e.forEach(function(e){e&&(e.style.transitionDuration=t+'ms')})}function ce(e,t,r){e[t+'EventListener']('transitionend',r)}function me(e){var t=e.getAttribute('x-placement');return t?t.split('-')[0]:''}function fe(e,t){e.forEach(function(e){e&&e.setAttribute('data-state',t)})}function he(e){void e.offsetHeight}function be(e,t){var r=ee();r.className='tippy-popper',r.setAttribute('role','tooltip'),r.id='tippy-'+e,r.style.zIndex=t.zIndex;var a=ee();a.className='tippy-tooltip',a.style.maxWidth=t.maxWidth+('number'==typeof t.maxWidth?'px':''),a.setAttribute('data-size',t.size),a.setAttribute('data-animation',t.animation),a.setAttribute('data-state','hidden'),t.theme.split(' ').forEach(function(e){a.classList.add(e+'-theme')});var p=ee();return p.className='tippy-content',p.setAttribute('data-state','hidden'),t.interactive&&se(r,a),t.arrow&&a.appendChild(ie(t.arrowType)),t.animateFill&&(a.appendChild(ne()),a.setAttribute('data-animatefill','')),t.inertia&&pe(a),re(p,t),a.appendChild(p),r.appendChild(a),r.addEventListener('focusout',function(t){t.relatedTarget&&r._tippy&&!$(t.relatedTarget,function(e){return e===r})&&t.relatedTarget!==r._tippy.reference&&r._tippy.props.shouldPopperHideOnBlur(t)&&r._tippy.hide()}),r}function ye(e,t,r){var a=ae(e),p=a.tooltip,o=a.content,i=a.backdrop,n=a.arrow;e.style.zIndex=r.zIndex,p.setAttribute('data-size',r.size),p.setAttribute('data-animation',r.animation),p.style.maxWidth=r.maxWidth+('number'==typeof r.maxWidth?'px':''),t.content!==r.content&&re(o,r),!t.animateFill&&r.animateFill?(p.appendChild(ne()),p.setAttribute('data-animatefill','')):t.animateFill&&!r.animateFill&&(p.removeChild(i),p.removeAttribute('data-animatefill')),!t.arrow&&r.arrow?p.appendChild(ie(r.arrowType)):t.arrow&&!r.arrow&&p.removeChild(n),t.arrow&&r.arrow&&t.arrowType!==r.arrowType&&p.replaceChild(ie(r.arrowType),n),!t.interactive&&r.interactive?se(e,p):t.interactive&&!r.interactive&&le(e,p),!t.inertia&&r.inertia?pe(p):t.inertia&&!r.inertia&&oe(p),t.theme!==r.theme&&(t.theme.split(' ').forEach(function(e){p.classList.remove(e+'-theme')}),r.theme.split(' ').forEach(function(e){p.classList.add(e+'-theme')}))}function ue(e,t){var r=e.popper,a=e.options,p=a.onCreate,o=a.onUpdate;a.onCreate=a.onUpdate=function(){he(r),t(),o(),a.onCreate=p,a.onUpdate=o}}function ge(e){J(document.querySelectorAll(Ct.POPPER)).forEach(function(t){var r=t._tippy;r&&!0===r.props.hideOnClick&&(!e||t!==e.popper)&&r.hide()})}function xe(e,t,r,a){if(!e)return!0;var p=r.clientX,o=r.clientY,i=a.interactiveBorder,n=a.distance,s=t.top-o>('top'===e?i+n:i),l=o-t.bottom>('bottom'===e?i+n:i),d=t.left-p>('left'===e?i+n:i),c=p-t.right>('right'===e?i+n:i);return s||l||d||c}function we(e,t){return-(e-t)+'px'}function ve(){At||(At=!0,ot&&document.body.classList.add('tippy-iOS'),window.performance&&document.addEventListener('mousemove',ke))}function ke(){var e=performance.now();20>e-Yt&&(At=!1,document.removeEventListener('mousemove',ke),!ot&&document.body.classList.remove('tippy-iOS')),Yt=e}function Ee(e){var t=e.target;if(!(t instanceof Element))return ge();var r=Z(t,Ct.POPPER);if(!(r&&r._tippy&&r._tippy.props.interactive)){var a=$(t,function(e){return e._tippy&&e._tippy.reference===e});if(a){var p=a._tippy,o=-1o&&(l=Ke(r,window.innerWidth-o)),n&&d>o&&(d=Ke(a,window.innerHeight-o));var c=q.reference.getBoundingClientRect(),m=q.props.followCursor,f='horizontal'===m,h='vertical'===m;q.popperInstance.reference={getBoundingClientRect:function(){return{width:0,height:0,top:f?c.top:d,bottom:f?c.bottom:d,left:h?c.left:l,right:h?c.right:l}},clientWidth:0,clientHeight:0},q.popperInstance.scheduleUpdate(),'initial'===m&&q.state.isVisible&&s()}}function o(e){var t=Z(e.target,q.props.target);t&&!t._tippy&&(qe(t,Dt({},q.props,{target:'',showOnInit:!0})),i(e))}function i(e){if(T(),!q.state.isVisible){if(q.props.target)return o(e);if(B=!0,q.props.wait)return q.props.wait(q,e);x()&&document.addEventListener('mousemove',p);var t=Pe(q.props.delay,0,nt.delay);t?H=setTimeout(function(){A()},t):A()}}function n(){if(T(),!q.state.isVisible)return s();B=!1;var e=Pe(q.props.delay,1,nt.delay);e?W=setTimeout(function(){q.state.isVisible&&Y()},e):Y()}function s(){document.removeEventListener('mousemove',p),N=null}function l(){document.body.removeEventListener('mouseleave',n),document.removeEventListener('mousemove',F)}function d(e){!q.state.isEnabled||y(e)||(!q.state.isVisible&&(I=e),'click'===e.type&&!1!==q.props.hideOnClick&&q.state.isVisible?n():i(e))}function c(e){var t=$(e.target,function(e){return e._tippy}),r=Z(e.target,Ct.POPPER)===q.popper,a=t===q.reference;r||a||xe(me(q.popper),q.popper.getBoundingClientRect(),e,q.props)&&(l(),n())}function m(e){return y(e)?void 0:q.props.interactive?(document.body.addEventListener('mouseleave',n),void document.addEventListener('mousemove',F)):void n()}function f(e){if(e.target===q.reference){if(q.props.interactive){if(!e.relatedTarget)return;if(Z(e.relatedTarget,Ct.POPPER))return}n()}}function h(e){Z(e.target,q.props.target)&&i(e)}function b(e){Z(e.target,q.props.target)&&n()}function y(e){var t=-1l[e]&&!t.escapeWithReference&&(a=Ke(c[r],l[e]-('right'===e?c.width:c.height))),gt({},r,a)}};return d.forEach(function(e){var t=-1===['left','top'].indexOf(e)?'secondary':'primary';c=xt({},c,m[t](e))}),e.offsets.popper=c,e},priority:['left','right','top','bottom'],padding:5,boundariesElement:'scrollParent'},keepTogether:{order:400,enabled:!0,fn:function(e){var t=e.offsets,r=t.popper,a=t.reference,p=e.placement.split('-')[0],o=Ge,i=-1!==['top','bottom'].indexOf(p),n=i?'right':'bottom',s=i?'left':'top',l=i?'width':'height';return r[n]o(a[n])&&(e.offsets.popper[s]=o(a[n])),e}},arrow:{order:500,enabled:!0,fn:function(e,r){var a;if(!V(e.instance.modifiers,'arrow','keepTogether'))return e;var p=r.element;if('string'==typeof p){if(p=e.instance.popper.querySelector(p),!p)return e;}else if(!e.instance.popper.contains(p))return console.warn('WARNING: `arrow.element` must be child of its popper element!'),e;var o=e.placement.split('-')[0],i=e.offsets,n=i.popper,s=i.reference,l=-1!==['left','right'].indexOf(o),d=l?'height':'width',c=l?'Top':'Left',m=c.toLowerCase(),f=l?'left':'top',h=l?'bottom':'right',y=C(p)[d];s[h]-yn[h]&&(e.offsets.popper[m]+=s[m]+y-n[h]),e.offsets.popper=b(e.offsets.popper);var u=s[m]+s[d]/2-y/2,g=t(e.instance.popper),x=parseFloat(g['margin'+c],10),w=parseFloat(g['border'+c+'Width'],10),v=u-e.offsets.popper[m]-x-w;return v=Je(Ke(n[d]-y,v),0),e.arrowElement=p,e.offsets.arrow=(a={},gt(a,m,Qe(v)),gt(a,f,''),a),e},element:'[x-arrow]'},flip:{order:600,enabled:!0,fn:function(e,t){if(D(e.instance.modifiers,'inner'))return e;if(e.flipped&&e.placement===e.originalPlacement)return e;var r=v(e.instance.popper,e.instance.reference,t.padding,t.boundariesElement,e.positionFixed),a=e.placement.split('-')[0],p=L(a),o=e.placement.split('-')[1]||'',i=[];switch(t.behavior){case Et.FLIP:i=[a,p];break;case Et.CLOCKWISE:i=j(a);break;case Et.COUNTERCLOCKWISE:i=j(a,!0);break;default:i=t.behavior;}return i.forEach(function(n,s){if(a!==n||i.length===s+1)return e;a=e.placement.split('-')[0],p=L(a);var l=e.offsets.popper,d=e.offsets.reference,c=Ge,m='left'===a&&c(l.right)>c(d.left)||'right'===a&&c(l.left)c(d.top)||'bottom'===a&&c(l.top)c(r.right),b=c(l.top)c(r.bottom),u='left'===a&&f||'right'===a&&h||'top'===a&&b||'bottom'===a&&y,g=-1!==['top','bottom'].indexOf(a),x=!!t.flipVariations&&(g&&'start'===o&&f||g&&'end'===o&&h||!g&&'start'===o&&b||!g&&'end'===o&&y);(m||u||x)&&(e.flipped=!0,(m||u)&&(a=i[s+1]),x&&(o=q(o)),e.placement=a+(o?'-'+o:''),e.offsets.popper=xt({},e.offsets.popper,T(e.instance.popper,e.offsets.reference,e.placement)),e=Y(e.instance.modifiers,e,'flip'))}),e},behavior:'flip',padding:5,boundariesElement:'viewport'},inner:{order:700,enabled:!1,fn:function(e){var t=e.placement,r=t.split('-')[0],a=e.offsets,p=a.popper,o=a.reference,i=-1!==['left','right'].indexOf(r),n=-1===['top','left'].indexOf(r);return p[i?'left':'top']=o[r]-(n?p[i?'width':'height']:0),e.placement=L(t),e.offsets.popper=b(p),e}},hide:{order:800,enabled:!0,fn:function(e){if(!V(e.instance.modifiers,'hide','preventOverflow'))return e;var t=e.offsets.reference,r=S(e.instance.modifiers,function(e){return'preventOverflow'===e.name}).boundaries;if(t.bottomr.right||t.top>r.bottom||t.rightwindow.devicePixelRatio||!wt),m='bottom'===r?'top':'bottom',f='right'===a?'left':'right',h=X('transform'),b=void 0,y=void 0;if(y='bottom'==m?'HTML'===s.nodeName?-s.clientHeight+c.bottom:-l.height+c.bottom:c.top,b='right'==f?'HTML'===s.nodeName?-s.clientWidth+c.right:-l.width+c.right:c.left,n&&h)d[h]='translate3d('+b+'px, '+y+'px, 0)',d[m]=0,d[f]=0,d.willChange='transform';else{var g='bottom'==m?-1:1,x='right'==f?-1:1;d[m]=y*g,d[f]=b*x,d.willChange=m+', '+f}var w={"x-placement":e.placement};return e.attributes=xt({},w,e.attributes),e.styles=xt({},d,e.styles),e.arrowStyles=xt({},e.offsets.arrow,e.arrowStyles),e},gpuAcceleration:!0,x:'bottom',y:'right'},applyStyle:{order:900,enabled:!0,fn:function(e){return F(e.instance.popper,e.styles),_(e.instance.popper,e.attributes),e.arrowElement&&Object.keys(e.arrowStyles).length&&F(e.arrowElement,e.arrowStyles),e},onLoad:function(e,t,r,a,p){var o=O(p,t,e,r.positionFixed),i=E(r.placement,o,t,e,r.modifiers.flip.boundariesElement,r.modifiers.flip.padding);return t.setAttribute('x-placement',i),F(t,{position:r.positionFixed?'fixed':'absolute'}),r},gpuAcceleration:void 0}}};var Ct={POPPER:'.tippy-popper',TOOLTIP:'.tippy-tooltip',CONTENT:'.tippy-content',BACKDROP:'.tippy-backdrop',ARROW:'.tippy-arrow',ROUND_ARROW:'.tippy-roundarrow'},Lt=et?Element.prototype:{},Tt=Lt.matches||Lt.matchesSelector||Lt.webkitMatchesSelector||Lt.mozMatchesSelector||Lt.msMatchesSelector,St={x:!0},At=!1,Yt=0,Pt=Object.keys(nt),Dt=Object.assign||function(e){for(var t,r=1;r