"미디어위키:Chameleon.js"의 두 판 사이의 차이
미미위키
1번째 줄: | 1번째 줄: | ||
+ | $(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" />') { | if ($(".comment-tag").html() == '<comments voting="Plus" />') { |
2015년 5월 14일 (목) 16:43 판
$(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');