미디어위키:Chameleon.js

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

• 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
• 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
• 인터넷 익스플로러: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
• 오페라: 메뉴 → 설정(맥의 경우 오페라 → 환경 설정)으로 이동한 다음 개인 정보 보호 및 보안 → 검색 데이터 지우기 → 캐시한 영상 및 파일을 누름.

$(function() {
	// 블로그 컨텐츠 내용에서 "//www.youtube.com"가 들어가 있는 iframe태그를 찾아 $allvideos 변수에 담는다.
	var $allVideos = $("iframe[src^='//www.youtube.com']"),

	// viewContent 클래스명을 가진 엘리먼트를 설정해준다.
	// 유튜브 영상과 컨텐츠가 담겨있는 부모 엘리먼트를 선택하면 된다.
	$fluidEl = $(".viewContent");

	// 유튜브 비디오들의 영상비율값을 구해서 aspetRatio data값에 저장한다.
	$allVideos.each(function() {
		$(this)
		.data('aspectRatio', this.height / this.width) // 영상비율 = 높이 / 너비
		// 유튜브 iframe소스에 적혀있는 width, height값을 삭제한다.
		.removeAttr('height')
		.removeAttr('width');
	});

	// 영상들의 사이즈를 재설정한다.
	$(window).resize(function() {
		var newWidth = $fluidEl.width();
		// 앞서 설정한 $fluidEl의 값을 기준이 될 새로운 width값으로 설정한다.

		$allVideos.each(function() {
			var $el = $(this);
				$el
					.width(newWidth)
					.height(newWidth * $el.data('aspectRatio'));
				// 각 영상의 width와 height를 설정한다. height는 (newWidth * aspectRatio data)로 설정한다.
		});
	}).resize();
});

/* 댓글 태그 미동작시 감추기 */
if ($(".comment-tag").html() == '<comments voting="Plus" />') {
  $(".purge-cache-link").css('display','inline');
  $(".comment-show").css('display','none');
  $(".purge-cache-link a").attr({target:"_self"});
}

/* 외부 링크 타겟을 셀프로 */
$(".blank-to-self a").attr({target:"_self"});

/* 감추기 버튼 */
$(".hidebutton").click(function () {
  $(this).parent().parent().hide(1000);
});

/* 자동 선택 */
$(document).on('click', 'pre', function () {
 
	if (this.select) {
		this.select();
	}
	else if (document.selection) {
		var range = document.body.createTextRange();
		range.moveToElementText(this);
		range.select();
	} else if (window.getSelection) {
		var range = document.createRange();
		range.selectNode(this);
		window.getSelection().addRange(range);
	}
});

/* 사이드바로 요소 복사 */
$('#specialchars').clone().appendTo('#sidebar-edittools');
$('#toc').clone().appendTo('#sidebar-toc');
$('.ssphelptoc').appendTo('#sidebar-ssphelptoc');

if ( $("#specialchars").length > 0 || $("#toc").length > 0 || $(".ssphelptoc").length > 0 ) {
 $('#sidebar').addClass("well well-sm");
}

$('#sidebar-edittools > #specialchars').css('margin-top','8px');

/* 분류 목록 스타일링 - 문서 */
$('#mw-pages > h2').before("<div class='panel-heading'>");
$('#mw-pages > p').appendTo('#mw-pages > h2');
$('#mw-pages > h2').appendTo('#mw-pages > .panel-heading');
$('#mw-pages').addClass('panel panel-default');

$('#mw-pages > div > h2').css('display','inline');
$('#mw-pages > div > h2').css('margin','0');
$('#mw-pages > div > h2 > p').css('display','inherit');
$('#mw-pages > div > h2 > p').css('font-size','12px');
$('#mw-pages > div > h2 > p').css('font-weight','normal');
$('#mw-pages > div > h2 > p').css('margin-left','4px');
$('#mw-pages > div.mw-content-ltr').addClass('panel-body');
$('#mw-pages > div.mw-content-ltr').css('padding-top','0');

/* 분류 목록 스타일링 - 하위 분류 */
$('#mw-subcategories > h2').before("<div class='panel-heading'>");
$('#mw-subcategories > p').appendTo('#mw-subcategories > h2');
$('#mw-subcategories > h2').appendTo('#mw-subcategories > .panel-heading');
$('#mw-subcategories').addClass('panel panel-default');

$('#mw-subcategories > div > h2').css('display','inline');
$('#mw-subcategories > div > h2').css('margin','0');
$('#mw-subcategories > div > h2 > p').css('display','inherit');
$('#mw-subcategories > div > h2 > p').css('font-size','12px');
$('#mw-subcategories > div > h2 > p').css('font-weight','normal');
$('#mw-subcategories > div > h2 > p').css('margin-left','4px');
$('#mw-subcategories > div.mw-content-ltr').addClass('panel-body');
$('#mw-subcategories > div.mw-content-ltr').css('padding-top','0');

/* 분류 목록 스타일링 - 미디어 */
$('#mw-category-media > h2').before("<div class='panel-heading'>");
$('#mw-category-media > p').appendTo('#mw-category-media > h2');
$('#mw-category-media > h2').appendTo('#mw-category-media > .panel-heading');
$('#mw-category-media').addClass('panel panel-default');

$('#mw-category-media > div > h2').css('display','inline');
$('#mw-category-media > div > h2').css('margin','0');
$('#mw-category-media > div > h2 > p').css('display','inherit');
$('#mw-category-media > div > h2 > p').css('font-size','12px');
$('#mw-category-media > div > h2 > p').css('font-weight','normal');
$('#mw-category-media > div > h2 > p').css('margin-left','4px');
$('#mw-category-media > ul').before("<div class='panel-body'>");
$('#mw-category-media > div.panel-body').css('padding-left','0');
$('#mw-category-media > div.panel-body').css('padding-right','0');
$('#mw-category-media > ul').appendTo('#mw-category-media > div.panel-body');