Merge branch 'cdaringe-master'

datuhealth · Feb 23, 2015 · 81943c7 · 81943c7
2 parents f2e823f + b4c146a
commit 81943c7
Show file tree

Hide file tree

Showing 8 changed files with 651 additions and 12 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 node_modules
+.npmrc
 .tmp
 .DS_Store
 Thumbs.db

diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ A simple ampersand input view extension to enable the [floating label pattern](h
 
 This extension will:
 
-- Dynamically provide a `floating` class on the `[data-hook="label"]` element for styling a floating label
+- Dynamically provide a `floating` class on the `[data-hook="label"]` element for styling a floating label.  Overridable by supplying option `labelClass: 'your other classes'`
 - Check if the input already has a value and float the label
 - Check if the input has a value as the user types and dynamically float the label
 
@@ -77,10 +77,18 @@ module.exports = AmpersandView.extend({
 
 ## API reference
 
+### options
+Options are passed into the ViewConstructor
+
+`labelClass` - [*default: 'floating'*], applies 'yourClass' or 'yourClass andYourOtherClassToo' to data-hooked `label` element
+
+`template` - standard View convention applies.  However, if attribute `data-hook="label-container"` is found, `labelClass` will be applied to it instead of `data-hook="label"`
+
 See [ampersand-input-view](https://github.com/ampersandjs/ampersand-input-view#api-reference) for the api reference.
 
 ## changelog
 
+- 1.1.0 - Permit overridable class(es) for label.  Add demo.  Rev input version req
 - 1.0.0 - Added tests to make sure everything worked well
 - 0.2.0 - Added input-invalid class to the label when the input is invalid
 - 0.1.0 - Initial release to github/npm

diff --git a/ampersand-floatinglabel-input-view.js b/ampersand-floatinglabel-input-view.js
@@ -14,24 +14,49 @@ module.exports = AmpersandInputView.extend({
             }
         ]
     }),
+    initialize: function( options ) {
+        'use strict';
+        options = options || {};
+
+        if ( options.labelClass ) {
+            this.labelClass = options.labelClass.split( ' ' );
+        } else {
+            this.labelClass = [ 'floating' ];
+        }
+
+        AmpersandInputView.prototype.initialize.apply( this, arguments );
+    },
     render: function() {
         'use strict';
 
-        AmpersandInputView.prototype.render.call( this, arguments );
+        AmpersandInputView.prototype.render.apply( this, arguments );
 
         this.on( 'change:value', this.checkLabel );
 
         this.labelEl = this.queryByHook( 'label' );
+        this.labelContainer = this.queryByHook( 'label-container' );
 
         this.checkLabel();
     },
     checkLabel: function() {
         'use strict';
+        var self = this,
+            action;
 
-        if ( this.input.value ) {
-            this.labelEl.classList.add( 'floating' );
+        // Float the label up if there is input text, or, if the warning message
+        // must be displayed (adjacent to label)
+        if ( this.input.value || ( this.shouldValidate && this.changed ) ) {
+            action = 'add';
         } else {
-            this.labelEl.classList.remove( 'floating' );
+            action = 'remove';
         }
+
+        this.labelClass.forEach(function( cls ) {
+            if ( self.labelContainer ) {
+                self.labelContainer.classList[action]( cls );
+            } else {
+                self.labelEl.classList[action]( cls );
+            }
+        });
     }
 });
diff --git a/demo/demo.html b/demo/demo.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>floating label field input</title>
+    <link rel="stylesheet" type="text/css" href="normalize.css">
+    <script src="demo.js"></script>
+    <style type="text/css" media="screen">
+        body {
+            font-size: 12px;
+            padding: 10px
+        }
+        .bottom {
+            position: absolute;
+            bottom: 0;
+        }
+
+        .label {
+            padding: 4px 4px 4px 0;
+        }
+
+        .message {
+            /*position: absolute;
+            top: 0;*/
+            display: inline-block;
+            padding: 2px 4px 2px 4px;
+        }
+
+        .message p {
+            margin: 0;
+        }
+
+        .message-error {
+            background: pink;
+            border-radius: 2px;
+            z-index: -1;
+            color: crimson;
+        }
+
+        .float-container {
+            position: relative;
+            height: 48px;
+            display: block;
+        }
+
+        .floating-label {
+            z-index: -1;
+            font-weight: bold;
+            display: inline-block;
+            position: absolute;
+            top: 30px;
+            visibility: none;
+            -webkit-transition: top .2s;
+                    transition: top .2s;
+        }
+
+        .floating-label.floating {
+            display: inline-block;
+            visibility: visible;
+            top: 5px;
+        }
+
+        .div-table {
+            display: table;
+        }
+        .div-row {
+            display: table-row;
+        }
+        .div-cell {
+            display: table-cell;
+        }
+    </style>
+</head>
+<body>
+    <div id="target"></div>
+</body>
+</html>
diff --git a/demo/demo.js b/demo/demo.js
@@ -0,0 +1,79 @@
+var AmpersandView = require( 'ampersand-view' ),
+    AmpersandForm = require( 'ampersand-form-view' ),
+    Input = require('ampersand-input-view'),
+    FloatingInput = require( '../ampersand-floatinglabel-input-view' ),
+    domready = require('domready'),
+    view;
+
+var DemoView = AmpersandView.extend({
+    template: [
+        '<div>',
+            '<form method="POST" action="/login" role="form" data-target="form">',
+                '<div data-hook="floatme"></div>',
+            '</form>',
+        '</div>'
+    ].join(''),
+    render: function() {
+        'use strict';
+        view = this;
+
+        this.renderWithTemplate();
+
+        this.form = new AmpersandForm({
+            autoAppend: false,
+            el: this.query( 'form' ),
+            submitCallback: function( data ) {
+                console.log( 'here\'s your data!:' );
+                console.dir( data );
+            },
+            validCallback: function( data ) {
+                console.log( "am i valid form?: " + data );
+            },
+            fields: [
+                new FloatingInput({
+                    template: [
+                        '<div class="float-container">',
+                            '<input class="bottom form-input">',
+                            '<div class="floating-label div-table" data-hook="label-container">',
+                                '<div class="div-row">',
+                                    '<span class="label div-cell" data-hook="label"></span>',
+                                    '<span class="div-cell message message-error" data-hook="message-container message-text"></span>',
+                                '</div>',
+                            '</div>',
+                        '</div>'
+                    ].join(''),
+                    labelClass: 'floating',
+                    el: view.queryByHook('floatme'),
+                    type: 'email',
+                    name: 'email',
+                    label: 'Email',
+                    placeholder: 'Email',
+                    required: false,
+                    tests: [
+                        function( val ) {
+                            if ( val.length < 5 ) {
+                                return 'Your email must be at least 5 characters';
+                            }
+                        }
+                    ]
+                })
+                // new FloatingInput({
+                //     el: view.queryByHook('floatme'),
+                //     name: 'test',
+                //     label: 'Test label',
+                //     value: 'Test value'
+                // })
+            ]
+        });
+
+        this.registerSubview( this.form );
+    }
+});
+
+domready(function() {
+    var demoView = new DemoView({
+        el: window.document.getElementById('target')
+    });
+    demoView.render();
+    view.form._fieldViewsArray[0].render()
+});