Object based embedTumblrPosts.js

!! BLOG REFERENCED - FORK ONLY - DO NOT CHANGE !! Test the object based embedTumblrPosts javascript functions

by Chris Vitalos

HTML

<!DOCTYPE html>
<!-- ---------------------------------------------------------------------
embedTumblrPosts: Dynamically create a timeline from a Tumblr blog.
https://gitlab.com/clvgt12/embed-tumblr-posts

Copyright (C) 2023  @[email protected]

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
---------------------------------------------------------------------  -->
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="/~chris/test/js/embedTumblrPost.js"></script>
    <link href="/~chris/test/css/embedTumblrPost.css" rel="stylesheet" />
    <style>
      html {
        height: 100%;
      }

      body {
        height: 100%;
        font-size: 16px;
        font-family: sans-serif;
        background-color: #999;
      }

      h1 {
        font-family: serif;
        font-size: 24px;
      }

      .dummy-container {
        width: 100%;
        max-width: 30rem;
        margin: 2rem auto;
      }

    </style>
  </head>

  <body>
    <h1>Featured Posts</h1>
    <div class="dummy-container">
      <div id="FeaturedPosts"></div>
    </div>

    <h1>Recent Posts</h1>
    <div class="dummy-container">
      <div id="RecentPosts"></div>
    </div>

    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var cpFP = new Promise(function(resolve, reject) {
          FP = new...

CSS

/* ---------------------------------------------------------------------
embedTumblrPosts: Dynamically create a timeline from a Tumblr blog.
https://gitlab.com/clvgt12/embed-tumblr-posts

Copyright (C) 2023  @[email protected]

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>. 
--------------------------------------------------------------------- */

.tumblr-summary-post-outer {
	font: normal 14px Verdana,sans-serif;
	border: 1px solid black;
	border-radius: 5px;
	font-size: 14px;
	background-color: white;
	color:black;
	margin: 10px 0px 0px 0px;
}
.tumblr-summary-post-header {
	margin: 15px 15px 0px 15px;
	font-size: 14px;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.tumblr-summary-post-inner {
	border: none;
	margin: 0px 15px 0px 15px;
}

.tumblr-summary-post-header a {
  margin: 0.5em;
}

.tumblr-summary-post-header a:link, .tumblr-summary-post-inner a:link { 
	color: #0000EE; 
}

.tumblr-summary-post-header a:visited, .tumblr-summary-post-inner a:visited { 
	color: #551A8B; 
}

.tumblr-summary-post-inner h1 {
	font: normal 20px Georgia,serif;
	color:black;
	margin: 1.1em 0 1.1em 0;
}
.tumblr-summary-post-inner h2 {
	font: normal 18px Georgia,serif;
	color:black;
	margin: 1.1em 0 1.1em 0;
}
.tumblr-summary-post-inner img {
	width: 100%;
}

.tumblr-summary-post-inner figure {
	margin: 0.25em 0em 0.25em 0em;
	text-align: center;
}

.tumblr-summary-post-footer {...

JavaScript

/* ---------------------------------------------------------------------
embedTumblrPosts: Dynamically create a timeline from a Tumblr blog.
https://gitlab.com/clvgt12/embed-tumblr-posts

Copyright (C) 2023  @[email protected]

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published
by the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>. 
--------------------------------------------------------------------- */

let embedTumblrPosts = function(params_) {
  this.DEBUG = params_.debug || null;
  this.BLOG_ID = params_.blog_id || 1234567890;
  this.LIMIT = params_.limit || 5;
  this.BLACKLISTED_HASHTAGS = params_.blacklisted_hashtags || "";
  this.TOP_DOM_ELEMENT = params_.top_dom_element_id || "TumblrPosts";
  this.FANCY_POSTS = params_.fancy_posts || null;
  if (this.DEBUG) {
    console.log(JSON.stringify(params_));
  }
};
embedTumblrPosts.prototype.randInt = function(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};
embedTumblrPosts.prototype.format = function(str) {
  var args = Array.prototype.slice.call(arguments, 1);
  return str.replace(/{(\d+)}/g, function(match, number) {
    return typeof args[number] != 'undefined' ? args[number] : match;
  });
};
embedTumblrPosts.prototype.searchList = function(str, list) {
  for (let i = 0; i < list.length; i++) {
    if (str.indexOf(list[i]) !== -1) {
      return i;
    }
  }
  return -1;
};
//...