DNDAlert.js

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

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) |