let userAgent;
let isSafari = false;
let browserName;
let filter;
const urlParams = new URLSearchParams(window.location.search);
let getfilter = urlParams.get('q');
let cid = urlParams.get('cid');
console.log(getfilter, cid);
$('.likeSee__views').click(function() {
window.location.href = `./index_designerList.html?q=views&cid=${cid}`
$(this).css('color', '#EE7800');
})
$('.likeSee__sort').click(function() {
window.location.href = `./index_designerList.html?cid=${cid}`
$(this).css('color', '#EE7800');
})
function getQuery() {
let query = getfilter;
if(query == 'views'){
filter = 'views';
$('.likeSee__views').css('color', '#EE7800');
} else {
filter = 'dateSort';
$('.likeSee__sort').css('color', '#EE7800');
}
}
getQuery();
// pagination variables
let num_per_page = 9;
let n = 0;
let n_video = 0;
let n_columns = 0;
let totalPages = {
intro: 0,
video: 0,
columns: 0,
vr360: 0,
company: 0,
};
window.onload = function(){
if(screen.width < 600){
window.location.href = `../index_designerList_mb.html?cid=${cid}`;
}
userAgent = navigator.userAgent;
detectBrowser(userAgent);
detectDirection ();
let result;
let designer;
let id = 0;
$.ajax({
method: "GET",
url: "./json/realtime.json",
dataType: "json",
}).done(function (msg) {
result = [...msg];
renderSec00(result);
});
$.ajax({
method: "GET",
url: `./json/designers-${cid}.json`,
dataType: "json",
}).done(function (msg) {
designer = [...msg][0];
console.log(designer)
if(filter == 'views'){
designer['Content'][0]['Carddata'].sort(function (a, b){
return a[filter] > b[filter]? -1:1;
})
} else {
designer['Content'][0]['Carddata'].sort(function (a, b){
return a[filter] > b[filter]? 1:-1;
})
}
console.log(designer['Content'][0]['Carddata']);
renderinfoCard(designer);
renderTab(designer['Content']);
renderTabContent(designer['Content'], designer);
renderModalTitle(designer['CompanyName']);
$(window).scroll(function() {
loadMore(designer);
})
});
}
function detectDirection () {
let height = (window.screen.width * 5) / 12;
console.log(height);
$('.sec-02 .slide-item').css('height', `${height}px`);
}
function detectBrowser(agent){
if(userAgent.match(/chrome|chromium|crios/i)){
browserName = "chrome";
}else if(userAgent.match(/firefox|fxios/i)){
browserName = "firefox";
} else if(userAgent.match(/safari/i)){
browserName = "safari";
}else if(userAgent.match(/opr\//i)){
browserName = "opera";
} else if(userAgent.match(/edg/i)){
browserName = "edge";
}else{
browserName="No browser detection";
}
if(browserName === 'safari'){
isSafari = true;
}
console.log(isSafari);
}
function renderSec00(data) {
let temp = data[0]['data'];
renderBullet(temp);
renderBannerStr('sec-00__slider', temp);
$(".sec-00__slider").slick({
dots: false,
speed: 500,
autoplay: true,
autoplaySpeed: 4000,
arrows: true,
prevArrow: '',
nextArrow: ''
});
$('.sec-00__bullet').removeClass('bullet-active');
$('.sec-00__bullet').eq($('.slick-active').data('slick-index')).addClass('bullet-active');
// $('.sec-00__slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
// console.log(currentSlide);
// console.log($('.slick-active').data('slick-index'));
// });
$('.sec-00__slider').on('afterChange', function(event, slick, currentSlide){
console.log(currentSlide);
console.log($('.slick-active').data('slick-index'));
$('.sec-00__bullet').removeClass('bullet-active');
$('.sec-00__bullet').eq(currentSlide).addClass('bullet-active');
});
}
function renderBullet(data) {
let str = '';
for(let i = 0; i < data.length; i++){
str += '
`
} else {
for(let j = 0;j < (content[i].Carddata.length < num_per_page? content[i].Carddata.length: num_per_page); j ++) {
// for(let j = 0;j < content[i].Carddata.length; j ++) {
let tagStr = '';
for(let k = 0;k < content[i].Carddata[j].tags.length; k ++) {
tagStr += `
${content[i].Carddata[j].tags[k]['name']}`
}
cardData += `
`
}
tabStr += `
`
let key = content[i]['Tabtag'];
totalPages[key] = content[i].Carddata.length;
}
}
console.log(tabStr);
console.log(totalPages);
$('#pills-tabContent').html(tabStr);
$('#pills-tabContent').append('
');
$('#pills-intro').addClass('active');
$('#pills-intro').addClass('show');
$('#pills-video .card__bgImg').append('
![](https://hhh.com.tw/assets/images/rv_web/play.svg)
')
$('.infoContent .nav-item-link').click(checkTab);
checkTab();
}
function renderFB(data) {
let str = '';
for(let i = 0; i < data.length; i++){
}
$('.fb__block').html(str);
}
function checkTab() {
if($('#pills-intro-tab').hasClass('active')) {
$('.likeSee').attr('hidden', false)
} else {
$('.likeSee').attr('hidden', true)
}
}
$(document).on("click","#pills-tab .nav-item-link",function() {
console.log($(this));
console.log($(this).attr('id'));
let className = $(this).attr('id');
$(`#pills-tab .nav-item-link`).removeClass('active');
$(`#${className}`).addClass('active');
$(`.pill-aside #${className}`).addClass('active');
});
let sticky = document.querySelector('.sec-00').offsetHeight;
window.addEventListener('scroll', fixedOnScroll);
const navbar = document.querySelector('.navbar-main');
function fixedOnScroll() {
if(window.pageYOffset >= 344){
navbar.classList.add('sticky');
} else {
navbar.classList.remove('sticky');
}
}
$(window).scroll(function() {
if ( $(this).scrollTop() > 800 ){
$('.fixed-btn').fadeIn(222);
} else {
$('.fixed-btn').stop().fadeOut(222);
}
}).scroll();
function loadMore(designer) {
let nowTab = document.querySelector('.infoContent .tab-pane.show');
if(nowTab === document.querySelector('#pills-intro')) {
let last = document.querySelector('#pills-intro .work__row>div:last-child');
let pageNum = Math.ceil(totalPages.intro / 9) - 1;
if ($(this).scrollTop() > last.offsetTop) {
if(n >= pageNum) {
n = pageNum;
return;
} else {
n ++;
let append = '';
let d = designer['Content'][0].Carddata.slice(9*n, (9*n)+9);
for(let j = 0;j < d.length; j ++) {
let tagStr = ''
for(let k = 0;k < d[j]['tags'].length; k ++) {
tagStr += `
${d[j]['tags'][k]['name']}`
}
append += `
`
}
$('#pills-intro .work__row').append(append);
}
}
} else if (nowTab === document.querySelector('#pills-video')) {
let pageNum = Math.ceil(totalPages.video / 9) - 1;
console.log(totalPages.video);
let last = document.querySelector('#pills-video .work__row>div:last-child');
if ($(this).scrollTop() > last.offsetTop) {
if(n_video >= pageNum) {
n_video = pageNum;
console.log('n-video:', n_video);
console.log('pageNum', pageNum);
return;
} else {
console.log('pass-video');
n_video ++;
console.log('test');
let append = '';
let d = designer['Content'][1].Carddata.slice(9*n_video, (9*n_video)+9);
for(let j = 0;j < d.length; j ++) {
let tagStr = ''
for(let k = 0;k < d[j]['tags'].length; k ++) {
tagStr += `
${d[j]['tags'][k]['name']}`
}
append += `
`
}
$('#pills-video .work__row').append(append);
}
}
} else if (nowTab === document.querySelector('#pills-columns')) {
let last = document.querySelector('#pills-columns .work__row>div:last-child');
let pageNum = Math.ceil(totalPages.columns / 9) - 1;
if ($(this).scrollTop() > last) {
if(n_columns >= pageNum) {
n_columns = pageNum;
return;
} else {
n_columns ++;
console.log('test');
let append = '';
let d = designer['Content'][2].Carddata.slice(9*n_columns, (9*n_columns)+9);
for(let j = 0;j < d.length; j ++) {
let tagStr = ''
for(let k = 0;k < d[j]['tags'].length; k ++) {
tagStr += `
${d[j]['tags'][k]['name']}`
}
append += `
`
}
$('#pills-columns .work__row').append(append);
}
}
}
}
$('.btn-gotop').click(function () {
$('html, body').animate({
scrollTop: 0
}, 500)
});
$('.sec-00__close').click(function(){
$(this).css('display', 'none');
$('.sec-00').addClass('bannerClose');
//$('.sec-02').css('padding-top', '53px');
sticky = 0;
});
document.addEventListener('lazybeforeunveil', function(e){
var bg = e.target.getAttribute('data-bg');
if(bg){
e.target.style.backgroundImage = 'url(' + bg + ')';
}
});
function renderModalTitle(title) {
$('#emailModal #title').val(title);
}
function putEmail() {
const emailPattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if($('#email').val() !== null && emailPattern.test($('#email').val())) {
$('#error').hide();
$('#putEmail_hidden').css('display', 'block');
$('#add_email').text($('#email').val());
$('#email').val('');
} else {
$('#error').show();
$('#error').text('email 格式有誤');
}
}