Permalink
Browse files

feat(view): let viewManager determine locations of templates

  • Loading branch information...
bas080
bas080 committed Jun 2, 2016
1 parent 0b89e21 commit 185e98aaebfc707d520bcc5a1ee634ce1adc419a
Showing with 133 additions and 97 deletions.
  1. +5 −1 config.js
  2. +6 −3 package.json
  3. +0 −29 src/component.js
  4. +69 −10 src/config.js
  5. +53 −27 src/form-field.js
  6. +0 −27 src/frameworks/bootstrap/components.js
@@ -9,14 +9,18 @@ System.config({
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
"npm:*": "jspm_packages/npm/*",
"jspm:*": "jspm_packages/jspm/*"
},

map: {
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.2.3",
"aurelia-framework": "npm:aurelia-framework@1.0.0-beta.1.2.5",
"aurelia-view": "jspm:aurelia-view@0.0.2",
"babel": "npm:babel-core@5.8.38",
"babel-runtime": "npm:babel-runtime@5.8.38",
"core-js": "npm:core-js@1.2.6",
"extend": "npm:extend@3.0.0",
"github:jspm/nodelibs-assert@0.1.0": {
"assert": "npm:assert@1.4.0"
},
@@ -28,15 +28,16 @@
},
"devDependencies": {
"aurelia-tools": "^0.1.3",
"babel-eslint": "^4.1.3",
"conventional-changelog": "0.0.11",
"del": "^1.1.0",
"gulp": "^3.8.10",
"gulp-babel": "^5.1.0",
"gulp-bump": "^0.1.11",
"gulp-yuidoc": "^0.1.2",
"gulp-eslint": "^1.0.0",
"babel-eslint": "^4.1.3",
"gulp-yuidoc": "^0.1.2",
"jasmine-core": "^2.1.3",
"jspm": "^0.16.35",
"karma": "^0.12.28",
"karma-babel-preprocessor": "^5.2.1",
"karma-chrome-launcher": "^0.1.7",
@@ -57,7 +58,9 @@
"lib": "dist/amd"
},
"dependencies": {
"aurelia-framework": "npm:aurelia-framework@^1.0.0-beta.1.0.1"
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@^1.0.0-beta.1.2.3",
"aurelia-framework": "npm:aurelia-framework@^1.0.0-beta.1.0.1",
"extend": "npm:extend@^3.0.0"
},
"devDependencies": {
"babel": "npm:babel-core@^5.8.24",

This file was deleted.

Oops, something went wrong.
@@ -1,26 +1,59 @@
import extend from 'extend';
import frameworks from './frameworks/frameworks';
import {inject} from 'aurelia-dependency-injection';
import {Config as ViewManagerConfig} from 'aurelia-view';

const DEFAULT_FRAMEWORK = 'bootstrap';

@inject(ViewManagerConfig)
export class Config {
constructor() {
let defaultFramework = 'bootstrap';
constructor(viewManagerConfig) {

extend(this, {
/* should these configs be moved? Maybe in a*/
viewManagerConfig.register('aurelia-form', {
base: './frameworks/{{framework}}',
location: '{{base}}/{{view}}.html',
framework: DEFAULT_FRAMEWORK,
map: {

translate: false,
/* custom elements with a view model do not end with .html */
actions: '{{base}}/actions',
collection: '{{base}}/collection',

components: {}, //custom components equals an empty object
text: '{{base}}/input.html',
button: '{{base}}/input.html',
color: '{{base}}/input.html',
date: '{{base}}/input.html',
datetime: '{{base}}/input.html',
'datetime-local': '{{base}}/input.html',
email: '{{base}}/input.html',
month: '{{base}}/input.html',
number: '{{base}}/input.html',
password: '{{base}}/input.html',
range: '{{base}}/input.html',
search: '{{base}}/input.html',
tel: '{{base}}/input.html',
time: '{{base}}/input.html',
url: '{{base}}/input.html',
week: '{{base}}/input.html'
}
});

framework: defaultFramework, //bootstrap as default
/***
* defaults that are part of aurelia-form out of the box. They do need to be
* documented and maybe moved into a seperate file named defaults.js
*/
this.configure({

frameworkComponents: frameworks[defaultFramework] || {}, //consider throwing error when not giving a valid framework
translate: false,

/***
* Instead of defining a framework or custom component for every variant
* on the name of a type, it is easier to alias that variant so the
* variant is changed to the main type.
*/
aliases: {
undefined: 'text',
null: 'text',
int: 'number',
integer: 'number',
float: 'number',
@@ -31,8 +64,34 @@ export class Config {
});
}

configurations = {}

/**
* convenient for getting a (nested) property in the configurations
* object.
*
* @param {...string} props when prop is falsy it returns the whole
* configurations object
*
* @returns {*} the value of that property
*/
get(props) {
let result = this.configurations;
for (let index in arguments) {
let key = arguments[index];
let value = result[key];
if (!value) { return value; }
result = result[key];
}
return result;
}

/**
* extend the config to your liking. A convenient function when you would want
* more control over the configs.
*/
configure(configs) {
/* perform a deep extend */
return extend(true, this, configs);
/* perform a deep extend and returns this*/
return extend(true, this.configurations, configs);
}
}
@@ -1,25 +1,29 @@
import {Config} from './config';
import {component} from './component';
import {bindingMode, bindable, computedFrom, inject} from 'aurelia-framework';
import {ViewManager} from 'aurelia-view';

@inject(Config, Element)
@inject(Config, Element, ViewManager)
export class FormFieldCustomElement {

@bindable attribute

@bindable({defaultBindingMode: bindingMode.twoWay})
value

constructor(config, element) {
@bindable
errors

constructor(config, element, viewManager) {
this.config = config;
this.element = element;
this.viewManager = viewManager;
}

attached() {
// consider: using aurelia DOM pal
let attrsElmnt = $(this.element).find('[attrs]');
if (attrsElmnt) {
attrsElmnt.attr(this.attribute.attributes || {});
let attributeElements = $(this.element).find('[attrs]');
if (attributeElements) {
attributeElements.attr(this.attribute.attributes || {});
}
}

@@ -29,36 +33,58 @@ export class FormFieldCustomElement {
}

@computedFrom('attribute')
get component() {
this.attribute.type = aliasOf(this.config, this.attribute.type);
return component(this.config, this.attribute);
get view() {
let type = this.type;
this.attribute.type = type;
return this.viewManager.resolve('aurelia-form', type);
}

@computedFrom('errors')
get showErrors() {
return (this.errors && this.errors.length > 0);
}

/**
* Calculates what to use for component.
* Calculates what component to use
*
* Checks if the user has defined a custom component and uses that one when
* that is the case. Otherwise fallback to the framework it's components. If
* none of them are defined it warns the developer of this.
* @returns {boolean} true when has a viewModel
*/
@computedFrom('component')
get isHtmlComponent() {
return this.component ? (this.component.endsWith('.html')) : true;
@computedFrom('type', 'view')
get hasViewModel() {
return !this.view.endsWith('.html');
}
}

/**
* returns a string that represents the type of which it is an alias of. If it
* is not registered as an alias it returns itself(identity).
*
*
* @param {object} config
* @param {string} type
* @returns {string}
*/
function aliasOf(config, type) {
if (type === undefined) {
return 'text';
/**
* returns a string that represents the type of which it is an alias of. If it
* is not registered as an alias it returns itself(identity).
*
* It also resolves recursively and makes sure it does not end up in a infinite
* loop because of a config malformed config.
*
* @param {object} config
* @param {string} type
* @returns {string}
*/
@computedFrom('attribute')
get type() {
let type = this.attribute.type;
let alias = this.config.get('aliases', type); /* get an alias if it has one */
let previous = []; /* used to avoid an infinite loop */

/***
* if it does have and alias, and has not resolved that alias previously,
* check if that alias points to another type or alias.
*/
while (alias && (previous.indexOf(alias) === -1)) {
type = alias;
previous.push(type);
alias = this.config.get('aliases', type);
}

return type;
}
return (config.aliases[type] !== undefined) ? config.aliases[type] : type;
}

This file was deleted.

Oops, something went wrong.

0 comments on commit 185e98a

Please sign in to comment.