📣 A vanilla js library for creating alerts, prompts and confirms.

Overview

attention.js

This library will be released soon as 1.0 with a whole new codebase! Stay tuned!

A vanilla js library for creating alerts, prompts, and confirms.


Demo

Need help?

Create an issue or write me [email protected]

Install

Install attention.js is quite easy.

Install script

Just include the script dist/attention.js into your project and put the script before the closing body tag. You also need to put the CSS into your project dist/attention.css.

<html>
    <head>
        <link href="dist/attention.css" rel="stylesheet">
        </style>
    </head>
    <body>
        <script src="dist/attention.js"></script>
    </body>
</html>

Components

Alert

    import { Alert } from 'attention';

    new Alert({
        title: 'This is a Title',
        content: 'This is my content'
    });

Confirm

    import { Confirm } from 'attention';

    new Confirm({
        title: 'This is a Confirm',
        content: 'This is my content',
        onConfirm(component) {
            console.log('Accepted');
        },
        onCancel(component) {
            console.log('Canceled');
        }
    });

Prompt

    import { Prompt } from 'attention';

    new Prompt({
        title: 'This is a Prompt',
        content: 'This is my content',
        onSubmit(component, value) {
            console.log(`Value: ${value}`
        }
    });

Config / Option

When creating a new Object of an Alert, Prompt, or Confirm, it is needed to pass an object. This object has a few options that you can change.

key  description  type  mandatory
title  Title  string  true
content  Content  string  true
buttonCancel  Text for the cancel button (confirm)  string  false
buttonConfirm  Text for the confirm button (confirm)  string  false
placeholderText  Placeholder text (prompt)  string  false
submitText  Text for the submit button (prompt)  false  

Callbacks

Attention offers a lot of lifecycle methods. These methods are allowing changing the behavior of the life of a component.

Here is a list of available methods. These methods are available in every component.

name  description
beforeRender  fires before rendering a component
afterRender  fires after rendering a component
beforeClose  fires before closing a component
afterClose  fires after closing a component

Furthermore, we have methods which are only available in some methods.

Callbacks - Confirm

name  description
onAccept(component)  fires when a user has accepted
onCancel(component)  fires when a user has canceled

Callbacks - Prompt

name  description
onSubmit(component, value)  fires when the user has entered the input

Questions

For questions and support feel free to create an issue or write an email to [email protected]

Issues

If you found a bug, then please create an issue. It will help me a lot to make my work better. :)

Contribution

Pull requests are always welcome. I am always happy to see others working on my GitHub projects.

Get in touch

Write an email to [email protected] :)

You might also like...

A jQuery plugin wrapper around Bootstrap Alerts, to create Notifications (Toasts)

A jQuery plugin wrapper around Bootstrap Alerts, to create Notifications (Toasts)

bootstrap-show-notification A jQuery plugin wrapper around Bootstrap 4 Alerts, to show them as toasts (also called notifications) dynamically from Jav

Aug 22, 2022

NovelAI's prompts for ImageGenerate support GoogleChrome extension.

NAI_magic_wand NovelAI's prompts for ImageGenerate support GoogleChrome extension. Project development & build npm run dev dev server started. Please

Dec 1, 2022

A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses

MeiMei - Multiple Email Input MeiMei: A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses.

Apr 13, 2022

A JavaScript plugin for creating a tickerboard effect. Plugin for React or vanilla JS.

ticker-board A JavaScript plugin for creating a tickerboard effect. See the Ticker Board page for more info. Importing it There are basically two ways

Aug 11, 2022

This is a vanilla Node.js rest API created to show that it is possible to create a rest API using only vanilla Node.js

This is a vanilla Node.js rest API created to show that it is possible to create a rest API using only vanilla Node.js. But in most cases, I would recommend you to use something like Express in a production project for productivity purposes.

Jul 19, 2022

Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.

Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.

Atomico simplifies learning, workflow and maintenance when creating webcomponents. Scalable and reusable interfaces: with Atomico the code is simpler

Dec 31, 2022

Node.js library for creating bots and sending/receiving messages using the Whatsapp Cloud API

whatsapp-cloud-api whatsapp-cloud-api is a Node.js library for creating bots and sending/receiving messages using the Whatsapp Cloud API. Contains bui

Jan 2, 2023

PxLoader is a simple JavasScript library for creating preloaders and resource downloaders for HTML5 apps.

PxLoader is a Javascript library that helps you download images, sound files or anything else you need before you take a specific action on your site

Dec 30, 2022

We are creating a Library that would ensure developers do not reinvent the wheel anymore as far as Authentication is concerned. Developers can easily register and download authentication codes that suits their need at any point.

We are creating a Library that would ensure developers do not reinvent the wheel anymore as far as Authentication is concerned. Developers can easily register and download authentication codes that suits their need at any point.

#AuthWiki Resource Product Documentation Figma Database Schema First Presentation Live Link API Documentation Individual Contributions User Activity U

Dec 2, 2022
Comments
  • How to insert HTML into the template

    How to insert HTML into the template

    When I try to add HTML tags on the confirm's body, it print the tags and not execute them.

    If I can't format the body of the alert/confirm/prompt with HTML tags, how can I do it ?

    good first issue 
    opened by hmsvitor 15
  • Callbacks not triggered when accept with Confirm form

    Callbacks not triggered when accept with Confirm form

    Hey ! I'm sorry to bother you again

    image

    I wanted to create a Confirm component but when I press 'accept', onAccept is not triggered :/ (I put a console.log to make sure if it fit well or not)

    Thanks again for the work you do!

    bug 
    opened by metroidpam 8
  • Error while trying to create a prompt window using vuejs

    Error while trying to create a prompt window using vuejs

    image

    restock:function(item){ new Attention.Prompt({ title: 'Quantité de ' + item.item_name, content: '', onSubmit(component, value) { console.log(value) } }); },

    opened by metroidpam 5
  • Bump minimist from 1.2.5 to 1.2.6

    Bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
Jan-Markus Langer
I like to solve problems.
Jan-Markus Langer
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Fnon is a client-side JavaScript library for models, loading indicators, notifications, and alerts which makes your web projects much better.

???????? Fnon is the name of my late mother, It's an Arabic word which means Art, I created this library in honor of her name. Fnon is a client-side J

Adel N Al-Awdy 5 Sep 11, 2022
Easiest 1-click way to install and use Stable Diffusion on your own computer. Provides a browser UI for generating images from text prompts and images. Just enter your text prompt, and see the generated image.

Stable Diffusion UI Easiest way to install and use Stable Diffusion on your own computer. No dependencies or technical knowledge required. 1-click ins

null 3.5k Dec 30, 2022
MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginative images, and is available on Discord and through a web interface here.

Midjourney MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginativ

Andrew Tsegaye 8 May 1, 2023
Automatically skip Netflix intros, recaps, and next episode prompts ⚡⌛

netflix-skipper Automatically skip Netflix intros, recaps, and next episode prompts ⚡ ⌛ Don't waste any more time waiting or clicking on intros, recap

Ran Ribenzaft 20 Dec 24, 2022
Front-end for FireNearby service. View recent fires and sign up to receive alerts: caseymm.github.io/fire-nearby

fire-nearby (firenearby service front-end) This application is composed of three pages: Map of recent fires Sign up form to receive alerts About this

Casey Miller 4 Mar 30, 2022
A beautiful, responsive, highly customizable and accessible replacement for JavaScript's popup boxes. Zero dependencies.Alerts ,dialogs

AsgarAlert (v1) for JS Install <script defer src="/asgar-alert.js"></script> Examples The most basic message: asgar("Hello world!"); A message signali

Asgar Aliyev 5 Dec 20, 2022
It's an AI Tag (Prompt) generator for magic drawer! We have many tags and support to generate prompts easily!

魔导绪论 AI 魔咒生成器, 使用由 B 站 UP 主 十二今天也很可爱 提供的 4 万个 tag 并提供中文检索,并提供了魔咒社区方便魔法师们直接复制生成。永远免费,永无广告,无商业。 v2 版本更新内容 使用 Netlify 的云函数提供更为快速的社区数据操作!(暂时不知道花费多少) 查看自己的

江夏尧 28 Jan 1, 2023
TikTokLive-Widget: A socket client/server program that exposes a widget with alerts (such as gifts, followers ...) for a specific user streaming on Tik Tok Live platform

TikTokLive-Widget: A socket client/server program that exposes a widget with alerts (such as gifts, followers ...) for a specific user streaming on Tik Tok Live platform

null 3 Dec 3, 2022