Hiding Scale-specific Layers in Layer List?

[BillSpiking__GISP]

Branch from: https://community.esri.com/thread/176669 

Hi Robert,

Hope all is well!

I'm trying to hide, instead of gray out, scale dependent layers much like what Jason was trying to accomplish above though when I change the style to display none it just hides the text and not the checkbox to the left.  Do you have any recommendations on hiding the checkbox as well?  I'm using WAB Dev 2.3 and have tested with the otb layer list widget, your modified code for the layer list, and Kevin MacLeod‌ Ehanced Layer List and getting the same results for all three.  I've fiddled around with the code trying to hide the checkbox, but no luck as of yet.

Any help would be greatly appreciated!

Thank you sir,

Bill

[RobertScheitlin__GISP · Accepted solution]

Bill,

  Here is the the updated LayerListView.js function:

    checkScale: function(){
      setTimeout(lang.hitch(this, function(){
        array.forEach(this.operLayerInfos.getLayerInfoArray(), function(layerInfo) {
          var titleNodes = query(".div-content.jimu-float-leading");
          for(var x = 0; x < titleNodes.length; x++){

            if(layerInfo.layerObject.layerInfos){
              for(var l = 0; l < layerInfo.layerObject.layerInfos.length; l++){
                if(layerInfo.layerObject.layerInfos[l].name === titleNodes[x].innerHTML){
                  var node = query(".checkbox", titleNodes[x].parentNode.parentNode)[0];
                  if(domClass.contains(titleNodes[x], "grayed-title")){
                    domClass.add(titleNodes[x].parentNode.parentNode, "sd");
                    domClass.add(node, "sd");
                  }else{
                    domClass.remove(titleNodes[x].parentNode.parentNode, "sd");
                    domClass.remove(node, "sd");
                  }
                }
              }
            }
            if(titleNodes[x].innerHTML === layerInfo.title){
              var node = query(".checkbox", titleNodes[x].parentNode.parentNode)[0];
              if(domClass.contains(titleNodes[x], "grayed-title")){
                domClass.add(titleNodes[x].parentNode.parentNode, "sd");
                domClass.add(node, "sd");
              }else{
                domClass.remove(titleNodes[x].parentNode.parentNode, "sd");
                domClass.remove(node, "sd");
              }
            }
          }
        }, this);
      }), 200);
    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and the new css rule:

.jimu-widget-layerList .layer-row.sd  {
    display: none;
}‍‍‍

[BillSpiking__GISP]

It works perfectly Robert!  Thanks again for your help....you bailed me out again!

Regards,

Bill