/**
* @private
*/
Ext.define('Ext.ux.colorpick.SliderController', {
extend: 'Ext.app.ViewController',
alias: 'controller.colorpick-slidercontroller',
// After the component is rendered
boxReady: function(view) {
var me = this,
container = me.getDragContainer(),
dragHandle = me.getDragHandle(),
dd = dragHandle.dd;
// configure draggable constraints
dd.constrain = true;
dd.constrainTo = container.getEl();
dd.initialConstrainTo = dd.constrainTo; // needed otherwise error EXTJS-13187
// event handlers
dd.on('drag', me.onHandleDrag, me);
},
getDragHandle: function() {
return this.view.lookupReference('dragHandle');
},
getDragContainer: function() {
return this.view.lookupReference('dragHandleContainer');
},
// Fires when handle is dragged; fires "handledrag" event on the slider
// with parameter "percentY" 0-1, representing the handle position on the slider
// relative to the height
onHandleDrag: function(e) {
var me = this,
view = me.getView(),
container = me.getDragContainer(),
dragHandle = me.getDragHandle(),
y = dragHandle.getY() - container.getY(),
containerEl = container.getEl(),
containerHeight = containerEl.getHeight(),
yRatio = y / containerHeight;
// Adjust y ratio for dragger always being 1 pixel from the edge on the bottom
if (yRatio > 0.99) {
yRatio = 1;
}
view.fireEvent('handledrag', yRatio);
},
// Whenever we mousedown over the slider area
onMouseDown: function(e) {
var me = this,
dragHandle = me.getDragHandle(),
y = e.getY();
// position drag handle accordingly
dragHandle.setY(y);
me.onHandleDrag();
dragHandle.el.repaint();
// tie into the default dd mechanism
dragHandle.dd.onMouseDown(e, dragHandle.dd.el);
},
// Whenever we start a drag over the colormap area
onDragStart: function(e) {
var me = this,
dragHandle = me.getDragHandle();
// tie into the default dd mechanism
dragHandle.dd.onDragStart(e, dragHandle.dd.el);
},
onMouseUp: function() {
var dragHandle = this.getDragHandle();
dragHandle.dd.dragEnded = true; // work around DragTracker bug
}
});