ampersand-checkbox-view - npm Package Compare versions

Comparing version 2.0.2 to 3.0.0

ampersand-checkbox-view.js

 /*$AMPERSAND_VERSION*/
+var View = require('ampersand-view');
 var domify = require('domify');
@@ -17,110 +18,103 @@ var dom = require('ampersand-dom');
 
+module.exports = View.extend({
+    initialize: function(opts) {
+        if (!opts || !opts.name) throw new Error('must pass in a name');
 
-function CheckboxView(opts) {
-    if (!opts || !opts.name) throw new Error('must pass in a name');
+        // settings
+        this.el = opts.el;
+        this.name = opts.name;
+        this.startingValue = !!opts.value;
+        this.value = this.startingValue;
+        this.label = opts.label || opts.name;
+        this.required = (typeof opts.required === 'boolean') ? opts.required : false;
+        this.validClass = opts.validClass || 'input-valid';
+        this.invalidClass = opts.invalidClass || 'input-invalid';
+        this.requiredMessage = opts.requiredMessage || 'This box must be checked.';
+        this.parent = opts.parent || this.parent;
+        this.autoRender = opts.autoRender;
+        this.template = opts.template || template;
+        this.beforeSubmit = opts.beforeSubmit || this.beforeSubmit;
 
-    // settings
-    this.name = opts.name;
-    this.value = (opts.value === true) || false;
-    this.el = opts.el;
-    this.template = opts.template || template;
-    this.label = opts.label || opts.name;
-    this.required = (typeof opts.required === 'boolean') ? opts.required : false;
-    this.validClass = opts.validClass || 'input-valid';
-    this.invalidClass = opts.invalidClass || 'input-invalid';
-    this.requiredMessage = opts.requiredMessage || 'This box must be checked.';
-    this.parent = opts.parent;
+        this.setValue(this.value);
+    },
+    clear: function () {
+        return this.setValue(false);
+    },
+    reset: function () {
+        return this.setValue(this.startingValue);
+    },
+    remove: function () {
+        if (this.input) this.input.removeEventListener('change', this.handleInputEvent, false);
+        View.prototype.remove.call(this);
+    },
+    render: function () {
+        // only allow this to be called once
+        if (this.rendered) return;
+        var newDom = domify(this.template);
+        var parent = this.el && this.el.parentNode;
+        if (parent) parent.replaceChild(newDom, this.el);
+        this.el = newDom;
+        this.input = this.el.querySelector('input');
+        this.labelEl = this.el.querySelector('[data-hook~=label]');
+        this.messageContainer = this.el.querySelector('[data-hook~=message-container]');
+        this.messageEl = this.el.querySelector('[data-hook~=message-text]');
 
-    // render right away
-    this.render();
+        // bind event handlers
+        this.handleInputEvent = this.handleInputEvent.bind(this);
 
-    // bind event handlers
-    this.handleInputEvent = this.handleInputEvent.bind(this);
+        // add our event handlers
+        this.input.addEventListener('change', this.handleInputEvent, false);
 
-    // add our event handlers
-    this.input.addEventListener('change', this.handleInputEvent, false);
-
-    if (opts.value) this.setValue(true);
-
-    this.test();
-}
-
-// remove and destroy element
-CheckboxView.prototype.remove = function () {
-    this.input.removeEventListener('change', this.handleInputEvent, false);
-    var parent = this.el.parentNode;
-    if (parent) parent.removeChild(this.el);
-};
-
-// very `manual` render to avoid dependencies
-CheckboxView.prototype.render = function () {
-    // only allow this to be called once
-    if (this.rendered) return;
-    var newDom = domify(this.template);
-    var parent = this.el && this.el.parentNode;
-    if (parent) parent.replaceChild(newDom, this.el);
-    this.el = newDom;
-    this.input = this.el.querySelector('input');
-    this.labelEl = this.el.querySelector('[data-hook~=label]');
-    this.messageContainer = this.el.querySelector('[data-hook~=message-container]');
-    this.messageEl = this.el.querySelector('[data-hook~=message-text]');
-    this.setMessage(this.message);
-    this.input.checked = !!this.value;
-    this.input.name = this.name;
-    this.labelEl.textContent = this.label;
-    this.rendered = true;
-};
-
-// handle input events and show appropriate errors
-CheckboxView.prototype.handleInputEvent = function () {
-    // track whether user has edited directly
-    if (document.activeElement === this.input) this.directlyEdited = true;
-    this.value = this.input.checked;
-    this.test();
-    if (this.parent) this.parent.update(this);
-};
-
-// set the error message if exists
-// hides the message container entirely otherwise
-CheckboxView.prototype.setMessage = function (message) {
-    var input = this.input;
-    this.message = message;
-    // there is an error
-    if (message && this.shouldValidate) {
-        this.messageContainer.style.display = 'block';
-        this.messageEl.textContent = message;
-        dom.addClass(input, this.invalidClass);
-        dom.removeClass(input, this.validClass);
-    } else {
-        this.messageContainer.style.display = 'none';
-        if (this.shouldValidate && this.editedDirectly) {
-            dom.addClass(input, this.validClass);
-            dom.removeClass(input, this.invalidClass);
+        this.setMessage(this.message);
+        this.input.checked = !!this.value;
+        this.input.name = this.name;
+        this.labelEl.textContent = this.label;
+    },
+    // handle input events and show appropriate errors
+    handleInputEvent: function () {
+        // track whether user has edited directly
+        if (document.activeElement === this.input) this.directlyEdited = true;
+        this.value = this.input ? this.input.checked : this.value;
+        this.test();
+        if (this.parent) this.parent.update(this);
+    },
+    // set the error message if exists
+    // hides the message container entirely otherwise
+    setMessage: function (message) {
+        var input = this.input;
+        if (!input) return;
+        this.message = message;
+        // there is an error
+        if (message && this.shouldValidate) {
+            this.messageContainer.style.display = 'block';
+            this.messageEl.textContent = message;
+            dom.addClass(input, this.invalidClass);
+            dom.removeClass(input, this.validClass);
+        } else {
+            this.messageContainer.style.display = 'none';
+            if (this.shouldValidate && this.editedDirectly) {
+                dom.addClass(input, this.validClass);
+                dom.removeClass(input, this.invalidClass);
+            }
         }
+    },
+    setValue: function (value) {
+        if (this.input) this.input.checked = !!value;
+        return this.handleInputEvent();
+    },
+    beforeSubmit: function () {
+        this.shouldValidate = true;
+        return this.handleInputEvent();
+    },
+    test: function () {
+        var valid = !this.required || !!this.value;
+        if (valid) this.shouldValidate = true;
+        this.valid = valid;
+        if (this.shouldValidate && !valid) {
+            this.setMessage(this.requiredMessage);
+        } else {
+            this.setMessage('');
+        }
+        return valid;
     }
-};
-
-CheckboxView.prototype.setValue = function (value) {
-    this.input.checked = !!value;
-    this.handleInputEvent();
-};
-
-CheckboxView.prototype.beforeSubmit = function () {
-    this.shouldValidate = true;
-    this.handleInputEvent();
-};
-
-CheckboxView.prototype.test = function () {
-    var valid = !this.required || this.value;
-    if (valid) this.shouldValidate = true;
-    this.valid = valid;
-    if (this.shouldValidate && !valid) {
-        this.setMessage(this.requiredMessage);
-    } else {
-        this.setMessage('');
-    }
-    return valid;
-};
-
-
-module.exports = CheckboxView;
+});

package.json

 {
   "name": "ampersand-checkbox-view",
   "description": "A view module for intelligently rendering and validating checkbox input. Works well with ampersand-form-view.",
-  "version": "2.0.2",
+  "version": "3.0.0",
   "author": "Henrik Joreteg <[e-mail]>",
@@ -15,9 +15,10 @@ "browserify": {
   "dependencies": {
-    "ampersand-dom": "^1.2.1",
-    "ampersand-version": "^1.0.0",
-    "domify": "~1.2.2"
+    "ampersand-dom": "^1.4.0",
+    "ampersand-version": "^1.0.2",
+    "ampersand-view": "^7.3.0",
+    "domify": "~1.3.3"
   },
   "devDependencies": {
-    "ampersand-view-conventions": "^1.1.1",
-    "browserify": "~4.1.10",
+    "ampersand-view-conventions": ">=1.1.6",
+    "browserify": "~9.0.8",
     "function-bind": "~0.1.0",
@@ -46,3 +47,7 @@ "jshint": "~2.5.1",
     "test": "browserify test/* | tape-run | tap-spec",
-    "start": "run-browser test/*"
+    "start": "run-browser test/*",
+    "preversion": "git checkout master && git pull && npm ls",
+    "publish-patch": "npm run preversion && npm version patch && git push origin master --tags && npm publish",
+    "publish-minor": "npm run preversion && npm version minor && git push origin master --tags && npm publish",
+    "publish-major": "npm run preversion && npm version major && git push origin master --tags && npm publish"
   },
@@ -49,0 +54,0 @@ "testling": {

README.md

 # ampersand-checkbox-view
 
+Lead Maintainer: [Michael Garvin](https://github.com/wraithgar)
+
+# overview
+
 A view module for intelligently rendering and validating checkbox input. Works well with [ampersand-form-view](ampersandjs/ampersand-form-view).
 
+[ampersand-checkbox-view](#ampersand-checkbox-view) extends [ampersand-view](ampersandjs/ampersand-view), so you may further `.extend({...})` it to your desire.
+
 It does the following:
 
-- Automatically shows/hides error message based required.
+- Automatically shows/hides error message based on if the field is [`required`](#example).
 - Will only show error message checkbox is required and:
@@ -12,4 +18,2 @@ - trying to submit form and it's not checked.
 
-Depdent on two micro-libs, so works well with ampersand apps, backbone apps or anything else, really.
-
 <!-- starthide -->
@@ -44,3 +48,3 @@ Part of the [Ampersand.js toolkit](http://ampersandjs.com) for building clientside applications.
     value: true, // or false
-    // optional, this is the element that will be 
+    // optional, this is the element that will be
     // replaced by this view. If you don't
@@ -53,4 +57,2 @@ // give it one, it will create one.
     validClass: 'input-valid', // <- that's the default
-    // type value to use for the input tag's type value
-    type: 'text',
     // class to set on input when input is valid
@@ -62,3 +64,5 @@ invalidClass: 'input-invalid', // <- that's the default
     // optional, you can pass in the parent view explicitly
-    parent:  someViewInstance 
+    parent:  someViewInstance,
+    // optional, called before form's submitCallback function called
+    beforeSubmit: function() { console.log('ampersand-checkbox-view rocks!'); }
 });
@@ -71,6 +75,29 @@
 
-## browser support 
+## 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](#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`.
+
+## browser support
+
 [![testling badge](https://ci.testling.com/AmpersandJS/ampersand-checkbox-view.png)](https://ci.testling.com/AmpersandJS/ampersand-checkbox-view)
 
+## changelog
+
+- 3.0.0
+    - Extend ampersand-view.  Add support `autoRender`, `clear`, `reset`
+
 ## credits
@@ -77,0 +104,0 @@

test/index.js

@@ -24,7 +24,7 @@ var test = require('tape');
 
-    var view = new CheckboxView({name: 'checker'});
+    var view = new CheckboxView({name: 'checker', autoRender: true});
     t.strictEqual(view.value, false ,'should start out as false');
     t.equal(view.value, view.input.checked, 'value should be same as input value');
 
-    view = new CheckboxView({name: 'checker', label: 'checker', parent: getParent()});
+    view = new CheckboxView({name: 'checker', label: 'checker', parent: getParent(), autoRender: true});
     t.equal(view.labelEl.textContent, 'checker', 'should set label text');
@@ -35,6 +35,7 @@
     t.strictEqual(view.value, view.input.checked, 'should be checked now');
-    t.equal(counter, 1, 'parent update should have been called once');
+    t.equal(counter, 2, 'parent update should have been called twice');
 
-    view = new CheckboxView({name: 'checked', required: true, parent: getParent()});
+    view = new CheckboxView({name: 'checked', required: true, parent: getParent(), autoRender: true});
     t.strictEqual(view.el.children[2].style.display, 'none', 'should not show error right away');
+    t.equal(counter, 1, 'parent update should have been called once (setValue called on init)');
 
@@ -44,3 +45,3 @@ // check it directly
 
-    t.equal(counter, 1, 'parent update should have been called once');
+    t.equal(counter, 2, 'parent update should have been called twice');
     t.strictEqual(view.value, true, 'should be checked now');
@@ -51,3 +52,3 @@ t.strictEqual(view.valid, true, 'should be valid now');
 
-    t.equal(counter, 2, 'parent update should have been called twice');
+    t.equal(counter, 3, 'parent update should have been called thrice');
     t.strictEqual(view.value, false, 'should not be checked now');
@@ -57,3 +58,10 @@ t.strictEqual(view.valid, false, 'should not be valid now');
 
+    view = new CheckboxView({name: 'checked', required: true, parent: getParent(), value: true, autoRender: true});
+    view.setValue(false);
+    view.reset();
+    t.equal(view.value, true, 'resets to original value');
+
+    view.clear();
+    t.equal(view.value, false, 'clears to false/unchecked');
     t.end();
 });

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14128

increased by22.64%

Number of package files

10

increased by25%

Lines of code

170

increased by16.44%

Number of lines in readme file

106

increased by34.18%

Worsened metrics

Dependency count

4

increased by33.33%

Number of downloads

81

decreased by-11.96%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedampersand-view@^7.3.0

• + Addedampersand-class-extend@1.0.2(transitive)

• + Addedampersand-collection-view@1.4.0(transitive)

• + Addedampersand-dom-bindings@3.9.2(transitive)

• + Addedampersand-events@1.1.1(transitive)

• + Addedampersand-state@4.9.1(transitive)

• + Addedampersand-view@7.4.2(transitive)

• + Addedarray-next@0.0.1(transitive)

• + Addedclosest@0.0.1(transitive)

• + Addedcomponent-classes@1.2.6(transitive)

• + Addedcomponent-event@0.1.4(transitive)

• + Addedcomponent-indexof@0.0.3(transitive)

• + Addeddelegate-events@1.1.1(transitive)

• + Addeddomify@1.3.3(transitive)

• + Addedevents-mixin@1.3.0(transitive)

• + Addedget-object-path@0.0.2(transitive)

• + Addedkey-tree-store@1.3.0(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedlodash._arrayeach@3.0.0(transitive)

• + Addedlodash._arraymap@3.0.0(transitive)

• + Addedlodash._baseassign@3.2.0(transitive)

• + Addedlodash._basecallback@3.3.1(transitive)

• + Addedlodash._basecopy@3.0.1(transitive)

• + Addedlodash._basedifference@3.0.3(transitive)

• + Addedlodash._baseeach@3.0.4(transitive)

• + Addedlodash._basefind@3.0.0(transitive)

• + Addedlodash._basefindindex@3.6.0(transitive)

• + Addedlodash._baseflatten@3.1.4(transitive)

• + Addedlodash._basefor@3.0.3(transitive)

• + Addedlodash._baseget@3.7.2(transitive)

• + Addedlodash._baseindexof@3.1.0(transitive)

• + Addedlodash._baseisequal@3.0.7(transitive)

• + Addedlodash._baseslice@3.0.3(transitive)

• + Addedlodash._baseuniq@3.0.3(transitive)

• + Addedlodash._basevalues@3.0.0(transitive)

• + Addedlodash._bindcallback@3.0.1(transitive)

• + Addedlodash._cacheindexof@3.0.2(transitive)

• + Addedlodash._createassigner@3.1.1(transitive)

• + Addedlodash._createcache@3.1.2(transitive)

• + Addedlodash._createwrapper@3.2.0(transitive)

• + Addedlodash._getnative@3.9.1(transitive)

• + Addedlodash._invokepath@3.7.2(transitive)

• + Addedlodash._isiterateecall@3.0.9(transitive)

• + Addedlodash._pickbyarray@3.0.2(transitive)

• + Addedlodash._pickbycallback@3.0.0(transitive)

• + Addedlodash._replaceholders@3.0.0(transitive)

• + Addedlodash._root@3.0.1(transitive)

• + Addedlodash._topath@3.8.1(transitive)

• + Addedlodash.assign@3.2.0(transitive)

• + Addedlodash.before@3.0.3(transitive)

• + Addedlodash.bind@3.1.0(transitive)

• + Addedlodash.difference@3.2.2(transitive)

• + Addedlodash.escape@3.2.0(transitive)

• + Addedlodash.find@3.2.1(transitive)

• + Addedlodash.flatten@3.0.2(transitive)

• + Addedlodash.foreach@3.0.3(transitive)

• + Addedlodash.forown@3.0.2(transitive)

• + Addedlodash.has@3.2.1(transitive)

• + Addedlodash.includes@3.1.3(transitive)

• + Addedlodash.invoke@3.2.3(transitive)

• + Addedlodash.isarguments@3.1.0(transitive)

• + Addedlodash.isarray@3.0.4(transitive)

• + Addedlodash.isdate@3.0.3(transitive)

• + Addedlodash.isempty@3.0.4(transitive)

• + Addedlodash.isequal@3.0.4(transitive)

• + Addedlodash.isfunction@3.0.9(transitive)

• + Addedlodash.isobject@3.0.2(transitive)

• + Addedlodash.isstring@3.0.1(transitive)

• + Addedlodash.istypedarray@3.0.6(transitive)

• + Addedlodash.keys@3.1.2(transitive)

• + Addedlodash.keysin@3.0.8(transitive)

• + Addedlodash.last@3.0.0(transitive)

• + Addedlodash.omit@3.1.0(transitive)

• + Addedlodash.once@3.0.1(transitive)

• + Addedlodash.pairs@3.0.1(transitive)

• + Addedlodash.pick@3.1.0(transitive)

• + Addedlodash.restparam@3.6.1(transitive)

• + Addedlodash.result@3.1.2(transitive)

• + Addedlodash.union@3.1.0(transitive)

• + Addedlodash.uniqueid@3.2.0(transitive)

• + Addedmatches-selector@0.0.11.2.0(transitive)

• - Removeddomify@1.2.2(transitive)

• Updatedampersand-dom@^1.4.0

• Updatedampersand-version@^1.0.2

• Updateddomify@~1.3.3