JimBlaney/previous-next-extent.html

## previous-next-extent.html
<!DOCTYPE html>
<html>
  <head>
    <title>Previous/Next Extent</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="//js.arcgis.com/3.21/esri/css/esri.css">
    <style>
      html, body {
        margin: 0; padding: 0;
        width: 100%; height: 100%;
      }

      #map {
        width: 100%; height: 100%;
      }

      #map .buttons {
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 999;
      }

      #map .buttons button {
        padding: 0.5rem;
        border-radius: 0.25rem;
        background: white;
        border: 1px solid #333;
        color: #333;
        font-size: 0.8rem;
        transition: all 0.6s ease-out;
        cursor: pointer;
      }

      #map .buttons button:hover {
        background: #333;
        color: white;
      }

      #map .buttons button[disabled],
      #map .buttons button[disabled]:hover {
        background: white;
        border: 1px solid #aaa;
        color: #aaa;
        cursor: not-allowed;
      }
    </style>
  </head>
  <body>
    <div id="map">
      <div class="buttons">
        <button id="previousButton" disabled>Previous</button>
        <button id="nextButton" disabled>Next</button>
      </div>
    </div>
    <script data-dojo-config="async: true" src="//js.arcgis.com/3.21/init.js"></script>
    <script>
      require([
        'dojo/_base/declare',
        'dojo/_base/lang',
        'dojo/dom',
        'dojo/dom-attr',
        'dojo/on',
        'esri/map',
        'dojo/domReady!'
      ], function (
        declare,
        lang,
        dom,
        domAttr,
        on,
        Map
      ) {

        var PreviousNextExtentManager = declare(null, {

          _map: null,
          _cachedExtent: null,
          _previous: null,
          _next: null,
          _ignoreNext: null,

          constructor: function(map) {
            this._map = map;
            this._cachedExtent = map.extent;
            this._previous = [];
            this._next = [];
            this._ignoreNext = false;
            this._attachEvents();
          },

          _attachEvents: function() {
            this._map.on('extent-change', lang.hitch(this, this._onExtentChange));
          },

          _onExtentChange: function(event) {
            if (this._ignoreNext) {
              this._ignoreNext = false;
              this._cachedExtent = event.extent;
              return;
            }
            this._previous.push(this._cachedExtent);
            this._cachedExtent = event.extent;
            this._next = [];
          },

          clear: function() {
            this._previous = [];
            this._next = [];
          },

          canMovePrevious: function() { return !!this._previous.length; },
          canMoveNext: function() { return !!this._next.length; },

          movePrevious: function() {
            if (!this.canMovePrevious()) {
              return;
            }
            this._next.push(this._map.extent);
            this._ignoreNext = true;
            this._map.setExtent(this._previous.pop());
          },

          moveNext: function() {
            if (!this.canMoveNext()) {
              return;
            }
            this._previous.push(this._map.extent);
            this._ignoreNext = true;
            this._map.setExtent(this._next.pop());
          }

        });

        var map = new Map('map', {
          basemap: 'gray',
          center: [-77.425461, 39.412327],
          zoom: 13
        });


        map.on('load', function() {
          var previousNextMgr = new PreviousNextExtentManager(map);

          var previousButton = dom.byId('previousButton');
          on(previousButton, 'click', function() {
            previousNextMgr.movePrevious()
          });

          var nextButton = dom.byId('nextButton');
          on(nextButton, 'click', function() {
            previousNextMgr.moveNext()
          });

          map.on('extent-change', function() {
            if (previousNextMgr.canMovePrevious()) {
              domAttr.remove('previousButton', 'disabled');
            } else {
              domAttr.set('previousButton', 'disabled', 'disabled');
            }
            if (previousNextMgr.canMoveNext()) {
              domAttr.remove('nextButton', 'disabled');
            } else {
              domAttr.set('nextButton', 'disabled', 'disabled');
            }
          });
        });

      });
    </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Previous/Next Extent</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="//js.arcgis.com/3.21/esri/css/esri.css">
	<style>
	html, body {
	margin: 0; padding: 0;
	width: 100%; height: 100%;
	}

	#map {
	width: 100%; height: 100%;
	}

	#map .buttons {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 999;
	}

	#map .buttons button {
	padding: 0.5rem;
	border-radius: 0.25rem;
	background: white;
	border: 1px solid #333;
	color: #333;
	font-size: 0.8rem;
	transition: all 0.6s ease-out;
	cursor: pointer;
	}

	#map .buttons button:hover {
	background: #333;
	color: white;
	}

	#map .buttons button[disabled],
	#map .buttons button[disabled]:hover {
	background: white;
	border: 1px solid #aaa;
	color: #aaa;
	cursor: not-allowed;
	}
	</style>
	</head>
	<body>
	<div id="map">
	<div class="buttons">
	<button id="previousButton" disabled>Previous</button>
	<button id="nextButton" disabled>Next</button>
	</div>
	</div>
	<script data-dojo-config="async: true" src="//js.arcgis.com/3.21/init.js"></script>
	<script>
	require([
	'dojo/_base/declare',
	'dojo/_base/lang',
	'dojo/dom',
	'dojo/dom-attr',
	'dojo/on',
	'esri/map',
	'dojo/domReady!'
	], function (
	declare,
	lang,
	dom,
	domAttr,
	on,
	Map
	) {

	var PreviousNextExtentManager = declare(null, {

	_map: null,
	_cachedExtent: null,
	_previous: null,
	_next: null,
	_ignoreNext: null,

	constructor: function(map) {
	this._map = map;
	this._cachedExtent = map.extent;
	this._previous = [];
	this._next = [];
	this._ignoreNext = false;
	this._attachEvents();
	},

	_attachEvents: function() {
	this._map.on('extent-change', lang.hitch(this, this._onExtentChange));
	},

	_onExtentChange: function(event) {
	if (this._ignoreNext) {
	this._ignoreNext = false;
	this._cachedExtent = event.extent;
	return;
	}
	this._previous.push(this._cachedExtent);
	this._cachedExtent = event.extent;
	this._next = [];
	},

	clear: function() {
	this._previous = [];
	this._next = [];
	},

	canMovePrevious: function() { return !!this._previous.length; },
	canMoveNext: function() { return !!this._next.length; },

	movePrevious: function() {
	if (!this.canMovePrevious()) {
	return;
	}
	this._next.push(this._map.extent);
	this._ignoreNext = true;
	this._map.setExtent(this._previous.pop());
	},

	moveNext: function() {
	if (!this.canMoveNext()) {
	return;
	}
	this._previous.push(this._map.extent);
	this._ignoreNext = true;
	this._map.setExtent(this._next.pop());
	}

	});

	var map = new Map('map', {
	basemap: 'gray',
	center: [-77.425461, 39.412327],
	zoom: 13
	});



	map.on('load', function() {
	var previousNextMgr = new PreviousNextExtentManager(map);

	var previousButton = dom.byId('previousButton');
	on(previousButton, 'click', function() {
	previousNextMgr.movePrevious()
	});

	var nextButton = dom.byId('nextButton');
	on(nextButton, 'click', function() {
	previousNextMgr.moveNext()
	});

	map.on('extent-change', function() {
	if (previousNextMgr.canMovePrevious()) {
	domAttr.remove('previousButton', 'disabled');
	} else {
	domAttr.set('previousButton', 'disabled', 'disabled');
	}
	if (previousNextMgr.canMoveNext()) {
	domAttr.remove('nextButton', 'disabled');
	} else {
	domAttr.set('nextButton', 'disabled', 'disabled');
	}
	});
	});

	});
	</script>
	</html>