Created
February 8, 2017 21:36
-
-
Save anonymous/81e0deac43af7b047b9d950fc8b99c64 to your computer and use it in GitHub Desktop.
Use JavaScript to fill a print form // source http://jsbin.com/kegajep
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Use JavaScript to fill a print form</title> | |
| <style id="jsbin-css"> | |
| @import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"; | |
| @page { | |
| size: auto; /* auto is the initial value */ | |
| margin: 5mm; | |
| } | |
| @media screen { | |
| body > section { | |
| width: 700px; | |
| margin: 10px auto; | |
| } | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| caption { | |
| text-align: center; | |
| font-weight: bold; | |
| font-size: 1.2em; | |
| color: #000; | |
| padding: 3px; | |
| } | |
| .doc-head { | |
| overflow: hidden; | |
| font-size: smaller; | |
| } | |
| .doc-head:first-child { | |
| border-bottom: 2px solid #000 !important; | |
| } | |
| table { | |
| width: 100%; | |
| font-size: 0.9em; | |
| border-bottom: 1px solid #ddd; | |
| table-layout: fixed; | |
| } | |
| .table>tbody+tbody { | |
| border-top: 0; | |
| } | |
| table > tbody:nth-child(0n+3) > tr > td { | |
| width: calc(100%/2); | |
| /*background-color: pink;*/ | |
| } | |
| table > tbody > tr > td { | |
| border-top: 0 !important; | |
| } | |
| table > * > tr > th:not(:first-child), | |
| table > * > tr > td:not(:first-child) { | |
| border-left: 1px solid #ddd; | |
| } | |
| th[data-field-number]:before { | |
| content: attr(data-field-number) "."; | |
| font-weight: normal; | |
| padding-right: 3px; | |
| } | |
| .limit { | |
| overflow: hidden; | |
| text-overflow: clip; | |
| } | |
| .limit-colorize .limit.limit-cover-alpha { | |
| background-color: blue; | |
| } | |
| .limit-colorize .limit.limit-cover-bravo { | |
| background-color: red; | |
| } | |
| .limit-colorize .limit.limit-cover-charlie { | |
| background-color: yellow; | |
| } | |
| .limit-colorize .limit.limit-cover-delta { | |
| background-color: green; | |
| } | |
| .limit-cover-alpha { | |
| max-height: 340px; | |
| } | |
| .limit-cover-bravo { | |
| max-height: 100px; | |
| } | |
| .limit-cover-charlie { | |
| max-height: 140px; | |
| height: 140px; | |
| } | |
| .limit-cover-delta { | |
| max-height: 40px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section> | |
| <div class=doc-head> | |
| <div class=pull-left>Lorem ipsum dolor sit amet, consectetur<br/>Elit curabitur egestas odio a volutpat</div> | |
| <div class=pull-right>Nullam consectetur<br/>Odio A. No. 1111-2222</div> | |
| </div> | |
| <table class=table> | |
| <caption>ETIAM EFFICITUR RISUS SED COMODO POSUERE</caption> | |
| <tbody> | |
| <tr> | |
| <th id="field-1">Suspendisse potenti</th> | |
| <th id="field-2">Pellentesque varius Date</th> | |
| <th id="field-3">Elit imperdiet laoreet</th> | |
| <th id="field-4">Vivamus a pulvinar</th> | |
| <th id="field-5" colspan=2>Finibus enim No.</th> | |
| </tr> | |
| <tr> | |
| <td headers="field-1"><output id=f1 class="limit limit-cover-delta"></output></td> | |
| <td headers="field-2"><output id=f2 class="limit limit-cover-delta"></output></td> | |
| <td headers="field-3"><output id=f3 class="limit limit-cover-delta"></output></td> | |
| <td headers="field-4"><output id=f4 class="limit limit-cover-delta"></output></td> | |
| <td headers="field-5" colspan=2><output id=f5 class="limit limit-cover-delta"></output></td> | |
| </tr> | |
| </tbody> | |
| <tbody> | |
| <tr> | |
| <th id="field-6" colspan=3>Pellentesque Name and Address</th> | |
| <th id="field-7" colspan=3>Pellentesque eget’s Name, Address and Telephone Number</th> | |
| </tr> | |
| <tr> | |
| <td headers="field-6" colspan=3><output id=f6 class="limit limit-cover-charlie"></output></td> | |
| <td headers="field-7" colspan=3><address id=f7 class="limit limit-cover-charlie"></address></td> | |
| </tr> | |
| </tbody> | |
| <tbody> | |
| <tr> | |
| <th id="field-8" colspan=3>Date of Birth</th> | |
| <th id="field-9" colspan=1>Sex</th> | |
| <th id="field-10" colspan=2>Risus maximus, feugiat dictum nunc.</th> | |
| </tr> | |
| <tr> | |
| <td headers="field-8" colspan=3><output id=f8 class="limit limit-cover-charlie"></output></td> | |
| <td headers="field-9" colspan=1><div id=f9 class="limit limit-cover-delta"></div></td> | |
| <td headers="field-10" colspan=2 rowspan=7><div id=f10 class="limit limit-cover-alpha"></div></td> | |
| </tr> | |
| <tr> | |
| <th id="field-11">ABC</th> | |
| <th id="field-11a" colspan=2>Nam fringilla velit mattis</th> | |
| <th id="field-11b">Date</th> | |
| </tr> | |
| <tr> | |
| <td headers="field-11"><div id=f11 class="limit limit-cover-bravo"></div></td> | |
| <td headers="field-11a" colspan=2><div id=f11a class="limit limit-cover-bravo"></div></td> | |
| <td headers="field-11b"><div id=f11b class="limit limit-cover-delta"></div></td> | |
| </tr> | |
| <tr> | |
| <th id="field-12">123</th> | |
| <th id="field-12a" colspan=2>Aenean iaculis</th> | |
| <th id="field-12b">Date</th> | |
| </tr> | |
| <tr> | |
| <td headers="field-12"><div id=f12 class="limit limit-cover-bravo"></div></td> | |
| <td headers="field-12a" colspan=2><div id=f12a class="limit limit-cover-bravo"></div></td> | |
| <td headers="field-12b"><div id=f12b class="limit limit-cover-delta"></div></td> | |
| </tr> | |
| <tr> | |
| <th id="field-13">DO RE MI</th> | |
| <th id="field-13a" colspan=2>Sed ultricies sed lectus</th> | |
| <th id="field-13b">Date</th> | |
| </tr> | |
| <tr> | |
| <td headers="field-13"><div id=f13 class="limit limit-cover-bravo"></div></td> | |
| <td headers="field-13a" colspan=2><div id=f13a class="limit limit-cover-bravo"></div></td> | |
| <td headers="field-13b"><div id=f13b class="limit limit-cover-delta"></div></td> | |
| </tr> | |
| </tbody> | |
| <tbody> | |
| <tr> | |
| <th id="field-14" colspan=4> Quisque vel erat dignissim</th> | |
| <th id="field-15" colspan=2>Aliquam a enim ultrice</th> | |
| </tr> | |
| <tr> | |
| <td headers="field-14" colspan=4><div id=f14 class="limit limit-cover-charlie"></div></td> | |
| <td headers="field-15" colspan=2><div id=f15 class="limit limit-cover-charlie"></div></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </section> | |
| <script id="jsbin-javascript"> | |
| (function(w,d){ | |
| 'use strict'; | |
| var useMe = d.querySelector('#f10'); | |
| const onLoad = (eventObj) => { | |
| let d = eventObj.currentTarget.document, | |
| fields = d.querySelectorAll('th[id]'); | |
| for(const field of fields) { | |
| let idNbr = (/\d+$/.test(field.id)) ? /\d+/.exec(field.id) : null; | |
| if (idNbr) { | |
| field.dataset.fieldNumber = idNbr; | |
| } | |
| } | |
| //for(const a of useMe.childNodes.entries()) { console.log(a); }; | |
| } | |
| const someNumbers = (a) => a.crypto.getRandomValues((new Uint8Array(3))); | |
| var lipsum = []; | |
| lipsum.push('Lorem ipsum dolor sit amet, consectetur adipiscing elit.'); | |
| lipsum.push('Curabitur egestas odio a volutpat accumsan. Nullam consectetur nibh pulvinar pellentesque eleifend.'); | |
| lipsum.push('Nam nec varius erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean tincidunt elit eu nunc sodales venenatis.'); | |
| lipsum.push('Donec dictum ornare dolor vel posuere.'); | |
| lipsum.push('Vivamus pellentesque, dui at malesuada interdum, lorem tortor hendrerit elit, eu consectetur risus tellus ut dolor. Integer nec tellus nisi. Sed pulvinar bibendum mauris et pulvinar. Vivamus sollicitudin elit sed iaculis cursus. Quisque vulputate tellus eros, eget tempus ex egestas id. Integer malesuada auctor pulvinar. Pellentesque et libero tellus.'); | |
| lipsum.push('Etiam efficitur risus sed commodo posuere. Etiam nisl lacus, pulvinar ac finibus non, vestibulum eu est. Pulvinar at eleifend vel, porttitor ac diam. Praesent vel laoreet enim.'); | |
| lipsum.push('Vestibulum consectetur justo sed nisi tempor, sed finibus erat feugiat.'); | |
| lipsum.push('Nulla risus magna, malesuada quis luctus et, lacinia vel metus.'); | |
| lipsum.push('Nullam quis pharetra sapien.'); | |
| lipsum.push('Morbi id eros venenatis tortor eleifend vestibulum quis ut massa.'); | |
| lipsum.push('Morbi bibendum lobortis turpis, vel auctor diam. Morbi massa massa, feugiat vitae pharetra non, ullamcorper quis mi.'); | |
| lipsum.push('Sed placerat sed nulla sit amet laoreet. Ut eros ex, bibendum vitae dapibus at, auctor a magna.'); | |
| lipsum.push('Nullam non ligula eget elit finibus tempus et sed ante. Nulla varius tellus nec varius tincidunt. Vivamus a velit vitae nibh porta vestibulum.'); | |
| lipsum.push('Vestibulum pharetra metus eget dui condimentum, nec ultricies erat ornare. Etiam porttitor turpis vel varius malesuada.'); | |
| lipsum.push('Maecenas luctus elit erat, ut dictum eros facilisis sed. Nunc aliquam orci nec gravida mattis. Etiam imperdiet maximus risus. Phasellus porta nisi ut mauris sollicitudin tincidunt.'); | |
| lipsum.push('Etiam sagittis tristique turpis lacinia efficitur. Sed molestie arcu quam, in dictum magna sodales sed. Quisque tempus turpis et tempus ultrices. Fusce non nunc dapibus, placerat dui ut, pellentesque eros. Quisque semper libero non dui rhoncus, sed iaculis nisi blandit. Morbi sodales, sem nec dignissim interdum, purus risus egestas velit, eget suscipit ipsum risus ac mauris. Ut dui elit, mollis et aliquet et, consequat et nunc. Etiam et ex non tellus blandit ullamcorper. Vivamus a mollis nulla.'); | |
| lipsum.push('Nulla egestas rutrum elit, at laoreet eros ornare ac. Vestibulum ultricies sed felis eu pharetra. Maecenas sollicitudin volutpat tellus ut varius.'); | |
| lipsum.push('Suspendisse finibus, erat sed pharetra rhoncus, dolor quam auctor libero, vitae mattis mi sapien sed nibh. Integer vehicula libero risus, non accumsan est congue ac. Ut felis purus, vestibulum in diam quis, lacinia sodales ipsum. Integer quis maximus purus. Donec eu quam vitae quam luctus faucibus. Duis iaculis nunc nec mauris dictum molestie. Suspendisse suscipit est erat, vitae suscipit mi ultricies a. Ut aliquet eget turpis vitae imperdiet. Maecenas nisl enim, rhoncus at lorem ultricies, elementum accumsan enim. Quisque ligula nunc, viverra vel tempor eget, consectetur ac elit.'); | |
| function randomLipsumIndexes(n, list){ | |
| let o = []; | |
| while(n-- && n > -1) { | |
| o.push(Math.floor(Math.random() * list.length)); | |
| } | |
| return o; | |
| } | |
| function sentences(n) { | |
| let o = []; | |
| for(const s of randomLipsumIndexes(n, lipsum)) { | |
| o.push(lipsum[s]); | |
| } | |
| let dto = o.map(s => `<p>${s}</p>`).join(' '); | |
| return `<div class=wrap>${dto}</div>`; | |
| } | |
| function words(n) { | |
| let out = [], | |
| i = randomLipsumIndexes(1, lipsum), | |
| w = lipsum[i].split(' '), | |
| s = randomLipsumIndexes(n, w); | |
| for(const r of s) { | |
| out.push(w[r]); | |
| } | |
| return `<p>${out.join(' ')}</p>`; | |
| } | |
| function makeDate(minusDaysAgo) { | |
| let d = Number.parseInt(minusDaysAgo), | |
| dateObj = new Date(); | |
| if (Number.isNaN(d)) { | |
| return dateObj; | |
| } | |
| return new Date(dateObj.setDate(dateObj.getDate() - d)); | |
| } | |
| function populateSentences(where, n = 4) { | |
| let p = d.querySelector(where) | |
| p.innerHTML = sentences(n); | |
| return p; | |
| } | |
| function populateWords(where, n = 4) { | |
| let p = d.querySelector(where) | |
| p.innerHTML = words(n); | |
| return p; | |
| } | |
| function colorizeToggler() { | |
| let b = d.querySelector('body'), | |
| className = b.className; | |
| if (className.includes('limit-colorize')) { | |
| b.className = ""; | |
| } else { | |
| b.className = 'limit-colorize'; | |
| } | |
| } | |
| // Fill data in some way | |
| d.querySelector('#f1').textContent = 'John Doe'; | |
| d.querySelector('#f2').textContent = makeDate().toISOString().split('.')[0].split('T')[0]; | |
| d.querySelector('#f3').textContent = `Foo`; | |
| d.querySelector('#f4').textContent = `Bar`; | |
| d.querySelector('#f5').textContent = someNumbers(w); | |
| d.querySelector('#f6').textContent = someNumbers(w); | |
| d.querySelector('#f8').textContent = makeDate(6840).toISOString().split('T')[0]; | |
| d.querySelector('#f9').textContent = `M`; | |
| populateSentences('#f7', 3); | |
| populateSentences('#f10', 8); | |
| populateWords('#f11', 3); | |
| populateSentences('#f11a', 1); | |
| d.querySelector('#f11b').textContent = makeDate(120).toISOString().split('T')[0]; | |
| populateWords('#f12', 6); | |
| populateSentences('#f12a', 2); | |
| d.querySelector('#f12b').textContent = makeDate(300).toISOString().split('T')[0]; | |
| populateWords('#f13', 3); | |
| populateSentences('#f13a', 1); | |
| d.querySelector('#f13b').textContent = makeDate(1300).toISOString().split('T')[0]; | |
| populateSentences('#f14', 5); | |
| populateSentences('#f15', 3); | |
| let pass = {}; | |
| pass.populate = {words: populateWords, sentences: populateSentences}; | |
| pass.f10 = useMe; | |
| pass.colorize = colorizeToggler; | |
| w.demo = pass; | |
| w.onload = onLoad; | |
| })(window, document); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"; | |
| @page { | |
| size: auto; /* auto is the initial value */ | |
| margin: 5mm; | |
| } | |
| @media screen { | |
| body > section { | |
| width: 700px; | |
| margin: 10px auto; | |
| } | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| caption { | |
| text-align: center; | |
| font-weight: bold; | |
| font-size: 1.2em; | |
| color: #000; | |
| padding: 3px; | |
| } | |
| .doc-head { | |
| overflow: hidden; | |
| font-size: smaller; | |
| } | |
| .doc-head:first-child { | |
| border-bottom: 2px solid #000 !important; | |
| } | |
| table { | |
| width: 100%; | |
| font-size: 0.9em; | |
| border-bottom: 1px solid #ddd; | |
| table-layout: fixed; | |
| } | |
| .table>tbody+tbody { | |
| border-top: 0; | |
| } | |
| table > tbody:nth-child(0n+3) > tr > td { | |
| width: calc(100%/2); | |
| /*background-color: pink;*/ | |
| } | |
| table > tbody > tr > td { | |
| border-top: 0 !important; | |
| } | |
| table > * > tr > th:not(:first-child), | |
| table > * > tr > td:not(:first-child) { | |
| border-left: 1px solid #ddd; | |
| } | |
| th[data-field-number]:before { | |
| content: attr(data-field-number) "."; | |
| font-weight: normal; | |
| padding-right: 3px; | |
| } | |
| .limit { | |
| overflow: hidden; | |
| text-overflow: clip; | |
| } | |
| .limit-colorize .limit.limit-cover-alpha { | |
| background-color: blue; | |
| } | |
| .limit-colorize .limit.limit-cover-bravo { | |
| background-color: red; | |
| } | |
| .limit-colorize .limit.limit-cover-charlie { | |
| background-color: yellow; | |
| } | |
| .limit-colorize .limit.limit-cover-delta { | |
| background-color: green; | |
| } | |
| .limit-cover-alpha { | |
| max-height: 340px; | |
| } | |
| .limit-cover-bravo { | |
| max-height: 100px; | |
| } | |
| .limit-cover-charlie { | |
| max-height: 140px; | |
| height: 140px; | |
| } | |
| .limit-cover-delta { | |
| max-height: 40px; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">(function(w,d){ | |
| 'use strict'; | |
| var useMe = d.querySelector('#f10'); | |
| const onLoad = (eventObj) => { | |
| let d = eventObj.currentTarget.document, | |
| fields = d.querySelectorAll('th[id]'); | |
| for(const field of fields) { | |
| let idNbr = (/\d+$/.test(field.id)) ? /\d+/.exec(field.id) : null; | |
| if (idNbr) { | |
| field.dataset.fieldNumber = idNbr; | |
| } | |
| } | |
| //for(const a of useMe.childNodes.entries()) { console.log(a); }; | |
| } | |
| const someNumbers = (a) => a.crypto.getRandomValues((new Uint8Array(3))); | |
| var lipsum = []; | |
| lipsum.push('Lorem ipsum dolor sit amet, consectetur adipiscing elit.'); | |
| lipsum.push('Curabitur egestas odio a volutpat accumsan. Nullam consectetur nibh pulvinar pellentesque eleifend.'); | |
| lipsum.push('Nam nec varius erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean tincidunt elit eu nunc sodales venenatis.'); | |
| lipsum.push('Donec dictum ornare dolor vel posuere.'); | |
| lipsum.push('Vivamus pellentesque, dui at malesuada interdum, lorem tortor hendrerit elit, eu consectetur risus tellus ut dolor. Integer nec tellus nisi. Sed pulvinar bibendum mauris et pulvinar. Vivamus sollicitudin elit sed iaculis cursus. Quisque vulputate tellus eros, eget tempus ex egestas id. Integer malesuada auctor pulvinar. Pellentesque et libero tellus.'); | |
| lipsum.push('Etiam efficitur risus sed commodo posuere. Etiam nisl lacus, pulvinar ac finibus non, vestibulum eu est. Pulvinar at eleifend vel, porttitor ac diam. Praesent vel laoreet enim.'); | |
| lipsum.push('Vestibulum consectetur justo sed nisi tempor, sed finibus erat feugiat.'); | |
| lipsum.push('Nulla risus magna, malesuada quis luctus et, lacinia vel metus.'); | |
| lipsum.push('Nullam quis pharetra sapien.'); | |
| lipsum.push('Morbi id eros venenatis tortor eleifend vestibulum quis ut massa.'); | |
| lipsum.push('Morbi bibendum lobortis turpis, vel auctor diam. Morbi massa massa, feugiat vitae pharetra non, ullamcorper quis mi.'); | |
| lipsum.push('Sed placerat sed nulla sit amet laoreet. Ut eros ex, bibendum vitae dapibus at, auctor a magna.'); | |
| lipsum.push('Nullam non ligula eget elit finibus tempus et sed ante. Nulla varius tellus nec varius tincidunt. Vivamus a velit vitae nibh porta vestibulum.'); | |
| lipsum.push('Vestibulum pharetra metus eget dui condimentum, nec ultricies erat ornare. Etiam porttitor turpis vel varius malesuada.'); | |
| lipsum.push('Maecenas luctus elit erat, ut dictum eros facilisis sed. Nunc aliquam orci nec gravida mattis. Etiam imperdiet maximus risus. Phasellus porta nisi ut mauris sollicitudin tincidunt.'); | |
| lipsum.push('Etiam sagittis tristique turpis lacinia efficitur. Sed molestie arcu quam, in dictum magna sodales sed. Quisque tempus turpis et tempus ultrices. Fusce non nunc dapibus, placerat dui ut, pellentesque eros. Quisque semper libero non dui rhoncus, sed iaculis nisi blandit. Morbi sodales, sem nec dignissim interdum, purus risus egestas velit, eget suscipit ipsum risus ac mauris. Ut dui elit, mollis et aliquet et, consequat et nunc. Etiam et ex non tellus blandit ullamcorper. Vivamus a mollis nulla.'); | |
| lipsum.push('Nulla egestas rutrum elit, at laoreet eros ornare ac. Vestibulum ultricies sed felis eu pharetra. Maecenas sollicitudin volutpat tellus ut varius.'); | |
| lipsum.push('Suspendisse finibus, erat sed pharetra rhoncus, dolor quam auctor libero, vitae mattis mi sapien sed nibh. Integer vehicula libero risus, non accumsan est congue ac. Ut felis purus, vestibulum in diam quis, lacinia sodales ipsum. Integer quis maximus purus. Donec eu quam vitae quam luctus faucibus. Duis iaculis nunc nec mauris dictum molestie. Suspendisse suscipit est erat, vitae suscipit mi ultricies a. Ut aliquet eget turpis vitae imperdiet. Maecenas nisl enim, rhoncus at lorem ultricies, elementum accumsan enim. Quisque ligula nunc, viverra vel tempor eget, consectetur ac elit.'); | |
| function randomLipsumIndexes(n, list){ | |
| let o = []; | |
| while(n-- && n > -1) { | |
| o.push(Math.floor(Math.random() * list.length)); | |
| } | |
| return o; | |
| } | |
| function sentences(n) { | |
| let o = []; | |
| for(const s of randomLipsumIndexes(n, lipsum)) { | |
| o.push(lipsum[s]); | |
| } | |
| let dto = o.map(s => `<p>${s}</p>`).join(' '); | |
| return `<div class=wrap>${dto}</div>`; | |
| } | |
| function words(n) { | |
| let out = [], | |
| i = randomLipsumIndexes(1, lipsum), | |
| w = lipsum[i].split(' '), | |
| s = randomLipsumIndexes(n, w); | |
| for(const r of s) { | |
| out.push(w[r]); | |
| } | |
| return `<p>${out.join(' ')}</p>`; | |
| } | |
| function makeDate(minusDaysAgo) { | |
| let d = Number.parseInt(minusDaysAgo), | |
| dateObj = new Date(); | |
| if (Number.isNaN(d)) { | |
| return dateObj; | |
| } | |
| return new Date(dateObj.setDate(dateObj.getDate() - d)); | |
| } | |
| function populateSentences(where, n = 4) { | |
| let p = d.querySelector(where) | |
| p.innerHTML = sentences(n); | |
| return p; | |
| } | |
| function populateWords(where, n = 4) { | |
| let p = d.querySelector(where) | |
| p.innerHTML = words(n); | |
| return p; | |
| } | |
| function colorizeToggler() { | |
| let b = d.querySelector('body'), | |
| className = b.className; | |
| if (className.includes('limit-colorize')) { | |
| b.className = ""; | |
| } else { | |
| b.className = 'limit-colorize'; | |
| } | |
| } | |
| // Fill data in some way | |
| d.querySelector('#f1').textContent = 'John Doe'; | |
| d.querySelector('#f2').textContent = makeDate().toISOString().split('.')[0].split('T')[0]; | |
| d.querySelector('#f3').textContent = `Foo`; | |
| d.querySelector('#f4').textContent = `Bar`; | |
| d.querySelector('#f5').textContent = someNumbers(w); | |
| d.querySelector('#f6').textContent = someNumbers(w); | |
| d.querySelector('#f8').textContent = makeDate(6840).toISOString().split('T')[0]; | |
| d.querySelector('#f9').textContent = `M`; | |
| populateSentences('#f7', 3); | |
| populateSentences('#f10', 8); | |
| populateWords('#f11', 3); | |
| populateSentences('#f11a', 1); | |
| d.querySelector('#f11b').textContent = makeDate(120).toISOString().split('T')[0]; | |
| populateWords('#f12', 6); | |
| populateSentences('#f12a', 2); | |
| d.querySelector('#f12b').textContent = makeDate(300).toISOString().split('T')[0]; | |
| populateWords('#f13', 3); | |
| populateSentences('#f13a', 1); | |
| d.querySelector('#f13b').textContent = makeDate(1300).toISOString().split('T')[0]; | |
| populateSentences('#f14', 5); | |
| populateSentences('#f15', 3); | |
| let pass = {}; | |
| pass.populate = {words: populateWords, sentences: populateSentences}; | |
| pass.f10 = useMe; | |
| pass.colorize = colorizeToggler; | |
| w.demo = pass; | |
| w.onload = onLoad; | |
| })(window, document);</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"; | |
| @page { | |
| size: auto; /* auto is the initial value */ | |
| margin: 5mm; | |
| } | |
| @media screen { | |
| body > section { | |
| width: 700px; | |
| margin: 10px auto; | |
| } | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| caption { | |
| text-align: center; | |
| font-weight: bold; | |
| font-size: 1.2em; | |
| color: #000; | |
| padding: 3px; | |
| } | |
| .doc-head { | |
| overflow: hidden; | |
| font-size: smaller; | |
| } | |
| .doc-head:first-child { | |
| border-bottom: 2px solid #000 !important; | |
| } | |
| table { | |
| width: 100%; | |
| font-size: 0.9em; | |
| border-bottom: 1px solid #ddd; | |
| table-layout: fixed; | |
| } | |
| .table>tbody+tbody { | |
| border-top: 0; | |
| } | |
| table > tbody:nth-child(0n+3) > tr > td { | |
| width: calc(100%/2); | |
| /*background-color: pink;*/ | |
| } | |
| table > tbody > tr > td { | |
| border-top: 0 !important; | |
| } | |
| table > * > tr > th:not(:first-child), | |
| table > * > tr > td:not(:first-child) { | |
| border-left: 1px solid #ddd; | |
| } | |
| th[data-field-number]:before { | |
| content: attr(data-field-number) "."; | |
| font-weight: normal; | |
| padding-right: 3px; | |
| } | |
| .limit { | |
| overflow: hidden; | |
| text-overflow: clip; | |
| } | |
| .limit-colorize .limit.limit-cover-alpha { | |
| background-color: blue; | |
| } | |
| .limit-colorize .limit.limit-cover-bravo { | |
| background-color: red; | |
| } | |
| .limit-colorize .limit.limit-cover-charlie { | |
| background-color: yellow; | |
| } | |
| .limit-colorize .limit.limit-cover-delta { | |
| background-color: green; | |
| } | |
| .limit-cover-alpha { | |
| max-height: 340px; | |
| } | |
| .limit-cover-bravo { | |
| max-height: 100px; | |
| } | |
| .limit-cover-charlie { | |
| max-height: 140px; | |
| height: 140px; | |
| } | |
| .limit-cover-delta { | |
| max-height: 40px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(w,d){ | |
| 'use strict'; | |
| var useMe = d.querySelector('#f10'); | |
| const onLoad = (eventObj) => { | |
| let d = eventObj.currentTarget.document, | |
| fields = d.querySelectorAll('th[id]'); | |
| for(const field of fields) { | |
| let idNbr = (/\d+$/.test(field.id)) ? /\d+/.exec(field.id) : null; | |
| if (idNbr) { | |
| field.dataset.fieldNumber = idNbr; | |
| } | |
| } | |
| //for(const a of useMe.childNodes.entries()) { console.log(a); }; | |
| } | |
| const someNumbers = (a) => a.crypto.getRandomValues((new Uint8Array(3))); | |
| var lipsum = []; | |
| lipsum.push('Lorem ipsum dolor sit amet, consectetur adipiscing elit.'); | |
| lipsum.push('Curabitur egestas odio a volutpat accumsan. Nullam consectetur nibh pulvinar pellentesque eleifend.'); | |
| lipsum.push('Nam nec varius erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean tincidunt elit eu nunc sodales venenatis.'); | |
| lipsum.push('Donec dictum ornare dolor vel posuere.'); | |
| lipsum.push('Vivamus pellentesque, dui at malesuada interdum, lorem tortor hendrerit elit, eu consectetur risus tellus ut dolor. Integer nec tellus nisi. Sed pulvinar bibendum mauris et pulvinar. Vivamus sollicitudin elit sed iaculis cursus. Quisque vulputate tellus eros, eget tempus ex egestas id. Integer malesuada auctor pulvinar. Pellentesque et libero tellus.'); | |
| lipsum.push('Etiam efficitur risus sed commodo posuere. Etiam nisl lacus, pulvinar ac finibus non, vestibulum eu est. Pulvinar at eleifend vel, porttitor ac diam. Praesent vel laoreet enim.'); | |
| lipsum.push('Vestibulum consectetur justo sed nisi tempor, sed finibus erat feugiat.'); | |
| lipsum.push('Nulla risus magna, malesuada quis luctus et, lacinia vel metus.'); | |
| lipsum.push('Nullam quis pharetra sapien.'); | |
| lipsum.push('Morbi id eros venenatis tortor eleifend vestibulum quis ut massa.'); | |
| lipsum.push('Morbi bibendum lobortis turpis, vel auctor diam. Morbi massa massa, feugiat vitae pharetra non, ullamcorper quis mi.'); | |
| lipsum.push('Sed placerat sed nulla sit amet laoreet. Ut eros ex, bibendum vitae dapibus at, auctor a magna.'); | |
| lipsum.push('Nullam non ligula eget elit finibus tempus et sed ante. Nulla varius tellus nec varius tincidunt. Vivamus a velit vitae nibh porta vestibulum.'); | |
| lipsum.push('Vestibulum pharetra metus eget dui condimentum, nec ultricies erat ornare. Etiam porttitor turpis vel varius malesuada.'); | |
| lipsum.push('Maecenas luctus elit erat, ut dictum eros facilisis sed. Nunc aliquam orci nec gravida mattis. Etiam imperdiet maximus risus. Phasellus porta nisi ut mauris sollicitudin tincidunt.'); | |
| lipsum.push('Etiam sagittis tristique turpis lacinia efficitur. Sed molestie arcu quam, in dictum magna sodales sed. Quisque tempus turpis et tempus ultrices. Fusce non nunc dapibus, placerat dui ut, pellentesque eros. Quisque semper libero non dui rhoncus, sed iaculis nisi blandit. Morbi sodales, sem nec dignissim interdum, purus risus egestas velit, eget suscipit ipsum risus ac mauris. Ut dui elit, mollis et aliquet et, consequat et nunc. Etiam et ex non tellus blandit ullamcorper. Vivamus a mollis nulla.'); | |
| lipsum.push('Nulla egestas rutrum elit, at laoreet eros ornare ac. Vestibulum ultricies sed felis eu pharetra. Maecenas sollicitudin volutpat tellus ut varius.'); | |
| lipsum.push('Suspendisse finibus, erat sed pharetra rhoncus, dolor quam auctor libero, vitae mattis mi sapien sed nibh. Integer vehicula libero risus, non accumsan est congue ac. Ut felis purus, vestibulum in diam quis, lacinia sodales ipsum. Integer quis maximus purus. Donec eu quam vitae quam luctus faucibus. Duis iaculis nunc nec mauris dictum molestie. Suspendisse suscipit est erat, vitae suscipit mi ultricies a. Ut aliquet eget turpis vitae imperdiet. Maecenas nisl enim, rhoncus at lorem ultricies, elementum accumsan enim. Quisque ligula nunc, viverra vel tempor eget, consectetur ac elit.'); | |
| function randomLipsumIndexes(n, list){ | |
| let o = []; | |
| while(n-- && n > -1) { | |
| o.push(Math.floor(Math.random() * list.length)); | |
| } | |
| return o; | |
| } | |
| function sentences(n) { | |
| let o = []; | |
| for(const s of randomLipsumIndexes(n, lipsum)) { | |
| o.push(lipsum[s]); | |
| } | |
| let dto = o.map(s => `<p>${s}</p>`).join(' '); | |
| return `<div class=wrap>${dto}</div>`; | |
| } | |
| function words(n) { | |
| let out = [], | |
| i = randomLipsumIndexes(1, lipsum), | |
| w = lipsum[i].split(' '), | |
| s = randomLipsumIndexes(n, w); | |
| for(const r of s) { | |
| out.push(w[r]); | |
| } | |
| return `<p>${out.join(' ')}</p>`; | |
| } | |
| function makeDate(minusDaysAgo) { | |
| let d = Number.parseInt(minusDaysAgo), | |
| dateObj = new Date(); | |
| if (Number.isNaN(d)) { | |
| return dateObj; | |
| } | |
| return new Date(dateObj.setDate(dateObj.getDate() - d)); | |
| } | |
| function populateSentences(where, n = 4) { | |
| let p = d.querySelector(where) | |
| p.innerHTML = sentences(n); | |
| return p; | |
| } | |
| function populateWords(where, n = 4) { | |
| let p = d.querySelector(where) | |
| p.innerHTML = words(n); | |
| return p; | |
| } | |
| function colorizeToggler() { | |
| let b = d.querySelector('body'), | |
| className = b.className; | |
| if (className.includes('limit-colorize')) { | |
| b.className = ""; | |
| } else { | |
| b.className = 'limit-colorize'; | |
| } | |
| } | |
| // Fill data in some way | |
| d.querySelector('#f1').textContent = 'John Doe'; | |
| d.querySelector('#f2').textContent = makeDate().toISOString().split('.')[0].split('T')[0]; | |
| d.querySelector('#f3').textContent = `Foo`; | |
| d.querySelector('#f4').textContent = `Bar`; | |
| d.querySelector('#f5').textContent = someNumbers(w); | |
| d.querySelector('#f6').textContent = someNumbers(w); | |
| d.querySelector('#f8').textContent = makeDate(6840).toISOString().split('T')[0]; | |
| d.querySelector('#f9').textContent = `M`; | |
| populateSentences('#f7', 3); | |
| populateSentences('#f10', 8); | |
| populateWords('#f11', 3); | |
| populateSentences('#f11a', 1); | |
| d.querySelector('#f11b').textContent = makeDate(120).toISOString().split('T')[0]; | |
| populateWords('#f12', 6); | |
| populateSentences('#f12a', 2); | |
| d.querySelector('#f12b').textContent = makeDate(300).toISOString().split('T')[0]; | |
| populateWords('#f13', 3); | |
| populateSentences('#f13a', 1); | |
| d.querySelector('#f13b').textContent = makeDate(1300).toISOString().split('T')[0]; | |
| populateSentences('#f14', 5); | |
| populateSentences('#f15', 3); | |
| let pass = {}; | |
| pass.populate = {words: populateWords, sentences: populateSentences}; | |
| pass.f10 = useMe; | |
| pass.colorize = colorizeToggler; | |
| w.demo = pass; | |
| w.onload = onLoad; | |
| })(window, document); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment