material - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

app.js

 
+/**
+ * material demo
+ * @type {[type]}
+ */
 var express = require('express');
@@ -6,4 +10,4 @@ var app = express();
 app.use(express.compress());
-app.use(express.static(__dirname + '/public'));
+app.use(express.static(__dirname + '/dist'));
 
 app.listen(process.env.PORT || 3000);

Gruntfile.js

@@ -6,3 +6,5 @@ module.exports = function(grunt) {
 	require('./tasks/deploy.js')(grunt);
+	require('./tasks/browserify.js')(grunt);
+	require('./tasks/plato.js')(grunt);
 
 };

lib/component.js

@@ -6,14 +6,24 @@ /*
 
-var prime = require("prime/index"),
+var prime = require('prime/index'),
 	Options = require('prime-util/prime/options'),
-	Emitter = require("prime/emitter"),
-	binding = require("./module/binding"),
-	method = require("./component/method"),
-	$ = require("elements"),
-	zen = require('elements/zen');
+	Emitter = require('prime/emitter'),
+	Element = require('./element'),
+	bind = require('./module/bind'),
+	method = require('./component/method'),
+	$ = require('elements'),
+	zen = require('elements/zen'),
+	__debug = require('./module/debug');
 
+
+var	_log = __debug('material:component');
+//	_log.defineLevel('DEBUG');
+
 var Component = prime({
 
-	mixin: [Options, Emitter, binding, method],
+	mixin: [Options, Emitter, bind, method],
+	
+	name: 'component',
 
+	component: 'component',
+
 	options: {
@@ -27,3 +37,3 @@ lib: 'ui',
 		element: {
-			attributes: ['accesskey', 'class', 'contenteditable', 'contextmenu',
+			attr: ['accesskey', 'class', 'contenteditable', 'contextmenu',
 			'dir', 'draggable', 'dropzone', 'hidden', 'id', 'lang',
@@ -49,4 +59,7 @@ 'spellcheck', 'style', 'tabindex', 'title', 'translate'],
 		this._initEvents();
-		this._initBinding();
 
+		if (this.options.bind) {
+			this.bind(this.options.bind);
+		}
+
 		return this;
@@ -59,3 +72,5 @@ },
 	 */
-	_initElement: function(){
+	_initElement: function() {
+		_log.debug('_initElement');
+
 		var opts = this.options;
@@ -65,32 +80,63 @@
 
-		var tag = this.options.element.tag;
-		var name = this.options.name;
+		var tag = opts.tag || opts.element.tag;
+		//var name = opts.name || opts.element.name;
 
-		this.domElement = zen(tag);
+		var props = this._initProps();
 
-		this.element = $(this.domElement);
-
-		// init attributes
-		this._initAttributes();
-
-		// set text or html if needed
-		var text = opts.text || opts.html;
-		if (text) this.setText(text);
-
+		var element = new Element(tag, props);
+		
 		//element.store('_instance', this);
 
-		if (opts.klass);
-			this.addClass(opts.klass);
+		this.element = element;
+		this.content = element;
 
 		this.emit('created');
 
-		if (opts.state)
-			this.setState(opts.state);
+		if (opts.container && opts.container !== 'window') {
+			_log.debug('_initElement', opts.name, opts.container);
+			this.element.inject(opts.container);
+			this.emit('injected');
+		}
 
+		this._initState();
 		this._initClass();
 
-		return this.element;
+		return element;
 	},
 
 	/**
+	 * [_initProps description]
+	 * @return {Object}
+	 */
+	_initProps: function() {
+		_log.debug('_initProps');
+
+		var opts = this.options;
+		var prop = {};
+		var props = [
+			'id', 'name', 'type',
+			'klass', 'styles',
+			'html', 'title',
+			'events'
+		];
+		//var cuts = ['name', 'tag'];
+
+		for (var i = 0; i < props.length; i++) {
+			var name = props[i];
+
+			if (name === 'klass') {
+				name = 'class';
+			}
+
+			//_log.debug('-', name, props[i]);
+
+			if (opts.element && opts.element.attr[name]) {
+				prop[name] = opts.element.attr[props[i]];
+			}
+		}
+
+		return prop;
+	},
+
+	/**
 	 * Init component class
@@ -103,18 +149,35 @@ * @return {[type]} [description]
 		//this.element.addClass(opts.prefix + opts.name);
-		var klass = opts.klass || opts.element.klass;
 
-		if (klass) {
-			this.element.addClass(klass);
+		if (opts.klass) {
+			this.element.addClass(opts.klass);
 		}
 
-		if (opts.type && typeof opts.type !== undefined) {
-			this.element.addClass('type-' + opts.type);
+		if (opts.element && opts.element.klass) {
+			this.addClass(opts.element.klass);
 		}
 
-		if (opts.state && typeof opts.state !== undefined) {
-			this.element.addClass('state-' + opts.state);
+		if (opts.type) {
+			this.addClass('type-' + opts.type);
 		}
+
+		if (opts.state) {
+			this.addClass('state-' + opts.state);
+		}
+
+		this.element.addClass(opts.prefix + this.name);
+
+		if (this.options.clss) {
+			this.element.addClass(this.options.clss);
+		}
 	},
 
 	/**
+	 * [_initState description]
+	 * @return {void}
+	 */
+	_initState: function() {
+		this.setState(this.options.state);
+	},
+
+	/**
 	 * [getName description]
@@ -127,12 +190,3 @@ * @return {string} name
 
-	/**
-	 * [setText description]
-	 * @param {[type]} text [description]
-	 */
-	setText: function(text) {
-		var node = document.createTextNode(text);
-		this.element.appendChild(node);
-	},
 
-
 	/**
@@ -156,35 +210,28 @@ * [_initOptions description]
 
+	// /**
+	//  * [addComponent description]
+	//  * @param {Object} node
+	//  */
+	// addComponent: function(node) {
+	// 	_log.debug('addComponent', node);
+	// 	if (!node.component) {
+	// 		node.component = 'container';
+	// 	}
 
-	/**
-	 * [_initEvents description]
-	 * @return {void}
-	 */
-	_initEvents: function() {
-		//_log.debug('_initEvents');
-		var self = this,
-			opts = this.options;
+	// 	node.container = this.element;
+	// 	node.main = this.main;
 
-		this.on({
-			/**
-			 * @ignore
-			 */
-			injected: function() {
-				if (opts.resizable && self._initResizer) {
-					self._initResizer();
-				}
-			},
-			/**
-			 * @ignore
-			 */
-			device: function(device) {
-				//_log.debug('device', device);
-				self.device = device;
-			}
-		});
+	// 	//_log.debug(node);
 
-		if (this.options.draggable && this.enableDrag) {
-			this.enableDrag();
-		}
-	},
+	// 	var container = new UI[node.component.capitalize()](node);
 
+	// 	this.addEvent('resize', function() {
+	// 		container.fireEvent('resize');
+	// 	});
+
+	// 	this.node.push(container);
+	// 	this.layout[this.main][container.name] = container;
+	// 	//ui.node[this.main][node.name] = container;
+	// },
+
 	/**
@@ -212,2 +259,4 @@ * Setter for the state of the component
 	addClass: function(klass) {
+		_log.debug('addClass');
+
 		this.element.addClass(klass);
@@ -223,2 +272,4 @@
 	removeClass: function(klass) {
+		_log.debug('removeClass');
+
 		this.element.removeClass(klass);
@@ -230,85 +281,78 @@
 	/**
-	 * [setAttribute description]
-	 * @param {[type]} name  [description]
-	 * @param {[type]} value [description]
+	 * [_initEvents description]
+	 * @return {void}
 	 */
-	setAttribute: function(name, value) {
-		this.element.setAttribute(name, value);
+	_initEvents: function() {
+		//_log.debug('_initEvents');
+		var self = this,
+			opts = this.options;
 
-		return this;
+		// for retro compatibilty
+		this.on('injected', function() {
+			if (opts.resizable && self._initResizer) {
+				self._initResizer();
+			}
+		});
+
+		// this will be handled by the binding
+		this.on('device', function(device) {
+			//_log.debug('device', device);
+			self.device = device;
+		});
+
+
+		if (this.options.draggable && this.enableDrag) {
+			this.enableDrag();
+		}
 	},
 
 	/**
-	 * [_initProps description]
-	 * @return {[type]} [description]
+	 * set content of the element
+	 * @param {string} content [description]
 	 */
-	_initAttributes: function() {
-		//console.log('_initAttributes');
-		var opts = this.options,
-			attr = opts.element.attributes;
+	setContent: function(content) {
+		this.content.set('html', content);
 
-		for (var i = 0, len = attr.length; i < len; i++ ) {
-			var name = attr[i],
-				value = opts[name];
+		this.fireEvent('resize');
 
-			if (name === 'klass')
-				name = 'class';
-
-			if (value)
-				this.setAttribute(name, value);
-		}
+		return this;
 	},
 
 	/**
-	 * Inject method insert element to the domtree using Dom methods
-	 * @param  {[type]} container [description]
-	 * @param  {[type]} position  [description]
-	 * @return {[type]}           [description]
+	 * [inject description]
+	 * @param  {Object} container
+	 * @param  {string} position
+	 * @return {Object}
 	 */
-	inject: function(element, context) {
-		//console.log('inject', this.element, context);
+	inject: function(container, position) {
+		_log.debug('inject', container, position);
 
-		context = context || 'bottom';
+		this.emit('inject');
 
-		var contexts = ['top', 'bottom', 'after', 'before'];
-		var methods = ['top', 'bottom', 'after', 'before'];
+		//_log.debug('container', container);
+		_log.debug('element', this.element, container);
+		
+		var c = container.element || container;
 
-		var index = contexts.indexOf(context);
-		if (index === -1)
-			return;
+		// if (container instanceof HTMLElement) {
+		// 	console.log('instanceof Element', this.options.name);
+		// } else if (container instanceof Component) {
+		// 	console.log('instanceof Component', this.options.name);
+		// }
 
-		var method = methods[index];
+		var c = container.element || container;
 
-		// if element is a component use its element instead
-		// if (element instanceof ui.component)
-		// 	element = element.element;
+		this.element.inject(c, position);
 
-		this.emit('inject');
+		if (this.setSize) {
+			this.setSize();
+		}
 
-		// insert component element to the dom tree using Dom
-		$(this.element)[method](element);
+		//this.size = this.element.getSize();
+		//ui.controller.element.register(this);
 
+		this.isInjected = true;
 		this.emit('injected');
 
 		return this;
-	},
-
-	/**
-	 * [hide description]
-	 * @return {[type]} [description]
-	 */
-	hide: function() {
-		// this.element.attribute('style', {
-		// 	display: 'none'
-		// });
-	},
-
-	/**
-	 * [remove description]
-	 * @return {[type]} [description]
-	 */
-	remove: function() {
-		// this.element.attribute('style', {
-		// 	display: 'none'
-		// });
 	}
@@ -315,0 +359,0 @@

lib/component/method.js

@@ -6,3 +6,6 @@ /*
 
-var prime = require("prime/index");
+var prime = require("prime/index"),
+	$ = require("elements"),
+	zen = require('elements/zen'),
+	fx = require("moofx");
 
@@ -23,3 +26,3 @@ var method = prime({
 	show: function(){
-		this.fireEvent('show');
+		this.emit('show');
 		this.element.show();
@@ -30,3 +33,2 @@
 
-
 	/**
@@ -37,3 +39,3 @@ * [hide description]
 	hide: function(){
-		this.fireEvent('hide');
+		this.emit('hide');
 		this.element.hide();
@@ -49,3 +51,3 @@
 	fade: function(value){
-		this.fireEvent('fade');
+		this.emit('fade');
 		this.element.fade(value);
@@ -56,3 +58,2 @@
 
-
 	/**
@@ -66,4 +67,2 @@ * [getStyle description]
 
-
-
 	},
@@ -150,3 +149,3 @@
 
-		this.fireEvent('resize');
+		this.emit('resize');
 		return this;
@@ -195,2 +194,12 @@ },
 	/**
+	 * [setText description]
+	 * @param {[type]} text [description]
+	 */
+	setText: function(text) {
+		this.element.text(text);
+
+		return this;
+	},
+
+	/**
 	 * [submit description]
@@ -197,0 +206,0 @@ * @param  {[type]} string [description]

lib/container.js

@@ -9,3 +9,4 @@ /*
 	Emitter = require("prime/emitter"),
-	mergeObject = require("mout/object/merge"),
+    bind = require('./module/bind'),
+	merge = require("deepmerge"),
 	$ = require("elements"),
@@ -15,2 +16,5 @@ Component = require('./component'),
 
+var	_log = __debug('material:container');
+	//_log.defineLevel('DEBUG');
+
 var Container = prime({
@@ -22,3 +26,3 @@
 
-	name: 'layout',
+	name: 'container',
 
@@ -31,4 +35,5 @@ options: {
 		tag: 'div',
-		/*resizable: false,
-		resizeBorders: ['top','right','bottom','left']*/
+		bind: {
+			'close': 'underlay.destroy'
+		}
 	},
@@ -42,6 +47,6 @@
 	constructor: function(options) {
+		this.options = merge(Container.parent.options, this.options);
+		
 		this.setOptions(options);
 
-		this.options = mergeObject(Container.parent.options, this.options);
-
 		this._initElement();
@@ -327,6 +332,2 @@
 		});
-
-		this.on('close', function() {
-			self.underlay.destroy();
-		});
 	},
@@ -333,0 +334,0 @@

lib/control/button.js

@@ -1,38 +0,44 @@
-/*
-material
- - oo ui toolkit
-*/"use strict"
 
+/**
+ * control class
+ *
+ * @class control
+ */
+"use strict"
+
 var prime = require("prime/index"),
+	Component = require('../component'),
+	Element = require('../element'),
 	Options = require('prime-util/prime/options'),
 	Emitter = require("prime/emitter"),
-	mergeObject = require("mout/object/merge"),
+	bind = require('../module/bind'),
+	merge = require("deepmerge"),
 	$ = require("elements"),
-	zen = require('elements/zen'),
-	Component = require('../component');
+	zen = require('elements/zen');
 
+var	_log = __debug('material:button');
+//	_log.defineLevel('DEBUG');
+
 var Button = prime({
 
-	mixin: [Options, Emitter],
+	inherits: Component,
+	
+	mixin: [Options, Emitter, bind],
 
-	inherits: Component,
 	name: 'button',
 	options: {
-			name: 'button',
-			type: null, // push, file
-			ink: true,
-			element: {
-				tag: 'span'
-			},
-			binding: {
-				_list: ['element'],
-				element: {
-					'sensor.click': '_onClick',
-					'sensor.dblclick': '_onDblClick',
-					'sensor.mousedown': '_onMouseDown',
-					'sensor.mouseup': '_onMouseUp',
-					'sensor.mouseleave': '_onMouseLeave'
-				}
-			}
+		name: 'button',
+		type: null, // push, file
+		ink: true,
+		element: {
+			tag: 'span'
 		},
+		bind: {
+			'sensor.click': '_onClick',
+			'sensor.dblclick': '_onDblClick',
+			'sensor.mousedown': '_onClick',
+			'sensor.mouseup': '_onMouseUp',
+			'sensor.mouseleave': '_onMouseLeave'
+		}
+	},
 
@@ -45,9 +51,18 @@ /**
 	constructor: function(options){
+		_log.debug('constructor', options);
+		
+		this.options = merge(Button.parent.options, this.options);
 		this.setOptions(options);
 
-		this.options = mergeObject(Button.parent.options, this.options);
+		_log.debug('option ', this.options);
 
+		this.emit('init');
+
+		this._initOptions();
 		this._initElement();
-		this._initBinding();
 
+		if (this.options.bind) {
+			this.bind(this.options.bind);
+		}
+
 		return this;
@@ -57,3 +72,2 @@ },
 
-
 	/**
@@ -69,9 +83,10 @@ * [set description]
 	_initElement: function() {
-		var $ = require('elements/attributes');
 		Button.parent._initElement.call(this);
 
+		_log.debug('_initElement', this.element);
+
 		var opts = this.options;
 		var type = opts.type;
 
-		opts.text = opts.text || opts.n;
+		opts.label = opts.label || opts.n;
 
@@ -87,5 +102,5 @@ if (type === null) {
 
-		// if (opts.name) {
-		// 	this.element.attributes('data-name', opts.name);
-		// }
+		if (opts.name) {
+			this.element.setAttribute('data-name', opts.name);
+		}
 
@@ -99,7 +114,8 @@
 
-		if (opts.text) {
-			this._initText(type);
+		if (opts.label || opts.text) {
+			this._initLabel(type);
 		}
 
 		if (opts.ink) {
+			_log.debug('call _initSensor');
 			this._initSensor();
@@ -130,3 +146,2 @@ } else {
 
-
 		if (mnml.icon.mdi[name]) {
@@ -156,3 +171,3 @@ //_log.debug('mdi');
 	 */
-	_initText: function(type) {
+	_initLabel: function(type) {
 		var opts = this.options;
@@ -167,6 +182,9 @@
 
-		this.text = new Element(tag, {
-			'class': 'ui-text',
-			'html': opts.text
+		this.label = new Element(tag, {
+			'class': 'ui-text'
 		}).inject(this.element, pos);
+
+		var text = opts.label || opts.text;
+
+		this.label.text(text);
 	},
@@ -181,2 +199,3 @@
 		//_log.debug(this.name);
+		Button.parent._initClass.call(this);
 
@@ -186,16 +205,2 @@ if (this.options.isPrimary) {
 		}
-
-		if (this.options.klss) {
-			this.element.addClass(opts.klss);
-		}
-
-		if (this.options.type) {
-			this.element.addClass('type-' + this.options.type);
-		}
-
-		this.element.addClass(opts.prefix + this.name);
-
-		if (this.options.clss) {
-			this.element.addClass(this.options.clss);
-		}
 	},
@@ -208,11 +213,42 @@
 	_initSensor: function() {
-		//_log.debug('_initSensor');
+		_log.debug('_initSensor', this.element);
 
-		this.sensor = new Component('div', {
-			tag: 'div',
-			'class': 'ui-sensor',
+		this.sensor = new Element('div', {
+			'class': 'ui-sensor'
 		}).inject(this.element);
+
+		_log.debug('sensor', this.sensor);
 	},
 
 	/**
+	 * [_onElementMouseDown description]
+	 * @param  {event} e
+	 * @return {Object}
+	 */
+	_initInk: function(e) {
+		_log.debug('_onElementMouseDown', e);
+
+		var element = this.element;
+
+		var x = e.offsetX;
+		var y = e.offsetY;
+
+		var height = element.compute('height').replace('px', '');
+		var width = element.compute('width').replace('px', '');
+
+		var ink = this.ink = new Element('span', {
+			class: 'ui-ink',
+		}).inject(element, 'top');
+
+		this.ink.style({
+			left: x,
+			top: y
+		});
+
+		this._touchInk(ink, x, y, width, height);
+
+		this.emit('mousedown');
+	},
+
+	/**
 	 * [_initEffect description]
@@ -225,31 +261,27 @@ * @param  {string} ink
 	 */
-	_touchInk: function(ink, x, y, coord) {
-		var size = coord.height;
+	_touchInk: function(ink, x, y, width, height) {
+		_log.debug('_touchInk', x, y, width, height);
+
+		var size = height;
 		var top = 0;
-		var duration = 1000;
+		var duration = '1s';
 
 		this.ink = ink;
 
-		if (coord.width > size) {
-			size = coord.width;
-			top = (coord.height - coord.width) / 2;
+		if (width > size) {
+			size = width;
+			top = (height - width) / 2;
 		}
 
-		var fx = new Fx.Morph(ink, {
-			duration: duration,
-			link: 'chain',
-			transition: Fx.Transitions.Quart.easeOut
-		});
+		this.ink.animate({'height': size+'px'}, {duration: duration}, {equation: 'ease-out'});
+		this.ink.animate({'width': size+'px'}, {duration: duration}, {equation: 'ease-out'});
+		this.ink.animate({'left': '0px'}, {duration: duration}, {equation: 'ease-out'});
+		this.ink.animate({'top': top}, {duration: duration}, {equation: 'ease-out'});
+		this.ink.animate({'opacity': '0'}, {duration: duration, equation: 'ease-out'});
 
-		fx.start({
-			height: size,
-			width: size,
-			left: 0,
-			top: top,
-			opacity: 0
-		});
+		var wait = duration.replace('s','')*1000;
 
-		(function() {
+		setTimeout(function() {
 			ink.destroy();
-		}).delay(duration);
+		}, wait);
 	},
@@ -263,4 +295,8 @@
 	_onClick: function(e) {
-		//_log.debug('_onElementClick', e);
+		_log.debug('_onClick', e);
 
+		if (this.state === 'disabled') {
+			return;
+		}
+
 		var opts = this.options;
@@ -271,10 +307,9 @@
 		if (opts.emit && this.state !== 'disabled') {
-			this.fireEvent(opts.emit);
+			this.emit(opts.emit);
 		}
-		this.fireEvent('press', opts.emit);
-		this.fireEvent('pressed', opts.emit);
 
-		if (opts.call && this.state !== 'disabled') {
-			opts.call();
-		}
+		this._initInk(e);
+
+		this.emit('press', opts.emit);
+		this.emit('pressed', opts.emit);
 	},
@@ -288,5 +323,6 @@
 	_onDblClick: function(e) {
+		_log.debug('_onDblClick', e);
 		var opts = this.options;
 
-		e.stop();
+		e.stopPropagation();
 
@@ -303,29 +339,15 @@ if (opts.emit && this.state !== 'disabled') {
 	 * @param  {event} e
-	 * @return {Object}
+	 * @return {void}
 	 */
-	_onMouseDown: function(e) {
-		//_log.debug('_onElementMouseDown', e);
+	_onMouseLeave: function(e) {
+		_log.debug('_onDblClick', e);
+		var opts = this.options;
 
-		e.stop();
+		e.stopPropagation();
 
-		if (this.state === 'disabled') {
-			return;
+		if (opts.emit && this.state !== 'disabled') {
+			this.emit('dblpress', opts.emit);
 		}
 
-		var x = e.event.offsetX;
-		var y = e.event.offsetY;
-
-		var coord = this.element.getCoordinates(this.element);
-
-		var ink = this.ink = new Element('span', {
-			class: 'ui-ink',
-			styles: {
-				left: x,
-				top: y
-			}
-		}).inject(this.element, 'top');
-
-		this._touchInk(ink, x, y, coord);
-
-		this.fireEvent('mousedown');
+		this.emit('dblpressed', opts.emit);
 	},
@@ -338,17 +360,13 @@
 	 */
-	_onMouseLeave: function(e) {
-		//_log.debug('_onMouseLeave', e);
+	_onMouseEnter: function(e) {
+		_log.debug('_onDblClick', e);
+		var opts = this.options;
 
+		e.stopPropagation();
 
-	},
+		if (opts.emit && this.state !== 'disabled') {
+			this.emit('dblpress', opts.emit);
+		}
 
-	/**
-	 * [_onElementMouseDown description]
-	 * @param  {event} e
-	 * @return {void}
-	 */
-	_onMouseEnter: function(e) {
-		//_log.debug('_onElementMouseDown', e);
-
-
+		this.emit('dblpressed', opts.emit);
 	},
@@ -355,0 +373,0 @@

lib/control/field.js

@@ -0,44 +1,93 @@
+/*
+material
+ - oo ui toolkit
+*/"use strict"
 
-/**
-* Minimalistic base of all ui components.
-*
-* @class ui.component
-* @requires primish
-* @return {parent} Class
-* @example (start code)	new ui.component(object); (end)
-* @author [politan]
-* @copyright © 1999-2014 - Jerome D. Vial. All Rights reserved.
-*/
-ui.field = primish({
+var prime = require("prime/index"),
+	Control = require('../control'),
+	Element = require('../element'),
+	Options = require('prime-util/prime/options'),
+	Emitter = require("prime/emitter"),
+	bind = require("../module/bind"),
+	merge = require("deepmerge"),
+	__debug = require('../module/debug');
 
-	extend: ui.component,
-	//implement: [options, emitter],
-	name: 'ui-field',
+var	_log = __debug('material:control-field');
+	_log.defineLevel('DEBUG');
 
+var Field = prime({
+	
+	inherits: Control,
+	
+	mixin: [Options, Emitter, bind],
+
+	name: 'field',
+
 	options: {
-		type: 'text',
-		element: {
-			tag: 'span'
-		},
-		label: {},
-		input: {}
+		name: 'field',
+		base: 'control',
+		tag: 'div',
+		type: 'input',
+		value: null,
+		error: true,
+		bind: {
+			'input.click': '_onFocus',
+			'input.keyup': '_onKeyUp',
+			'input.keydown': '_onKeyDown',
+			'input.mousedown': '_onMouseDown',
+			'input.focus': '_onFocus',
+			'input.blur': '_onBlur'
+		}
 	},
 
 	/**
-	 * Create a div and a hidden input to receive the selected value
-	 * @function _initElement
-	 * @extends {_initElement}
+	 * Constructor
+	 * @param  {Object} options [description]
+	 * @return {Object}         [description]
+	 */
+	constructor: function(options){
+		this.setOptions(options);
+
+		_log.debug('constructor', this.options);
+
+		this.emit('init');
+
+		this._initOptions();
+		this._initElement();
+		this._initEvents();
+
+		if (this.options.bind) {
+			this.bind(this.options.bind);
+		}
+
+		return this;
+	},
+
+	/**
+	 * [_initElement description]
 	 * @return {[type]} [description]
 	 */
 	_initElement: function(){
-		//console.log('_initElement', this.name);
 		//create a new div as input element
-		this.parent('_initElement');
+		Field.parent._initElement.call(this);
 
 		var opts = this.options;
 
-		if (this.options.label)
+		_log.debug('_initElement', opts.name, opts.klss);
+
+		this.element.addClass('ui-field');
+
+		if (opts.klss) {
+			this.element.addClass(opts.klss);
+		}
+
+		if (opts.label !== false) {
 			this._initLabel();
+		}
 
 		this._initInput();
+
+		if (opts.error) {
+			this._initError();
+		}
 	},
@@ -51,13 +100,19 @@
 	_initLabel: function()  {
-		var text = this.options.name;
+		_log.debug('_initLabel');
+		var label = this.options.label,
+			text;
 
-		if (this.options.useTextAsLabel)
-			text = this.options.text;
+		if (label === null || label === false) {
+			text = label || this.options.name;
+		} else if (this.options.label) {
+			text = label;
+		} else {
+			text = '';
+		}
 
-		this.label = new ui.component({
+		this.label = new Element('label', {
 			tag: 'label',
-			text: this.options.name,
+			html: text,
 			'for': this.options.name
 		}).inject(this.element);
-
 	},
@@ -70,37 +125,17 @@
 	_initInput: function()  {
-		var self = this,
-			opts = this.options,
-			name = opts.name,
-			type = opts.type || 'text';
+		_log.debug('_initInput', this.options);
 
-		//console.log('input option', this.options);
-
-		var input = this.input = new ui.component({
-			tag: 'input',
-			type: this.options.type,
-			text: this.options.name,
-			autocapitalize: 'off',
-            autocorrect: 'off'
+		this.input = new Element('input', {
+			name: this.options.name,
+			type: 'text',
+			value: this.options.value,
+			placeholder: this.options.text
 		}).inject(this.element);
 
-		Dom.onFocus(input.element, function(e) {
-			//console.log('focus', e);
-			self.trigger('focus');
-		});
+		if (this.readonly) {
+			this.input.setAttribute('readonly', 'readonly');
+			this.input.setAttribute('tabindex', '-1');
+		}
 
-		Dom.onBlur(input.element, function(e) {
-			//console.log('blur', e);
-			self.trigger('blur');
-		});
-
-		Dom.onChange(input.element, function(e) {
-			//console.log('change', e);
-			//self.trigger('focus');
-		});
-
-		this.input.setAttribute('type', type);
-
-		if (name)
-			this.input.setAttribute('name', name);
-
+		return this.input;
 	},
@@ -117,46 +152,321 @@
 		if (opts.name) {
-			this.label.set('html', name);
-			this.input.set('name', name);
+			this.label.setAttribute('html', name);
+			this.input.setAttribute('name', name);
 		}
 	},
 
+	/**
+	 * [_initValue description]
+	 * @return {[type]} [description]
+	 */
 	_initValue: function(){
 		var opts = this.options;
 
-		if (opts.value)
+		//create a new div as input element
+		if (opts.value) {
 			this.setValue(opts.value);
+		}
 	},
 
-	focus: function() {
-		this.input.element.focus();
-	},
 
+	/**
+	 * [getValue description]
+	 * @return {[type]} [description]
+	 */
 	getValue: function(){
-		//console.log('getValue', this.input);
-		return this.input.element.value;
+		return this.input.get('value');
 	},
 
+	/**
+	 * [setValue description]
+	 * @param {[type]} value [description]
+	 */
 	setValue: function(value){
-		this.input.set('value', value);
+		this.input.setAttribute('value', value);
 		this.value = value;
-		this.fireEvent('change' , value);
+		this.emit('change' , value);
 	},
 
+	/**
+	 * [_initEvents description]
+	 * @return {[type]} [description]
+	 */
 	_initEvents: function() {
-		var self = this;
-		this.parent('_initEvents');
+		_log.debug('_initEvents');
+		Field.parent._initEvents.call(this);
+		
+		this.on('blur', this.setState.bind(this, 'default'));
+		this.on('focus', this.setState.bind(this, 'focus'));
+	},
 
-		this.on('blur', function() {
-			self.setState(null);
-		});
+	/**
+	 * [_onKeyUp description]
+	 * @return {[type]} [description]
+	 */
+	_onKeyUp: function(e) {
+		_log.debug('_onKeyUp', e);
+		this.emit('change', this.get('value'));
+	},
 
-		this.on('focus', function() {
-			self.setState('focus');
+	/**
+	 * [_onKeyUp description]
+	 * @return {[type]} [description]
+	 */
+	onKeyDown: function(e) {
+		_log.debug('onKeyDown');
+		if (this.readonly) { 
+			e.stop();
+			return;
+		}
+
+		this.fireEvent('change', this.get('value'));
+	},
+
+	/**
+	 * [_onMouseDown description]
+	 * @return {[type]} [description]
+	 */
+	_onMouseDown: function(e) {
+		_log.debug('mousedown');
+		
+		if (this.readonly) return;
+
+		this.isFocused = true;
+		this.setState('focus');
+		this._inputFocus(e);
+		//e.stopPropagation();
+		//this.focus();
+		//this._inputFocus(e);
+	},
+
+	/**
+	 * [_onFocus description]
+	 * @return {[type]} [description]
+	 */
+	_onFocus: function(e) {
+		_log.debug('focus', e);
+
+		this.emit('mousedown');
+		this._showInk(e);
+		this.isFocused = true;
+	},
+
+	/**
+	 * [_onBlur description]
+	 * @return {[type]} [description]
+	 */
+	_onBlur: function(e) {
+		//_log.debug('_onBlur');
+
+		if (this.readonly) return;
+
+		this.setState(null);
+		this._hideInk();
+		this.isFocused = false;
+	},
+
+	/**
+	 * [_inputFocus description]
+	 * @param  {event} e [description]
+	 * @return {[type]}   [description]
+	 */
+	_inputFocus: function(e) {
+		_log.debug('_inputFocus', e);
+
+		this.emit('mousedown');
+		this._showInk(e);
+		this.isFocused = true;
+	},
+
+	/**
+	 * [_onClick description]
+	 * @return {[type]} [description]
+	 */
+	_onClick: function(e) {
+		_log.debug('_onClick', e);
+	},
+
+	/**
+	 * [_initInk description]
+	 * @return {[type]} [description]
+	 */
+	_initInk: function() {
+		_log.debug('_initInk');
+		var opts = this.options;
+
+		this.ink = new Element('span', {
+			class: 'field-ink'
+		}).inject(this.element);
+	},
+
+	/**
+	 * [_initEffect description]
+	 * @param  {[type]} inner [description]
+	 * @param  {[type]} x     [description]
+	 * @param  {[type]} y     [description]
+	 * @return {[type]}       [description]
+	 */
+	_showInk: function(e) {
+		_log.debug('_showInk');
+
+		if (this.readonly) return;
+
+		if (this.ink) return;
+		var duration = '.2s';
+		var input = this.input;
+
+		var width = input.compute('width').replace('px', '');
+		var height = input.compute('height').replace('px', '');
+		var left = input.compute('left').replace('px', '');
+
+		var x = width / 2;
+
+		if (e === 0) {
+			x = 0;
+		} else if (e && e.offsetX) {
+			x = e.offsetX;
+		}
+
+		var size = width;
+		var top = 0;
+
+		if (!this.ink) {
+			this._initInk();
+		}
+
+		this.ink.style('left', x);
+
+		this.ink.animate({'width': size}, {duration: duration}, {equation: 'ease-out'});
+		this.ink.animate({'left': size}, {duration: duration}, {equation: 'ease-out'});
+		this.ink.animate({'top': top + height - 2}, {duration: duration}, {equation: 'ease-out'});
+		this.ink.animate({'bottom': 'initial'}, {duration: duration, equation: 'ease-out'});
+		this.ink.animate({'opacity': '1'}, {duration: duration, equation: 'ease-out'});
+
+		// this.inkFx.start({
+		//     width: size,
+		//     top: top + height - 2,
+		//     bottom: 'initial',
+		//     left: left,
+		//     opacity: 1
+		// });
+	},
+
+
+	/**
+	 * [_initEffect description]
+	 * @param  {[type]} inner [description]
+	 * @param  {[type]} x     [description]
+	 * @param  {[type]} y     [description]
+	 * @return {[type]}       [description]
+	 */
+	_setInk: function(e) {
+		_log.debug('_showInk');
+		if (this.readonly) return;
+
+		//if (this.ink) return;
+
+		var height = input.compute('height').replace('px', '');
+		var left = input.compute('left').replace('px', '');
+		var width = input.compute('width').replace('px', '');
+
+		var x = width / 2;
+
+		var size = width;
+		var top = 0;
+
+		if (!this.ink) {
+			this._initInk();
+		}
+
+		this.ink.style({
+		    width: size,
+		    top: top + height - 2,
+		    bottom: 'initial',
+		    left: left,
+		    opacity: 1
 		});
 	},
 
-	set: function(name, value) {
+	/**
+	 * [_initEffect description]
+	 * @param  {[type]} inner [description]
+	 * @param  {[type]} x     [description]
+	 * @param  {[type]} y     [description]
+	 * @return {[type]}       [description]
+	 */
+	_hideInk: function() {
+		_log.debug('_showInk');
+		var self= this;
 
+		var input = this.input;
+	
+		var height = input.compute('height').replace('px', '');
+		var top = input.compute('top').replace('px', '');
+		var size = width / 2;
 
+		this.ink.animate({'height': size+'px'}, {duration: duration}, {equation: 'ease-out'});
+		this.ink.animate({'width': '0px'}, {duration: duration}, {equation: 'ease-out'});
+		this.ink.animate({'left': size}, {duration: duration}, {equation: 'ease-out'});
+		this.ink.animate({'top': top + height - 2}, {duration: duration}, {equation: 'ease-out'});
+		this.ink.animate({'bottom': 'initial'}, {duration: duration, equation: 'ease-out'});
+		this.ink.animate({'opacity': '0'}, {duration: duration, equation: 'ease-out'});
+
+		// this.inkFx.start({
+		//     width: 0,
+		//     left:size,
+		//     top: coord.top + coord.height - 2,
+		//     bottom: 'initial',
+		// 	opacity: 0
+		// });
+
+		setTimeout( function() {
+			if (self.ink) {
+				self.ink.destroy();
+				self.ink = null;
+			}
+		}, 100);
+	},
+
+	/**
+	 * [_initError description]
+	 * @return {[type]} [description]
+	 */
+	_initError: function() {
+		this.error = new Element('span', {
+			class: 'error-message'
+		}).inject(this.element);
+	},
+
+	/**
+	 * [set description]
+	 * @param {[type]} name  [description]
+	 * @param {[type]} value [description]
+	 */
+	set: function(value) {
+		_log.debug('set', value);
+
+		this.input.set('value', value);
+		this.fireEvent('change', value);
+	},
+
+	/**
+	 * [setError description]
+	 * @param {[type]} error [description]
+	 */
+	setError: function(error) {
+		if (error) {
+			this.element.addClass('field-error');
+				if (this.error)
+					this.error.set('html', error);
+		} else {
+			if (this.error)
+				this.element.removeClass('field-error');
+				if (this.error)
+					this.error.set('html', '');
+		}
+
 	}
 });
+
+module.exports = Field;
+

lib/layout/component.js

@@ -12,2 +12,5 @@ /*
 
+var	_log = __debug('material:layout-component');
+//	_log.defineLevel('DEBUG');
+
 var component = new prime({
@@ -44,3 +47,3 @@
 	_initComponent: function(comp) {
-		console.log('_initComponent', comp.opts.name, comp);
+		_log.debug('_initComponent', comp.opts.name, comp);
 
@@ -58,3 +61,3 @@ // shortcuts
 		//comp.opts.container = comp.container;
-		var component = this.component[name] = this[name] = new Container(comp.opts);
+		var component = this.component[name] = this[name] = new Container(comp.opts).inject(comp.opts.container);
 		
@@ -61,0 +64,0 @@ //_log.debug(component.container);

lib/module/debug.js

@@ -1,6 +0,11 @@
-/*
-material
- - oo ui toolkit
-*/"use strict"
+/**
+ * bind module
+ *
+ * @class module/bind
+ * @author Jerome Vial, Bruno Santos
+ */
+"use strict"
 
+var Logger = require('js-logger/src/logger.min.js');
+
 /*handle browser without console*/
@@ -24,3 +29,3 @@ var console = console || {
 /*define global __debug*/
-window.__debug = function(what) {
+var debug = window.__debug = function(what) {
 
@@ -70,3 +75,3 @@ what = what || 'minimal';
 
-module.exports = null;
+module.exports = debug;
 

package.json

 {
   "name": "material",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "ui toolkit",
-  "main": "index.js",
+  "main": "app.js",
   "scripts": {
@@ -27,4 +27,6 @@ "test": "echo \"Error: no test specified\" && exit 1"
     "prime": "0.5.x",
+    "prime-util": "0.5.x",
     "elements": "0.6.x",
-    "mout": "0.11.x"
+    "mout": "0.11.x",
+    "js-logger": "1.x"
   },
@@ -42,4 +44,5 @@ "devDependencies": {
     "grunt-notify": "^0.4.1",
-    "grunt-plato": "^1.2.1"
+    "grunt-plato": "^1.2.1",
+    "grunt-watchify": "^0.1.0"
   }
 }

tasks/less.js

@@ -9,3 +9,3 @@
 				files: {
-					'public/demo/styles.css': 'lib/skin/base/base.less'
+					'dist/skin/material.css': 'lib/skin/material/material.less'
 				}
@@ -12,0 +12,0 @@ }

tasks/watch.js

 module.exports = function(grunt) {
-	'use strict';
+    'use strict';
 
-	grunt.config.merge({
-		watch: {
-			caoutchouc: {
-				files: ['Source/skin/**/**/*.less'],
-				tasks: ['less:caoutchouc']
-			}
-		}
-	});
+    grunt.config.merge({
+        watch: {
+            caoutchouc: {
+                files: ['Source/skin/**/**/*.less'],
+                tasks: ['less:caoutchouc']
+            },
+	        browserify: {
+	            files: ['lib/**/*.js'],
+	            tasks: ['browserify:dist']
+	        }
+        }
+    });
 
-	grunt.loadNpmTasks('grunt-contrib-watch');
+    grunt.loadNpmTasks('grunt-contrib-watch');
 
-	grunt.registerTask('default', ['watch']);
+    grunt.registerTask('default', ['watch']);
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Number of package files

55

increased by30.95%

Number of low supply chain risk alerts

2

decreased by-50%

Worsened metrics

Total package byte prevSize

164341

decreased by-67.8%

Dependency count

6

increased by50%

Dev dependency count

12

increased by9.09%

Lines of code

4413

decreased by-45.55%

Dependency changes

• + Addedjs-logger@1.x

• + Addedprime-util@0.5.x

• + Addedjs-logger@1.6.1(transitive)

• + Addedmout@0.10.00.9.1(transitive)

• + Addedprime@0.4.2(transitive)

• + Addedprime-util@0.5.0(transitive)