Sweetconfirm.js NPM

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

confirm success button confirm event submit button button gradient button effect

@infinitebrahmanuniverse/nolb-swe @everything-registry/sub-chunk-2862

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago