New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

sweetconfirm.js

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

sweetconfirm.js

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.

0.4.1
latest
Source
npm

Version published: 4 years ago

Weekly downloads: 2; decreased by-71.43%

Maintainers: 1

Weekly downloads

Created: 5 years ago

Source

sweetconfirm.js logo github

Throw out pop-ups confirming the submission of form!

sweetconfirm.js demo gif

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.

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

Keywords

FAQs

What is sweetconfirm.js?

Is sweetconfirm.js popular?

Is sweetconfirm.js well maintained?

Package last updated on 05 Aug 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install