Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

material

Package Overview
Dependencies
Maintainers
2
Versions
72
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

material - npm Package Compare versions

Comparing version 0.0.6 to 0.1.0

index.js
lib/component/attribute.js
lib/component/delegation.js
lib/component/element.js
lib/component/events.js
lib/component/insertion.js
lib/component/storage.js
lib/component/style.js
lib/index.js
lib/module/domready.js
lib/module/dragdrop.js
lib/module/utils.js
lib/skin/util/transition.less
tasks/browserify.js
tasks/concat.js
tasks/demo.js

51

gulpfile.js

@@ -1,51 +0,4 @@

'use strict';
var watchify = require('watchify');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var less = require('gulp-less');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var assign = require('lodash.assign');
// add custom browserify options here
var customOpts = {
entries: ['./src/index.js'],
debug: true
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts));
// add transformations here
// i.e. b.transform(coffeeify);
gulp.task('js', bundle); // so you can run `gulp js` to build the file
b.on('update', bundle); // on any dep update, runs the bundler
b.on('log', gutil.log); // output build logs to terminal
function bundle() {
return b.bundle()
// log errors if they happen
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
.pipe(source('bundle.js'))
// optional, remove if you don't need to buffer file contents
.pipe(buffer())
// optional, remove if you dont want sourcemaps
.pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
// Add transformation tasks to the pipeline here.
.pipe(sourcemaps.write('./')) // writes .map file
.pipe(gulp.dest('./dist'));
}
gulp.task('watch', function () {
gulp.watch('./lib/skin/material/*.less', ['less']);
});
gulp.task('less', function(){
return gulp.src('./lib/skin/material/index.less')
.pipe(less())
.pipe(gulp.dest('./dist/skin/material/material.css'));
});
var requireDir = require('require-dir');
var tasks = requireDir('./tasks');

140

lib/component.js
'use strict';
var Emitter = require('./module/emitter');
var Controller = require('./module/controller');
var Element = require('./element');
var api = require('./component/api');
var bind = require('./module/bind');
let Emitter = require('./module/emitter');
let Controller = require('./module/controller');
var defaults = require('./component/options');
// element related modules
let element = require('./component/element');
let events = require('./component/events');
let style = require('./component/style');
let insertion = require('./component/insertion');
let attribute = require('./component/attribute');
let storage = require('./component/storage');
// options
let defaults = require('./component/options');
/**
* Base Class for all ui components
* @class Material.Component
* Base class for all ui components
* @class
* @namespace Material
* @param {Object} options - The component options
* @return {Instance} this - The class Instance
* @return {Object} The class Instance
*/

@@ -23,3 +29,3 @@ class Component extends Emitter {

* @param {Object} options - Component options
* @return {Object} this - Class instance
* @return {Object} Class instance
*/

@@ -29,3 +35,3 @@ constructor(options){

this.emit('init');
//this.emit('init');

@@ -35,6 +41,2 @@ this.init(options);

if (this.options.bind) {
this.bind(this.options.bind);
}
return this;

@@ -45,14 +47,24 @@ }

* Initialized component
* @return {Object} this - The class instance
* @return {Object} The class instance
*/
init(options) {
this.options = [ defaults, options ].reduce(Object.assign, {});
this.name = this.options.name;
this.name = this.constructor.name.toLowerCase();
//console.log(this.options);
// merge options
// implement object
Object.assign(this, api);
Object.assign(this, bind);
// implement element methods
Object.assign(this,
element,
events,
insertion,
storage,
style,
attribute
);
this.document = window.document;
if (this.options.props) {

@@ -69,7 +81,5 @@ this._initProps(this.options.props);

* Build Method
* @return {Object} this - This class instance
* @return {Object} This class instance
*/
build(props) {
//console.log('build', this.options);
build() {
var opts = this.options;

@@ -79,11 +89,7 @@

var tag = opts.tag || opts.element.tag;
//var name = opts.name || opts.element.name;
var tag = opts.tag || 'div';
this.element = this.createElement(tag);
var element = this.element = new Element(tag, props);
element.store('_instance', this);
this.initAttributes();
this.setState(this.options.state);
this.initClass();

@@ -97,3 +103,3 @@

if (opts.container) {
//console.log(this.name, opts.container);
this.inject(opts.container);

@@ -107,5 +113,20 @@ }

setOptions(options){
console.log(this.options, options);
Object.assign(this.options, [defaults, options].reduce(Object.assign, {}));
}
/**
* Get the name of the component
* @return {string} name - The name of the Class instance
*/
getName() {
return this.options.name || this.name;
}
/**
* Init component class
* @return {Object} this - This Class instance
* @return {Object} This Class instance
*

@@ -118,10 +139,10 @@ */

this.element.addClass(opts.prefix + '-' + this.name);
this.addClass(opts.prefix + '-' + this.name);
if (opts.base) {
this.element.addClass(opts.prefix + '-' + opts.base);
this.addClass(opts.prefix + '-' + opts.base);
}
if (this.options.css) {
this.addClass(this.options.css);
if (this.options.class) {
this.addClass(this.options.class);
}

@@ -137,3 +158,3 @@

if (this.options.primary) {
this.element.addClass('is-primary');
this.addClass('is-primary');
}

@@ -143,24 +164,42 @@ }

/**
* Set atrributes
* @return {Object} this
*/
initAttributes() {
var opts = this.options;
if (!opts.attr) {
return;
}
var attr = opts.attr;
for (var i = 0, len = attr.length; i < len; i++ ) {
var name = attr[i];
var value = opts[name];
if (value){
this.attribute(name, value);
}
}
return this;
}
/**
* [inject description]
* @param {Object} container
* @param {string} position
* @return {Object} this - The Class instance
* @return {Object} The Class instance
*/
inject(container, position) {
this.emit('inject');
this.container = container;
var c = container.element || container;
//this.container = container;
this.insert(c, position);
this.element.inject(c, position);
if (this.setSize) {
this.setSize();
}
//this.size = this.element.getSize();
//ui.controller.element.register(this);
this.isInjected = true;

@@ -171,5 +210,4 @@ this.emit('injected');

}
}
module.exports = Component;

12

lib/component/location.js
'use strict';
/**
* [location description]
* @type {Object}
* Element location related methods
* @module component/location
*/

@@ -11,3 +11,3 @@ module.exports = {

* [_initLocation description]
* @return {instance} The class instance
* @return {Object} The class instance
*/

@@ -50,3 +50,3 @@ _initLocation() {

* [getCenterLocation description]
* @return {instance} The class instance
* @return {Object} The class instance
*/

@@ -69,3 +69,3 @@ getCenterLocation(){

* [getInitialLocation description]
* @return {instance} The class instance
* @return {Object} The class instance
*/

@@ -103,3 +103,3 @@ getInitialLocation(){

* [adaptLocation description]
* @return {instance} The class instance
* @return {Object} The class instance
*/

@@ -106,0 +106,0 @@ adaptLocation(){

15

lib/component/options.js

@@ -0,4 +1,5 @@

'use strict';
/**
* Element options
* Component options
*/

@@ -8,11 +9,9 @@ var options = {

prefix: 'ui',
type: null,
element: {
tag: 'span',
type: null
}
type: null,
tag: 'div',
attr: ['accesskey', 'class', 'contenteditable', 'contextmenu',
'dir', 'draggable', 'dropzone', 'hidden', 'id', 'lang',
'spellcheck', 'style', 'tabindex', 'title', 'translate', 'type']
};
module.exports = options;

10

lib/container.js

@@ -8,6 +8,5 @@ 'use strict';

/**
* The Container class inherits from Component and receive the ability to add inner components
* Class representing a UI Container. Can add components.
*
* @class
* @augments Component
* @extends Component
* @return {parent} The class instance

@@ -22,3 +21,4 @@ * @example new Container({

* Init class
* @return {Object} This class instance
* @params {Object} options The instance options
* @return {Object} This class instance
*/

@@ -80,3 +80,3 @@ init(options){

add(name, position, element) {
//console.log(name, position, element);
position = position || 'bottom';

@@ -83,0 +83,0 @@ element = element || this.element;

62

lib/container/display.js

@@ -9,3 +9,3 @@

* [_initDisplay description]
* @return {instance} The class instance
* @return {Object} The class instance
*/

@@ -36,3 +36,3 @@ _initDisplay() {

* [getDisplay description]
* @return {instance} The class instance
* @return {Object} The class instance
*/

@@ -46,3 +46,3 @@ getDisplay() {

* [getDisplay description]
* @return {instance} The class instance
* @return {Object} The class instance
*/

@@ -58,6 +58,6 @@ setDisplay(display) {

* [toggle description]
* @return {instance} The class instance
* @return {Object} The class instance
*/
toggle() {
console.log('toggle');
if (this._display === 'normalized'){

@@ -74,13 +74,12 @@ this.minimize();

* [minimize description]
* @return {instance} The class instance
* @return {Object} The class instance
*/
minimize() {
console.log('minimize');
if (!this.display) {
this._initDisplay();
}
var transition = {
duration: '.2s',
equation: 'sine-out'
};

@@ -91,10 +90,13 @@

var prop = {
equation: transition.equation,
duration: transition.duration
//stop: () => {},
duration: 200,
easing: 'ease-out'
};
prop[this._modifier] = '0px';
prop[this._modifier] = 0;
this.element.animate(prop);
if (this.animation) this.animation.stop();
this.animation = this.animate(prop);
this._display = 'minimized';

@@ -109,14 +111,9 @@

* [normalize description]
* @return {instance} The class instance
* @return {Object} The class instance
*/
normalize() {
if (!this.display) {
this._initDisplay();
}
var transition = {
duration: '.2s',
equation: 'sine-out'
};

@@ -127,13 +124,18 @@ this.emit('normalize');

var prop = {
equation: transition.equation,
duration: transition.duration
var option = {
//stop: () => {},
duration: 200,
easing: 'ease-out',
complete: () => {
}
};
prop[this._modifier] = size+'px';
var property = {};
property[this._modifier] = size;
this.element.animate(prop);
if (this.animation) this.animation.stop();
this.animation = this.animate(property, option);
this._display = 'normalized';
this.emit('display', this._display);

@@ -146,8 +148,8 @@

* [normalize description]
* @return {instance} The class instance
* @return {Object} The class instance
*/
maximize() {
this.element.style('display', null);
this.element.addClass('state-focus');
this.style('display', null);
this.addClass('state-focus');

@@ -154,0 +156,0 @@ this._display = 'normalized';

16

lib/control.js

@@ -5,9 +5,5 @@ 'use strict';

var defaults = {
const DEFAULTS = {
//disabled: false
error: false,
bind: {
'element.click': 'emit.click',
'element.mouseup': 'emit.mouseup'
}
error: false
};

@@ -29,7 +25,5 @@

var opts = this.options;
this.value = this.options.value;
this.readonly = this.options.read;
this.value = opts.value;
this.readonly = opts.read;
this.disabled = this.options.disabled;

@@ -80,3 +74,3 @@ }

* [getValue description]
* @return {instance} The class instance
* @return {Object} The class instance
*/

@@ -83,0 +77,0 @@ getValue(){

294

lib/control/button.js
'use strict';
var Component = require('../component');
var Element = require('../element');

@@ -10,15 +9,7 @@ var defaults = {

element: {
tag: 'button'
tag: 'span'
},
ink: {
duration: '.5s',
ripple: {
duration: '300',
equation: 'ease-out'
},
bind: {
'sensor.click': 'press',
'sensor.dblclick': '_onDblClick',
'sensor.mousedown': '_onMouseDown',
'sensor.mouseup': '_onMouseUp',
'sensor.mouseleave': '_onMouseLeave',
'sensor.mouseenter': '_onMouseEnter'
}

@@ -32,14 +23,30 @@ };

* @since 0.0.1
* @example
* var button = new Button({
* label: 'Primary raised button',
* type: 'raised',
* primary: true
* }).on('press', function(e) {
* console.log('button press', e);
* }).inject(document.body);
*/
class Button extends Component {
/**
* The init method of the Button class
* @param {Object} options [description]
* @private
* @return {Object} The class instance
*/
init(options) {
super.init(options);
this.name = 'button';
this.options = [ defaults, options ].reduce(Object.assign, {});
this.options = [ defaults, options ].reduce(Object.assign, {});
return this;
}
/**
* [build description]
* Build button's method
* @override
* @return {void}

@@ -60,6 +67,6 @@ */

if (opts.name) {
this.element.attribute('data-name', opts.name);
this.attribute('data-name', opts.name);
}
this.element.attribute('title', opts.text);
this.attribute('title', opts.text);

@@ -72,3 +79,3 @@ if (opts.icon) {

if (opts.ink) {
if (opts.ripple) {
this._initSensor();

@@ -86,18 +93,8 @@ } else {

press(e) {
e.stopPropagation();
var opts = this.options;
e.preventDefault();
if (this.state === 'disabled') {
return;
}
if (this.state === 'disabled') return;
this._initInk(e);
this.emit('press', e);
if (opts.emit) {
this.emit(opts.emit);
}
this.emit('press', opts.emit);
this.emit('pressed', opts.emit);
return this;

@@ -113,10 +110,9 @@ }

var tag = 'span';
var code = name;
var prop = {
'class': 'ui-icon'
'tag': 'span.ui-icon'
};
this.icon = new Element(tag, prop).inject(this.element);
this.icon = new Component(prop).inject(this.element);

@@ -128,7 +124,5 @@ // prepare use of svg

// this.iconsvg.attribute('viewBox', '0 0 24 24');
// this.svguse.attribute('xlink:href','/vendor/icon/content-send.svg');
// this.svguse.attribute('xlripple:href','/vendor/icon/content-send.svg');
if (code) {
this.icon.addClass(code);
}
if (code) this.icon.addClass(code);
}

@@ -151,3 +145,3 @@

var text = options.label || options.text;
this.label = new Element('span.ui-text').inject(this.element, position);
this.label = new Component({tag: 'span.ui-text'}).inject(this.element, position);
this.label.text(text);

@@ -163,35 +157,24 @@ }

this.sensor = new Element('div.ui-sensor')
.inject(this.element);
}
this.sensor = new Component({
tag: 'div.ui-sensor'
}).inject(this.element);
// INK
/**
* [_onElementMouseDown description]
* @param {event} e
* @return {Object}
*/
_initInk(e) {
var element = this.element;
var x = e.offsetX;
var y = e.offsetY;
var ink = this.ink = new Element('span.ui-ink').inject(element, 'top');
this.ink.style({
left: x - 5,
top: y - 5
this.sensor.addEvent('click', (e) => {
this.press(e);
}).addEvent('mousedown', (e) => {
this.addClass('is-active');
this._showRipple(e);
}).addEvent('mouseup', () => {
this.removeClass('is-active');
if (!this.rippleActive)
this._hideRipple();
}).addEvent('mouseleave', (e) => {
this.removeClass('is-active');
this._hideRipple(e);
});
this._touchInk(ink);
this.emit('mousedown');
}
/**
* [_initEffect description]
* @param {string} ink
* _showRipple methosd
* @param {string} ripple
* @param {string} x

@@ -202,133 +185,96 @@ * @param {string} y

*/
_touchInk(ink) {
var coord = this._inkCoord(ink);
var options = this.options.ink;
this.ink = ink;
this.animate({
width: coord.size+'px',
height: coord.size+'px',
left: '0',
top: coord.top +'px',
opacity: '0'
}, options.duration, options.equation);
var wait = options.duration.replace('s','')*1000;
setTimeout(function() {
ink.destroy();
}, wait);
}
/**
* [_inkCoord description]
* @return {Object} Size and top
*/
_inkCoord() {
var height = this.element.compute('height').replace('px', '');
var width = this.element.compute('width').replace('px', '');
width = parseInt(width);
height = parseInt(height);
var size = width;
var top = 0;
if (width > height) {
size = width;
top = (height - width) / 2;
} else if (width < height) {
size = height;
top = (width - height) / 2;
_showRipple(e) {
if (!this.size) {
this.size = this.offset();
}
return {
size: size,
top: top
if (!this.ripple) {
this.ripple = new Component({
tag:'span.ui-ripple'
}).inject(this, 'top');
}
}
/**
* [animate description]
* @param {Object} object [description]
* @param {interger} duration [description]
* @param {string} equation [description]
*/
animate(object, duration, equation) {
var rippleCoord = this._rippleCoord(this.size);
var options = this.options.ripple;
for (var key in object) {
if (object.hasOwnProperty(key)) {
var prop = {};
prop[key] = object[key];
var startLeft = (e.offsetX || this.size.width / 2) - 5;
var startTop = (e.offsetY || this.size.height / 2) - 5;
this.ink.animate(
prop,
{duration: duration},
{equation: equation}
);
}
}
}
this.ripple.style({
left: startLeft + 'px',
top: startTop + 'px',
width: '5px',
height: '5px',
opacity: 1
});
// EVENTS
this.rippleActive = true;
/**
* [_onElementMouseDown description]
* @param {event} e
* @return {void}
*/
_onDblClick(e) {
var opts = this.options;
// stop animation if exists
if (this.animation) { this.animation.stop(); }
e.stopPropagation();
this.emit('dblpressed', opts.emit);
return this;
this.animation = this.ripple.animate({
width: rippleCoord.size,
height: rippleCoord.size,
left: rippleCoord.left,
top: rippleCoord.top,
opacity: 0.2,
duration: options.duration,
easing: options.equation,
complete: () => {
this.rippleActive = false;
if (!this.hasClass('is-active'))
this._hideRipple();
}
});
}
/**
* [_onElementMouseUp description]
* @return {void}
* [_hideRipple description]
*/
_onMouseDown(e) {
_hideRipple() {
var options = this.options.ripple;
return this;
}
if (!this.ripple) return;
/**
* [_onElementMouseUp description]
* @return {void}
*/
_onMouseUp(e) {
this.animation.stop();
return this;
this.animation = this.ripple.animate({
opacity: 0,
duration: '300',
easing: options.equation,
complete: () => {
if (this.ripple) {
this.ripple.destroy();
this.ripple = null;
}
}
});
}
/**
* [_onElementMouseUp description]
* @return {void}
* [_rippleCoord description]
* @return {Object} Size and top
*/
_onMouseLeave(e) {
_rippleCoord(offset) {
var size = offset.width;
var top = -offset.height / 2;
//console.log('mouseleave', e);
if (offset.width > offset.height) {
size = offset.width;
top = -(offset.width - offset.height / 2);
} else if (offset.width < offset.height) {
size = offset.height;
top = (offset.width - offset.height) / 2;
}
return this;
return {
size: size * 2,
top: top,
left: size / -2
};
}
}
/**
* [_onElementMouseDown description]
* @param {event} e
* @return {void}
*/
_onMouseEnter(e) {
this.emit('mouseenter', this.options.emit);
return this;
}
};
module.exports = Button;

225

lib/control/field.js
'use strict';
var Control = require('../control');
var Element = require('../element');
var Component = require('../component');
var bind = require("../module/bind");
var toInt = require("mout/number/toInt");
var defaults = {
name: 'field',
base: 'control',
tag: 'div',
type: 'input',
type: 'text',
value: null,
error: true,
bind: {
//'input.click': '_onFocus',
'input.keyup': '_onKeyUp',
'input.keydown': '_onKeyDown',
'input.mousedown': '_onMouseDown',
'input.focus': '_onFocus',
'input.blur': '_onBlur'
}
error: true
};

@@ -36,3 +23,3 @@

* @param {Object} options The class options
* @return {instance} The class instance
* @return {Object} The class instance
*/

@@ -42,5 +29,6 @@ init(options) {

this.options = [ defaults, options ].reduce(Object.assign, {});
//this.setOptions();
this.name = this.options.name;
//this.options = [ defaults, options ].reduce(Object.assign, {});
Object.assign(this.options, [defaults, options].reduce(Object.assign, {}));

@@ -52,3 +40,3 @@ return this;

* [build description]
* @return {instance} The class instance
* @return {Object} The class instance
*/

@@ -61,10 +49,10 @@ build(){

this.element.addClass('ui-field');
this.addClass('ui-field');
if (this.disabled) {
this.element.addClass('is-disabled');
this.addClass('is-disabled');
}
if (opts.klss) {
this.element.addClass(opts.klss);
this.addClass(opts.klss);
}

@@ -85,3 +73,3 @@

* [_initLabel description]
* @return {instance} The class instance
* @return {Object} The class instance
*/

@@ -97,6 +85,6 @@ _initLabel() {

} else {
text || this.options.name;
text = this.options.name;
}
this.label = new Element('label', {
this.label = new Component({
tag: 'label',

@@ -111,11 +99,15 @@ 'for': this.options.name

* [_initInput description]
* @return {instance} The class instance
* @return {Object} The class instance
*/
_initInput() {
this.input = new Element('input', {
name: this.options.name,
type: 'text',
this.input = new Component({
tag: 'input',
type: this.options.type,
value: this.options.value,
placeholder: this.options.text
}).addEvent('focus', (e) => {
this._onFocus(e);
}).addEvent('blur', (e) => {
this._onBlur(e);
}).inject(this.element);

@@ -145,3 +137,3 @@

* [_initValue description]
* @return {instance} The class instance
* @return {Object} The class instance
*/

@@ -158,45 +150,9 @@ _initValue(){

/**
* [_onKeyUp description]
* @return {instance} The class instance
*/
_onKeyUp(e) {
this.emit('change', this.get('value'));
}
/**
* [_onKeyUp description]
* @return {instance} The class instance
*/
_onKeyDown(e) {
if (this.readonly) {
e.stop();
return;
}
this.fireEvent('change', this.get('value'));
}
/**
* [_onMouseDown description]
* @return {instance} The class instance
*/
_onMouseDown(e) {
if (this.readonly) return;
this.isFocused = true;
this.setState('focus');
this._inputFocus(e);
//e.stopPropagation();
//this.focus();
//this._inputFocus(e);
}
/**
* [_onFocus description]
* @return {instance} The class instance
* @return {Object} The class instance
*/
_onFocus(e) {
console.log('onFocus');
this.emit('mousedown');
this.setState('focus');
this._showInk(e);

@@ -208,6 +164,6 @@ this.isFocused = true;

* [_onBlur description]
* @return {instance} The class instance
* @return {Object} The class instance
*/
_onBlur() {
console.log('onBlur');
if (this.readonly) return;

@@ -221,21 +177,8 @@

/**
* [_inputFocus description]
* @param {event} e [description]
* @return {instance} The class instance
*/
_inputFocus(e) {
this.emit('mousedown');
this._showInk(e);
this.isFocused = true;
}
/**
* [_initInk description]
* @return {instance} The class instance
* @return {Object} The class instance
*/
_initInk() {
this.ink = new Element('span', {
class: 'field-ink'
this.ink = new Component({
tag: 'span.field-ink'
}).inject(this.element);

@@ -247,17 +190,21 @@ }

* @param {Event} e Event
* @return {instance} The class instance
* @return {Object} The class instance
*/
_showInk(e) {
console.log('_showInk', this.ink, e);
if (this.readonly) return;
if (this.ink) return;
var duration = '.2s';
if (this.readonly || this.ink) return;
if (!this.ink) {
this._initInk();
}
var duration = 200;
var input = this.input;
var label = this.label;
var width = input.compute('width').replace('px', '');
var inputHeight = toInt(input.compute('height').replace('px', ''));
var labelHeight = toInt(label.compute('height').replace('px', ''));
var left = input.compute('left').replace('px', '');
var width = input.offset('width');
var inputHeight = input.offset('height');
var labelHeight = label.offset('height');

@@ -272,77 +219,13 @@ var x = width / 2;

var size = width;
var top = inputHeight + labelHeight +8 -2;
if (!this.ink) {
this._initInk();
}
console.log('top', top);
this.ink.style('left', x);
this.ink.animate({'width': size}, {duration: duration}, {equation: 'ease-out'});
this.ink.animate({'top': top }, {duration: duration}, {equation: 'ease-out'});
this.ink.animate({'bottom': 'initial'}, {duration: duration, equation: 'ease-out'});
this.ink.animate({'left': '0'}, {duration: duration}, {equation: 'ease-out'});
this.ink.animate({'opacity': '1'}, {duration: duration, equation: 'ease-out'});
}
/**
* [_initEffect description]
* @param {Event} e Event
* @return {instance} The class instance
*/
_setInk(e) {
if (this.readonly) return;
//if (this.ink) return;
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;
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
left: x+'px',
top: inputHeight + labelHeight + 'px'
});
this.ink.addClass('display');
}
/**
* [_initEffect description]
* @return {instance} The class instance
*/
_hideInk() {
var self = this;
var input = this.input;
var duration = '.2s';
var width = input.compute('width').replace('px', '');
var size = width / 2;
this.ink.animate({'width': '0px'}, {duration: duration}, {equation: 'ease-out'});
this.ink.animate({'left': size}, {duration: duration}, {equation: 'ease-out'});
this.ink.animate({'opacity': '0'}, {duration: duration, equation: 'ease-out'});
setTimeout( function() {
if (self.ink) {
self.ink.destroy();
self.ink = null;
}
}, 100);
this.ink.destroy();
console.log('destroy', this.ink);
}

@@ -352,7 +235,7 @@

* [_initError description]
* @return {instance} The class instance
* @return {Object} The class instance
*/
error() {
this.error = new Element('span', {
class: 'error-message'
this.error = new Component({
tag: 'span.error-message'
}).inject(this.element);

@@ -367,3 +250,3 @@ }

if (error) {
this.element.addClass('field-error');
this.addClass('field-error');
if (this.error)

@@ -373,3 +256,3 @@ this.error.set('html', error);

if (this.error)
this.element.removeClass('field-error');
this.removeClass('field-error');
if (this.error)

@@ -376,0 +259,0 @@ this.error.set('html', '');

26

lib/control/search.js
'use strict';
var Field = require('./field');
var Emitter = require("../module/emitter");
var bind = require('../module/bind');

@@ -13,6 +11,3 @@ var Button = require('./button');

label: false,
timer: 100,
bind: {
}
timer: 100
};

@@ -28,3 +23,3 @@

* @param {Object} options The class options
* @return {instance} The class instance
* @return {Object} The class instance
*/

@@ -47,5 +42,2 @@ constructor(options){

// merge options
// implement object
Object.assign(this, bind);
}

@@ -65,3 +57,3 @@

this.element.addClass('ui-search');
this.addClass('ui-search');

@@ -73,3 +65,3 @@ this._initReset();

* [_initInput description]
* @return {instance} This class instance
* @return This class instance
*/

@@ -84,3 +76,3 @@ _initInput() {

* [_initReset description]
* @return {instance} This class instance
* @return This class instance
*/

@@ -100,3 +92,3 @@ _initReset() {

* [_initEvents description]
* @return {instance} This class instance
* @return This class instance
*/

@@ -112,3 +104,3 @@ _initEvents() {

* [trigger description]
* @return {instance} This class instance
* @return This class instance
*/

@@ -128,3 +120,3 @@ trigger() {

* [focus description]
* @return {instance} This class instance
* @return This class instance
*/

@@ -140,3 +132,3 @@ focus() {

* [empty description]
* @return {instance} This class instance
* @return This class instance
*/

@@ -143,0 +135,0 @@ empty() {

102

lib/control/switch.js
'use strict';
var Control = require('../control');
let Control = require('../control');
let Component = require('../component');
var Element = require('../element');
var bind = require('../module/bind');
var defaults = {
let defaults = {
name: 'switch',

@@ -21,8 +19,4 @@ base: 'field',

animation: {
duration: ".1s",
equation: 'ease-in'
},
bind: {
'control.click': 'toggle',
//'label.click': 'toggle'
duration: '200',
easing: 'ease-out'
}

@@ -35,3 +29,2 @@ };

* @extends Control
*
*/

@@ -42,4 +35,4 @@ class Switch extends Control {

* Constructor
* @param {Object} options [description]
* @return {Object} [description]
* @param {Object} options The class options
* @return {Object} This class instance
*/

@@ -49,3 +42,3 @@ init(options){

this.options = [ defaults, options ].reduce(Object.assign, {});
this.name = this.options.name;

@@ -58,4 +51,4 @@ this.value = this.options.value;

/**
* [build description]
* @return {instance} The class intance
* build method
* @return {Object} The class instance
*/

@@ -65,13 +58,19 @@ build(){

var text = this.options.label || this.options.text;
let text = this.options.label || this.options.text;
this.wrapper = new Element('div.switch-wrapper').inject(this.element);
this.control = new Element('span.switch-control').inject(this.wrapper);
this.knob = new Element('span.switch-knob').inject(this.control);
this.wrapper = new Component({tag: 'div.switch-wrapper'}).inject(this.element);
this.control = new Component({
tag:'span.switch-control'
}).addEvent('click', (e) => {
this.toggle(e);
}).inject(this.wrapper);
this.knob = new Component({tag:'span.switch-knob'}).inject(this.control);
if (this.options.label !== null) {
this.label = new Element('span.switch-label').inject(this.wrapper);
this.label = new Component({tag:'span.switch-label'}).inject(this.wrapper);
this.label.text(text);
}
if (this.value) {

@@ -86,2 +85,3 @@ this.setTrue();

* @param {string} value
* @return {Object} The class instance
*/

@@ -115,3 +115,3 @@ set(prop, value){

* [toggle description]
* @return {instance} The class intance
* @return {Object} The class instance
*/

@@ -134,11 +134,15 @@ toggle(){

setTrue(animation){
let options = this.options.animation;
let method = 'animate';
if (!animation) method = 'style';
this.value = true;
if (animation) {
this.animate('14px', 'rgba(0,150,136,1)', 'rgba(0,150,136,.5)');
} else {
this.knob.style('left', '14px');
this.knob.style('background-color', 'rgba(0,150,136,1)');
this.control.style('background-color', 'rgba(0,150,136,.5)');
}
this.knob[method]({
'left': '14px',
'background-color': 'rgba(0,150,136,1)',
}, options);
this.control[method]({
'background-color': 'rgba(0,150,136,.5)'
}, options);

@@ -148,34 +152,22 @@ this.emit('change', this.value);

/**
* [setFalse description]
*/
setFalse(animation){
let options = this.options.animation;
let method = 'animate';
if (!animation) method = 'style';
this.value = false;
if (animation) {
this.animate('-2px', 'rgba(241,241,241,1)', 'rgba(34,31,31,.26)');
} else {
this.knob.style('left', '-2px');
this.knob.style('background-color', 'rgba(34,31,31,1)');
this.control.style('background-color', 'rgba(34,31,31,.26)');
}
this.knob.animate({
'left': '-2px',
'background-color': 'rgba(241,241,241,1)'
}, options);
this.control.animate({
'background-color': 'rgba(34,31,31,.26)'
}, options);
this.emit('change', this.value);
}
/**
* [animate description]
* @return {instance} The class intance
*/
animate(left, knob, track){
var options = this.options.animation;
this.knob.animate({'left': left}, options);
this.knob.animate({'background-color': knob}, options);
this.control.animate({'background-color': track}, options);
return this;
}
}
module.exports = Switch;

46

lib/form.js
'use strict';
var View = require('./view');
var defaults = require('./container/options');
let View = require('./view');
let defaults = require('./container/options');
var Emitter = require('./module/emitter');
var bind = require('./module/bind');
let Component = require('./component');
let Field = require('./control/field');
var Component = require('./component');
var Element = require('./element');
var Field = require('./control/field');
let fieldset = require('./form/fieldset');
var pascalCase = require('mout/string/pascalCase');
var fieldset = require('./form/fieldset');
/**

@@ -33,3 +27,3 @@ * Form class

this.template = options.template;
this.name = 'form';

@@ -60,3 +54,4 @@

this.form = new Element('form', {
this.form = new Component({
tag: 'form'
//method: 'post'

@@ -217,4 +212,5 @@ }).inject(this.c.body.element);

var group = new Element('div', {
'class': 'group'
var group = new Component({
tag: 'div',
class: 'group'
}).inject(element);

@@ -240,7 +236,7 @@

type = type || 'input';
type = type || 'Input';
if (typeof type === 'string') {
method = pascalCase(type);
}
// if (typeof type === 'string') {
// method = pascalCase(type);
// }

@@ -262,4 +258,2 @@ if (this['_init' + method]) {

_initInput(key, info, group) {
var self = this;
key = key || {};

@@ -309,3 +303,3 @@ key.name = key.name || '';

input.input.on('keyup', function(ev) {
input.input.on('keyup', function() {
//self._onInputKeyUp(input, ev);

@@ -430,3 +424,3 @@ });

*/
addIndo(type) {
addIndo() {

@@ -516,5 +510,5 @@ this._setInfo({

if (this.container) {
this.container.emit('resize');
}
// if (this.container) {
// this.container.emit('resize');
// }
}

@@ -521,0 +515,0 @@

16

lib/form/controls.js

@@ -6,12 +6,10 @@

let UI = {};
let UI.ButtonControl = require('../control/button');
let UI.ChoiceControl = require('../control/choice');
let UI.StepsControl = require('../control/steps');
let UI.DropdownControl = require('../control/dropdown');
let UI.MultiControl = require('../control/multi');
let UI.SelectControl = require('../control/select');
let UI.CheckControl = require('../control/check');
UI.ButtonControl = require('../control/button');
UI.ChoiceControl = require('../control/choice');
UI.StepsControl = require('../control/steps');
UI.DropdownControl = require('../control/dropdown');
UI.MultiControl = require('../control/multi');
UI.SelectControl = require('../control/select');
UI.CheckControl = require('../control/check');
let Material = require('../material');
module.exports = {

@@ -18,0 +16,0 @@

24

lib/form/fieldset.js
'use strict';
var Element = require('../element');
var Component = require('../component');

@@ -18,3 +18,3 @@ /**

var element = new Element('div', {
var component = new Component({
'class': 'form-fieldset',

@@ -24,15 +24,15 @@ }).inject(form);

if (fieldset.name)
element.addClass('fieldset-'+ fieldset.name);
component.addClass('fieldset-'+ fieldset.name);
if (fieldset.klss)
element.addClass(fieldset.klss);
component.addClass(fieldset.klss);
if (fieldset.state === 'closed')
element.addClass('closed');
component.addClass('closed');
if (fieldset.text) {
legend = new Element('span', {
legend = new Component({
'class': 'fieldset-legend',
}).inject(element);
}).inject(component);

@@ -42,3 +42,3 @@ legend.text(fieldset.text);

var caret = new Element('span', {
var caret = new Component({
'class': 'icon-font mdi_navigation_chevron_right'

@@ -52,4 +52,4 @@ }).inject(legend, 'top');

if (legend)
element.store('legend', legend);
// if (legend)
// element.store('legend', legend);

@@ -66,5 +66,5 @@ // if (typeOf(fieldset.menu) == 'object') {

if (fieldset.field) {
this._initObjectField(fieldset.field, element);
this._initObjectField(fieldset.field, component);
} else if (fieldset.fields) {
this._initFields(fieldset.fields, element);
this._initFields(fieldset.fields, component);
}

@@ -71,0 +71,0 @@ }

6

lib/form/options.js

@@ -10,7 +10,3 @@

prefix: 'ui',
tag: 'div',
bind: {
'change': '_viewDidChange',
'submit': ['_onSubmit']
}
tag: 'div'
};

4

lib/item.js

@@ -22,3 +22,3 @@ 'use strict';

* @extends {Component}
* @return {instance} The class instance
* @return {Object} The class instance
* @example new Item(object);

@@ -106,3 +106,3 @@ */

this.element.addClass('ui-container');
this.addClass('ui-container');

@@ -109,0 +109,0 @@ return this;

15

lib/layout.js

@@ -26,6 +26,11 @@ 'use strict';

this.options = [ defaults, options ].reduce(Object.assign, {});
this.window = window;
Object.assign(this, container);
Object.assign(this, resizer);
Object.assign(this, container, resizer);
window.addEventListener('resize', () => {
console.log('---');
this.emit('resize');
});
return this;

@@ -104,3 +109,3 @@ }

component.element.addClass('container-'+name);
component.addClass('container-'+name);

@@ -119,2 +124,6 @@ if (comp.node) {

_resize(){
console.log('resize');
}
/**

@@ -121,0 +130,0 @@ * [_initFlexDirection description]

20

lib/layout/container.js
'use strict';
var Emmitter = require('../module/emitter');
var Container = require('../container');

@@ -54,8 +55,8 @@

*/
_initComponentSettings(component) {
// _initComponentSettings(component) {
//
// var name = component.getName();
// var element = component.element;
// },
//var name = component.getName();
//var element = component.element;
},
/**

@@ -76,3 +77,3 @@ * [_initComponentSettings description]

if (component.options.theme) {
component.element.addClass('theme' + '-' + component.options.theme);
component.addClass('theme' + '-' + component.options.theme);
}

@@ -88,5 +89,3 @@ },

var name = component.getName();
var element = component.element;
// var name = component.getName();
// if (this.settings[name] && this.settings[name].display) {

@@ -148,2 +147,5 @@ // display = this.settings[name].display;

/**
* toggled
*/
component.on('toggled', () => {

@@ -150,0 +152,0 @@ this.emit('resize');

120

lib/layout/resizer.js
'use strict';
var Element = require("../element");
var toInt = require("mout/number/toInt");
//var DragDrop = require("../../dist/vendor/DrqgDrop/drag-drop.js");
var Component = require("../component");
//var DragDrop = require("../module/dragdrop");

@@ -16,3 +15,5 @@ var resize = {

var container = component.container || component.options.container.element;
console.log(component.container);
var container = component.container || component.options.container;
var direction = this._initResizerDirection(container);

@@ -25,4 +26,5 @@ var modifier = this.options.resizer.modifier[direction];

var resizer = this.resizer[name] = new Element('div.ui-resizer')
.inject(container);
var resizer = this.resizer[name] = new Component({
tag: 'div.ui-resizer'
}).inject(container);

@@ -35,6 +37,12 @@ resizer.attribute('data-name', name);

this._initResizerDrag(resizer, modifier, component);
//this._initResizerDrag(resizer, modifier, component);
this._initResizerEvent(component, resizer, modifier);
},
/**
* _initResizerDirection - description
*
* @param {type} container description
* @return {type} description
*/
_initResizerDirection(container){

@@ -44,5 +52,5 @@ var direction;

if (container.hasClass('flex-column')) {
direction = 'column'
direction = 'column';
} else if (container.hasClass('flex-raw')) {
direction = 'row'
direction = 'row';
}

@@ -57,57 +65,50 @@

_initResizerDrag(resizer, modifier, component) {
var self = this;
var element = component.element;
var from = modifier.from;
var size = modifier.size;
// the last statement is temporary before i fix the component correctly
var container = component.container || component.options.container.element;
var container = component.container;
var last = component.options.last;
var draggable = DragDrop.bind(resizer.dom[0], {
var draggable = DragDrop.bind(resizer.element, {
//anchor: anotherElement,
boundingBox: 'offsetParent',
dragstart: function() {
self.emit('resizeStart', component);
//self.mask.setStyle('display', 'block');
dragstart: (ev) => {
console.log('dragstart', ev);
//this.emit('resizeStart', component);
//self.mask.style('display', 'block');
},
drag: (evt) => {
//self.mask.setStyle('display', 'block');
dragend: (ev) => {
console.log('dragend');
//this.emit('resizeEnd', ev);
},
drag: (ev) => {
//self.mask.style('display', 'block');
let coord = {};
let coordc = {};
let c = {};
coord[modifier.from] = toInt(element.compute(modifier.from).replace('px', ''));
coord[modifier.size] = toInt(element.compute(modifier.size).replace('px', ''));
coord[from] = component.offset(from);
c[modifier.from] = toInt(resizer.compute(modifier.from).replace('px', ''));
c[modifier.size] = toInt(resizer.compute(modifier.size).replace('px', ''));
c[from] = resizer.offset(from);
coordc[modifier.from] = toInt(container.compute(modifier.from).replace('px', ''));
coordc[modifier.size] = toInt(container.compute(modifier.size).replace('px', ''));
if (last){
console.log('drag', modifier.size, coordc[modifier.size] - c[modifier.from]);
element.style(modifier.size, coordc[modifier.size] - c[modifier.from]);
var csize = container.getSize()[size];
var style = {}; style[size] = csize - c[from]+'px';
component.style(style);
}
else {
element.style(modifier.size, c[modifier.from] - coord[modifier.from]);
var style = {}; style[size] = c[from] - coord[from]+'px';
component.style(style);
}
self.emit('drag');
},
dragend: (evt) => {
//self.mask.setStyle('display', 'none');
var coord = {};
// coord[modifier.from] = toInt(element.compute(modifier.from).replace('px', ''));
// coord[modifier.size] = toInt(element.compute(modifier.size).replace('px', ''));
// var size = element.style(container)[modifier.size];
// self.emit('resizer', [component.main, modifier.size, size]);
// component.emit('resizeComplete', [modifier.size, size]);
// component[modifier.size] = size;
this.emit('resizeEnd', evt);
}
//this._updateSize(component, resizer, modifier);
this.emit('drag', ev);
}
});

@@ -129,6 +130,7 @@

resizer.on('mouseup', (e) => { e.stopPropagation(); });
this.on('drag', () => { this._updateSize(component, resizer, modifier); });
this.on('maximize', () => { this._updateSize(component, resizer, modifier); });
this.on('normalize', () => { self._updateSize(component, resizer, modifier); });
this.on('resize', function() { self._updateSize(component, resizer, modifier); });
this.on('normalize', () => { this._updateSize(component, resizer, modifier); });
this.on('resize', () => { this._updateSize(component, resizer, modifier); });
},

@@ -138,11 +140,15 @@

* _updateSize
* @param {component} component [description]
* @param {element} resizer [description]
* @param {string} modifier [description]
*/
_updateSize(component, resizer, modifier) {
// the last statement is temporary before i fix the component correctly
var container = component.container || component.options.container.element;
var element = component.element;
//console.log('_updateSize', component.container);
var container = component.container;
var from = modifier.from;
var size = modifier.size;
var coord = {};
coord[modifier.from] = toInt(element.compute(modifier.from).replace('px', ''));
coord[modifier.size] = toInt(element.compute(modifier.size).replace('px', ''));
coord[from] = component.offset(from);
coord[size] = component.offset(size);

@@ -152,7 +158,11 @@ // for the last component

if (component.options.last) {
console.log('_updateSize last', element.compute(modifier.from), coord[modifier.from]);
resizer.style(modifier.from, coord[modifier.from] +3);
var csize = container.offset(size);
//console.log();
var style = {}; style[from] = csize - coord[size] - 3 +'px';
resizer.style(style);
} else {
//console.log('_updateSize', modifier.from, coord[modifier.from] + coord[modifier.size] -3);
resizer.style(modifier.from, coord[modifier.from] + coord[modifier.size] -3);
//console.log(from, coord[from] + coord[size] -3);
var style = {}; style[from] = coord[from] + coord[size] -3 +'px';
resizer.style(style);
//console.log(resizer);
}

@@ -159,0 +169,0 @@

32

lib/list.js

@@ -5,6 +5,3 @@ 'use strict';

var Emitter = require("./module/emitter");
var bind = require('./module/bind');
var Element = require('./element');
//var Surface = require('./view/surface');

@@ -32,3 +29,3 @@ //var Collection = require('./view/collection');

* [_initView description]
* @return {instance} Class instance
* @return Class instance
*/

@@ -45,4 +42,2 @@ init(options) {

this.items = [];

@@ -60,3 +55,3 @@

* @param {Object} options this class options
* @return {instance} The class instance
* @return {Object} The class instance
*/

@@ -70,4 +65,4 @@ build(options) {

//this.element.addClass('type-'+this.tmpl._type);
this.element.addClass('view-'+this.options.name);
//this.addClass('type-'+this.tmpl._type);
this.addClass('view-'+this.options.name);

@@ -80,6 +75,6 @@ //this.content = this.c.body;

this.c.body.delegate('click', '.ui-button', function(event, item){
//console.log(event, item);
self.select(item, event);
});
// this.c.body.delegate('click', '.ui-button', function(event, item){
// //console.log(event, item);
// self.select(item, event);
// });

@@ -94,3 +89,3 @@ //this.container.emit('resize');

* @param {event} event The caller event
* @return {instance} [description]
* @return [description]
*/

@@ -103,3 +98,3 @@ select(item, event) {

}
/**

@@ -111,3 +106,2 @@ * Setter

set(prop, value, options) {
switch(prop) {

@@ -127,3 +121,3 @@ case 'list':

* @param {Array} list List of info object
* @return {instance} The class instance
* @return {Object} The class instance
*/

@@ -135,3 +129,3 @@ setList(list) {

item.element.store('info', list[i]);
item.store('info', list[i]);

@@ -149,3 +143,3 @@ this.addItem(item, i);

* @param {integer} y [description]
* @return {instance} The class instance
* @return {Object} The class instance
*/

@@ -152,0 +146,0 @@ insert(info, x, y) {

5

lib/list/options.js

@@ -9,6 +9,3 @@

prefix: 'ui',
comp:['body'],
bind: {
'add': 'new'
}
comp:['body']
};

2

lib/list/search.js

@@ -33,3 +33,3 @@ 'use strict';

* @param {string} query The value of the query
* @return {instance} The class instance
* @return {Object} The class instance
*/

@@ -36,0 +36,0 @@ find(query) {

10

lib/module/bind.js

@@ -6,2 +6,10 @@ 'use strict';

* @module module/bind
* @example
* ```
* var bind = {
* 'button.click': 'press'
* }
*
* this.bind(bind);
* ```
*/

@@ -113,2 +121,4 @@ module.exports = {

listener.on(ev, bound.emit.bind(bound, emit));
} else {
//console.log('--', listener, bound.emit);
}

@@ -115,0 +125,0 @@ },

6

lib/module/controller.js

@@ -28,3 +28,3 @@ 'use strict';

* @param {component} component [description]
* @return {instance} The class instance
* @return {Object} The class instance
*/

@@ -44,3 +44,3 @@ register(component) {

* @param {component} component [description]
* @return {instance} The class instance
* @return {Object} The class instance
*/

@@ -66,3 +66,3 @@ focus(component) {

* @param {component} component [description]
* @return {instance} The class instance
* @return {Object} The class instance
*/

@@ -69,0 +69,0 @@ blur(component) {

132

lib/module/defer.js
'use strict';
var kindOf = require("mout/lang/kindOf"),
now = require("mout/time/now"),
forEach = require("mout/array/forEach"),
indexOf = require("mout/array/indexOf")
/**
* Module defer
* @module module/defer
*/
// function kindOf from mout
var _rKind = /^\[object (.*)\]$/;
var _toString = Object.prototype.toString;
var UNDEF;
/**
* Gets the "kind" of value. (e.g. "String", "Number", etc)
*/
function kindOf(val) {
if (val === null) {
return 'Null';
} else if (val === UNDEF) {
return 'Undefined';
} else {
return _rKind.exec( _toString.call(val) )[1];
}
}
var callbacks = {

@@ -12,3 +32,3 @@ timeout: {},

immediate: []
}
};

@@ -20,10 +40,9 @@ /**

*/
var push = function(collection, callback, context, defer){
var iterator = function(){
iterate(collection)
}
iterate(collection);
};
if (!collection.length) defer(iterator)
if (!collection.length) defer(iterator);

@@ -33,29 +52,37 @@ var entry = {

context: context
}
};
collection.push(entry)
collection.push(entry);
return function(){
var io = indexOf(collection, entry)
if (io > -1) collection.splice(io, 1)
}
}
var io = collection.indexOf(entry);
if (io > -1) collection.splice(io, 1);
};
};
/**
* [iterate description]
* @return {void} [description]
*/
var iterate = function(collection){
var time = now()
var time = Date.now();
forEach(collection.splice(0), function(entry) {
entry.callback.call(entry.context, time)
})
}
//console.log('!!', collection);
collection.splice(0).forEach(function(entry) {
entry.callback.call(entry.context, time);
});
};
var defer = function(callback, argument, context){
return (kindOf(argument) === "Number") ? defer.timeout(callback, argument, context) : defer.immediate(callback, argument)
}
};
if (global.process && process.nextTick){
defer.immediate = function(callback, context){
return push(callbacks.immediate, callback, context, process.nextTick)
}
return push(callbacks.immediate, callback, context, process.nextTick);
};

@@ -65,4 +92,4 @@ } else if (global.setImmediate){

defer.immediate = function(callback, context){
return push(callbacks.immediate, callback, context, setImmediate)
}
return push(callbacks.immediate, callback, context, setImmediate);
};

@@ -73,12 +100,12 @@ } else if (global.postMessage && global.addEventListener){

if (event.source === global && event.data === "@deferred"){
event.stopPropagation()
iterate(callbacks.immediate)
event.stopPropagation();
iterate(callbacks.immediate);
}
}, true)
}, true);
defer.immediate = function(callback, context){
return push(callbacks.immediate, callback, context, function(){
postMessage("@deferred", "*")
})
}
postMessage("@deferred", "*");
});
};

@@ -89,6 +116,5 @@ } else {

return push(callbacks.immediate, callback, context, function(iterator){
setTimeout(iterator, 0)
})
}
setTimeout(iterator, 0);
});
};
}

@@ -102,24 +128,34 @@

function(callback) {
setTimeout(callback, 1e3 / 60)
}
setTimeout(callback, 1e3 / 60);
};
/**
* [frame description]
* @param {Function} callback [description]
* @return {Array} [description]
*/
defer.frame = function(callback, context){
return push(callbacks.frame, callback, context, requestAnimationFrame)
}
return push(callbacks.frame, callback, context, requestAnimationFrame);
};
var clear
var clear;
/**
* [timeout description]
* @param {Function} callback [description]
* @return {Array} [description]
*/
defer.timeout = function(callback, ms, context){
var ct = callbacks.timeout
var ct = callbacks.timeout;
if (!clear) clear = defer.immediate(function(){
clear = null
callbacks.timeout = {}
})
clear = null;
callbacks.timeout = {};
});
return push(ct[ms] || (ct[ms] = []), callback, context, function(iterator){
setTimeout(iterator, ms)
})
}
setTimeout(iterator, ms);
});
};
module.exports = defer
module.exports = defer;

119

lib/module/emitter.js
'use strict';
let indexOf = require("mout/array/indexOf");
let forEach = require("mout/array/forEach");
let defer = require("./defer");

@@ -11,66 +8,90 @@

/**
* Emitter is a module for managing and emitting events.
* @class Emitter
* Emitter abstract class for managing and emitting events.
* @class
* @author Valerio Proietti
* @link https://github.com/kamicane/prime/blob/master/emitter.js
* @see https://github.com/kamicane/prime/blob/master/emitter.js
*/
class Emitter {
constructor(stoppable){
this._stoppable = stoppable;
constructor(stoppable){
//if (new.target === Emitter) throw TypeError("new of abstract class Emitter");
return this;
}
this._stoppable = stoppable;
on(event, fn){
let listeners = this._listeners || (this._listeners = {});
let events = listeners[event] || (listeners[event] = []);
return this;
}
if (indexOf(events, fn) === -1) events.push(fn);
/**
* [on description]
* @param {string} event [description]
* @param {Function} fn [description]
* @return {Object} Thia class instance
*/
on(event, fn){
let listeners = this._listeners || (this._listeners = {});
let events = listeners[event] || (listeners[event] = []);
return this;
}
if (events.indexOf(fn) === -1) events.push(fn);
off(event, fn){
let listeners = this._listeners, events;
return this;
}
if (listeners && (events = listeners[event])){
/**
* [off description]
* @param {string} event [description]
* @param {Function} fn [description]
* @return {} [description]
*/
off(event, fn){
let listeners = this._listeners, events;
let io = indexOf(events, fn);
if (io > -1) events.splice(io, 1);
if (!events.length) delete listeners[event];
for (let l in listeners) {
return this;
}
delete this._listeners;
}
return this;
}
if (listeners && (events = listeners[event])){
emit(event){
let args = slice.call(arguments, 1);
let io = events.indexOf(fn);
if (io > -1) events.splice(io, 1);
if (!events.length) delete listeners[event];
for (let l in listeners) {
return this;
}
delete this._listeners;
}
return this;
}
let emit = () => {
let listeners = this._listeners, events;
if (listeners && (events = listeners[event])){
forEach(events.slice(0), (event) => {
let result = event.apply(this, args);
if (this._stoppable) return result;
});
}
}
/**
* [emit description]
* @param {string} event The event name
* @return {Object} this
*/
emit(event){
var self = this;
let args = slice.call(arguments, 1);
if (args[args.length - 1] === Emitter.EMIT_SYNC){
args.pop();
emit();
} else {
defer(emit);
}
//console.log('emit', event);
return this;
}
};
var emit = function() {
//console.log('self', self);
var listeners = self._listeners;
var events;
if (listeners && (events = listeners[event])){
events.slice(0).forEach((event) => {
let result = event.apply(self, args);
if (self._stoppable) return result;
});
}
};
if (args[args.length - 1] === Emitter.EMIT_SYNC){
args.pop();
emit();
} else {
defer(emit);
}
return this;
}
}
Emitter.EMIT_SYNC = {};
module.exports = Emitter;

10

lib/toolbar/toolbar.js
'use strict';
var Emitter = require('./module/emitter');
var Container = require('../container');
var $ = require("elements");
/**
* Toolbar - Toolbar process methods
* Component toolbar related methods
* @module module/toolbar
*/
var Toolbar = {
moodule.exports = {

@@ -342,2 +339,1 @@ /**

moodule.exports = toolbar;

4

lib/view.js

@@ -6,4 +6,2 @@ 'use strict';

var bind = require('./module/bind');
//var Dragging = require('./view/dragging');

@@ -43,3 +41,3 @@ //var Loader = require('./view/loader');

* @param {Object} options The class options
* @return {instance} The class instance
* @return {Object} The class instance
* @private

@@ -46,0 +44,0 @@ */

2

lib/view/options.js

@@ -6,3 +6,3 @@

tag: 'div',
bind: {}
component: ['body']
};

49

package.json
{
"name": "material",
"version": "0.0.6",
"version": "0.1.0",
"description": "Object Oriented User Interface Components",
"main": "app.js",
"scripts": {
"build-prime": "browserify -r prime -r prime/emitter > build/prime.js",
"build-elements": "browserify -r elements > build/elements.js",
"build-moofx": "browserify -r moofx > build/moofx.js",
"build-mout": "browserify -r mout > build/mout.js",
"build-vendor": "npm run build-prime & npm build build-elements & npm run build-moofx & npm run build-mustache",
"build-demo": "browserify -x prime -x prime-util/prime/options -x prime/emitter -x mout -x elements -x moofx dist/demo/app.js --debug | exorcist build/demo.js.map > build/demo.js",
"build-css": "lessc lib/skin/material/index.less > dist/skin/material.css",
"watch-demo": "watchify -x slick -x mout -x prime -x prime-util/prime/options -x prime/emitter -x mout -x elements -x moofx --debug dist/demo/main.js -o 'exorcist build/demo.js.map > build/demo.js' -v",
"watch-element": "watchify -x mout/array/forEach -x mout/time/now -x mout -x prime -x prime-util/prime/options -x prime/emitter -x mout -x elements -x slick -x moofx --debug dist/element/main.js -o 'exorcist dist/element/main.js.map > dist/element/bundle.js' -v",
"watch": "npm run watch-lib & npm run watch-css",
"start": "node app.js",
"test": "tap test/*.js"
},
"main": "index.js",
"repository": {

@@ -36,4 +22,4 @@ "type": "git",

"dependencies": {
"express": "^3.0",
"elements": "^0.6.0",
"lodash": "^3.10.1",
"moofx": "^3.2.0",

@@ -47,4 +33,31 @@ "mout": "^0.11.0"

"gulp-browserify": "^0.5.1",
"gulp-less": "^3.0.5"
"gulp-concat": "^2.6.0",
"gulp-hub": "^0.7.1",
"gulp-less": "^3.0.5",
"gulp-sourcemaps": "^1.6.0",
"gulp-util": "^3.0.7",
"require-dir": "^0.3.0",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
},
"scripts": {
"build-material": "browserify -r material -t [ babelify --presets es2015 ] --debug | exorcist build/material.js.map > build/material.js",
"build-demo": "browserify dist/demo/app.js --debug -o 'exorcist build/demo.js.map > build/demo.js' -v",
"build-css": "lessc lib/skin/material/material.less > dist/skin/material.css",
"watch-demo": "watchify --debug dist/demo/main.js -o 'exorcist build/demo.js.map > build/demo.js' -v",
"watch": "npm run watch-lib & npm run watch-css",
"test": "echo \"Error: no test specified\" && exit 1"
},
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015"
]
}
]
]
}
}
app.js
lib/component/api.js
lib/element.js
lib/element/options.js
lib/element/storage.js
lib/material.js
lib/skin/material/font/robotodraft.less
lib/skin/material/base/body.less

Sorry, the diff of this file is not supported yet

lib/skin/material/control/button.less

Sorry, the diff of this file is not supported yet

lib/skin/material/control/field.less

Sorry, the diff of this file is not supported yet

lib/skin/material/layout/resizer.less

Sorry, the diff of this file is not supported yet

lib/skin/material/material.less

Sorry, the diff of this file is not supported yet

lib/skin/material/view/view.less

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc