Merge pull request #6 from klaascuvelier/updates

Updates

.editorconfig

@@ -0,0 +1,9 @@
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+indent_size = 4
+
+[*.json]
+indent_size = 2

.eslintrc

@@ -0,0 +1,10 @@
+{
+    "extends": "./node_modules/js-styleguide/.eslintrc",
+    "rules": {
+        "strict": [1, "function"],
+        "no-magic-numbers": "off",
+        "complexity": ["warn", {"max": 6}],
+        "prefer-template": "off",
+        "prefer-const": "off"
+    }
+}

.gitignore

@@ -20,7 +20,7 @@ config.js
 client.zip
 
 # Test output
-test/test-results.xml
+test/junit
 test/coverage
 
 # conflict resolvers

dist/floating-label.css

@@ -8,14 +8,14 @@
   left: 10px;
   font-size: 11px;
   -webkit-transform: translateY(20px);
-      -ms-transform: translateY(20px);
           transform: translateY(20px);
+  -webkit-transition: -webkit-transform 0.15s ease-in;
   transition: -webkit-transform 0.15s ease-in;
   transition: transform 0.15s ease-in;
+  transition: transform 0.15s ease-in, -webkit-transform 0.15s ease-in;
 }
 .floating-label label.active {
   -webkit-transform: translateY(0px);
-      -ms-transform: translateY(0px);
           transform: translateY(0px);
 }
 .floating-label input {

dist/floating-label.js

@@ -1,9 +1,8 @@
-(function(angular) {
+(function initModule (angular) {
     'use strict';
-
     angular.module('components', []);
-
 })(window.angular);
+
 //
 //
 // A "Floating Label" directive using the placeholder attribute
@@ -12,29 +11,40 @@
 // By @klaascuvelier (http://www.klaascuvelier.be)
 //
 //
-(function (angular) {
+(function initDirective (angular) {
     'use strict';
 
     /**
      * generate an NgModel key for the input box using it's attributes (id/name)
      * @param {angular.element} inputBox
-     * @return {string}
+     * @returns {string}
      */
-    function generateNgModelKey(inputBox) {
-        var inputId = inputBox.attr('id') || '',
-            inputName = inputBox.attr('name') || '';
+    function generateNgModelKey (inputBox) {
+        var inputId = inputBox.attr('id') || '';
+        var inputName = inputBox.attr('name') || '';
+
+        if (inputId.length === 0 && inputName.length === 0) {
+            throw new Error('If no ng-model is defined, the input should have an id or a name');
+        }
 
-        return 'input_' + (inputId ? inputId : inputName);
+        return 'input_' + inputId || inputName;
     }
 
+    /**
+     * Angular compile method
+     * @param {angular.element} $element
+     * @param {angular.attrs} $attrs
+     * @returns {object}
+     */
     function floatingLabelCompileFunction ($element, $attrs)
     {
-        var templateAttributes = [],
-            template, attr;
+        var templateAttributes = [];
+        var template = null;
+        var attr = null;
 
         // if there is no placeholder, there is no use for this directive
         if (!$attrs.placeholder) {
-            return;
+            throw new Error('Floating label needs a placeholder');
         }
 
         // copy existing attributes from
@@ -51,9 +61,9 @@
 
         // html template for the directive
         template = '<div class="floating-label">' +
-            '<label ng-class="{ \'active\': showLabel }">' + $attrs.placeholder + '</label>'+
-            '<input ' + templateAttributes.join(' ') + ' />' +
-        '</div>';
+                '<label ng-class="{ \'active\': showLabel }">' + $attrs.placeholder + '</label>' +
+                '<input ' + templateAttributes.join(' ') + ' />' +
+            '</div>';
 
         $element.replaceWith(angular.element(template));
 
@@ -63,32 +73,34 @@
     }
 
     // Add DI
-    floatingLabelCompileFunction.$inject = ['$element', '$attrs'];
+    floatingLabelCompileFunction.$inject = [ '$element', '$attrs' ];
 
     /**
      * Post compile method
-     * @param $scope
-     * @param $element
+     * @param {angular.scope} $scope
+     * @param {angular.element} $element
      */
     function floatingLabelPostCompileFunction ($scope, $element)
     {
-        var inputBox = $element.find('input'),
-            ngModelKey = inputBox.attr('ng-model');
+        var inputBox = $element.find('input');
+        var ngModelKey = inputBox.attr('ng-model');
 
-        $scope.$watch(ngModelKey, function (newValue) {
+        $scope.showLabel = false;
+
+        $scope.$watch(ngModelKey, function modelKeyWatcher (newValue) {
             // if the field is not empty, show the label, otherwise hide it
-            $scope.showLabel = newValue && newValue.length > 0;
+            $scope.showLabel = typeof newValue === 'string' && newValue.length > 0;
         });
     }
 
     // Add DI
-    floatingLabelPostCompileFunction.$inject = ['$scope', '$element'];
+    floatingLabelPostCompileFunction.$inject = [ '$scope', '$element' ];
 
     /**
      * Return the definition for this directive
      * @returns {Object}
      */
-    function floatingLabelDefinition() {
+    function floatingLabelDefinition () {
 
         return {
             restrict: 'A',
@@ -102,4 +114,4 @@
     angular
         .module('components')
         .directive('floatingLabel', floatingLabelDefinition);
-})(window.angular);
+})(window.angular);

gulp/test.js

@@ -1,17 +1,15 @@
 'use strict';
 
-var gulp    = require('gulp');
-var karma   = require('karma').server;
-var jshint  = require('gulp-jshint');
-var stylish = require('jshint-stylish');
+var gulp = require('gulp');
+var karma = require('karma').server;
+var eslint = require('gulp-eslint');
 
 /**
  * Create function that will run karma on the source files
  * @param configFile
  * @returns {Function}
  */
-function karmaTask(configFile)
-{
+function karmaTask(configFile) {
     return function (done) {
         karma.start({
             configFile: configFile,
@@ -25,19 +23,18 @@ function karmaTask(configFile)
  * @param sources
  * @returns {Function}
  */
-function jsHintTask(sources)
-{
+function lintTask(sources) {
     return function () {
         return gulp
             .src(sources)
-            .pipe(jshint())
-            .pipe(jshint.reporter(stylish))
-            .pipe(jshint.reporter('fail'));
+            .pipe(eslint())
+            .pipe(eslint.format())
+            .pipe(eslint.failAfterError());
     };
 }
 
 // Export methods
 module.exports = {
     karmaTask: karmaTask,
-    jsHintTask: jsHintTask
-};
+    lintTask: lintTask
+};

gulpfile.js

@@ -1,27 +1,27 @@
 'use strict';
 
-var gulp        = require('gulp');
-var gulpTest    = require('./gulp/test');
-var gulpBuild   = require('./gulp/build');
+var gulp = require('gulp');
+var gulpTest = require('./gulp/test');
+var gulpBuild = require('./gulp/build');
 
 
 var config = {
     paths: {
         karmaConfigFile: __dirname + '/test/karma.conf.js',
-        jsSources: [ './src/floating-label.module.js', './src/floating-label.directive.js' ],
-        lessSources: [ './src/*.less' ],
+        jsSources: ['./src/floating-label.module.js', './src/floating-label.directive.js'],
+        lessSources: ['./src/*.less'],
 
         dist: './dist/',
         jsOutputFile: 'floating-label.js',
         cssOutputFile: 'floating-label.css'
     }
 };
 
-gulp.task('jshint', gulpTest.jsHintTask(config.paths.jsSources));
+gulp.task('lint', gulpTest.lintTask(config.paths.jsSources));
 
 gulp.task('karma', gulpTest.karmaTask(config.paths.karmaConfigFile));
 
-gulp.task('test', ['jshint', 'karma']);
+gulp.task('test', ['lint', 'karma']);
 
 gulp.task('scripts', ['test'], gulpBuild.scriptsTask(
     config.paths.jsSources,