Vote Explosion Effect

Robi BUUUM.

目前為 2016-02-17 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

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

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name            Vote Explosion Effect
// @namespace       voteexplosion
// @description     Robi BUUUM.
// @include         http://*.wykop.pl/*
// @version         2.3.4
// ==/UserScript==

//                                     88
//                                     ""
//
//   ,adPPYba,  8b,dPPYba,   ,adPPYba, 88  ,adPPYba,
//  a8"     "8a 88P'    "8a a8"     "" 88 a8P_____88
//  8b       d8 88       d8 8b         88 8PP"""""""
//  "8a,   ,a8" 88b,   ,a8" "8a,   ,aa 88 "8b,   ,aa
//   `"YbbdP"'  88`YbbdP"'   `"Ybbd8"' 88  `"Ybbd8"'
//              88                    ,88
//              88                  888P"


var options = {
		particleSpread: 150,
		particleCount: 	20,
		version: '2.3',
		velocity: false
	},
	voteCount = {
		VOTEplus: 		0,
		VOTEminus: 		0,
		VOTEsub: 		0,
		VOTEfav: 		0,
		VOTEblock: 		0,
		VOTEdigg: 		0,
		VOTEbury: 		0
	};

	var head = document.getElementsByTagName('head')[0];
	var velocity = document.createElement('script');
	velocity.type = 'text/javascript';
	velocity.onload = function() {
		options.velocity = true;
	}
	velocity.src = 'https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js';
	head.appendChild(velocity);

// ustawienia

if(localStorage.getItem("particleSpread")) {
	options.particleSpread = localStorage.getItem("particleSpread");
}

if(localStorage.getItem("particleCount")) {
	options.particleCount = localStorage.getItem("particleCount");
}

// liczba głosów
function updateVoteCount() {
	if(localStorage.getItem("VOTEplus")) {
		voteCount.VOTEplus = localStorage.getItem("VOTEplus");
	} else {
		localStorage.setItem("VOTEplus", 0);
	}

	if(localStorage.getItem("VOTEminus")) {
		voteCount.VOTEminus = localStorage.getItem("VOTEminus");
	} else {
		localStorage.setItem("VOTEminus", 0);
	}

	if(localStorage.getItem("VOTEsub")) {
		voteCount.VOTEsub = localStorage.getItem("VOTEsub");
	} else {
		localStorage.setItem("VOTEsub", 0);
	}

	if(localStorage.getItem("VOTEfav")) {
		voteCount.VOTEfav = localStorage.getItem("VOTEfav");
	} else {
		localStorage.setItem("VOTEfav", 0);
	}

	if(localStorage.getItem("VOTEblock")) {
		voteCount.VOTEblock = localStorage.getItem("VOTEblock");
	} else {
		localStorage.setItem("VOTEblock", 0);
	}

	if(localStorage.getItem("VOTEdigg")) {
		voteCount.VOTEdigg = localStorage.getItem("VOTEdigg");
	} else {
		localStorage.setItem("VOTEdigg", 0);
	}

	if(localStorage.getItem("VOTEbury")) {
		voteCount.VOTEbury = localStorage.getItem("VOTEbury");
	} else {
		localStorage.setItem("VOTEbury", 0);
	}
}

function incVoteCount(countName) {
	thisVoting = localStorage.getItem(countName);
	thisVoting++;
	localStorage.setItem(countName, thisVoting);
}

function decVoteCount(countName) {
	thisVoting = localStorage.getItem(countName);
	thisVoting--;
	if(thisVoting < 0) {
		thisVoting = 0;
	}
	localStorage.setItem(countName, thisVoting);
}



//                                88
//              ,d                88
//              88                88
//  ,adPPYba, MM88MMM 8b       d8 88  ,adPPYba,
//  I8[    ""   88    `8b     d8' 88 a8P_____88
//   `"Y8ba,    88     `8b   d8'  88 8PP"""""""
//  aa    ]8I   88,     `8b,d8'   88 "8b,   ,aa
//  `"YbbdP"'   "Y888     Y88'    88  `"Ybbd8"'
//                        d8'
//                       d8'


$('head').append('<style type="text/css">\
					.notificationTop {\
						color: white;\
						background-color: rgba(20,20,20,0.95);\
						padding: 30px;\
						text-align: center;\
						width: 50%;\
						position: fixed;\
						top: 0;\
						left: 0;\
						margin: 2% 25%;\
						z-index: 500;\
					}\
					.particleGreen {\
						color: #3b915f;\
					}\
					.particleGray {\
						color: #999;\
					}\
					.particleGold {\
						color: #c7a054;\
					}\
					.particleRed {\
						color: #c0392b;\
					}\
					.particle {\
						position: absolute;\
						pointer-events: none;\
						z-index: 16669;\
						-webkit-transform: translateZ(0);\
						-moz-transform: translateZ(0);\
						-ms-transform: translateZ(0);\
						-o-transform: translateZ(0);\
						transform: translateZ(0);\
					}\
					.particle i.fa {\
						font-size: 1.5rem;\
					}\
					.votersContainer {\
						min-height: 18px;\
						margin-bottom: 6px;\
					}\
					.optionsHalf {\
						float:left;\
					}\
					body li.entry ul.responsive-menu b a.affect {\
						color: #c0392b !important;\
					}\
					body li.entry .lcontrast:hover ul.responsive-menu b a.affect {\
						color: #c0392b !important;\
					}\
					.voteCount {\
						margin-top: 10px;\
						display: inline-block;\
						font-size: 20px;\
						font-weight: 700;\
					}\
					.saveState.optionsActive {\
						text-shadow: 0 0 10px rgba(250,250,250, 0.5);\
						transform: scale(1);\
					}\
					.saveState {\
						transition: 0.2s all;\
						transform: scale(0.8);\
						cursor: pointer;\
					}\
				 </style>');



//     ad88                         88                  88
//    d8"                           88                  ""
//    88                            88
//  MM88MMM 88       88 8b,dPPYba,  88   ,d8  ,adPPYba, 88  ,adPPYba,
//    88    88       88 88P'   `"8a 88 ,a8"  a8"     "" 88 a8P_____88
//    88    88       88 88       88 8888[    8b         88 8PP"""""""
//    88    "8a,   ,a88 88       88 88`"Yba, "8a,   ,aa 88 "8b,   ,aa
//    88     `"YbbdP'Y8 88       88 88   `Y8a `"Ybbd8"' 88  `"Ybbd8"'
//                                                     ,88
//                                                   888P"



function getParticlePosition(x, y, direction) {

	'use strict';

	var randomX = x - Math.floor((Math.random() * options.particleSpread) + 1 - (options.particleSpread / 2)),
		randomY = y - Math.floor((Math.random() * options.particleSpread) + 1 - (options.particleSpread / 2)),
		randomDirection = Math.floor((Math.random() * 200) + 1);

	if(direction == 'down') {
		randomY = randomY + randomDirection;
	} else {
		randomY = randomY - randomDirection;
	}

	return [randomX, randomY];
}

function randomRotate() {
	return Math.floor((Math.random() * 360) + 1);
}

function randomZoom() {
	return 2 - (Math.floor((Math.random() * 200) + 1) / 100);
}

function particleExplode(iconClass, colorClass, direction, click) {

	'use strict';

	var bodyElemsVote = document.getElementsByTagName("body"),
		bodyVote = bodyElemsVote[0],
		posX = click.pageX,
		posY = click.pageY,
		particleRandomClass = 'particle_' + Math.random().toString(36).substring(4),
		particlesArray = [],
		particle = '';

	for (var i = 0; i < options.particleCount; i++) {
		var particleID = 'particle_' + Math.random().toString(36).substring(4),
			particleClass = 'particle ' + colorClass + ' ' + particleRandomClass,
			particleStyle = 'top: ' + posY + 'px; left: ' + posX + 'px;',
			particle = particle + '<div class="' + particleClass + '" style="' + particleStyle + '" id="' + particleID + '"><i class="fa ' + iconClass + '"></i></div>';

			particlesArray[i] = particleID;
	}

	document.body.insertAdjacentHTML('beforeend', particle);

	for (var i = 0; i < options.particleCount; i++) {
		var particlePosition = getParticlePosition(posX, posY, direction),
			fadeOutTime = 500 + Math.floor((Math.random() * 500) + 1),
			animOptions = {
				easing: [0,.84,.25,.99],
				duration: fadeOutTime,
				queue: false
			};

			$('#' + particlesArray[i]).velocity({	top: particlePosition[1],
													left: particlePosition[0],
													rotateZ: randomRotate(),
													scale: randomZoom() }, animOptions)
										.velocity('fadeOut', fadeOutTime, { queue: false })
										.velocity({function(){
				var thisParticle = document.getElementById($(this).attr('id'));
				thisParticle.remove();
			}}, {delay: fadeOutTime}, { queue: false });
	}
}

function readNotification(version) {
	localStorage.setItem("VOTEnotificationRead", version);
}

function checkNotification() {
	versionRead = localStorage.getItem('VOTEnotificationRead');
	if(versionRead !== options.version) {
		setNotification('Skrypt został zaktualizowany do wersji 2.3.');
	}
}

function setNotification(mes) {
	$('body').prepend('<div class="notificationTop"><h3>VOTE EXPLOSION SCRIPT</h3><br>' + mes + '<br><a href="#" class="closeNotification">[zamknij to powiadomienie]</a> / <a href="http://www.wykop.pl/wpis/16564493/" class="closeNotification">[zobacz zmiany]</a></div>');
}

$('body').on('click', '.closeNotification', function(){
	$('.notificationTop').remove();
	readNotification(options.version);
});

function updateSettings() {
	$('.saveState').each(function(){
		var thisOptionName = $(this).attr('data-saveattr');
		if(localStorage['enabled_' + thisOptionName] == 'undefined') {
			localStorage['enabled_' + thisOptionName] = 'true';
		}
		if(localStorage['enabled_' + thisOptionName] == 'true') {
			$(this).addClass('optionsActive');
		}
	});
}

$('body').on('click', '.saveState', function() {
	$(this).toggleClass('optionsActive');
	var thisOptionName = $(this).attr('data-saveattr');
	if(localStorage['enabled_' + thisOptionName] == 'true') {
		localStorage['enabled_' + thisOptionName] = false;
	} else {
		localStorage['enabled_' + thisOptionName] = true;
	}
});

function checkOption(thisOptionName) {
	if(localStorage['enabled_' + thisOptionName] == 'false') {
		return false;
	} else {
		return true;
	}
}

//     ad88 88
//    d8"   ""
//    88
//  MM88MMM 88 8b,     ,d8 8b       d8
//    88    88  `Y8, ,8P'  `8b     d8'
//    88    88    )888(     `8b   d8'
//    88    88  ,d8" "8b,    `8b,d8'
//    88    88 8P'     `Y8     Y88'
//                             d8'
//                            d8'


$(document).ready(function(){
	updateVoteCount();
	checkNotification();
	if($('.r-block.scrollMe.latajacy').length) {
		$('.r-block.scrollMe.latajacy').remove();
	}
});


//  88,dPYba,,adPYba,   ,adPPYba, 8b,dPPYba,  88       88
//  88P'   "88"    "8a a8P_____88 88P'   `"8a 88       88
//  88      88      88 8PP""""""" 88       88 88       88
//  88      88      88 "8b,   ,aa 88       88 "8a,   ,a88
//  88      88      88  `"Ybbd8"' 88       88  `"YbbdP'Y8


$('.dropdown.right.m-hide div ul li:last').before('<li><a href="#" title="" id="openSettingsWindow"><i class="fa fa-wrench"></i> <span>opcje skryptu</span></a></li>');

$('body').on('click', '#openSettingsWindow', function(){
	updateVoteCount();
	var userNick = $('.dropdown-show.auto > img.avatar').attr('alt');

	if(localStorage.getItem("particleSpread")) {
		var particleSpread = localStorage.getItem("particleSpread");
	} else {
		var particleSpread = options.particleSpread;
	}

	if(localStorage.getItem("particleCount")) {
		var particleCount = localStorage.getItem("particleCount");
	} else {
		var particleCount = options.particleCount;
	}

	var settingsForm = '<br>\
							<p><strong>Ustawienia skryptu</strong></p>\
							<p>Kliknij, by włączyć lub wyłączyć naliczanie oraz animacje po kliknięciu. Podświetlone = włączone.</p>\
							<div style=" margin: 10px"><br \>\
								<div style="margin: 10px; text-align: center;">\
									<div class="particleGreen saveState" data-saveattr="VOTEplus" data-value="0" style="display: inline-block; margin: 0 5px; padding: 10px 15px; border: 1px solid rgba(150,150,150,0.1);">\
										<p><i class="fa fa-plus" style="font-size: 40px;"></i></p>\
										<p class="voteCount">' + voteCount.VOTEplus + '</p>\
									</div>\
									<div class="particleRed saveState" data-saveattr="VOTEminus" data-value="0" style="display: inline-block; margin: 0 5px; padding: 10px 15px; border: 1px solid rgba(150,150,150,0.1);">\
										<p><i class="fa fa-minus" style="font-size: 40px;"></i></p>\
										<p class="voteCount">' + voteCount.VOTEminus + '</p>\
									</div>\
									<div class="particleGold saveState" data-saveattr="VOTEfav" data-value="0" style="display: inline-block; margin: 0 5px; padding: 10px 15px; border: 1px solid rgba(150,150,150,0.1);">\
										<p><i class="fa fa-star" style="font-size: 40px;"></i></p>\
										<p class="voteCount">' + voteCount.VOTEfav + '</p>\
									</div>\
									<div class="particleGreen saveState" data-saveattr="VOTEsub" data-value="0" style="display: inline-block; margin: 0 5px; padding: 10px 15px; border: 1px solid rgba(150,150,150,0.1);">\
										<p><i class="fa fa-eye" style="font-size: 40px;"></i></p>\
										<p class="voteCount">' + voteCount.VOTEsub + '</p>\
									</div>\
									<div class="particleRed saveState" data-saveattr="VOTEblock" data-value="0" style="display: inline-block; margin: 0 5px; padding: 10px 15px; border: 1px solid rgba(150,150,150,0.1);">\
										<p><i class="fa fa-lock" style="font-size: 40px;"></i></p>\
										<p class="voteCount">' + voteCount.VOTEblock + '</p>\
									</div>\
									<div class="particleGreen saveState" data-saveattr="VOTEdigg" data-value="0" style="display: inline-block; margin: 0 5px; padding: 10px 15px; border: 1px solid rgba(150,150,150,0.1);">\
										<p><i class="fa fa-thumbs-up" style="font-size: 40px;"></i></p>\
										<p class="voteCount">' + voteCount.VOTEdigg + '</p>\
									</div>\
									<div class="particleRed saveState" data-saveattr="VOTEbury" data-value="0" style="display: inline-block; margin: 0 5px; padding: 10px 15px; border: 1px solid rgba(150,150,150,0.1);">\
										<p><i class="fa fa-thumbs-down" style="font-size: 40px;"></i></p>\
										<p class="voteCount">' + voteCount.VOTEbury + '</p>\
									</div>\
								</div>\
							</div>\
							<br>\
							<div class="optionsHalf" style="width: 49%; margin: 0 1% 0 0;">\
								<label for="particleSpread">wielkość wybuchu (px)</label>\
								<input type="text" class="form-control" id="particleSpread" value="' + particleSpread + '">\
							</div>\
							<div class="optionsHalf" style="width: 49%; margin: 0 0 0 1%;">\
								<label for="particleCount">ilość cząsteczek</label>\
								<input type="text" class="form-control" id="particleCount" value="' + particleCount + '">\
							</div>\
							<br>\
							<div style="clear:both;"><br></div>\
							<div style=" margin: 10px">\
								<div style="margin: 15px; text-align: center;" id="msgContainer">Zmiany zapisują się automatycznie.</div>\
							</div>',
		settingsPropaganda = '<div style="clear:both;"><br></div>\
								<img src="http://xs.cdn03.imgwykop.pl/c3397992/Dreszczyk_sBtjObQZ5c,q48.jpg" style="float:left; margin-right: 10px;">Cześć ' + userNick + '. Tutaj twórca tego skryptu, @Dreszczyk. Jeżeli chcesz podziękować z ten skrypt, to wiedz, że bardzo lubie <a href="http://www.wykop.pl/ludzie/Dreszczyk/">subskrybowanie mojego profilu</a>.',
		settingsWindow = '<div id="violationContainer">\
								<div class="overlay" style="display: block;"></div>\
								<div id="zgloszenie" style="display: none;" class="normal m-set-fullwidth m-reset-top m-reset-margin m-reset-left">\
									<form id="scriptSettings">\
										<div class="header">\
											<a href="#" title="zamknij" class="fright close"><span class="icon inlblk mini closepreview"><i class="fa fa-times"></i></span></a>\
											<span class="title">Vote Explosion Script - ustawienia</span>\
										</div>\
										<div class="view" style="max-height: initial;">' + settingsForm + '' + settingsPropaganda + '</div>\
									</form>\
								</div>\
							</div>';

	$('body').prepend(settingsWindow).find('#zgloszenie').fadeIn(250, function(){
		updateSettings();
	});
});

$('body').on('click', 'div.overlay', function(){
	$('#violationContainer').remove();
});

$('body').on('change', '#scriptSettings input', function(){
	localStorage.setItem($(this).attr('id'), $(this).val());
	options[$(this).attr('id')] = $(this).val();
	$('#msgContainer').html('Zmiany zapisują się automatycznie.<br><b>zapisane</b>.');
});


//              88
//              88
//              88
//  8b,dPPYba,  88 88       88 ,adPPYba, 8b       d8
//  88P'    "8a 88 88       88 I8[    "" `8b     d8'
//  88       d8 88 88       88  `"Y8ba,   `8b   d8'
//  88b,   ,a8" 88 "8a,   ,a88 aa    ]8I   `8b,d8'
//  88`YbbdP"'  88  `"YbbdP'Y8 `"YbbdP"'     Y88'
//  88                                       d8'
//  88                                      d8'

$('body').on('click', 'a.button.mikro.ajax', function (click) {
	if($(this).parent().find('.fa-minus').length) { // komentarz ze znaleziska
		if($(this).find('.fa-plus').length) { // dajemy plusa
			if(checkOption('votePlus')) {
				particleExplode('fa-plus', 'particleGreen', 'up', click);
				if($(this).parent().find('.disabled').length) { // dajemy plusa, a już daliśmy minusa
					decVoteCount('VOTEminus');
				}
				incVoteCount('VOTEplus');
			}
		} else { // dajemy minusa
			if(checkOption('VOTEminus')) {
				particleExplode('fa-minus', 'particleRed', 'down', click);
				if($(this).parent().find('.disabled').length) { // dajemy minusa, a już daliśmy plusa
					decVoteCount('VOTEplus');
				}
				incVoteCount('VOTEminus');
			}
		}
	} else { // wpis na mikroblogu
		if($(this).parent().find('.voted').length) { // zabieramy plusa
			if(checkOption('VOTEminus')) {
				particleExplode('fa-minus', 'particleRed', 'down', click);
				decVoteCount('VOTEplus');
			}
		} else {
			if(checkOption('VOTEplus')) {
				particleExplode('fa-plus', 'particleGreen', 'up', click);
				incVoteCount('VOTEplus');
			}
		}
	}
});


//                             88
//                             88
//                             88
//       ,adPPYba, 88       88 88,dPPYba,
//       I8[    "" 88       88 88P'    "8a
//        `"Y8ba,  88       88 88       d8
//       aa    ]8I "8a,   ,a88 88b,   ,a8"
//       `"YbbdP"'  `"YbbdP'Y8 8Y"Ybbd8"'


$('body').on('click', 'a[title="Dodaj do obserwowanych"]', function (click) {
	if(checkOption('VOTEsub')) {
		particleExplode('fa-eye', 'particleGreen', 'up', click);
		incVoteCount('VOTEsub');
	}
});

$('body').on('click', 'a[title="Usuń z obserwowanych"]', function (click) {
	if(checkOption('VOTEsub')) {
		particleExplode('fa-eye-slash', 'particleGray', 'down', click);
		decVoteCount('VOTEsub');
	}
});


//           88 88
//           88 ""
//           88
//   ,adPPYb,88 88  ,adPPYb,d8
//  a8"    `Y88 88 a8"    `Y88
//  8b       88 88 8b       88
//  "8a,   ,d88 88 "8a,   ,d88
//   `"8bbdP"Y8 88  `"YbbdP"Y8
//                  aa,    ,88
//                   "Y8bbdP"

// niewykopany i niezakopany - wykopywanie i cofanie wykopu
$('body').on('click', '.diggbox:not(.burried) span', function (click) {
	if($(this).parent().parent().hasClass('digout')) {
		if(checkOption('VOTEdigg')) {
			particleExplode('fa-thumbs-down', 'particleRed', 'down', click);
			decVoteCount('VOTEdigg');
		}
	} else {
		if(checkOption('VOTEdigg')) {
			particleExplode('fa-thumbs-up', 'particleGreen', 'up', click);
			incVoteCount('VOTEdigg');
		}
	}
});

// niewykopany i niezakopany - zakopywanie
$('body').on('click', '.diggbox .dropdown ul li a', function (click) {
	if(checkOption('VOTEbury')) {
		particleExplode('fa-thumbs-down', 'particleRed', 'down', click);
		incVoteCount('VOTEbury');
	}
});

// zakopany - cofanie zakopu
$('body').on('click', '.diggbox.burried span', function (click) {
	if(checkOption('VOTEbury')) {
		particleExplode('fa-thumbs-down', 'particleRed', 'down', click);
		decVoteCount('VOTEbury');
	}
});

//     ad88
//    d8"
//    88
//  MM88MMM ,adPPYYba, 8b       d8
//    88    ""     `Y8 `8b     d8'
//    88    ,adPPPPP88  `8b   d8'
//    88    88,    ,88   `8b,d8'
//    88    `"8bbdP"Y8     "8"

$('body').on('click', 'div.actions ul.responsive-menu a', function (click) {
	if($(this).text() == ' ulubiony') {
		if(checkOption('VOTEfav')) {
			if($(this).parent().is('b')) {
					particleExplode('fa-star-o', 'particleGray', 'down', click);
					decVoteCount('VOTEfav');
			} else {
				particleExplode('fa-star', 'particleGold', 'up', click);
				incVoteCount('VOTEfav');
			}
		}
	}
});


//  88          88                        88
//  88          88                        88
//  88          88                        88
//  88,dPPYba,  88  ,adPPYba,   ,adPPYba, 88   ,d8
//  88P'    "8a 88 a8"     "8a a8"     "" 88 ,a8"
//  88       d8 88 8b       d8 8b         8888[
//  88b,   ,a8" 88 "8a,   ,a8" "8a,   ,aa 88`"Yba,
//  8Y"Ybbd8"'  88  `"YbbdP"'   `"Ybbd8"' 88   `Y8a


$('body').on('click', 'a[title="zablokuj użytkownika"]', function (click) {
	if(checkOption('VOTEblock')) {
		particleExplode('fa-lock', 'particleRed', 'down', click);
		incVoteCount('VOTEblock');
	}
});

$('body').on('click', 'a[title="odblokuj użytkownika"]', function (click) {
	if(checkOption('VOTEblock')) {
		particleExplode('fa-unlock', 'particleGray', 'up', click);
		decVoteCount('VOTEblock');
	}
});