Skip to content

Commit

Permalink
Adds the ability to resize a floating titlePane widget.
Browse files Browse the repository at this point in the history 
Fixes #379 - mouse does not release after dragging a floating widge when using IE.
The delay before a titlePane starts dragging from the side pane is now configurable.
  • Loading branch information
@tmcgee
tmcgee committed Apr 2, 2016
1 parent 117dcdf commit 81f653e
Showing 1 changed file with 97 additions and 26 deletions.
123 changes: 97 additions & 26 deletions viewer/js/gis/dijit/FloatingTitlePane.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,23 @@ define([
'dojo/dom-construct',
'dojo/dom-attr',
'dojo/dom-class',
'dojox/layout/ResizeHandle',
'xstyle/css!dojox/layout/resources/ResizeHandle.css',
'xstyle/css!./FloatingTitlePane/css/FloatingTitlePane.css'
], function (declare, TitlePane, on, lang, Moveable, aspect, topic, win, winUtils, domGeom, domStyle, domConstruct, domAttr, domClass) {
], function (declare, TitlePane, on, lang, Moveable, aspect, topic, win, winUtils, domGeom, domStyle, domConstruct, domAttr, domClass, ResizeHandle) {

return declare([TitlePane], {
sidebarPosition: null,

canFloat: false,
isFloating: false,
isDragging: false,
dragDelay: 3,

resizable: false,
resizeOptions: {},
isResizing: false,

postCreate: function () {
if (this.canFloat) {
this.createDomNodes();
Expand All @@ -31,9 +43,9 @@ define([
startup: function () {
if (this.titleBarNode && this.canFloat) {
this._moveable = new Moveable(this.domNode, {
delay: 5,
handle: this.titleBarNode
});
this._titleBarHeight = domStyle.get(this.titleBarNode, 'height');
aspect.after(this._moveable, 'onMove', lang.hitch(this, '_dragging'), true);
aspect.after(this._moveable, 'onMoveStop', lang.hitch(this, '_endDrag'), true);
aspect.after(this._moveable, 'onMoveStart', lang.hitch(this, '_startDrag'), true);
Expand All @@ -59,36 +71,47 @@ define([
this._dockWidget();
evt.stopImmediatePropagation();
})));

if (this.resizable) {
var resOptions = lang.mixin({
targetId: this.id,
activeResize: true,
intermediateChanges: true,
startTopic: this.id + '/resize/start',
endTopic: this.id + '/resize/end'
}, this.resizeOptions);
this._resizer = new ResizeHandle(resOptions).placeAt(this.id);
domStyle.set(this._resizer.resizeHandle, 'display', 'none');
on(this._resizer, 'resize', lang.hitch(this, '_resizing'), true);
this.own(topic.subscribe(this.id + '/resize/start', lang.hitch(this, '_startResize')));
this.own(topic.subscribe(this.id + '/resize/end', lang.hitch(this, '_endResize')));
}
},

/* Methods related to Toggling the TitleBar */
toggle: function () {
if (this.isFloating && this.isDragging) {
if ((this.isFloating && this.isDragging) || this.resizing) {
return;
}
this.inherited(arguments);
},
_dockWidget: function () {
if (!this.isDragging) {
domAttr.remove(this.domNode, 'style');
domStyle.set(this.dockHandleNode, 'display', 'none');
domStyle.set(this.moveHandleNode, 'display', 'inline');
var dockedWidgets = this.sidebar.getChildren();
if (this.sidebarPosition > dockedWidgets.length || this.sidebarPosition < 0) {
this.sidebarPosition = dockedWidgets.length;
}
this.placeAt(this.sidebar, this.sidebarPosition);
this.isFloating = false;
this._updateTopic('dock');
}
_afterToggle: function () {
var evt = this.open ? 'open' : 'close';
this._updateTopic(evt);
},
_dragging: function () {

/* Methods for Dragging */
_dragging: function (mover) {
// add our own delay since the movable delay
// property breaks in all versions of Internet Explorer
if (Math.abs(mover.marginBox.l - this._moverBox.l) <= this.dragDelay || Math.abs(mover.marginBox.t - this._moverBox.t) <= this.dragDelay) {
return;
}
this.isDragging = true;
},
_startDrag: function (mover) {
if (!this.titleCursor) {
this.titleCursor = domStyle.get(this.titleBarNode, 'cursor');
}
domStyle.set(this.titleBarNode, 'cursor', 'move');

if (!this.isFloating) {
this._checkSidebarPosition();
domStyle.set(this.dockHandleNode, 'display', 'inline');
Expand All @@ -101,13 +124,19 @@ define([
}, computedStyle);
this.isFloating = true;
this.placeAt(win.body());
var titleHeight = domStyle.get(this.titleBarNode, 'height');
domStyle.set(this.domNode, {
top: (mover.marginBox.t - titleHeight) + 'px'
top: (this._moverBox.t - this._titleBarHeight) + 'px'
});

if (this.resizable && this._resizer && this._resizer.resizeHandle) {
domStyle.set(this._resizer.resizeHandle, 'display', 'block');
}
this._updateTopic('undock');
}
},
_startDrag: function (mover) {
this._moverBox = mover.marginBox;
},
_endDrag: function () {
// summary:
// Called after dragging the Dialog. Saves the position of the dialog in the viewport,
Expand Down Expand Up @@ -144,6 +173,28 @@ define([
});
}
},

/* Methods for Docking and Undocking */
_dockWidget: function () {
if (!this.isDragging) {
domAttr.remove(this.domNode, 'style');
domStyle.set(this.dockHandleNode, 'display', 'none');
domStyle.set(this.moveHandleNode, 'display', 'inline');
var dockedWidgets = this.sidebar.getChildren();
if (this.sidebarPosition > dockedWidgets.length || this.sidebarPosition < 0) {
this.sidebarPosition = dockedWidgets.length;
}
this.placeAt(this.sidebar, this.sidebarPosition);
this.isFloating = false;
this._updateTopic('dock');
}
if (this.resizable && this._resizer && this._resizer.resizeHandle) {
domStyle.set(this._resizer.resizeHandle, 'display', 'none');
if (this._initialDimensions) {
topic.publish(this.id + '/resize/resize', this._initialDimensions);
}
}
},
_updateWidgetSidebarPosition: function (msg) {
var id = msg.widgetID, pos = msg.sidebarPosition, action = msg.action;

Expand Down Expand Up @@ -187,6 +238,30 @@ define([
}
}
},

/* Methods for Resizing */
_resizing: function (evt) {
this.isResizing = true;
var newDim = this._resizer._getNewCoords(evt, this, 'margin');
if (newDim) {
topic.publish(this.id + '/resize/resize', {
h: this._resizeDimensions.h + (newDim.h - this._resizer.startSize.h),
w: this._resizeDimensions.w + (newDim.w - this._resizer.startSize.w)
});
}
},
_startResize: function () {
this.isResizing = true;
this._resizeDimensions = domGeom.getContentBox(this.containerNode);
if (!this._initialDimensions) {
this._initialDimensions = this._resizeDimensions;
}
},
_endResize: function () {
this.isResizing = false;
domStyle.set(this.domNode, 'height', 'auto');
},

_updateTopic: function (msg) {
topic.publish('titlePane/event', {
category: 'Titlepane Event',
Expand All @@ -196,10 +271,6 @@ define([
sidebarPosition: this.sidebarPosition,
value: msg
});
},
_afterToggle: function () {
var evt = this.open ? 'open' : 'close';
this._updateTopic(evt);
}
});
});

0 comments on commit 81f653e

Please sign in to comment.