Скрипт для golos.io меняющий оформление и добавляющий новые функции
// ==UserScript==
// @name GOLOS VIK
// @namespace golos.io
// @description Скрипт для golos.io меняющий оформление и добавляющий новые функции
// @description:ru Скрипт для golos.io меняющий оформление и добавляющий новые функции
// @grant none
// @version 1.06
// @include https://golos.io/*
// @require https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
// ==/UserScript==
/*
Скрипт для golos.io меняющий оформление и добавляющий новые функции
Автор скрипта https://golos.io/@vik
Скрипт меняет внешний вид ленты постов и добавляет выпадающий блок ответов на все страницы.
*/
// Прописываем CSS и HTML
var inlinecss = "<style>body{background:url(https://pp.vk.me/c837131/v837131970/2834c/lWcExPA9pfA.jpg) fixed #ededf9}.VotesAndComments{background:#fff;padding:0 25px;border-radius:10px;position:absolute;top:45px;right:0}.PostSummary__body.entry-content{white-space:normal;margin-bottom:20px}span.Author{color:#fff;background:#3adb76;padding:2px 5px;border-radius:2px}.PostSummary__footer{position:relative}ul.Topics li{float:left;background:#fff;padding:0 5px;margin:3px;border-radius:3px}.PostSummary__content{padding:15px}.PostSummary{clear:none;padding:0;width:100%;max-width:600px;margin:0 auto 60px;box-shadow:0 5px 10px -5px rgba(0,0,0,.76);transition:.3s all ease}.PostSummary:hover{box-shadow:0 8px 15px -5px rgba(0,0,0,.8)}img.PostSummary__image{float:none;display:block;width:100%;height:auto;max-width:100%}.PostSummary.with-image .PostSummary__content,.PostSummary.with-image .PostSummary__reblogged_by{margin-left:10px}li.Topics__title{display:block;float:none!important;background:0 0!important}.PostsIndex__topics small{display:block;float:right;margin-top:30px}.Voting__button-up{transition:1s all ease;border-radius:25px;z-index:7}.PostSummary:hover .Voting__button-up{transform:scale(2)}.PostsIndex__topics.column.shrink.show-for-large{position:fixed;right:-60px;top:100px;height:600px;height:80vh;overflow:auto}#answerupdate{cursor:pointer;text-align:center;background:#3adb76;color:#fff}.answerholder{display:none;position:fixed;background:#fff;width:300px;height:600px;height:95vh;font-size:9pt;top:48px;left:0;z-index:77;overflow:hidden}.answerholder .VotesAndComments,.answerholder span.Voting{display:none}.answerholder .PostSummary{margin:0;padding:0;border-bottom:1px solid #efefef}.PostSummary__time_author_category a .Author{color:#fff}.answerholder .PostSummary__body.entry-content{margin-bottom:0}.answerholder .PostSummary__content{padding:5px}.answerholder span.Author{background:0 0;padding:0;color:#000}.answerholder .PostSummary__time_author_category a{color:inherit}.answertarget{padding:25px 0 0;overflow-x:hidden;overflow-y:auto;height:600px;height:90vh}#showanswer{cursor:pointer;position:fixed;top:98px;left:0;background:#266db6;font-size:16px;box-shadow:0 0 3px #000;z-index:78;color:#fff;padding:0 10px;border-radius:0 10px 10px 0}span.vcard>strong{font-size:8pt;word-wrap:break-word}.PostSummary__time_author_category{border:none}#slidetopics { position: fixed; right: -2px; top: 200px; padding: 5px; background: #3adb76; color: white; cursor: pointer; font-weight: 700; border-radius: 5px; z-index: 5; }.go-top { position: fixed; bottom: 2em; left: 2em; text-decoration: none; color: white; background-color: rgba(0, 0, 0, 0.3); font-size: 16px; padding: 1em; display: none; } .go-top:hover { background-color: rgba(0, 0, 0, 0.6); }.ReplyEditor__body,.PostFull { background: white; }.PostFull{padding: 15px;}</style>";
var somehtml = '<div class="answerholder"><h3 id="answerupdate">Обновить ответы</h3><div class="answertarget">Загрузка...</div></div><div id="showanswer">Ответы</div><a href="#0" class="go-top">Вверх</a>';
$(inlinecss).appendTo( "head" ); // Устанавливаем CSS стили
$(somehtml).appendTo( "body" ); // Вставляем необходимые html элементы
// Меняем в постах маленькие фото на большие: 256x128 > 640x480
var tinyimg = new RegExp('/256x128/'), // Берем ссылки на маленькие превью
bigimg = new RegExp('640x480'); // Меняем в ссылка значение разрешения фотографии, обращаясь к проксификатору по ссылке https://imgp.golos.io/640x480/
function imgtoggle(){
$('img.PostSummary__image').each(function(){
var image = $(this);
image.attr('src', image.attr('src').replace(tinyimg, bigimg)); // Тут происходит ранее описанная замена 256x128 на 640x480
});
}
imgtoggle();
// Когда инфинитискролл подгрузил новые посты, снова запускаем замену 256x128 на 640x480
$(document).on('DOMNodeInserted', function(e) {
imgtoggle();
});
// Получаем параметры, который пользователь может добавить в конец своей ссылки на аватар. Синтаксис //domain.tld/img.jpg?css=[css стили]
// Так же получаем юзернэйм для которого нужно показывать блок ответов
function waitfor(){ // Внутри функции будем ждать полной загрузки страницы и проверять когда появятся необходимые нам ссылки
var Upic = $('.Userpic');
var userpicUrl = $('.Userpic img').attr('src'); // Проверяем ссылку на аватар
var usernameUrl = Upic.parent().attr('href'); // Проеверяем ссылку на юзернэйм. Нам нужно получить из нее ник текущего пользователя, что бы ответы в виджет загружались именно для вас.
// Если ссылки уже доступны, выдираем только нужные нам параметры:
// Фильтруем и получаем параметры, который пользователь добавил в своем аккаунте в конец ссылки на аватар например //вк.ком/рукалицо.jpg?css=[#content{background:black;}] сделает фон контента черным
function getParameterByName(name, url) {
if (!url) {
url = userpicUrl;
}
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&]*)|&||$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// Функция с помощью который мы загрузим ответы в будущем.
function answerupdate(){
$('.answertarget').load(usernameUrl + '/recent-replies/ #posts_list');
}
if (Upic.length){
console.log(userpicUrl);
console.log(usernameUrl);
// Даем возможность обновлять ответы нажатием кнопки "Обновить ответы"
$('#answerupdate').on('click', function(){
answerupdate();
});
// Даем возможность открывать/закрывать блок ответов
var isActive = true;
$('#showanswer').on( 'click', function() {
if ( isActive ) {
answerupdate();
$('.answerholder').slideDown();
} else {
$('.answerholder').slideUp();
}
isActive = !isActive;
imgtoggle(); // на всякий случай еще раз меняем превьюшки на большие
});
// Получаем то, что после ?css= и перед &
// Убираем квадратные скобки по бокам из переменной
var cleaning = getParameterByName('css');
var stringcss = cleaning.substring(1, cleaning.length - 1);
// Оборачиваем в теги стиля
var cleanCSS = $('<style></style>').append(stringcss);
// Подключаем наш кастом стиль. На данный момент он применяется только после полной загрузки страницы, но в следующей версии скрипта я это исправлю.
cleanCSS.appendTo( "head" );
//C остальными пармаетрами проще. Можно получить параметр после каждого & в формате //вк.ком/рукалицо.jpg?option1=ON&option2=OFF&option3=BIG
var option1 = getParameterByName('opt1');
var option2 = getParameterByName('opt2');
var option3 = getParameterByName('opt3');
// Пока опции есть как пример и демо функционала, осталось придумать какие опции могуть быть нужны. Например фиксировать ли кнопки редактора или нет. Или отключить большинсво ненужных элементов.
// В качестве примера отключим топики - метки в сайдбаре
var notopics = getParameterByName('topics');
console.log(notopics); console.log(cleanCSS);
if (notopics == 'OFF') {
$('.PostsIndex__topics').slideUp(); // Топики улетают
// Добавляем кнопку, по нажатию которой топики выпадут вниз
$('<div id="slidetopics">Топики</div>').appendTo( "body" );
$('#slidetopics').on( 'click', function() {
if ( isActive ) {
$('.PostsIndex__topics').slideDown();
} else {
$('.PostsIndex__topics').slideUp();
}
isActive = !isActive;
});
}
// Для отключения топиков вставьте в ссылку аватара параметр ¬opics=OFF
// В следующей версии скина будет больше параметров и настроек
}
// Так как мы все еще внутри условия "Если аватарка уже загрузилась" , то если она не загрузилась - мы будем рекурсивно проверять и ждать ее каждую секунду
else {
setTimeout(waitfor, 1000);
}
}
waitfor();
// Добавляем кнопку-стрелку возвращения в начало страницы
$(document).ready(function() {
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(200);
}
});
// Animate the scroll to top
$('.go-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
})
});
// Сообщение в консоли браузера.
console.log('Вы установили userscript от golos.io/@vik и сейчас вы смотрите консоль :) ВНИМАНИЕ! Перед установкой этого или похожего скрипта убедитесь, что вы нашли его в надежном источнике! Если вы не уверены, что скрипт оригинальный - обратитесь к опытным пользователям и попросите проверить его на предмет внедрения вредного кода. Вы можете обратиться ко мне в голосе golos.io/@vik/ ');