31:T413,// generator which updates when window resizes windowSize = { const getObservableSize = () => { const style = window.getComputedStyle(document.body); const properties = [ 'margin-left', 'margin-right', 'margin-top', 'margin-bottom' ]; const [ leftMargin, rightMargin, topMargin, bottomMargin ] = properties.map(d => Number.parseInt(style.getPropertyValue(d))); return { innerWidth: width - (leftMargin + rightMargin), innerHeight: height - (topMargin + bottomMargin) }; }; while (true) { const { innerWidth, innerHeight } = hostedOnThumbtools ? window : getObservableSize(); yield { width: innerWidth, height: innerHeight }; //await new Promise(resolve => window.addEventListener('resize', resolve, { capture: false, once: true })); await new Promise(resolve => window.addEventListener( 'resize', () => { resolve(); }, { capture: false, once: true } ) ); } }32:[] 2f:{"title":"Viewable Notebook Template","cells":[{"id":0,"value":"md`# Viewable Notebook Template\n\nThis notebook illustrates the use of a [Github Pages](https://pages.github.com/) hosted [notebook viewer](https://github.com/trebor/notebook-view/).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"__globalStyle = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"__simpleHtml = renderHtml(windowSize);","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"__simpleSvg = renderSvg(windowSize);","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"renderHtml = ({ width, height }) => html`\n

Width: ${windowSize.width}

Height: ${windowSize.height}

Notebook View: ${hostedOnThumbtools}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"renderSvg = ({ width, height}) => {\n const svg = DOM.svg(width, height);\n\n d3.select(svg)\n .append('ellipse')\n .attr('fill', 'rgba(255, 0, 255, 0.5)')\n .attr('cx', width / 2)\n .attr('cy', height / 2)\n .attr('rx', width / 2)\n .attr('ry', height / 2);\n \n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"inNotebookView = () => !!window.__notebook_view","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"hostedOnThumbtools = !!window.__notebook_view","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3@5.8')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}