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

ampersand-checkbox-view

v6.1.0

Published

A view module for intelligently rendering and validating checkbox input. Works well with ampersand-form-view.

Downloads

381

Readme

ampersand-checkbox-view

Lead Maintainer: Michael Garvin

overview

A view module for intelligently rendering and validating checkbox input. Works well with ampersand-form-view.

ampersand-checkbox-view extends ampersand-view, so you may further .extend({...}) it to your desire.

It does the following:

  • Automatically shows/hides error message based on if the field is required.
  • Will only show error message checkbox is required and:
    • trying to submit form and it's not checked.
    • it has ever been checked and now isn't.

Part of the Ampersand.js toolkit for building clientside applications.

install

npm install ampersand-checkbox-view

example

var CheckboxView = require('ampersand-checkbox-view');

var field = new CheckboxView({
    // form input `name`
    name: 'client_name',
    // You can replace the built-in template with your own.
    // just give it an html string. Make sure it has a single "root" element that contains:
    //  - an `<input>` element
    //  - an element with a `data-hook="label"` attribute
    //  - an element with a `data-hook="message-container"` attribute (this we'll show/hide)
    //  - an elememt with a `data-hook="message-text"` attribute (where message text goes for error)
    template: // some HTML string
    // Label name
    label: 'App Name',
    // optinal intial value if it has one
    value: true, // or false
    // optional, this is the element that will be
    // replaced by this view. If you don't
    // give it one, it will create one.
    el: document.getElementByID('field'),
    // whether or not this field is required
    required: true, // false by default
    // whether or not to disable this field
    disabled: false, //false by default
    // class to set on input when input is valid
    validClass: 'input-valid', // <- that's the default
    // class to set on input when input is valid
    invalidClass: 'input-invalid', // <- that's the default
    // Message to use if error is that it's required
    // but no value was set.
    requiredMessage: 'This box must be checked.',
    // optional, you can pass in the parent view explicitly
    parent:  someViewInstance,
    // optional, called before form's submitCallback function called
    beforeSubmit: function() { console.log('ampersand-checkbox-view rocks!'); }
});

// append it somewhere or use it in side an ampersand-form-view
document.querySelector('form').appendChild(field.el);

api

properties

Commonly accessed properties listed below. See the initialize() function for additional properties available.

  • valid (boolean)
  • value (boolean)
  • startingValue (boolean) - this is coerced from any initail value provided during construction

functions

  • new CheckboxView() - constructor
    • see the example for constructor options
  • clear()
    • sugar for view.setValue(false);
  • reset()
    • sugar for view.setValue(this.startingValue);
  • setValue([boolean])
    • sets the value of the view. the view will always maintain a value of type boolean.

changelog

  • 5.0.0
    • Upgrade to &-view 9.x
  • 4.1.0
    • Remove domify and using ampersand-view renderWithTemplate
  • 4.0.0
    • Bump to ampersand-view 8.x
  • 3.0.0
    • Extend ampersand-view. Add support autoRender, clear, reset

credits

Created by @HenrikJoreteg.

license

MIT