Modify existing MapView padding property

Question

I am building an application that has a sidebar that opens by default on Desktop applications and using the padding (example app) option available with 4.9 of the ArcGIS JavaScript API, I want to offset the side of the screen while the sidebar is opened. When the app is resized I want to remove the property offset and somehow refresh or reload the original View. I was able to get it working by re-creating the view which causes a weird flash on the map. I made a simple jsfiddle showing something similar to what I want to do. https://jsfiddle.net/booshwa/t05ks1u4/. When the user clicks on the recenter button a new view is built with padding if the sidebar is open or it sets the padding to 0 if the sidebar is hidden. Below is the JavaScript in the jsfiddle.

require([
  "esri/Map",
  "esri/views/MapView"
], function(
        Map,
         MapView
    ) {

  // Create the Map
  var map = new Map({
    basemap: "topo"
  });

  // Create the view set the view padding to be 320 px from the right
  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-74.045459, 40.690083], // Liberty Island, NY, USA
    zoom: 16,
    padding: {
      right: 320 // Same value as the #sidebar width in CSS
    }
  });

  var sidebar_open = true;

  // Show / Hide the sidebar
  $("#toggle_sidebar").click(function() {
    if (sidebar_open) {
        $("#sidebar").css({display: "none"});
    } else {
        $("#sidebar").css({display: "block"});
    }
    sidebar_open = !sidebar_open;
  });

    // Builds a new view based on if the sidebar is open or closed
  $("#toggle_view").click(function() {
        var padding = 0;
        if (sidebar_open) {
        padding = 320;
    }

    // Recreate the view to make the padding reset
    // => Is this the only way to update a view?
    view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-74.045459, 40.690083], // Liberty Island, NY, USA
      zoom: 16,
      padding: {
        right: padding // Same value as the #sidebar width in CSS
      }
    });

  });

});

Answer 1

You just have to modify the padding of the view and then use the view.goTo method to recenter the mapView like this:

https://jsfiddle.net/t05ks1u4/55/

  $("#toggle_view").click(function() {
    var padding = 0;
    if (sidebar_open) {
       padding = 320;
    }

    view.padding = {left:0, top: 0, right: padding, bottom: 0};
    view.goTo(view.center)

  });