JSMenu

!! BLOG READY - FORK ONLY - DO NOT CHANGE !!

by Chris Vitalos

HTML

<link rel="stylesheet" href="https://clvgt12.github.io/css/embedTumblrPost-2.0.0.css">
<script src="https://clvgt12.github.io/js/embedTumblrPost-2.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/validator/13.6.0/validator.min.js"></script>
<link rel="stylesheet" href="https://clvgt12.github.io/css/mastodon-timeline-3.10.4-1.css">
<script src="https://clvgt12.github.io/js/mastodon-timeline-3.10.4-1.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <style>
      body {
        background-color: #ddd;
      }

    </style>
  </head>

  <body>
    <div id="RecentPosts">
      <div id="RecentPosts-Tumblr-menu">
      </div>
      <div id="RecentPosts-Tumblr-region" class="embed-tweet" style="display: none;">
      </div>
      <div id="RecentPosts-Mastodon-menu">
      </div>
      <div id="RecentPosts-Mastodon-region" class="embed-tweet" style="display: none;">
        <p><span style="font-size: smaller;">Our <a target="_blank" href="https://www.patreon.com/AlbinSocial">donations</a> to <a target="_blank" href="https://mastodon.green/about">mastodon.green</a> fund <a target="_blank" href="https://www1.plant-for-the-planet.org/t/albin-social">reforestration</a></span></p>
        <div id="mt-timeline" class="mt-timeline">
          <div id="mt-body" class="mt-body">
            <div class="loading-spinner"></div>
          </div>
        </div>
      </div>
    </div>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        //Set up JSMenu blocks underneat Recent Posts section
        let tumblrRecentPostsMenuBlock = new JSMenu({
          "Top_DOM_Id": "RecentPosts-Tumblr-menu",
          "This_Div_Id": "TumblrMenu",
          "Menu_Image_URL": "https://cdn0.iconfinder.com/data/icons/global-top-brands/430/tumblr-letter-logo-512.png",
          "Menu_Text_Label": "Tumblr",
          "Arrow_Body_Color": "goldenrod",
          "Arrow_Outline_Color": "white",
          "Arrow_Outline_Stroke_Size": 3,
         ...

CSS

/* Start Embedded Tumblr and Twitter posts
----------------------------------------------- */

.embed-tweet {
  width: 100%;
  margin: auto;
  max-width: 540px;
}

@media screen and (max-width: 530px) {
  .mobile .embed-tweet {
    width: 90%;
  }
}

@media screen and (min-width: 531px) {
  .mobile .embed-tweet {
    max-width: 540px;
  }
}

.embed-tweet a,
.mobile .embed-tweet a {
  text-decoration: none;
}

img.tumblr-ad-banner {
  max-width: 100%;
  max-height: 100%;
  border: 1px solid;
}

img.tumblr-ad-banner:hover {
  border: 3px solid;
}

.tumblr-ad-banner {
  text-align: center;
  display: flex;
  justify-content: center;
}

.mobile .tumblr-ad-banner {
  text-align: center;
  display: flex;
  justify-content: center;
}

.timeline-button {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: transparent;
}

.timeline-button svg {
  width: 32px;
}

.timeline-button-social {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  border: 3px solid goldenrod;
  padding: 3px;
  border-radius: 3px;
  background-color: white;
}

.timeline-button-label {
  display: inline-block;
  margin: 5px;
}

#TumblrMenu-table,
#TwitterMenu-table,
#MastodonMenu-table {
  margin-left: -10px;
}

.mobile #TumblrMenu-table,
.mobile #TwitterMenu-table,
.mobile #MastodonMenu-table {
  margin-left: 0px;
}

JavaScript

String.prototype.format = function() {
	var s = this,
		i = arguments.length;
	while (i--) {
		s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]);
	}
	return s;
};

let JSMenu = function(params_) {
	try {
		const _Top_DOM_Id = document.getElementById(params_.Top_DOM_Id);
		const _Region_Div_Id = document.getElementById(params_.Region_Div_Id);
		if (!_Top_DOM_Id || !_Region_Div_Id) {
			throw "DOM Elements do not exist";
		}
		if (params_.This_Div_Id === undefined || params_.Menu_Text_Label === undefined || params_.Menu_Image_URL === undefined) {
			throw "Object initialization errors";
		}
	} catch (err) {
		console.log(err);
		return (void(0));
	}
	if (typeof(err) === "undefined") {
		this.TOP_DOM_ID = params_.Top_DOM_Id
		this.DIV_ID = params_.This_Div_Id;
		this.IMG_URL = params_.Menu_Image_URL;
		this.MENU_LABEL = params_.Menu_Text_Label;
		this.ARROW_BODY_COLOR = (params_.Arrow_Body_Color) ? params_.Arrow_Body_Color : "green";
		this.ARROW_OUTLINE_COLOR = (params_.Arrow_Outline_Color) ? params_.Arrow_Outline_Color : "black";
		this.ARROW_OUTLINE_STROKE_SIZE = (params_.Arrow_Outline_Stroke_Size) ? params_.Arrow_Outline_Stroke_Size : 3;
		this.REGION_DIV_ID = params_.Region_Div_Id;
		this.REGION_CONTENTS = params_.Region_Contents;
		this.createMenu();
		var _table = document.getElementById('{0}-table'.format(this.DIV_ID));
		if (_table) {
			_table.addEventListener('click', this.handleEvent.bind(this));
			// _table.addEventListener('touchstart', this.handleEvent.bind(this));
		}
	}
};
JSMenu.prototype.rightArrow = function() {
	return '<svg viewbox="0 0 100 100" preserveaspectratio="xMidYMid meet"><polygon points="25,25 25,75 75,50" style="fill:{0};stroke:{1};stroke-width={2}"/></polygon></svg>'.format(this.ARROW_BODY_COLOR, this.ARROW_OUTLINE_COLOR, this.ARROW_OUTLINE_STROKE_SIZE);
};
JSMenu.prototype.downArrow = function() {
	return '<svg viewbox="0 0 100 100" preserveaspectratio="xMidYMid meet"><polygon points="25,25 50,75 75,25"...