angular-floating-label
Advanced tools
Comparing version 1.0.0 to 1.0.1
{ | ||
"name": "angular-floating-label", | ||
"version": "1.0.0", | ||
"version": "1.0.1", | ||
"homepage": "https://github.com/klaascuvelier/angular-floating-label", | ||
@@ -19,5 +19,5 @@ "authors": [ | ||
"devDependencies": { | ||
"angular": "1.3.x", | ||
"angular-mocks": "1.3.x" | ||
"angular": "^1.3.0", | ||
"angular-mocks": "^1.3.0" | ||
} | ||
} |
## 1.0.1 | ||
* Update environment | ||
* Fix for numerical values #5 (thanks @ablamunits) | ||
## 1.0.0 | ||
@@ -12,2 +16,2 @@ * New directory structure | ||
## 0.0.1 | ||
Initial version | ||
Initial version |
@@ -1,7 +0,6 @@ | ||
(function(angular) { | ||
(function initModule (angular) { | ||
'use strict'; | ||
angular.module('components', []); | ||
})(window.angular); | ||
})(window.angular); | ||
// | ||
@@ -15,3 +14,3 @@ // | ||
// | ||
(function (angular) { | ||
(function initDirective (angular) { | ||
'use strict'; | ||
@@ -22,19 +21,30 @@ | ||
* @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') || ''; | ||
return 'input_' + (inputId ? inputId : inputName); | ||
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 || 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'); | ||
} | ||
@@ -56,5 +66,5 @@ | ||
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>'; | ||
@@ -69,17 +79,19 @@ $element.replaceWith(angular.element(template)); | ||
// 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; | ||
}); | ||
@@ -89,3 +101,3 @@ } | ||
// Add DI | ||
floatingLabelPostCompileFunction.$inject = ['$scope', '$element']; | ||
floatingLabelPostCompileFunction.$inject = [ '$scope', '$element' ]; | ||
@@ -96,3 +108,3 @@ /** | ||
*/ | ||
function floatingLabelDefinition() { | ||
function floatingLabelDefinition () { | ||
@@ -111,2 +123,2 @@ return { | ||
.directive('floatingLabel', floatingLabelDefinition); | ||
})(window.angular); | ||
})(window.angular); |
'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'); | ||
@@ -13,4 +12,3 @@ /** | ||
*/ | ||
function karmaTask(configFile) | ||
{ | ||
function karmaTask(configFile) { | ||
return function (done) { | ||
@@ -29,10 +27,9 @@ karma.start({ | ||
*/ | ||
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()); | ||
}; | ||
@@ -44,3 +41,3 @@ } | ||
karmaTask: karmaTask, | ||
jsHintTask: jsHintTask | ||
}; | ||
lintTask: lintTask | ||
}; |
'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'); | ||
@@ -11,4 +11,4 @@ | ||
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'], | ||
@@ -21,7 +21,7 @@ dist: './dist/', | ||
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']); | ||
@@ -28,0 +28,0 @@ gulp.task('scripts', ['test'], gulpBuild.scriptsTask( |
{ | ||
"name": "angular-floating-label", | ||
"version": "1.0.0", | ||
"version": "1.0.1", | ||
"description": "Floating label directive for AngularJs", | ||
@@ -25,16 +25,16 @@ "scripts": { | ||
"devDependencies": { | ||
"bower": "^1.3.12", | ||
"gulp": "3.8.x", | ||
"gulp-autoprefixer": "2.0.x", | ||
"gulp-concat": "2.4.x", | ||
"gulp-jshint": "1.9.x", | ||
"gulp-less": "2.0.x", | ||
"jasmine-core": "2.1.x", | ||
"jshint-stylish": "1.0.x", | ||
"karma": "0.12.x", | ||
"karma-coverage": "0.2.x", | ||
"karma-jasmine": "0.3.x", | ||
"karma-junit-reporter": "0.2.x", | ||
"karma-phantomjs-launcher": "0.1.x" | ||
"bower": "^1.8.0", | ||
"gulp": "^3.9.1", | ||
"gulp-autoprefixer": "^4.0.0", | ||
"gulp-concat": "^2.6.1", | ||
"gulp-eslint": "^4.0.0", | ||
"gulp-less": "^3.3.2", | ||
"jasmine-core": "^2.7.0", | ||
"js-styleguide": "git://github.com/klaascuvelier/js-styleguide.git#master", | ||
"karma": "^1.7.0", | ||
"karma-coverage": "^1.1.1", | ||
"karma-jasmine": "^1.1.0", | ||
"karma-junit-reporter": "^1.2.0", | ||
"karma-phantomjs-launcher": "^1.0.4" | ||
} | ||
} |
@@ -9,3 +9,3 @@ // | ||
// | ||
(function (angular) { | ||
(function initDirective (angular) { | ||
'use strict'; | ||
@@ -16,23 +16,30 @@ | ||
* @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 'If no ng-model is defined, the input should have an id or a name'; | ||
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) { | ||
throw 'Floating label needs a placeholder'; | ||
throw new Error('Floating label needs a placeholder'); | ||
} | ||
@@ -54,3 +61,3 @@ | ||
template = '<div class="floating-label">' + | ||
'<label ng-class="{ \'active\': showLabel }">' + $attrs.placeholder + '</label>'+ | ||
'<label ng-class="{ \'active\': showLabel }">' + $attrs.placeholder + '</label>' + | ||
'<input ' + templateAttributes.join(' ') + ' />' + | ||
@@ -67,19 +74,19 @@ '</div>'; | ||
// 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.showLabel = false; | ||
$scope.$watch(ngModelKey, function (newValue) { | ||
$scope.$watch(ngModelKey, function modelKeyWatcher (newValue) { | ||
// if the field is not empty, show the label, otherwise hide it | ||
$scope.showLabel = typeof newValue === 'string' && newValue.length > 0; | ||
$scope.showLabel = newValue !== undefined && newValue.toString().length > 0; | ||
}); | ||
@@ -89,3 +96,3 @@ } | ||
// Add DI | ||
floatingLabelPostCompileFunction.$inject = ['$scope', '$element']; | ||
floatingLabelPostCompileFunction.$inject = [ '$scope', '$element' ]; | ||
@@ -96,3 +103,3 @@ /** | ||
*/ | ||
function floatingLabelDefinition() { | ||
function floatingLabelDefinition () { | ||
@@ -111,2 +118,2 @@ return { | ||
.directive('floatingLabel', floatingLabelDefinition); | ||
})(window.angular); | ||
})(window.angular); |
@@ -1,6 +0,4 @@ | ||
(function(angular) { | ||
(function initModule (angular) { | ||
'use strict'; | ||
angular.module('components', []); | ||
})(window.angular); | ||
})(window.angular); |
@@ -44,3 +44,4 @@ // Karma configuration | ||
junitReporter: { | ||
outputFile: 'test/test-results.xml' | ||
outputDir: 'test/junit', | ||
outputFile: 'test-results.xml' | ||
}, | ||
@@ -47,0 +48,0 @@ |
@@ -22,3 +22,3 @@ 'use strict'; | ||
$scope.$digest(); | ||
}).toThrow('Floating label needs a placeholder'); | ||
}).toThrow(new Error('Floating label needs a placeholder')); | ||
@@ -44,3 +44,3 @@ }); | ||
$scope.$digest(); | ||
}).toThrow('If no ng-model is defined, the input should have an id or a name'); | ||
}).toThrow(new Error('If no ng-model is defined, the input should have an id or a name')); | ||
@@ -107,2 +107,18 @@ | ||
it('should handle numeric values', function () { | ||
var element = angular.element('<div><div ng-model="test" floating-label placeholder="test"></div></div>'); | ||
var input; | ||
var directiveScope; | ||
$compile(element)($scope); | ||
$scope.$digest(); | ||
input = element[0].querySelector('input'); | ||
directiveScope = angular.element(input).scope(); | ||
directiveScope.test = 0; | ||
$scope.$digest(); | ||
expect(directiveScope.showLabel).toBeTruthy(); | ||
}); | ||
it('should set the value of showLabel to true when the model is filled in', function () { | ||
@@ -179,2 +195,2 @@ | ||
}); | ||
}); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
27420
21
556