From c66017e0e0675def125d683746bb4fac8e04bf09 Mon Sep 17 00:00:00 2001 From: SheetJS Date: Thu, 30 Nov 2023 02:16:08 -0500 Subject: [PATCH] initial --- favicon.ico | Bin 0 -> 318 bytes index.html | 513 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 513 insertions(+) create mode 100644 favicon.ico create mode 100644 index.html diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..73b6e82b4a39f4a6e416b5cb2361496529b33fed GIT binary patch literal 318 zcmb77u@QqX5R>mRfS)221(=2r*e=YGCIc`K$3_wK#y#9Imyibx(df7nIlXF&n zpijUPK(EM(MnRu58apxL%-z>?s^6ynlEhT42vKM#T}q2VXc7H6Nio|Swh(^og~mI# eGVqW+ISyc1fZyu)YydITz-xE#9)9ex!|n;ltS0sV literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 0000000..fce83c2 --- /dev/null +++ b/index.html @@ -0,0 +1,513 @@ + + + +Only <SPAN>s + + +Each element on this page is a SPAN element. No elements are dynamically added to the page. + + + +Styles + +Each SPAN specifies styling properties through the `style` attribute. + +This is bold +This is italicized +These effects are impossible + +Show Code +```html +This is <span style="font-weight: 700">bold</span> +This is <span style="font-style: italic">italicized</span> +<span style="text-decoration: line-through">These effects are impossible</span> +``` +Line Breaks + +Newline characters are normally treated like spaces. They do not force a line break. `BR` elements force line breaks. + +Normally, newline characters +do not actually break lines. They +are treated like space characters. + +Show Code +```html +<span style="white-space: normal;">Normally, newline characters +do not actually break lines. They +are treated like space characters.</span> +``` +When SPAN elements have the styling property white-space: pre-wrap, newline characters in the HTML code are treated as line breaks. + +With pre-wrap, newline characters +actually break lines and +are not treated like space characters + +Show Code +```html +<span style="white-space: pre-wrap;">With pre-wrap, newline characters +actually break lines and +are not treated like space characters</span> +``` +CSS Tables + +CSS Level 3 supports special values for the `display` styling property: + + + + Value + Behavior + + + table + Acts like TABLE + + + table-row + Acts like TR + + + table-cell + Acts like TD + + +Show Code +```html +<span style="display: table"> + <span style="display: table-row"> + <span style="display: table-cell">Value</span> + <span style="display: table-cell">Behavior</span> + </span> + <span style="display: table-row"> + <span style="display: table-cell">table</span> + <span style="display: table-cell">Acts like TABLE</span> + </span> +</span> +``` +Using these special style properties, SPAN elements can create simple table layouts. Unfortunately there is no equivalent of `colspan` and `rowspan` ("merge cells" in Excel parlance) + +Images + +Images can be added to pages using the `background-image` inline style. To ensure spans are displayed, the `width`, `height` and `display` attributes are set: + + + +Show Code +```html +<span style=" + width: 128px; + height: 128px; + background-image: url('https://sheetjs.com/sketch128.png'); + display: inline-block; +"></span> +``` + + + +Dynamic Elements + +Inline event handlers allow for some scripting without introducing explicit SCRIPT tags. + +The following example uses the `onclick` inline event handler to increment a counter: + +The blue span has been clicked 0 times + +Show Code +```html + <span onclick="(function() { + event.target.innerText = (+event.target.innerText) + 1; + })()">0</span> +``` +Effectuating `onload` + +SPAN elements do not receive a `load` event. Instead, this page uses a `contenteditable` SPAN with an `autofocus` attribute. This ensures the `onfocus` inline handler is called. + +If multiple elements have the `autofocus` attribute, only the first element will receive focus. + +To simplify the page, the `contenteditable autofocus` SPAN will send a synthetic double click (`dblclick`) event to each SPAN element on the page before hiding itself: + +The relevant SPAN is at the top of the page (line 6 in the source). If it were placed here, the browser would scroll to this SPAN. + +Show Code +```html +<span contenteditable autofocus onfocus="(function(){ + [...document.getElementsByTagName('SPAN')].forEach(function(n) { + var evt = document.createEvent('MouseEvents'); + evt.initEvent('dblclick', true, true); + n.dispatchEvent(evt); + }); + event.target.style.visibility = 'hidden'; +})()"></span> +``` +Within the `ondblclick` inline handler, the SPAN DOM element can be referenced with the `target` property of the `event` global. + +The following example shows the current time. The `ondblclick` event handler uses `setInterval` to set up a loop that updates the time. Clearing the `ondblclick` property ensures that a real double click will not invoke the original handler. + +The time is now + +Show Code +```html + <span style="font-family: monospace" ondblclick="(function() { + var last = new Date().toString(), tgt = event.target; + tgt.innerText = last; + setInterval(function() { + var cur = new Date().toString(); + if(last != cur) tgt.innerText = last = cur; + }, 100); + tgt.ondblclick = null; + })()"></span> +``` +Emulating CSS Classes + +Within the `onfocus` handler of the `autofocus` SPAN, every SPAN element on the page is visited. The `classList` property is a list of class names. Code can manually apply styling properties. + +The code blocks that are displayed with the "Show Code" buttons use the `codeblock` class. + +Show Code +```html +<span contenteditable autofocus onfocus="(function(){ + [...document.getElementsByTagName('SPAN')].forEach(function(n) { + /* configure 'codeblock' spans */ + if(n.classList.contains('codeblock')) { + var S = n.style; + S['font-family'] = 'monospace'; + S['display'] = 'none'; + } + })()"></span> +``` +Fetching Data + +The `ondblclick` handler can fetch data. The following example fetches a text file: + +The current version of SheetJS Community Edition is + +Show Code +```html + <span ondblclick="(async function() { + const versions = await (await fetch('https://cdn.sheetjs.com/xlsx.lst')).text(); + event.target.innerText = versions.trim().split('\n').reverse()[0]; + })()"></span> +``` +Editable Elements + +The `contenteditable` attribute allows users to edit the content of SPAN elements. An `input` event is dispatched when the content has changed. + +The following example includes one `contenteditable` SPAN and one non-editable SPAN. The `oninput` event handler of the first SPAN changes the `innerText` property of the second SPAN. + +Click the text span below and start typing: + +Click here and start typing! + +The following span will update when the previous span is edited: + +Edit the previous span +External Scripts + +External scripts can be fetched and evaluated using `eval`. + +The following example fetches the SheetJS SSF Library and displays the version number. + +The current version of the SheetJS SSF number formatting library is + +Show Code +```html + <span ondblclick="(async function() { + const url = 'https://cdn.sheetjs.com/ssf-0.11.3/ssf.js'; + const code = await (await fetch(url)).text(); + eval(ssf_text); + event.target.innerText = SSF.version; + })()"></span> +``` +This example uses the SheetJS SSF Library to format values. The SPAN elements with green borders are editable. When either SPAN is changed, the "Number Value" SPAN content is interpreted as a JS `Number` and formatted using the Format Code. + +The "Formatted Text" is automatically calculated from the "Format Code" and "Number Value". Try setting the "Format Code" to #,##0.00 and the value to 314159.265 + + + + Format Code + $0.00 + + + Number Value + 3.5 + +   + + Formatted Text + $3.50 + + + + + +SheetJS LLC has been "making sheet happen" with creative use of HTML, CSS and JS since 2012. If pushing the limits of the web tickles your fancy, consider joining us! + + +