Skip to content

DNDAlert is a simple JavaScript library alert for web developers

License

Notifications You must be signed in to change notification settings

ismaildondu/DNDAlert

Repository files navigation

DNDAlert.js

DNDAlert-Logo

DNDAlert is a simple JavaScript library alert for web developers.

DNDAlert-GIF

GitHub GitHub Repo stars GitHub Repo stars

Examples

DNDAlert_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]

    • buttonList

    • [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.