glimp - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/glimp.js

@@ -13,11 +13,11 @@ /**
 
-.oneQueryString {
+.glimpString {
     color: #FF9900;
 }
 
-.oneQueryNumber {
+.glimpNumber {
     color: #0088cc;
 }
 
-.oneQueryNuloneQuery {
+.glimpNull {
     color: gainsboro;
@@ -27,3 +27,3 @@ font-style: italic;
 
-.oneQueryFunc {
+.glimpFunc {
     color: BB5500;
@@ -33,3 +33,3 @@ font-family: monospace;
 
-.oneQueryTable {
+.glimpTable {
     border: 2px solid #0088CC;
@@ -40,3 +40,3 @@ border-collapse: collapse;
 
-.oneQueryTable caption {
+.glimpTable caption {
     border: 1px solid #0088CC;
@@ -49,3 +49,3 @@ background-color: #0088CC;
 
-.oneQueryTable th {
+.glimpTable th {
     background-color: gainsboro;
@@ -56,3 +56,3 @@ border: 1px solid #C8C8C8;
 
-.oneQueryTable td {
+.glimpTable td {
     border: 1px solid #C8C8C8;
@@ -64,3 +64,3 @@ text-align: center;
 
-.oneQueryTable tFoot {
+.glimpTable tFoot {
     background-color: whitesmoke;
@@ -71,3 +71,3 @@ font-style: italic;
 
-.oneQueryTable tFoot a {
+.glimpTable tFoot a {
     text-decoration: none;
@@ -77,7 +77,7 @@ color: teal;
 
-.oneQueryTable tFoot a.active {
+.glimpTable tFoot a.active {
     text-decoration: underline;
 }
 
-.oneQueryPageDiv {
+.glimpPageDiv {
     text-align: left;
@@ -88,7 +88,7 @@ vertical-align: middle;
 
-.oneQueryPageInputDiv * {
+.glimpPageInputDiv * {
     display: inline-block;
 }
 
-.oneQueryPageInput {
+.glimpPageInput {
     padding: 1px 3px;
@@ -102,3 +102,3 @@ background-color: white;
 
-.oneQueryPageInputSubmit {
+.glimpPageInputSubmit {
     height: 10px;
@@ -158,3 +158,3 @@ width: 10px;
         <td colspan=${colCount}>
-            <div class="oneQueryPageDiv"></div>
+            <div class="glimpPageDiv"></div>
         </td>
@@ -176,3 +176,3 @@ `;
     document.addEventListener('click', e => {
-        if (!e.target.classList.contains('.oneQueryAnchor'))
+        if (!e.target.classList.contains('.glimpAnchor'))
             return;
@@ -188,3 +188,3 @@ anchorOnClick(e);
 
-    let table = e.target.closest('.oneQueryTable');
+    let table = e.target.closest('.glimpTable');
     let cPage = currentPage(table);
@@ -203,2 +203,3 @@ let hasLt = e.target.innerHTML.substring(0,3) == '&lt';
     changeToPage(table, toPage);
+    e.preventDefault();
 
@@ -209,3 +210,3 @@ }
 
-    let pageDiv = table.querySelector('.oneQueryPageDiv');
+    let pageDiv = table.querySelector('.glimpPageDiv');
 
@@ -215,3 +216,3 @@ let insertA = (rel,innerHtml) =>
             'beforeend',
-            `<a href='#' rel="${rel}" class='.oneQueryAnchor'>${innerHtml}</a> ` 
+            `<a href='#' rel="${rel}" class='.glimpAnchor'>${innerHtml}</a> ` 
         );
@@ -232,3 +233,3 @@
 
-    let pageDiv = table.querySelector('.oneQueryPageDiv');
+    let pageDiv = table.querySelector('.glimpPageDiv');
 
@@ -242,7 +243,7 @@ if (tableGet(table, 'pages') < tableGet(table, 'pageInputThreshold'))
             <br/>
-            <div class='oneQueryPageInputDiv' style='display:none;'>
-                <div contenteditable='true' class='oneQueryPageInput'>1</div>
-                <button class='oneQueryPageInputSubmit'></button>
+            <div class='glimpPageInputDiv' style='display:none;'>
+                <div contenteditable='true' class='glimpPageInput'>1</div>
+                <button class='glimpPageInputSubmit'></button>
             </div>
-            <label class='oneQueryPageRatio'>
+            <label class='glimpPageRatio'>
                 ${tableGet(table, 'pages')} pages
@@ -256,7 +257,7 @@ </label>
 function showInputDiv (tbl, show) {
-    if (!tbl.tFoot.querySelector('.oneQueryPageInputDiv'))
+    if (!tbl.tFoot.querySelector('.glimpPageInputDiv'))
         return;
-    tbl.tFoot.querySelector('.oneQueryPageInputDiv').style.display = 
+    tbl.tFoot.querySelector('.glimpPageInputDiv').style.display = 
         show ? 'inline-block' : 'none';
-    tbl.tFoot.querySelector('.oneQueryPageRatio').style.display = 
+    tbl.tFoot.querySelector('.glimpPageRatio').style.display = 
         show ? 'none' : 'inline-block';
@@ -267,3 +268,3 @@ }
 
-    if (!table.tFoot.querySelector('.oneQueryPageInputDiv'))
+    if (!table.tFoot.querySelector('.glimpPageInputDiv'))
         return;
@@ -277,20 +278,20 @@
         showInputDiv(e.target, false);
-        table.querySelector('.oneQueryPageInput').innerHTML = "";
+        table.querySelector('.glimpPageInput').innerHTML = "";
     });
 
-    listen('.oneQueryPageRatio', 'mouseenter',
+    listen('.glimpPageRatio', 'mouseenter',
         e => showInputDiv(table, true)
     );
 
-    listen('.oneQueryPageRatio', 'click',
+    listen('.glimpPageRatio', 'click',
         e => showInputDiv(table, true)
     );
 
-    listen('.oneQueryPageInput', 'mouseenter',
-        e => table.querySelector('.oneQueryPageInput').innerHTML = ''
+    listen('.glimpPageInput', 'mouseenter',
+        e => table.querySelector('.glimpPageInput').innerHTML = ''
     );
 
-    listen('.oneQueryPageInputSubmit', 'click', e => {
+    listen('.glimpPageInputSubmit', 'click', e => {
 
-        let pInput = table.querySelector('.oneQueryPageInput');
+        let pInput = table.querySelector('.glimpPageInput');
         let desiredPage = parseInt(pInput.innerHTML);
@@ -311,7 +312,14 @@
 
+    let pages = tableGet(table, 'pages');
     let startItem = (page - 1) * tableGet(table, 'rowsPerPage');
     let endItem = startItem + tableGet(table, 'rowsPerPage');
-    let pageAs = table.querySelectorAll('.oneQueryPageDiv a');
+    let pageAs = table.querySelectorAll('.glimpPageDiv a');
     let tBodyRows = [...table.tBodies].reduce((a,b) => a.concat(b)).rows;
 
+    // prevent going over or under pages possible
+    page = page > pages ? pages
+         : page === undefined ? pages 
+         : page < 1 ? 1
+         : page; 
+
     for (let pix = 0; pix < pageAs.length; pix++) {
@@ -345,3 +353,3 @@
     return parseInt(
-        table.querySelector('.oneQueryPageDiv a.active').innerHTML
+        table.querySelector('.glimpPageDiv a.active').innerHTML
     );
@@ -375,3 +383,3 @@ }
         document.querySelector(target)
-        .querySelectorAll('.oneQueryTable');
+        .querySelectorAll('.glimpTable');
 
@@ -390,4 +398,4 @@ if (maybeTables.length > 0)
         : printType == 'string' ? stringToHtml(obj)
-        : printType == 'number' ? `<span class='oneQueryNumber'>${obj}</span>`
-        : printType == 'nuloneQuery' ? `<span class='oneQueryNuloneQuery'>${obj}</span>`
+        : printType == 'number' ? `<span class='glimpNumber'>${obj}</span>`
+        : printType == 'null' ? `<span class='glimpNull'>${obj}</span>`
         : printType == 'function' ? functionToHtml(obj)
@@ -415,3 +423,3 @@ : printType == 'object' ? objectToTable(obj)
         : isArray ? 'array'
-        : (obj == null || typeof obj == 'undefined') ? 'nuloneQuery'
+        : (obj == null || typeof obj == 'undefined') ? 'null'
         : typeof obj;
@@ -439,3 +447,3 @@
     return `
-        <span class='oneQueryString'>
+        <span class='glimpString'>
             ${ htmlEncode(str) }
@@ -448,3 +456,3 @@ </span>
     return `
-        <span class='oneQueryFunc'>
+        <span class='glimpFunc'>
             ${ htmlEncode(func.toString()) }
@@ -467,3 +475,3 @@ </span>
 
-    return `<table class='oneQueryTable'>${html}</table>`;
+    return `<table class='glimpTable'>${html}</table>`;
 
@@ -480,3 +488,3 @@ }
     return `
-        <table class='oneQueryTable'>
+        <table class='glimpTable'>
             ${caption != null ? `<caption>${caption}</caption>` : ''}
@@ -510,3 +518,3 @@ ${html}
     return `
-        <table class='oneQueryTable'>
+        <table class='glimpTable'>
             ${caption != null ? `<caption>${caption}</caption>` : ''}
@@ -534,3 +542,3 @@ <tHead>${header}</tHead>
 
-    if (hasoneQueryCssRule())
+    if (hasglimpCssRule())
         return;
@@ -546,7 +554,7 @@
 
-function hasoneQueryCssRule () {
+function hasglimpCssRule () {
 
     for(let sheet of document.styleSheets)
     for(let rule of sheet.rules)
-        if(rule.selectorText.substring(0,5) == ".oneQuery")
+        if(rule.selectorText.substring(0,5) == ".glimp")
             return true;
@@ -553,0 +561,0 @@

package.json

 {
   "name": "glimp",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Visualization and interface tools for javascript.",
@@ -23,5 +23,5 @@ "main": "face.js",
   "devDependencies": {
-    "rollup": "^2.0.2",
-    "rollup-plugin-license": "^0.13.0"
+    "rollup": "^2.10.9",
+    "rollup-plugin-license": "^2.1.0"
   }
 }

readMe.md

@@ -1,1 +0,144 @@
-TODO: Insert content.
+A printer for javascript content, particularly for tablular data.  Color codes output based on data type.  Table paging is available and automatic.
+
+## Getting Started
+
+After installing glimp, what you really want is the 'print' object.
+
+    npm install glimp
+
+    import { print } from './node_modules/glimp/dist/glimp.js';
+
+Other objects, such as charting, in glimp may be made available as the need arises. That is why there is no default export structure.
+
+In the examples below, you will see the import from a different path:
+
+    import { print } from '../src/glimp.js';
+
+This is simply because it is the path used when developing in the test environment of glimp itself.  
+
+## Printing Primitives
+
+The glimp printer can print many types of objects.  All that is required is an HTML div to print it into.  Different kinds of objects will recieve different kinds of colorizations.  
+
+Consider a string and a function:
+
+    let str = 'This is a string';
+    function func (a,b) { return a + b; }
+
+To use glimp, create an HTML `div` object (other container-type objects may work as well for each.  Then reference each (using querySelector syntax) as well as the object you want to print in `glimp.print`.
+
+    <div id='stringDiv'></div><br/>
+    <div id='funcDiv'></div>
+
+    <script type='module'>
+
+        // most likely, the path you will need 
+        // is './node_modules/glimp/dist/glimp.js'
+        import { print } from '../src/glimp.js';
+
+        print('#stringDiv', str);
+        print('#funcDiv', func);
+
+    </script>
+
+This will result in:
+
+![primitives](images/primitives.png)
+
+## Printing an Object
+
+The glimp printer also works with complex objects.  Consider this object:
+
+    let object = { 
+        a: 'eigh', 
+        b: 1, 
+        c: 0.555,
+        d: 'delta',
+        e: p => p/3,
+        f: undefined,
+        g: false
+    };
+
+If you print it:
+
+    <div id='arrayDiv'></div>
+
+    <script type='module'>
+
+        import { print } from '../src/glimp.js';
+
+        print('#arrayDiv', array);
+
+    </script>
+
+You will get:
+
+![ObjectTable](images/objectTable.png)
+
+## Printing an Array of Objects (with a caption)
+
+The glimp printer can work with an array.  It is best exemplified by printing an array of objects, such as the one below:
+
+    let array = [
+        { m: 'em', n: 'en', o: 2, p: true },
+        { m: 'm', n: 'n', o: 4 },
+        { m: 'mont', n: 'nev', o: 8, p: true },
+        { m: 'mu', n: 'nu', o: 16, p: false },
+        { m: 'moises', n: 'nancy', o: 32, p: p => p*2 },
+        { m: 'mertyl', n: 'northern', o: 64, p: (p,q) => p*q },
+        { m: 'muon', n: 'nanometer', o: 128, p: false },
+        { m: 'mother', n: 'neice', o: 256, p: true },
+        { m: 'millon', n: 'nueve', o: 1024, p: true },
+        { m: 'may', n: 'no', o: 2048, p: false },
+        { m: 'mechanic', n: 'navigator', o: 4096, p: true },
+        { m: 'man', n: 'nick', o: 8192, p: false }
+    ];
+
+Print it as with any other object.  Though, for tabular objects you can also add a third parameter providing a caption.
+
+    <div id='arrayDiv'></div>
+
+    <script type='module'>
+
+        import { print } from '../src/glimp.js';
+
+        print('#arrayDiv', array, 'Glimp Array');
+
+    </script>
+
+The code above results in the following presentation object:
+
+![ArrayTable](images/ArrayTable.png)
+
+Click on '2' or on either '>' to go to the next page:
+
+![ArrayTablePage2](images/ArrayTablePage2.png)
+
+The inner '<' and '>' will take you to the previous and next pages, respectively.  The outer '<' and '>' will take you to the first and last pages, respectively.   In this case, they are the same.  But with more pages, such as in the next example, they are not the same.
+
+## Printing Large Arrays
+
+Many arrays can be quite large. 
+
+    let large = [];
+    for (let i = 0; i <= 100; i++) 
+        large.push({ a: i, b: i * 2});
+
+Print it as before:
+
+    <div id='largeDiv'></div>
+
+    <script type='module'>
+        import { print } from '../src/glimp.js';    
+        print('#largeDiv', large);
+    </script>
+
+You will notice a little difference in the pager:
+
+![LongArray](images/LongArray.png);
+
+The nearest pages are listed explicitly, but then there is another line giving the number of pages.
+
+Hover over this line, and you will be given an option to input the page you desire to jump to:
+
+![LongArray2](images/LongArray2.png)

rollup.config.js

@@ -8,7 +8,7 @@ import license from 'rollup-plugin-license';
 let licensePlugin = license({
-    banner: { content: { file: 'license.md' } },
+    banner: { content: { file: 'license.md' } }/*,
     thirdParty: {
         output: 'license-3rd-party',
         includePrivate: true
-    }
+    }*/
 });
@@ -15,0 +15,0 @@

src/glimp.js

@@ -1,1 +0,186 @@
-export { default as print } from './print.js';
+import printCss from './print.css.js';
+import { addPagerToTables, addAnchorClickEvents } from './pager.js';
+
+export function print (target, obj, caption) {
+
+    addDefaultCss();
+    addAnchorClickEvents();
+
+    document.querySelector(target).innerHTML +=
+        makeHtml(obj, caption);
+
+    let maybeTables = 
+        document.querySelector(target)
+        .querySelectorAll('.glimpTable');
+
+    if (maybeTables.length > 0)
+        addPagerToTables(maybeTables);        
+
+}
+
+function makeHtml(obj, caption) {
+
+    let printType = getPrintType(obj);
+
+    return printType == 'arrayOfObjects' ? arrayOfObjectsToTable(obj, caption)
+        : printType == 'array' ? arrayToTable(obj, caption)
+        : printType == 'string' ? stringToHtml(obj)
+        : printType == 'number' ? `<span class='glimpNumber'>${obj}</span>`
+        : printType == 'null' ? `<span class='glimpNull'>${obj}</span>`
+        : printType == 'function' ? functionToHtml(obj)
+        : printType == 'object' ? objectToTable(obj)
+        : `${obj}`;
+
+}
+
+function getPrintType (obj) {
+
+    let isArray = Array.isArray(obj);        
+    let isArrayOfObjects = false;
+
+    if (isArray) {
+        let len = obj.length;
+        let keyCounts = Object.values(getArrayKeys(obj));
+        let highlyUsedKeys = keyCounts.filter(kc => kc >= len * 0.75).length;
+        isArrayOfObjects = 
+            highlyUsedKeys >= keyCounts.length * 0.75 // highly structured;
+            && keyCounts.length > 0; 
+    }
+
+    return isArrayOfObjects ? 'arrayOfObjects'
+        : isArray ? 'array'
+        : (obj == null || typeof obj == 'undefined') ? 'null'
+        : typeof obj;
+
+}
+
+function getArrayKeys (array) {
+
+    let keys = {};
+
+    for(let item of array) 
+    if (getPrintType(item) == 'object')
+    for(let key of Object.keys(item))
+        if(keys[key])
+            keys[key] += 1;
+        else 
+            keys[key] = 1;
+
+    return keys;
+
+}
+
+function stringToHtml (str) {
+    return `
+        <span class='glimpString'>
+            ${ htmlEncode(str) }
+        </span>
+    `;
+}
+
+function functionToHtml (func) {
+    return `
+        <span class='glimpFunc'>
+            ${ htmlEncode(func.toString()) }
+        </span>
+    `;
+}
+
+function objectToTable (obj) {
+    
+    let html = ``;
+
+    for (let entry of Object.entries(obj))
+        html += `
+        <tr>
+            <th>${entry[0]}</th>
+            <td>${makeHtml(entry[1])}</td>
+        </tr>
+        `;
+
+    return `<table class='glimpTable'>${html}</table>`;
+
+}
+
+function arrayToTable (items, caption) {
+    
+    let html = ``;
+
+    for(let item of items) 
+        html += `<tr><td>${makeHtml(item)}</td></tr>`;
+
+    return `
+        <table class='glimpTable'>
+            ${caption != null ? `<caption>${caption}</caption>` : ''}
+            ${html}
+        </table>`;
+
+}
+
+function arrayOfObjectsToTable (objects, caption) {
+
+    let keys = Object.keys(getArrayKeys(objects));
+    let reformeds = [];
+    
+    let header = `<tr>`
+    for(let key of keys)
+        header += `<th>${key}</th>`;
+    header += `</tr>`;
+
+    let body = ``;
+
+    for(let obj of objects) {
+        body += `<tr>`;
+        if (getPrintType(obj) == 'object')
+            for (let key of keys) 
+                body += `<td>${makeHtml(obj[key])}</td>`;
+        else 
+            body += `<td colspan=${keys.length}>${makeHtml(obj)}</td>`;
+        body += `</tr>`;
+    }
+
+    return `
+        <table class='glimpTable'>
+            ${caption != null ? `<caption>${caption}</caption>` : ''}
+            <tHead>${header}</tHead>
+            <tBody>${body}</tBody>
+        </table>
+    `;
+
+}
+
+function htmlEncode (str) {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;')
+        .replace(/\t/g, '&emsp;')
+        .replace(/  /g, '&emsp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/\n/g, '<br/>');
+}
+
+function addDefaultCss () {
+
+    if (hasglimpCssRule())
+        return;
+
+    let style = document.createElement('style');
+    style.type = 'text/css';
+
+    style.appendChild(document.createTextNode(printCss));
+    document.head.appendChild(style);
+
+}
+
+function hasglimpCssRule () {
+
+    for(let sheet of document.styleSheets)
+    for(let rule of sheet.rules)
+        if(rule.selectorText.substring(0,5) == ".glimp")
+            return true;
+
+    return false; 
+
+}

src/pager.js

@@ -47,3 +47,3 @@ /*
         <td colspan=${colCount}>
-            <div class="oneQueryPageDiv"></div>
+            <div class="glimpPageDiv"></div>
         </td>
@@ -65,3 +65,3 @@ `;
     document.addEventListener('click', e => {
-        if (!e.target.classList.contains('.oneQueryAnchor'))
+        if (!e.target.classList.contains('.glimpAnchor'))
             return;
@@ -77,3 +77,3 @@ anchorOnClick(e);
 
-    let table = e.target.closest('.oneQueryTable')
+    let table = e.target.closest('.glimpTable')
     let cPage = currentPage(table);
@@ -85,6 +85,6 @@ let hasLt = e.target.innerHTML.substring(0,3) == '&lt';
     let toPage = 
-        (hasLt && cPage == 1) ? table.pages
-        : (hasGt && cPage == table.pages) ? 1
-        : (hasLt && rel < 0) ? cPage - 1
-        : (hasGt && rel < 0) ? cPage + 1
+        hasLt && cPage == 1 ? tableGet(table, 'pages')
+        : hasGt && cPage == tableGet(table, 'pages') ? 1
+        : hasLt && rel < 0 ? cPage - 1
+        : hasGt && rel < 0 ? cPage + 1
         : parseInt(rel) + 1;
@@ -99,3 +99,3 @@
 
-    let pageDiv = table.querySelector('.oneQueryPageDiv');
+    let pageDiv = table.querySelector('.glimpPageDiv');
 
@@ -105,3 +105,3 @@ let insertA = (rel,innerHtml) =>
             'beforeend',
-            `<a href='#' rel="${rel}" class='.oneQueryAnchor'>${innerHtml}</a> ` 
+            `<a href='#' rel="${rel}" class='.glimpAnchor'>${innerHtml}</a> ` 
         );
@@ -122,3 +122,3 @@
 
-    let pageDiv = table.querySelector('.oneQueryPageDiv');
+    let pageDiv = table.querySelector('.glimpPageDiv');
 
@@ -132,7 +132,7 @@ if (tableGet(table, 'pages') < tableGet(table, 'pageInputThreshold'))
             <br/>
-            <div class='oneQueryPageInputDiv' style='display:none;'>
-                <div contenteditable='true' class='oneQueryPageInput'>1</div>
-                <button class='oneQueryPageInputSubmit'></button>
+            <div class='glimpPageInputDiv' style='display:none;'>
+                <div contenteditable='true' class='glimpPageInput'>1</div>
+                <button class='glimpPageInputSubmit'></button>
             </div>
-            <label class='oneQueryPageRatio'>
+            <label class='glimpPageRatio'>
                 ${tableGet(table, 'pages')} pages
@@ -146,7 +146,7 @@ </label>
 function showInputDiv (tbl, show) {
-    if (!tbl.tFoot.querySelector('.oneQueryPageInputDiv'))
+    if (!tbl.tFoot.querySelector('.glimpPageInputDiv'))
         return;
-    tbl.tFoot.querySelector('.oneQueryPageInputDiv').style.display = 
+    tbl.tFoot.querySelector('.glimpPageInputDiv').style.display = 
         show ? 'inline-block' : 'none';
-    tbl.tFoot.querySelector('.oneQueryPageRatio').style.display = 
+    tbl.tFoot.querySelector('.glimpPageRatio').style.display = 
         show ? 'none' : 'inline-block';
@@ -157,3 +157,3 @@ }
 
-    if (!table.tFoot.querySelector('.oneQueryPageInputDiv'))
+    if (!table.tFoot.querySelector('.glimpPageInputDiv'))
         return;
@@ -167,20 +167,20 @@
         showInputDiv(e.target, false);
-        table.querySelector('.oneQueryPageInput').innerHTML = "";
+        table.querySelector('.glimpPageInput').innerHTML = "";
     });
 
-    listen('.oneQueryPageRatio', 'mouseenter',
+    listen('.glimpPageRatio', 'mouseenter',
         e => showInputDiv(table, true)
     );
 
-    listen('.oneQueryPageRatio', 'click',
+    listen('.glimpPageRatio', 'click',
         e => showInputDiv(table, true)
     );
 
-    listen('.oneQueryPageInput', 'mouseenter',
-        e => table.querySelector('.oneQueryPageInput').innerHTML = ''
+    listen('.glimpPageInput', 'mouseenter',
+        e => table.querySelector('.glimpPageInput').innerHTML = ''
     );
 
-    listen('.oneQueryPageInputSubmit', 'click', e => {
+    listen('.glimpPageInputSubmit', 'click', e => {
 
-        let pInput = table.querySelector('.oneQueryPageInput');
+        let pInput = table.querySelector('.glimpPageInput');
         let desiredPage = parseInt(pInput.innerHTML);
@@ -203,3 +203,3 @@
     let endItem = startItem + tableGet(table, 'rowsPerPage');
-    let pageAs = table.querySelectorAll('.oneQueryPageDiv a');
+    let pageAs = table.querySelectorAll('.glimpPageDiv a');
     let tBodyRows = [...table.tBodies].reduce((a,b) => a.concat(b)).rows;
@@ -235,3 +235,3 @@
     return parseInt(
-        table.querySelector('.oneQueryPageDiv a.active').innerHTML
+        table.querySelector('.glimpPageDiv a.active').innerHTML
     );
@@ -238,0 +238,0 @@ }

src/print.css.js

 export default `
 
 
-.oneQueryString {
+.glimpString {
     color: #FF9900;
 }
 
-.oneQueryNumber {
+.glimpNumber {
     color: #0088cc;
 }
 
-.oneQueryNuloneQuery {
+.glimpNull {
     color: gainsboro;
@@ -17,3 +17,3 @@ font-style: italic;
 
-.oneQueryFunc {
+.glimpFunc {
     color: BB5500;
@@ -23,3 +23,3 @@ font-family: monospace;
 
-.oneQueryTable {
+.glimpTable {
     border: 2px solid #0088CC;
@@ -30,3 +30,3 @@ border-collapse: collapse;
 
-.oneQueryTable caption {
+.glimpTable caption {
     border: 1px solid #0088CC;
@@ -39,3 +39,3 @@ background-color: #0088CC;
 
-.oneQueryTable th {
+.glimpTable th {
     background-color: gainsboro;
@@ -46,3 +46,3 @@ border: 1px solid #C8C8C8;
 
-.oneQueryTable td {
+.glimpTable td {
     border: 1px solid #C8C8C8;
@@ -54,3 +54,3 @@ text-align: center;
 
-.oneQueryTable tFoot {
+.glimpTable tFoot {
     background-color: whitesmoke;
@@ -61,3 +61,3 @@ font-style: italic;
 
-.oneQueryTable tFoot a {
+.glimpTable tFoot a {
     text-decoration: none;
@@ -67,7 +67,7 @@ color: teal;
 
-.oneQueryTable tFoot a.active {
+.glimpTable tFoot a.active {
     text-decoration: underline;
 }
 
-.oneQueryPageDiv {
+.glimpPageDiv {
     text-align: left;
@@ -78,7 +78,7 @@ vertical-align: middle;
 
-.oneQueryPageInputDiv * {
+.glimpPageInputDiv * {
     display: inline-block;
 }
 
-.oneQueryPageInput {
+.glimpPageInput {
     padding: 1px 3px;
@@ -92,3 +92,3 @@ background-color: white;
 
-.oneQueryPageInputSubmit {
+.glimpPageInputSubmit {
     height: 10px;
@@ -95,0 +95,0 @@ width: 10px;

test/print.c.js

@@ -6,3 +6,2 @@ import { print } from '../src/glimp.js';
     [1,2,3,4,5,6,7,8,9,10,11,12],
-    [1,2,3,4,5,6,7,8,9,10,11,12],
 
@@ -9,0 +8,0 @@ [

No alert changes

Improved metrics

Total package byte prevSize

60535

increased by100.78%

Number of package files

19

increased by46.15%

Lines of code

963

increased by4.9%

Number of lines in readme file

144

increased by14300%

No dependency changes