Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/mobile sidebar #726

Merged
merged 10 commits into from
Jun 14, 2017
25 changes: 25 additions & 0 deletions viewer/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,31 @@ body, html {
overflow: hidden;
background: url("../images/noisy_grid.png") #fff;
}
.cmv-widget {
position:absolute;
z-index:40;
}
.cmv-widget-mapinfo {
bottom: 0;
left: 0;
}
.cmv-widget-basemaps {
right: 20px;
top: 20px;
}
.cmv-widget-growler {
right: 20px;
top: 60px;
width: 250px;
}
.cmv-widgets-left {
left: 19px;
top: 87px;
}
.cmv-widget-geocoder {
left: 64px;
top: 20px;
}
.panetop {
border-top: 1px solid #B5BCC7;
}
Expand Down
13 changes: 11 additions & 2 deletions viewer/js/config/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,12 @@
'viewer/_ConfigMixin', // manage the Configuration
'viewer/_LayoutMixin', // build and manage the Page Layout and User Interface
'viewer/_MapMixin', // build and manage the Map
'viewer/_WidgetsMixin' // build and manage the Widgets
'viewer/_WidgetsMixin', // build and manage the Widgets

// 'viewer/_WebMapMixin' // for WebMaps

'viewer/_SidebarMixin' // for mobile sidebar

//'config/_customMixin'

], function (
Expand All @@ -46,9 +49,11 @@
_ConfigMixin,
_LayoutMixin,
_MapMixin,
_WidgetsMixin
_WidgetsMixin,

// _WebMapMixin

_SidebarMixin
//_MyCustomMixin

) {
Expand All @@ -61,6 +66,10 @@
// for the most part they are interchangeable, except _ConfigMixin
// and _ControllerBase
//

// Mixin for Mobile Sidebar
_SidebarMixin,

_LayoutMixin,
_WidgetsMixin,
// _WebMapMixin,
Expand Down
1 change: 1 addition & 0 deletions viewer/js/config/nls/es/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ define({
legend: 'Leyenda',
locale: 'Lugar',
print: 'Imprimir',
search: 'Buscar',
streetview: 'Google Street View'
}
}
Expand Down
1 change: 1 addition & 0 deletions viewer/js/config/nls/fr/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ define({
legend: 'Légende',
locale: 'Lieu',
print: 'Impression',
search: 'Rechercher',
streetview: 'Google StreetView'
}
}
Expand Down
1 change: 1 addition & 0 deletions viewer/js/config/nls/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ define({
legend: 'Legend',
locale: 'Locale',
print: 'Print',
search: 'Search',
streetview: 'Google Street View'
}
}
Expand Down
1 change: 1 addition & 0 deletions viewer/js/config/nls/pt-br/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ define({
legend: 'Legendas',
locale: 'Localidade',
print: 'Imprimir',
search: 'Pesquisar',
streetview: 'Google Street View'
}
}
Expand Down
1 change: 1 addition & 0 deletions viewer/js/config/nls/pt-pt/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ define({
legend: 'Legendas',
locale: 'Localidade',
print: 'Imprimir',
search: 'Pesquisar',
streetview: 'Google Street View'
}
}
Expand Down
41 changes: 28 additions & 13 deletions viewer/js/config/viewer.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ define([
'esri/layers/ImageParameters',
'gis/plugins/Google',
'dojo/i18n!./nls/main',
'dojo/topic'
], function (units, Extent, esriConfig, /*urlUtils,*/ GeometryService, ImageParameters, GoogleMapsLoader, i18n, topic) {
'dojo/topic',
'dojo/sniff'
], function (units, Extent, esriConfig, /*urlUtils,*/ GeometryService, ImageParameters, GoogleMapsLoader, i18n, topic, has) {

// url to your proxy page, must be on same machine hosting you app. See proxy folder for readme.
esriConfig.defaults.io.proxyUrl = 'proxy/proxy.ashx';
Expand Down Expand Up @@ -120,6 +121,18 @@ define([
pageTitle: i18n.viewer.titles.pageTitle
},

layout: {
/* possible options for sidebar layout:
true - always use mobile sidebar, false - never use mobile sidebar,
'mobile' - use sidebar for phones and tablets, 'phone' - use sidebar for phones,
'touch' - use sidebar for all touch devices, 'tablet' - use sidebar for tablets only (not sure why you'd do this?),
other feature detection supported by dojo/sniff and dojo/has- http://dojotoolkit.org/reference-guide/1.10/dojo/sniff.html

default value is 'phone'
*/
//sidebar: 'phone'
},

// user-defined layer types
/*
layerTypes: {
Expand Down Expand Up @@ -306,15 +319,18 @@ define([
},
search: {
include: true,
type: 'domNode',
type: has('phone') ? 'titlePane' : 'domNode',
path: 'esri/dijit/Search',
srcNodeRef: 'geocoderButton',
title: i18n.viewer.widgets.search,
iconClass: 'fa-search',
position: 0,
options: {
map: true,
visible: true,
enableInfoWindow: false,
enableButtonMode: true,
expanded: false
enableButtonMode: has('phone') ? false : true,
expanded: has('phone') ? true : false
}
},
basemaps: {
Expand Down Expand Up @@ -384,7 +400,7 @@ define([
}
},
overviewMap: {
include: true,
include: has('phone') ? false : true,
id: 'overviewMap',
type: 'map',
path: 'esri/dijit/OverviewMap',
Expand Down Expand Up @@ -564,7 +580,7 @@ define([
}
},
editor: {
include: true,
include: has('phone') ? false : true,
id: 'editor',
type: 'titlePane',
path: 'gis/dijit/Editor',
Expand Down Expand Up @@ -617,20 +633,19 @@ define([
},
locale: {
include: true,
type: has('phone') ? 'titlePane' : 'domNode',
id: 'locale',
//type: 'titlePane',
//position: 0,
//open: true,
type: 'domNode',
position: 0,
srcNodeRef: 'geocodeDijit',
path: 'gis/dijit/Locale',
title: i18n.viewer.widgets.locale,
iconClass: 'fa-flag',
options: {
style: 'margin-left: 30px;'
style: has('phone') ? null : 'margin-left: 30px;'
}
},
help: {
include: true,
include: has('phone') ? false : true,
id: 'help',
type: 'floating',
path: 'gis/dijit/Help',
Expand Down
19 changes: 13 additions & 6 deletions viewer/js/viewer/_LayoutMixin.js
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,12 @@ define([
}
},
collapseButtons: {},

loadConfig: function () {
this.detectTouchDevices();
return this.inherited(arguments);
},

postConfig: function () {
this.layoutDeferred = new Deferred();
return this.inherited(arguments);
Expand All @@ -73,7 +79,7 @@ define([

this.addTopics();
this.addTitles();
this.detectTouchDevices();
this.setPhoneInfoWindow();
this.initPanes();

this.mapDeferred.then(lang.hitch(this, 'createPanes'));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just realized, this doesn't but should call

this.inherited(arguments);

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It does on line 89. Is that not correct?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh! yes, I just couldn't see it. I'm still figuring out how this review tool works...

Expand Down Expand Up @@ -321,7 +327,6 @@ define([
this.positionSideBarToggle(id);
},

// simple feature detection. kinda like dojox/mobile without the overhead
detectTouchDevices: function () {
if (has('touch') && (has('ios') || has('android') || has('bb'))) {
has.add('mobile', true);
Expand All @@ -330,11 +335,13 @@ define([
} else {
has.add('tablet', true);
}
}
},

// use the mobile popup for phones
if (has('phone') && !this.config.mapOptions.infoWindow) {
this.config.mapOptions.infoWindow = new PopupMobile(null, put('div'));
}
setPhoneInfoWindow: function () {
// use the mobile popup for phones
if (has('phone') && !this.config.mapOptions.infoWindow) {
this.config.mapOptions.infoWindow = new PopupMobile(null, put('div'));
}

}
Expand Down
129 changes: 129 additions & 0 deletions viewer/js/viewer/_SidebarMixin.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
define([
'dojo/_base/declare',
'dojo/_base/lang',
'dojo/dom',
'dojo/sniff',
'dojo/Deferred',
'module',

'put-selector'

], function (
declare,
lang,
dom,
has,
Deferred,
module,

put,

Sidebar
) {

return declare(null, {

postConfig: function () {
this.config.layout = this.config.layout || {};
this._checkForSidebarLayout();

if (this.config.layout.sidebar) {
this.inherited(arguments);
this.config.panes = this.mixinDeep(this.config.panes || {}, {
left: {
collapsible: false,
style: 'display:none !important'
}
});
var deferred = new Deferred();
require([
module.uri.substring(0, module.uri.lastIndexOf('/')) + '/sidebar/Sidebar.js'
], lang.hitch(this, function (sidebar) {
Sidebar = sidebar;
this.mapDeferred.then(lang.hitch(this, '_createSidebar'));
deferred.resolve();
}));
return deferred;
}
return this.inherited(arguments);
},

_checkForSidebarLayout: function () {
var sidebar = this.config.layout.sidebar;

switch (sidebar) {
// all devices
case true:
break;

// no devices
case false:
break;

// tablets and phones
case 'mobile':
if (has('mobile')) {
sidebar = true;
}
break;

// phones
case 'phone':
if (has('phone')) {
sidebar = true;
}
break;
default:
// perhaps they've configured something we don't expect
if (typeof(sidebar) === 'string') {
if (has(sidebar)) {
sidebar = true;
}
// default is just for phones
} else if (has('phone')) {
sidebar = true;
}
break;
}
this.config.layout.sidebar = sidebar;
},

_createSidebar: function () {
var mapContainer = dom.byId(this.map.id);
//create controls div
var mapControlsNode = put(this.map.root, 'div.sidebar-map');
//move the slider into the controls div
put(mapControlsNode, '>', this.map._slider);
//create sidebar
this.sidebar = new Sidebar({
map: this.map,
mapContainer: mapContainer,
collapseSyncNode: mapControlsNode
}, put(this.map.root, 'div'));
this.sidebar.startup();

this._createTitlePaneWidget = this._createTabPaneWidget;
},

_createTabPaneWidget: function (parentId, widgetConfig) {
var tabOptions = widgetConfig.tabOptions || {
id: parentId,
title: widgetConfig.title,
iconClass: widgetConfig.iconClass
};

var tab = this.sidebar.createTab(tabOptions);
tab.contentNode = put(tab.containerNode, 'div.sidebar-widget div.sidebar-widget-content');

var node = put(tab.contentNode, 'div');
widgetConfig.type = 'domNode';
widgetConfig.srcNodeRef = node;
this.createWidgets([
{
options: widgetConfig
}
]);
}

});
});
Loading