|
|
@@ -2,12 +2,24 @@ let userAgent;
|
|
|
let isSafari = false;
|
|
|
let browserName;
|
|
|
|
|
|
+let num_per_page = 9;
|
|
|
+let n = 0;
|
|
|
+let totalPages = {
|
|
|
+ intro: 0,
|
|
|
+ video: 0,
|
|
|
+ columns: 0,
|
|
|
+ vr360: 0,
|
|
|
+ company: 0,
|
|
|
+};
|
|
|
+
|
|
|
+let filter;
|
|
|
+
|
|
|
$('.likeSee__views').click(function() {
|
|
|
- window.location.href = './index_designerList.html'
|
|
|
+ window.location.href = './index_designerList_mb.html'
|
|
|
})
|
|
|
|
|
|
$('.likeSee__sort').click(function() {
|
|
|
- window.location.href = './index_designerList.html?q=dateSort'
|
|
|
+ window.location.href = './index_designerList_mb.html?q=dateSort'
|
|
|
})
|
|
|
|
|
|
function getpathId(){
|
|
|
@@ -17,6 +29,7 @@ function getpathId(){
|
|
|
|
|
|
function getQuery() {
|
|
|
let query = getpathId();
|
|
|
+ console.log(query);
|
|
|
if(query == 'dateSort'){
|
|
|
filter = 'dateSort';
|
|
|
} else {
|
|
|
@@ -24,6 +37,8 @@ function getQuery() {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+
|
|
|
window.onload = function(){
|
|
|
//window.scrollBy(0, 1);
|
|
|
if(screen.width >= 901){
|
|
|
@@ -40,11 +55,17 @@ window.onload = function(){
|
|
|
url: "./json/designers.json",
|
|
|
dataType: "json",
|
|
|
}).done(function (msg) {
|
|
|
+ getQuery();
|
|
|
designer = [...msg][id];
|
|
|
- console.log(designer)
|
|
|
- renderinfoCard(designer)
|
|
|
- // renderTab(designer['Content'])
|
|
|
- // renderTabContent(designer['Content'])
|
|
|
+ console.log(designer['Content']);
|
|
|
+ designer['Content'][0]['Carddata'].sort(function (a, b){
|
|
|
+ return a[filter] > b[filter]? -1:1;
|
|
|
+ })
|
|
|
+ renderinfoCard(designer);
|
|
|
+ renderTab(designer['Content']);
|
|
|
+ renderTabContent(designer['Content']);
|
|
|
+ console.log(filter);
|
|
|
+ console.log(designer['Content'][0]['Carddata']);
|
|
|
});
|
|
|
}
|
|
|
let over = document.querySelector('.infoContent__navBlock').offsetTop;
|
|
|
@@ -160,6 +181,96 @@ function renderinfoCard(designer) {
|
|
|
$('.mb__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]['mb_title']}</a>
|
|
|
+ </li>`
|
|
|
+ } else if(content[i]['Display_mb']) {
|
|
|
+ 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]['mb_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; j ++) {
|
|
|
+ cardData += `<div class="col-6 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>`
|
|
|
+ }
|
|
|
+ if(content[i].Display_mb) {
|
|
|
+ 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-tabContent').append('<div style="padding: 30px;"></div>');
|
|
|
+ $('#pills-intro').addClass('active');
|
|
|
+ $('#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();
|
|
|
+}
|
|
|
|
|
|
window.addEventListener('scroll', fixedOnScroll);
|
|
|
const navBlock = document.querySelector('.infoContent__navBlock');
|
huai-sian