rhymix/layouts/simple_world/layout.js
Min-Soo Kim 5140047b5f 네모의 꿈/ 컨텐츠 위젯 스킨 (#712)
## 컨텐츠 모듈 스킨

- 사이트 테마를 따르지 않고 다른 색을 선택할 수 있도록 네모의 꿈 회원 스킨 컬러셋 추가.
- 탭이 많을 때 터치 환경이 아니면 좌우로 넘기기 어려운 점을 고려하여서 메뉴를 펼침.
- 작은 화면에서 화면을 최대한 활용하도록, 레이아웃 햄버거 메뉴를 부드럽게 나타내고 감춥니다.

## 위젯에서 LESS/SCSS 의 사용
- 변수를 위젯 캐시에도 전달할 수 있도록 해서 LESS 나 SCSS 에 값 전달이 가능하도록 함.
- LESS 나 SCSS 를 사용한 경우에 위젯 코드 캐싱 코드가 적절하게 기록되도록 해서 LESS나 SCSS 를 사용
가능하도록 수정.

## 그 외 변화
- Reduce the number of regular expressions.
2017-02-26 01:05:57 +09:00

128 lines
No EOL
3 KiB
JavaScript

$(function()
{
"use strict";
/* adjust the width of the right member menu */
var menu_width = function()
{
if($('#layout_gnb>ul>li:first-child').width() > 50)
{
$('#layout_gnb>ul>li:first-child .layout_dropdown-content, #layout_gnb>ul>li:first-child .layout_dropdown-content a').css('width', $('#layout_gnb>ul>li:first-child').width()).css('min-width', $('#layout_gnb>ul>li:first-child').width());
}
}
$( window ).resize(function()
{
if($('#layout_gnb>ul>li:first-child').width() > 50)
{
menu_width();
}
});
menu_width();
/* mobile hamburger menu toggle */
$(".layout_mobile_menu").each(function()
{
$( this ).click(function( event )
{
event.preventDefault();
layout_toggleMenuOpener( $( this ).get(0) );
});
});
/* detect scrolling up or down to hide or show the hamburger menu */
var previousScroll = 0;
var simpleScrolled = false;
var scrollThreshold = 5;
/* detect window scrolling */
$( window ).scroll(function()
{
simpleScrolled = true;
});
/* refresh window scrolling per 250 ms, and show/hide the menu */
setInterval(function()
{
if (simpleScrolled) {
display_menu();
simpleScrolled = false;
}
}, 250);
/* function to show/hide the menu */
var display_menu = function()
{
var currentScroll = $(window).scrollTop();
if (currentScroll > previousScroll)
{
if($("#layout_menu_toggle").css( 'position' ) === 'fixed')
{
$("#layout_menu_toggle").fadeOut();
}
}
else
{
if($("#layout_menu_toggle").css( 'position' ) === 'fixed')
{
$("#layout_menu_toggle").fadeIn(400, function() {
$("#layout_menu_toggle").css('display', '')
});
;
}
}
previousScroll = currentScroll;
}
/* keyboard accessibility for dropdown menu */
$(".layout_dropdown").each(function()
{
$( this ).focusin( function( event )
{
$( this ).addClass('layout_focus');
$( this ).find("ul.layout_dropdown-content").css('display', 'block').attr('data-dropdown', 'active');
});
});
$('body').focusin(function( event )
{
if (!$(event.target).parents('.layout_dropdown').is('.layout_dropdown'))
{
$('*[data-dropdown="active"]').css('display', '').attr('data-dropdown', '').parents('li.layout_dropdown').removeClass('layout_focus');
}
});
/* keyboard accessibility for dropdown menu END */
function layout_toggleMenuOpener(obj)
{
if(obj.classList.contains("is-active") === true)
{
var targetMenu = $(obj).attr('data-target');
$('#' + targetMenu).slideUp('300', function()
{
$(this).css('display', '');
});
obj.classList.remove("is-active");
}
else {
var targetMenu = $(obj).attr('data-target');
if(targetMenu == 'layout_gnb')
{
$('#layout_gnb>ul>li:first-child .layout_dropdown-content, #layout_gnb>ul>li:first-child .layout_dropdown-content a').css('width', '').css('min-width', '');
$('html,body').animate({scrollTop:0}, 200);
}
$('#' + targetMenu).slideDown('300');
obj.classList.add("is-active");
}
}
// Language Select
$('.layout_language>.toggle').click(function()
{
$('.selectLang').toggle();
});
});