npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@sourceteam/swangular

v1.0.0

Published

An AngularJS wrapper for Sweet Alert 2

Downloads

5

Readme

github tag Latest Stable Version Latest Stable Version Build Status

swangular

An AngularJS wrapper for SweetAlert2 with some added functionality like binding to scope/controller, using html templates...

Getting Started

The easiest way to install is via bower:

bower install swangular

or via npm:

npm install swangular

Then you just need to include swangular.js and add the dependency in your module

var app = angular.module('yourAwesomeApp', ['swangular']);

app.controller('MainCtrl', function ($scope, swangular) {
    $scope.clickToOpen = function () {
        swangular.swal('Swangular Demo', 'Great demo, right?', 'question')
    };
});

API

The swangular service exposes a number of methods for you to use. Below you can find a list of all the exposed methods:

.swal(options)

This method maps directly to SweetAlert2, and thus has all the same options. Nothing new here.

swangular.swal({   
  title: 'Are you sure you want to pet this capybara?',
  text: "It looks kinda shady",
  type: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Hell, yeah!' });

.success(message, [customOptions])

Will create a success message with a default title 'Success', and default type 'success'. You can overwrite/add to these options with the optional customOptions parameter.

swangular.success("Great job!");

.confirm(message, [customOptions])

Will create a confirm message with a default title 'Alert', default type 'warning' and a cancel button. You can overwrite/add to these options with the optional customOptions parameter.

swangular.confirm("Are you sure you want to take the red pill?");

.alert(message, [customOptions])

Will create an alert message with a default title 'Alert', and default type 'warning'. You can overwrite/add to these options with the optional customOptions parameter.

swangular.alert("Look out, I'm about to close!", {timer: 2000});

.info(message, [customOptions])

Will create an info message with a default title 'Info', and default type 'info'. You can overwrite/add to these options with the optional customOptions parameter.

swangular.info("My info message", {title: "My custom information title!"});

.open(options)

Will open a SweetAlert2 alert with some Angular sugar on top. You can still use all SweetAlert2 options, but there are a number of Angular specific options added. This allows for binding to scope/controller, using html-templates and more.

swangular.open({
        title: "New user",
        htmlTemplate: "/components/new-user/new_user.html",
        showCancelButton: true,
        preConfirm: "submit",
        showLoaderOnConfirm: true,
        controller: 'NewUserCtrl',
        controllerAs: 'vm',
        resolve: {
            injectedValue: function() {
                return "What a time to be alive!";
            }
        }
});
    
app.controller('NewUserCtrl', function (injectedValue) {
        console.log(injectedValue) // What a time to be alive!
});

Options:

All the options below are unique to Swangular or have added functionality compared to SweetAlert2. Besides these options, you can still use all standard SweetAlert2 options.

| Argument | Type | Description | ---------------- | ------- | ------------- | html | string| This can be use in the same way as SweetAlert2 html. Additionally, if a scope or controller options are passed, this html will be compiled and the markup will be bound to that particular scope/controller. | htmlTemplate | string| Has the same function as html, but here you can pass a path to an external template. | scope | Object| Any passed html will be compiled and bound to this scope. If both scope and controller are passed, this scope will be used as the parent scope for the controller. | controller | string| Any passed html will be compiled and bound to this controller. | controllerAs | string| If you use controllerAs syntax in your markup, you can pass the correct string here. | preConfirm | string or function()| When a function, it will behave just like in SweetAlert2. When a string is passed, it will use this string to look for a function on the passed controller. You have to make sure there is a function with the specified name on that controller. Should return a promise. | resolve | Object.<String, Function>| Dependencies to be injected into the controller. If one or more of the depencies are promises, swangular will wait untill these are resolved/rejected before instantiating the controller.

Methods

The following methods are also accessible:

  • swangular.close()
  • swangular.closeModal()
  • swangular.enableButtons()
  • swangular.disableButtons()
  • swangular.enableConfirmButton()
  • swangular.disableConfirmButton()
  • swangular.showLoading()
  • swangular.enableLoading()
  • swangular.hideLoading()
  • swangular.disableLoading()
  • swangular.clickConfirm()
  • swangular.clickCancel()

Provider

During config phase you can inject the swangularProvider to set default configuration options.

app.config(function (swangularProvider) {
    swangularProvider.setDefaults({
        animation: false,
        reverseButtons: true
    });
});