moegirl hide common box

moegirl-hide-common-box.js

$(function () {
	if (window.mw && !!mw.config.get('wgNamespaceNumber')) return;
	var contentParent = $('#mw-content-text');
	if (!contentParent.length) contentParent = $('#content');
	var commonBoxes = contentParent.find('.common-box');
	if (!commonBoxes.length) return;

	var commonBoxContainer = $('<div id="commonBoxContainer"><div id="commonBoxInfo"></div></div>').prependTo(contentParent);
	var commonBoxList = $('<div id="commonBoxList"></div>').appendTo('#commonBoxInfo');

	commonBoxes.each(function () {
		var commonBoxButton = $('<div class="commonBoxButton"></div>').appendTo(commonBoxList);
		var commonBox = $(this);
		commonBoxButton.data('element', commonBox);
		commonBoxButton.css('border-color', commonBox.css('border-left-color'));
		commonBoxButton.css('background-image', 'url(' + commonBox.find('> tbody > tr > td:first-child img').prop('src') + ')');
		commonBoxButton.on('click', function () {
			commonBoxes.filter(':visible').not(commonBox).hide();
			commonBox.toggle();
			$(this).toggleClass('current', commonBox.is(':visible')).siblings().removeClass('current');
			commonBoxList.toggleClass('open', commonBox.is(':visible'));
		});
	}).appendTo(commonBoxContainer).hide();

	$('<style>#commonBoxInfo { color: #f00; font-weight: bold; text-align: center; } #commonBoxList > .commonBoxButton { display: inline-block; border-bottom: 3px solid #000; width: 40px; height: 40px; background: #fff 50% 50% no-repeat; background-size: contain; cursor: pointer; transition: opacity .5s; } #commonBoxList.open > .commonBoxButton { opacity: .1; } #commonBoxList.open > .commonBoxButton.current { opacity: 1; }</style>').appendTo(commonBoxContainer);
});