Merge pull request #730 from cmv/feature/load-titlePane-widget-on-open

Don't load a titlePane/floating/mobile sidebar widget until the parent widget is opened.
cmv · Jun 26, 2017 · 4901aaa · 4901aaa
2 parents eed8fac + ba77f00
commit 4901aaa
Show file tree

Hide file tree

Showing 16 changed files with 271 additions and 149 deletions.
diff --git 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,11 +184,11 @@
 }
 
 .flat .dijitTabContainerTop-tabs .dijitTabChecked:before {
-    height: 3px;
     background-color: #666;
-    top: -1px;
+    height: 3px;
     left: -1px;
     right: -1px;
+    top: -1px;
 }
 
 .flat .dijitTitlePaneTitle {
@@ -209,20 +208,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,36 +270,38 @@
     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,
 .flat .dijitToggleButtonDisabled .dijitButtonNode,
 .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 +320,4 @@
     background-color: #999;
 }
 
-/* end flat theme */
+/* end flat theme */
diff --git a/viewer/js/config/viewer.js b/viewer/js/config/viewer.js
@@ -349,6 +349,7 @@ define([
                 title: i18n.viewer.widgets.identify,
                 iconClass: 'fa-info-circle',
                 open: false,
+                preload: true,
                 position: 3,
                 options: 'config/identify'
             },
@@ -650,6 +651,13 @@ define([
                 type: 'floating',
                 path: 'gis/dijit/Help',
                 title: i18n.viewer.widgets.help,
+                iconClass: 'fa-info-circle',
+                paneOptions: {
+                    draggable: false,
+                    html: '<a href="#"><i class="fa fa-fw fa-info-circle"></i>link</a>'.replace('link', i18n.viewer.widgets.help),
+                    domTarget: 'helpDijit',
+                    style: 'height:345px;width:450px;'
+                },
                 options: {}
             }
 

diff --git 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;
 }
diff --git 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
@@ -0,0 +1,3 @@
+.dijitDialogTitleBar .titlePaneIcon {
+    margin: 0 4px 0 0;
+}
diff --git 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: '<a href="#">link</a>'.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 () {