diff --git a/README.md b/README.md index dc08b2d..6b26606 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# Accessible Modal +# Bare Modal -Accessible Modal is a lightweight, accessible modal library designed to enhance user interaction on web applications. Utilizing the native HTML `` element, it offers an easy and robust solution for implementing modals with features like automatic action binding, cookie-based user action tracking, customizable cookie durations, and timed modal displays. +Bare Modal is a lightweight, accessible modal library designed to enhance user interaction on web applications. Utilizing the native HTML `` element, it offers an easy and robust solution for implementing modals with features like automatic action binding, cookie-based user action tracking, customizable cookie durations, and timed modal displays. ## Features @@ -13,10 +13,10 @@ Accessible Modal is a lightweight, accessible modal library designed to enhance ## Installation -Include Accessible Modal in your project by adding the `Accessible Modal.js` file to your codebase and linking to it within your HTML file: +Include Bare Modal in your project by adding the `bare-modal.min.js` file to your codebase and linking to it within your HTML file: ```html - + ``` ## Usage @@ -78,7 +78,7 @@ Sets the duration for which the user's action on the modal is remembered. ## Accessibility -Accessible Modal leverages the `` element's inherent accessibility features, such as focus management and semantic structure. It adheres to WCAG guidelines, ensuring that modals are accessible to all users, including those using assistive technologies. +Bare Modal leverages the `` element's inherent accessibility features, such as focus management and semantic structure. It adheres to WCAG guidelines, ensuring that modals are accessible to all users, including those using assistive technologies. ## Best Practices @@ -88,8 +88,8 @@ Accessible Modal leverages the `` element's inherent accessibility featu ## Contributing -Contributions are welcome! If you have suggestions for improving Accessible Modal, please open an issue or submit a pull request. +Contributions are welcome! If you have suggestions for improving Bare Modal, please open an issue or submit a pull request. ## License -Accessible Modal is open-source software licensed under the MIT license. +Bare Modal is open-source software licensed under the MIT license. diff --git a/dist/accessible-modal.min.js b/dist/accessible-modal.min.js deleted file mode 100644 index 714fc7f..0000000 --- a/dist/accessible-modal.min.js +++ /dev/null @@ -1 +0,0 @@ -class AccessibleModal{constructor(){document.addEventListener("DOMContentLoaded",(()=>{this.initModals(),this.initTimedModals()}))}initModals(){document.querySelectorAll("[data-modal-trigger]").forEach((t=>{const e=t.getAttribute("data-modal-trigger"),o=document.getElementById(e);t.addEventListener("click",(()=>o.showModal())),this.bindButtonActions(o,e)}))}bindButtonActions(t,e){t.querySelectorAll("[data-modal-close], [data-modal-accept], [data-modal-cancel]").forEach((o=>{o.addEventListener("click",(o=>{let a="";o.target.hasAttribute("data-modal-close")?a="close":o.target.hasAttribute("data-modal-accept")?a="accept":o.target.hasAttribute("data-modal-cancel")&&(a="cancel");const i=t.getAttribute("data-modal-cookie-expire")||7;this.setCookie(`modalAction_${e}`,a,parseInt(i)),t.close()}))}))}initTimedModals(){document.querySelectorAll("dialog[data-modal-timed]").forEach((t=>{const e=t.getAttribute("data-modal-timed"),o=t.id;this.getCookie(`modalAction_${o}`)||setTimeout((()=>{t.showModal(),this.bindButtonActions(t,o)}),1e3*e)}))}setCookie(t,e,o){const a=new Date;a.setTime(a.getTime()+24*o*60*60*1e3);const i="expires="+a.toUTCString();document.cookie=`${t}=${e};${i};path=/`}getCookie(t){const e=`; ${document.cookie}`.split(`; ${t}=`);return 2===e.length?e.pop().split(";").shift():null}} \ No newline at end of file diff --git a/dist/bare-modal.min.js b/dist/bare-modal.min.js new file mode 100644 index 0000000..6628e3d --- /dev/null +++ b/dist/bare-modal.min.js @@ -0,0 +1 @@ +class BareModal{constructor(){document.addEventListener("DOMContentLoaded",(()=>{this.initModals(),this.initTimedModals()}))}initModals(){document.querySelectorAll("[data-modal-trigger]").forEach((t=>{const e=t.getAttribute("data-modal-trigger"),o=document.getElementById(e);t.addEventListener("click",(()=>o.showModal())),this.bindButtonActions(o,e)}))}bindButtonActions(t,e){t.querySelectorAll("[data-modal-close], [data-modal-accept], [data-modal-cancel]").forEach((o=>{o.addEventListener("click",(o=>{let a="";o.target.hasAttribute("data-modal-close")?a="close":o.target.hasAttribute("data-modal-accept")?a="accept":o.target.hasAttribute("data-modal-cancel")&&(a="cancel");const i=t.getAttribute("data-modal-cookie-expire")||7;this.setCookie(`modalAction_${e}`,a,parseInt(i)),t.close()}))}))}initTimedModals(){document.querySelectorAll("dialog[data-modal-timed]").forEach((t=>{const e=t.getAttribute("data-modal-timed"),o=t.id;this.getCookie(`modalAction_${o}`)||setTimeout((()=>{t.showModal(),this.bindButtonActions(t,o)}),1e3*e)}))}setCookie(t,e,o){const a=new Date;a.setTime(a.getTime()+24*o*60*60*1e3);const i="expires="+a.toUTCString();document.cookie=`${t}=${e};${i};path=/`}getCookie(t){const e=`; ${document.cookie}`.split(`; ${t}=`);return 2===e.length?e.pop().split(";").shift():null}} \ No newline at end of file diff --git a/package.json b/package.json index 214b98f..a11d18d 100644 --- a/package.json +++ b/package.json @@ -1,20 +1,21 @@ { - "name": "accessible-modal", + "name": "bare-modal", "version": "1.0.0", - "description": "Accessible Modal is a lightweight JS library using the native `` HTML tag. Features automatic bindings, cookie tracking, timed displays, and WCAG compliance for enhanced user engagement and accessibility.", + "description": "Bare Modal is a lightweight JS library using the native `` HTML tag. Features automatic bindings, cookie tracking, timed displays, and WCAG compliance for enhanced user engagement and accessibility.", "main": "src/index.js", "scripts": { - "build": "terser src/index.js -o dist/accessible-modal.min.js -c -m", + "build": "terser src/index.js -o dist/bare-modal.min.js -c -m", "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", - "url": "git+https://github.com/prolific-digital/accessible-modal.git" + "url": "git+https://github.com/prolific-digital/bare-modal.git" }, "keywords": [ "javascript", "html5", "native", + "bare", "accessibility", "modal", "easy-to-use" @@ -22,9 +23,9 @@ "author": "Chris Miller, Jeff Gullett", "license": "MIT", "bugs": { - "url": "https://github.com/prolific-digital/accessible-modal/issues" + "url": "https://github.com/prolific-digital/bare-modal/issues" }, - "homepage": "https://github.com/prolific-digital/accessible-modal#readme", + "homepage": "https://github.com/prolific-digital/bare-modal#readme", "devDependencies": { "terser": "^5.28.1" } diff --git a/src/index.html b/src/index.html index f84684c..c116de2 100644 --- a/src/index.html +++ b/src/index.html @@ -3,10 +3,10 @@ - Accessible Modal Examples + Bare Modal Examples -

Accessible Modal Examples

+

Bare Modal Examples

@@ -35,9 +35,9 @@

Accessible Modal Examples

- + diff --git a/src/index.js b/src/index.js index 8b0d7bf..aa623ed 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,8 @@ /** - * Enhanced AccessibleModal class with support for remembering user actions through cookies, + * Enhanced BareModal class with support for remembering user actions through cookies, * customizable cookie duration, and automatic timed modal display. */ -class AccessibleModal { +class BareModal { constructor() { // Initialize modals once the DOM is fully loaded. document.addEventListener('DOMContentLoaded', () => {