;(function(window) {
'use strict';
var GNB = {},
FILE_NAME = 'M_debug.gnb.js',
$ = window.jQuery || window.$ || null,
_this = GNB;
if( !window.M_debug ) {
window.M_debug = {};
console.error( FILE_NAME + ' >> window.M_debug Not Found!!' );
};
/**
* @namespace M_debug.GNB
* @author Fishingtree Dev ( hyunkwan roh )
* @type {{}|*}
* @description
*/
window.M_debug.GNB = window.M_debug.GNB || GNB;
GNB.$gnb = null;
GNB.$dp1 = null;
GNB.$dp2 = null;
GNB.$dp2Conatiner = null;
GNB.$gnbM = null;
GNB.$gnbMopen = null;
GNB.$gnbMclose = null;
GNB.$gnbMdp1 = null;
GNB.$share = null;
GNB._isFirst = true;
GNB._isOver = false;
GNB._timeOutId = null;
GNB._duration = 500;
GNB._aniDuration = 300;
GNB._idxDp1 = null;
GNB._idxDp2 = null;
var MOBILE_WIDTH = 1000;
/**
* Util
* @description
* Util 기능 정의
*/
var Util = {
getPageLocation : function( url ) {
DEBUG.log( FILE_NAME + ' > Util > getPageLocation > url : ' + url );
DEBUG.log( FILE_NAME + ' > Util > getPageLocation > host : ' + location.host + ' , href : ' + location.href );
if( url ) {
return Fishingtree.location.getPageLocation( url );
};
return location.href.split( location.host )[ 1 ];
}
};
GNB.setEvents = function() {
// 1뎁스 메뉴 롤오버
this.$dp1.mouseover(function(event) {
event.preventDefault();
var idx = $(this).index(),
gnbIdx = $(this).data( 'gnb' );
_this._isOver = true;
_this.$dp1.removeClass( 'on' );
$(this).addClass( 'on' );
_this.$dp2.find( 'li' ).removeClass( 'on' );
var $target = _this.$dp2Conatiner.children( 'ul[data-gnb="' + gnbIdx + '"]' );
if( $target.length ) {
var pos = $target.data( 'pos' );
if( $( window ).width() >= MOBILE_WIDTH ) {
_this.$dp2Conatiner.slideDown();
_this.$dp2Conatiner.children( 'ul' ).show();
};
_this.$dp2Conatiner.children( 'ul' ).eq( 0 ).stop().animate( { 'margin-top' : pos }, _this._aniDuration, function() {
});
} else {
_this.$dp2Conatiner.slideUp();
_this.$dp2Conatiner.children( 'ul' ).hide();
};
});
// 1뎁스 메뉴 롤아웃
this.$dp1.mouseleave(function(event) {
event.preventDefault();
var idx = $(this).index();
_this._isOver = false;
clearTimeout( _this._timeOutId );
_this._timeOutId = setTimeout( _this.setPageLocation, _this._duration );
});
// 1뎁스 메뉴 클릭
this.$dp1.click(function(event) {
var idx = $(this).index(),
gnbIdx = $(this).data( 'gnb' );
var $target = _this.$dp2Conatiner.children( 'ul[data-gnb="' + gnbIdx + '"]' );
if( !$target.length ) {
DEBUG.log( FILE_NAME + ' > Gnb > setEvents > 1뎁스 메뉴 클릭 : 2뎁스 메뉴가 없는 경우 href 값으로 이동' );
} else {
if( $(this).children( 'a' ).attr( 'href' ) == '#' ) {
event.preventDefault();
DEBUG.log( FILE_NAME + ' > Gnb > setEvents > 1뎁스 메뉴 클릭 : href 값이 "#" 일 경우 preventDefault' );
}
}
});
// 2뎁스 메뉴 롤오버
this.$dp2.find( 'li' ).mouseover(function(event) {
event.preventDefault();
_this._isOver = true;
$(this).siblings( 'li' ).removeClass( 'on' );
$(this).addClass( 'on' );
});
// 2뎁스 메뉴 롤아웃
this.$dp2.find( 'li' ).mouseleave(function(event) {
event.preventDefault();
_this._isOver = false;
clearTimeout( _this._timeOutId );
_this._timeOutId = setTimeout( _this.setPageLocation, _this._duration );
});
// Gnb - Mobile open
this.$gnbMopen.click(function(event) {
event.preventDefault();
_this.$gnbM.css( { 'left' : '-100%' });
_this.$gnbM.show();
_this.$gnbM.animate( { 'left' : 0 }, _this._aniDuration, function() {
});
});
// Gnb - Mobile close
this.$gnbMclose.click(function(event) {
event.preventDefault();
_this.$gnbM.animate( { 'right' : '-100%' }, _this._aniDuration, function() {
_this.$gnbM.hide();
_this.$gnbM.css( { 'right' : 0 });
});
});
// Gnb - Mobile 1뎁스 메뉴
this.$gnbMdp1.click(function(event) {
var $li = $(this).closest( 'li' ),
$mdp2 = $li.find( 'ul > li' );
$li.siblings( 'li' ).children( 'ul' ).slideUp();
$li.children( 'ul' ).slideDown();
if( !$mdp2.length ) {
DEBUG.log( FILE_NAME + ' > Gnb > setEvents > Mobile 1뎁스 메뉴 : 2뎁스 메뉴가 없는 경우 href 값으로 이동' );
} else {
if( $(this).children( 'a' ).attr( 'href' ) == '#' ) {
event.preventDefault();
DEBUG.log( FILE_NAME + ' > Gnb > setEvents > Mobile 1뎁스 메뉴 : 1뎁스의 href 값이 "#" 일 경우 preventDefault' );
}
}
});
};
GNB.setPageLocation = function() {
var page = Util.getPageLocation(),
$target = null;
DEBUG.log( FILE_NAME + ' > Gnb > setPageLocation > 메뉴 활성화를 위한 기준 Page 값 : ' + page );
// 2뎁스 메뉴의 href 값을 기준으로 체크
$.each(_this.$dp2.find( 'li' ), function(index, val) {
var $ul = $(this).closest( 'ul' ),
href = $(this).children( 'a' ).attr( 'href' );
if( href.indexOf( page, 0 ) > -1 ) {
_this._idxDp2 = $(this).index();
_this._idxDp1 = $ul.data( 'gnb' );
DEBUG.log( FILE_NAME + ' > Gnb > setPageLocation > 2뎁스 메뉴 값 기준 체크 idx : ' + _this._idxDp1 + ' / ' + _this._idxDp2 );
return;
};
});
// 1뎁스 메뉴의 href 값을 기준으로 체크
$.each(_this.$dp1, function(index, val) {
var href = $(this).children( 'a' ).attr( 'href' );
if( href.indexOf( page, 0 ) > -1 ) {
_this._idxDp1 = $(this).data( 'gnb' );
DEBUG.log( FILE_NAME + ' > Gnb > setPageLocation > 1뎁스 메뉴 값 기준 체크 idx : ' + _this._idxDp1 );
return;
};
});
// 메뉴의 mouseover 여부 체크
if( _this._isOver ) {
return;
};
// 1뎁스 메뉴 활성화
$target = _this.$dp1.filter('[data-gnb="' + _this._idxDp1 + '"]');
if( _this._idxDp1 != null && $target.length ) {
$target.trigger( 'mouseover' );
$target.addClass( 'on' );
DEBUG.log( FILE_NAME + ' > Gnb > setPageLocation > 1뎁스 메뉴 활성화 : ' , $target );
} else {
_this.$dp1.removeClass( 'on' );
DEBUG.log( FILE_NAME + ' > Gnb > setPageLocation > 1뎁스 메뉴 비활성화' );
};
// 2뎁스 메뉴 활성화
$target = _this.$dp2.filter('[data-gnb="' + _this._idxDp1 + '"]');
if( _this._idxDp2 != null && $target.length ) {
$target = $target.children( 'li' ).eq( _this._idxDp2 );
$target.trigger( 'mouseover' );
$target.addClass( 'on' );
DEBUG.log( FILE_NAME + ' > Gnb > setPageLocation > 2뎁스 메뉴 활성화 : ' , $target );
} else {
_this.$dp2.find( 'li' ).removeClass( 'on' );
_this.$dp2Conatiner.slideUp();
DEBUG.log( FILE_NAME + ' > Gnb > setPageLocation > 2뎁스 메뉴 비활성화' );
};
// Gnb - Mobile - 1뎁스 메뉴 활성화
if( _this._idxDp1 != null && _this.$gnbMdp1.eq( _this._idxDp1 ).length ) {
$target = _this.$gnbMdp1.eq( _this._idxDp1 );
$target.trigger( 'click' );
$target.closest( 'li' ).addClass( 'on' );
DEBUG.log( FILE_NAME + ' > Gnb > setPageLocation > 모바일 1뎁스 메뉴 활성화 : ' , $target );
// Gnb - Mobile - 2뎁스 메뉴 활성화
var $mdp2 = $target.closest( 'li' ).find( 'ul > li' );
$mdp2.eq( _this._idxDp2 ).addClass( 'on' );
};
};
/**
* @description
* SNS Share 관련
*/
GNB.setShareEvents = function() {
// Share 버튼
this.$gnb.find( '*[data-action="share"]' ).click(function(event) {
event.preventDefault();
$(this).closest( 'div' ).find( '*[data-view="share"]' ).show();
});
// Share pop Close 버튼
this.$gnb.find( '*[data-view="share"] > div.share_p_icon > a' ).click(function(event) {
event.preventDefault();
$(this).closest( 'div[data-view="sns"]' ).find( '*[data-view="share"]' ).hide();
});
// Share pop SNS 버튼
this.$gnb.find( '*[data-view="share"] > div.share_p_sns > ul > li' ).click(function(event) {
event.preventDefault();
var type = $(this).data( 'type' ),
$img = _this.$gnb.find( '*[data-view="share"] li[data-type="' + type + '"]' ).find( 'img' ),
src = $img.attr( 'src' );
//alert( 'SNS type : ' + type );
if(type == "fb"){
FB.ui({
method: 'feed',
picture : $("meta[property='og\\:image']").attr("content"),
name : $("meta[property='og\\:title']").attr("content"),
link: $("meta[property='og\\:url']").attr("content"),
description : $("meta[property='og\\:description']").attr("content"),
caption: "skt-drama.com",
}, function(response){});
}else if(type == "tw"){
window.open('http://twitter.com/intent/tweet?text=' + encodeURIComponent("SKT-DRAMA, SK텔레콤이 만드는 새로운 드라마 캠페인 " + document.location.href),'', "height=560,width=530,scrollbars=true");
}else if(type == "ks"){
//kakao story start::
/*
Kakao.Auth.login({
persistRefreshToken : true,
success: function(authObj) {
Kakao.API.request( {
url : '/v1/api/story/linkinfo',
data : {
url : 'http://www.skt-drama.com/main/main',
}
}).then(function (res) {
// 이전 API 호출이 성공한 경우 다음 API를 호출합니다.
return Kakao.API.request( {
url : '/v1/api/story/post/link',
data : {
link_info : res
}
});
}).then(function (res) {
return Kakao.API.request( {
url : '/v1/api/story/mystory',
data : { id : res.id }
});
}).then(function (res) {
alert('카카오 스토리에 등록 되었습니다!');
}, function (err) {
alert(JSON.stringify(err));
})
}
});
*/
window.open('https://story.kakao.com/share?url=' + encodeURIComponent(document.location.href),'', "height=560,width=530,scrollbars=true");
}
// Share 후 이미지 변경
$img.attr( 'src', src.replace( '_off', '_on' ) );
});
};
/**
* @description
* 리사이징에 따른 GNB 화면 구성
*/
GNB.resize = function() {
var winWidth = $( window ).width();
//console.log(this._idxDp2)
if( winWidth <= MOBILE_WIDTH ) {
DEBUG.log( FILE_NAME + ' > GNB.resize Mobile' );
if( this._idxDp1 == 1 || this._idxDp1 == 2 || this._idxDp1 == 3 || this._idxDp1 == 4 ) {
this.$dp2Conatiner.hide();
}
this.$gnb.children( 'div.top' ).find( '*[data-view="share"]' ).hide();
} else {
DEBUG.log( FILE_NAME + ' > GNB.resize Wide' );
this.$gnbM.hide();
if( this._idxDp1 == 1 || this._idxDp1 == 2 || this._idxDp1 == 3 || this._idxDp1 == 4 ) {
this.$dp2Conatiner.show();
}
}
};
GNB.init = function() {
this.$gnb = $( '.gnb' );
this.$dp1 = this.$gnb.children( 'div.dp1' ).find( 'li' );
this.$dp2Conatiner = this.$gnb.children( 'div.dp2' );
this.$dp2 = this.$gnb.children( 'div.dp2' ).find( 'ul' );
this.$gnbM = this.$gnb.children( 'div.menu' );
this.$gnbMopen = this.$gnb.find( 'div.top > a.menu' );
this.$gnbMclose = this.$gnbM.children( 'a.close' );
this.$gnbMdp1 = this.$gnbM.find( 'ul > li > span' );
this.setEvents();
this.setPageLocation();
this.setShareEvents();
this.resize();
$( window ).resize(function(event) {
_this.resize();
});
};
$(document).ready(function() {
GNB.init();
});
}(window));