|
@@ -0,0 +1,460 @@
|
|
|
|
+let userAgent;
|
|
|
|
+let isSafari = false;
|
|
|
|
+let browserName;
|
|
|
|
+
|
|
|
|
+let filter;
|
|
|
|
+
|
|
|
|
+$('.likeSee__views').click(function() {
|
|
|
|
+ window.location.href = './index_designerList.html'
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+$('.likeSee__sort').click(function() {
|
|
|
|
+ window.location.href = './index_designerList.html?q=dateSort'
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+function getpathId(){
|
|
|
|
+ let query = window.location.search.split('?').pop();
|
|
|
|
+ return query.split('=')[1];
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function getQuery() {
|
|
|
|
+ let query = getpathId();
|
|
|
|
+ if(query == 'dateSort'){
|
|
|
|
+ filter = 'dateSort';
|
|
|
|
+ } else {
|
|
|
|
+ filter = 'views';
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+getQuery();
|
|
|
|
+
|
|
|
|
+// pagination variables
|
|
|
|
+let num_per_page = 9;
|
|
|
|
+let n = 0;
|
|
|
|
+let totalPages = {
|
|
|
|
+ intro: 0,
|
|
|
|
+ video: 0,
|
|
|
|
+ columns: 0,
|
|
|
|
+ vr360: 0,
|
|
|
|
+ company: 0,
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+window.onload = function(){
|
|
|
|
+ if(screen.width < 900){
|
|
|
|
+ window.location.href = "../index_designerList_mb.html";
|
|
|
|
+ }
|
|
|
|
+ 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.json",
|
|
|
|
+ dataType: "json",
|
|
|
|
+ }).done(function (msg) {
|
|
|
|
+ designer = [...msg][id];
|
|
|
|
+ console.log(designer)
|
|
|
|
+ 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']);
|
|
|
|
+ $(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'];
|
|
|
|
+ renderBannerStr('sec-00__slider', temp);
|
|
|
|
+ $(".sec-00__slider").slick({
|
|
|
|
+ dots: false,
|
|
|
|
+ speed: 800,
|
|
|
|
+ autoplay: true,
|
|
|
|
+ autoplaySpeed: 5000,
|
|
|
|
+ arrows: true,
|
|
|
|
+ prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
|
|
|
|
+ nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>'
|
|
|
|
+ });
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function renderBannerStr(sec, data) {
|
|
|
|
+ let str = '';
|
|
|
|
+ for(let i = 0; i < data.length; i++){
|
|
|
|
+ if(data[i]['Dwebp'] && !isSafari) {
|
|
|
|
+ str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['Dwebp']}');" data-bg="${data[i]['Dwebp']}"></div>`
|
|
|
|
+ } else {
|
|
|
|
+ str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['DimgUrl']}');" data-bg="${data[i]['DimgUrl']}"></div>`
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ $(`.${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 += `<aside class="d-flex">
|
|
|
|
+ <div class="infoCard__detail__l">
|
|
|
|
+ <div>${designer['Basics'][i].title}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="infoCard__detail__r">
|
|
|
|
+ <a href="${designer['Basics'][i].link}">${designer['Basics'][i].data}</a>
|
|
|
|
+ </div>
|
|
|
|
+ </aside>`
|
|
|
|
+ }
|
|
|
|
+ $('.infoCard__basics').html(str);
|
|
|
|
+
|
|
|
|
+ // Branches
|
|
|
|
+ let otherStr = '';
|
|
|
|
+ for(let i = 0;i < designer['Branches'].length; i ++) {
|
|
|
|
+ otherStr += `<aside class="d-flex">
|
|
|
|
+ <div class="infoCard__detail__l">
|
|
|
|
+ <div>${designer['Branches'][i].title}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="infoCard__detail__r">
|
|
|
|
+ <a href="${designer['Branches'][i].link}" >${designer['Branches'][i].data}</a>
|
|
|
|
+ </div>
|
|
|
|
+ </aside>`
|
|
|
|
+ }
|
|
|
|
+ $('.infoCard__branches').html(otherStr);
|
|
|
|
+
|
|
|
|
+ // scMedia
|
|
|
|
+ let mediaStr = '';
|
|
|
|
+ for(let i = 0;i < designer['scMedia'].length; i ++) {
|
|
|
|
+ if(i === 4) {
|
|
|
|
+ mediaStr += `<span>
|
|
|
|
+ <img src="${designer['scMedia'][i].img}" class="dislike" alt="">
|
|
|
|
+ <img src="https://hhh.com.tw/assets/images/rv_web/like.svg" class="like" alt="">
|
|
|
|
+ </span>`;
|
|
|
|
+ } else {
|
|
|
|
+ mediaStr += `<a href="${designer['scMedia'][i].link}">
|
|
|
|
+ <img src="${designer['scMedia'][i].img}" alt="">
|
|
|
|
+ </a>`;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ $('.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 += `<aside class="d-flex">
|
|
|
|
+ <div class="infoCard__detail__l">
|
|
|
|
+ <div>${designer['Terms'][i].title}</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="infoCard__detail__r">
|
|
|
|
+ <div>${designer['Terms'][i].data}</div>
|
|
|
|
+ </div>
|
|
|
|
+ </aside>`
|
|
|
|
+ }
|
|
|
|
+ $('.infoCard__terms').html(termStr);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function renderTab(content) {
|
|
|
|
+ let tabTitleStr = '';
|
|
|
|
+ for(let i = 0;i < content.length; i ++) {
|
|
|
|
+ if(i == 0) {
|
|
|
|
+ tabTitleStr += `<li class="nav-item p-0 active" role="presentation">
|
|
|
|
+ <a class="nav-item-link nav-item-active bg-transparent active" id="pills-${content[i]['Tabtag']}-tab"
|
|
|
|
+ data-bs-toggle="pill" data-bs-target="#pills-${content[i]['Tabtag']}" type="button" role="tab"
|
|
|
|
+ aria-controls="pills-${content[i]['Tabtag']}" aria-selected="false" data-link="https://hhh.com.tw/videos/lists/">${content[i]['Title']}</a>
|
|
|
|
+ </li>`
|
|
|
|
+ } else if (content[i]['isActive']) {
|
|
|
|
+ tabTitleStr += `<li class="nav-item p-0" role="presentation">
|
|
|
|
+ <a class="nav-item-link nav-item-active bg-transparent" id="pills-${content[i]['Tabtag']}-tab"
|
|
|
|
+ data-bs-toggle="pill" data-bs-target="#pills-${content[i]['Tabtag']}" type="button" role="tab"
|
|
|
|
+ aria-controls="pills-${content[i]['Tabtag']}" aria-selected="false" data-link="https://hhh.com.tw/videos/lists/">${content[i]['Title']}</a>
|
|
|
|
+ </li>`
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ $('#pills-tab').html(tabTitleStr);
|
|
|
|
+ $('.pill-aside').html(tabTitleStr);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+function renderTabContent(content) {
|
|
|
|
+ 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 += `<div class="company__block">
|
|
|
|
+ <h4 class="company__title">${content[i].info[j].title}</h4>
|
|
|
|
+ <div class="company__text">
|
|
|
|
+ ${content[i].info[j].data}
|
|
|
|
+ </div>
|
|
|
|
+ </div>`
|
|
|
|
+ }
|
|
|
|
+ tabStr += `<div class="tab-pane fade " id="pills-${content[i]['Tabtag']}" role="tabpanel"
|
|
|
|
+ aria-labelledby="pills-${content[i]['Tabtag']}-tab">
|
|
|
|
+ <div class="row justfy-content-between">
|
|
|
|
+ <div class="col-md-8">
|
|
|
|
+ <article class="company__article">
|
|
|
|
+ ${cardData}
|
|
|
|
+ </article>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>`
|
|
|
|
+
|
|
|
|
+ } else {
|
|
|
|
+ for(let j = 0;j < (content[i].Carddata.length < num_per_page? content[i].Carddata.length: num_per_page); j ++) {
|
|
|
|
+ cardData += `<div class="col-md-4">
|
|
|
|
+ <a href="" target="_blank">
|
|
|
|
+ <div class="card">
|
|
|
|
+ <div class="card__bgImg" style="background-image: url(${content[i].Carddata[j]['imgURL']});">
|
|
|
|
+ </div>
|
|
|
|
+ <div class="card-body">
|
|
|
|
+ <h5 class="card-title card__title mt-0">${content[i].Carddata[j]['title']}</h5>
|
|
|
|
+ <p class="card-text mb-0">
|
|
|
|
+ <a href="" class="card__tag" target="_blank">混搭風</a>
|
|
|
|
+ <a href="" class="card__tag" target="_blank">混搭風</a>
|
|
|
|
+ <a href="" class="card__tag" target="_blank">混搭風</a>
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a>
|
|
|
|
+ </div>`
|
|
|
|
+ }
|
|
|
|
+ tabStr += `<div class="tab-pane fade " id="pills-${content[i]['Tabtag']}" role="tabpanel"
|
|
|
|
+ aria-labelledby="pills-${content[i]['Tabtag']}-tab">
|
|
|
|
+ <div class="row work__row">
|
|
|
|
+ ${cardData}
|
|
|
|
+ </div>
|
|
|
|
+ </div>`
|
|
|
|
+ let key = content[i]['Tabtag'];
|
|
|
|
+ totalPages[key] = content[i].Carddata.length;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ console.log(tabStr);
|
|
|
|
+ console.log(totalPages);
|
|
|
|
+ $('#pills-tabContent').html(tabStr);
|
|
|
|
+ $('#pills-intro').addClass('active', 'show');
|
|
|
|
+ $('#pills-intro').addClass('show');
|
|
|
|
+ $('#pills-video .card__bgImg').append('<img src="https://hhh.com.tw/assets/images/rv_web/play.svg" alt="" width="50" height="50">')
|
|
|
|
+ $('.infoContent .nav-item-link').click(checkTab);
|
|
|
|
+ checkTab();
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+function checkTab() {
|
|
|
|
+ if($('#pills-intro-tab').hasClass('active')) {
|
|
|
|
+ $('.likeSee').attr('hidden', false)
|
|
|
|
+ } else {
|
|
|
|
+ $('.likeSee').attr('hidden', true)
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+let sticky = document.querySelector('.sec-00').offsetHeight;
|
|
|
|
+window.addEventListener('scroll', fixedOnScroll);
|
|
|
|
+
|
|
|
|
+const navbar = document.querySelector('.navbar-main');
|
|
|
|
+
|
|
|
|
+function fixedOnScroll() {
|
|
|
|
+ if(window.pageYOffset >= sticky){
|
|
|
|
+ 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 pageNum = Math.ceil(totalPages.intro / 9);
|
|
|
|
+ if ($(this).scrollTop() > 1800) {
|
|
|
|
+ if(n >= pageNum) {
|
|
|
|
+ n = pageNum;
|
|
|
|
+ return;
|
|
|
|
+ } else {
|
|
|
|
+ n ++;
|
|
|
|
+ console.log('test');
|
|
|
|
+ let append = '';
|
|
|
|
+ let d = designer['Content'][0].Carddata.slice(9*n, (9*n)+9);
|
|
|
|
+ for(let j = 0;j < d.length; j ++) {
|
|
|
|
+ append += `<div class="col-md-4">
|
|
|
|
+ <a href="" target="_blank">
|
|
|
|
+ <div class="card">
|
|
|
|
+ <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
|
|
|
|
+ </div>
|
|
|
|
+ <div class="card-body">
|
|
|
|
+ <h5 class="card-title card__title mt-0">${d[j]['title']}</h5>
|
|
|
|
+ <p class="card-text mb-0">
|
|
|
|
+ <a href="" class="card__tag" target="_blank">混搭風</a>
|
|
|
|
+ <a href="" class="card__tag" target="_blank">混搭風</a>
|
|
|
|
+ <a href="" class="card__tag" target="_blank">混搭風</a>
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a>
|
|
|
|
+ </div>`
|
|
|
|
+ }
|
|
|
|
+ $('#pills-intro .work__row').append(append);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ } else if (nowTab === document.querySelector('#pills-video')) {
|
|
|
|
+ let pageNum = Math.ceil(totalPages.intro / 9);
|
|
|
|
+ if ($(this).scrollTop() > 1800) {
|
|
|
|
+ if(n >= pageNum) {
|
|
|
|
+ n = pageNum;
|
|
|
|
+ return;
|
|
|
|
+ } else {
|
|
|
|
+ n ++;
|
|
|
|
+ console.log('test');
|
|
|
|
+ let append = '';
|
|
|
|
+ let d = designer['Content'][0].Carddata.slice(9*n, (9*n)+9);
|
|
|
|
+ for(let j = 0;j < d.length; j ++) {
|
|
|
|
+ append += `<div class="col-md-4">
|
|
|
|
+ <a href="" target="_blank">
|
|
|
|
+ <div class="card">
|
|
|
|
+ <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
|
|
|
|
+ </div>
|
|
|
|
+ <div class="card-body">
|
|
|
|
+ <h5 class="card-title card__title mt-0">${d[j]['title']}</h5>
|
|
|
|
+ <p class="card-text mb-0">
|
|
|
|
+ <a href="" class="card__tag" target="_blank">混搭風</a>
|
|
|
|
+ <a href="" class="card__tag" target="_blank">混搭風</a>
|
|
|
|
+ <a href="" class="card__tag" target="_blank">混搭風</a>
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a>
|
|
|
|
+ </div>`
|
|
|
|
+ }
|
|
|
|
+ $('#pills-video .work__row').append(append);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ } else if (nowTab === document.querySelector('#pills-columns')) {
|
|
|
|
+ let pageNum = Math.ceil(totalPages.intro / 9);
|
|
|
|
+ if ($(this).scrollTop() > 1800) {
|
|
|
|
+ if(n >= pageNum) {
|
|
|
|
+ n = pageNum;
|
|
|
|
+ return;
|
|
|
|
+ } else {
|
|
|
|
+ n ++;
|
|
|
|
+ console.log('test');
|
|
|
|
+ let append = '';
|
|
|
|
+ let d = designer['Content'][0].Carddata.slice(9*n, (9*n)+9);
|
|
|
|
+ for(let j = 0;j < d.length; j ++) {
|
|
|
|
+ append += `<div class="col-md-4">
|
|
|
|
+ <a href="" target="_blank">
|
|
|
|
+ <div class="card">
|
|
|
|
+ <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
|
|
|
|
+ </div>
|
|
|
|
+ <div class="card-body">
|
|
|
|
+ <h5 class="card-title card__title mt-0">${d[j]['title']}</h5>
|
|
|
|
+ <p class="card-text mb-0">
|
|
|
|
+ <a href="" class="card__tag" target="_blank">混搭風</a>
|
|
|
|
+ <a href="" class="card__tag" target="_blank">混搭風</a>
|
|
|
|
+ <a href="" class="card__tag" target="_blank">混搭風</a>
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a>
|
|
|
|
+ </div>`
|
|
|
|
+ }
|
|
|
|
+ $('#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 + ')';
|
|
|
|
+ }
|
|
|
|
+});
|
|
|
|
+
|