topic Re: How can I duplicate the popup behavior from Shortlist template to Map Series template? in Classic Esri Story Maps Questions

How can I duplicate the popup behavior from Shortlist template to Map Series template?

ChrisMathers1 — Mon, 16 May 2016 18:52:43 GMT

I want to use the Map Series story map template but would like the popup behavior from the Shortlist template. In Shortlist you get a popup with a button at the bottom for more information which expands gives a small info window which has the popup content and more content in a second column. I edited the Map Series CSS to make the default popup wider and used a table in the popup so it will format to two columns but it doesn't look as nice. Anyone played with these templates code enough to give me a direction to head in?

Re: How can I duplicate the popup behavior from Shortlist template to Map Series template?

TimWitt2 — Mon, 16 May 2016 18:56:37 GMT

I moved this to the Story Map place, which should give you a better chance of getting an answer. The ESRI story map team is very active here.

Re: How can I duplicate the popup behavior from Shortlist template to Map Series template?

ChrisMathers1 — Mon, 16 May 2016 19:01:04 GMT

Ah thanks Tim.

Re: How can I duplicate the popup behavior from Shortlist template to Map Series template?

AdrianWelsh — Sat, 11 Dec 2021 16:42:24 GMT

Hi Chris,

Could you essentially grab the modal window behavior from the short list and throw it into the map series JavaScript configuration?

/******************************************************
 ****************** Modal Info Window *****************
 ******************************************************/


 // based on http://www.smashingmagazine.com/2014/09/15/making-modal-windows-better-for-everyone/


var _lastFocus;
var _infoWindowCloseButton;
var _infowWindowDom;
var _showingDetails;


function infoWindow_onShow(event) {
  _lastFocus = document.activeElement;
  setTimeout(function(){
  if(!_tileClick){
  $('.description')[0].setAttribute('tabIndex', '0');
  $('.description')[0].focus();
  }
  }, 500);
}


function infoWindow_onHide(event) {
  unselect();
  _modalOpen = false;
  // place focus on the saved element
  setTimeout(function(){
  if(_lastFocus)
  _lastFocus.focus();
  }, 0);
}


function focusRestrict ( event ) {
  document.addEventListener('focus', function( event ) {
  if (_map.infoWindow.isShowing &&
  !_infowWindowDom.contains( event.target) &&
  !_showingDetails) {
  event.stopPropagation();
  _infoWindowCloseButton.focus();
  }
  }, true);
}


function infoWindow_Close() {
  _map.infoWindow.hide();
}


function modalClose ( e ) {
  if ( !e.keyCode || e.keyCode === 27 ) {
  if (_map.infoWindow.isShowing && !_showingDetails) {
  infoWindow_Close();
  }
  }
}


function modal_InfoWindow_Init() {
  dojo.connect(_map.infoWindow,"onHide",infoWindow_onHide);
  dojo.connect(_map.infoWindow,"onShow",infoWindow_onShow);
  _infoWindowCloseButton = $(".esriPopup .titleButton.close")[0];
  _infowWindowDom = _map.infoWindow.domNode;
  if(!_isIE8){
  document.addEventListener('keydown', modalClose);
  focusRestrict();
  }
}

Within the function of initMap(layers), you might have to put in the "modal_InfoWindow_Init();"

Re: How can I duplicate the popup behavior from Shortlist template to Map Series template?

ChrisMathers1 — Tue, 17 May 2016 19:44:43 GMT

Not working for me but I may not have figured out exactly where to put it in yet. This template looks a lot more complex on the back end.