improvements - jscancer - Javascript crap (relatively small)
(HTM) git clone git://git.codemadness.org/jscancer
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
(DIR) commit 13a12137bb28679d37ce6672224e714ba0ab24dd
(DIR) parent d606fe0157d28f240efac38511c881e6e781ce68
(HTM) Author: Hiltjo Posthuma <hiltjo@codemadness.org>
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(-)
---
(DIR) diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
ISC License
-Copyright (c) 2016-2021 Hiltjo Posthuma <hiltjo@codemadness.org>
+Copyright (c) 2016-2023 Hiltjo Posthuma <hiltjo@codemadness.org>
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
(DIR) 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:
(DIR) 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 <hiltjo@codemadness.org>
(DIR) 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
(DIR) 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 should be "Oh hai".</label>
+<input type="button" onclick="javascript:clipcopy_datavalue(document.getElementById('somelabel'));" value="Click me" />
+
+<br/>
+
+<label>Click on the button, the text copied should be "Something".</label>
+<input type="button" onclick="javascript:clipcopy('Something');" value="Click me" />
+
+<script type="text/javascript" src="clipcopy.js"></script>
+<script type="text/javascript"></script>
(DIR) 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
--------
(DIR) diff --git a/datalist/TODO b/datalist/TODO
(DIR) 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 attribute.
+ 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);
}
(DIR) 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" id="os" class="datalist" /><br/>
@@ -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" id="os" class="datalist" /><br/>
</td></tr>
</table>
+<br/>
+
+<label>Test: using value, but showing the label:</label>
+<input type="text" placeholder="Select OS..." value="" list="listlabel" name="oslabel" id="oslabel" class="datalist" /><br/>
+<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>
(DIR) diff --git a/datepicker/README b/datepicker/README
@@ -21,10 +21,6 @@ FEATURES
- IE10+.
-USAGE
------
-
-
EXAMPLES
--------
(DIR) diff --git a/datepicker/TODO b/datepicker/TODO
(DIR) diff --git a/tooltipxhr/README b/tooltipxhr/README
@@ -18,10 +18,6 @@ FEATURES
- IE10+.
-USAGE
------
-
-
EXAMPLES
--------
(DIR) diff --git a/tooltipxhr/TODO b/tooltipxhr/TODO
(DIR) 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 <hiltjo@codemadness.org>
(DIR) 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.
(DIR) 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" value="Submit" />
+ <input type="submit" name="save" data-xhr data-xhr-status="showstatus" value="Submit without validation" formnovalidate="formnovalidate" />
+</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" value="Submit" />
+</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 status: " + x.status;
+}
+</script>
+
+</body>
+</html>
(DIR) 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()) // failed validation.
xhr_form_submit(e.target);
// prevent default action.