Merge branch 'work-form-html-attribute'

CHANGELOG.md

@@ -1,6 +1,11 @@
 
 ## Version History
 
+1.3.0
+
+* Automatic collection of elements with data-onscreenness attribute
+* Output esm and umd script files
+
 1.2.4
 
 * Integration tests with Puppeteer.
@@ -49,4 +54,3 @@ With support of Babel and Rollup it was possible to assemble it to a NPM-module.
 ## toDo, toWant
 * Callbacks
 * Refine the DOM observer
-* automatically collect elements with data-onscreenness attribute

jest.config.js

@@ -10,7 +10,10 @@ module.exports = {
   "preset": "jest-puppeteer",
 
   "setupFiles": [
-    "<rootDir>test/_setupFiles.js"
+    "<rootDir>/test/_setupFiles.js"
   ],
 
+  "transformIgnorePatterns": [
+    "node_modules/(?!(document-staging)/)",
+  ],
 };

package.json

@@ -3,12 +3,13 @@
   "version": "1.3.0",
   "description": "Supply visibility classes and data to selected elements on your webpage.",
   "main": "dist/index.js",
+  "module": "dist/index.esm.js",
   "scripts": {
     "build:src": "clear-folder dist && rollup --config",
     "build:docs": "documentation build src/*.js --format md > API.md",
     "build": "npm run build:src && npm run build:docs",
     "start": "rollup --config --watch",
-    "serve": "node ./lib/start-server.js --open",
+    "serve": "node ./lib/start-server.js",
     "coverage": "clear-folder .nyc_output coverage test/screenshots && jest --coverage",
     "test": "clear-folder test/screenshots && jest"
   },
@@ -29,7 +30,9 @@
   ],
   "author": "Onno van der Zee",
   "license": "ISC",
-  "dependencies": {},
+  "dependencies": {
+    "document-staging": "^0.2.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.4.4",
     "@babel/plugin-transform-runtime": "^7.4.4",

rollup.config.js

@@ -8,19 +8,28 @@ const name = "onScreenness";
 
 export default {
   input: 'src/index.js',
-  output: {
+  output: [{
     file: 'dist/index.js',
     format: 'umd',
     name: name,
     sourcemap: true,
-  },
+  }, {
+    file: 'dist/index.esm.js',
+    format: 'esm',
+    name: name,
+    sourcemap: true,
+  }],
   plugins: [
     resolve(),
     babel({
       exclude: 'node_modules/**',
+      include: 'node_modules/document-staging',
       runtimeHelpers: true
     }),
-    commonjs(),
+    commonjs({
+      // to read umd dependencies
+      include: 'node_modules/**',
+    }),
     terser(),
   ]
 };

src/onScreenness.js

@@ -3,8 +3,10 @@ import {
 	queryToArray,
 	roundAt
 } from './utilities.js';
+import documentStaging from '../node_modules/document-staging/dist/index.esm.js';
 
 let onScreennessModule = (function () {
+	var baseQuery = '[data-onscreenness]';
 	var queryList = [];
 	var blackList = [];
 
@@ -191,18 +193,13 @@ let onScreennessModule = (function () {
 	 * @private
 	 */
 	var composeJobList = function () {
-		var elementList = queryList.length 
-			? queryToArray ( queryList.join(',') )
-			: [];
+		var fullList = [baseQuery].concat(queryList);
+		var elementList = queryToArray ( fullList.join(',') );
 		var ignoreList = blackList.length 
 			? queryToArray ( blackList.join(',') )
 			: [];
 
-		if ( elementList.length ) {
-			return elementList.filter ( elm => !ignoreList.includes ( elm ) );
-		} else {
-			return [];
-		}
+		return elementList.filter ( elm => !ignoreList.includes ( elm ) );
 	};
 
 	/** 
@@ -217,21 +214,19 @@ let onScreennessModule = (function () {
 		});
 	};
 
-	document.addEventListener('readystatechange', function () {
-		if ( document.readyState === 'interactive' ) {
-			changeHandler();
-		}
-	}, false);
 	window.addEventListener('resize', changeHandler, false);
 	window.addEventListener('scroll', changeHandler, true);
 	let DOMObserver = new MutationObserver( function ( mutationsList, observer ) {
 		if ( mutationsList.length ) {
 			changeHandler();
 		}
 	});
-	window.addEventListener('load', function () {
-		DOMObserver.observe( document.body, { childList: true, subtree: true } );
-	}, true);
+	documentStaging.onInteractive([
+		changeHandler,
+		function () {
+			DOMObserver.observe( document.body, { childList: true, subtree: true } );
+		},
+	]);
 
 	return {
 		publicAPI: {

test/basic.html

@@ -104,7 +104,7 @@ <h2>Basic Example <span>test</span></h2>
 			<div id="first" class="example">Basic Example Element</div>
 			<div id="second" class="example">Basic Example Element</div>
 			<div id="third" class="example">Basic Example Element</div>
-			<div id="fourth" class="example">Basic Example Element</div>
+			<div id="fourth" class="example" data-onscreenness>Data attribute Example Element</div>
 			<div id="fifth" class="example">Basic Example Element</div>
 			<div id="sixth" class="example">Basic Example Element</div>
 			<div id="seventh" class="example">Basic Example Element</div>

test/unit/auto-asses.test.js

@@ -0,0 +1,101 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import {
+  onScreenness,
+  onScreenTest
+} from '../../src/onScreenness.js';
+
+
+describe('An element with an onscreenness data attribute in the html will be in the assesment', function () {
+
+  let trigger;
+  let liveList;
+
+  beforeAll(() => {
+    trigger = onScreenTest.triggerEvent;
+    liveList = onScreenTest.makeNodeList;
+  });
+
+  beforeEach(() => {
+    onScreenness.reset();
+  });
+
+
+  /* Test creation of live nodeLists */
+
+  test('A reset situation without onscreenness data attributes', () => {
+    document.body.innerHTML = `
+        <h2>Basic Example</h2>
+        <section>
+			<div id="first" class="example">Basic Example Element</div>
+			<div id="second" class="example">Basic Example Element</div>
+			<div id="third" class="example">Basic Example Element</div>
+			<div id="fourth" class="example">Basic Example Element</div>
+			<div id="fifth" class="example">Basic Example Element</div>
+			<div id="sixth" class="example">Basic Example Element</div>
+			<div id="seventh" class="example">Basic Example Element</div>
+			<div id="eighth" class="example">Basic Example Element</div>
+        </section>
+    `;
+    let nodes = liveList();
+    expect(nodes.length).toBe(0);
+  });
+
+  test('A reset situation with one onscreenness data attributes', () => {
+    document.body.innerHTML = `
+        <h2>Basic Example</h2>
+        <section>
+			<div id="first" class="example">Basic Example Element</div>
+			<div id="second" class="example">Basic Example Element</div>
+			<div id="third" class="example">Basic Example Element</div>
+			<div id="fourth" class="example" data-onscreenness>Example Element with data-onscreenness attribute</div>
+			<div id="fifth" class="example">Basic Example Element</div>
+			<div id="sixth" class="example">Basic Example Element</div>
+			<div id="seventh" class="example">Basic Example Element</div>
+			<div id="eighth" class="example">Basic Example Element</div>
+        </section>
+    `;
+    let nodes = liveList();
+    expect(nodes.length).toBe(1);
+  });
+
+  test('A reset situation with three onscreenness data attributes', () => {
+    document.body.innerHTML = `
+        <h2>Basic Example</h2>
+        <section>
+			<div id="first" class="example" data-onscreenness>Example Element with data-onscreenness attribute</div>
+			<div id="second" class="example">Basic Example Element</div>
+			<div id="third" class="example">Basic Example Element</div>
+			<div id="fourth" class="example" data-onscreenness>Example Element with data-onscreenness attribute</div>
+			<div id="fifth" class="example">Basic Example Element</div>
+			<div id="sixth" class="example">Basic Example Element</div>
+			<div id="seventh" class="example" data-onscreenness>Example Element with data-onscreenness attribute</div>
+			<div id="eighth" class="example">Basic Example Element</div>
+        </section>
+    `;
+    let nodes = liveList();
+    expect(nodes.length).toBe(3);
+  });
+
+  test('A reset situation with three onscreenness data attributes, of which one excluded', () => {
+    document.body.innerHTML = `
+        <h2>Basic Example</h2>
+        <section>
+			<div id="first" class="example" data-onscreenness>Example Element with data-onscreenness attribute</div>
+			<div id="second" class="example">Basic Example Element</div>
+			<div id="third" class="example">Basic Example Element</div>
+			<div id="fourth" class="example" data-onscreenness>Example Element with data-onscreenness attribute</div>
+			<div id="fifth" class="example">Basic Example Element</div>
+			<div id="sixth" class="example">Basic Example Element</div>
+			<div id="seventh" class="example" data-onscreenness>Example Element with data-onscreenness attribute</div>
+			<div id="eighth" class="example">Basic Example Element</div>
+        </section>
+    `;
+    onScreenness.exclude('#fourth')
+    let nodes = liveList();
+    expect(nodes.length).toBe(2);
+  });
+
+});