GopherProxy

	improvements - jscancer - Javascript crap (relatively small)
	git clone git://git.codemadness.org/jscancer
	Log
	Files
	Refs
	README
	LICENSE
	---
	commit 13a12137bb28679d37ce6672224e714ba0ab24dd
	parent d606fe0157d28f240efac38511c881e6e781ce68
	Author: Hiltjo Posthuma <[email protected]>
	Date: Thu, 22 Dec 2022 18:12:19 +0100

	improvements

	fixes and enhancements:
	- xhrform: fix for when novalidate is set on the form or element.
	- add xhr form test for it.
	- datalist: improve use of label and values
	- Make sure when a data-value is empty (as opposed to unset) it is still used.
	- Try to use the label when it is set (not the value): matches the native
	browser more closely too and it is more logical.
	- Add as a test to test.html

	added:
	- add clipboard copy script

	documentation:
	- remove some empty TODO files
	- improve some README texts

	license:
	- bump LICENSE year

	Diffstat:
	M LICENSE \| 2 +-
	M README \| 6 +++---
	A clipcopy/README \| 26 ++++++++++++++++++++++++++
	A clipcopy/clipcopy.js \| 28 ++++++++++++++++++++++++++++
	A clipcopy/example.html \| 10 ++++++++++
	M datalist/README \| 6 +-----
	D datalist/TODO \| 0
	M datalist/datalist.js \| 31 +++++++++++++++++++++++------…
	M datalist/test.html \| 16 ++++++++++++++--
	M datepicker/README \| 4 ----
	D datepicker/TODO \| 0
	M tooltipxhr/README \| 4 ----
	D tooltipxhr/TODO \| 0
	M treeview/README \| 11 +++++++----
	M xhrform/README \| 4 ++--
	A xhrform/test.html \| 34 +++++++++++++++++++++++++++++…
	M xhrform/xhrform.js \| 4 +++-

	17 files changed, 152 insertions(+), 34 deletions(-)
	---
	diff --git a/LICENSE b/LICENSE
	@@ -1,6 +1,6 @@
	ISC License

	-Copyright (c) 2016-2021 Hiltjo Posthuma <[email protected]>
	+Copyright (c) 2016-2023 Hiltjo Posthuma <[email protected]>

	Permission to use, copy, modify, and/or distribute this software for any
	purpose with or without fee is hereby granted, provided that the above
	diff --git a/README b/README
	@@ -9,8 +9,8 @@ Goals
	- Functional for 90% of the tasks.
	- Be compatible with most commonly used browsers (but not ancient browsers).
	- If possible fallback to native browser behaviour.
	-- Provide consistent behaviour for things like a datepicker, datalist and so on
	- until the major browsers will support it consistently natively.
	+- Provide consistent behaviour for things like a datepicker, datalist and so
	+ on until the major browsers will support it consistently natively.


	Issues with native behaviour
	@@ -33,7 +33,7 @@ Inconsistent autocomplete behaviour, for example:
	Filter:
	- In Firefox filter part of items in the list.
	- In Chrome filter from start of a label in the list, searches on
	- <option value /> if set, but not label.
	+ <option value /> if set, but not the label.
	- In IE/Edge filter does not work.

	Display:
	diff --git a/clipcopy/README b/clipcopy/README
	@@ -0,0 +1,26 @@
	+clipcopy
	+========
	+
	+Script to copy some text to the clipboard, if the browser allows it.
	+
	+
	+FEATURES
	+--------
	+
	+- Small:
	+ - Filesize: +- 1KB.
	+ - Lines: +- 25, not much code, so hopefully easy to understand.
	+ - No dependencies on other libraries like jQuery.
	+- Permissive ISC license, see LICENSE file.
	+
	+
	+EXAMPLES
	+--------
	+
	+See example.html for an example.
	+
	+
	+Author
	+------
	+
	+Hiltjo Posthuma <[email protected]>
	diff --git a/clipcopy/clipcopy.js b/clipcopy/clipcopy.js
	@@ -0,0 +1,27 @@
	+// clipboard(text, [el])
	+// (if allowed, try to) copy text to clipboard.
	+// specifying el tries to insert the textarea before the element, this
	+// prevents the page from scrolling in some cases.
	+function clipcopy(text, el) {
	+ var textarea = document.createElement("textarea");
	+ textarea.value = text;
	+ if (el == null)
	+ document.body.appendChild(textarea);
	+ else
	+ el.parentNode.insertBefore(textarea, el);
	+ textarea.focus();
	+ textarea.select();
	+ try {
	+ document.execCommand("copy");
	+ } catch (err) {
	+ }
	+ if (el == null)
	+ document.body.removeChild(textarea);
	+ else
	+ el.parentNode.removeChild(textarea);
	+}
	+
	+// copy the data-value from the specified element to the clipboard.
	+function clipcopy_datavalue(el) {
	+ clipcopy(el.getAttribute("data-value") \|\| "", el);
	+}
	+\ No newline at end of file
	diff --git a/clipcopy/example.html b/clipcopy/example.html
	@@ -0,0 +1,10 @@
	+<label id="somelabel" data-value="Oh hai">Click on the button, the text copied…
	+<input type="button" onclick="javascript:clipcopy_datavalue(document.getElemen…
	+
	+<br/>
	+
	+<label>Click on the button, the text copied should be "Something".</label>
	+<input type="button" onclick="javascript:clipcopy('Something');" value="Click …
	+
	+<script type="text/javascript" src="clipcopy.js"></script>
	+<script type="text/javascript"></script>
	diff --git a/datalist/README b/datalist/README
	@@ -9,7 +9,7 @@ FEATURES

	- Small:
	- Filesize: +- 7.2KB.
	- - Lines: +- 250, not much code, so hopefully easy to understand.
	+ - Lines: +- 275, not much code, so hopefully easy to understand.
	- No dependencies on other libraries like jQuery.
	- (Graceful) fallback to HTML5 datalist if Javascript is disabled for inline
	datalist.
	@@ -22,10 +22,6 @@ FEATURES
	- IE10+.


	-USAGE
	------
	-
	-
	EXAMPLES
	--------

	diff --git a/datalist/TODO b/datalist/TODO
	diff --git a/datalist/datalist.js b/datalist/datalist.js
	@@ -13,18 +13,33 @@ function datalist_init(input) {
	urlfn = input.getAttribute("data-urlfn") \|\| "";
	dropdown.className = "datalist-dropdown";

	+ var getlabel = function(el) {
	+ return el.textContent \|\| el.innerText \|\| "";
	+ };
	+
	var getvalue = function(el) {
	- return el.getAttribute("data-value") \|\|
	- el.textContent \|\| el.innerText;
	+ var value = el.getAttribute("data-value");
	+ if (value !== null)
	+ return value;
	+ value = el.value;
	+ if (value !== null)
	+ return value;
	+ return el.textContent \|\| el.innerText \|\| "";
	};

	- var createitem = function(s) {
	+ // create item: expects string, or object with name and label attribut…
	+ var createitem = function(o) {
	var label, value, div = document.createElement("div");
	- if (typeof(s) === "string") {
	- label = value = s;
	+ if (typeof(o) === "string") {
	+ label = value = o;
	+ } else if (typeof(o.getAttribute) == "function") {
	+ // element
	+ label = getlabel(o);
	+ value = getvalue(o);
	} else {
	- label = s.label;
	- value = s.value;
	+ // (JSON) object
	+ label = o.label;
	+ value = o.value;
	}

	div.innerHTML = label;
	@@ -83,7 +98,7 @@ function datalist_init(input) {
	if (attrlist === null \|\| ellist === undefined)
	return;
	for (var i = 0, ec = ellist.children, o; i < ec.length; i++) {
	- var o = createitem(getvalue(ec[i]));
	+ var o = createitem(ec[i]);
	o.search = o.label.toLowerCase().split(" ");
	items.push(o);
	}
	diff --git a/datalist/test.html b/datalist/test.html
	@@ -64,7 +64,7 @@

	<table>
	<tr><td>
	-test
	+Test:
	</td><td></td></tr>
	<tr><td></td><td>
	<input type="text" placeholder="Select OS..." value="" list="list" name="os" i…
	@@ -73,13 +73,25 @@ test

	<table style="float:right">
	<tr><td>
	-test
	+Test float style:
	</td><td></td></tr>
	<tr><td></td><td>
	<input type="text" placeholder="Select OS..." value="" list="list" name="os" i…
	</td></tr>
	</table>

	+<br/>
	+
	+<label>Test: using value, but showing the label:</label>
	+<input type="text" placeholder="Select OS..." value="" list="listlabel" name="…
	+<datalist class="datalist" id="listlabel">
	+ <option value="">Empty value: use ""</option>
	+ <option>No value attribute: just use label</option>
	+ <option data-value="3">data-value set: use 3</option>
	+ <option data-value="">data-value set but empty: use ""</option>
	+ <option value="4">Value attribute set: use 4</option>
	+</datalist>
	+
	</form>

	<script type="text/javascript" src="datalist.js"></script>
	diff --git a/datepicker/README b/datepicker/README
	@@ -21,10 +21,6 @@ FEATURES
	- IE10+.


	-USAGE
	------
	-
	-
	EXAMPLES
	--------

	diff --git a/datepicker/TODO b/datepicker/TODO
	diff --git a/tooltipxhr/README b/tooltipxhr/README
	@@ -18,10 +18,6 @@ FEATURES
	- IE10+.


	-USAGE
	------
	-
	-
	EXAMPLES
	--------

	diff --git a/tooltipxhr/TODO b/tooltipxhr/TODO
	diff --git a/treeview/README b/treeview/README
	@@ -1,23 +1,26 @@
	treeview
	========

	-small treeview script.
	+Small treeview script.


	FEATURES
	--------
	+
	- Small
	- Filesize: +- 1KB.
	- Lines: +- 25 lines of Javascript and +- 25 lines of CSS.
	- No dependencies on other libraries like jQuery.
	- Expand and collapse all child nodes with ctrl-click.
	- Graceful fallback if Javascript is disabled.
	+- Permissive ISC license, see LICENSE file.
	- Officially supported browsers are:
	- Firefox and Firefox ESR.
	- Chrome
	- IE9+


	-License
	--------
	-ISC
	+Author
	+------
	+
	+Hiltjo Posthuma <[email protected]>
	diff --git a/xhrform/README b/xhrform/README
	@@ -9,8 +9,8 @@ FEATURES
	--------

	- Small:
	- - Filesize: +- 1.6KB.
	- - Lines: +- 50, not much code, so hopefully easy to understand.
	+ - Filesize: +- 2KB.
	+ - Lines: +- 60, not much code, so hopefully easy to understand.
	- No dependencies on other libraries like jQuery.
	- (Graceful) fallback to a normal form if Javascript is disabled.
	- Permissive ISC license, see LICENSE file.
	diff --git a/xhrform/test.html b/xhrform/test.html
	@@ -0,0 +1,34 @@
	+<html>
	+<body>
	+
	+<h1>Example form with validation</h1>
	+
	+<form method="post" action="">
	+ <label for="search">Search:</label>
	+ <input type="text" id="search" name="search" required />
	+ <input type="submit" name="save" data-xhr data-xhr-status="showstatus"…
	+ <input type="submit" name="save" data-xhr data-xhr-status="showstatus"…
	+</form>
	+
	+
	+<h1>Example form validation with novalidate set</h1>
	+
	+<form method="post" action="" novalidate>
	+ <label for="search">Search:</label>
	+ <input type="text" id="search" name="search" required />
	+ <input type="submit" name="save" data-xhr data-xhr-status="showstatus"…
	+</form>
	+
	+
	+Result:
	+<div id="result" style="border: 1px #000 solid"> </div>
	+
	+<script type="text/javascript" src="xhrform.js"></script>
	+<script type="text/javascript">
	+function showstatus(x, formdata) {
	+ var el = document.getElementById("result").innerHTML = "Response statu…
	+}
	+</script>
	+
	+</body>
	+</html>
	diff --git a/xhrform/xhrform.js b/xhrform/xhrform.js
	@@ -48,7 +48,9 @@ document.addEventListener("click", function(e) {
	!e.target.form \|\| e.target.getAttribute("data-xhr") === null)
	return;

	- if (!e.target.form.reportValidity \|\| e.target.form.reportValidity())
	+ if (e.target.form.noValidate \|\| // disabled validation on form.
	+ e.target.formNoValidate \|\| // disabled validation on element.
	+ !e.target.form.reportValidity \|\| e.target.form.reportValidity()) /…
	xhr_form_submit(e.target);

	// prevent default action.