Select to view content in your preferred language

Set icon to jimu selected state?

1469
9
Jump to solution
01-31-2018 06:09 AM
MartinOwens1
Frequent Contributor

This is a minor question but figured I was ask anyways. I have an on close function from one widget that launches a different on screen widget. The function works as it should, but when the new on screen widget panel is launched, it does not represent the jimu on screen icon as selected from the CSS. How can I set the icon to selected when the panel is opened from another widget?

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Martin,

        onClose: function() {
          var node = query("div[data-widget-name='eSearch']")[0];
          domClass.add(node, "jimu-state-selected");
          PanelManager.getInstance().showPanel(this.appConfig.widgetOnScreen.widgets[4]);
          // the above "4" assumes that the eSearch widget is in the first onScreen placeholder
        },

View solution in original post

9 Replies
RobertScheitlin__GISP
MVP Emeritus

Martin,

   You have to do some other work to get the on screen icon to be selected.

In my example I am opening the Query Widget:

define([
...
  'jimu/PanelManager',
  'dojo/query',
  'dojo/dom-class',
...
    PanelManager, query, domClass) {
...

        onClose: function() {
          var node = query("div[data-widget-name='Query']")[0];
          domClass.add(node, "jimu-state-selected");
          PanelManager.getInstance().showPanel(this.appConfig.widgetOnScreen.widgets[5]);
        },
MartinOwens1
Frequent Contributor

This is actually one of Larry Stout's custom widgets "WelWhatDisHelpAbout" that was developed a whil ago. I have it in my app and configured to open your custom eSearch on close. It looks like there is already code in it to look for open panel widgets and set the jimu state as selected, but it doesn't. Here is the code:


define(['dojo/_base/declare',
  'dojo/_base/array',
  'dojo/_base/lang',
  'dojo/aspect',
  'dojo/dom-class',
  'dojo/dom-style',
  'dojo/query',
  'dojo/store/Memory',
  'dojo/topic',
  'dijit/registry',
  'jimu/BaseWidget',
  'jimu/PanelManager',
  './WelWhatDisHelpAbout'
], function(
  declare,
  array,
  lang,
  aspect,
  domClass,
  domStyle,
  query,
  Memory,
  topic,
  registry,
  BaseWidget,
  PanelManager,
  WelWhatDisHelpAbout
) {
  /* global jimu, jimuConfig */
  var clazz = declare([BaseWidget], {
    // This invisible widget loads the WelWhatDisHelpAbout widget and manages
    // when it is opened and which tab is active.  
 
    baseClass: 'jimu-widget-launch-help',
    name: 'Launch_WelWhatDisHelpAbout',
    panelClosingDelay: 0,

     postMixInProperties: function(){
      this.panel = registry.byId(this.id + '_panel');
      domStyle.set(this.panel.domNode, 'display', 'none');
      // domStyle.set(this.panel.domNode, 'opacity', 0);
      this.inherited(arguments);
    },
      
    startup: function(){
      this.inherited(arguments);
      
      this.isStartup = true;
    
      this._modifyPanel();
      
      var disclaimerInterval = lang.getObject('disclaimer.interval', false, this.config);
      if (typeof disclaimerInterval !== 'number') {
        disclaimerInterval = 90;
      }
        
      // The saved settings were put into this widget by the Acme Widget.
      // Get the styles to use in the help tab of this widget from its panel
      if (!this.welWhatDisHelpAbout) {
        // The WelWhatDisHelpAbout widget has not been opened yet, so open it.
        this.welWhatDisHelpAbout = new WelWhatDisHelpAbout({
          map: this.map,
          nls: this.nls,
          manifest: this.manifest,
          dateLastAcknowledged: lang.getObject('dateLastAcknowledged', false, this.panel.savedSettings),
          showWelcomeOnStartup: lang.getObject('showWelcomeOnStartup', false, this.panel.savedSettings),
          noticeViews: lang.getObject('noticeViews', false, this.panel.savedSettings),
          amdFolder: this.amdFolder,
          appConfig: this.appConfig,
          maxWidgetWidth: this.config.maxWidgetWidth,
          maxWidgetHeight: this.config.maxWidgetHeight,
          tabs: this.config.tabs,
          nonWidgetHelp: this.config.nonWidgetHelp,
          noticeStartDate: lang.getObject('notice.startDate', false, this.config),
          noticeEndDate: lang.getObject('notice.endDate', false, this.config),
          maxNoticeViews: lang.getObject('notice.maxViews', false, this.config),
          disclaimerInterval: disclaimerInterval,
          alwaysShowAtStartup: lang.getObject('welcome.alwaysShowAtStartup', false, this.config),
          excludeFromHelp: this.config.excludeFromHelp,
          helpInThisWidget: this.config.helpInThisWidget,
          titleBarColor: this.headerColor
        }).placeAt(jimuConfig.mainPageId);
        this.welWhatDisHelpAbout.startup();
      }
      
      topic.subscribe('Launch_WelWhatDisHelpAbout/close', lang.hitch(this, '_closeThisWidget'));
    },
    
    onOpen: function() {
      this.inherited(arguments);
      this.welWhatDisHelpAbout.useFade = !this.welWhatDisHelpAbout.isOpen;
      if (this.isStartup) {
        this.isStartup = false;
        setTimeout(lang.hitch(this, function() {
          // Putting this timeout in solved the problem with the widget opening twice at startup.
          // Very mysterious.  Only seems to happen in Chrome.
          topic.publish('WelWhatDisHelpAbout/open', { reason: 'startup' });
        }), 0);
      } else {
        topic.publish('WelWhatDisHelpAbout/open', { reason: 'help' });
      }
      this.welWhatDisHelpAbout.useFade = false;
    },
    
    onClose: function() {
      this.state = 'closed';
      this.panel.panelManager.closePanel(this.panel.id);
      var pm = PanelManager.getInstance();
      pm.showPanel(this.appConfig.widgetOnScreen.widgets[12]);
      this.inherited(arguments);
    },
    
    _modifyPanel: function() {
      // Get the color of the header
      this.headerColor = domStyle.get(this.panel.domNode.children[0], 'background-color');

      // Set the 'display' of the panel to 'none' by advising the panelManager.showPanel function.
      // This doesn't work at startup because the panel is created before this widget.
      aspect.after(this.panel.panelManager, 'showPanel', lang.hitch(this, function(deferred) {
        return deferred.then(lang.hitch(this, function(response) {
          var helpPanelLabel = this.panel.label;
          var openingPanelLabel = response.label;
          if (openingPanelLabel === helpPanelLabel) {
            domStyle.set(response.domNode, 'display', 'none');
          }
          return response;
        }));
      }));

      //=========================================================================================================
      // The next three aspect calls override the default behavior of widget pool widgets and allow the
      // WelWhatDisHelpAbout Widget to be open when any other widget in the widget pool is open.
      // If the widget pool panels are full (consume the entire window), the behavior is not changed.
      //=========================================================================================================
      
      // When a widget icon in the widget pool is clicked, the Header Controller calls the panelManager.closePanel function.
      // Get the label of the panel that is being closed (unless the panels are full screen).
      aspect.before(this.panel.panelManager, 'closePanel', lang.hitch(this, '_beforeClosePanelAdvice'));

      // When a widget is being opened, another widget may have just been closed.  If the opening or closing widget is the
      // WelWhatDisHelpAbout widget, then reopen the widget that was closed.
      aspect.before(this.panel.panelManager, 'openPanel', lang.hitch(this, '_beforeOpenPanelAdvice'));
      
      // If we are reopening a widget that was closed, ignore the 'closeOtherPanelsInTheSameGroup' function.
      aspect.around(this.panel.panelManager, 'closeOtherPanelsInTheSameGroup', lang.hitch(this, function(originalMethod) {
        return lang.hitch(this, function() {
          if (this.panel.isFull) {
            originalMethod.apply(this.panel.panelManager, arguments);
          } else if (this.closeNoWidgets) {
            this.closeNoWidgets = true;
            return;
          } else {
            var openingPanel = arguments[0];
            if (!this._getPanelFromMemory() && openingPanel.label === this.panel.label) {
              // If a widget icon in the HeaderController was "selected" by this widget, it may not be closed until this
              // function is called, so capture it here because it won't be captured by the 'closePanel' advice.
              this._putPanelInMemory(this._getOpenPanel());
            }
            originalMethod.apply(this.panel.panelManager, arguments);
          }
        });
      }));
    },
    
    _beforeOpenPanelAdvice: function(panel) {
      // If the Help Widget is opening and a panel was closed in the past 'this.panelClosingDelay' milliseconds, reopen it.
      if (!panel.isFull) {
        var closingPanel = this._getOpenPanel() || this._getPanelFromMemory();
        if (closingPanel) {
          if (closingPanel === this.panel) {
            // The Help Panel is closing, so reopen it to the same tab with no animation.
            var currentTabId = this.welWhatDisHelpAbout.tabContainer.selectedChildWidget.id;
            this.welWhatDisHelpAbout.useFade = false;
            topic.publish('WelWhatDisHelpAbout/open', { reason: 'reopen', tab: currentTabId });
            this.welWhatDisHelpAbout.useFade = false;
          } else if (panel.label === this.panel.label) {
            // The Help Widget is opening, so reopen the closing panel.
            this.closeNoWidgets = true;
            this.panel.panelManager.openPanel(closingPanel);
          }
          return [panel, false];
        }
      }
    },
    
    _beforeClosePanelAdvice: function(panel) {
      if (!panel.isFull) {
        if (typeof panel === 'string') {
          panel = this.panel.panelManager.getPanelById(15);
        }
        if (panel && panel.state === 'opened') {
          this._putPanelInMemory(panel);
          if (panel.label === this.panel.label) {
            this.welWhatDisHelpAbout.useFade = true;
          } else if (this.welWhatDisHelpAbout.isOpen) {
            // If this widget is open and another widget is closed,
            // show this widget icon in the HeaderController Widget as selected.
            var nodes = query('.icon-node');
            array.some(nodes, function(node) {
              if (node.title === this.panel.label) {
                domClass.add(node, 'jimu-state-selected');
                return true;
              } else {
                return false;
              }
            }, this);
          } else {
            return [panel, false];
          }
        }
      }
    },
    
    _getOpenPanel: function() {
      var openPanel;
      array.some(this.panel.panelManager.panels, function(panel) {
        if (panel.label !== this.panel.label && panel.state === 'opened') {
          openPanel = panel;
          return true;
        } else {
          return false;
        }
      }, this);
      return openPanel;
    },
    
    _putPanelInMemory: function(panel) {
      if (panel) {
        var panelObj = [{ id: 0, panel: panel }];
        this.store = new Memory({ data: panelObj });
        if (this.timeoutHandle) {
          clearTimeout(this.timeoutHandle);
        }
        this.timeoutHandle = setTimeout(lang.hitch(this, function() {
          this.store.remove(0);
          this.store = null;
        }), this.panelClosingDelay);
      }
    },
    
    _getPanelFromMemory: function() {
      return this.store && this.store.get(0) ? this.store.get(0).panel : null;
    },
    
    _closeThisWidget: function() {
      if (this.panel) {
      
        //========================================================================
        // Make sure the icon for an open widget in the widget pool is
        // selected when the WelWhatDisHelpAbout widget is closed.
        //                              BEGIN
        //========================================================================
      
        // Get the label of the non-Help Widget panel that is open (if any)
        var openPanel = this._getOpenPanel();

          
        // Unselect the nodes for all panels
        var nodes = query('.icon-node');
        nodes.removeClass('jimu-state-selected');

        // Make the node for the open panel selected.  
        // NOTE: The HeaderController Widget doesn't know the node is selected and won't
        //       unselect it if another widget in the widget pool is selected.
        if (openPanel) {
          array.some(nodes, function(node) {
            if (node.title === openPanel.label) {
              domClass.add(node, 'jimu-state-selected');
              return true;
            }
          }, this);
        }
      
        //========================================================================
        // Make sure the icon for an open widget in the widget pool is
        // selected when the WelWhatDisHelpAbout widget is closed.
        //                              END
        //========================================================================
      
        this.onClose();
      }
    }
  });
  return clazz;
});

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Martin,

  No, I don't see anything for selecting the on screen widget icon in his code. What I provided will work though.

0 Kudos
MartinOwens1
Frequent Contributor

How do I define your eSearch widget. When I replace the code you provided referencing query with eSearch it says it's not defind and I lose the ability to close the widget.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Martin,

        onClose: function() {
          var node = query("div[data-widget-name='eSearch']")[0];
          domClass.add(node, "jimu-state-selected");
          PanelManager.getInstance().showPanel(this.appConfig.widgetOnScreen.widgets[4]);
          // the above "4" assumes that the eSearch widget is in the first onScreen placeholder
        },
MartinOwens1
Frequent Contributor

Thanks Robert!

0 Kudos
MartinOwens1
Frequent Contributor

I noticed something strange this morning. The code to switch the icon state to selected works great, but now it shows selected even if the panel is closed. I have other widgets that onOpen function set to close that particular panel yet the icon is still showing as selected. So I tried to add that code to the onOpen function to the other widgets that close that panel except change it to the jimu-widget-onscreen-icon, but it doesn't change it and the console says failed to open. Any ideas?

onOpen: function () {
        var node = query("div[data-widget-name='eSearch']")[0];
        domClass.add(node, "jimu-widget-onscreen-icon");
        PanelManager.getInstance().closePanel(9 + '_panel');

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Martin,

   Here is the updated method to fix that issue:

//add these requires
  'dojo/query',
  'dijit/registry',
  'dojo/_base/html',
...
        onClose: function() {
          var node = query("div[data-widget-name='Query']")[0];
          var parentWid = html.getAttr(node, 'widgetId');
          var widg = registry.byId(parentWid);
          widg.onClick();
        },
MartinOwens1
Frequent Contributor

Thanks Robert!!!

0 Kudos