Improvements to FetLife's UI

Button to add an event to Google Calendar, visited profile links shown in red, mutual kinks shown brighter, homepage feed enlarged, show pagination at the top of people lists

Versión del día 30/09/2022. Echa un vistazo a la versión más reciente.

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

You will need to install an extension such as Tampermonkey to install this script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Necesitará instalar una extensión como Tampermonkey para instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

// ==UserScript==
// @name         Improvements to FetLife's UI
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Button to add an event to Google Calendar, visited profile links shown in red, mutual kinks shown brighter, homepage feed enlarged, show pagination at the top of people lists
// @author       You
// @match        https://fetlife.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=fetlife.com
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
// @license MIT
// @grant        none
// ==/UserScript==
/* global $ */

(function() {
  'use strict';
  console.log("Improve Fetlife: Start");

  var s = document.createElement("style");
  s.innerHTML="/* Added by Tampermonkey script: Improvements to FetLife's UI */ ";

  //visited profile links shown in red
  s.innerHTML+="#main-content .flex.flex-wrap a:visited {color: rgb(125,0,0) }";

  //mutual kinks shown brighter
  s.innerHTML+=".bg-gray-600 { background-color: #777; }";

  //homepage feed enlargement
  s.innerHTML+="#stories-list div { font-size: 22px; } #stories-list a.dib img { width: 150px !important; height: 150px !important; }";

  document.head.appendChild(s);

  //Improve group members e.g. page https://fetlife.com/groups/17165/members
  //or attendee list e.g. https://fetlife.com/events/1064773/rsvps
  if (pathMatch(/\/groups\/\d+\/members/) || pathMatch(/\/events\/\d+\/rsvps/)) {
    copyPrevNextPageLinksToTop();
  } else if (pathMatch(/\/events\/\d+\/?/)) {
    addButtonCalendar();
  }

  console.log("Improve Fetlife: Complete");
})();

function pathMatch(regexp) {
  var result = window.location.pathname.match(regexp);
  //console.log(window.location.pathname, regexp, result);
  return result;
}

function copyPrevNextPageLinksToTop() {
  $("header.justify-start, header.relative").after( $("footer div.pagination").clone().addClass("tc") ); //tc = text center
}

function addButtonCalendar() {
  var destination = $(".w275-l > div:first-child");

  var sidebar = $(".w275-l > div:first-child > div > div");
  if (sidebar.length == 0) {
    destination.after("<div style='color:red; border:3px solid gray'>Cannot find sidebar</div>");
    return;
  }

  //dates
  var dates = $(sidebar[0]).find("p span");
  var start = null;
  var end = null;
  if (dates.length > 2) {
    //start and end are on different days
    dates = dates.map(function(i,node) { return node.innerHTML; });
    start = dates[2] +" "+ dates[3];
    end = dates[5] +" "+ dates[6];
  } else if (dates.length==1 || dates.length==2) {
    //start and end are on the same day
    var parts = dates[dates.length-1].innerHTML.split("<br>");
    var times = parts[1].split(" - ");
    start = parts[0] +" "+ times[0];
    end = parts[0] +" "+ times[1];
  } else {
    destination.after("<div style='color:red; border:3px solid gray'>Date field has too few elements: " + dates.length +"</div>");
    return;
  }

  //description += start +" to " + end; //debugging
  start = new Date(start).toISOString().replace(/-|:|\.\d\d\d/g,"");
  end = new Date(end).toISOString().replace(/-|:|\.\d\d\d/g,"");

  //location
  var location = $(sidebar[1]).find("p").html();
  //replace parts of HTML with needed info, and then clear out the map link and closing span tag
  location = location.replace(/\s*<br>/,": ").replace(/<br>/,", ").replace(/<span [^>]*>/,"").replace(/(, United States )?<a.*/,"");

  var url = "http://www.google.com/calendar/render?action=TEMPLATE"
    + "&text=" + encodeURIComponent($("header h1").text())
    + "&dates=" + encodeURIComponent(start) + "/" + encodeURIComponent(end)
    + "&location=" + encodeURIComponent(location)
    + "&trp=false&sprop=&sprop=name:";

  //description can be long, so add it last
  var description = "URL: "+ window.location +"<br><br>" + $(".story__copy").html();
  url += "&details=" + encodeURIComponent(description);

  //add button!
  var btn = "<a target='_blank' data-color='lined' "
  + "class='relative no-underline items-center br1 us-none ba b-gray-750 hover-b-gray-600 b-animate bg-transparent hover-bg-transparent gray-300 hover-gray-300 fill-gray-300 fw4  tc justify-center inline-flex lh-copy f7 pv1 ph2' "
  + "href=\""+ url +"\">Add to Google Calendar</a>";
  destination.after(btn);

  /*
<a href="http://www.google.com/calendar/render?
action=TEMPLATE
&text=[event-title]
&dates=[start-custom format='Ymd\\THi00\\Z']/[end-custom format='Ymd\\THi00\\Z']
&details=[description]
&location=[location]
&trp=false
&sprop=
&sprop=name:"
 rel="nofollow">Add to my calendar</a>
  */
}