☰

ArcGIS Online Pop-up Docker

Replaces functionality of maximize button in ArcGIS Online webmap & app pop-ups, to dock the pop-up in top-right corner instead of filling the whole screen uselessly

  1. // ==UserScript==
  2. // @name         ArcGIS Online Pop-up Docker
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1
  5. // @description  Replaces functionality of maximize button in ArcGIS Online webmap & app pop-ups, to dock the pop-up in top-right corner instead of filling the whole screen uselessly
  6. // @author       mky
  7. // @supportURL   https://greasyfork.org/en/scripts/375717-arcgis-online-pop-up-docker/feedback
  8. // @match        *.maps.arcgis.com/*
  9. // @run-at       document-idle
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.         //dock on pop-up click --disabled on default
  17.     
  18.     //addGlobalStyle('.esriPopupVisible { top:auto !important; left:auto !important;  right: 306px !important; top: 10px !important; }');
  19.     //addGlobalStyle('.esriPopup .outerPointer {display:none !important}');
  20.     //addGlobalStyle('.esriPopup .pointer {display:none !important}');
  21.  
  22.     
  23.     //dock on pop-up maximize click
  24.     
  25.     addGlobalStyle('.esriPopupWrapper {top: 10px !important; left: 16px !important}');
  26.     addGlobalStyle('.esriPopupMaximized { left:auto !important; right: 356px !important; top: 10px !important;}');
  27.     addGlobalStyle('.esriPopupMaximized .sizer {!important; width:320px !important; max-width:320px !important;}');
  28.     addGlobalStyle('.esriPopupMaximized .sizer .contentPane { height:auto !important;  max-height:550px !important;}');
  29.  
  30.  
  31.     function addGlobalStyle(css) {
  32.         var head, style;
  33.         head = document.getElementsByTagName('head')[0];
  34.         if (!head) { return; }
  35.         style = document.createElement('style');
  36.         style.type = 'text/css';
  37.         style.innerHTML = css;
  38.         head.appendChild(style);
  39.     }
  40. })();