ndf-elements

{ "version": "https://jsonfeed.org/version/1.1", "title": "My Elements", "home_page_url": "https://nfreear.github.io/elements/demo/", "feed_url": "https://nfreear.github.io/elements/src/index.json", "authors": [ { "name": "Nick Freear" } ], "language": "en", "_date": "2025-03-26T11:16:18.896Z", "_count": 42, "items": [ { "id": "my-analytics", "title": "my-analytics: Embed analytics without cookies.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyAnalyticsElement.js", "tags": [ "beta", "my blog" ], "content_html": "Embed analytics without cookies.\n\n Easily embed Google Analytics - use <tt>localStorage</tt> instead of cookies, and anonyise the IP address.\n<ul>\n<li>Demo: <a href=\"../demo/my-analytics.html\">../demo/my-analytics.html</a>\n<li>Status: beta, my blog\n<li>className: <code>MyAnalyticsElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-analytics></code>\n</ul>", "_ext": { "idx": 0, "summary": "Embed analytics without cookies.", "desc": "Embed analytics without cookies.\n\n Easily embed Google Analytics - use <tt>localStorage</tt> instead of cookies, and anonyise the IP address.", "date": "28-June-2021", "isoDate": "2021-06-27", "since": "1.0.0", "status": "beta, my blog", "todo": null, "demoUrl": "../demo/my-analytics.html", "demoIsPen": false, "className": "MyAnalyticsElement", "parentClass": "MyElement", "tagName": "my-analytics", "extTemplate": null, "hasIntTemplate": false, "fileName": "MyAnalyticsElement.js" } }, { "id": "my-animation", "title": "my-animation: Animate.css", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyAnimationElement.js", "tags": [], "content_html": "Animate.css\n<ul>\n<li>Demo: <a href=\"https://codepen.io/nfreear/pen/yLZNXZX\">https://codepen.io/nfreear/pen/yLZNXZX</a>\n<li>Status: \n<li>className: <code>MyAnimationElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-animation></code>\n</ul>", "_ext": { "idx": 1, "summary": "Animate.css", "desc": "Animate.css", "date": "27-Oct-2023", "isoDate": "2023-10-26", "since": null, "status": null, "todo": null, "demoUrl": "https://codepen.io/nfreear/pen/yLZNXZX", "demoIsPen": true, "className": "MyAnimationElement", "parentClass": "MyElement", "tagName": "my-animation", "extTemplate": null, "hasIntTemplate": false, "fileName": "MyAnimationElement.js" } }, { "id": "my-atbar-button", "title": "my-atbar-button: ATbar - Add accessibility tools to any website.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyAtbarButtonElement.js", "tags": [ "experimental" ], "content_html": "ATbar - Add accessibility tools to any website.\n\n ATBar enables easy zooming, font changes, recolouring (and more) on almost any website.\n<ul>\n<li>Demo: <a href=\"../demo/my-atbar-button.html\">../demo/my-atbar-button.html</a>\n<li>Status: experimental\n<li>className: <code>MyAtbarButtonElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-atbar-button></code>\n</ul>", "_ext": { "idx": 2, "summary": "ATbar - Add accessibility tools to any website.", "desc": "ATbar - Add accessibility tools to any website.\n\n ATBar enables easy zooming, font changes, recolouring (and more) on almost any website.", "date": null, "isoDate": null, "since": "1.1.0", "status": "experimental", "todo": null, "demoUrl": "../demo/my-atbar-button.html", "demoIsPen": false, "className": "MyAtbarButtonElement", "parentClass": "MyElement", "tagName": "my-atbar-button", "extTemplate": "my-atbar-button", "hasIntTemplate": false, "fileName": "MyAtbarButtonElement.js" } }, { "id": "my-bookmarklet", "title": "my-bookmarklet: Embed a bookmarklet Javascript.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyBookmarkletElement.js", "tags": [], "content_html": "Embed a bookmarklet Javascript.\n<ul>\n<li>Demo: <a href=\"../demo/my-bookmarklet.html\">../demo/my-bookmarklet.html</a>\n<li>Status: \n<li>className: <code>MyBookmarkletElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-bookmarklet></code>\n</ul>", "_ext": { "idx": 3, "summary": "Embed a bookmarklet Javascript.", "desc": "Embed a bookmarklet Javascript.", "date": "23-Jan-2022", "isoDate": "2022-01-23", "since": null, "status": null, "todo": null, "demoUrl": "../demo/my-bookmarklet.html", "demoIsPen": false, "className": "MyBookmarkletElement", "parentClass": "MyElement", "tagName": "my-bookmarklet", "extTemplate": "my-bookmarklet", "hasIntTemplate": false, "fileName": "MyBookmarkletElement.js" } }, { "id": "my-busy-spinner", "title": "my-busy-spinner: A busy spinner animation", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyBusySpinnerElement.js", "tags": [ "beta", "my blog" ], "content_html": "A busy spinner animation\n\n - pure CSS.\n<ul>\n<li>Demo: <a href=\"../demo/my-busy-spinner.html\">../demo/my-busy-spinner.html</a>\n<li>Status: beta, my blog\n<li>className: <code>MyBusySpinnerElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-busy-spinner></code>\n</ul>", "_ext": { "idx": 4, "summary": "A busy spinner animation", "desc": "A busy spinner animation\n\n - pure CSS.", "date": "26-Oct-2021", "isoDate": "2021-10-25", "since": "1.0.0", "status": "beta, my blog", "todo": null, "demoUrl": "../demo/my-busy-spinner.html", "demoIsPen": false, "className": "MyBusySpinnerElement", "parentClass": "MyElement", "tagName": "my-busy-spinner", "extTemplate": null, "hasIntTemplate": true, "fileName": "MyBusySpinnerElement.js" } }, { "id": null, "title": "null: Wrapper around Google reCAPTCHA, using a modal 'dialog'.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyCaptchaElement.js", "tags": [ "experimental" ], "content_html": "Wrapper around Google reCAPTCHA, using a modal 'dialog'.\n<ul>\n<li>Demo: <a href=\"#\">null</a>\n<li>Status: experimental\n<li>className: <code>MyCaptchaElement</code>\n<li>parentClass: <code>MyMinElement</code>\n<li>tagName: <code><null></code>\n</ul>", "_ext": { "idx": 5, "summary": "Wrapper around Google reCAPTCHA, using a modal 'dialog'.", "desc": "Wrapper around Google reCAPTCHA, using a modal 'dialog'.", "date": null, "isoDate": null, "since": "1.7.0", "status": "experimental", "todo": null, "demoUrl": null, "demoIsPen": false, "className": "MyCaptchaElement", "parentClass": "MyMinElement", "tagName": null, "extTemplate": null, "hasIntTemplate": true, "fileName": "MyCaptchaElement.js" } }, { "id": "my-code", "title": "my-code: Display code with syntax highlighting.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyCodeElement.js", "tags": [], "content_html": "Display code with syntax highlighting.\n<ul>\n<li>Demo: <a href=\"#\">null</a>\n<li>Status: \n<li>className: <code>MyCodeElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-code></code>\n</ul>", "_ext": { "idx": 6, "summary": "Display code with syntax highlighting.", "desc": "Display code with syntax highlighting.", "date": "22-Jan-2022", "isoDate": "2022-01-22", "since": null, "status": null, "todo": null, "demoUrl": null, "demoIsPen": false, "className": "MyCodeElement", "parentClass": "MyElement", "tagName": "my-code", "extTemplate": "my-code", "hasIntTemplate": false, "fileName": "MyCodeElement.js" } }, { "id": "my-codepen-button", "title": "my-codepen-button: An \"Open in CodePen\" button.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyCodepenButtonElement.js", "tags": [], "content_html": "An \"Open in CodePen\" button.\n<ul>\n<li>Demo: <a href=\"#\">null</a>\n<li>Status: \n<li>className: <code>MyCodepenButtonElement</code>\n<li>parentClass: <code>MyMinElement</code>\n<li>tagName: <code><my-codepen-button></code>\n</ul>", "_ext": { "idx": 7, "summary": "An \"Open in CodePen\" button.", "desc": "An \"Open in CodePen\" button.", "date": null, "isoDate": null, "since": null, "status": null, "todo": null, "demoUrl": null, "demoIsPen": false, "className": "MyCodepenButtonElement", "parentClass": "MyMinElement", "tagName": "my-codepen-button", "extTemplate": null, "hasIntTemplate": true, "fileName": "MyCodepenButtonElement.js" } }, { "id": "my-console", "title": "my-console: Redirect <tt>console.log()</tt>, etc. to the page.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyConsoleElement.js", "tags": [ "experimental", "for demos", "Codepen" ], "content_html": "Redirect <tt>console.log()</tt>, etc. to the page.\n\n Supports <tt>assert</tt>, info, error, log and <tt>warn</tt> methods.\n<ul>\n<li>Demo: <a href=\"https://codepen.io/nfreear/pen/PoaEpVa\">https://codepen.io/nfreear/pen/PoaEpVa</a>\n<li>Status: experimental, for demos, Codepen\n<li>className: <code>MyConsoleElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-console></code>\n</ul>", "_ext": { "idx": 8, "summary": "Redirect <tt>console.log()</tt>, etc. to the page.", "desc": "Redirect <tt>console.log()</tt>, etc. to the page.\n\n Supports <tt>assert</tt>, info, error, log and <tt>warn</tt> methods.", "date": "16-Nov-2022", "isoDate": "2022-11-16", "since": "1.3.0", "status": "experimental, for demos, Codepen", "todo": null, "demoUrl": "https://codepen.io/nfreear/pen/PoaEpVa", "demoIsPen": true, "className": "MyConsoleElement", "parentClass": "MyElement", "tagName": "my-console", "extTemplate": null, "hasIntTemplate": true, "fileName": "MyConsoleElement.js" } }, { "id": "my-countdown", "title": "my-countdown: A countdown timer widget.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyCountdownElement.js", "tags": [ "experimental" ], "content_html": "A countdown timer widget.\n<ul>\n<li>Demo: <a href=\"../demo/my-countdown.html\">../demo/my-countdown.html</a>\n<li>Status: experimental\n<li>className: <code>MyCountdownElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-countdown></code>\n</ul>", "_ext": { "idx": 9, "summary": "A countdown timer widget.", "desc": "A countdown timer widget.", "date": "07-May-2022", "isoDate": "2022-05-06", "since": null, "status": "experimental", "todo": null, "demoUrl": "../demo/my-countdown.html", "demoIsPen": false, "className": "MyCountdownElement", "parentClass": "MyElement", "tagName": "my-countdown", "extTemplate": null, "hasIntTemplate": false, "fileName": "MyCountdownElement.js" } }, { "id": "my-date-picker", "title": "my-date-picker: A date picker / calendar widget", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyDatePickerElement.js", "tags": [ "experimental", "accessibility" ], "content_html": "A date picker / calendar widget\n - with keyboard accessibility.\n<ul>\n<li>Demo: <a href=\"https://codepen.io/nfreear/pen/GRBmrER\">https://codepen.io/nfreear/pen/GRBmrER</a>\n<li>Status: experimental, accessibility\n<li>className: <code>MyDatePickerElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-date-picker></code>\n</ul>", "_ext": { "idx": 10, "summary": "A date picker / calendar widget", "desc": "A date picker / calendar widget\n - with keyboard accessibility.", "date": "08-Jun-2022", "isoDate": "2022-06-07", "since": "1.3.0", "status": "experimental, accessibility", "todo": null, "demoUrl": "https://codepen.io/nfreear/pen/GRBmrER", "demoIsPen": true, "className": "MyDatePickerElement", "parentClass": "MyElement", "tagName": "my-date-picker", "extTemplate": "my-date-picker", "hasIntTemplate": false, "fileName": "MyDatePickerElement.js" } }, { "id": "my-dev-warning", "title": "my-dev-warning: Display a \"Not production ready\" warning.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyDevWarningElement.js", "tags": [ "beta" ], "content_html": "Display a \"Not production ready\" warning.\n<ul>\n<li>Demo: <a href=\"#\">null</a>\n<li>Status: beta\n<li>className: <code>MyDevWarningElement</code>\n<li>parentClass: <code>MyMinElement</code>\n<li>tagName: <code><my-dev-warning></code>\n</ul>", "_ext": { "idx": 11, "summary": "Display a \"Not production ready\" warning.", "desc": "Display a \"Not production ready\" warning.", "date": "12-Nov-2023", "isoDate": "2023-11-12", "since": "1.7.0", "status": "beta", "todo": null, "demoUrl": null, "demoIsPen": false, "className": "MyDevWarningElement", "parentClass": "MyMinElement", "tagName": "my-dev-warning", "extTemplate": null, "hasIntTemplate": true, "fileName": "MyDevWarningElement.js" } }, { "id": "my-editor", "title": "my-editor: MyEditorElement", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyEditorElement.js", "tags": [ "beta" ], "content_html": "MyEditorElement\n - Powered by CK Editor.\n<ul>\n<li>Demo: <a href=\"#\">null</a>\n<li>Status: beta\n<li>className: <code>MyEditorElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-editor></code>\n</ul>", "_ext": { "idx": 12, "summary": "MyEditorElement", "desc": "MyEditorElement\n - Powered by CK Editor.", "date": "10-May-2023", "isoDate": "2023-05-09", "since": "1.0.0", "status": "beta", "todo": null, "demoUrl": null, "demoIsPen": false, "className": "MyEditorElement", "parentClass": "MyElement", "tagName": "my-editor", "extTemplate": null, "hasIntTemplate": false, "fileName": "MyEditorElement.js" } }, { "id": "my-element-filter", "title": "my-element-filter: Filter a collection of elements, based on the value of a search input field.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyElementFilterElement.js", "tags": [ "beta" ], "content_html": "Filter a collection of elements, based on the value of a search input field.\n<ul>\n<li>Demo: <a href=\"https://codepen.io/nfreear/pen/LEYjYEK\">https://codepen.io/nfreear/pen/LEYjYEK</a>\n<li>Status: beta\n<li>className: <code>MyElementFilterElement</code>\n<li>parentClass: <code>MyMinElement</code>\n<li>tagName: <code><my-element-filter></code>\n</ul>", "_ext": { "idx": 13, "summary": "Filter a collection of elements, based on the value of a search input field.", "desc": "Filter a collection of elements, based on the value of a search input field.", "date": "09-Mar-2025", "isoDate": "2025-03-09", "since": "1.7.0", "status": "beta", "todo": null, "demoUrl": "https://codepen.io/nfreear/pen/LEYjYEK", "demoIsPen": true, "className": "MyElementFilterElement", "parentClass": "MyMinElement", "tagName": "my-element-filter", "extTemplate": null, "hasIntTemplate": true, "fileName": "MyElementFilterElement.js" } }, { "id": "my-feed", "title": "my-feed: Display an RSS, Atom or similar feed.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyFeedElement.js", "tags": [ "beta", "my blog" ], "content_html": "Display an RSS, Atom or similar feed.\n<ul>\n<li>Demo: <a href=\"../demo/my-feed.html\">../demo/my-feed.html</a>\n<li>Status: beta, my blog\n<li>className: <code>MyFeedElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-feed></code>\n</ul>", "_ext": { "idx": 14, "summary": "Display an RSS, Atom or similar feed.", "desc": "Display an RSS, Atom or similar feed.", "date": "20-Oct-2022", "isoDate": "2022-10-19", "since": "1.3.0", "status": "beta, my blog", "todo": null, "demoUrl": "../demo/my-feed.html", "demoIsPen": true, "className": "MyFeedElement", "parentClass": "MyElement", "tagName": "my-feed", "extTemplate": null, "hasIntTemplate": false, "fileName": "MyFeedElement.js" } }, { "id": "my-font", "title": "my-font: Load a font using the <q>FontFace</q> interface.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyFontElement.js", "tags": [ "alpha", "my blog" ], "content_html": "Load a font using the <q>FontFace</q> interface.\n\n Load a WOFF/2 font file using the CSS3 \"FontFace\" interface - handle success and errors.\n<ul>\n<li>Demo: <a href=\"../demo/my-font.html\">../demo/my-font.html</a>\n<li>Status: alpha, my blog\n<li>className: <code>MyFontElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-font></code>\n</ul>", "_ext": { "idx": 15, "summary": "Load a font using the <q>FontFace</q> interface.", "desc": "Load a font using the <q>FontFace</q> interface.\n\n Load a WOFF/2 font file using the CSS3 \"FontFace\" interface - handle success and errors.", "date": "02-Mar-2022", "isoDate": "2022-03-02", "since": "1.1.0", "status": "alpha, my blog", "todo": null, "demoUrl": "../demo/my-font.html", "demoIsPen": false, "className": "MyFontElement", "parentClass": "MyElement", "tagName": "my-font", "extTemplate": null, "hasIntTemplate": false, "fileName": "MyFontElement.js" } }, { "id": "my-foobar", "title": "my-foobar: Boilerplate template.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyFoobarElement.js", "tags": [ "beta" ], "content_html": "Boilerplate template.\n<ul>\n<li>Demo: <a href=\"#\">null</a>\n<li>Status: beta\n<li>className: <code>MyFoobarElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-foobar></code>\n</ul>", "_ext": { "idx": 16, "summary": "Boilerplate template.", "desc": "Boilerplate template.", "date": "09-Dec-2021", "isoDate": "2021-12-09", "since": "1.0.0", "status": "beta", "todo": null, "demoUrl": null, "demoIsPen": false, "className": "MyFoobarElement", "parentClass": "MyElement", "tagName": "my-foobar", "extTemplate": "my-foobar", "hasIntTemplate": false, "fileName": "MyFoobarElement.js" } }, { "id": "my-fork-me", "title": "my-fork-me: Add a \"Fork me on GitHub\" ribbon.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyForkMeElement.js", "tags": [], "content_html": "Add a \"Fork me on GitHub\" ribbon.\n<ul>\n<li>Demo: <a href=\"#\">null</a>\n<li>Status: \n<li>className: <code>MyForkMeElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-fork-me></code>\n</ul>", "_ext": { "idx": 17, "summary": "Add a \"Fork me on GitHub\" ribbon.", "desc": "Add a \"Fork me on GitHub\" ribbon.", "date": "09-Dec-2021", "isoDate": "2021-12-09", "since": null, "status": null, "todo": null, "demoUrl": null, "demoIsPen": false, "className": "MyForkMeElement", "parentClass": "MyElement", "tagName": "my-fork-me", "extTemplate": "my-fork-me", "hasIntTemplate": false, "fileName": "MyForkMeElement.js" } }, { "id": "my-form", "title": "my-form: Easily setup a Javascript-based form.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyFormElement.js", "tags": [ "beta" ], "content_html": "Easily setup a Javascript-based form.\n<ul>\n<li>Demo: <a href=\"#\">null</a>\n<li>Status: beta\n<li>className: <code>MyFormElement</code>\n<li>parentClass: <code>HTMLFormElement</code>\n<li>tagName: <code><my-form></code>\n</ul>", "_ext": { "idx": 18, "summary": "Easily setup a Javascript-based form.", "desc": "Easily setup a Javascript-based form.", "date": "19-Oct-2022", "isoDate": "2022-10-18", "since": "1.3.0", "status": "beta", "todo": null, "demoUrl": null, "demoIsPen": false, "className": "MyFormElement", "parentClass": "HTMLFormElement", "tagName": "my-form", "extTemplate": null, "hasIntTemplate": false, "fileName": "MyFormElement.js" } }, { "id": "my-gaad-widget", "title": "my-gaad-widget: A Global Accessibility Awareness Day banner.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyGaadWidgetElement.js", "tags": [], "content_html": "A Global Accessibility Awareness Day banner.\n<ul>\n<li>Demo: <a href=\"#\">null</a>\n<li>Status: \n<li>className: <code>MyGaadWidgetElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-gaad-widget></code>\n</ul>", "_ext": { "idx": 19, "summary": "A Global Accessibility Awareness Day banner.", "desc": "A Global Accessibility Awareness Day banner.", "date": "05-May-2022", "isoDate": "2022-05-04", "since": null, "status": null, "todo": "~ Monitor hard-coded date-text in template!", "demoUrl": null, "demoIsPen": false, "className": "MyGaadWidgetElement", "parentClass": "MyElement", "tagName": "my-gaad-widget", "extTemplate": "my-gaad-widget", "hasIntTemplate": false, "fileName": "MyGaadWidgetElement.js" } }, { "id": "my-indie-auth", "title": "my-indie-auth: Implementation of an <q>IndieAuth</q> client in the browser", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyIndieAuthElement.js", "tags": [ "experimental" ], "content_html": "Implementation of an <q>IndieAuth</q> client in the browser\n<ul>\n<li>Demo: <a href=\"#\">null</a>\n<li>Status: experimental\n<li>className: <code>MyIndieAuthElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-indie-auth></code>\n</ul>", "_ext": { "idx": 20, "summary": "Implementation of an <q>IndieAuth</q> client in the browser", "desc": "Implementation of an <q>IndieAuth</q> client in the browser", "date": "03-Oct-2022", "isoDate": "2022-10-02", "since": "1.3.0", "status": "experimental", "todo": "Experimental - not for production. Use at your own risk!", "demoUrl": null, "demoIsPen": false, "className": "MyIndieAuthElement", "parentClass": "MyElement", "tagName": "my-indie-auth", "extTemplate": null, "hasIntTemplate": true, "fileName": "MyIndieAuthElement.js" } }, { "id": "my-input-element", "title": "my-input-element: Copy useful attributes/properties from \"this\" to the enclosed `input` element.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyInputElement.js", "tags": [ "beta" ], "content_html": "Copy useful attributes/properties from \"this\" to the enclosed `input` element.\n<ul>\n<li>Demo: <a href=\"#\">null</a>\n<li>Status: beta\n<li>className: <code>MyInputElement</code>\n<li>parentClass: <code>HTMLElement</code>\n<li>tagName: <code><my-input-element></code>\n</ul>", "_ext": { "idx": 21, "summary": "Copy useful attributes/properties from \"this\" to the enclosed `input` element.", "desc": "Copy useful attributes/properties from \"this\" to the enclosed `input` element.", "date": "10-Mar-2025", "isoDate": "2025-03-10", "since": "1.7.0", "status": "beta", "todo": null, "demoUrl": null, "demoIsPen": false, "className": "MyInputElement", "parentClass": "HTMLElement", "tagName": "my-input-element", "extTemplate": null, "hasIntTemplate": false, "fileName": "MyInputElement.js" } }, { "id": "my-keyboard-control", "title": "my-keyboard-control: Navigate a custom control using arrow keys.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyKeyboardControlElement.js", "tags": [ "experimental", "accessibility" ], "content_html": "Navigate a custom control using arrow keys.\n\n Adjust an ARIA-based control such as a grid or listbox using the arrows keys.\n The <tt><my-keyboard-control></tt> element automatically detects some control-types, including listbox and grid, and adjusts to 1- or 2-dimensional navigation accordingly.\n<ul>\n<li>Demo: <a href=\"https://codepen.io/nfreear/pen/jOpLNxR\">https://codepen.io/nfreear/pen/jOpLNxR</a>\n<li>Status: experimental, accessibility\n<li>className: <code>MyKeyboardControlElement</code>\n<li>parentClass: <code>HTMLElement</code>\n<li>tagName: <code><my-keyboard-control></code>\n</ul>", "_ext": { "idx": 22, "summary": "Navigate a custom control using arrow keys.", "desc": "Navigate a custom control using arrow keys.\n\n Adjust an ARIA-based control such as a grid or listbox using the arrows keys.\n The <tt><my-keyboard-control></tt> element automatically detects some control-types, including listbox and grid, and adjusts to 1- or 2-dimensional navigation accordingly.", "date": "11-Jan-2023", "isoDate": "2023-01-11", "since": "1.3.0", "status": "experimental, accessibility", "todo": "Currently auto-detects grid and listbox. Add auto-detect for more?", "demoUrl": "https://codepen.io/nfreear/pen/jOpLNxR", "demoIsPen": true, "className": "MyKeyboardControlElement", "parentClass": "HTMLElement", "tagName": "my-keyboard-control", "extTemplate": null, "hasIntTemplate": false, "fileName": "MyKeyboardControlElement.js" } }, { "id": "my-live-bridge", "title": "my-live-bridge: Listen for a DOM or CustomEvent event, and update a live-region with data.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyLiveBridgeElement.js", "tags": [ "beta" ], "content_html": "Listen for a DOM or CustomEvent event, and update a live-region with data.\n<ul>\n<li>Demo: <a href=\"https://codepen.io/nfreear/pen/XJWVRPK\">https://codepen.io/nfreear/pen/XJWVRPK</a>\n<li>Status: beta\n<li>className: <code>MyLiveBridgeElement</code>\n<li>parentClass: <code>HTMLElement</code>\n<li>tagName: <code><my-live-bridge></code>\n</ul>", "_ext": { "idx": 23, "summary": "Listen for a DOM or CustomEvent event, and update a live-region with data.", "desc": "Listen for a DOM or CustomEvent event, and update a live-region with data.", "date": "15-Mar-2025", "isoDate": "2025-03-15", "since": "1.7.0", "status": "beta", "todo": null, "demoUrl": "https://codepen.io/nfreear/pen/XJWVRPK", "demoIsPen": true, "className": "MyLiveBridgeElement", "parentClass": "HTMLElement", "tagName": "my-live-bridge", "extTemplate": null, "hasIntTemplate": false, "fileName": "MyLiveBridgeElement.js" } }, { "id": "my-live-editor", "title": "my-live-editor: A code playground / live editor.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyLiveEditorElement.js", "tags": [], "content_html": "A code playground / live editor.\n<ul>\n<li>Demo: <a href=\"../demo/my-live-editor.html\">../demo/my-live-editor.html</a>\n<li>Status: \n<li>className: <code>MyLiveEditorElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-live-editor></code>\n</ul>", "_ext": { "idx": 24, "summary": "A code playground / live editor.", "desc": "A code playground / live editor.", "date": "30-May-2022", "isoDate": "2022-05-29", "since": null, "status": null, "todo": null, "demoUrl": "../demo/my-live-editor.html", "demoIsPen": false, "className": "MyLiveEditorElement", "parentClass": "MyElement", "tagName": "my-live-editor", "extTemplate": "my-live-editor", "hasIntTemplate": false, "fileName": "MyLiveEditorElement.js" } }, { "id": "my-local-storage", "title": "my-local-storage: Easily store a form field value to `localStorage`.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyLocalStorageElement.js", "tags": [ "experimental" ], "content_html": "Easily store a form field value to `localStorage`.\n Also supports `sessionStorage`.\n<ul>\n<li>Demo: <a href=\"https://codepen.io/nfreear/pen/OJoRbqa\">https://codepen.io/nfreear/pen/OJoRbqa</a>\n<li>Status: experimental\n<li>className: <code>MyLocalStorageElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-local-storage></code>\n</ul>", "_ext": { "idx": 25, "summary": "Easily store a form field value to `localStorage`.", "desc": "Easily store a form field value to `localStorage`.\n Also supports `sessionStorage`.", "date": "24-Jan-2023", "isoDate": "2023-01-24", "since": "1.6.0", "status": "experimental", "todo": null, "demoUrl": "https://codepen.io/nfreear/pen/OJoRbqa", "demoIsPen": true, "className": "MyLocalStorageElement", "parentClass": "MyElement", "tagName": "my-local-storage", "extTemplate": null, "hasIntTemplate": false, "fileName": "MyLocalStorageElement.js" } }, { "id": "my-lorem-ipsum", "title": "my-lorem-ipsum: Placeholder text.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyLoremIpsumElement.js", "tags": [ "experimental" ], "content_html": "Placeholder text.\n<ul>\n<li>Demo: <a href=\"#\">null</a>\n<li>Status: experimental\n<li>className: <code>MyLoremIpsumElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-lorem-ipsum></code>\n</ul>", "_ext": { "idx": 26, "summary": "Placeholder text.", "desc": "Placeholder text.", "date": "09-Dec-2021", "isoDate": "2021-12-09", "since": "1.1.0", "status": "experimental", "todo": null, "demoUrl": null, "demoIsPen": false, "className": "MyLoremIpsumElement", "parentClass": "MyElement", "tagName": "my-lorem-ipsum", "extTemplate": "my-lorem-ipsum", "hasIntTemplate": false, "fileName": "MyLoremIpsumElement.js" } }, { "id": "my-map", "title": "my-map: Easily embed a map", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyMapElement.js", "tags": [ "beta" ], "content_html": "Easily embed a map\n\n powered by Leaflet.js - optionally with a GeoJSON feed.\n Contains accessibility fixes and enhancements.\n<ul>\n<li>Demo: <a href=\"../demo/my-map.html\">../demo/my-map.html</a>\n<li>Status: beta\n<li>className: <code>MyMapElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-map></code>\n</ul>", "_ext": { "idx": 27, "summary": "Easily embed a map", "desc": "Easily embed a map\n\n powered by Leaflet.js - optionally with a GeoJSON feed.\n Contains accessibility fixes and enhancements.", "date": "27-Nov-2021", "isoDate": "2021-11-27", "since": "1.0.0", "status": "beta", "todo": null, "demoUrl": "../demo/my-map.html", "demoIsPen": true, "className": "MyMapElement", "parentClass": "MyElement", "tagName": "my-map", "extTemplate": null, "hasIntTemplate": true, "fileName": "MyMapElement.js" } }, { "id": "my-math", "title": "my-math: MyMathElement", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyMathElement.js", "tags": [ "beta" ], "content_html": "MyMathElement\n - Powered by MathJax - \"Beautiful and accessible math in all browsers\".\n<ul>\n<li>Demo: <a href=\"#\">null</a>\n<li>Status: beta\n<li>className: <code>MyMathElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-math></code>\n</ul>", "_ext": { "idx": 28, "summary": "MyMathElement", "desc": "MyMathElement\n - Powered by MathJax - \"Beautiful and accessible math in all browsers\".", "date": "10-May-2023", "isoDate": "2023-05-09", "since": "1.0.0", "status": "beta", "todo": null, "demoUrl": null, "demoIsPen": false, "className": "MyMathElement", "parentClass": "MyElement", "tagName": "my-math", "extTemplate": null, "hasIntTemplate": false, "fileName": "MyMathElement.js" } }, { "id": "my-notice", "title": "my-notice: A dismissable notice.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyNoticeElement.js", "tags": [], "content_html": "A dismissable notice.\n\n For example, an EU cookie-law notice!\n<ul>\n<li>Demo: <a href=\"#\">null</a>\n<li>Status: \n<li>className: <code>MyNoticeElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-notice></code>\n</ul>", "_ext": { "idx": 29, "summary": "A dismissable notice.", "desc": "A dismissable notice.\n\n For example, an EU cookie-law notice!", "date": "07-Jan-2022", "isoDate": "2022-01-07", "since": null, "status": null, "todo": null, "demoUrl": null, "demoIsPen": false, "className": "MyNoticeElement", "parentClass": "MyElement", "tagName": "my-notice", "extTemplate": "my-notice", "hasIntTemplate": false, "fileName": "MyNoticeElement.js" } }, { "id": "my-options", "title": "my-options: Set configuration options, including templateHost.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyOptionsElement.js", "tags": [ "beta" ], "content_html": "Set configuration options, including templateHost.\n<ul>\n<li>Demo: <a href=\"../demo/my-options.html\">../demo/my-options.html</a>\n<li>Status: beta\n<li>className: <code>MyOptionsElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-options></code>\n</ul>", "_ext": { "idx": 30, "summary": "Set configuration options, including templateHost.", "desc": "Set configuration options, including templateHost.", "date": "11-Dec-2021", "isoDate": "2021-12-11", "since": "1.0.0", "status": "beta", "todo": null, "demoUrl": "../demo/my-options.html", "demoIsPen": false, "className": "MyOptionsElement", "parentClass": "MyElement", "tagName": "my-options", "extTemplate": null, "hasIntTemplate": false, "fileName": "MyOptionsElement.js" } }, { "id": "my-page", "title": "my-page: Setup a page with minimum markup.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyPageElement.js", "tags": [ "experimental" ], "content_html": "Setup a page with minimum markup.\n<ul>\n<li>Demo: <a href=\"../demo/my-page.html\">../demo/my-page.html</a>\n<li>Status: experimental\n<li>className: <code>MyPageElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-page></code>\n</ul>", "_ext": { "idx": 31, "summary": "Setup a page with minimum markup.", "desc": "Setup a page with minimum markup.", "date": "27-Nov-2021", "isoDate": "2021-11-27", "since": "1.0.0", "status": "experimental", "todo": null, "demoUrl": "../demo/my-page.html", "demoIsPen": false, "className": "MyPageElement", "parentClass": "MyElement", "tagName": "my-page", "extTemplate": null, "hasIntTemplate": false, "fileName": "MyPageElement.js" } }, { "id": "my-paste-target", "title": "my-paste-target: My Paste Target -", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyPasteTargetElement.js", "tags": [], "content_html": "My Paste Target -\n Its aim is to make it easier to paste content from the clipboard into a\n group of input fields, in a more accessible way.\n It may help with WCAG 2.2 Success Criteria 3.3.8 Accessible Authentication.\n<ul>\n<li>Demo: <a href=\"https://codepen.io/nfreear/pen/jOXJjgW\">https://codepen.io/nfreear/pen/jOXJjgW</a>\n<li>Status: \n<li>className: <code>MyPasteTargetElement</code>\n<li>parentClass: <code>HTMLElement</code>\n<li>tagName: <code><my-paste-target></code>\n</ul>", "_ext": { "idx": 32, "summary": "My Paste Target -", "desc": "My Paste Target -\n Its aim is to make it easier to paste content from the clipboard into a\n group of input fields, in a more accessible way.\n It may help with WCAG 2.2 Success Criteria 3.3.8 Accessible Authentication.", "date": "01-Nov-2023", "isoDate": "2023-11-01", "since": null, "status": null, "todo": "validate format!", "demoUrl": "https://codepen.io/nfreear/pen/jOXJjgW", "demoIsPen": true, "className": "MyPasteTargetElement", "parentClass": "HTMLElement", "tagName": "my-paste-target", "extTemplate": null, "hasIntTemplate": false, "fileName": "MyPasteTargetElement.js" } }, { "id": "my-search", "title": "my-search: Custom site search.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MySearchElement.js", "tags": [], "content_html": "Custom site search.\n<ul>\n<li>Demo: <a href=\"../demo/my-search.html\">../demo/my-search.html</a>\n<li>Status: \n<li>className: <code>MySearchElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-search></code>\n</ul>", "_ext": { "idx": 33, "summary": "Custom site search.", "desc": "Custom site search.", "date": "17-Mar-2022", "isoDate": "2022-03-17", "since": null, "status": null, "todo": null, "demoUrl": "../demo/my-search.html", "demoIsPen": false, "className": "MySearchElement", "parentClass": "MyElement", "tagName": "my-search", "extTemplate": null, "hasIntTemplate": false, "fileName": "MySearchElement.js" } }, { "id": "my-site-counter", "title": "my-site-counter: Minimalist, privacy-focussed site analytics, built on GoatCounter.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MySiteCounterElement.js", "tags": [], "content_html": "Minimalist, privacy-focussed site analytics, built on GoatCounter.\n No cookies. No tracking of IP address. No external Javascript.\n<ul>\n<li>Demo: <a href=\"https://codepen.io/nfreear/pen/NWOPoXO\">https://codepen.io/nfreear/pen/NWOPoXO</a>\n<li>Status: \n<li>className: <code>MySiteCounterElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-site-counter></code>\n</ul>", "_ext": { "idx": 34, "summary": "Minimalist, privacy-focussed site analytics, built on GoatCounter.", "desc": "Minimalist, privacy-focussed site analytics, built on GoatCounter.\n No cookies. No tracking of IP address. No external Javascript.", "date": "08-April-2023", "isoDate": "2023-04-07", "since": null, "status": null, "todo": null, "demoUrl": "https://codepen.io/nfreear/pen/NWOPoXO", "demoIsPen": true, "className": "MySiteCounterElement", "parentClass": "MyElement", "tagName": "my-site-counter", "extTemplate": null, "hasIntTemplate": false, "fileName": "MySiteCounterElement.js" } }, { "id": "my-skip-link", "title": "my-skip-link: Add a <q>skip to content</q> link,", "url": "https://github.com/nfreear/elements/tree/main/src/components/MySkipLinkElement.js", "tags": [ "beta", "my blog", "accessibility" ], "content_html": "Add a <q>skip to content</q> link,\n which becomes visible on focus.\n<ul>\n<li>Demo: <a href=\"../demo/my-skip-link.html\">../demo/my-skip-link.html</a>\n<li>Status: beta, my blog, accessibility\n<li>className: <code>MySkipLinkElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-skip-link></code>\n</ul>", "_ext": { "idx": 35, "summary": "Add a <q>skip to content</q> link,", "desc": "Add a <q>skip to content</q> link,\n which becomes visible on focus.", "date": null, "isoDate": null, "since": "1.0.0", "status": "beta, my blog, accessibility", "todo": null, "demoUrl": "../demo/my-skip-link.html", "demoIsPen": false, "className": "MySkipLinkElement", "parentClass": "MyElement", "tagName": "my-skip-link", "extTemplate": "my-skip-link", "hasIntTemplate": false, "fileName": "MySkipLinkElement.js" } }, { "id": "my-slide-deck", "title": "my-slide-deck: Present a deck of slides", "url": "https://github.com/nfreear/elements/tree/main/src/components/MySlideDeckElement.js", "tags": [ "alpha" ], "content_html": "Present a deck of slides\n\n - powered by Reveal.js.\n<ul>\n<li>Demo: <a href=\"../demo/my-slide-deck.html\">../demo/my-slide-deck.html</a>\n<li>Status: alpha\n<li>className: <code>MySlideDeckElement</code>\n<li>parentClass: <code>MyElement</code>\n<li>tagName: <code><my-slide-deck></code>\n</ul>", "_ext": { "idx": 36, "summary": "Present a deck of slides", "desc": "Present a deck of slides\n\n - powered by Reveal.js.", "date": "24-Sep-2022", "isoDate": "2022-09-23", "since": "1.3.0", "status": "alpha", "todo": null, "demoUrl": "../demo/my-slide-deck.html", "demoIsPen": false, "className": "MySlideDeckElement", "parentClass": "MyElement", "tagName": "my-slide-deck", "extTemplate": null, "hasIntTemplate": true, "fileName": "MySlideDeckElement.js" } }, { "id": "my-star-rating", "title": "my-star-rating: A keyboard-accessible interactive to give a star rating.", "url": "https://github.com/nfreear/elements/tree/main/src/components/MyStarRatingElement.js", "tags": [ "beta" ], "conten