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 += '
' } console.log('bullet'); $('.sec-00__bulletList').html(str); } // function renderBannerStr(sec, data) { // let str = ''; // for(let i = 0; i < data.length; i++){ // if(data[i]['Dwebp'] && !isSafari) { // str+= `
` // } else { // str+= `
` // } // } // $(`.${sec}`).html(str); // } function renderBannerStr(sec, data) { let str = ''; for(let i = 0; i < data.length; i++){ if(data[i]['Dwebp'] && !isSafari) { str+= `` } else { str+= `` } } $(`.${sec}`).html(str); } function renderinfoCard(designer) { $('.hero__img').attr('src', designer['BannerImg']); $('.infoCard__avatar').css('backgroundImage', `url(${designer['Designerimg']})`) $('.infoCard__name').text(designer['DesignerName']); $('.infoCard__seo').text(designer['Description']); $('.infoCard__company').text(designer['CompanyName']); if(designer['Approve'] !== '') { $('.infoCard__approve').text(designer['Approve']); } // Basics let str = ''; for(let i = 0;i < designer['Basics'].length; i ++) { str += `` } $('.infoCard__basics').html(str); // Branches let otherStr = ''; for(let i = 0;i < designer['Branches'].length; i ++) { otherStr += `` } $('.infoCard__branches').html(otherStr); // scMedia let mediaStr = ''; for(let i = 0;i < designer['scMedia'].length; i ++) { if(i === 4) { mediaStr += ` `; } else if (i === 3) { mediaStr += ` `; } else { mediaStr += ` `; } } $('.scMedia').html(mediaStr); document.querySelector('.dislike').addEventListener('click', function() { $('.dislike').css('display', 'none'); $('.like').css('display', 'block'); }) document.querySelector('.like').addEventListener('click', function() { $('.dislike').css('display', 'block'); $('.like').css('display', 'none'); }) // term condition let termStr = ''; for(let i = 0;i < designer['Terms'].length; i ++) { termStr += `` } $('.infoCard__terms').html(termStr); } function renderTab(content) { let tabTitleStr = ''; for(let i = 0;i < content.length; i ++) { if(i == 0) { tabTitleStr += `` } else if (content[i]['isActive']) { tabTitleStr += `` } } $('#pills-tab').html(tabTitleStr); $('.pill-aside').html(tabTitleStr); } function renderCard(content, i = 0){ let cardData = ''; let data = content[i]; for(let j = 0;j < data.length; j ++) { let tagStr = ''; for(let k = 0;k < data[i]['tags'].length; k ++) { tagStr += `${data[i]['tags'][k]['name']}` } cardData += `
${data[i]['title']}

${tagStr}

` $('#pills-intro .work__row').append(cardData); } } function renderTabContent(content, meta) { let tabStr = ''; for(let i = 0;i < content.length; i ++) { let cardData = '' if(content[i].info) { for(let j = 0;j < content[i].info.length; j ++) { cardData += `

${content[i].info[j].title}

${content[i].info[j].data}
` } tabStr += `
${cardData}
` } 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 += `
${content[i].Carddata[j]['title']}

${tagStr}

` } tabStr += `
${cardData}
` 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('') $('.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 += `
${d[j]['title']}

${tagStr}

` } $('#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 += `
${d[j]['title']}

${tagStr}

` } $('#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 += `
${d[j]['title']}

${tagStr}

` } $('#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 格式有誤'); } }