Skip to content

francoischalifour/magic-rows

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

magic-rows

npm js-standard-style

Adds rows to your forms automagically ✨

magic-rows demo

Install

$ npm install --save magic-rows

Or download the minified version.

No dependencies.

Features

  • Row appending automationadds a row only when the two previous are filled
  • Maximum rows restrictionenables only a certain number of rows
  • 🎩 Pattern detectionlearns from your patterns to follow your style
  • 📖 Pattern declarationunderstands your rules to match better

Usage

Insert the script at the end of the body:

<script src="node_modules/magic-rows/dist/magic-rows.min.js"></script>

Add data-action="magic-rows" to your form:

<form data-action="magic-rows">
  <input type="text" id="player-1" placeholder="Player 1">

  <button>Play</button>
</form>

That's it!

Options

You can change all the settings by adding the following data attributes to your form.

Attributes Type Default Example Description
data-max-rows integer 6 3 Maximum number of rows
data-format-id string "" player-$ Pattern to be applied to ids
data-format-name string "" player_$$ Pattern to be applied to names
data-format-placeholder string "" Player @ Pattern to be applied to placeholders

Values declaration

  • $ will be interpreted as a number
  • $$ will be interpreted as a 2-digit number (01)
  • $$$ will be interpreted as a 3-digit number (001)
  • ...
  • @ will be interpreted as a letter

Examples

Pattern detection

<form data-action="magic-rows" data-max-rows="3">
  <input type="text" id="player-3" placeholder="Player 03">

  <button>Play</button>
</form>

Will generate:

<input type="text" id="player-3" placeholder="Player 03">
<input type="text" id="player-4" placeholder="Player 04">
<input type="text" id="player-5" placeholder="Player 05">

Pattern declaration

<form
  data-action="magic-rows"
  data-max-rows="4"
  data-format-id="email-$"
  data-format-name="email-@"
  data-format-placeholder="Friend's #$ email"
>
  <input type="email" id="email-1" name="email-A" placeholder="Enter your friends' email">

  <button>Send</button>
</form>

Will generate:

<input type="email" id="email-1" name="email-A" placeholder="Enter your friends' email">
<input type="email" id="email-2" name="email-B" placeholder="Friend's #2 email">
<input type="email" id="email-3" name="email-C" placeholder="Friend's #3 email">
<input type="email" id="email-4" name="email-D" placeholder="Friend's #4 email">

Demo

See the demo folder.

License

MIT © François Chalifour