README
apple-style-controls
High-performance view-library with web controls according to apple style guidelines
Demo https://vestlirik.github.io/apple-style-controls.github.io/
Main components of app
All components should have class "asc"
Component
asc.component('<name of component>', function () {
//template from html file
this.templateSrc = "...path..to..template...";
//or template from string (string template has priority)
this.template = "...template...";
//enables lazy loading for template
this.lazyTemplate = true;
});
Component name should be one of the following:
- <tag-name>
- .<class-name>
- #<id-of-element>
Also components have events:
- Init - fires when component is creating
asc.component('<name of component>', function () {
this.init = function(element) {
//TODO: following code there
}
});
- After init - fires when component is created
asc.component('<name of component>', function () {
this.afterInit = function(element) {
//TODO: following code there
}
});
Directives
asc.component('[<directive-name>]', function () {
});
Directive name should start from 'asc-'
Directive has events:
- Init - fires when component is creating
asc.component('[<directive-name>]', function () {
this.init = function(element) {
//TODO: following code there
}
});
- Update - fires when bound value was changed
asc.component('[<directive-name>]', function () {
this.update = function (value) {
//TODO: to do smth with new bound value
};
});
How to bind value in template
Using {{ property name of component }}
<p>{{<propertyName>}}</p>
<div <directive-name>="{{<propertyName>}}" class="asc"></div>
Binding classes in template
Using {{<component property>: '<value>'}}
<button class="{{added: 'hidden'}}">Add button</button>
or with !
<button class="{{!added: 'hidden'}}">Add button</button>
How to bind event in template
Using (<name of desired event>)="<name of handler in component>()"
<button class="asc" (click)='openAlert()'>Show alert</button>
Event binding can have next parameters:
- $event - event object
- $value - value in event
- $target - context object
<any other name>
- property name
How to add custom events to component
Using events array with name of event, also you can optionally bind event firing to property value
asc.component('<component-name>', function () {
this.events = [
{
name: '<event-name>',
bindToProperty?: '<property-name>'
}
];
});
Also event can be fired programmatically by calling
this(self).events.<event-name>(<data>);
Important part for running app
At start of the body you should following line of code
<script>asc.run();</script>
Setting up router
You should call following function
window.router.setRouterConfig([
{
path: '<path>',
component: '<component-name>'
},
{
path: '<path>/:param',
component: '<component-name>'
},
{
path: '**',
redirectTo: '<path>'
}
]);
If you want to get info about current route and params, you can get this info from
var activeRoute = window.router.getActiveRoute();
In future releases getting active route will be reviewed (maybe be replaced by services or similar to them)