DNDAlert.js

DNDAlert is a simple JavaScript library alert for web developers.

Examples

Features

• SVG Types ( success 🟢 , error 🔴 , warning 🟠, info 🔵 )
• Unlimited button support
• HTML message support
• Easy to set up and use
• Callback bag
• Responsive
• Animation
• Theme (white 🌕 , dark 🌑)
• Draggable

Simple Usage

const Alert = new DNDAlert({
  message: "DNDAlert is a simple JavaScript library alert for web developers.",
});

• [message]
  • Null values ​​cannot be entered. The content of the alert.

Usage

const Alert = new DNDAlert({
  title: "Test Alert",
  message:
    "<b>DNDAlert</b> is a simple JavaScript library alert for web developers.",
  type: "warning",
  html: true,
  buttons: [
    {
      text: "Ok",
      class: "btn btn-primary",
      onClick: (bag) => {
        alert("Ok button clicked");
      },
    },
    {
      text: "Cancel",
      type: "danger",
      onClick: (bag) => {
        bag.CLOSE_MODAL();
      },
    },
  ],
  closeBackgroundClick: true,
  portalElement: document.querySelector("#modal"),
  portalOverflowHidden: true,
  textAlign: "center",
  theme: "dark",
  onOpen: (bag) => {
    console.log("Modal Opened");
    console.log(bag);
  },
  onClose: (bag) => {
    console.log("Modal Closed");
    console.log(bag.PROPERTIES);
  },
  opacity: 1,
  autoCloseDuration: 3000,
  draggable: true,
  animationStatus: true,
  closeIcon: false,
  sourceControlWarning: true,
});

• [title]

  • Message title (If not given, a modal with no header is created.)

• [html]

  • Message whether to use HTML in the message.

• [buttons]

  • It is an array. Keeps the buttons inside.

  • [text] Text inside the button

  • [class] Sets the class of the button. * If not defined, it comes with the library's default button style (light)

  • [type] Default button styles available in the library [primary,secondary,success,danger,warning,light]

  • 

  • [onClick] Function to run after clicking the button.

    • The library sends a BAG_ELEMENT object to this function, which contains the CLOSE_MODAL function needed to close the modal

      onClick: (BAG_ELEMENT) => {
           BAG_ELEMENT.CLOSE_MODAL();
         },
      

• [closeBackgroundClick] If true, clicking (not Modal) the background closes the Modal

• [autoCloseDuration] Takes value (X) in milliseconds and closes modal after X milliseconds.

• [onOpen] The function is called by the library when the modal is opened.

• [onClose] The function is called by the library when the modal is closed.

• [closeIcon] Sets the status of the close button on the top right (invisible if false)

• [portalElement] To call a modal on an element other than body

• [portalOverflowHidden] Portal overflow hidden

• [textAlign] Css property of message

• [theme] Theme (dark AND white)

• [type] success,error,warning and info | If it is not entered, the type will not be displayed, only the message will be show.

• [opacity] Modal css opacity.

• [animationStatus] If true, opening and closing will be accompanied by animation.

• [draggable] Modal draggable. (Title required)

• [sourceControlWarning] If true, when the modal is run, it makes a request to NPM and compares the current version with the local version. If the versions are different, a warning message in the console. (If you don't want to make a npm version request, you can turn it off.)

Installation

cd my-web-project
npm i dndalertjs

or

cd my-web-project
git clone https://github.com/ismailfp/DNDAlert.js.git

Default Value List

Property	Value
portalElement	document.body
portalOverflowHidden	true
animationStatus	true
closeIcon	true
closeBackgroundClick	true
sourceControlWarning	true
type	false
autoCloseDuration	false
draggable	false
html	false
title	false
buttons[] > class	light
theme	white
opacity	1.00
textAlign	left

BAG_ELEMENT

• onOpen,onClose and click function of the buttons

Property	?
CLOSE_MODAL	Modal closing function
PROPERTIES	Contains general information
PROPERTIES->CREATED_TIME	Modal opening date
PROPERTIES->THEME	THEME
PROPERTIES->VERSION	Current version (DNDAlert - NPM)
PROPERTIES->CONTEXT	Everything in Context
PROPERTIES->HOW_MANY_SECONDS	Only onClose BAG (Shows how many seconds the alert on after closing)

---

MIT License

Copyright (c) 2022 İsmail Döndü

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.