Create movie posters view on movies page
目前為
// ==UserScript==
// @name SiG Movie Posters
// @namespace SoItGoes
// @version 0.1
// @description Create movie posters view on movies page
// @author cykage
// @match https://soitgo.es/?c=Movies*
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==
(function() {
'use strict';
//add toggle to middle bar
var toggle = document.createElement('div');
toggle.style.display = "inline-block";
toggle.innerHTML = '<a><button id="poster-button">Poster Mode</button></a>';
var middlebar = document.querySelector('#middlebar');
var rightButtons = middlebar.childNodes[4];
middlebar.insertBefore(toggle, rightButtons);
if (GM_getValue('postersEnabled') === undefined) {
GM_setValue('postersEnabled', false);
} else if (GM_getValue('postersEnabled') === true) {
document.querySelector('#poster-button').setAttribute('style', 'color: white !important');
showPosters();
}
toggle.addEventListener('click', function() {
if (!GM_getValue('postersEnabled')) {
showPosters();
GM_setValue('postersEnabled', true);
document.querySelector('#poster-button').setAttribute('style', 'color: white !important');
} else {
//remove posters, bring back table
document.querySelector('#poster-container').remove();
document.querySelector('#links').style.display='block';
document.querySelector('#poster-button').setAttribute('style', 'color: black !important');
GM_setValue('postersEnabled', false);
}
});
function showPosters(addedLinks=0) {
//if Load More is clicked, addedLinks will be the list of the new links
var posters = [];
var links = document.querySelector('#links');
var movies = addedLinks || document.querySelectorAll('.row.Movies');
for (var movie of movies) {
var img = movie.querySelector('img');
var resTags = movie.querySelector('.tags').innerText;
var sigLink = movie.querySelectorAll('a')[1].href;
if (img) {
var src = img.src;
var res;
if ( resTags.includes('720P') ) {
res = '720P';
} else if ( resTags.includes('1080P') ) {
res = '1080P';
} else {
res = 'SD';
}
posters.push( {'src': src, 'res': res, 'link': sigLink} );
}
}
//hide link table, create container and posters
links.style.display = 'none';
var posterContainer = document.createElement('div');
posterContainer.setAttribute('id', 'poster-container');
posterContainer.setAttribute('style','display:flex; justify-content: space-around; -webkit-flex-flow: row wrap');
posterContainer.setAttribute('class', 'sixteen columns');
var mainContainer = document.querySelector('#mainpage');
if (addedLinks === 0) {
//if Load More wasn't clicked, create new container
mainContainer.insertBefore(posterContainer, links);
} else {
//if Load More was clicked, use existing container
posterContainer = document.querySelector('#poster-container');
}
for (var poster of posters) {
var posterImg = document.createElement('div');
posterImg.innerHTML = (`
<div style="padding:10px; position: relative">
<a href="${poster.link}"><img style="width: 100%" src="${poster.src}" /></a>
<span style="
position: absolute;
top: 10px;
left: 10px;
color: white !important;
font: bold 12px/16px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.4);
padding: 3px; ">
${poster.res}
</span>
</div>`);
posterImg.style.width = "150px";
posterContainer.appendChild(posterImg);
}
}
//watch for new links added with Load More and add new divs to poster container
var linkTable = document.querySelector('#links');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (GM_getValue('postersEnabled')) {
showPosters(mutation.addedNodes);
}
});
});
observer.observe(linkTable, {childList: true });
})();