// 裝置判斷
function DeviceIsTouch() {
const userAgent = navigator.userAgent
const regexp = /Android|iPhone|SymbianOS|Windows Phone|iPad|iPod|Touch|Mobile|Tablet|BlackBerry/gi
return !!userAgent.match(regexp)
}
// 判斷裝置觸控情況
;(function($) {
$(window).on('resize', function(e) {
$('.breadcrumb-wrapper .with-child').removeClass('in-active')
if(DeviceIsTouch()) {
$('body').removeClass('DeviceWithHover')
} else {
$('body').addClass('DeviceWithHover')
}
})
})($)
// breadcrumb 下拉選單
;(function($) {
$('.breadcrumb-wrapper').on('click', '.with-child > .link', function(e) {
if(DeviceIsTouch()) {
e.preventDefault()
$(this).parent('.with-child').toggleClass('in-active')
.siblings('.with-child').removeClass('in-active')
}
})
$(window).on('resize', function(e) {
$('.breadcrumb-wrapper .breadcrumb-children').each(function(i, item) {
const itemLeft = $(item).parents('.item').offset().left
const itemWidth = $(item).parents('.item').width()
const childWidth = $(item).width()
if(itemLeft + childWidth >= $('.breadcrumb-wrapper').width()) {
if(itemLeft + itemWidth - childWidth > 0) {
$(item).parents('.with-child').removeClass('theme-center').addClass('theme-right')
} else {
$(item).parents('.with-child').addClass('theme-center').removeClass('theme-right')
}
} else {
$(item).parents('.with-child').removeClass('theme-right theme-center')
}
})
})
})($)
$(function(){
$('.search .closer').on('click',function(e){
$('.search').removeClass('open');
$('body').removeClass('overflow-hidden')
});
$('#keywords').on('focus',function(e){
$('.search').addClass('in-focus');
}).on('blur', function(e) {
$('.search').removeClass('in-focus');
});
$(".menu_class_a, .menu_sub_a").mouseover(function(){
var pic = $(this).attr('pic');
var url = $(this).attr('url');
var href = (url)? url: 'javascript:;';
var h = (pic)? '': '';
$(this).parents('.item-subitembox').find('.picbox').html(h);
});
$(".menu_sub_a").mouseout(function(){
var pic = $(this).parents('.nav-item').find('.menu_class_a').attr('pic');
var url = $(this).parents('.nav-item').find('.menu_class_a').attr('url');
var href = (url)? url: 'javascript:;';
var h = (pic)? '': '';
$(this).parents('.nav-item').find('.item-subitembox').children('.picbox').html(h);
});
// //天邊=搜尋
$('.search-toggle').on('click',function(){
$('.search').toggleClass('open');
$('.search input').focus();
$('body').toggleClass('overflow-hidden')
});
$('.marquee').owlCarousel({
loop : true,
responsive:{
0:{
items : 1
},
1023:{
items : 1
}
},
autoplay:true,
autoplayTimeout:3000,
nav :false,
navText : ['',''],
dots: false,
});
$(".Select_This_Country").on("click","li,label, button",function(){
$.post('/ajax/ajax_change_country.php', {ID: $(this).attr('sid')}, function(h){
if (typeof updatePage == "function"){
updatePage();
return false;
}
if(h){
window.location.reload();
}
}, 'html');
});
var _window = $(window);
var _body = $('body');
var change_1023 = 0;
var nav_item =$('#menu-nav .nav-item');
var scroll_switch=true;
var body_padding = 121;
var body_padding_s = 40;
var userAgent = navigator.userAgent;
var change = 0;
/* 手機平板 */
if(_window.width() <= 1024){
//天邊會員登入
var member_click_n=0;
$('.shopbox span.fa-user').on('click',function(){
if(member_click_n==0){
member_click_n=1;
$('.userbox').addClass('open');
}else{
member_click_n=0;
$('.userbox').removeClass('open');
}
});
var language_click_n=0;
$('.language_t').on('click','.wrapper ',function(){
if(language_click_n==0){
language_click_n=1;
$('.language_t').addClass('open');
}else{
language_click_n=0;
$('.language_t').removeClass('open');
}
});
//天邊會員登入
var language_click_n=0;
$('#language').on('click','.wrapper ',function(){
if(language_click_n==0){
language_click_n=1;
$('#language').addClass('open');
}else{
language_click_n=0;
$('#language').removeClass('open');
}
});
//搜尋
var search_dom=$("#Top_Search"),
search_n=0;
search_dom.on('click', '.fa-search', function(event) {
if(search_n==0){
search_n=1;
search_dom.addClass('open');
}else{
search_n=0;
search_dom.removeClass('open');
}
});
//menu開合
$('#menu-nav .hover').removeClass('hover');
if(/Windows/i.test(userAgent)){
$('#menu-nav').on('click','.item-title',function(){
var n = $(this).parent(".open").length;
$('#menu-nav .nav-item').removeClass('open');
$('#menu-nav .menu-item').removeClass('open-sub');
if(n == 0){
$(this).parent(".nav-item").addClass('open');
}
}).on(' click','.subtitle',function(){
var n = $(this).parent(".open-sub").length;
$('#menu-nav .menu-item').removeClass('open-sub');
if(n == 0){
$(this).parent(".menu-item").addClass('open-sub');
}
});
}else{
$('#menu-nav').on('click','.item-title',function(){
var n = $(this).parent(".open").length;
$('#menu-nav .nav-item').removeClass('open');
$('#menu-nav .menu-item').removeClass('open-sub');
if(n == 0){
$(this).parent(".nav-item").addClass('open');
}
}).on(' click','.subtitle',function(){
var n = $(this).parent(".open-sub").length;
$('#menu-nav .menu-item').removeClass('open-sub');
if(n == 0){
$(this).parent(".menu-item").addClass('open-sub');
}
});
}
}
/* 手機 */
if(_window.width() <= 480 && change_1023 != 480){
change_1023 = 480;
body_padding = 50;
/* 平板 */
}else if(_window.width() > 480 && _window.width() <= 1024 && change_1023 != 1024){
change_1023 = 1024;
body_padding = 75;
body_padding_s = 50;
nav_item.find('.subitem').attr('type','checkbox');
/* 電腦 */
}else if(_window.width() > 1024 && change_1023 != 1200){
change_1023 = 1200;
body_padding = 121;
body_padding_s = 40;
$('.menu-002 .menu-item:nth-child(2)').addClass('hover');
$('.menu-002').on('mouseenter','.subtitle',function(){
// console.log($('menu-item .hover'));
$('.menu-002').find('.hover').removeClass('hover');
$(this).parents('.menu-item').addClass('hover');
}).on('mouseleave',function(){
$('.menu-002').find('.hover').removeClass('hover');
$('.menu-002 .menu-item:nth-child(2)').addClass('hover');
});
//天邊會員登入hover下拉
$('.shopbox span.fa-user').on('mouseenter',function(){
$('.userbox').addClass('open');
});
//天邊購物車hover下拉
$('.shopbox #Shop_Cart_Total').on('mouseenter',function(){
$("#Header_Shopcart").load('/ajax/ajax_get_cart.php','');
$('.shopping-cartbox').addClass('open');
});
$('.shopbox').on('mouseleave',function(){
var _this_user=$(this).find('.userbox'),
_this_shop=$(this).find('.shopping-cartbox');
if(_this_user.length==1){
$('.userbox').removeClass('open');
}else if(_this_shop.length==1){
$('.shopping-cartbox').removeClass('open');
}
});
//hover menu-item change subitem height
$('#menu-nav .nav-item').hover(function(){
var subitemboxheight = $(this).find('.menu-002 .hover .subitembox').outerHeight();
if($(this).has('hover')){
if(subitemboxheight>340){
$(this).find('.menu-002').css({'min-height':subitemboxheight+1});
}
}
},function(){
$('.menu-002').removeAttr('style');
});
$('#menu-nav .menu-002 .menu-item').hover(function(){
if($(this).hasClass('hover')){
var subitemboxheight = $(this).find('.subitembox').outerHeight();
if(subitemboxheight>340){
$(this).parents('.menu-002').css({'min-height':subitemboxheight+1});
}
}
});
}
var time_id;
_window.on('resize',function(){
clearTimeout(time_id);
_window = $(window);
if(_window.width() <= 1024 && change_1023 ==1200){
// //上方廣告
$('.search').removeAttr('style');
$('.shopbox span.fa-user,.shopbox .fa-shopping-cart').off('mouseenter');
//天邊會員登入
var member_click_n=0;
$('.shopbox span.fa-user').on('click',function(){
if(member_click_n==0){
member_click_n=1;
$('.userbox').addClass('open');
}else{
member_click_n=0;
$('.userbox,.shopping-cartbox').removeClass('open');
}
});
$('.shopbox').off('mouseleave');
//off submenu-item 自動調整高度
$('#menu-nav .nav-item').off('hover');
$('#menu-nav .menu-002 .menu-item').off('hover');
$('#menu-nav .menu-item .hover').removeClass('hover');
//menu開合
// console.log(_window.width());
if(/Windows/i.test(userAgent)){
$('#menu-nav').on('click','.item-title',function(){
var n = $(this).parent(".open").length;
$('#menu-nav .nav-item').removeClass('open');
$('#menu-nav .menu-item').removeClass('open-sub');
if(n == 0){
$(this).parent(".nav-item").addClass('open');
}
}).on(' click','.subtitle',function(){
var n = $(this).parent(".open-sub").length;
$('#menu-nav .menu-item').removeClass('open-sub');
if(n == 0){
$(this).parent(".menu-item").addClass('open-sub');
}
});
}else{
$('#menu-nav').on('click','.item-title',function(){
var n = $(this).parent(".open").length;
$('#menu-nav .nav-item').removeClass('open');
$('#menu-nav .menu-item').removeClass('open-sub');
if(n == 0){
$(this).parent(".nav-item").addClass('open');
}
}).on(' click','.subtitle',function(){
var n = $(this).parent(".open-sub").length;
$('#menu-nav .menu-item').removeClass('open-sub');
if(n == 0){
$(this).parent(".menu-item").addClass('open-sub');
}
});
}
}
if(_window.width() <= 480 && change_1023 != 480){
change_1023 = 480;
body_padding = 50;
var scrollTop = _window.scrollTop();
}else if(_window.width() > 480 && _window.width() <= 1024 && change_1023 != 1024){
change_1023 = 1024;
body_padding = 75;
body_padding_s = 50;
var scrollTop = _window.scrollTop();
nav_item.find('.subitem').attr('type','checkbox');
$('.menu-item .subtitle').off('mouseenter');
$('.menu-002').off('mouseleave');
}else if(_window.width() > 1024 && change_1023 != 1200){
change_1023 = 1200;
body_padding = 121;
body_padding_s = 40;
var scrollTop = _window.scrollTop();
nav_item.find('.subitem').attr('type','radio');
$('.menu-002 .menu-item:nth-child(2)').addClass('hover');
$('.menu-item .subtitle').on('mouseenter',function(){
//console.log($('menu-item .hover'));
$('.menu-item.hover').removeClass('hover');
$(this).parents('.menu-item').addClass('hover');
});
$('.menu-002').on('mouseleave',function(){
$('.menu-item.hover').removeClass('hover');
$('.menu-002 .menu-item:nth-child(2)').addClass('hover');
});
$('.shopbox span.fa-user').off('click');
//天邊會員登入
$('.shopbox span.fa-user').on('mouseenter',function(){
$('.userbox').addClass('open');
});
//天邊購物車hover下拉
$('.shopbox .fa-shopping-cart').on('mouseenter',function(){
$("#Header_Shopcart").load('/ajax/ajax_get_cart.php','');
$('.shopping-cartbox').addClass('open');
});
$('.shopbox').on('mouseleave',function(){
$('.userbox,.shopping-cartbox').removeClass('open');
});
//移除menu開合事件
$('#menu-nav').off('click','.item-title').off('click','.subtitle');
//hover menu-item subitem 自動調整高度
$('#menu-nav .nav-item').hover(function(){
var subitemboxheight = $(this).find('.menu-002 .hover .subitembox').outerHeight();
if($(this).has('hover')){
if(subitemboxheight>340){
$(this).find('.menu-002').css({'min-height':subitemboxheight+1});
}
}
},function(){
$('.menu-002').removeAttr('style');
});
$('#menu-nav .menu-002 .menu-item').hover(function(){
if($(this).hasClass('hover')){
var subitemboxheight = $(this).find('.subitembox').outerHeight();
if(subitemboxheight>340){
$(this).parents('.menu-002').css({'min-height':subitemboxheight+1});
}
}
});
}
});
// ==========================================================
// 搜尋區點擊其他地方或下方空白(手機版)關閉
// ==========================================================
$(document).on("click",function(e){
if(!($(".search").is(e.target)) && !($(".search").has(e.target).length)){
if(!$(".search-group").has(e.target).length){
$('.search').removeClass('open')
$('body').removeClass('overflow-hidden')
}
}
})
$(".search-hide").on("click", function(){
$('.search').removeClass('open')
$('body').removeClass('overflow-hidden')
})
// ==========================================================
// 頁首次選單會員功能區塊
// ==========================================================
let resizeStep = '';
_window.on('resize', function(e) {
if($(this).width() > 1024 && resizeStep !== 'desktop') {
resizeStep = 'desktop';
let target = $('.member-group');
target
.removeClass('in-active')
//.off('click')
.on('mouseenter', function(e) {
target.addClass('in-active')
})
.on('mouseleave', function(e) {
target.removeClass('in-active')
})
.on('click', '.member-toggle', function(e) {
location.href = '/member-myaccount';
});
} else if($(this).width() <= 1024 && resizeStep !== 'mobile') {
resizeStep = 'mobile';
let clickStep = 0;
let target = $('.member-group');
target
.removeClass('in-active')
.off('mouseenter mouseleave')
.on('click', '.member-toggle', function(e) {
clickStep += 1;
if(clickStep % 2) {
target.addClass('in-active')
} else {
target.removeClass('in-active')
}
});
}
})
// var nav_n = false;
// $('.menu-b').on('click',function(){
// if(!nav_n){
// nav_n = true;
// $(this).addClass('close');
// $('.nav-bg,.navBox').addClass('open-nav');
// $('body').addClass('overflow-hidden');
// }else{
// nav_n = false;
// $(this).removeClass('close');
// $('.nav-bg,.navBox').removeClass('open-nav');
// $('body').removeClass('overflow-hidden');
// }
// });
// $('.nav-bg').on('click',function(){
// nav_n = false;
// $('.menu-b').removeClass('close');
// $('.nav-bg,.navBox').removeClass('open-nav');
// $('body').removeClass('overflow-hidden');
// });
$('.footer_menu').on('click','.menu-item',function(){
$(this).addClass('open');
});
$('.footer_menu').on('click','.open',function(){
$(this).removeClass('open');
});
//點擊率
$(".HITS_BT").on("click",function(e){
e.preventDefault();
if( $.isNumeric($(this).attr('hid')) && $.isNumeric($(this).attr('hdid')) ){
var hid = $(this).attr('hid');
var hdid = $(this).attr('hdid');
var url = $(this).attr('href');
var target = $(this).attr('target');
$.ajax({
url:"/ajax/ajax_add_ad_hits-p.php",
type:"POST",
cache:false,
async:false,
data:{Hid: hid , Hdid : hdid},
error:function(d){
alert('網路連線過慢,網頁請重新整理');
},
success:function(d){
if(url){
if(target == '_blank'){
window.open(url);
}else if( ( typeof target === 'undefined' ) || (target == '') ){
window.location = url;
}else{
}
}
}
});
}else{
alert(_jsLang.這是錯誤的連結);
}
});
//讚數加減
$(".Thumbs_BT").on("click",function(e){
e.preventDefault();
if( $.isNumeric($(this).attr('pdid')) ){
var h = $(this);
var ID = h.attr('pdid');
var Type = (h.attr('tbup')==1)?'Sub':'Add';
$.ajax({
url:"/ajax/ajax_add_thumbs-p.php",
type:"POST",
cache:false,
async:false,
dataType:"json",
data:{Type: Type , ID : ID},
error:function(d){
alert('網路連線過慢,網頁請重新整理');
},
success:function(d){
if(d.Thumbs_Up=='1'){
$('.content').find('.Thumbs'+ID).attr('tbup','1');
$('.content').find('.Thumbs'+ID).find('.Thumbs_icon').removeClass('fa-thumbs-o-up');
$('.content').find('.Thumbs'+ID).find('.Thumbs_icon').addClass('fa-thumbs-up');
}else{
$('.content').find('.Thumbs'+ID).attr('tbup','0');
$('.content').find('.Thumbs'+ID).find('.Thumbs_icon').removeClass('fa-thumbs-up');
$('.content').find('.Thumbs'+ID).find('.Thumbs_icon').addClass('fa-thumbs-o-up');
}
$('.content').find('.Thumbs'+ID).find('.Thumbs_Num').html(d.Thumbs_Num);
}
});
}else{
alert(_jsLang.這是錯誤的連結);
}
});
//點擊清空輸入框
$(".CLEAR_INPUT").one("click", function(){
$(this).attr('placeholder','');
});
//語系選擇
$(".Select_This_Lang").on("click","li,label,button",function(){
$.post('/ajax/ajax_change_language.php', {Name: $(this).attr('sid')}, function(h){
window.location.reload();
}, 'html');
});
//貨到通知改為連至門市
$(document).on('click','.informForPorter',function(){
window.location.href = '/store/';
});
// ==========================================================
// 商品相關折疊區塊
// ==========================================================
$('.collapse-list').on('click', '.collapse-list-toggle', function(e) {
$(this).parent('.collapse-list-item').toggleClass('in-active');
});
// ==========================================================
// .tag-list 按鈕滑過顏色變化
// ==========================================================
$('.tag-list .tag-list-item').each(function(i) {
const baseBackground = $(this).css('background-color');
const baseBorder = $(this).css('border-color');
const baseColor = $(this).css('color');
$(this).on('mouseenter', function(e) {
$(this).animate({
backgroundColor: baseBorder,
color:baseBackground
}, 250)
})
.on('mouseleave', function(e) {
console.log('moseleave')
$(this).animate({
backgroundColor: baseBackground,
color:baseColor
}, 150)
})
})
// ==========================================================
// 取得夥伴計畫分享連結
// ==========================================================
var shareOpened = false
$(document).on("click", ".getshare-btn", function(){
$.ajax({
url:"/ajax/ajax_get_referral_code.php",
type:"POST",
cache:false,
async:false,
dataType:"json",
data:{},
error:function(res){
alert('網路連線過慢,網頁請重新整理');
},
success:function(res){
if(!res.status){
switch(res.msg){
case "NO_LOGIN":
alert("請先登入")
break;
case "NO_REVENT":
alert("推薦碼錯誤")
break;
case "ERROR":
default:
alert("網路連線過慢,網頁請重新整理");
}
}else{
let sharePopup = $(".getshare-popup")
sharePopup.addClass("in-active")
if(!shareOpened){
shareOpened = true
//將連結刷新
let link = location.protocol + "//" + location.host + location.pathname + "?Referral_Code=" + res.msg
$(".getshare-copylink").text(link)
$(".getshare-social-fb").attr("href","https://www.facebook.com/sharer.php?u=" + link)
$(".getshare-social-line").attr("href","https://line.naver.jp/R/msg/text/?" + link)
//關閉按鈕
$(document).on("click", ".getshare-close", function(){
sharePopup.removeClass("in-active")
})
//黑背景關閉
$(document).on("click", ".getshare-popup", function(e){
if($(e.target).hasClass("getshare-popup")){
sharePopup.removeClass("in-active")
}
})
//點選複製
$(document).on("click", ".getshare-copylink", function(e){
window.navigator.clipboard.writeText($(this).text())
alert("複製成功")
})
}
}
}
})
})
_window.trigger('resize')
});
function errorbox(title,content,button){
var html='
';
$('body').append(html);
$('body').on('click', '#popupBox .close', function(event) {
$('#popupBox').remove();
});
};
var _masonry_set = {
columnWidth: 15,
itemSelector: '.menu-item',
gutter: 20,
transitionDuration: 0
};
$('.nav-item').find('.item-subitembox .menu1-left').each(function() {
if ($(this).find('.menu-item').length <= 2) {
$(this).addClass('no-after');
}
})
$(window).resize(function() {
if ($(window).width() <= 1024) {
$('.nav-item').off('mouseenter');
$('.nav-item').find('.item-subitembox').each(function() {
$(this).removeAttr('style');
})
}
})
if ($(window).width() <= 1024) {
$('.nav-item').find('.item-subitembox').each(function() {
$(this).removeAttr('style');
})
}
$(".table-center").find(function(){
$(".menu_sub_a").parents(".subitembox").prevAll(".m-item-title").addClass("show-fa")
})
$(".menu1-left").find(function(){
$(".menu-item").parents(".inner").parents(".item-subitembox").prevAll(".h3-item").addClass("show-fa")
})
$('main').on('click', '.club-aside', function(event) {
$('body').css('position','fixed');
});
$('main').on('click', '.close-m', function(event) {
$('body').removeAttr('style');
});
$("#menu-nav").find(function(){
$(".menu-010").parents(".nav-item").css('position','relative');
})
// ==========================================================
// 天邊廣告
// ==========================================================
;(function($) {
function topSlideCheck(key, target, className) {
const val = localStorage.getItem(key)
switch (val) {
case 'open':
$(target).addClass(className)
break;
case 'close':
$(target).removeClass(className)
break;
}
}
function storageSwitch(key) {
const val = localStorage.getItem(key)
switch (val) {
case 'open':
localStorage.setItem('topSlide', 'close')
break;
case 'close':
localStorage.setItem('topSlide', 'open')
break;
}
}
if(!localStorage.getItem('topSlide')) {
localStorage.setItem('topSlide', 'open')
}
$('.top_adbox').on('click', '.top_adbox_button', function(e) {
storageSwitch('topSlide')
topSlideCheck('topSlide', '.top_adbox', 'in-active')
})
topSlideCheck('topSlide', '.top_adbox', 'in-active')
})($)
// ==========================================================
// footer 國旗表選擇
// ==========================================================
;(function($) {
$('.flags-show').on('click', function(e) {
$(this).parents('.flags-box').toggleClass('in-open')
})
$('.flags-list').on('click', '.item', function(e) {
$(this).parents('.flags-box').removeClass('in-open')
})
})($)
// ==========================================================
// panel 開關
// ==========================================================
;(function($) {
$('.panel').on('click', '.panel-head', function(e) {
$(this).parents('.panel').toggleClass('in-active');
})
})($)
// ==========================================================
// modal 開關
// ==========================================================
;(function($) {
$('body').on('click', '.modal-toggle', function(e) {
const thisTarget = $(this).data('target');
switch(thisTarget) {
case '#quickShopModal':
const sid = $(this).attr('sid') || '';
if(sid)
{
const data = $('#productDetailPopup_'+sid).html()
if(data) {
$('#quickShopModal').find('.modal-body').empty().html(data)
//喜愛清單
if($(this).parents(".list-item-m").length > 0){
quickshopSlide()
}
}
}
else
{
const Qdata = $(this).parents('.productBox').find('.productDetailPopup').html()
if(Qdata) {
$(thisTarget).find('.modal-body').empty().html(Qdata)
quickshopSlide()
}
}
break;
case '#sizeTable':
const Tdata = $(this).parents('.modal-body').find('.sizeBoxPopup').html()
if(Tdata) {
$(thisTarget).find('.modal-body').empty().html(Tdata)
$(thisTarget).find('.switch-button').each(function() {
const oldAttr = $(this).attr('data-target')
$(this).attr('data-target', oldAttr + 'Popup')
})
$(thisTarget).find('.switch-table').each(function() {
const oldAttr = $(this).attr('id')
$(this).attr('id', oldAttr + 'Popup')
})
}
break;
case '#storeStorage':
const Sdata = $(this).parents('.modal-body').find('.storeStoragePopup').html()
if(Sdata) {
$(thisTarget).find('.modal-body').empty().html(Sdata)
}
break;
default:
console.log('normal popup')
break;
}
$(thisTarget).addClass('in-active')
$('body').addClass('overflow-hidden')
})
$('.modal-wrapper').on('click', function(e) {
if(e.target === e.currentTarget || e.target === $(this).find('.closer')[0] || $(e.target).attr('id') === 'cleanButton' || $(e.target).attr('id') === 'submitSearch') {
$(this).removeClass('in-active')
$('body').removeClass('overflow-hidden');
}
})
})($)
// ==========================================================
// 商品分享功能
// ==========================================================
;(function($) {
navigatorShareCheck('.navigator-share')
$('body').on('click', '.navigator-share', function(e) {
const target = this;
//var data = JSON.parse($(this).prev('textarea').html());
var data = JSON.parse($("#share_textarea").html());
navigatorShare(data);
})
})($)
// ==========================================================
// 推薦商品、文章推薦、試用評價
// ==========================================================
;(function($) {
let recommendStep = ''
const recommendTarget = $('.recommend-list, .article-list, .review-001 .warpper')
$(window).on('resize', function(e) {
if($(this).width() > 660 && recommendStep !== 'desktop') {
recommendStep = 'desktop'
recommendTarget.each(function(i, ele) {
if($(ele).children().length > 3) {
$(ele).owlCarousel(commonOwlObj(4))
}
})
} else if($(this).width() <= 660 && recommendStep !== 'mobile') {
recommendStep = 'mobile'
recommendTarget.each(function(i, ele) {
if($(ele).data('owl.carousel')) {
$(ele).data('owl.carousel').destroy()
}
})
}
})
$(window).trigger('resize')
})($)
// ==========================================================
// 錨點區塊功能設定
// ==========================================================
;(function($) {
$('.anchor-list > .item:first-child, .product-anchor > .item:first-child').addClass('in-active')
$('.anchor-list, .product-anchor').on('click', '.link', function(e) {
e.preventDefault()
const targetUrl = $(this).attr('href');
let anchorHeight = 0
if($('.product-anchor-wrapper.in-fixed').length) {
anchorHeight = $('.product-anchor-wrapper.in-fixed').outerHeight()
} else if($('.product-anchor-wrapper').length) {
anchorHeight = $('.product-anchor-wrapper').outerHeight() * 2
}
if(targetUrl.match(/^#/) && targetUrl !== '#' && $(targetUrl).length) {
const targetOffset = $(targetUrl).offset().top - $('.header-01').height() - anchorHeight
$('html, body').animate({
scrollTop: targetOffset
}, 750)
}
})
$(window).on('scroll', function (e) {
$('.scroll-focus').each(function (i, item) {
if ($(window).scrollTop() > $(item).offset().top - $(window).height() / 5) {
$('.anchor-list .link, .product-anchor .link').each(function () {
// console.log('#' + $(item).attr('id'))
if ($(this).attr('href') === '#' + $(item).attr('id')) {
$(this).parent('.item').addClass('in-active');
} else {
$(this).parent('.item').removeClass('in-active');
}
});
}
});
}).trigger('scroll');
})($)
// ==========================================================
// common function
// ==========================================================
// 瀏覽器預設分享功能
function navigatorShare(data) {
if(navigator.share) {
navigator.share({
title: data.title,
text: data.text,
url: data.url,
})
} else {
alert('此瀏覽器不支援分享功能')
}
}
function navigatorShareCheck(target) {
if(!navigator.share) {
$(target).addClass('hide')
} else {
$(target).removeClass('hide')
}
}
// 共用owl slide obj
function commonOwlObj(num) {
let responsiveObj = {}
const dotsCheck = (location.pathname === '/')? true: false
const navCheck = (location.pathname === '/')? false: true
switch (num) {
case 3:
responsiveObj = {
661: {
items: 3,
margin: 15,
slideBy: 3,
},
1025: {
items: 3,
margin: 20,
slideBy: 3,
},
}
break;
case 4:
responsiveObj = {
661: {
items: 3,
margin: 15,
slideBy: 3,
},
1025: {
items: 4,
margin: 20,
slideBy: 4,
},
}
break;
case 5:
responsiveObj = {
661: {
items: 3,
margin: 15,
slideBy: 3,
},
1025: {
items: 4,
margin: 20,
slideBy: 4,
},
1201: {
items: 5,
margin: 20,
slideBy: 5,
},
}
break;
}
const obj = {
responsive: responsiveObj,
autoplay: true,
autoplayTimeout: 7500,
autoplayHoverPause: true,
dots: dotsCheck,
nav: navCheck,
navText: ['',''],
}
return obj
}
// 多格 owl item 合併功能
function owlGroupWrap(target, amount) {
target.each(function ($i, $item) {
const itemAmount = $($item).find('.item').length;
if ($($item).data('owl.carousel')) {
$($item).data('owl.carousel').destroy();
}
$($item).find('.owl-group > .item').unwrap();
$($item).children('.item').each(function (i, item) {
const itemGroup = Math.floor(i / amount);
$(item).attr('data-id', itemGroup);
});
for (let i = 0; i < Math.ceil(itemAmount / amount); i++) {
$($item).children(`.item[data-id="${i}"]`).wrapAll('');
}
$($item).owlCarousel({
items: 1,
nav: false,
dots: true,
slideBy: 'page',
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
margin: 10,
});
$($item).trigger('refresh.owl.carousel');
});
}
// 小圖hover效果及切換功能
function smallPicBox() {
$(".productView").on('mouseover click','.picitem', function(e) {
const now = $(this).index();
$(".productView .picitem").removeClass('now');
$(this).addClass('now');
$(".productView .zoonbox").removeClass('now').eq(now).addClass('now');
if($(this).hasClass('video_control')) {
$(".productView").find('.open-preview').addClass('hide')
} else {
$(".productView").find('.open-preview').removeClass('hide')
}
})
}
// 影片效果
function videoBox(){
//影片控制
$(".moreview").on('mouseenter','.video_control',function(){
var video = document.getElementById("Video");
if(video.paused){
$(this).addClass('fa-pause').removeClass('fa-play');
video.play();
}else{
$(this).addClass('fa-play').removeClass('fa-pause');
video.pause();
}
});
//影片預覽圖
if(document.getElementById("Video")){
document.getElementById("Video").oncanplay=function(){
var video = $("#Video").get(0);
var canvas = document.getElementById("video_review");
canvas.getContext('2d').drawImage(video, 0, 0, 100, 139);
};
}
}
// 放大鏡功能
function zoomBox(){
var ImgBox,ImgBox_h,ImgBox_w,viewbox,viewbox_h,viewbox_w,mouseY,mouseX,preview,preview_img,scale_h,scale_w;
preview_str = '';
ImgBox = $('.productImg .now').offset();
$('.productView').off('mouseenter mousemove mouseleave','.picbox');
$('.productView').on('mouseenter','.picbox',function(){
var preview_str = '
';
var zoonbox_now = $(this).parents('.zoonbox'),
big_pic = zoonbox_now.attr('big-pic') || $(this).find('img').attr('src');
preview_str += '
';
zoonbox_now.append(preview_str);
preview = zoonbox_now.find('.preview');
preview.css({
height: '80%',
width: '80%'
});
// console.log(zoonbox_now);
var _this = $(this),
previewBox = $('.productView .preview');
viewbox = _this.find('.viewbox');
// console.log(viewbox)
var image = new Image();
image.src = "/upload_files/fonlego-rwd/prodpic/"+big_pic;
image.onload = function() {
// 原始圖片高度
ImgBox_h = image.height;
// 原始圖片寬度
ImgBox_w = image.width;
// 若原始圖片高度 < 放大框高度,縮小比例為1
scale_h = (previewBox.height() / ImgBox_h < 1) ? previewBox.height() / ImgBox_h : 1;
// 若原始圖片寬度 < 放大框寬度,縮小比例為1
scale_w = (previewBox.width() / ImgBox_w < 1) ? previewBox.width() / ImgBox_w : 1 ;
// 取得觀看範圍的高:圖框高 * 放大高 / 原始高
viewbox_h = _this.height() * (scale_h);
// 取得觀看範圍寬:圖框寬 * 放大寬 / 原始寬
viewbox_w = _this.width() * (scale_w);
// 滑鼠可移動 Y 軸範圍
mouseY = _this.height() - viewbox_h;
// 滑鼠可移動 X 軸範圍
mouseX = _this.width() - viewbox_w;
viewbox.css({
'opacity': 1,
'height': viewbox_h,
'width': viewbox_w,
});
// zoonbox_now.html(preview_str);
// console.log(preview_str);
// console.log(preview)
preview_img = preview.find('img');
_this.parents('.owl-stage-outer').css('overflow', 'visible');
}
})
.on('mousemove','.picbox',function(e){
previewBox = $('.productView .preview');
// 取得圖框距離網頁上方的值
const canvusTop = $(this).offset().top;
// 取得圖框距離網頁左方的值
const canvusLeft = $(this).offset().left;
// 取得滑鼠目前位置距離網頁上方的值
const mouseTop = e.pageY;
// 取得滑鼠目前位置距離網頁左方的值
const mouseLeft = e.pageX;
if ((mouseLeft - canvusLeft) < viewbox_w / 2) {
preview_img.css({
left: 0
})
viewbox.css({
left: 0
})
} else if((mouseLeft - canvusLeft) > ($(this).width() - viewbox_w / 2)){
preview_img.css({
left: (ImgBox_w - previewBox.width()) * -1
})
viewbox.css({
left: mouseX
})
} else {
if(preview_img){
preview_img.css({
left: (mouseLeft - canvusLeft - viewbox_w / 2) * ImgBox_w / $(this).width() * -1
});
}
if(viewbox){
viewbox.css({
left: mouseLeft - canvusLeft - viewbox_w / 2
})
}
}
if ((mouseTop - canvusTop) < viewbox_h / 2) {
preview_img.css({
top: 0
})
viewbox.css({
top: 0
})
} else if((mouseTop - canvusTop) > ($(this).height() - viewbox_h / 2)){
preview_img.css({
top: (ImgBox_h - previewBox.height()) * -1
})
viewbox.css({
top: mouseY
})
} else {
preview_img.css({
top: (mouseTop - canvusTop - viewbox_h / 2) * ImgBox_w / $(this).height() * -1
});
viewbox.css({
top: mouseTop - canvusTop - viewbox_h / 2
})
}
})
.on('mouseleave','.picbox',function(){
$('.productImg .viewbox').css({
'opacity':0,
});
$('.productImg .preview').remove();
preview_str= '
';
$('.owl-stage-outer').removeAttr('style');
});
}
// 手機版 slide 功能設定
function mobileSlide(data) {
$('.productView').html(data)
// owl slide 設定
const owlSlide = $('.productImg')
owlSlide.owlCarousel({
loop: false,
items: 1,
nav: true,
});
const targetVideo = owlSlide.find('#Video')[0]
const buttonWrap = $('#videobutton')
const videoIndex = owlSlide.find('.picbox').index(owlSlide.find('.videobox')[0])
const hashArray = []
$('.productImg').find('.picbox').each(function(i, item) {
hashArray.push($(item).data('hash'))
});
if(targetVideo) {
// owl slide 中的放大鏡按鈕設定
owlSlide.on('changed.owl.carousel', function(e) {
const thisIndex = e.item.index
if(thisIndex === videoIndex) {
$('#big_picture').addClass('hide')
// 影片播放
targetVideo.play()
buttonWrap.attr('class',"play").find('span').text('PAUSE')
} else {
$('#big_picture').removeClass('hide')
// 影片暫停
targetVideo.pause()
buttonWrap.attr('class',"stop").find('span').text('VIDEO')
}
})
// 影片播放按鈕設定
$('#videobutton > a').off('click')
$('#videobutton > a').on('click', function(e) {
const hashTarget = $(this).attr('href').slice(1)
const hashIndex = hashArray.indexOf(hashTarget)
// console.log(owlSlide.find('.owl-item').index(owlSlide.find('.owl-item.active')[0]))
if(owlSlide.find('.owl-item').index(owlSlide.find('.owl-item.active')[0]) === videoIndex) {
if(buttonWrap.hasClass('play')) {
// 影片暫停
targetVideo.pause()
buttonWrap.attr('class',"stop").find('span').text('VIDEO')
} else if(buttonWrap.hasClass('stop')) {
// 影片播放
targetVideo.play()
buttonWrap.attr('class',"play").find('span').text('PAUSE')
}
} else {
// 點擊按鈕前往 videoBox 區塊
owlSlide.trigger('to.owl.carousel', hashIndex)
}
})
}
}
// 快速購物輪播
function quickshopSlide() {
const slideTarget = $('#quickShopModal .quickshop-wrapper .productPreview')
if(slideTarget.children().length > 1) {
slideTarget.owlCarousel({
loop: true,
items: 1,
navText: ['',''],
dots: false,
autoplay: true,
animateOut: 'fadeOut',
autoplayTimeout: 6000,
autoplayHoverPause: true,
responsive: {
0: {
nav : false,
},
661: {
nav : true,
},
},
})
}
}
// ==========================================================
// 手機版熱門關鍵字開啟
// ==========================================================
;(function($) {
$('body').on('focus', '#mobileKeywords', function(e) {
$(this).parents('.mobile-search').find('.keywordsBox').addClass('in-focus')
})
$('body').on('click', '.mobile-search', function(e) {
if(!$(e.target).parents().hasClass('search-group') && !$(e.target).parents().hasClass('keyword-list')) {
$('.keywordsBox').removeClass('in-focus')
}
})
})($)
// ==========================================================
// 主選單開關
// ==========================================================
;(function($) {
$('.main-menu-toggle').on('click', function(e) {
$('.main-menu-toggle').toggleClass('close');
$('.navBox').toggleClass('menu-open');
$('body').toggleClass('overflow-hidden');
})
$('.navBox').on('click', '.closer', function(e) {
$(this).parents('.navBox').removeClass('menu-open')
$(this).parents('.navBox').find('.keywordsBox').removeClass('in-focus')
$('body').removeClass('overflow-hidden');
$('.main-menu-toggle').removeClass('close');
})
})($)
// ==========================================================
// 手機版第一層選單開啟第二層
// ==========================================================
;(function($) {
let menuStep = ''
$(window).on('resize', function(e) {
if($(this).width() > 1024 && menuStep !== 'desktop') {
menuStep = 'desktop'
$('#menu-nav').off('click', '.m-item-title')
$('.sub-item, .nav-item').removeClass('in-active')
$('#menu-nav').on('mouseenter', '.menu_class_a, .scroll-logo a', function(e) {
const target = $(this).data('target')
$(this).parents('.nav-item').addClass('in-active').siblings('.nav-item').removeClass('in-active')
if($(target).length && target) {
$(target).addClass('in-active').siblings('.sub-item').removeClass('in-active')
} else {
$('.sub-item').removeClass('in-active')
}
})
$('.navBox').on('mouseleave', function(e) {
$(this).find('.nav-item, .sub-item').removeClass('in-active')
})
} else if($(this).width() <= 1024 && menuStep !== 'mobile') {
menuStep = 'mobile'
$('#menu-nav').off('mouseenter', '.menu_class_a')
$('.navBox').off('mouseleave')
$('#menu-nav').on('click', '.m-item-title', function(e) {
const target = $(this).data('target')
$(this).parents('.nav-item').addClass('in-active').siblings('.nav-item').removeClass('in-active')
if($(target).length) {
e.preventDefault()
$(target).addClass('in-active').siblings('.sub-item').removeClass('in-active')
} else {
$('.sub-item').removeClass('in-active')
}
})
$('#menu-nav .nav-item:nth-child(2) .m-item-title').click()
}
})
$(window).trigger('resize')
})($)
// ==========================================================
// 手機版第二層選單開啟第三層
// ==========================================================
;(function($) {
let subMenuStep = ''
$(window).on('resize', function(e) {
if($(this).width() > 1024 && subMenuStep !== 'desktop') {
subMenuStep = 'desktop'
$('.mobile-nav-detail').off('click', '.link.with-child')
$('.mobile-nav-detail').find('.item').removeClass('in-active')
$('.mobile-nav-detail').on('mouseenter', '.link.with-child', function(e) {
const target = $(this).data('target')
$(target).addClass('in-active').siblings('.child-content').removeClass('in-active')
})
} else if($(this).width() <= 1024 && subMenuStep !== 'mobile') {
subMenuStep = 'mobile'
$('.mobile-nav-detail').off('mouseenter', '.link.with-child').off('mouseleave')
$('.mobile-nav-detail').on('click', '.link.with-child', function(e) {
e.preventDefault()
const target = $(this).data('target')
$(this).parents('.item').addClass('in-active').siblings('.item').removeClass('in-active')
$(target).addClass('in-active').siblings('.child-content').removeClass('in-active')
})
}
})
$(window).trigger('resize')
})($)
// ==========================================================
// GOTOP 相關設定
// ==========================================================
;(function($) {
let thisScrollTop = $(window).scrollTop()
$('.gotop').on('click',function(){
$("html,body").animate({scrollTop: 0},800);
});
$(window).scroll(function(e) {
const nowScrollTop = $(this).scrollTop()
const offsetCheck = nowScrollTop > 50
const scrollCheck = thisScrollTop > nowScrollTop
if(offsetCheck && scrollCheck) {
$('.gotop').fadeIn(400)
} else {
$('.gotop').fadeOut(150)
}
if(offsetCheck) {
$('body').addClass('is-sticky')
} else {
$('body').removeClass('is-sticky')
}
thisScrollTop = nowScrollTop
})
$(window).trigger('scroll')
})($)
// ==========================================================
// 主題館選單滑動功能
// ==========================================================
;(function($) {
const themePavilion = $('.theme-pavilion')
themePavilion.owlCarousel({
dots: false,
nav: true,
autoWidth: true,
pullDrag: false,
rewind: false,
loop: true,
responsive: {
0: {
margin: 20,
},
481: {
margin: 30,
},
769: {
margin: 40,
},
},
})
})($)
// ==========================================================
// label 滑動功能
// ==========================================================
;(function($) {
$('.form-wrapper .form-control').each(function(i, ele) {
if($(ele).val()) {
$(ele).parent('.form-box').addClass('with-value')
}
});
$(document).on('blur', '.form-control', function(e){
if($(this).val()) {
$(this).parent('.form-box').addClass('with-value')
} else {
$(this).parent('.form-box').removeClass('with-value')
}
})
})($)
// ==========================================================
// 尺寸表切換
// ==========================================================
;(function($) {
$('body').on('click', '.size-switch .switch-button', function(e) {
const switchTarget = $(this).data('target')
$(switchTarget).addClass('in-active').siblings('.switch-table').removeClass('in-active')
$(this).parent('.switch-item').addClass('in-active').siblings('.switch-item').removeClass('in-active')
})
})($)
// ==========================================================
// 日期select判斷區間
// ==========================================================
;(function($) {
//讓桌機picker點擊日期也能展開
if("showPicker" in HTMLInputElement.prototype){
$(document).on("click", "input[type='date']", function(){
$(this)[0].showPicker()
})
}
$(document).on("input", ".dueDate-select-picker", function(){
let _this = $(this),
dueDateBox = _this.parents(".dueDate-select-box"),
dueDateY = dueDateBox.find(".dueDate-y"),
dueDateM = dueDateBox.find(".dueDate-m"),
dueDateD = dueDateBox.find(".dueDate-d"),
dateArray = _this.val().split("-")
dueDateY.val(dateArray[0])
dueDateM.val(dateArray[1])
dueDateD.val(dateArray[2])
})
})($)