';
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'],input[type='month']", 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])
})
})($)
// ==========================================================
// 彈窗影片
// ==========================================================
;(function($) {
let body = $("body")
let floatVideo = $(".float-video")
let videoPopup = $(".video-popup")
let closeTime = videoPopup.data("close-time")
let player //youtube實例
let videoSchedule = localStorage.getItem("videoSchedule") || ""
let shortViewed = localStorage.getItem("shortViewed") || "" //1為已觀看
let videoCloseCounter //按x+1 觀看超過20秒後關閉+3
function removeVideoPopup(){
floatVideo.remove()
videoPopup.remove()
}
function countVideoClose(counter){
let total = videoCloseCounter + counter
localStorage.setItem("videoCloseCounter", total)
$.ajax({
url:"/ajax/ajax_video_counter.php",
type:"POST",
data:{
schedule: videoSchedule,
counter: total
},
error:function(d){
alert('網路連線過慢，網頁請重新整理');
},
})
}
function closeShort(){
floatVideo.addClass("theme-ended")
floatVideo.removeClass("in-reopen")
}
function openShort(){
floatVideo.removeClass("theme-ended")
floatVideo.addClass("in-reopen")
}
if(floatVideo.length > 0)
{
let promotion_name = floatVideo.data("promotion_name");
if(videoSchedule != videoPopup.data("schedule")){
//檔期更換或換影片
localStorage.setItem("shortViewed", 0)
localStorage.setItem("videoCloseCounter", 0)
localStorage.setItem("videoSchedule",videoPopup.data("schedule"))
}
videoCloseCounter = parseInt(localStorage.getItem("videoCloseCounter")) || 0
if(videoCloseCounter >= 3){
removeVideoPopup()
}else{
if(shortViewed == "1"){
closeShort()
floatVideo.removeClass("hide")
}else{
floatVideo.removeClass("hide")
let video = document.getElementById("videoQuick")
video.addEventListener("ended", function(){
localStorage.setItem("shortViewed", "1")
closeShort()
gtag('event','shortVideoEnded',{
'promotion_id' :'側欄品牌廣告',
'promotion_name' :promotion_name,
});
})
}
}
//關閉短影片
$(document).on("click", ".float-video", function(e){
if($(e.target).hasClass("float-video")){
closeShort()
}
})
//關閉整個彈窗
$(document).on("click", ".video-closer", function(){
removeVideoPopup()
countVideoClose(1)
gtag('event','closeFloatVideo',{
'promotion_id' :'側欄品牌廣告',
'promotion_name' :promotion_name,
});
})
//點短影片
$(document).on("click", ".video-background", function(){
//再點一次時展開 展開時點才彈窗
if(floatVideo.hasClass("in-reopen")){
let videoId = $("#VideoPopup").data("youtube-id")
videoPopup.addClass("in-active")
body.addClass("overflow-hidden")
gtag('event','fullVideoOpen',{
'promotion_id' :'側欄品牌廣告',
'promotion_name' :promotion_name,
});
window.onYouTubeIframeAPIReady = function(){
player = new YT.Player("VideoPopup", {
videoId:videoId,
playerVars:{
'controls':1,
'autoplay':1,
'mute':1,
'enablejsapi':1,
'playsinline':1,
},
events: {
'onReady':onPlayerReady,
'onStateChange':onPlayerStateChange
}
})
function onPlayerReady(event){
event.target.playVideo()
}
function onPlayerStateChange(event){
console.log(player.getCurrentTime())
}
}
let tag = document.createElement('script')
tag.src = "https://www.youtube.com/iframe_api"
let firstScriptTag = document.getElementsByTagName('script')[0]
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
}else if(floatVideo.hasClass("theme-ended")){
openShort()
}
})
//關閉影片彈窗
$(document).on("click", ".video-popup", function(e){
if($(e.target).hasClass("video-popup") || $(e.target).parents(".popup-closer").length > 0){
body.removeClass("overflow-hidden")
closeShort()
videoPopup.removeClass("in-active")
//關閉的時間
//console.log(player.getCurrentTime())
if(player.getCurrentTime() >= closeTime){
//removeVideoPopup()
countVideoClose(3)
gtag('event','closeFullVideo',{
'promotion_id' :'側欄品牌廣告',
'promotion_name' :promotion_name,
'view_time':player.getCurrentTime()
});
}
player.stopVideo()
}
})
//點看更多
$(document).on("click", ".video-popup .popup-link", function(e){
e.preventDefault()
let _this = $(this)
gtag('event','select_promotion',{
'promotion_id' :'側欄品牌廣告',
'promotion_name' :promotion_name,
'location_id' :_this.attr("href")
});
setTimeout(function(){
window.location.href = _this.attr("href")
},100)
})
}
})($)
// =========================================================
// 導引下載app
// ==========================================================
;(function($) {
$(document).on("click", ".goto-download-btn", function(){
let target = $(".download-app-block")
if(target.length > 0){
let topRange = target[0].getBoundingClientRect().top + $(window).scrollTop() - 200
$("html").css("scroll-behavior", "auto")
$("html,body").animate({scrollTop:topRange},{
duration: topRange / 10,
easing:"linear",
complete: function(){
$("html").css("scroll-behavior", "")
}
});
}
})
})($)