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?
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.
Ah thanks Tim.
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();"
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.