sweetconfirm.js

v0.4.1

Published

4 years ago

A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for drop an annoying pop-ups confirming the submission of form in your web apps.

Downloads

0High
0Medium
0Low

vikkyshostak

confirm success button confirm event submit button button gradient button effect

Docs, Change log

Install

Simple install to your project via npm:

npm install --save sweetconfirm.js

Or include to your html page from fast CDN jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/sweetconfirm.js@0/sweetconfirm.min.js"></script>

How to use?

Let's start with HTML page and some CSS styles for submit button (./index.html):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      button {
        display: block;
        border-radius: 30px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button type="submit" id="button">💬 Push the button!</button>
    <script src="./script.js"></script>
  </body>
</html>

Next, time for JavaScript (./script.js):

import { SweetConfirm } from "sweetconfirm.js";

// Define element (button)
var button = document.getElementById("button");

// Init SweetConfirm.js to element with callback
new SweetConfirm(button, () => {
  console.log("This is fake data!");
});

Use via CDN

Similar to npm way, but easily (all-in-one ./index.html file):

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... -->
  </head>
  <body>
    <button type="submit" id="button">💬 Push the button!</button>

    <div id="message"></div>

    <script src="https://cdn.jsdelivr.net/npm/sweetconfirm.js@0/sweetconfirm.min.js"></script>
    <script>
      // Define vars
      var button, message;
      button = document.getElementById("button");
      message = document.getElementById("message");

      // Callback function
      function showMessage(element, text) {
        element.innerText = text;
      }

      // Init SweetConfirm.js
      new SweetConfirm(button, () => {
        showMessage(message, "OK! Refresh page for try again.");
      });
    </script>
  </body>
</html>

What about options?

function SweetConfirm ( element, function () {...}, [options, ...] )

| Option | Description | Default value | | ----------------------- | --------------------------------------------------------------------------------------------- | ------------------ | | bg | Background color for initial state, usually equal to gradient.from_color | #0f4c81 | | bgSize | Size of background; for better effect must be greater than 100% at the first value | 215% 100% | | bgPositionIn | Background position for init animation | right bottom | | bgPositionOut | Background position for end animation | left bottom | | trans.init | Enabled initial transition when page is loaded (DOMContentLoaded event) | true | | trans.in | A transition speed in seconds for DOMContentLoaded event | 0.5 | | trans.out | A transition speed in seconds for mouseup event | 0.5 | | gradient.deg | Angle or position of the gradient line's starting point | 135deg | | gradient.from_color | From (start) color | #0f4c81 50% | | gradient.to_color | To (stop, end) color | #fa7268 50% | | question | Message during holding mouse/key button on element | 🤔 Are you sure? | | success.message | Message after callback function | 👍 Success! | | success.color | Color of success message | #00b16a | | timeout | Time for setTimeout() function in miliseconds; this option also define a transition speed | 3000 |

Use SweetConfirm.js with custom options

// Define options
var options = {
  bg: "#0f4c81",
  bgSize: "215% 100%",
  bgPositionIn: "right bottom",
  bgPositionOut: "left bottom",
  trans: {
    init: true,
    in: 0.5,
    out: 0.5
  },
  gradient: {
    deg: "135deg",
    from_color: "#0f4c81 50%",
    to_color: "#fa7268 50%"
  },
  question: "🤔 Are you sure?",
  success: {
    message: "👍 Success!",
    color: "#00b16a"
  },
  timeout: 3000
};

// Init SweetConfirm.js with options
new SweetConfirm(element, () => {}, options);

Demo on localhost

You may serve downloaded repository by simple Python 3 CLI snippet (for macOS/Linux/Windows WSL).

First, clone repository:

git clone https://github.com/koddr/sweetconfirm.js.git
cd sweetconfirm.js

Let's serve it (with Python 3, for example):

python3 -m http.server 8080 --bind 127.0.0.1

And now, go to browser to see SweetConfirm.js Example page:

http://127.0.0.1:8080/examples

Size-limit report

npm run size

  Time limit:   70 ms
  Size:         434 B with all dependencies, minified and gzipped
  Loading time: 10 ms on slow 3G
  Running time: 51 ms on Snapdragon 410
  Total time:   61 ms

Thanks to Andrey Sitnik @ai/size-limit.

Developers

Idea and active development by Vic Shóstak (aka Koddr).

Project assistance

If you want to say «thank you» or/and support active development SweetConfirm.js:

Add a GitHub Star to project.
Twit about project on your Twitter.
Donate some money to project author via PayPal: @paypal.me/koddr.
Join DigitalOcean at our referral link (your profit is $100 and we get $25).

Thanks for your support! 😘 Together, we make this project better every day.

License

MIT