Configure the project to enforce the JSHint rule that prohibits var statements.

See "jshintConfig" in package.json:
https://github.com/dnajs/dna.js/blob/master/package.json#L27

JSHint documentation:
https://jshint.com/docs/options/#varstmt

Hi,
in a select, when I use data-option doesn't work. This is the error:

dna.js:672 Uncaught TypeError: Cannot read property 'option' of undefined
at updateModel (dna.js:672)

If I use data-dnaRules-option works....

Could be a bug here?

...... else if (target.is('input') || target.data().dnaRules.option)

For multiline arrays and objects, the consistency of including a comma for the last item makes the code easier to edit and helps reduce merge diffs.

See:
https://jshint.com/docs/options/#trailingcomma

In the file:
spec/arrays.js

change:

const array = [
   { code: 'a',   word: 'Ant' },
   { code: 'b-z', word: 'Bat' }  //no comma
   ];

to:

const array = [
   { code: 'a',   word: 'Ant' },
   { code: 'b-z', word: 'Bat' },  //with comma
   ];

Enhance:

dna.ui.slideFadeToggle(elem[, callback])

to be:

dna.ui.slideFadeToggle(elem[, boolean][, callback])

See:
http://dnajs.org/docs#ui-slide-fade

Hello,

i just began to "play" with dna.js, and i find it is great
but i think i may have found a bug, or at least something i do not understand.

in the attached example, ( test.txt - to be renamed as test.html )
the second template is rendered AFTER the last HR despite it is positioned before.
and more, if you remove or comment the last HR the template is not rendered at all !

tested on firefox and chromium.
reproduce problem with dna.js 1.3.4 and 1.3.7

test.txt

In Chrome:

<input type=date value=~~pubDate~~>

results in:

The specified value "~~pubDate~~" does not conform to the required format, "yyyy-MM-dd".

First off - I'm really liking this library so far - I find it very easy to grok!

This may be a bit off topic, and I apologise if I missed something in the docs, but how would you conditionally show or hide something based on whether an array was populated or not. I can see this is available at the field level using the data-require attribute, but what if you wanted to show a button to remove all cloned elements, but only if elements had been cloned.

Is there a way with dnajs? I'm used to angular, where this functionality is available using the native ng-show and ng-hide directives.

Cheers, Rob

Add a new function dna.templateExists() to check if a template is present.

Below are the steps to follow to build this feature using Test-Driven Development (TDD).

1. Verify all existing tests pass

$ npm test

2. Create a test case in spec/dom.js for the new feature
Add this code:

describe('Function dna.templateExists()', () => {
   it('identifies if a template is present', () => {
      const actual =   [dna.templateExists('book'), dna.templateExists('bogus')];
      const expected = [true, false];
      assert.deepEqual(actual, expected);
      });
   });

3. Verify the new test case FAILS
The feature is not built yet, but you can still run the test case:

$ npm test

4. Create the new function in dna.js
At line 71, insert:

templateExists: (name) => {
   return !!dna.store.templates[name] || $('.dna-template#' + name).length > 0;
   },

5. Verify the new test case PASSES

$ npm test

Upgrade to modern ES6 function definitions for the top-level functions. The newer notation is more compact and looks better.

There are about 20 functions to update (all in the dna.js file):

• dna.clone()
• dna.cloneSub()
• dna.createTemplate()
• ...
• dna.info()

For example, change:

clone: (name, data, options) => {

to:

clone(name, data, options) {

See line 29:
https://github.com/dnajs/dna.js/blob/master/dna.js#L29

Logo Design Contest

The current project logo for dna.js is pretty uninspiring and is just a placeholder until a real graphic artist creates an inspiring logo.

dnajs-logo.png

Logo Goals:

1. Clean, simple, and modern
2. Scalable so it looks good at different sizes
3. Incorporation of an animal mascot would be cool (but not required)
4. Slots nicely into the dna.js website: dnajs.org

Some words for design inspiration:
Clone, template, DNA, data, easy, clean, fast, JavaScript, HTML, jQuery

The artist who's logo is used for the project will get recognized on the dna.js website with a link to your portfolio (and if you can get to San Francisco, a drink of your choice plus an Apple Store Gift Card for a hundred dollars).

Attach your artwork to this GitHub issue. Also, feel free to post any questions or comments below.

Important Note:
dna.js is an open source project and graphics contributed to the project are licensed under MIT/GPL.

Example:

<textarea>~~plot~~</textarea>
<p>~~plot~~</p>

As the user edits the plot in the <textarea>, the value displayed in the <p> element should be dynamically updated.

Note: This capability already exists for <input> elements. You can test is out by editing one of the fields under "Tags:" in test case 16 at: dnajs.org/spec/visual.html#spec16

Currently data-attr-type only supports the value date. We need to add support for color, time, etc.

Example:

<input data-attr-type=color value=~~profileColor~~>

becomes

<input type=color value=#DAA520>

Note:

<input type=color value=~~profileColor~~>

results in the warning:
The specified value "~~profileColor~~" does not conform to the required format. The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.

Hey guys, I was checking the docs, but I can't find a way to use a function in the data-click (or any attribute that expects a function) that is not exposed to the window object. I'm using webpack to ship my files so I don't use object namespaces (like window.MyApp.module.func). Any help is appreciated, Thanks!

The function assert.deepEqual() has been deprecated.

Replace with:
assert.deepStrictEqual()

And remove the old “Strict assertion mode” by changing:

const assert = require('assert').strict;

to:

const assert = require('assert');

See spec/arrays.js file:
https://github.com/dnajs/dna.js/blob/master/spec/arrays.js#L24

Check if it makes sense for dna.core.berserk to throw an Error object instead of just a message string. Browser support?

Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error

Given the URL:
http://example.com?lang=jp&code=7
dna.browser.getUrlParams() should return: { lang: 'jp', code: 7 }

dna.browser.getUrlParams():
https://github.com/dnajs/dna.js/blob/master/dna.js#L247

JSDOM:
https://github.com/tmpvar/jsdom#simple-options

For a callback:

<div id=book class=dna-template data-callback=addStyle>

it's possible to do var data = dna.getDataModel(cloneElem); in the addStyle function, but it would be easier to support:

function addStyle(cloneElem, data) {
   ...

Documentation:
http://dnajs.org/docs/#event-element-callback

Update to gulp 4.0 to avoid:

dna.js: line 311, col 7, 'sessionStorage' is not defined.
dna.js: line 317, col 19, 'sessionStorage' is not defined.

Add a function called dna.array.fromMap() to compliment dna.array.toMap()

If the data field is missing when cloning a template, the current error message is very confusing. There should be an clear, explicit error message when data is undefined.

const data = undefined;
dna.clone('book', data);  //should immediately throw an error

Example:

<div id=book class=dna-template data-count=~~[count]~~>
   <p>~~[count]~~</p>
</div>

The data-count attribute should be set, but it's coming up undefined.

Assert:

dna.clone('book', ['The DOM', 'Interwebz']).first().data().count === '1'

Reference:
http://dnajs.org/docs#loop-primitives

In the "jshintConfig" section of package.json, add "singleGroups": true to show places in the code that have an unnecessary grouping operator.

See:
https://jshint.com/docs/options/#singleGroups

After updating package.json, you can see the lines of code that need fixing by running:

$ npm install
$ npm test

Similar to dna.bye(), add dna.up() and dna.down() to move a clone.

Parameters:

1. elemOrEventOrIndex (optional)
2. options (default: { steps: 1, fade: true })

Reference:
http://dnajs.org/manual.html#api-bye

Hello,

dna.js worked great for me until i tried to use nested objects. I see there is a TODO at Spec runner source code. Is it easy to implement? It would be really cool if i won't have to flatten all nested object from model to allow editing through input fields.

Thanks!

Currently, data transformation functions are specified in HTML:

<div id=book class=dna-template data-transform=enhanceBook>

It might be more intuitive in JS:

dna.clone('book', books, { transform: enhanceBook });

Example <a href=# data-click=doSomething> test </a>

Value returned from doSomething is ignored!

For multiline arrays and objects, the consistency of including a comma for the last item makes the code easier to edit and helps reduce merge diffs.

See:
https://jshint.com/docs/options/#trailingcomma

In the file:
spec/arrays.js

change:

const array =    [
   { code: 'a',   word: 'Ant' },
   { code: 'b-z', word: 'Bat' }  //no comma
   ];

to:

const array =    [
   { code: 'a',   word: 'Ant' },
   { code: 'b-z', word: 'Bat' },  //with comma
   ];

TodoMVC:
http://todomvc.com

Sample Todo app:
https://jsfiddle.net/uLrc7kmp

https://github.com/dnajs/dna.js/blob/master/package.json#L34

jshint is currently run on gulpfile.js and but should also run on spec/*.js.

http://jsfiddle.net/zjL1ntnd/

Something like:

<input value=~~title~~ data-prop-disabled=~~!show~~>

to produce:

<input value="A Tale Of Two Cities" disabled>

when show is false.

dna.browser.iOS():
https://github.com/dnajs/dna.js/blob/master/dna.js#L206

JSDOM:
https://github.com/tmpvar/jsdom#simple-options

Are you planning on adding new features? I'd suggest adding simple support for conditionals, something like

<div>
   <h2>Featured Books</h2>
   <div id=book class=dna-template>
      <div>Title:  <span>~~title~~</span></div>
      ~~#author?~~<div>Author: <span>~~author~~</span></div>~~/author?~~
   </div>
</div>

to check if some object is missing or empty and act in consequence.

That would be really helpful for prototyping ;)

It would be useful to clone from an array of simple values.

Example usage:

<div id=book class=dna-template>
   Title #<span>~~[count]~~</span>: <span>~~[value]~~</span>
</div>

dna.clone('book', ['CSS3', 'HTML5']);

result:

<div>Title #<span>1</span>: <span>CSS3</span></div>
<div>Title #<span>2</span>: <span>HTML5</span></div>

See similar issue:
ducksboard/gridster.js#422

dna model does not get updated when calling destroy() of an element that is part of an dna array.

For improved readability, modernize all occurrences of:

const settings = Object.assign(defaults, options);

to:

const settings = { ...defaults, ...options };

Problem description:

[15:09:40] Starting 'default'...
[15:09:40] Finished 'default' after 15 μs
[15:09:40] Size dna.min.js : 16.06 kB
dna.js: line 5, col 5, Redefinition of 'dna'.

1 error

Problem fixed when:

There is no redefinition of dna.

Currently, smart update callbacks are specified at the element level:

<input value=~~title~~ data-smart-update=saveTitle>

This often necessitates annotating many input tags in the template with data-smart-update (or data-change).

It would be more convenient to annotate higher up at the template level:

<div id=book class=dna-template data-smart-update=saveBook>

The callback could be sent the clone's updated data model and the input element that triggered the update:

const saveBook = (dataModel, targetElem) => { ... }

https://dnajs.org/docs/#event-smart

convert spec.js to ES6.
-- var to let or const (as appropriate)
-- require to import (not yet supported natively in Node (not supported in V8); would need to wait for next engine or babel-ify the tests)

Create a new function dna.templateExists() to support checking if a template exists before cloning the template.

Example usage:

if (dna.templateExists('book'))
   dna.clone('book', { title: 'JavaScript: The Good Parts' });

Add a clones option to support cloning a template an arbitrary number of times.

For example, to make seven Audi TT cars:

dna.clone('car', { make: 'Audi', model: 'TT' }, { clones: 7 });

http://dnajs.org/docs/#api-clone

Allow loading of dna.js through a module loading system such as CommonJS or RequireJS.

Upgrade to more modern ES6 function definitions.

For example, change:

   clone: (name, data, options) => {

to:

   clone(name, data, options) {

The newer notation is more compact and looks better.

See MDN web docs:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions