From 0d491fd3cdd3cf294b863cbbb0dac52be2c5317a Mon Sep 17 00:00:00 2001 From: Tim McGee Date: Tue, 13 Jun 2017 21:56:05 -0700 Subject: [PATCH 1/5] Don't load a titlePane widget until the pane is opened. Should this be the default or optional? --- viewer/js/config/viewer.js | 1 + viewer/js/viewer/_WidgetsMixin.js | 21 +++++++++++++++++---- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/viewer/js/config/viewer.js b/viewer/js/config/viewer.js index e3511b6ff..5c8e6b20b 100644 --- a/viewer/js/config/viewer.js +++ b/viewer/js/config/viewer.js @@ -333,6 +333,7 @@ define([ title: i18n.viewer.widgets.identify, iconClass: 'fa-info-circle', open: false, + loadOnOpen: false, position: 3, options: 'config/identify' }, diff --git a/viewer/js/viewer/_WidgetsMixin.js b/viewer/js/viewer/_WidgetsMixin.js index 8ab99d897..5f075945f 100644 --- a/viewer/js/viewer/_WidgetsMixin.js +++ b/viewer/js/viewer/_WidgetsMixin.js @@ -2,6 +2,7 @@ define([ 'dojo/_base/declare', 'dojo/_base/array', 'dojo/_base/lang', + 'dojo/aspect', 'dojo/promise/all', 'dojo/Deferred', @@ -17,6 +18,7 @@ define([ declare, array, lang, + aspect, promiseAll, Deferred, @@ -158,20 +160,31 @@ define([ this._showWidgetLoader(pnl); } - // 2 ways to use require to accommodate widgets that may have an optional separate configuration file var deferred = new Deferred(); + if ((widgetConfig.type === 'titlePane') && (widgetConfig.loadOnOpen !== false) && !pnl.get('open')) { + widgetConfig.delayHandle = aspect.after(pnl, 'toggle', lang.hitch(this, '_loadWidget', widgetConfig, deferred)); + } else { + this._loadWidget(widgetConfig, deferred); + } + return deferred; + }, + + _loadWidget: function (widgetConfig, deferred) { + // 2 ways to use require to accommodate widgets that may have an optional separate configuration file if (typeof(widgetConfig.options) === 'string') { require([widgetConfig.options, widgetConfig.path], lang.hitch(this, function (options, WidgetClass) { - deferred.resolve(); this.createWidget(widgetConfig, options, WidgetClass); + deferred.resolve(); })); } else { require([widgetConfig.path], lang.hitch(this, function (WidgetClass) { - deferred.resolve(); this.createWidget(widgetConfig, widgetConfig.options, WidgetClass); + deferred.resolve(); })); } - return deferred; + if (widgetConfig.delayHandle) { + widgetConfig.delayHandle.remove(); + } }, createWidget: function (widgetConfig, options, WidgetClass) { From 2031079258e5e23c5d5c4810492830ddcaffeee9 Mon Sep 17 00:00:00 2001 From: Tim McGee Date: Sun, 25 Jun 2017 09:36:38 +0900 Subject: [PATCH 2/5] move logic for Help link to FloatingWidgetDialog. this allows support for lazy-load of floating widgets. also allows re-usability for other widgets.. add support for iconClass for Floating widgets. --- viewer/js/config/viewer.js | 7 +++++++ viewer/js/gis/dijit/FloatingWidgetDialog.js | 21 +++++++++++++++++-- .../css/FloatingWidgetDialog.css | 3 +++ viewer/js/gis/dijit/Help.js | 11 +--------- viewer/js/gis/dijit/Help/css/Help.css | 16 +++++++------- viewer/js/gis/dijit/Help/nls/es/resource.js | 1 - viewer/js/gis/dijit/Help/nls/fr/resource.js | 1 - .../js/gis/dijit/Help/nls/pt-br/resource.js | 1 - .../js/gis/dijit/Help/nls/pt-pt/resource.js | 1 - viewer/js/gis/dijit/Help/nls/resource.js | 1 - viewer/js/viewer/_WidgetsMixin.js | 3 ++- 11 files changed, 40 insertions(+), 26 deletions(-) create mode 100644 viewer/js/gis/dijit/FloatingWidgetDialog/css/FloatingWidgetDialog.css diff --git a/viewer/js/config/viewer.js b/viewer/js/config/viewer.js index 323248716..f305d0a6d 100644 --- a/viewer/js/config/viewer.js +++ b/viewer/js/config/viewer.js @@ -651,6 +651,13 @@ define([ type: 'floating', path: 'gis/dijit/Help', title: i18n.viewer.widgets.help, + iconClass: 'fa-info-circle', + paneOptions: { + draggable: false, + html: 'link'.replace('link', i18n.viewer.widgets.help), + domTarget: 'helpDijit', + style: 'height:345px;width:450px;' + }, options: {} } diff --git a/viewer/js/gis/dijit/FloatingWidgetDialog.js b/viewer/js/gis/dijit/FloatingWidgetDialog.js index 42a0170fa..ee25613ca 100644 --- a/viewer/js/gis/dijit/FloatingWidgetDialog.js +++ b/viewer/js/gis/dijit/FloatingWidgetDialog.js @@ -1,13 +1,30 @@ define([ 'dojo/_base/declare', - 'dijit/Dialog' -], function (declare, Dialog) { + 'dijit/Dialog', + 'dojo/_base/lang', + 'dojo/on', + 'dojo/dom-construct', + + 'xstyle/css!./FloatingWidgetDialog/css/FloatingWidgetDialog.css' +], function (declare, Dialog, lang, on, domConstruct) { return declare([Dialog], { declaredClass: 'gis.dijit.FloatingWidget', title: 'Floating Widget', draggable: true, 'class': 'floatingWidget', + postCreate: function () { + if (this.iconClass) { + this.iconNode = domConstruct.create('span', { + 'class': 'titlePaneIcon fa fa-fw ' + this.iconClass + }, this.titleNode, 'before'); + } + if (this.html && this.domTarget) { + var link = domConstruct.place(this.html, this.domTarget); + this.own(on(link, 'click', lang.hitch(this, 'show'))); + } + this.inherited(arguments); + }, close: function () { this.hide(); }, diff --git a/viewer/js/gis/dijit/FloatingWidgetDialog/css/FloatingWidgetDialog.css b/viewer/js/gis/dijit/FloatingWidgetDialog/css/FloatingWidgetDialog.css new file mode 100644 index 000000000..0947a7266 --- /dev/null +++ b/viewer/js/gis/dijit/FloatingWidgetDialog/css/FloatingWidgetDialog.css @@ -0,0 +1,3 @@ +.dijitDialogTitleBar .titlePaneIcon { + margin: 0 4px 0 0; +} \ No newline at end of file diff --git a/viewer/js/gis/dijit/Help.js b/viewer/js/gis/dijit/Help.js index 461a374d1..5375d3b03 100644 --- a/viewer/js/gis/dijit/Help.js +++ b/viewer/js/gis/dijit/Help.js @@ -4,8 +4,6 @@ define([ 'dijit/_TemplatedMixin', 'dijit/_WidgetsInTemplateMixin', 'gis/dijit/_FloatingWidgetMixin', - 'dojo/dom-construct', - 'dojo/on', 'dojo/_base/lang', 'dojo/aspect', 'dojo/text!./Help/templates/HelpDialog.html', @@ -14,26 +12,19 @@ define([ 'dijit/layout/TabContainer', 'dijit/layout/ContentPane', 'xstyle/css!./Help/css/Help.css' -], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _FloatingWidgetMixin, domConstruct, on, lang, aspect, template, i18n) { +], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _FloatingWidgetMixin, lang, aspect, template, i18n) { return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _FloatingWidgetMixin], { widgetsInTemplate: true, templateString: template, i18n: i18n, - html: 'link'.replace('link', i18n.link), - domTarget: 'helpDijit', - draggable: false, baseClass: 'helpDijit', postCreate: function () { this.inherited(arguments); - this.parentWidget.draggable = this.draggable; if (this.parentWidget.toggleable) { this.own(aspect.after(this.parentWidget, 'toggle', lang.hitch(this, function () { this.containerNode.resize(); }))); - } else { - var help = domConstruct.place(this.html, this.domTarget); - on(help, 'click', lang.hitch(this.parentWidget, 'show')); } }, onOpen: function () { diff --git a/viewer/js/gis/dijit/Help/css/Help.css b/viewer/js/gis/dijit/Help/css/Help.css index 5900f2ba1..d153d3176 100644 --- a/viewer/js/gis/dijit/Help/css/Help.css +++ b/viewer/js/gis/dijit/Help/css/Help.css @@ -1,21 +1,21 @@ -.helpDijit .listdbootstrapFix{ +.helpDijit .listdbootstrapFix { padding: 0 0 0 25px; } .helpDijit .helpContainer { - padding: 0px; + padding: 0; } + .floatingWidget .helpDijit .helpContainer { padding: 5px; } + .helpDijit .helpNode { - width: 98%; - height: 325px; -} -.floatingWidget .helpDijit .helpNode { - width: 450px; + height:280px; + width: 100%; } + .helpDijit .helpTabContainer { - width: 100%; height: 100%; + width: 100%; } \ No newline at end of file diff --git a/viewer/js/gis/dijit/Help/nls/es/resource.js b/viewer/js/gis/dijit/Help/nls/es/resource.js index 6c4cea412..3f80ea63d 100644 --- a/viewer/js/gis/dijit/Help/nls/es/resource.js +++ b/viewer/js/gis/dijit/Help/nls/es/resource.js @@ -1,5 +1,4 @@ define ({ - link: 'Ayuda', navigation: { title: 'Navegación', description: 'Mapa de navegación a través del ratón y el teclado:', diff --git a/viewer/js/gis/dijit/Help/nls/fr/resource.js b/viewer/js/gis/dijit/Help/nls/fr/resource.js index 6bda3e07f..719cc48f9 100644 --- a/viewer/js/gis/dijit/Help/nls/fr/resource.js +++ b/viewer/js/gis/dijit/Help/nls/fr/resource.js @@ -1,5 +1,4 @@ define ({ - link: 'Aide', navigation: { title: 'Navigation', description: 'Navigation dans la carte en utilisant la souris et le clavier:', diff --git a/viewer/js/gis/dijit/Help/nls/pt-br/resource.js b/viewer/js/gis/dijit/Help/nls/pt-br/resource.js index 2793d85a8..8dc3218cd 100644 --- a/viewer/js/gis/dijit/Help/nls/pt-br/resource.js +++ b/viewer/js/gis/dijit/Help/nls/pt-br/resource.js @@ -1,5 +1,4 @@ define({ - link: 'Ajuda', navigation: { title: 'Navegação', description: 'Navegação no mapa usando o rato e o teclado', diff --git a/viewer/js/gis/dijit/Help/nls/pt-pt/resource.js b/viewer/js/gis/dijit/Help/nls/pt-pt/resource.js index 2793d85a8..8dc3218cd 100644 --- a/viewer/js/gis/dijit/Help/nls/pt-pt/resource.js +++ b/viewer/js/gis/dijit/Help/nls/pt-pt/resource.js @@ -1,5 +1,4 @@ define({ - link: 'Ajuda', navigation: { title: 'Navegação', description: 'Navegação no mapa usando o rato e o teclado', diff --git a/viewer/js/gis/dijit/Help/nls/resource.js b/viewer/js/gis/dijit/Help/nls/resource.js index 137c491ff..f7816fc9c 100644 --- a/viewer/js/gis/dijit/Help/nls/resource.js +++ b/viewer/js/gis/dijit/Help/nls/resource.js @@ -1,6 +1,5 @@ define({ root: { - link: 'Help', navigation: { title: 'Navigation', description: 'Map navigation using mouse and keyboard:', diff --git a/viewer/js/viewer/_WidgetsMixin.js b/viewer/js/viewer/_WidgetsMixin.js index 5f075945f..fcb642765 100644 --- a/viewer/js/viewer/_WidgetsMixin.js +++ b/viewer/js/viewer/_WidgetsMixin.js @@ -295,7 +295,8 @@ define([ _createFloatingWidget: function (parentId, widgetConfig) { var options = lang.mixin({ - title: widgetConfig.title + title: widgetConfig.title, + iconClass: widgetConfig.iconClass }, widgetConfig.paneOptions || {}); if (parentId) { options.id = parentId; From 5e10bfaccf1d59c8e0253339571947e177439a6a Mon Sep 17 00:00:00 2001 From: Tim McGee Date: Sun, 25 Jun 2017 10:06:02 +0900 Subject: [PATCH 3/5] move titlePaneIcon class from cmv-theme-overrides.css to FloatingTitlePane.css rearrange some styles in cmv-theme-overrides.css improved button css in cmv-theme-overrides.css for flat theme. --- viewer/css/cmv-theme-overrides.css | 130 +++++++++++------- .../css/FloatingTitlePane.css | 14 +- 2 files changed, 94 insertions(+), 50 deletions(-) diff --git a/viewer/css/cmv-theme-overrides.css b/viewer/css/cmv-theme-overrides.css index 55219bc4a..6913a9f3e 100644 --- a/viewer/css/cmv-theme-overrides.css +++ b/viewer/css/cmv-theme-overrides.css @@ -3,13 +3,13 @@ } .cmv .dijitTitlePane { - margin-bottom: 2px; background-color: #FFF; + margin-bottom: 2px; } .cmv .dijitTitlePaneTitle { - color: #666; background-color: #F5F5F5; + color: #666; } .cmv .dijitTitlePaneTitleOpen { @@ -25,13 +25,6 @@ outline: none !important; } -/* icons for the sidebar */ -.cmv .dijitTitlePane .dijitTitlePaneTitle .titlePaneIcon { - margin: 0 0 0 8px; - padding-top: 2px; -} -/* end custom icons */ - /* esri popup window overrides */ .cmv .esriPopup .sizer { @@ -41,32 +34,38 @@ .cmv .esriPopup .esriPopupWrapper { background-color: #FFFFFF; } + .cmv .esriPopup .attachmentsSection div { font-weight: bold; } + .cmv .esriPopup .contentPane table.attrTable { - width: 100%; border-collapse: collapse; + width: 100%; } + .cmv .esriPopup .contentPane table.attrTable td { padding: 2px; } + .cmv .esriPopup .contentPane table.attrTable td.attrName { - text-align: right; - font-weight: bold; color: #333333; - width: 40%; + font-weight: bold; padding-right: 5px; + text-align: right; + width: 40%; } + .cmv .esriPopup .contentPane table.attrTable td.attrValue { width: 60%; } + .cmv .esriPopup .contentPane table.attrTable tr { - vertical-align: top; border-bottom: 1px solid rgb(221, 221, 221); + vertical-align: top; } .cmv .esriPopup .contentPane table.attrTable tr:nth-child(odd) { - background-color: none; + background-color: transparent; } .cmv .esriPopup .contentPane table.attrTable tr:nth-child(even) { background-color: rgb(238, 238, 238); @@ -79,24 +78,23 @@ .cmv .esriPopupMobile { z-index: 999; } -.cmv .esriMobileNavigationBar { - background-color: #666666; - background: url("../images/linen.jpg") repeat-x scroll left top transparent; - color: #FFFFFF; -} + +.cmv .esriMobileNavigationBar, .cmv .esriPopupMobile .titlePane { - background-color: #666666; background: url("../images/linen.jpg") repeat-x scroll left top transparent; + background-color: #666666; color: #FFFFFF; } + .cmv .esriPopupMobile .pointer.bottom{ - background:url("../images/pointertop.png"); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } + +.cmv .esriPopupMobile .pointer.bottom, .cmv .esriPopupMobile .pointer.top { background:url("../images/pointertop.png"); } @@ -117,11 +115,12 @@ background-repeat: repeat-x; border: 1px solid #BBB; border-bottom: 1px solid #A8A8A8; - padding: 0px 12px; color: #000; letter-spacing: 0; + padding: 0 12px; text-transform: none; } + .cmv .simpleDirections .esriStopsGetDirections:before { content: '\f277'; font-family: 'FontAwesome'; @@ -156,9 +155,9 @@ background-image: -ms-linear-gradient(bottom, #fff 0%, #e6e6e6 100%); background-image: linear-gradient(bottom, #fff 0%, #e6e6e6 100%); background-repeat: repeat-x; - box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.2); - border-top-color: #444; border-color: #666; + border-top-color: #444; + box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.2); } @@ -185,15 +184,16 @@ } .flat .dijitTabContainerTop-tabs .dijitTabChecked:before { - height: 3px; background-color: #666; - top: -1px; + height: 3px; left: -1px; right: -1px; + top: -1px; } .flat .dijitTitlePaneTitle { border: 1px solid #DDD; + border-bottom: none; -webkit-border-radius: 4px; border-radius: 4px; padding: 8px 15px; @@ -209,20 +209,56 @@ border-top: none; } +.flat .dijitButton .dijitButtonNode .dijitIcon.fa, +.flat .dijitDropDownButton .dijitButtonNode .dijitIcon.fa, +.flat .dijitComboButton .dijitButtonNode .dijitIcon.fa { + margin-top: 4px; +} + +.flat .dijitButton .dijitButtonNode, +.flat .dijitDropDownButton .dijitButtonNode, +.flat .dijitComboButton .dijitButtonNode, +.flat .dijitToggleButton .dijitButtonNode, +.flat .dijitComboBox .dijitButtonNode, +.flat .dijitSpinnerButtonContainer.dijitButtonNode, +.flat .dijitSelect .dijitButtonNode { + background-color: #E6E6E6; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #e6e6e6)); + background-image: -webkit-linear-gradient(top, #fff 0%, #e6e6e6 100%); + background-image: -moz-linear-gradient(top, #fff 0%, #e6e6e6 100%); + background-image: -o-linear-gradient(top, #fff 0%, #e6e6e6 100%); + background-image: -ms-linear-gradient(top, #fff 0%, #e6e6e6 100%); + background-image: linear-gradient(top, #fff 0%, #e6e6e6 100%); + background-repeat: repeat-x; + border-bottom-color: #A8A8A8; + border-color: #BBB; + padding: 4px 12px; +} + +.flat .dijitComboBox .dijitArrowButton, +.flat .dijitSelect .dijitArrowButton { + padding: 4px; +} + +.flat .dijitSpinner .dijitSpinnerButtonContainer { + padding: 0; +} + .flat .dijitButtonHover .dijitButtonNode, .flat .dijitDropDownButtonHover .dijitButtonNode, .flat .dijitComboButton .dijitButtonNodeHover, .flat .dijitComboButton .dijitDownArrowButtonHover, .flat .dijitToggleButtonHover .dijitButtonNode, .flat .dijitDropDownButtonActive .dijitButtonNode { - background-position: 0 -15px; - text-decoration: none; - transition: background-position 0.1s linear; - -moz-transition: background-position 0.1s linear; - -ms-transition: background-position 0.1s linear; - -o-transition: background-position 0.1s linear; - -webkit-transition: background-position 0.1s linear; + background-position: 0 -15px; + text-decoration: none; + transition: background-position 0.1s linear; + -moz-transition: background-position 0.1s linear; + -ms-transition: background-position 0.1s linear; + -o-transition: background-position 0.1s linear; + -webkit-transition: background-position 0.1s linear; } + .flat .dijitButtonActive .dijitButtonNode, .flat .dijitComboButton .dijitButtonNodeActive, .flat .dijitToggleButtonActive .dijitButtonNode, @@ -235,11 +271,12 @@ background-image: -ms-linear-gradient(bottom, #fff 0%, #e6e6e6 100%); background-image: linear-gradient(bottom, #fff 0%, #e6e6e6 100%); background-repeat: repeat-x; - box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.2); - border-top-color: #444; border-color: #666; + border-top-color: #444; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.2); + box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.2); } + .flat .dijitButtonDisabled .dijitButtonNode, .flat .dijitDropDownButtonDisabled .dijitButtonNode, .flat .dijitComboButtonDisabled .dijitButtonNode, @@ -247,24 +284,25 @@ .flat .dijitComboBoxDisabled .dijitButtonNode, .flat .dijitSpinnerDisabled .dijitButtonNode, .flat .dijitSelectDisabled .dijitButtonNode { - background-image: none; - box-shadow: none; - cursor: not-allowed; - filter: alpha(opacity=65); - opacity: 0.65; - -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65); - -webkit-box-shadow: none; + background-image: none; + -webkit-box-shadow:none; + box-shadow: none; + cursor: not-allowed; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65); + filter: alpha(opacity=65); + opacity: 0.65; } .flat .success .dijitButtonNode { background: #409843; - color: #FFF; border-color: #39883c; + color: #FFF; } + .flat .danger .dijitButtonNode { background: #e32d29; - color: #FFF; border-color: #d4201b; + color: #FFF; } .flat .dijitTextBoxHover, @@ -283,4 +321,4 @@ background-color: #999; } -/* end flat theme */ +/* end flat theme */ \ No newline at end of file diff --git a/viewer/js/gis/dijit/FloatingTitlePane/css/FloatingTitlePane.css b/viewer/js/gis/dijit/FloatingTitlePane/css/FloatingTitlePane.css index 149b45b6c..ed17fc8d1 100644 --- a/viewer/js/gis/dijit/FloatingTitlePane/css/FloatingTitlePane.css +++ b/viewer/js/gis/dijit/FloatingTitlePane/css/FloatingTitlePane.css @@ -1,10 +1,16 @@ -.floatingWidgetDock:before { - float: right; +.dijitTitlePane .dijitTitlePaneTitle .titlePaneIcon { + margin: 0 0 0 8px; + padding-top: 2px; +} + +.dijitTitlePane .dijitTitlePaneTitle .floatingWidgetDock:before { content: "\f112"; + float: right; font-family: FontAwesome; } -.floatingWidgetPopout:before { - float: right; + +.dijitTitlePane .dijitTitlePaneTitle .floatingWidgetPopout:before { content: "\f064"; + float: right; font-family: FontAwesome; } \ No newline at end of file From 5d0052158a07ab41219a76fb9759aed4421e74a8 Mon Sep 17 00:00:00 2001 From: Tim McGee Date: Sun, 25 Jun 2017 10:10:34 +0900 Subject: [PATCH 4/5] add support for lazy-loading widgets in floating pane and mobile sidebar. switch configuration option from `loadOnOpen: false/true` to `preload: true/false`. --- viewer/js/config/viewer.js | 2 +- viewer/js/viewer/_SidebarMixin.js | 14 +---- viewer/js/viewer/_WidgetsMixin.js | 13 ++-- viewer/js/viewer/sidebar/Sidebar.js | 83 ++++++++---------------- viewer/js/viewer/sidebar/SidebarTab.js | 87 ++++++++++++++++++++++++++ 5 files changed, 125 insertions(+), 74 deletions(-) create mode 100644 viewer/js/viewer/sidebar/SidebarTab.js diff --git a/viewer/js/config/viewer.js b/viewer/js/config/viewer.js index f305d0a6d..f91d67098 100644 --- a/viewer/js/config/viewer.js +++ b/viewer/js/config/viewer.js @@ -349,7 +349,7 @@ define([ title: i18n.viewer.widgets.identify, iconClass: 'fa-info-circle', open: false, - loadOnOpen: false, + preload: true, position: 3, options: 'config/identify' }, diff --git a/viewer/js/viewer/_SidebarMixin.js b/viewer/js/viewer/_SidebarMixin.js index db65fe722..056371458 100644 --- a/viewer/js/viewer/_SidebarMixin.js +++ b/viewer/js/viewer/_SidebarMixin.js @@ -37,7 +37,7 @@ define([ }); var deferred = new Deferred(); require([ - module.uri.substring(0, module.uri.lastIndexOf('/')) + '/sidebar/Sidebar.js' + 'viewer/sidebar/Sidebar' ], lang.hitch(this, function (sidebar) { Sidebar = sidebar; this.mapDeferred.then(lang.hitch(this, '_createSidebar')); @@ -112,17 +112,7 @@ define([ 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 - } - ]); + return this.sidebar.createTab(tabOptions); } }); diff --git a/viewer/js/viewer/_WidgetsMixin.js b/viewer/js/viewer/_WidgetsMixin.js index fcb642765..01408f82a 100644 --- a/viewer/js/viewer/_WidgetsMixin.js +++ b/viewer/js/viewer/_WidgetsMixin.js @@ -147,22 +147,26 @@ define([ } // build a titlePane or floating widget as the parent + widgetConfig.watched = widgetConfig.watched || 'open'; if ((widgetConfig.type === 'titlePane' || widgetConfig.type === 'contentPane' || widgetConfig.type === 'floating')) { parentId = widgetConfig.widgetKey + '_parent'; if (widgetConfig.type === 'titlePane') { pnl = this._createTitlePaneWidget(parentId, widgetConfig); } else if (widgetConfig.type === 'contentPane') { pnl = this._createContentPaneWidget(parentId, widgetConfig); + widgetConfig.preload = true; } else if (widgetConfig.type === 'floating') { pnl = this._createFloatingWidget(parentId, widgetConfig); } widgetConfig.parentWidget = pnl; + widgetConfig.preload = (widgetConfig.preload) || pnl.get(widgetConfig.watched) || (typeof(pnl.watch) !== 'function'); this._showWidgetLoader(pnl); } var deferred = new Deferred(); - if ((widgetConfig.type === 'titlePane') && (widgetConfig.loadOnOpen !== false) && !pnl.get('open')) { - widgetConfig.delayHandle = aspect.after(pnl, 'toggle', lang.hitch(this, '_loadWidget', widgetConfig, deferred)); + widgetConfig.preload = (typeof(widgetConfig.preload) === 'undefined') ? true : widgetConfig.preload; + if (!widgetConfig.preload) { + widgetConfig.watchHandle = pnl.watch(widgetConfig.watched, lang.hitch(this, '_loadWidget', widgetConfig, deferred)); } else { this._loadWidget(widgetConfig, deferred); } @@ -182,8 +186,9 @@ define([ deferred.resolve(); })); } - if (widgetConfig.delayHandle) { - widgetConfig.delayHandle.remove(); + if (widgetConfig.watchHandle) { + widgetConfig.watchHandle.unwatch(); + widgetConfig.watchHandle.remove(); } }, diff --git a/viewer/js/viewer/sidebar/Sidebar.js b/viewer/js/viewer/sidebar/Sidebar.js index 7df98b78d..ca0f37115 100644 --- a/viewer/js/viewer/sidebar/Sidebar.js +++ b/viewer/js/viewer/sidebar/Sidebar.js @@ -15,6 +15,8 @@ define([ 'put-selector/put', + 'viewer/sidebar/SidebarTab', + 'dojo/text!./templates/Sidebar.html', 'xstyle/css!./css/Sidebar.css', @@ -38,17 +40,14 @@ define([ put, + SidebarTab, + template ) { return declare([_WidgetBase, _TemplatedMixin], { templateString: template, baseClass: 'sidebar', - defaultTabParams: { - title: 'Title', - iconClass: 'fa-bars' - }, - viewPadding: { top: 0, left: 0, @@ -76,7 +75,6 @@ define([ // resize tab and any widgets within the tab when it is opened on(this.domNode, 'transitionend, oTransitionEnd, webkitTransitionEnd, animationend, webkitAnimationEnd', lang.hitch(this, '_resizeActiveTab')); - // resize tab and any widgets within the tab when the browser is resized on(window, 'resize', lang.hitch(this, function () { window.setTimeout(lang.hitch(this, '_resizeActiveTab'), 300); // 300ms to wait for the animation to complete @@ -85,66 +83,37 @@ define([ }, createTab: function (options) { - options = lang.mixin(lang.clone(this.defaultTabParams), options || {}); - var tab = { - id: options.id, - buttonNode: null, - containerNode: null, - titleNode: null, - closeBtnNode: null, - contentNode: null - }; - //create and place dom elements for the tab button and pane - tab.buttonNode = put(this.tabsButtonNode, 'li a[role=tab] i.fa.' + options.iconClass + '<<'); - tab.containerNode = put(this.tabsContainerNode, 'div.' + this.baseClass + '-pane'); - tab.titleNode = put(tab.containerNode, 'div.' + this.baseClass + '-pane-title $', options.title); - - if (this.showCloseIcon) { - tab.closeBtnNode = put(tab.titleNode, 'i.fa.fa-chevron-left.' + this.baseClass + '-closeIcon'); - // listen for the tab close button click - on(tab.closeBtnNode, 'click', lang.hitch(this, 'tabClickHandler', tab)); + options = options || {}; + options.open = options.open || false; + options.baseClass = this.baseClass; + options.showCloseIcon = this.showCloseIcon; + options.tabsContainerNode = this.tabsContainerNode; + options.tabsButtonNode = this.tabsButtonNode; + + var tab = new SidebarTab(options); + tab.watch('open', lang.hitch(this, 'checkTabs', tab)); + if (options.open) { + tab.openTab(); } - // listen for the tab button click - on(tab.buttonNode, 'click', lang.hitch(this, 'tabClickHandler', tab)); - - //keep a reference to this tab this.tabs.push(tab); - - //return the tabs pane node return tab; }, - openTab: function (tab) { + checkTabs: function (tab) { array.forEach(this.tabs, function (childTab) { - put(childTab.buttonNode, '!active'); - put(childTab.containerNode, '!active'); - put(childTab.contentNode, '!active'); + if (childTab.get('id') !== tab.get('id')) { + childTab.closeTab(true); + } }); - put(tab.buttonNode, '.active'); - put(tab.containerNode, '.active'); - put(tab.contentNode, '.active'); - put(this.tabsButtonNode, '.active'); - put(this.domNode, '!collapsed'); - put(this.mapContainer, '!sidebar-collapsed'); - }, - - closeTab: function () { - array.forEach(this.tabs, function (tab) { - put(tab.buttonNode, '!active'); - put(tab.containerNode, '!active'); - put(tab.contentNode, '!active'); - }, this); - put(this.tabsButtonNode, '!active'); - put(this.domNode, '.collapsed'); - put(this.mapContainer, '.sidebar-collapsed'); - }, - - tabClickHandler: function (tab) { - if (domClass.contains(tab.buttonNode, 'active')) { - this.closeTab(tab); + if (tab.get('open')) { + domClass.add(this.tabsButtonNode, 'active'); + domClass.remove(this.domNode, 'collapsed'); + domClass.remove(this.mapContainer, 'sidebar-collapsed'); } else { - this.openTab(tab); + domClass.remove(this.tabsButtonNode, 'active'); + domClass.add(this.domNode, 'collapsed'); + domClass.add(this.mapContainer, 'sidebar-collapsed'); } }, diff --git a/viewer/js/viewer/sidebar/SidebarTab.js b/viewer/js/viewer/sidebar/SidebarTab.js new file mode 100644 index 000000000..db4945f77 --- /dev/null +++ b/viewer/js/viewer/sidebar/SidebarTab.js @@ -0,0 +1,87 @@ +define([ + 'dojo/_base/declare', + 'dijit/_WidgetBase', + + 'dojo/_base/lang', + 'dojo/on', + 'dojo/dom-class', + + 'put-selector/put' + +], function ( + declare, + _WidgetBase, + + lang, + on, + domClass, + + put + +) { + return declare([_WidgetBase], { + id: null, + title: 'Title', + iconClass: 'fa-bars', + open: false, + baseClass: null, + tabsButtonNode: null, + tabsContainerNode: null, + buttonNode: null, + contentNode: null, + titleNode: null, + closeBtnNode: null, + containerNode: null, + + postCreate: function () { + this.inherited(arguments); + + //create and place dom element for the tab button + this.buttonNode = put(this.tabsButtonNode, 'li a[role=tab] i.fa.' + this.iconClass + '<<'); + + //create and place dom elements for the tab pane + this.contentNode = put(this.tabsContainerNode, 'div.' + this.baseClass + '-pane'); + this.titleNode = put(this.contentNode, 'div.' + this.baseClass + '-pane-title $', this.title); + this.containerNode = put(this.contentNode, 'div.sidebar-widget div.sidebar-widget-content'); + if (this.showCloseIcon) { + this.closeBtnNode = put(this.titleNode, 'i.fa.fa-chevron-left.' + this.baseClass + '-closeIcon'); + // listen for the tab close button click + on(this.closeBtnNode, 'click', lang.hitch(this, 'tabClickHandler')); + } + + // listen for the tab button click + on(this.buttonNode, 'click', lang.hitch(this, 'tabClickHandler')); + + }, + + openTab: function (silent) { + domClass.add(this.buttonNode, 'active'); + domClass.add(this.containerNode, 'active'); + domClass.add(this.contentNode, 'active'); + if (silent) { + this.open = true; + return; + } + this.set('open', true); + }, + + closeTab: function (silent) { + domClass.remove(this.buttonNode, 'active'); + domClass.remove(this.containerNode, 'active'); + domClass.remove(this.contentNode, 'active'); + if (silent) { + this.open = false; + return; + } + this.set('open', false); + }, + + tabClickHandler: function () { + if (domClass.contains(this.buttonNode, 'active')) { + this.closeTab(); + } else { + this.openTab(); + } + } + }); +}); \ No newline at end of file From ba77f00995b68f549e6768275693583d93132cfe Mon Sep 17 00:00:00 2001 From: Tim McGee Date: Mon, 26 Jun 2017 11:49:29 +0900 Subject: [PATCH 5/5] remove accidental `bottom-border: none` --- viewer/css/cmv-theme-overrides.css | 1 - 1 file changed, 1 deletion(-) diff --git a/viewer/css/cmv-theme-overrides.css b/viewer/css/cmv-theme-overrides.css index 6913a9f3e..00401a31e 100644 --- a/viewer/css/cmv-theme-overrides.css +++ b/viewer/css/cmv-theme-overrides.css @@ -193,7 +193,6 @@ .flat .dijitTitlePaneTitle { border: 1px solid #DDD; - border-bottom: none; -webkit-border-radius: 4px; border-radius: 4px; padding: 8px 15px;