componentes basicos con prueba basica

This commit is contained in:
jgallego 2016-10-05 15:13:28 +02:00
parent d1a86633fc
commit f1a3e2dd58
29 changed files with 280 additions and 56 deletions

View File

@ -13,7 +13,7 @@ export function factory() {
return {
template: template,
default: {
texto: DEFAULT_TEXT,
text: DEFAULT_TEXT,
className: DEFAULT_CLASS,
enabled: 'true',
typeName: 'button'

View File

@ -1,3 +1,3 @@
<button type = "*[typeName]" class="*[className]" *[enabled] >
{{texto}}
<button type = "*[typeName]*" class="*[className]*" *[enabled]* >
*[text]*
</button>

View File

@ -13,7 +13,7 @@ export function factory() {
return {
template: template,
default: {
texto: DEFAULT_TEXT,
text: DEFAULT_TEXT,
className: DEFAULT_CLASS,
enabled: 'true',
typeName: 'button'

View File

@ -0,0 +1,2 @@
<!-- por definir -->

View File

@ -0,0 +1 @@
// por definir

View File

@ -0,0 +1,18 @@
import {module as _module} from '../module';
import * as resolveFactory from '../resolveDefaultComponents';
import * as util from '../util';
const _NAME = 'check';
export const NAME = util.getName(_NAME);
directive.$inject =[resolveFactory.NAME];
export function directive (resolve){
return{
require:'E',
template: function(_,attr){
return resolve.getTemplate(_NAME, attr);
}
}
}
_module.directive(NAME,directive);

View File

@ -0,0 +1,3 @@
<input type="checkbox" class="*[className]*" *[enabled]* >
<span class="mdl-checkbox__label"> *[text]*</span>

View File

@ -0,0 +1,23 @@
import {module as _module} from '../module';
import * as util from '../util';
import * as constant from '../constants';
import template from './check.mt.html';
const _NAME = 'check';
const DEFAULT_TEXT = 'check';
const DEFAULT_CLASS = 'mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect';
export const NAME = util.getFactoryName(_NAME + constant.MATERIAL_DESIGN_FRAMEWORK);
export function factory() {
return {
template: template,
default: {
text: DEFAULT_TEXT,
enabled: 'true',
className: DEFAULT_CLASS
}
}
}
_module.factory(NAME, factory);

View File

@ -8,3 +8,15 @@ export {NAME as INTERPOLATE,Interpolate} from './interpolate'
export {NAME as BUTTON,directive as ButtonDirective} from './button/button'
export {NAME as BUTTONMT,factory as buttonmt} from './button/button.mt'
export {NAME as BUTTONBT,factory as buttonbt} from './button/button.bt'
export {NAME as CHECK,directive as CheckDirective} from './check/check'
export {NAME as CHECKMT,factory as checknmt} from './check/check.mt'
export {NAME as CHECKBT,factory as checkbt} from './check/check.bt'
export {NAME as RADIO,directive as RadioDirective} from './radio/radio'
export {NAME as RADIOMT,factory as radionmt} from './radio/radio.mt'
export {NAME as RADIOBT,factory as radiobt} from './radio/radio.bt'
export {NAME as TEXTFIELD,directive as TextfieldDirective} from './textfield/textfield'
export {NAME as TEXTFIELDMT,factory as textfieldmt} from './textfield/textfield.mt'
export {NAME as TEXTFIELDBT,factory as textfieldbt} from './textfield/textfield.bt'
export {NAME as TXT,directive as TxtDirective} from './txt/txt'
export {NAME as TXTMT,factory as txtmt} from './txt/txt.mt'
export {NAME as TXTBT,factory as txtbt} from './txt/txt.bt'

View File

@ -1,16 +1,54 @@
import {module as _module} from './module';
import * as util from './util';
import {ng} from '@salix/vendor'
export const NAME = util.getProviderName('interpolate');
export class Interpolate
{
contructor (){
this._startSymbol='*[';
this._endSymbol = ']';
function minErr(){
}
function stringify(value) {
if (value == null) { // null || undefined
return '';
}
switch (typeof value) {
case 'string':
break;
case 'number':
value = '' + value;
break;
default:
value = angular.toJson(value);
}
return value;
}
var $interpolateMinErr =ng.angular.$interpolateMinErr = ng.$$minErr('$interpolate');
$interpolateMinErr.throwNoconcat = function (text) {
throw $interpolateMinErr('noconcat',
'Error while interpolating: {0}\nStrict Contextual Escaping disallows ' +
'interpolations that concatenate multiple expressions when a trusted value is ' +
'required. See http://docs.angularjs.org/api/ng.$sce', text);
};
$interpolateMinErr.interr = function (text, err) {
return $interpolateMinErr('interr', 'Can\'t interpolate: {0}\n{1}', text, err.toString());
};
export class Interpolate
{
constructor (){
this._startSymbol='*[';
this._endSymbol = ']*';
}
set startSymbol (value) {
if (value) {
this._startSymbol = value;
@ -27,20 +65,22 @@ export class Interpolate
} else {
return this._endSymbol;
}
};
};
$get($parse, $exceptionHandler, $sce) {
var startSymbolLength = this._startSymbol.length,
endSymbolLength = this._endSymbol.length,
escapedStartRegexp = new RegExp(this._startSymbol.replace(/./g, escape), 'g'),
escapedEndRegexp = new RegExp(this._endSymbol.replace(/./g, escape), 'g');
escapedEndRegexp = new RegExp(this._endSymbol.replace(/./g, escape), 'g'),
self = this;
function escape(ch) {
return '\\\\\\' + ch;
}
function unescapeText(text) {
return text.replace(escapedStartRegexp, this._startSymbol).
replace(escapedEndRegexp, this._endSymbol);
return text.replace(escapedStartRegexp, self._startSymbol).
replace(escapedEndRegexp, self._endSymbol);
}
// TODO: this is the same as the constantWatchDelegate in parse.js
@ -52,10 +92,10 @@ export class Interpolate
return unwatch;
}
function $interpolate(text, mustHaveExpression, trustedContext, allOrNothing)
{
function $interpolate(text, mustHaveExpression, trustedContext, allOrNothing)
{
// Provide a quick exit and simplified result function for text with no interpolation
if (!text.length || text.indexOf(this._startSymbol) === -1)
if (!text.length || text.indexOf(self._startSymbol) === -1)
{
var constantInterp;
if (!mustHaveExpression) {
@ -80,12 +120,12 @@ export class Interpolate
expressionPositions = [];
while (index < textLength) {
if (((startIndex = text.indexOf(this._startSymbol, index)) !== -1) &&
((endIndex = text.indexOf(this._endSymbol, startIndex + this._startSymbolLength)) !== -1)) {
if (((startIndex = text.indexOf(self._startSymbol, index)) !== -1) &&
((endIndex = text.indexOf(self._endSymbol, startIndex + startSymbolLength)) !== -1)) {
if (index !== startIndex) {
concat.push(unescapeText(text.substring(index, startIndex)));
}
exp = text.substring(startIndex + this._startSymbolLength, endIndex);
exp = text.substring(startIndex + startSymbolLength, endIndex);
expressions.push(exp);
parseFns.push($parse(exp, parseStringifyInterceptor));
index = endIndex + endSymbolLength;
@ -158,10 +198,10 @@ export class Interpolate
$interpolate.endSymbol = function () {
return endSymbol;
};
return $interpolate;
}
}
_module.provider(NAME, Interpolate);
_module.provider(NAME, () => new Interpolate());

View File

@ -0,0 +1,2 @@
<!-- por definir -->

View File

@ -0,0 +1 @@
// por definir

View File

@ -0,0 +1,18 @@
import {module as _module} from '../module';
import * as resolveFactory from '../resolveDefaultComponents';
import * as util from '../util';
const _NAME = 'radio';
export const NAME = util.getName(_NAME);
directive.$inject =[resolveFactory.NAME];
export function directive (resolve){
return{
require:'E',
template: function(_,attr){
return resolve.getTemplate(_NAME, attr);
}
}
}
_module.directive(NAME,directive);

View File

@ -0,0 +1,2 @@
<input type="radio" class="*[className]*" *[enabled]* >
<span class="mdl-radio__label"> *[text]*</span>

View File

@ -0,0 +1,23 @@
import {module as _module} from '../module';
import * as util from '../util';
import * as constant from '../constants';
import template from './radio.mt.html';
const _NAME = 'radio';
const DEFAULT_TEXT = 'radio';
const DEFAULT_CLASS = 'mdl-radio mdl-js-radio mdl-js-ripple-effect';
export const NAME = util.getFactoryName(_NAME + constant.MATERIAL_DESIGN_FRAMEWORK);
export function factory() {
return {
template: template,
default: {
text: DEFAULT_TEXT,
enabled: 'true',
className: DEFAULT_CLASS
}
}
}
_module.factory(NAME, factory);

View File

@ -1,37 +1,39 @@
import {module as _module} from './module';
import * as util from './util';
import constant from './constants';
import interpolate from './interpolate';
import Interpolate from './interpolate';
export const NAME = util.getProviderName('ResolveDefaultComponent');
export class ResolveDefaultComponent {
constructor(){
this._name="mt";
this._frameworkName="mt";
}
set frameworkName(value){
//mt or bt
this._frameworkName = value;
}
$get($injector,interpolate){
$get($injector,vnInterpolate){
//Service Locator
return {
getTemplate:function(name ,attr){
this._frameworkName="mt";
let _name = util.getFactoryName( name + this._frameworkName);
let defaultfactory = $injector.has(_name) ? $injector.get():undefined; // vnbutonmtFactory
let defaultfactory = $injector.has(_name) ? $injector.get(_name):undefined; // vnbutonmtFactory
if(!defaultfactory)
{
throw new Error("factoty is not defined");
throw new Error("factory is not defined");
}
let defaultValues = defaultfactory.default;
let template = defaultfactory.template;
let scope = Object.assign(defaultValues || {},attr||{});
return template && interpolate(template)(scope);
return template && vnInterpolate(template)(scope);
}
};
}
}
_module.provider(NAME,ResolveDefaultComponent)
// _module.provider(NAME,ResolveDefaultComponent)
_module.provider(NAME,() => new ResolveDefaultComponent());

View File

@ -0,0 +1,2 @@
<!-- por definir -->

View File

@ -0,0 +1 @@
// por definir

View File

@ -0,0 +1,18 @@
import {module as _module} from '../module';
import * as resolveFactory from '../resolveDefaultComponents';
import * as util from '../util';
const _NAME = 'textfield';
export const NAME = util.getName(_NAME);
directive.$inject =[resolveFactory.NAME];
export function directive (resolve){
return{
require:'E',
template: function(_,attr){
return resolve.getTemplate(_NAME, attr);
}
}
}
_module.directive(NAME,directive);

View File

@ -0,0 +1,4 @@
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="*[className]*" type="*[type]*" *[enabled]*>
<label class="mdl-textfield__label">*[text]*</label>
</div>

View File

@ -0,0 +1,25 @@
import {module as _module} from '../module';
import * as util from '../util';
import * as constant from '../constants';
import template from './textfield.mt.html';
const _NAME = 'textfield';
const DEFAULT_TEXT = 'text';
const DEFAULT_CLASS = 'mdl-textfield__input';
const DEFAULT_TYPE = 'text';
export const NAME = util.getFactoryName(_NAME + constant.MATERIAL_DESIGN_FRAMEWORK);
export function factory() {
return {
template: template,
default: {
text: DEFAULT_TEXT,
enabled: 'enabled',
className: DEFAULT_CLASS,
type: DEFAULT_TYPE
}
}
}
_module.factory(NAME, factory);

View File

@ -0,0 +1,2 @@
<!-- por definir -->

View File

@ -0,0 +1 @@
// por definir

View File

@ -0,0 +1,18 @@
import {module as _module} from '../module';
import * as resolveFactory from '../resolveDefaultComponents';
import * as util from '../util';
const _NAME = 'txt';
export const NAME = util.getName(_NAME);
directive.$inject =[resolveFactory.NAME];
export function directive (resolve){
return{
require:'E',
template: function(_,attr){
return resolve.getTemplate(_NAME, attr);
}
}
}
_module.directive(NAME,directive);

View File

@ -0,0 +1 @@
<label>*[text]*</label>

View File

@ -0,0 +1,20 @@
import {module as _module} from '../module';
import * as util from '../util';
import * as constant from '../constants';
import template from './txt.mt.html';
const _NAME = 'txt';
const DEFAULT_TEXT = 'txt';
export const NAME = util.getFactoryName(_NAME + constant.MATERIAL_DESIGN_FRAMEWORK);
export function factory() {
return {
template: template,
default: {
text: DEFAULT_TEXT
}
}
}
_module.factory(NAME, factory);

View File

@ -2,5 +2,7 @@ import * as _angular from 'angular';
export const ng = {
module: _angular.module,
bootstrap: _angular.bootstrap
bootstrap: _angular.bootstrap,
$$minErr :_angular.$$minErr,
angular:_angular
}

View File

@ -3,11 +3,20 @@
<head>
<title>Salix</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
</head>
<body>
<div id="app">
{{1+1}}
<vn-button text="texto del boton"></vn-button><br>
<vn-check text="texto del text" ></vn-check><br>
<vn-radio text="texto del radio"></vn-radio><br>
<vn-textfield text="prueba" type="email"></vn-textfield><br>
<vn-txt text="hola mundo"></vn-txt>
</div>
<script type="text/javascript" src="build/salix.app.js" selector="#app"></script>
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
</body>
</html>

View File

@ -1,26 +0,0 @@
0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/nodejs', '/usr/bin/npm', 'run', 'dev' ]
2 info using npm@1.4.21
3 info using node@v4.4.7
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info predev salix-app@1.0.0
6 info dev salix-app@1.0.0
7 verbose unsafe-perm in lifecycle true
8 info salix-app@1.0.0 Failed to exec dev script
9 error salix-app@1.0.0 dev: `webpack --progress --colors --watch`
9 error Exit status 1
10 error Failed at the salix-app@1.0.0 dev script.
10 error This is most likely a problem with the salix-app package,
10 error not with npm itself.
10 error Tell the author that this fails on your system:
10 error webpack --progress --colors --watch
10 error You can get their info via:
10 error npm owner ls salix-app
10 error There is likely additional logging output above.
11 error System Linux 4.7.0-1-amd64
12 error command "/usr/bin/nodejs" "/usr/bin/npm" "run" "dev"
13 error cwd /home/juan/Proyectos/salix
14 error node -v v4.4.7
15 error npm -v 1.4.21
16 error code ELIFECYCLE
17 verbose exit [ 1, true ]