Merge branch 'release/0.4.0'

Conflicts:
	bower.json

Gruntfile.js

@@ -19,6 +19,7 @@ module.exports = function(grunt) {
  'type/default': 'js/types/default',
  'type/string': 'js/types/string',
  'type/date': 'js/types/date',
+ 'type/hiddenData': 'js/types/hiddenData',
  'type/decimal': 'js/types/decimal',
  'type/email': 'js/types/email',
  'type/url': 'js/types/url',
@@ -47,6 +48,7 @@ module.exports = function(grunt) {
  'type/string',
  'type/date',
  'type/decimal',
+ 'type/hiddenData',
  'type/email',
  'type/url',
  'type/label',

bower.json

@@ -1,6 +1,6 @@
 {
  "name": "massiveart/husky-validation",
- "version": "0.3.0",
+ "version": "0.4.0",
  "main": "js/form.js",
  "description": "Formhandler for the Sulu 2.0 CMF. It handles validation and data-mapping.",
  "license": "MIT",

demo/form/app.js

@@ -10,29 +10,32 @@ define(['js/form', 'globalize'], function(Form) {
 
  'use strict';
 
- var language = 'de',
- form = new Form($('#contact-form'));
-
- require(['cultures/globalize.culture.' + language], function() {
- Globalize.culture(language);
- }.bind(this));
+ var language = 'en',
+ $contactForm = $('#contact-form'),
+ form = new Form($contactForm);
+
+ if (language !== 'en') {
+ require(['cultures/globalize.culture.' + language], function() {
+ Globalize.culture(language);
+ }.bind(this));
+ }
 
  form.mapper.addCollectionFilter('phones', function(item) {
  return item.phone !== '';
  });
 
- $('#contact-form').on('form-collection-init', function(e, property) {
+ $contactForm.on('form-collection-init', function(e, property) {
  console.log(property, 'initiated');
  });
 
- $('#contact-form').on('submit', function() {
+ $contactForm.on('submit', function() {
  console.log(form.mapper.getData());
 
  return false;
  });
 
  $('#send-mapperid').on('click', function() {
- console.log(form.mapper.getData(true));
+ console.log(form.mapper.getData(undefined,true));
 
  return false;
  });
@@ -50,7 +53,22 @@ define(['js/form', 'globalize'], function(Form) {
  });
 
  $('#addemail').on('click', function() {
- form.mapper.addToCollection('emails', {email:'[email protected]'});
+ form.mapper.addToCollection('emails', {email:'[email protected]'}).then(function($element) {
+ console.log($element);
+ });
+ });
+
+ $('#addempty').on('click', function() {
+ form.mapper.addToCollection('empty', {value:'dudldu'}).then(function($element) {
+ console.log($element);
+ });
+ });
+
+ $('#removeempty').on('click', function() {
+ var mapperId = $('body').find('*[data-mapper-property-tpl=empty-tpl]').eq(0).attr('data-mapper-id');
+ if (mapperId) {
+ form.mapper.removeFromCollection(parseInt(mapperId,10));
+ }
  });
 
  $('#addemailend').on('click', function() {
@@ -89,6 +107,7 @@ define(['js/form', 'globalize'], function(Form) {
  lastName: 'Wachter',
  birthDay: '2013-09-18T08:05:00',
  wage: 1500,
+ disabled: 1,
  country: {
  id: 2,
  name: 'CH'

demo/form/index.html

@@ -61,19 +61,35 @@
  max="1500"/>
  </div>
  </div>
+ <div class="grid-row">
+ <div class="grid-col-6">
+ <label for="disabled">disabled:</label>
+ <input type="checkbox"
+ class="form-element"
+ id="disabled"
+ name="disabled"
+ data-mapper-property="disabled"
+ data-validation-trigger="keyup focusout"/>
+ </div>
+ <div class="grid-col-6">
+ </div>
+ </div>
 
  <div class="grid-row" id='emptei'
- data-mapper-property='[{"data":"empty","tpl":"empty-tpl"}]'
+ data-mapper-property='[{"data":"empty","tpl":"empty-tpl","empty-tpl":"empty-empty-tpl"}]'
  data-type="collection">
+ <script type="text/template" id="empty-empty-tpl">
+ <div>i am the empty template</div>
+ </script>
  <script type="text/template" id="empty-tpl">
- <div></div>
+ <div>here i am</div>
  </script>
  </div>
 
  <h2>multiple data</h2>
 
  <div class="grid-row" id='phonesandemails'
- data-mapper-property='[{"data":"emails","tpl":"emails-tpl"},{"data":"phones","tpl":"phones-tpl"}]'
+ data-mapper-property='[{"data":"emails","tpl":"emails-tpl","empty-tpl":"emails-empty-tpl"},{"data":"phones","tpl":"phones-tpl"}]'
  data-type="collection">
  <script type="text/template" id="phones-tpl">
  <div class="grid-col-4 floating">
@@ -92,6 +108,11 @@ <h2>multiple data</h2>
  data-mapper-property="phone"/>
  </div>
  </script>
+ <script type="text/template" id="emails-empty-tpl">
+ <div class="grid-col-4 floating">
+ no emails found
+ </div>
+ </script>
  <script type="text/template" id="emails-tpl">
  <div class="grid-col-4 floating">
  <~ var uid = _.uniqueId('email_'); ~>
@@ -152,6 +173,8 @@ <h2>single collections</h2>
  <a href="#" class="btn" id="editphone">edit Phone Privat</a>
  <a href="#" class="btn" id="deleteemail">delete email</a>
  <a href="#" class="btn" id="send-mapperid">send with mapper-id</a>
+ <a href="#" class="btn" id="addempty">add to empty</a>
+ <a href="#" class="btn" id="removeempty">remove empty</a>
  </div>
  </form>
  </div>

demo/types/hidden-data/app.js

@@ -0,0 +1,36 @@
+requirejs.config({
+ baseUrl: '../../../',
+ paths: {
+ 'globalize': 'bower_components/globalize/lib/globalize',
+ 'cultures': 'bower_components/globalize/lib/cultures'
+ }
+});
+
+define(['js/form', 'globalize'], function(Form) {
+ var language = 'de', form;
+
+ require(['cultures/globalize.culture.' + language], function() {
+ Globalize.culture(language);
+ }.bind(this));
+
+ form = new Form($('#content-form'), {debug: true});
+
+ $('#content-form').on('submit', function() {
+ console.log(form.mapper.getData());
+ return false;
+ });
+
+ $('#set-data').on('click', function() {
+ form.mapper.setData({
+ id: '5',
+ title: 'Titel',
+ country:'en',
+ url: '/testurl',
+ article: 'asdfasdf',
+ region: {
+ id: '5',
+ name: 'Tirol'
+ }
+ });
+ });
+});

demo/types/hidden-data/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title></title>
+ <link href="../../../css/validation.css" rel="stylesheet">
+ <link href="../../../assets/css/husky.min.css" rel="stylesheet">
+
+ <style type="text/css">
+ #content {
+ margin-left: auto;
+ margin-right: auto;
+ width: 800px;
+ margin-top: 100px;
+ }
+ </style>
+ </head>
+ <body>
+
+ <div id="content">
+ <form id="content-form" class="grid">
+ <div class="grid-row">
+ <label for="country" class="pointer required">Title</label>
+ <span id="country" data-form="true" data-type="hiddenData" data-mapper-property="region" data-type-id="id" data-type-default-value="my return value"></span>
+ </div>
+ <input type="submit" value="SEND"/>
+ <input type="button" value="SET" id="set-data"/>
+ </form>
+ </div>
+
+ <script src="../../../assets/js/jquery.js"></script>
+ <script src="../../../assets/js/underscore.js"></script>
+ <script data-main="app.js" type="text/javascript" src="../../../assets/js/require.js"></script>
+ </body>
+</html>