187 lines
4.5 KiB
JavaScript
187 lines
4.5 KiB
JavaScript
/**
|
|
* A general sheet class. This renderable container provides base support for orientation-aware transitions for popup or
|
|
* side-anchored sliding Panels.
|
|
*
|
|
* In most cases, you should use {@link Ext.ActionSheet}, {@link Ext.MessageBox}, {@link Ext.picker.Picker}, or {@link Ext.picker.Date}.
|
|
*/
|
|
Ext.define('Ext.Sheet', {
|
|
extend: 'Ext.Panel',
|
|
|
|
xtype: 'sheet',
|
|
|
|
requires: ['Ext.Button', 'Ext.fx.Animation'],
|
|
|
|
config: {
|
|
/**
|
|
* @cfg
|
|
* @inheritdoc
|
|
*/
|
|
baseCls: Ext.baseCSSPrefix + 'sheet',
|
|
|
|
/**
|
|
* @cfg
|
|
* @inheritdoc
|
|
*/
|
|
modal: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} centered
|
|
* Whether or not this component is absolutely centered inside its container.
|
|
* @accessor
|
|
* @evented
|
|
*/
|
|
centered: true,
|
|
|
|
/**
|
|
* @cfg {Boolean} stretchX `true` to stretch this sheet horizontally.
|
|
*/
|
|
stretchX: null,
|
|
|
|
/**
|
|
* @cfg {Boolean} stretchY `true` to stretch this sheet vertically.
|
|
*/
|
|
stretchY: null,
|
|
|
|
/**
|
|
* @cfg {String} enter
|
|
* The viewport side used as the enter point when shown. Valid values are 'top', 'bottom', 'left', and 'right'.
|
|
* Applies to sliding animation effects only.
|
|
*/
|
|
enter: 'bottom',
|
|
|
|
/**
|
|
* @cfg {String} exit
|
|
* The viewport side used as the exit point when hidden. Valid values are 'top', 'bottom', 'left', and 'right'.
|
|
* Applies to sliding animation effects only.
|
|
*/
|
|
exit: 'bottom',
|
|
|
|
/**
|
|
* @cfg
|
|
* @inheritdoc
|
|
*/
|
|
showAnimation: !Ext.browser.is.AndroidStock2 ? {
|
|
type: 'slideIn',
|
|
duration: 250,
|
|
easing: 'ease-out'
|
|
} : null,
|
|
|
|
/**
|
|
* @cfg
|
|
* @inheritdoc
|
|
*/
|
|
hideAnimation: !Ext.browser.is.AndroidStock2 ? {
|
|
type: 'slideOut',
|
|
duration: 250,
|
|
easing: 'ease-in'
|
|
} : null
|
|
},
|
|
|
|
isInputRegex: /^(input|textarea|select|a)$/i,
|
|
|
|
beforeInitialize: function() {
|
|
var me = this;
|
|
// Temporary fix for a mysterious bug on iOS where double tapping on a sheet
|
|
// being animated from the bottom shift the whole body up
|
|
Ext.os.is.iOS && this.element.dom.addEventListener('touchstart', function(e) {
|
|
if (!me.isInputRegex.test(e.target.tagName)) {
|
|
e.preventDefault();
|
|
}
|
|
}, true);
|
|
},
|
|
|
|
platformConfig: [{
|
|
theme: ['Windows'],
|
|
enter: 'top',
|
|
exit: 'top'
|
|
}],
|
|
|
|
applyHideAnimation: function(config) {
|
|
var exit = this.getExit(),
|
|
direction = exit;
|
|
|
|
if (exit === null) {
|
|
return null;
|
|
}
|
|
|
|
if (config === true) {
|
|
config = {
|
|
type: 'slideOut'
|
|
};
|
|
}
|
|
if (Ext.isString(config)) {
|
|
config = {
|
|
type: config
|
|
};
|
|
}
|
|
var anim = Ext.factory(config, Ext.fx.Animation);
|
|
|
|
if (anim) {
|
|
if (exit == 'bottom') {
|
|
direction = 'down';
|
|
}
|
|
if (exit == 'top') {
|
|
direction = 'up';
|
|
}
|
|
anim.setDirection(direction);
|
|
}
|
|
return anim;
|
|
},
|
|
|
|
applyShowAnimation: function(config) {
|
|
var enter = this.getEnter(),
|
|
direction = enter;
|
|
|
|
if (enter === null) {
|
|
return null;
|
|
}
|
|
|
|
if (config === true) {
|
|
config = {
|
|
type: 'slideIn'
|
|
};
|
|
}
|
|
if (Ext.isString(config)) {
|
|
config = {
|
|
type: config
|
|
};
|
|
}
|
|
var anim = Ext.factory(config, Ext.fx.Animation);
|
|
|
|
if (anim) {
|
|
if (enter == 'bottom') {
|
|
direction = 'down';
|
|
}
|
|
if (enter == 'top') {
|
|
direction = 'up';
|
|
}
|
|
anim.setBefore({
|
|
display: null
|
|
});
|
|
anim.setReverse(true);
|
|
anim.setDirection(direction);
|
|
}
|
|
return anim;
|
|
},
|
|
|
|
updateStretchX: function(newStretchX) {
|
|
this.getLeft();
|
|
this.getRight();
|
|
|
|
if (newStretchX) {
|
|
this.setLeft(0);
|
|
this.setRight(0);
|
|
}
|
|
},
|
|
|
|
updateStretchY: function(newStretchY) {
|
|
this.getTop();
|
|
this.getBottom();
|
|
|
|
if (newStretchY) {
|
|
this.setTop(0);
|
|
this.setBottom(0);
|
|
}
|
|
}
|
|
});
|