/** * This class is a container used by the {@link Ext.dataview.plugin.ListSwiper listswiper} * plugin to display information and controls when an item is swiped. */Ext.define('Ext.dataview.listswiper.Stepper', { extend: 'Ext.dataview.listswiper.Item', xtype: 'listswiperstepper', classCls: Ext.baseCSSPrefix + 'listswiperstepper', requires: [ 'Ext.fx.easing.EaseOut', 'Ext.util.translatable.CssTransform' ], config: { /** * @cfg {String} iconCls * One or more space separated CSS classes to be applied to the icon element. * See {@link Ext.Button#iconCls} for details. */ iconCls: null, /** * @cfg {String} text * The swipe action text. */ text: null, /** * @cfg {Object} undo * A config object for the undo button. */ undo: { docked: 'right', ui: 'listswiperstepper-trigger' }, /** * @private */ step: null, /** * @private */ side: null, /** * @cfg {Boolean/Object} animation * `true` for the default animation (`{ duration: 500, easing: 'ease-out' }`) or * a standard animation config object to be used for default swipe animations. */ animation: true }, classCls: Ext.baseCSSPrefix + 'listswiperstepper', layout: { type: 'hbox', align: 'center' }, scrollDock: null, sideCls: { left: Ext.baseCSSPrefix + 'side-left', right: Ext.baseCSSPrefix + 'side-right' }, tpl: '<div class="' + Ext.baseCSSPrefix + 'listswiperstepper-text">{text}</div>', template: [{ reference: 'bodyElement', cls: Ext.baseCSSPrefix + 'body-el', uiCls: 'body-el', children: [{ reference: 'iconWrapElement', cls: Ext.baseCSSPrefix + 'icon-wrap-el', uiCls: 'icon-wrap-el', children: [{ reference: 'iconElement', cls: Ext.baseCSSPrefix + 'icon-el ' + Ext.baseCSSPrefix + 'font-icon' }] }, { reference: 'innerElement', cls: Ext.baseCSSPrefix + 'inner-el', uiCls: 'inner-el' }] }], initialize: function () { var me = this; me.callParent(arguments); me.bodyElement.on('tap', 'onTap', me); }, onRender: function() { this.steps = this.buildSteps(); }, applyAnimation: function(animation) { if (animation === true) { animation = { duration: 500, easing: { type: 'ease-out' } }; } return animation; }, updateTranslationTarget: function (target) { this.translatable = Ext.Factory.translatable({ element: target }, 'csstransform'); }, revert: function(animate) { var me = this, action = me.getAction(); me.invokeAction(action, 'revert'); me.finalize(animate); }, /** * Dismisses the pending action by triggering the `dismiss` event. * See {@link Ext.dataview.plugin.ListSwiper#actionOnDismiss} for details. */ dismiss: function(animate) { var me = this, action = me.getAction(), state = me.getState(); if (state === 'undo') { me.invokeAction(action, 'commit'); } me.finalize(animate); }, sortFn: function(a, b) { return b.x - a.x; }, /** * Builds a lookup tables with effective thresholds (in pixel) to save some calculations * during the multiple drag events. This tables should be invalidated every time the list * is horizontally resized (which should not happen during swipe interactions). * @private */ buildSteps: function() { var me = this, item = me.ownerCmp, el = item.el, left = me.getLeftActions() || {}, right = me.getRightActions() || {}, width = el.getWidth(), steps = {r: [], l: []}, totalThreshold = 0, fn = function(side, index, action) { var threshold = Ext.util.Format.defaultValue(action.threshold, '25%'), number = parseInt(threshold, 10); if (isNaN(number)) { return; // skip this action! } if (typeof threshold === 'string' && threshold.indexOf('%') !== -1) { number = width * number / 100; } totalThreshold += number; steps[side].push({ action: action, side: side === 'r' ? 'right' : 'left', tx: side === 'r' ? -width : width, x: totalThreshold, key: action.key || index }); }; Ext.Object.each(left, fn.bind(this, 'l')); totalThreshold = 0; Ext.Object.each(right, fn.bind(this, 'r')); return steps; }, findStep: function(dx, force) { var me = this, res = {step: null, active: true}, steps = me.steps[dx > 0 ? 'l' : 'r'], ilen = steps.length, absDx = Math.abs(dx), step, i; for (i = ilen - 1; !res.step && i >= 0; --i) { step = steps[i]; if (step.x < absDx) { res.step = step; } } if (!res.step && force && ilen > 0) { res.step = steps[0]; res.active = false; } return res; }, updateStep: function(step, oldStep) { var me = this, action = (step && step.action), oldAction = (oldStep && oldStep.action), actionCls = action && action.cls, oldActionCls = oldAction && oldAction.cls, actionKeyCls = step && ('swipe-action-' + step.key), oldActionKeyCls = oldStep && ('swipe-action-' + oldStep.key), layout = me.getLayout(); if (step) { me.setSide(step.side); } me.replaceCls(oldActionCls, actionCls); me.replaceCls(oldActionKeyCls, actionKeyCls, Ext.baseCSSPrefix); me.syncStep(); }, updateSide: function(side, oldSide) { var me = this, classes = me.sideCls, layout = me.getLayout(); me.replaceCls(classes[oldSide], classes[side]); if (layout.setPack) { layout.setPack(side === 'right'? 'end' : 'start'); } }, onDragStart: function(evt) { evt.stopPropagation(); }, onDragMove: function(evt) { var me = this, plugin = me.owner, directionLock = plugin.getDirectionLock(), state = me.getState(), step = me.getStep(), translatable = me.translatable, dx = evt.deltaX, res; if (state === 'undo') { return; } if (state === 'consumed') { me.setState('reaquired'); translatable.stopAnimation(); } res = me.findStep(dx, true); // Direction Lock causes a friction pull if (directionLock && (res.step && step) && (res.step.side !== step.side)) { me.setState('overdrag'); res.step = null; } else { me.setState(res.step ? res.active ? 'active' : 'peek' : 'overdrag'); me.setStep(res.step || null); } // if there is no action for the current gesture, we still want to allow the user // to swipe the item but with friction to let him know that no action is available. translatable.translateAxis('x', res.step ? dx : dx * 0.1); evt.stopPropagation(); }, onDragEnd: function(evt) { var me = this, state = me.getState(), step = me.getStep(), dx = evt.deltaX, res; if (state === 'undo' || state === 'consumed') { return; } evt.stopPropagation(); res = me.findStep(dx, false); if (!res.step || res.step.side !== step.side) { me.finalize(true); return; } me.setStep(res.step); me.commit(true); }, commit: function(animate) { var me = this, step = me.getStep(), action = step.action, plugin = me.owner, translatable = me.translatable, delay, precommitResult, undo; me.setAction(action); precommitResult = me.invokeAction(action, 'precommit'); if (action.undoable) { me.setState('undo'); undo = me.add(me.getUndo()); undo.setHandler(me.onUndoTap.bind(me)); me.setSide(undo.getDocked() === 'left'? 'right' : 'left'); translatable.translateAxis('x', step.tx, me.getAnimation()); delay = plugin.getCommitDelay(); if (delay) { if (precommitResult && precommitResult.then) { precommitResult.then(function() { plugin.dismissAllTask.delay(delay); }); } else { plugin.dismissAllTask.delay(delay); } } } else { if (precommitResult && precommitResult.then) { precommitResult.then(me.invokeAction.bind(me, action, 'commit')).then(me.finalize.bind(me, animate)); } else { me.invokeAction(action, 'commit'); me.finalize(animate); } } }, finalize: function(animate) { var me = this, animation = me.getAnimation(), translatable = me.translatable; translatable.stopAnimation(); me.setState('consumed'); if (!animate) { me.doFinalize(); return; } if (translatable.x !== 0) { translatable.on({ animationend: 'doFinalize', single: true, scope: me }); translatable.translateAxis('x', 0, animate && animation); } }, doFinalize: function() { var me = this, plugin = me.owner, item = me.ownerCmp, state = me.getState(), translatable = me.translatable; // if the state is not consumed the user has picked up the swiper // before the close animation finished. if (state === 'consumed') { translatable.translateAxis('x', 0, false); if (!me.destroyed && item) { plugin.destroyItem(item); } } }, syncStep: function() { var me = this, item = me.ownerCmp, record = item.getRecord(), step = me.getStep(), ui = null, iconCls = '', text = '', action, data; if (step) { action = step.action; if (action) { ui = action.ui; iconCls = action.iconCls; text = action.text; data = action.data; } data = Ext.apply({ text: text }, data, record ? record.getData(true) : {}); this.setUi(ui); this.setIconCls(iconCls); me.setData(data); } else { this.setUi(null); this.setIconCls(null); me.setData(null); } }, updateIconCls: function (iconCls, oldIconCls) { this.iconElement.replaceCls(oldIconCls, iconCls); }, privates: { getRenderTarget: function () { return this.innerElement; }, onTap: function (evt) { var me = this, state = me.getState(), plugin = me.owner, dimissOnTap = plugin.getDismissOnTap(); evt.stopPropagation(); if (dimissOnTap) { me.dismiss(); } }, onUndoTap: function(button, evt) { evt.stopPropagation(); this.revert(); } }});