Raw Source Toggle Dropdown

• Minified Source

Yog / fixed strava map

// ==UserScript==
// @namespace     https://openuserjs.org/users/Yog
// @name          fixed strava map
// @description	  for large screens toggle activity map to the side, so browsing through segment achievements requires less scrolling
// @author        Yog
// @homepageURL   https://openuserjs.org/
// @version       1.0.0
// @license       GPL-3.0
// @match         https://www.strava.com/activities/*
// @run-at        document-start
// ==/UserScript==
(function() {var css = [
  "@media (min-width: 1590px) {",
	"body.side-map {",
	  "display: inline-block;",
	"}",
	".side-map #map-canvas {",
      "position: fixed;",
      "top: 0;",
      "right: 0;",
      "width: calc(100% - 1248px);",
      "height: 100% !important;",
      "z-index: 99;",
	"}",
	".side-map #chart-container .base-chart {",
      "transform: scale(1.1);",
      "left: 45px;",
	"}",
    "#side-btn {",
      "line-height: 28px;",
      "background: #f5f5fa;",
      "top: 47px;",
      "position: absolute;",
      "right: 15px;",
      "font-size: 30px;",
      "border: 1px solid #ccccd1;",
      "border-radius: 2px;",
      "width: 30px;",
      "text-align: right;",
      "cursor: pointer;",
    "}",
    "#side-btn:hover {",
      "background: #e6e6eb;",
    "}",
  "}"
].join("\n");
	var node = document.createElement("style");
	node.type = "text/css";
	node.appendChild(document.createTextNode(css));
	var heads = document.getElementsByTagName("head");
	if (heads.length > 0) {
		heads[0].appendChild(node);
	} else {
		// no head yet, stick it whereever
		document.documentElement.appendChild(node);
	}

    // a little overcomplicated class toggle function
    function toggleItem(elem) {
      for (var i = 0; i < elem.length; i++) {
        elem[i].addEventListener("click", function(e) {
          var current = this;
          for (var i = 0; i < elem.length; i++) {
            if (document.body.classList.contains('side-map') === true) {
              document.body.classList.remove('side-map');
            } else {
              document.body.classList.add('side-map');
            }
            window.dispatchEvent(new Event('resize'));
          }
        });
      }
    }

    window.onload = function load() {
	  var button = document.createElement("span");
      button.textContent = "⇥";
      button.id = "side-btn";
	  document.getElementById('map-canvas').appendChild(button);

      // add event to toggle class
      toggleItem(document.querySelectorAll('#side-btn'));
    };
})();