mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
remove last of IonicComponent_OLD
This commit is contained in:
@ -3,7 +3,6 @@ export * from 'ionic/components/app/app'
|
||||
export * from 'ionic/components/action-menu/action-menu'
|
||||
// export * from 'ionic/components/alert/alert'
|
||||
export * from 'ionic/components/aside/aside'
|
||||
export * from 'ionic/components/button/button'
|
||||
export * from 'ionic/components/checkbox/checkbox'
|
||||
export * from 'ionic/components/content/content'
|
||||
export * from 'ionic/components/icon/icon'
|
||||
|
@ -1,39 +1,58 @@
|
||||
import {EventEmitter, ElementRef, Inject, Parent} from 'angular2/angular2'
|
||||
import {EventEmitter, ElementRef} from 'angular2/angular2'
|
||||
import {onInit} from 'angular2/src/core/annotations_impl/annotations';
|
||||
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
import * as types from 'ionic/components/aside/extensions/types'
|
||||
import * as gestures from 'ionic/components/aside/extensions/gestures'
|
||||
import {IonicDirective} from '../../config/component';
|
||||
import * as types from './extensions/types'
|
||||
import * as gestures from './extensions/gestures'
|
||||
import {dom} from 'ionic/util'
|
||||
import {IonicComponent_OLD} from 'ionic/config/component'
|
||||
|
||||
/**
|
||||
* TODO (?) add docs about how to have a root aside and a nested aside, then hide the root one
|
||||
*/
|
||||
|
||||
@Component({
|
||||
@IonicDirective(Aside)
|
||||
export class Aside {
|
||||
|
||||
static get config() {
|
||||
return {
|
||||
selector: 'ion-aside',
|
||||
properties: [
|
||||
'content',
|
||||
'side',
|
||||
'dragThreshold'
|
||||
],
|
||||
defaultProperties: {
|
||||
'side': 'left',
|
||||
'type': 'reveal'
|
||||
},
|
||||
delegates: {
|
||||
gesture: [
|
||||
[instance => instance.side == 'top', gestures.TopAsideGesture],
|
||||
[instance => instance.side == 'bottom', gestures.BottomAsideGesture],
|
||||
[instance => instance.side == 'right', gestures.RightAsideGesture],
|
||||
[instance => instance.side == 'left', gestures.LeftAsideGesture],
|
||||
],
|
||||
type: [
|
||||
[instance => instance.type == 'overlay', types.AsideTypeOverlay],
|
||||
[instance => instance.type == 'reveal', types.AsideTypeReveal],
|
||||
[instance => instance.type == 'push', types.AsideTypePush],
|
||||
]
|
||||
},
|
||||
events: ['opening']
|
||||
})
|
||||
@View({
|
||||
template: `<content></content>`
|
||||
})
|
||||
export class Aside {
|
||||
constructor(
|
||||
elementRef: ElementRef
|
||||
) {
|
||||
}
|
||||
}
|
||||
|
||||
constructor(elementRef: ElementRef) {
|
||||
this.domElement = elementRef.domElement
|
||||
|
||||
this.opening = new EventEmitter('opening');
|
||||
|
||||
// FIXME(ajoslin): have to wait for setTimeout for bindings to apply.
|
||||
setTimeout(() => {
|
||||
// TODO: Use Animation Class
|
||||
this.domElement.addEventListener('transitionend', ev => {
|
||||
this.setChanging(false)
|
||||
})
|
||||
}
|
||||
|
||||
onInit() {
|
||||
this.side = this.side || 'left';
|
||||
this.type = this.type || 'reveal';
|
||||
|
||||
@ -43,14 +62,9 @@ export class Aside {
|
||||
console.log('Aside content', this.content);
|
||||
this.contentElement = (this.content instanceof Node) ? this.content : this.content.domElement;
|
||||
|
||||
this.config = Aside.config.invoke(this)
|
||||
this.gestureDelegate = this.config.getDelegate('gesture');
|
||||
this.typeDelegate = this.config.getDelegate('type');
|
||||
})
|
||||
|
||||
this.domElement.addEventListener('transitionend', ev => {
|
||||
this.setChanging(false)
|
||||
})
|
||||
Aside.applyConfig(this);
|
||||
this.gestureDelegate = Aside.getDelegate(this, 'gesture');
|
||||
this.typeDelegate = Aside.getDelegate(this, 'type');
|
||||
}
|
||||
|
||||
getContentElement() {
|
||||
@ -64,17 +78,20 @@ export class Aside {
|
||||
setTransform(transform) {
|
||||
this.typeDelegate.setTransform(transform)
|
||||
}
|
||||
|
||||
setSliding(isSliding) {
|
||||
if (isSliding !== this.isSliding) {
|
||||
this.typeDelegate.setSliding(isSliding)
|
||||
}
|
||||
}
|
||||
|
||||
setChanging(isChanging) {
|
||||
if (isChanging !== this.isChanging) {
|
||||
this.isChanging = isChanging
|
||||
this.domElement.classList[isChanging ? 'add' : 'remove']('changing');
|
||||
}
|
||||
}
|
||||
|
||||
setOpen(isOpen) {
|
||||
if (isOpen !== this.isOpen) {
|
||||
this.isOpen = isOpen
|
||||
@ -92,37 +109,8 @@ export class Aside {
|
||||
open() {
|
||||
return this.setOpen(true);
|
||||
}
|
||||
|
||||
close() {
|
||||
return this.setOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
new IonicComponent_OLD(Aside, {
|
||||
properties: {
|
||||
side: {
|
||||
value: 'left'
|
||||
},
|
||||
type: {
|
||||
defaults: {
|
||||
ios: 'reveal',
|
||||
android: 'overlay',
|
||||
core: 'overlay',
|
||||
}
|
||||
},
|
||||
dragThreshold: {},
|
||||
content: {},
|
||||
},
|
||||
delegates: {
|
||||
gesture: [
|
||||
[instance => instance.side == 'top', gestures.TopAsideGesture],
|
||||
[instance => instance.side == 'bottom', gestures.BottomAsideGesture],
|
||||
[instance => instance.side == 'right', gestures.RightAsideGesture],
|
||||
[instance => instance.side == 'left', gestures.LeftAsideGesture],
|
||||
],
|
||||
type: [
|
||||
[instance => instance.type == 'overlay', types.AsideTypeOverlay],
|
||||
[instance => instance.type == 'reveal', types.AsideTypeReveal],
|
||||
[instance => instance.type == 'push', types.AsideTypePush],
|
||||
]
|
||||
}
|
||||
})
|
||||
|
@ -2,19 +2,13 @@ import {Renderer, ElementRef} from 'angular2/angular2'
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
import {ItemPrimaryOptions, ItemSecondaryOptions} from './item-options'
|
||||
import {ItemPrimarySwipeButtons, ItemSecondarySwipeButtons} from './item-swipe-buttons'
|
||||
import {dom} from 'ionic/util'
|
||||
import {IonicComponent_OLD} from 'ionic/config/component'
|
||||
|
||||
import {
|
||||
ItemPrimaryOptions, ItemSecondaryOptions
|
||||
} from 'ionic/components/item/item-options'
|
||||
|
||||
import {
|
||||
ItemPrimarySwipeButtons, ItemSecondarySwipeButtons
|
||||
} from 'ionic/components/item/item-swipe-buttons'
|
||||
|
||||
@Component({
|
||||
selector: 'ion-item'//,[ion-item]'
|
||||
selector: 'ion-item'
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
@ -45,30 +39,18 @@ import {
|
||||
]
|
||||
})
|
||||
export class Item {
|
||||
constructor(
|
||||
elementRef: ElementRef
|
||||
) {
|
||||
this._isOpen = false
|
||||
this._isSlideActive = false
|
||||
this._isTransitioning = false
|
||||
this._transform = ''
|
||||
constructor(elementRef: ElementRef) {
|
||||
this._isOpen = false;
|
||||
this._isSlideActive = false;
|
||||
this._isTransitioning = false;
|
||||
this._transform = '';
|
||||
|
||||
this.domElement = elementRef.domElement
|
||||
this.swipeButtons = {}
|
||||
this.optionButtons = {}
|
||||
Item.config.invoke(this)
|
||||
this.domElement = elementRef.domElement;
|
||||
this.swipeButtons = {};
|
||||
this.optionButtons = {};
|
||||
}
|
||||
}
|
||||
|
||||
new IonicComponent_OLD(Item, {
|
||||
propClasses: ['full']
|
||||
})
|
||||
|
||||
|
||||
function clsSetter(el, name) {
|
||||
return (isSet) => el.classList[isSet?'add':'remove'](name)
|
||||
}
|
||||
|
||||
|
||||
class Slideable {
|
||||
constructor(slideElement: Element) {
|
||||
|
@ -1,40 +1,37 @@
|
||||
import {Renderer, ElementRef} from 'angular2/angular2'
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
import {ElementRef} from 'angular2/angular2'
|
||||
import {onInit} from 'angular2/src/core/annotations_impl/annotations';
|
||||
|
||||
import {IonicComponent_OLD} from 'ionic/config/component'
|
||||
import {IonicDirective} from 'ionic/config/component'
|
||||
import {ListVirtualScroll} from './virtual'
|
||||
|
||||
import * as util from 'ionic/util';
|
||||
|
||||
|
||||
@Component({
|
||||
@IonicDirective(List)
|
||||
export class List {
|
||||
|
||||
static get config() {
|
||||
return {
|
||||
selector: 'ion-list',
|
||||
properties: [
|
||||
'items',
|
||||
'virtual',
|
||||
'content'
|
||||
]
|
||||
})
|
||||
@View({
|
||||
template: `<content></content>`
|
||||
})
|
||||
export class List {
|
||||
constructor(
|
||||
elementRef: ElementRef
|
||||
) {
|
||||
}
|
||||
}
|
||||
|
||||
constructor(elementRef: ElementRef) {
|
||||
this.domElement = elementRef.domElement;
|
||||
this.config = List.config.invoke(this);
|
||||
|
||||
setTimeout(() => {
|
||||
}
|
||||
|
||||
onInit() {
|
||||
if(util.isDefined(this.virtual)) {
|
||||
console.log('Content', this.content);
|
||||
console.log('Virtual?', this.virtual);
|
||||
console.log('Items?', this.items.length, 'of \'em');
|
||||
this._initVirtualScrolling();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
_initVirtualScrolling() {
|
||||
@ -49,6 +46,3 @@ export class List {
|
||||
this.itemTemplate = item;
|
||||
}
|
||||
}
|
||||
new IonicComponent_OLD(List, {
|
||||
propClasses: ['inset']
|
||||
})
|
||||
|
@ -27,7 +27,8 @@ $list-margin-bottom: 10px !default;
|
||||
|
||||
list-style-type: none;
|
||||
|
||||
&.list-inset {
|
||||
&.list-inset
|
||||
&[inset] {
|
||||
margin-top: 0;
|
||||
margin-left: -$content-padding;
|
||||
margin-right: -$content-padding;
|
||||
|
14
ionic/components/list/test/basic/index.js
Normal file
14
ionic/components/list/test/basic/index.js
Normal file
@ -0,0 +1,14 @@
|
||||
import {Component} from 'angular2/src/core/annotations_impl/annotations';
|
||||
|
||||
import {IonicView} from 'ionic/ionic';
|
||||
|
||||
|
||||
@Component({ selector: 'ion-view' })
|
||||
@IonicView({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class IonicApp {}
|
||||
|
||||
export function main(ionicBootstrap) {
|
||||
ionicBootstrap(IonicApp);
|
||||
}
|
14
ionic/components/tabs/test/tab-bar-bottom/index.js
Normal file
14
ionic/components/tabs/test/tab-bar-bottom/index.js
Normal file
@ -0,0 +1,14 @@
|
||||
import {Component} from 'angular2/src/core/annotations_impl/annotations';
|
||||
|
||||
import {IonicView} from 'ionic/ionic';
|
||||
|
||||
|
||||
@Component({ selector: 'ion-view' })
|
||||
@IonicView({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class IonicApp {}
|
||||
|
||||
export function main(ionicBootstrap) {
|
||||
ionicBootstrap(IonicApp);
|
||||
}
|
@ -74,98 +74,9 @@ function appendModeConfig(ComponentType) {
|
||||
}
|
||||
};
|
||||
|
||||
config.hostAttributes = config.hostAttributes || {};
|
||||
let className = (config.hostAttributes['class'] || '');
|
||||
let id = config.classId || config.selector.replace('ion-', '');
|
||||
config.hostAttributes['class'] = (className + ' ' + id + ' ' + id + '-' + platformMode).trim();
|
||||
|
||||
return config;
|
||||
}
|
||||
|
||||
export class IonicComponent_OLD {
|
||||
constructor(ComponentType, {
|
||||
properties,
|
||||
bind,
|
||||
enhanceRawElement,
|
||||
delegates,
|
||||
propClasses
|
||||
}) {
|
||||
// TODO give errors if not providing valid delegates
|
||||
ComponentType.config = this
|
||||
this.componentCssName = util.pascalCaseToDashCase(ComponentType.name)
|
||||
|
||||
this.properties = properties || (properties = {});
|
||||
|
||||
this.bind = bind || (bind = {})
|
||||
for (let attrName in bind) {
|
||||
let binding = bind[attrName]
|
||||
if (util.isObject(binding)) {
|
||||
binding.property || (binding.property = attrName)
|
||||
this._computeDefaultValue(binding)
|
||||
// TODO recompute defaultValue when user possibly adds a binding
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
this.delegates = delegates || (delegates = {})
|
||||
this.propClasses = propClasses || (propClasses = []);
|
||||
|
||||
// Whether to support raw element enhancement (for example, supporting <button>).
|
||||
// We only do this if there is a matching style property on the element
|
||||
this.enhanceRawElement = enhanceRawElement || false;
|
||||
|
||||
// for (let delegateName of delegates) {
|
||||
// let delegate = delegates[delegateName]
|
||||
// }
|
||||
}
|
||||
_computeDefaultValue(binding = {}) {
|
||||
let defaults = binding.defaults || {}
|
||||
binding._defaultValue = binding.value || defaults[platformMode] || defaults.base;
|
||||
}
|
||||
|
||||
invoke(instance) {
|
||||
const config = this;
|
||||
|
||||
// For each property class, check if it exists on the element and add the
|
||||
// corresponding classname for it, otherwise add it
|
||||
let foundMatchingPropClass = false;
|
||||
for (let propClass of this.propClasses) {
|
||||
if(dom.hasAttribute(instance.domElement, propClass)) {
|
||||
dom.addClass(instance.domElement, `${this.componentCssName}-${propClass}`);
|
||||
foundMatchingPropClass = true;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: This worked fine for property-only buttons, but breaks with
|
||||
// class, etc.
|
||||
//
|
||||
// If we want to enhance a raw element (for example, a button),
|
||||
// only do it if we also have a matching prop class
|
||||
//if(!foundMatchingPropClass && this.enhanceRawElement) {
|
||||
// Don't enhace this raw element
|
||||
//return;
|
||||
//}
|
||||
|
||||
// Add the base element classes (ex, button and button-ios)
|
||||
dom.addClass(instance.domElement, this.componentCssName, `${this.componentCssName}-${platformMode}`);
|
||||
|
||||
// Check and apply and property classes (properties that should be
|
||||
// converted to class names). For example, <button primary> should
|
||||
// add the class button-primary
|
||||
|
||||
for (let attrName in this.bind) {
|
||||
let binding = this.bind[attrName]
|
||||
let defaultValue = binding._defaultValue
|
||||
if (!instance[binding.property] && defaultValue) {
|
||||
instance[binding.property] = defaultValue
|
||||
instance.domElement.setAttribute(util.pascalCaseToDashCase(attrName), defaultValue)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
properties: this.properties,
|
||||
getDelegate(delegateName) {
|
||||
let cases = (config.delegates || {})[delegateName] || [];
|
||||
if (config.delegates) {
|
||||
ComponentType.getDelegate = (instance, delegateName) => {
|
||||
let cases = config.delegates[delegateName] || [];
|
||||
for (let i = 0; i < cases.length; i++) {
|
||||
let delegateCase = cases[i];
|
||||
if (util.isArray(delegateCase)) {
|
||||
@ -177,8 +88,13 @@ export class IonicComponent_OLD {
|
||||
return new delegateCase(instance);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
config.hostAttributes = config.hostAttributes || {};
|
||||
let className = (config.hostAttributes['class'] || '');
|
||||
let id = config.classId || config.selector.replace('ion-', '');
|
||||
config.hostAttributes['class'] = (className + ' ' + id + ' ' + id + '-' + platformMode).trim();
|
||||
|
||||
return config;
|
||||
}
|
||||
|
Reference in New Issue
Block a user