add updated example interface

.gitignore

@@ -23,6 +23,7 @@ customs/extensions/*
 !customs/extensions/_example/
 customs/interfaces/*
 !customs/interfaces/.gitignore
+!customs/interfaces/_example
 /customs/listviews/*
 !customs/listviews/.gitignore
 !storage/uploads/.gitignore

customs/interfaces/_example/component.js

@@ -0,0 +1,7 @@
+define(['core/UIComponent', './interface'], function (UIComponent, Input) {
+  return UIComponent.extend({
+    id: 'exampletextlimit',
+    dataTypes: ['TEXT'],
+    Input: Input
+  });
+});

customs/interfaces/_example/interface.js

@@ -0,0 +1,22 @@
+define(['core/CustomUIView'], function (UIView) {
+
+  var charactersLimit = 100;
+
+  return UIView.extend({
+    template: 'example/templates/input',
+    events: {
+      'keyup textarea': 'updateCount'
+    },
+    updateCount: function(event) {
+      var textLength = event.currentTarget.value.length;
+      var textRemaining = charactersLimit - textLength;
+      this.$el.find('#count').text(textRemaining);
+    },
+    serialize: function() {
+      return {
+        maxLength: charactersLimit,
+        charactersRemaining: charactersLimit
+      }
+    }
+  });
+});

customs/interfaces/_example/templates/input.html

@@ -0,0 +1,2 @@
+<textarea maxLength="{{maxLength}}"></textarea>
+<span id="count">{{charactersRemaining}}</span>