Allows you to move and position the cards on the homepage.
// ==UserScript==
// @name Seriesfeed Move
// @namespace https://www.seriesfeed.com
// @version 1.2
// @description Allows you to move and position the cards on the homepage.
// @match https://www.seriesfeed.com/
// @grant unsafeWindow
// @require https://code.jquery.com/jquery-3.2.1.min.js
// @require https://code.jquery.com/ui/1.12.0/jquery-ui.min.js
// @author Tom
// @copyright 2016+, Tom
// ==/UserScript==
/* jshint -W097 */
/* global $, console */
'use strict';
$(function() {
// Identify the columns.
const col1 = $(".row .col-md-6:eq(0)");
const col2 = $(".row .col-md-6:eq(1)");
// Add appropriate classes to the columns.
col1.addClass("sortable1");
col2.addClass("sortable2");
// Make cards draggable to either column.
col1.addClass("connectedSortable");
col2.addClass("connectedSortable");
// Find each card and add their state + make them serializable.
$('.sortable1 > div').each((i, obj) => {
addSortableData($(obj), 'i', i);
});
$('.sortable2 > div').each((i, obj) => {
addSortableData($(obj), 'j', i);
});
function addSortableData(item, type, num) {
item.addClass("ui-state-default");
item.css({
'border': '0px' // Revert border from JQuery UI
});
item.attr('id', type + "_" + (num+1));
const cardContent = item.find('.blog-left');
cardContent.prepend('<div class="handle" />');
item.find('.handle').css({
'padding-bottom': '75px',
'height': '80px',
'position': 'absolute',
'left': '0',
'right': '0'
});
}
// Load the cards in the right order.
restoreOrder();
// Change cursor on card's handle.
$(".handle").css('cursor', 'move');
// Actual sorting.
$(".sortable1, .sortable2").sortable({
connectWith: ".connectedSortable",
handle: '.handle',
revert: true,
cursor: "move",
update: function (event, ui) {
const cooked1 = [];
const cooked2 = [];
$(".sortable1").each((index, domEle) => {
cooked1[index] = $(domEle).sortable('toArray', {key: 'i', attribute: 'id'});
}
);
$(".sortable2").each((index, domEle) => {
cooked2[index] = $(domEle).sortable('toArray', {key: 'j', attribute: 'id'});
}
);
localStorage.setItem("blockOrder1", cooked1.join('|'));
localStorage.setItem("blockOrder2", cooked2.join('|'));
}
});
function restoreOrder() {
const order1 = localStorage.getItem("blockOrder1");
const order2 = localStorage.getItem("blockOrder2");
if (!order1 || !order2) {
return;
}
const SavedID1 = order1.split('|');
const SavedID2 = order2.split('|');
for (let u = 0, ul=SavedID1.length; u < ul; u++) {
SavedID1[u] = SavedID1[u].split(',');
}
for (let u = 0, ul=SavedID2.length; u < ul; u++) {
SavedID2[u] = SavedID2[u].split(',');
}
for (let Scolumn = 0, n = SavedID1.length; Scolumn < n; Scolumn++) {
for (let Sitem = 0, m = SavedID1[Scolumn].length; Sitem < m; Sitem++) {
if (SavedID1[Scolumn][Sitem].indexOf("i") >= 0) {
$(".sortable1").eq(Scolumn).append($(".sortable1").children("#" + SavedID1[Scolumn][Sitem]));
} else {
$(".sortable1").eq(Scolumn).append($(".sortable2").children("#" + SavedID1[Scolumn][Sitem]));
}
}
}
for (let Scolumn = 0, n = SavedID2.length; Scolumn < n; Scolumn++) {
for (let Sitem = 0, m = SavedID2[Scolumn].length; Sitem < m; Sitem++) {
if (SavedID2[Scolumn][Sitem].indexOf("i") >= 0) {
$(".sortable2").eq(Scolumn).append($(".sortable1").children("#" + SavedID2[Scolumn][Sitem]));
} else {
$(".sortable2").eq(Scolumn).append($(".sortable2").children("#" + SavedID2[Scolumn][Sitem]));
}
}
}
}
});