Force titles to be displayed above movie posters (on some pages only)
目前为
// ==UserScript==
// @name Letterboxd Titles
// @namespace https://letterboxd.com/
// @version 0.1
// @description Force titles to be displayed above movie posters (on some pages only)
// @author n00bCod3r (https://github.com/n00bCod3rr)
// @match https://letterboxd.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
function addTitles() {
const maxTitleLength = 35;
let movieInfo = "";
//ul that will contain all the movie posters
const posterNodeListContainer = document.querySelector('ul.poster-list');
posterNodeListContainer.style.alignItems = "flex-end";
const posterNodeList = document.querySelectorAll('li>div[class*="film-poster-"]');
//for every movie
for (const elem of posterNodeList) {
//since the function will be called on scroll event, I add a class to every element that is tweaked so that the div is added only once
const elemClasses = elem.className;
if (!elemClasses.includes('tweaked')) {
elem.className += ' tweaked';
const movieTitle = elem.dataset.filmName;
//if the movie title is too long, trim it (change maxTitleLeght as you please)
if (movieTitle.length > maxTitleLength) {
const trimmedMovieTitle = `${movieTitle.substring(0,maxTitleLength-3)}...`;
movieInfo = `${trimmedMovieTitle}\n(${elem.dataset.filmReleaseYear})`;
}
else {
movieInfo = `${elem.dataset.filmName} (${elem.dataset.filmReleaseYear})`;
}
//Title (yyyy)
const width = elem.offsetWidth; //this will become the width of the divNode
const divNode = document.createElement("div");
divNode.innerHTML = movieInfo; //writes Movietitle <br/> (year) inside the div
//set width, text-align, overflow-wrap CSS properties for the div
divNode.style.width = `${width}px`;
divNode.style.textAlign = "center";
divNode.style.overflowWrap = "break-word"; //long words will go in a new line
//targets the DOM node father of the current div node, and insert the new divNode as its first child (to show the div above the poster image)
const nodeElemParent = elem.parentNode;
nodeElemParent.insertBefore(divNode, elem);
}
}
}
//wait for page to load
window.addEventListener('load', function() {
addTitles();
const currentURL = window.location.href;
console.log(currentURL);
if (currentURL.includes('/list/') || currentURL.includes('/watchlist/')) {
document.addEventListener('scroll', addTitles, false);
};
}, false);
})();