compose-form-up - npm Package Compare versions

Comparing version 1.9.0 to 1.9.1

lib/diff.js

@@ -18,5 +18,7 @@ var toolbox = require( 'compose-toolbox' ),
   toolbox.each( form.querySelectorAll( '.changed-value' ), function( el ) {
+    var diff = diffInput( el )
 
-    diffs.push( diffInput( el ) )
-
+    // Only show one input diff per label
+    // If diffs already contains this label, do not add it.
+    if ( !diffs.find( d => d.label == diff.label ) ) diffs.push( diff )
   })
@@ -94,4 +96,8 @@
   var label = toolbox.getClosest( input, 'label' )
+  var form = toolbox.getClosest( input, 'form' )
 
   if ( label ) {
+    // Get text label from the first input in a label
+    diff.label = getLabel.text( label.querySelector( Selector ) )
+
     // When there are multiple inputs under a single label
@@ -109,3 +115,3 @@ // Group those input values in the form diff and treat
 
-  diff.label = getLabel.text( input ) || input.getAttribute( 'name' )
+  diff.label = diff.label || getLabel.text( input ) || input.getAttribute( 'name' )
 
@@ -130,2 +136,17 @@ toolbox.each( inputs, input => {
 
+    // Get radio label names (rather than values) if present
+    } else if ( input.type == 'radio' ) {
+
+      diff.label = getLabel.legend( input ) || diff.label
+
+      var radioInputs = form.querySelectorAll( `input[name="${input.name}"]` )
+      var radioInitial, radioValue
+
+      radioInputs.forEach( radio => {
+        if ( radio.dataset.initialValue == 'true' ) radioInitial = getLabel.text( radio )
+        if ( radio.checked ) diff.value.push( getLabel.text( radio ) )
+      })
+
+      diff.initial.push( radioInitial || 'no selection' )
+
     // Track checked state for checkboxes (rather than value)
@@ -132,0 +153,0 @@ } else if ( input.type == 'checkbox' ) {

lib/get-label.js

 var toolbox = require( 'compose-toolbox' )
+var Selector = require( './selector' )
 
@@ -40,17 +41,34 @@ function getInput ( input ) {
 
-
   return label
 }
 
+// Are inputs in a fieldset with a legend?
+// Use that as the label text
+function getLegendText ( input ) {
+  input = getInput( input ); if (!input) return
+  var legendText
 
-getLabel.text = function ( input ) {
+  var fieldset = toolbox.getClosest( input, 'fieldset' )
+
+  if ( fieldset ) {
+    var legend = fieldset.querySelector( 'legend' )
+    if ( legend ) legendText = legend.textContent.trim()
+  }
+
+  return legendText
+}
+
+
+function getLabelText ( input ) {
   input = getInput( input ); if (!input) return
-  var label = getLabel( input ),
-      labelText
 
-  // Grab text from input data-label, or label.textContent, or input placeholder=""
-  labelText = getAriaLabel( input )
+  var label = getLabel( input )
 
+  // Grab text from input aria-label, aria-labelledby
+  var labelText = getAriaLabel( input )
+
+  // Use or label.textContent, or input placeholder=""
   if ( !labelText ) {
     if (label) labelText = label.textContent
+
     else labelText = input.getAttribute( 'placeholder' )
@@ -62,2 +80,5 @@ }
 
+getLabel.text = getLabelText
+getLabel.legend = getLegendText
+
 module.exports = getLabel

lib/reset.js

 var Event = require( 'compose-event' ),
     toolbox = require( 'compose-toolbox' )
 
+function resetValue( event ) {
+  event.preventDefault()
+
+  var inputs = document.querySelectorAll( event.currentTarget.dataset.resetInput )
+
+  toolbox.each( inputs, i => {
+    setValue( i, i.dataset.initialValue )
+  })
+}
+
 function setValue(input, value) {
-
   // Trigger event watchers that the input was changed.
@@ -17,2 +26,4 @@ if ( input.value != value ) {
 function restoreDefault( event ) {
+  event.preventDefault()
+
   var targets = document.querySelectorAll( event.currentTarget.dataset.restoreDefault )
@@ -43,10 +54,2 @@
 
-function resetValue( event ) {
-  var inputs = document.querySelectorAll( event.currentTarget.dataset.resetInput )
-
-  toolbox.each( inputs, i => {
-    setValue( i, i.dataset.initialValue )
-  })
-}
-
 function resetForm(event) {
@@ -62,3 +65,3 @@ var form = toolbox.getClosest( event.target, 'form' )
 Event.on( document, 'click', '[data-reset-input]', resetValue )
+Event.on( document, 'click', '[data-restore-default]', restoreDefault )
 Event.on( document, 'click', '[type=reset]', resetForm )
-Event.on( document, 'click', '[data-restore-default]', restoreDefault )

package.json

 {
   "name": "compose-form-up",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "A lightweight HTML5 form utility including validation, progressive forms, and other handy tools.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -211,3 +211,3 @@ # FormUp
 
-Add a `data-diff-target='#selector'` to your `<form>` element to have formUp automatically generate a form diff whenever input values
+First, to enable form-diff run `formUp.diff.watch()` to watch for changes to forms. Then add a `data-diff-target='#selector'` to your `<form>` element to have formUp automatically generate a form diff whenever input values
 are changed in your form. Here's some example html.
@@ -223,4 +223,5 @@
 
-|-------------|---------------|----|---------------|-----|
-| input label | initial value | -> | current value | (x) |
+| input label | initial value | | current value | reset |
+|:------------|:--------------|:--:|:--------------|:---:|
+| Name | Bob | -> | Robert | (x) |
 
@@ -274,2 +275,7 @@ Users can click the `(x)` button to reset the input to its initial value.
 
+```html
+<!-- Input label will be "street_address" -->
+<input name="street_address" …>
+```
+
 ### Diff note
@@ -280,3 +286,3 @@
 ```html
-<input name='address' diff-note='( affects shipping estimate )'…>
+<input name='zipcode' diff-note='( affects shipping estimate )'…>
 ```
@@ -286,4 +292,5 @@
 
-|-------------|---------------|----|---------------|-----|
-| address ( affects shipping estimate ) | initial value | -> | current value | (x) |
+| input label | initial value | | current value | reset |
+|:------------|:--------------|:--:|:--------------|:---:|
+| zipcode ( affects shipping estimate ) | 31249 | -> | 31281 | (x) |
 
@@ -375,3 +382,2 @@ This will create a `<span class='diff-note'>` element inside the label.
 
-
 If you wan to get a text label to describe an input, use `getLabel.text( input )`
@@ -385,6 +391,8 @@
 
-- label's text (found by `getLabel`)
-- Value from the `aria-label` property
-- Combines text from elements matched by the `aria-labelledby` selector
-- or uses the input `name` property if it cannot find a label
+- The value of an input's `aria-label` property
+- The combined `textContent` of any elements referenced by the input's `aria-labelledby` property.
+- `textContent` from a `<label>` element which wraps the input.
+- A `<label>` element which points to the input's id using its `for` attribute.
+- The value of an input's `placeholder` attribute.
 
+For radio buttons grouped underneath a `<fieldset>`, you can get the text for the legend using `getLabel.legend( #some-radio-input )`.

test/diff.test.js

@@ -55,2 +55,4 @@ var u = require('./_utils.js')
   it( 'shows multiple values under a single label', async () => {
+    await u.click( '#reset' )
+    await u.wait(110)
 
@@ -63,2 +65,4 @@ // Change values
 
+    expect( await page.evaluate( "document.querySelectorAll( '#form-diff tr' ).length" )).toBe( 1 )
+
     // Check to be sure the diff has the correct text in it
@@ -127,2 +131,26 @@ await u.matchText( '[data-diff-name*=multi-input-1] .input-diff-label', 'Select Size' )
   })
+
+  it( 'ignores text around the labelledby label', async() => {
+    await expect( page ).toSelect( '#select-units', 'GB' )
+    await u.wait(110)
+
+    await u.matchText( '[data-diff-name*=effective_cache_size] .input-diff-label', 'effective_cache_size' )
+  })
+
+  it( 'shows only one diff for a radio group change', async() => {
+    await u.click( '#reset' )
+    await u.wait(110)
+
+    await u.findElement( '#form-diff.form-diff-empty' )
+
+    await u.click( "#radio-2" )
+    await u.wait(130)
+
+    await u.matchText( '[data-diff-name*=radio-input] .input-diff-label', 'Select a choice' )
+    await u.matchText( '[data-diff-name*=radio-input] .input-diff-initial', 'Choice 1' )
+    await u.matchText( '[data-diff-name*=radio-input] .input-diff-value', 'Choice 2' )
+
+    expect( await page.evaluate( "document.querySelectorAll( '#form-diff tr' ).length" )).toBe( 1 )
+
+  })
 })

test/get-label.test.js

 var u = require('./_utils.js')
 
+const log = function(a){
+  if ( typeof a == 'object' ) { a = JSON.stringify( a ) }
+  console.log(a)
+}
+
 describe('Progressive form', () => {
   beforeAll(async () => {
     await page.goto("http://localhost:8081/labels.html")
+
+    await page.exposeFunction( 'log', text =>
+      log(text)
+    )
   })
@@ -31,2 +40,10 @@
   })
+
+  it('gets text from a fieldset legend', async () => {
+    expect( await page.evaluate( 'FormUp.getLabel.legend( "#radio-1" )' )).toBe( 'Select a choice' )
+  })
+
+  it('gets text from a radio input', async () => {
+    expect( await page.evaluate( 'FormUp.getLabel.text( "#radio-1" )' )).toBe( 'Choice 1' )
+  })
 })

No alert changes

Improved metrics

Total package byte prevSize

218959

increased by2.44%

Lines of code

1296

increased by5.28%

Number of lines in readme file

392

increased by2.08%

No dependency changes