Skip to content

Commit

Permalink
Merge pull request #530 from cmv/feature/resize-floating-titlePane
Browse files Browse the repository at this point in the history 
Feature/resize floating title pane
  • Loading branch information
@DavidSpriggs
DavidSpriggs committed Apr 3, 2016
2 parents 679dec0 + ff21f6f commit 36961dd
Show file tree
Hide file tree
Showing 11 changed files with 193 additions and 111 deletions.
4 changes: 1 addition & 3 deletions viewer/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,7 @@ body, html {
margin-bottom: 2px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #FFFFFF;
}
.dbootstrap .dijitTitlePaneTitle {
color: #666666 !important;
Expand All @@ -229,9 +230,6 @@ body, html {
.dijitSliderBarContainerH {
z-index: 0 !important;
}
.dbootstrap .dijitTitlePaneContentInner {
background-color: #FFFFFF;
}
.dijitBorderContainerNoGutterPane {
z-index: auto;
}
Expand Down
9 changes: 9 additions & 0 deletions viewer/js/config/viewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -493,6 +493,15 @@ define([
position: 9,
path: 'gis/dijit/StreetView',
title: 'Google Street View',
paneOptions: {
resizable: true,
resizeOptions: {
minSize: {
w: 250,
h: 250
}
}
},
options: {
map: true,
mapClickMode: true,
Expand Down
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);
}
});
});
36 changes: 23 additions & 13 deletions viewer/js/gis/dijit/StreetView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,17 @@ define([
'dojo/text!./StreetView/templates/StreetView.html',
'esri/symbols/PictureMarkerSymbol',
'dojo/dom-style',
'dojo/dom-geometry',
'esri/geometry/Point',
'esri/SpatialReference',
'dijit/MenuItem',
'//cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js',
'dojo/i18n!./StreetView/nls/resource',

'dijit/form/Button',
'dijit/form/ToggleButton',
'xstyle/css!./StreetView/css/StreetView.css',
'gis/plugins/async!//maps.google.com/maps/api/js?v=3'
], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, lang, aspect, topic, GraphicsLayer, Graphic, SimpleRenderer, template, PictureMarkerSymbol, domStyle, Point, SpatialReference, MenuItem, proj4, i18n) {
], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, lang, aspect, topic, GraphicsLayer, Graphic, SimpleRenderer, template, PictureMarkerSymbol, domStyle, domGeom, Point, SpatialReference, MenuItem, proj4, i18n) {

return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
widgetsInTemplate: true,
Expand Down Expand Up @@ -68,11 +69,8 @@ define([
this.onLayoutChange(this.parentWidget.open);
})));
}
this.own(aspect.after(this.parentWidget, 'resize', lang.hitch(this, function () {
if (this.panorama) {
google.maps.event.trigger(this.panorama, 'resize');
}
})));
this.own(aspect.after(this.parentWidget, 'resize', lang.hitch(this, 'resize')));
this.own(topic.subscribe(this.parentWidget.id + '/resize/resize', lang.hitch(this, 'resize')));
}

// spatialreference.org uses the old
Expand Down Expand Up @@ -111,9 +109,6 @@ define([
this.panorama = new google.maps.StreetViewPanorama(this.panoNode, this.panoOptions);
this.panoramaService = new google.maps.StreetViewService();
}
if (this.panorama) {
google.maps.event.trigger(this.panorama, 'resize');
}
},
onClose: function () {
// end streetview on close of title pane
Expand All @@ -130,14 +125,20 @@ define([
}
},
placePoint: function () {
this.disconnectMapClick();
if (this.streetViewButtonDijit.get('checked')) {
this.disconnectMapClick();
} else {
this.connectMapClick();
}
//get map click, set up listener in post create
},
disconnectMapClick: function () {
this.streetViewButtonDijit.set('checked', true);
this.map.setMapCursor('crosshair');
topic.publish('mapClickMode/setCurrent', 'streetview');
},
connectMapClick: function () {
this.streetViewButtonDijit.set('checked', false);
this.map.setMapCursor('auto');
topic.publish('mapClickMode/setDefault');
},
Expand Down Expand Up @@ -184,9 +185,9 @@ define([
};
}

domStyle.set(this.streetViewInstructions, 'display', 'none');
if (geometry) {
domStyle.set(this.noStreetViewResults, 'display', 'none');
domStyle.set(this.loadingStreetView, 'display', 'inline-block');
this.getPanoramaLocation(geometry);
} else {
this.setPanoPlace = null;
Expand All @@ -205,7 +206,6 @@ define([
google.maps.event.addListener(this.panorama, 'pov_changed', lang.hitch(this, 'setPlaceMarkerRotation'));
},
getPanoramaByLocationComplete: function (geoPoint, StreetViewPanoramaData, StreetViewStatus) {
domStyle.set(this.loadingStreetView, 'display', 'none');
if (StreetViewStatus === 'OK') {
this.disableStreetViewClick();
var place = new google.maps.LatLng(geoPoint.y, geoPoint.x);
Expand All @@ -227,6 +227,16 @@ define([
});
}
},
resize: function (options) {
if (options && options.h) {
domGeom.setContentSize(this.containerNode, {
h: (options.h - 2)
});
}
if (this.panorama) {
google.maps.event.trigger(this.panorama, 'resize');
}
},
setPlaceMarkerPosition: function () {
if (!this.placeMarker || this.pointGraphics.graphics.length === 0) {
this.placeMarker = new Graphic();
Expand Down
Loading

0 comments on commit 36961dd

Please sign in to comment.