Save box state, for default collapsed and expanded boxes.

Hi,

I’m using this solution from @BlueTeck for saving box state with localstorage https://github.com/almasaeed2010/AdminLTE/issues/1064

It’s working great as long as all the boxes on a page have the same default state, all collapsed or all expanded. I’m wondering if anyone have modified it to use it when the box is collapsed by default with collapsed-box class and expanded box.

<div class="box box-primary collapsed-box" id="filters" data-name="filters">

If boxes are all collapsed on the page I can use if(box.state == 1) instead of if(box.state == 0)

I also tried this with no luck

if(box.state == 0){
$('.box[data-name="'+box.boxname+'"]').find($.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors.collapse).trigger( "click" );
}                         
else {
  $('.box[data-name="'+box.boxname+'"]').removeClass("collapsed-box");
	} 

Any solution is welcome Thanks

[REJack]

Your button miss the btn-box-tool class, but you can change the script to catch only .btn instead of .btn-box-tool.

That’s my button code like the preview from almasaeed2010.

<button class="btn btn-box-tool" type="button" data-widget="collapse" data-toggle="tooltip" title="" data-original-title="Collapse">
<i class="fa fa-minus"></i>
</button>

[REJack]

Strange, i have not this issues with the icons. I had this before and then i switched the $('.box[data-name="'+box.boxname+'"]').find('.btn-box-tool[data-widget="collapse"... from the if’s (before i posted it here)

here my full code

  $($.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors.collapse).click(function () {
      var box = this.closest('.box');
      var boxname = $(box).data('name');
      if(boxname !== undefined){
          var boxstates = localStorage.box_state;
          if(!boxstates){
              boxstates = [];
          } else {
              boxstates = JSON.parse(boxstates);
          }
          boxstates = $.grep(boxstates, function(n) {
              return n.boxname != boxname;
          });
          boxstates.push({'boxname': boxname, 'state': $(box).hasClass('collapsed-box') ? 1 : 0});
          localStorage.box_state = JSON.stringify(boxstates);
      }
  });
  //load states
  var boxstates = localStorage.box_state;
  if(!boxstates){
      boxstates = [];
  } else {
      boxstates = JSON.parse(boxstates);
  }
  boxstates.forEach(function(box) {
      if(box.state == 0){
          $('.box[data-name="'+box.boxname+'"]').addClass('collapsed-box');
          $('.box[data-name="'+box.boxname+'"]').find('.btn-box-tool[data-widget="collapse"] i').removeClass('fa-minus').addClass('fa-plus');
      }else if(box.state == 1){
          $('.box[data-name="'+box.boxname+'"]').removeClass('collapsed-box');
          $('.box[data-name="'+box.boxname+'"]').find('.btn-box-tool[data-widget="collapse"] i').removeClass('fa-plus').addClass('fa-minus');
      }
  });