LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Autonum value:

Autonum+angular value:

CSS
form {
  display: flex;
  flex-direction: column;
}
form input {
  width: 30vw;
}
form input:not(:last-child) {
  margin-bottom: 2rem;
}

.values {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}
.values div:first-child {
  margin-bottom: 1rem;
}

* {
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: border-box;
}

button:-moz-focusring,
input:-moz-focusring {
  outline: 0;
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

body {
  background: #333;
  color: white;
  font-family: "Open sans", sans-serif;
  font-weight: 100;
  font-size: 1rem;
}
JS
//1.* version : https://raw.githubusercontent.com/BobKnothe/autoNumeric/master/autoNumeric-min.js
//2.* version : https://raw.githubusercontent.com/BobKnothe/autoNumeric/master/autoNumeric-2.0/autoNumeric-2.0-BETA.js

//FIXME : The default caret placement when focusing on an autoNumeric input is wrong when I want my currency sign on the right side of the number.

class Foo {
	constructor() {
		this.input = document.querySelector('input.normal');
		this.inputAutoNum = document.querySelector('input.autonum');
		this.inputAngular = document.querySelector('input.angular');

		//Init
		this._createEventListeners(this.input);
		this._createEventListeners(this.inputAutoNum);
		$(this.inputAutoNum).autoNumeric('init', {aSep: ' ', aDec: ',', aSign: ' €', pSign: 's'});
		this._createEventListeners(this.inputAngular);
	}

	_createEventListeners(element) {
		element.addEventListener('change', () => console.log(`${element.classList[0]} : change`), false);
		element.addEventListener('keyup', () => console.log(`${element.classList[0]} : keyup`), false);
		element.addEventListener('input', () => console.log(`${element.classList[0]} : input`), false);
	}
}

let foo = new Foo();

//--------------------------------- Angular part ---------------------------------
var app = angular.module("app", []);

/**
 * Directive for autoNumeric.js (cf. https://gist.github.com/kwokhou/5964296)
 */
app.directive('cdzNumeric', function() {
	'use strict';
	// var options = {}; //Declare a empty options object //XXX
	return {
		//Require ng-model in the element attribute for watching changes.
		require: '?ngModel',
		//This directive only works when used in element's attribute (e.g: cdz-numeric)
		restrict: 'A',
		compile: function(tElm, tAttrs) {
			var isTextInput = tElm.is('input:text');

			return function(scope, elm, attrs, controller) {
				// var opts = angular.extend({}, options, scope.$eval(attrs.cdzNumeric)); //Get instance-specific options. //XXX
				var opts = { aSep: '.', aDec: ',', altDec: '.', aSign: ' €', pSign: 's', mRound: 'U' };

				//Helper method to update autoNumeric with new value.
				var updateElement = function(element, newVal) {
					// Only set value if value is numeric
					if ($.isNumeric(newVal))
						element.autoNumeric('set', newVal);
				};

				//Initialize element as autoNumeric with options.
				elm.autoNumeric(opts);

				//If element has controller, wire it (only for )
				if (controller && isTextInput) {
					//Watch for external changes to model and re-render element
					scope.$watch(tAttrs.ngModel, function(current, old) {
						controller.$render();
					});
					//Render element as autoNumeric
					controller.$render = function() {
						updateElement(elm, controller.$viewValue);
					};
					//Detect changes on element and update model.
					elm.on('change', function(e) { //FIXME : If I also listen to 'keyup' here, then I cannot enter more than 2 to 3 numbers in the input ?!
						scope.$apply(function() {
							controller.$setViewValue(elm.autoNumeric('get'));
						});
					});
				}
				else {
					// Listen for changes to value changes and re-render element.
					// Useful when binding to a readonly input field.
					if (isTextInput) {
						attrs.$observe('value', function(val) {
							updateElement(elm, val);
						});
					}
				}
			}
		} // compile
	}; // return
});

app.controller('ctrl', [
	'$scope',
	function($scope) {}
]);
//-------------------- Unimportant js functions --------------------
Term
Sat, 04/14/2018 - 20:42

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv