jQuery - remember state of increment function

Question

This code allows you to resize the height and width of the image by running an increment function when clicking the .resize button. The problem is that I only want this functionality to work when in one of two states (list view vs. grid view).

How do I run the increment function in list mode and remember the last size of the image when toggling back from grid mode?

Currently if I toggle into grid mode I revert to the originalWidth of the image but it resets the size of the list mode image.

$(document).ready(function() {
  var originalWidth = $("[data-view='list']")
    .find(".listing__img")
    .css("width");

  function incSize(currentSize, incr, min, max) {
    if (parseFloat(currentSize) === max) return originalWidth;
    fSize = Math.max(Math.min(parseFloat(currentSize) + incr, max), min);
    return fSize + "px";
  }


  $(".resize").click(function() {
    var $list = $("[data-view='list']");
    var xcontext = $(".resize");
    var xactive = $(".resize__icon.active", xcontext);
    var xnext = xactive.next();

    xactive.removeClass("active");
    xnext.addClass("active");

    // Check if an element exists with both classes
    if ($(".resize__icon.active").length == 0) {
      // If not add active to the first .resize__icon
      $(".resize__icon").first().addClass("active");
    }
    newFontSize = incSize(
      $list.find(".listing__img").css("height"),
      24,
      46,
      94
    );

    $list.find(".listing__img").css({
      height: newFontSize,
      width: newFontSize
    });
  });

  $(".view__toggle--list").on("click", function() {
    var $this = $(this).closest(".content");
    $this.find(".listing__list").attr("data-view", "list");
    $this.find(".view__toggle").removeClass("active");
    $this.find(".view__toggle--list").addClass("active");
  });

  $(".view__toggle--grid").on("click", function() {
    var $this = $(this).closest(".content");
    $this.find(".listing__list").attr("data-view", "grid");
    $this.find(".view__toggle").removeClass("active");
    $this.find(".view__toggle--grid").addClass("active");
    $(".listing__img").css({
      width: originalWidth,
      height: originalWidth
    });
  });
});

.resize {
  cursor: pointer;
  display: flex;
  padding: 1.3rem;
  border: 1px solid;
  display: flex;
  align-items: center;
}

.resize__icon {
  background: #fafafa;
  margin-right: 9px;
  cursor: pointer;
  border-radius: 3px;
}

.resize__icon--small {
  height: 14px;
  width: 14px;
}

.resize__icon--medium {
  height: 18px;
  width: 18px;
}

.resize__icon--large {
  height: 24px;
  width: 24px;
}

.resize__icon.active {
  background: #4aabf0;
}

.listing__bottom {
  border: 1px solid;
  background: silver;
  color: white
}

.listing__img {
  height: 46px;
  width: 46px;
  border: 3px solid;
}

.listing__list {
  padding: 1.3rem;
  border: 1px solid;
}

.view {
  display: flex;
  padding: 0.9rem;
}

.view>div {
  margin-right: 9px;
}

.view__toggle {
  padding: .3rem;
  cursor: pointer;
}

.view__toggle.active {
  background-color: #ececec;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div class="view">
    <div id="view_list" class="view__toggle view__toggle--list active">
      <div class="icon icon--list">list</div>
    </div>
    <div id="view_grid" class="view__toggle view__toggle--grid">
      <div class="icon icon--grid">grid</div>
    </div>

  </div>
  <div class="resize">
    <div class="resize__icon resize__icon--small active"></div>
    <div class="resize__icon resize__icon--medium"></div>
    <div class="resize__icon resize__icon--large"></div>
  </div>
  <div class="listing__list" data-view="list">
    <div class="listing__item">
      <div class="listing__img">
      </div>
    </div>
    <div class="listing__item">
      <div class="listing__img">
      </div>
    </div>
    <div class="listing__item">
      <div class="listing__img">
      </div>
    </div>
  </div>
</div>

Hi, you mean both your `list` and `grid` should work independently ? — Swati, Jan 07 '21 at 04:28
@Swati I only want to run the resize while in list and never change the image size when in grid view — Kyle Underhill, Jan 07 '21 at 04:34
I see what if inside `list` user select size `medium` and then inside `grid` this changes to `large` so which size you need medium or large inside `list` ? — Swati, Jan 07 '21 at 05:23
@Swati grid will always only ever be one size (original) but of I am in list and select medium then toggle to grid and back, I want the image to still be medium (remember the last size before grid is toggled) — Kyle Underhill, Jan 07 '21 at 05:26

A Paul · Answer 1 · 2021-01-07T05:45:49.050

How about somthing like this. I am just getting the current width and height before setting in the grid mode and storing it as an attribute in the element, later if the user change to list you can read from attribute and set the last widht. I am not sure how ever if that satisfies your actual usecase.

$(document).ready(function() {
  var originalWidth = $("[data-view='list']")
    .find(".listing__img")
    .css("width");

  function incSize(currentSize, incr, min, max) {
    if (parseFloat(currentSize) === max) return originalWidth;
    fSize = Math.max(Math.min(parseFloat(currentSize) + incr, max), min);
    return fSize + "px";
  }


  $(".resize").click(function() {
  if( mode == 'list' ) {
    var $list = $("[data-view='list']");
    var xcontext = $(".resize");
    var xactive = $(".resize__icon.active", xcontext);
    var xnext = xactive.next();

    xactive.removeClass("active");
    xnext.addClass("active");

    // Check if an element exists with both classes
    if ($(".resize__icon.active").length == 0) {
      // If not add active to the first .resize__icon
      $(".resize__icon").first().addClass("active");
    }
    newFontSize = incSize(
      $list.find(".listing__img").css("height"),
      24,
      46,
      94
    );

    $list.find(".listing__img").css({
      height: newFontSize,
      width: newFontSize
    });
    }
  });

var mode = 'list'
  $(".view__toggle--list").on("click", function() {
mode = 'list'
    var $this = $(this).closest(".content");
    $this.find(".listing__list").attr("data-view", "list");
    $this.find(".view__toggle").removeClass("active");
    $this.find(".view__toggle--list").addClass("active");
    
    var ow1 = $(".listing__img").attr('lastwidth');
    if( ow1 ) {
    $(".listing__img").css({
      width: ow1,
      height: ow1
    });
    }
  });

  $(".view__toggle--grid").on("click", function() {
   mode = 'grid'
    var $this = $(this).closest(".content");
    $this.find(".listing__list").attr("data-view", "grid");
    $this.find(".view__toggle").removeClass("active");
    $this.find(".view__toggle--grid").addClass("active");
    var ow1 = $(".listing__img").width()
    if( ow1 ) {
       $(".listing__img").attr('lastwidth', ow1);
    }
    $(".listing__img").css({
      width: originalWidth,
      height: originalWidth
    });
  });
});

.resize {
  cursor: pointer;
  display: flex;
  padding: 1.3rem;
  border: 1px solid;
  display: flex;
  align-items: center;
}

.resize__icon {
  background: #fafafa;
  margin-right: 9px;
  cursor: pointer;
  border-radius: 3px;
}

.resize__icon--small {
  height: 14px;
  width: 14px;
}

.resize__icon--medium {
  height: 18px;
  width: 18px;
}

.resize__icon--large {
  height: 24px;
  width: 24px;
}

.resize__icon.active {
  background: #4aabf0;
}

.listing__bottom {
  border: 1px solid;
  background: silver;
  color: white
}

.listing__img {
  height: 46px;
  width: 46px;
  border: 3px solid;
}

.listing__list {
  padding: 1.3rem;
  border: 1px solid;
}

.view {
  display: flex;
  padding: 0.9rem;
}

.view>div {
  margin-right: 9px;
}

.view__toggle {
  padding: .3rem;
  cursor: pointer;
}

.view__toggle.active {
  background-color: #ececec;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  <div class="view">
    <div id="view_list" class="view__toggle view__toggle--list active">
      <div class="icon icon--list">list</div>
    </div>
    <div id="view_grid" class="view__toggle view__toggle--grid">
      <div class="icon icon--grid">grid</div>
    </div>

  </div>
  <div class="resize">
    <div class="resize__icon resize__icon--small active"></div>
    <div class="resize__icon resize__icon--medium"></div>
    <div class="resize__icon resize__icon--large"></div>
  </div>
  <div class="listing__list" data-view="list">
    <div class="listing__item">
      <div class="listing__img">
      </div>
    </div>
    <div class="listing__item">
      <div class="listing__img">
      </div>
    </div>
    <div class="listing__item">
      <div class="listing__img">
      </div>
    </div>
  </div>
</div>

Grid should always revert back to it's original size (46px) but remember the last selected size from list view. — Kyle Underhill, Jan 07 '21 at 05:34
@KyleUnderhill check it now. I have saved the last value as an attribute in the element and fetching it if changed to list — A Paul, Jan 07 '21 at 05:38
It breaks down of you click the resize button while in grid mode then toggle back to list. You will see the sizes don't match the icons — Kyle Underhill, Jan 07 '21 at 05:40
what should happen in the grid mode ? should it not let the user to change the size in the grid mode ? — A Paul, Jan 07 '21 at 05:41
The user can only change the size while in list mode. Grid mode will always only be one size. — Kyle Underhill, Jan 07 '21 at 05:43
how about either hide the resize section or disable it when user in grid mode ? I have updated the code to disable the user to click on resize options when in grid mode — A Paul, Jan 07 '21 at 05:44
Your solution looks like it will work except when in grid mode I want to be able to set a different originalWidth than the list. How do we set the original size of the grid image to match this css: `[data-view="grid"] .listing__img { height: 96px;width: 96px;}` — Kyle Underhill, Jan 07 '21 at 15:09
You have to store that width somewhere in javascript or you can utilize this to read from css https://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript — A Paul, Jan 07 '21 at 16:33
I successfully implemented that functionality here: https://codepen.io/moofawsaw/pen/wvzXEYe Is there a more optimal way? — Kyle Underhill, Jan 07 '21 at 17:24
looks good to me. You can always improve your code, but thats depends upon your actual use case, for this example I think its good — A Paul, Jan 07 '21 at 17:40

jQuery - remember state of increment function

1 Answers1