Extend Checkbox Selection to Hover Area in LayerList Widget

1252
7
Jump to solution
08-13-2019 04:16 AM
Gianna_BBSRC
Occasional Contributor

Hi,

I want to make my web app as simple as possible for users, especially those on small screens. Is there a way to allow the checkbox visibility functionality (switch on/off) to be spread across the entire :hover area?

Currently, there is only a small area within the checkbox to select the layer be visible. I want users to have a larger target to hit to be able to toggle between layers very easily.

Thanks in advance!

Gianna

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus
    _onRowTrClick: function(layerInfo, imageShowLegendDiv, layerTrNode, subNode, evt) {
      // this._changeSelectedLayerRow(layerTrNode);
      // var fold = this._foldSwitch(layerInfo, imageShowLegendDiv, subNode);
      // if(evt.ctrlKey || evt.metaKey) {
      //   if(layerInfo.isRootLayer()) {
      //     this.foldOrUnfoldAllRootLayers(fold);
      //   } else {
      //     this.foldOrUnfoldSameLevelLayers(layerInfo, fold);
      //   }
      // }
      var chk = query('.visible-checkbox-' + layerInfo.id)[0];
      chk.click();
    },

View solution in original post

7 Replies
Gianna_BBSRC
Occasional Contributor

I've managed to alter style.css to add some formatting to the checkbox, but only to add a margin on the top and bottom of the checkbox. If I add either margin or padding to the left or right, it totally throws off the other elements (regardless of position and/or z-index). 

.jimu-checkbox .checkbox {
  margin-top: 10px;
  margin-bottom: 10px;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The hover area content is 330px wide x 36px high, and the checkbox is 16x16. It feels like I've tried every combination of padding, margin, border, position, z-index. I'm not sure what I'm doing wrong.

I'm a complete novice at javascript, so I'm not sure if this problem can be solved programmatically.

Any help will be super appreciated!

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Gianna,

   What you are wanting t do is going to be problematic... Right now the whole list row has a chick event applied to open or close the legend. If you attempt to make the layer visibility toggle when clicking on the row then you will have competing actions and a UI that is not very intuitive or user friendly.

0 Kudos
Gianna_BBSRC
Occasional Contributor

Hi Robert,

I should have mentioned that I've disabled the legend option, fold/unfold, and all actions which are shown in the context menu, so effectively, I only have a check box and a layer name. 

But you've given me a hint about the click event to open and close the legend. Is there a way to change that click event to check and uncheck the checkbox?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Sure in the LayerListView.js look at the _onRowTrClick function and have it call the _onCkSelectNodeClick

0 Kudos
Gianna_BBSRC
Occasional Contributor

Sorry I'm a total noob. Do you have a bit of code I could put at the _onRowTrClick?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus
    _onRowTrClick: function(layerInfo, imageShowLegendDiv, layerTrNode, subNode, evt) {
      // this._changeSelectedLayerRow(layerTrNode);
      // var fold = this._foldSwitch(layerInfo, imageShowLegendDiv, subNode);
      // if(evt.ctrlKey || evt.metaKey) {
      //   if(layerInfo.isRootLayer()) {
      //     this.foldOrUnfoldAllRootLayers(fold);
      //   } else {
      //     this.foldOrUnfoldSameLevelLayers(layerInfo, fold);
      //   }
      // }
      var chk = query('.visible-checkbox-' + layerInfo.id)[0];
      chk.click();
    },
Gianna_BBSRC
Occasional Contributor

Works like a dream! I really appreciate it.

Thank you thank you

0 Kudos