|
|
@@ -8,11 +8,11 @@ let n = 0;
|
|
|
let n_video = 0;
|
|
|
let n_columns = 0;
|
|
|
let totalPages = {
|
|
|
- intro: 0,
|
|
|
- video: 0,
|
|
|
- columns: 0,
|
|
|
- vr360: 0,
|
|
|
- company: 0,
|
|
|
+ intro: 0,
|
|
|
+ video: 0,
|
|
|
+ columns: 0,
|
|
|
+ vr360: 0,
|
|
|
+ company: 0,
|
|
|
};
|
|
|
|
|
|
let filter;
|
|
|
@@ -22,17 +22,17 @@ let getfilter = urlParams.get('q');
|
|
|
let cid = urlParams.get('cid');
|
|
|
console.log(getfilter, cid);
|
|
|
|
|
|
-$('.likeSee__views').click(function() {
|
|
|
+$('.likeSee__views').click(function () {
|
|
|
window.location.href = `./index_designerList_mb.html?q=views&cid=${cid}`
|
|
|
$(this).css('color', '#EE7800');
|
|
|
})
|
|
|
|
|
|
-$('.likeSee__sort').click(function() {
|
|
|
+$('.likeSee__sort').click(function () {
|
|
|
window.location.href = `./index_designerList_mb.html?cid=${cid}`
|
|
|
$(this).css('color', '#EE7800');
|
|
|
})
|
|
|
|
|
|
-function getpathId(){
|
|
|
+function getpathId() {
|
|
|
let query = window.location.search.split('?').pop();
|
|
|
return query.split('=')[1];
|
|
|
}
|
|
|
@@ -40,7 +40,7 @@ function getpathId(){
|
|
|
function getQuery() {
|
|
|
let query = getfilter;
|
|
|
console.log(query);
|
|
|
- if(query == 'views'){
|
|
|
+ if (query == 'views') {
|
|
|
filter = 'views';
|
|
|
$('.likeSee__views').css('color', '#EE7800');
|
|
|
} else {
|
|
|
@@ -51,33 +51,34 @@ function getQuery() {
|
|
|
|
|
|
|
|
|
|
|
|
-window.onload = function(){
|
|
|
+window.onload = function () {
|
|
|
//window.scrollBy(0, 1);
|
|
|
- if(screen.width >= 901){
|
|
|
- window.location.href = `../index_designerList.html?cid=${cid}`;
|
|
|
+ if (screen.width >= 901) {
|
|
|
+ window.location.href = `../index_designerList.html?cid=${cid}`;
|
|
|
}
|
|
|
userAgent = navigator.userAgent;
|
|
|
detectBrowser(userAgent);
|
|
|
- detectDirection ();
|
|
|
- let result;
|
|
|
+ detectDirection();
|
|
|
+ let result;
|
|
|
let designer;
|
|
|
let id = 0;
|
|
|
$.ajax({
|
|
|
method: "GET",
|
|
|
- url: `./json/designers-${cid}.json`,
|
|
|
+ // url: `./json/designers-${cid}.json`,
|
|
|
+ url: `https://m3.hhh.com.tw:18686/gendesigner?id=${cid}&sort=new&page=1`,
|
|
|
dataType: "json",
|
|
|
}).done(function (msg) {
|
|
|
getQuery();
|
|
|
designer = [...msg][id];
|
|
|
console.log(designer['Content']);
|
|
|
- if(filter == 'views'){
|
|
|
- designer['Content'][0]['Carddata'].sort(function (a, b){
|
|
|
- return a[filter] > b[filter]? -1:1;
|
|
|
+ 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;
|
|
|
- })
|
|
|
+ designer['Content'][0]['Carddata'].sort(function (a, b) {
|
|
|
+ return a[filter] > b[filter] ? 1 : -1;
|
|
|
+ })
|
|
|
}
|
|
|
renderinfoCard(designer);
|
|
|
renderTab(designer['Content']);
|
|
|
@@ -85,29 +86,174 @@ window.onload = function(){
|
|
|
renderModalTitle(designer['CompanyName']);
|
|
|
console.log(filter);
|
|
|
console.log(designer['Content'][0]['Carddata']);
|
|
|
- $(window).scroll(function() {
|
|
|
- loadMore(designer);
|
|
|
+ $(window).scroll(function () {
|
|
|
+ let bottom = $("body").height() - $(window).height() - 1;
|
|
|
+ if ($(window).scrollTop() >= bottom) {
|
|
|
+ loadMoretest();
|
|
|
+ }
|
|
|
})
|
|
|
+ // let bottom = $("body").height() - $(window).height() - 1;
|
|
|
+ // if ($(window).scrollTop() >= bottom) {
|
|
|
+ // loadMoretest();
|
|
|
+ // }
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
+// var page = 1;
|
|
|
+// function loadMoretest() {
|
|
|
+
|
|
|
+// setTimeout(function () {
|
|
|
+// scroll_bottom_load_data(page);
|
|
|
+// page++;
|
|
|
+// return page
|
|
|
+
|
|
|
+
|
|
|
+// }, 500);
|
|
|
+// }
|
|
|
+function scroll_bottom_load_data(page) {
|
|
|
+
|
|
|
+ $.ajax({
|
|
|
+ method: "GET",
|
|
|
+ url: `https://m3.hhh.com.tw:18686/gendesigner?id=${cid}&sort=new&page=${page}`,
|
|
|
+ }).done(function (msg) {
|
|
|
+ result = [...msg];
|
|
|
+ let append = '';
|
|
|
+ let d = result[0].Content[0].Carddata;
|
|
|
+ // let cardcontent=[]
|
|
|
+ let nowTab = document.querySelector('.infoContent .tab-pane.show');
|
|
|
+ if (nowTab === document.querySelector('#pills-intro')) {
|
|
|
+ for (let j = 0; j < d.length; j++) {
|
|
|
+
|
|
|
+ let tagStr = ''
|
|
|
+ for (let k = 0; k < d[j]['tag'].length; k++) {
|
|
|
+ tagStr += `<a href="${d[j]['tag'][k]['link']}" class="card__tag" target="_blank">${d[j]['tag'][k]['name']}</a>`
|
|
|
+ }
|
|
|
+ append += `<div class="col-6 col-md-4">
|
|
|
+ <a href="${d[j]['url']}" target="_blank">
|
|
|
+ <div class="card">
|
|
|
+ <div style="overflow: hidden;">
|
|
|
+ <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <h5 class="card-title card__title mt-0">${d[j]['title']}</h5>
|
|
|
+ <p class="card-text mb-0">
|
|
|
+ ${tagStr}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>`
|
|
|
+
|
|
|
+ // var cardcontent2=cardcontent.push.d;
|
|
|
+ }
|
|
|
+ if (d.length === 0) {
|
|
|
+ $('#loading_img').css("display", "none")
|
|
|
+ }
|
|
|
+ // console.log(cardcontent2);
|
|
|
+
|
|
|
+ $('#pills-intro .work__row').append(append);
|
|
|
+ }else if (nowTab === document.querySelector('#pills-video')) {
|
|
|
+ let append = '';
|
|
|
+ let d = result[0].Content[0].Carddata;
|
|
|
+ for(let j = 0;j < d.length; j ++) {
|
|
|
+ let tagStr = ''
|
|
|
+ for(let k = 0;k < d[j]['tag'].length; k ++) {
|
|
|
+ tagStr += `<a href="${d[j]['tag'][k]['link']}" class="card__tag" target="_blank">${d[j]['tag'][k]['name']}</a>`
|
|
|
+ }
|
|
|
+ append += `<div class="col-6 col-md-4">
|
|
|
+ <a href="${d[j]['url']}" target="_blank">
|
|
|
+ <div class="card">
|
|
|
+ <div style="overflow: hidden;">
|
|
|
+ <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
|
|
|
+ <img src="https://hhh.com.tw/assets/images/rv_web/play.svg" alt="" width="50" height="50">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <h5 class="card-title card__title mt-0">${d[j]['title']}</h5>
|
|
|
+ <p class="card-text mb-0">
|
|
|
+ ${tagStr}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>`
|
|
|
+ }
|
|
|
+ if (d.length === 0) {
|
|
|
+ $('#loading_img').css("display", "none")
|
|
|
+ }
|
|
|
+ $('#pills-video .work__row').append(append);
|
|
|
+
|
|
|
+ }else if (nowTab === document.querySelector('#pills-columns')) {
|
|
|
+ let append = '';
|
|
|
+ let d = result[0].Content[0].Carddata;
|
|
|
+ for(let j = 0;j < d.length; j ++) {
|
|
|
+ let tagStr = ''
|
|
|
+ for(let k = 0;k < d[j]['tag'].length; k ++) {
|
|
|
+ tagStr += `<a href="${d[j]['tag'][k]['link']}" class="card__tag" target="_blank">${d[j]['tag'][k]['name']}</a>`
|
|
|
+ }
|
|
|
+ append += `<div class="col-6 col-md-4">
|
|
|
+ <a href="${d[j]['url']}" target="_blank">
|
|
|
+ <div class="card">
|
|
|
+ <div style="overflow: hidden;">
|
|
|
+ <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-body">
|
|
|
+ <h5 class="card-title card__title mt-0">${d[j]['title']}</h5>
|
|
|
+ <p class="card-text mb-0">
|
|
|
+ ${tagStr}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>`
|
|
|
+ }
|
|
|
+ $('#pills-columns .work__row').append(append);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+var page = 1;
|
|
|
+function loadMoretest() {
|
|
|
+
|
|
|
+ setTimeout(function () {
|
|
|
+ // let pageNum = 2;
|
|
|
+ // if(page<=pageNum){
|
|
|
+ // pageNum++;
|
|
|
+ // page++;
|
|
|
+ // }else{
|
|
|
+
|
|
|
+ // }
|
|
|
+ scroll_bottom_load_data(page);
|
|
|
+ page++;
|
|
|
+ return page
|
|
|
+
|
|
|
+
|
|
|
+ }, 500);
|
|
|
+}
|
|
|
+
|
|
|
let over = document.querySelector('.infoContent__navBlock').offsetTop;
|
|
|
|
|
|
-function detectBrowser(agent){
|
|
|
- if(userAgent.match(/chrome|chromium|crios/i)){
|
|
|
+function detectBrowser(agent) {
|
|
|
+ if (userAgent.match(/chrome|chromium|crios/i)) {
|
|
|
browserName = "chrome";
|
|
|
- }else if(userAgent.match(/firefox|fxios/i)){
|
|
|
+ } else if (userAgent.match(/firefox|fxios/i)) {
|
|
|
browserName = "firefox";
|
|
|
- } else if(userAgent.match(/safari/i)){
|
|
|
+ } else if (userAgent.match(/safari/i)) {
|
|
|
browserName = "safari";
|
|
|
- }else if(userAgent.match(/opr\//i)){
|
|
|
+ } else if (userAgent.match(/opr\//i)) {
|
|
|
browserName = "opera";
|
|
|
- } else if(userAgent.match(/edg/i)){
|
|
|
+ } else if (userAgent.match(/edg/i)) {
|
|
|
browserName = "edge";
|
|
|
- }else{
|
|
|
- browserName="No browser detection";
|
|
|
+ } else {
|
|
|
+ browserName = "No browser detection";
|
|
|
}
|
|
|
|
|
|
- if(browserName === 'safari'){
|
|
|
+ if (browserName === 'safari') {
|
|
|
isSafari = true;
|
|
|
}
|
|
|
console.log(isSafari);
|
|
|
@@ -115,12 +261,12 @@ function detectBrowser(agent){
|
|
|
|
|
|
|
|
|
|
|
|
-function detectDirection () {
|
|
|
+function detectDirection() {
|
|
|
let height = (window.screen.width * 2) / 3;
|
|
|
-
|
|
|
+
|
|
|
$('.sec-02 .slide-item').css('height', `${height}px`);
|
|
|
let topHeight = (window.screen.width * 30) / 131;
|
|
|
-
|
|
|
+
|
|
|
$('.sec-00 .slide-item').css('height', `${topHeight}px`);
|
|
|
$('.sec-00 .container-fluid').css('height', `${topHeight}px`);
|
|
|
}
|
|
|
@@ -131,13 +277,13 @@ function renderinfoCard(designer) {
|
|
|
$('.mb__infoCard__name').text(designer['DesignerName']);
|
|
|
$('.mb__infoCard__seo').text(designer['Description']);
|
|
|
$('.mb__infoCard__cmy').text(designer['CompanyName']);
|
|
|
- if(designer['Approve'] !== '') {
|
|
|
- $('.mb__infoCard__approve').text(designer['Approve']);
|
|
|
+ if (designer['Approve'] !== '') {
|
|
|
+ $('.mb__infoCard__approve').html(designer['Approve']);
|
|
|
}
|
|
|
// Basics
|
|
|
let str = '';
|
|
|
- for(let i = 0;i < designer['Basics'].length; i ++) {
|
|
|
- str += `<aside class="d-flex">
|
|
|
+ for (let i = 0; i < designer['Basics'].length; i++) {
|
|
|
+ str += `<aside class="d-flex">
|
|
|
<div class="mb__infoCard__detail__l">
|
|
|
<div>${designer['Basics'][i].title}</div>
|
|
|
</div>
|
|
|
@@ -150,8 +296,8 @@ function renderinfoCard(designer) {
|
|
|
|
|
|
// Branches
|
|
|
let otherStr = '';
|
|
|
- for(let i = 0;i < designer['Branches'].length; i ++) {
|
|
|
- otherStr += `<aside class="d-flex">
|
|
|
+ for (let i = 0; i < designer['Branches'].length; i++) {
|
|
|
+ otherStr += `<aside class="d-flex">
|
|
|
<div class="mb__infoCard__detail__l">
|
|
|
<div>${designer['Branches'][i].title}</div>
|
|
|
</div>
|
|
|
@@ -164,38 +310,38 @@ function renderinfoCard(designer) {
|
|
|
|
|
|
// scMedia
|
|
|
let mediaStr = '';
|
|
|
- for(let i = 0;i < designer['scMedia'].length; i ++) {
|
|
|
- if(i === 4) {
|
|
|
- mediaStr += `<span>
|
|
|
+ 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 if (i === 3) {
|
|
|
- mediaStr += `<span class="send" data-bs-toggle="modal" data-bs-target="#emailModal">
|
|
|
+ } else if (i === 3) {
|
|
|
+ mediaStr += `<span class="send" data-bs-toggle="modal" data-bs-target="#emailModal">
|
|
|
<img src="${designer['scMedia'][i].img}" alt="">
|
|
|
</span>`;
|
|
|
- } else {
|
|
|
- mediaStr += `<a href="${designer['scMedia'][i].link}">
|
|
|
+ } 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('.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');
|
|
|
- })
|
|
|
+ // 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">
|
|
|
+ for (let i = 0; i < designer['Terms'].length; i++) {
|
|
|
+ termStr += `<aside class="d-flex">
|
|
|
<div class="mb__infoCard__detail__l">
|
|
|
<div>${designer['Terms'][i].title}</div>
|
|
|
</div>
|
|
|
@@ -209,20 +355,24 @@ function renderinfoCard(designer) {
|
|
|
|
|
|
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>`
|
|
|
+ for (let i = 0; i < content.length; i++) {
|
|
|
+ if (content[i]['Carddata'] == "" & content[i]['info'] == undefined) {
|
|
|
+ tabTitleStr += ``
|
|
|
+ } else {
|
|
|
+ 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);
|
|
|
@@ -231,18 +381,19 @@ function renderTab(content) {
|
|
|
|
|
|
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 += `<div class="company__block">
|
|
|
+ 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"
|
|
|
+ }
|
|
|
+ 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">
|
|
|
@@ -252,46 +403,124 @@ function renderTabContent(content, meta) {
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>`
|
|
|
+
|
|
|
+ } else {
|
|
|
+ for (let j = 0; j < (content[i].Carddata.length < num_per_page ? content[i].Carddata.length : num_per_page); j++) {
|
|
|
+ let tagStr = '';
|
|
|
+ for (let k = 0; k < content[i].Carddata[j].tag.length; k++) {
|
|
|
+ tagStr += `<a href="${content[i].Carddata[j].tag[k]['link']}" class="card__tag" target="_blank">${content[i].Carddata[j].tag[k]['name']}</a>`
|
|
|
+ }
|
|
|
|
|
|
- } 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 ++) {
|
|
|
- cardData += `<div class="col-6 col-md-4">
|
|
|
- <a href="" target="_blank">
|
|
|
+ // for(let j = 0;j < content[i].Carddata.length; j ++) {
|
|
|
+ cardData += `<div class="col-6 col-md-4">
|
|
|
+ <a href="${content[i].Carddata[j]['url']}" 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>
|
|
|
+ ${tagStr}
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>`
|
|
|
- }
|
|
|
- if(content[i].Display_mb) {
|
|
|
- tabStr += `<div class="tab-pane fade " id="pills-${content[i]['Tabtag']}" role="tabpanel"
|
|
|
+ }
|
|
|
+ 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;
|
|
|
- }
|
|
|
-
|
|
|
+ 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: 60px;"></div>');
|
|
|
+ $('#pills-tabContent').append('<div style="padding: 20px;"></div>');
|
|
|
+ $("#pills-intro").append(` <div class="d-flex justify-content-center py-1 py-md-5">
|
|
|
+ <div id="loading_img">
|
|
|
+ <svg class="loading-move" xmlns="http://www.w3.org/2000/svg" width="40" height="41.965"
|
|
|
+ viewBox="0 0 40 41.965">
|
|
|
+ <defs>
|
|
|
+ <style>
|
|
|
+ .a {
|
|
|
+ fill: #ee751b;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </defs>
|
|
|
+ <circle class="a" cx="4.89" cy="4.89" r="4.89" transform="translate(16.094)" />
|
|
|
+ <ellipse class="a" cx="2.933" cy="2.933" rx="2.933" ry="2.933"
|
|
|
+ transform="translate(18.05 36.099)" />
|
|
|
+ <ellipse class="a" cx="4.401" cy="4.401" rx="4.401" ry="4.401" transform="translate(4.487 5.464)" />
|
|
|
+ <circle class="a" cx="2.445" cy="2.445" r="2.445" transform="translate(30.626 31.609)" />
|
|
|
+ <ellipse class="a" cx="3.911" cy="3.911" rx="3.911" ry="3.911" transform="translate(0 18.056)" />
|
|
|
+ <circle class="a" cx="1.955" cy="1.955" r="1.955" transform="translate(36.091 20.01)" />
|
|
|
+ <path class="a" d="M5.065,20.213a3.422,3.422,0,1,0,4.839,0A3.419,3.419,0,0,0,5.065,20.213Z"
|
|
|
+ transform="translate(1.403 11.424)" />
|
|
|
+ <ellipse class="a" cx="1.466" cy="1.466" rx="1.466" ry="1.466"
|
|
|
+ transform="translate(31.603 8.434)" />
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+</div>`)
|
|
|
+$("#pills-video").append(` <div class="d-flex justify-content-center py-1 py-md-5">
|
|
|
+<div id="loading_img">
|
|
|
+ <svg class="loading-move" xmlns="http://www.w3.org/2000/svg" width="40" height="41.965"
|
|
|
+ viewBox="0 0 40 41.965">
|
|
|
+ <defs>
|
|
|
+ <style>
|
|
|
+ .a {
|
|
|
+ fill: #ee751b;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </defs>
|
|
|
+ <circle class="a" cx="4.89" cy="4.89" r="4.89" transform="translate(16.094)" />
|
|
|
+ <ellipse class="a" cx="2.933" cy="2.933" rx="2.933" ry="2.933"
|
|
|
+ transform="translate(18.05 36.099)" />
|
|
|
+ <ellipse class="a" cx="4.401" cy="4.401" rx="4.401" ry="4.401" transform="translate(4.487 5.464)" />
|
|
|
+ <circle class="a" cx="2.445" cy="2.445" r="2.445" transform="translate(30.626 31.609)" />
|
|
|
+ <ellipse class="a" cx="3.911" cy="3.911" rx="3.911" ry="3.911" transform="translate(0 18.056)" />
|
|
|
+ <circle class="a" cx="1.955" cy="1.955" r="1.955" transform="translate(36.091 20.01)" />
|
|
|
+ <path class="a" d="M5.065,20.213a3.422,3.422,0,1,0,4.839,0A3.419,3.419,0,0,0,5.065,20.213Z"
|
|
|
+ transform="translate(1.403 11.424)" />
|
|
|
+ <ellipse class="a" cx="1.466" cy="1.466" rx="1.466" ry="1.466"
|
|
|
+ transform="translate(31.603 8.434)" />
|
|
|
+ </svg>
|
|
|
+</div>
|
|
|
+</div>`)
|
|
|
+$("#pills-columns").append(` <div class="d-flex justify-content-center py-1 py-md-5">
|
|
|
+<div id="loading_img">
|
|
|
+ <svg class="loading-move" xmlns="http://www.w3.org/2000/svg" width="40" height="41.965"
|
|
|
+ viewBox="0 0 40 41.965">
|
|
|
+ <defs>
|
|
|
+ <style>
|
|
|
+ .a {
|
|
|
+ fill: #ee751b;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </defs>
|
|
|
+ <circle class="a" cx="4.89" cy="4.89" r="4.89" transform="translate(16.094)" />
|
|
|
+ <ellipse class="a" cx="2.933" cy="2.933" rx="2.933" ry="2.933"
|
|
|
+ transform="translate(18.05 36.099)" />
|
|
|
+ <ellipse class="a" cx="4.401" cy="4.401" rx="4.401" ry="4.401" transform="translate(4.487 5.464)" />
|
|
|
+ <circle class="a" cx="2.445" cy="2.445" r="2.445" transform="translate(30.626 31.609)" />
|
|
|
+ <ellipse class="a" cx="3.911" cy="3.911" rx="3.911" ry="3.911" transform="translate(0 18.056)" />
|
|
|
+ <circle class="a" cx="1.955" cy="1.955" r="1.955" transform="translate(36.091 20.01)" />
|
|
|
+ <path class="a" d="M5.065,20.213a3.422,3.422,0,1,0,4.839,0A3.419,3.419,0,0,0,5.065,20.213Z"
|
|
|
+ transform="translate(1.403 11.424)" />
|
|
|
+ <ellipse class="a" cx="1.466" cy="1.466" rx="1.466" ry="1.466"
|
|
|
+ transform="translate(31.603 8.434)" />
|
|
|
+ </svg>
|
|
|
+</div>
|
|
|
+</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">')
|
|
|
@@ -309,78 +538,78 @@ function renderTabContent(content, meta) {
|
|
|
|
|
|
}
|
|
|
|
|
|
- window.addEventListener('scroll', fixedOnScroll);
|
|
|
- const navBlock = document.querySelector('.infoContent__navBlock');
|
|
|
- function fixedOnScroll() {
|
|
|
- if(window.innerHeight < window.innerWidth){
|
|
|
- } else {
|
|
|
- detectDirection ();
|
|
|
- }
|
|
|
-
|
|
|
- if(window.pageYOffset >= over){
|
|
|
- navBlock.classList.add('tab_sticky');
|
|
|
- } else if(window.pageYOffset < over) {
|
|
|
- navBlock.classList.remove('tab_sticky');
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- $('.navbar-toggler').click(function(){
|
|
|
- $(".sec-menu").css('display', 'block');
|
|
|
- $(".wholeBody").css('overflow-y', 'hidden');
|
|
|
- $('.sec-menu-block').addClass('slidein');
|
|
|
- $('.sec-menu-block').removeClass('slideout');
|
|
|
- });
|
|
|
-
|
|
|
- $('.navbar-back').click(function(){
|
|
|
- $(".sec-menu").css('display', 'none');
|
|
|
- $(".wholeBody").css('overflow-y', 'scroll');
|
|
|
- $('.sec-menu-block').removeClass('slidein');
|
|
|
- $('.sec-menu-block').addClass('slideout');
|
|
|
- });
|
|
|
-
|
|
|
- $('.subexpand').click(function(){
|
|
|
- $(this).parent().next().toggleClass('show');
|
|
|
- $(this).parent().toggleClass('show');
|
|
|
- });
|
|
|
-
|
|
|
- $('.navbar-search').click(function(){
|
|
|
- $(".sec-search").css('display', 'block');
|
|
|
- $(".wholeBody").css('overflow-y', 'hidden');
|
|
|
- })
|
|
|
-
|
|
|
- $('.navbar-backs').click(function(){
|
|
|
- $(".sec-search").css('display', 'none');
|
|
|
- $(".wholeBody").css('overflow-y', 'scroll');
|
|
|
- });
|
|
|
-
|
|
|
- $('.navbar-back-fav').click(function(){
|
|
|
- $(".sec-favor").css('display', 'none');
|
|
|
- })
|
|
|
+window.addEventListener('scroll', fixedOnScroll);
|
|
|
+const navBlock = document.querySelector('.infoContent__navBlock');
|
|
|
+function fixedOnScroll() {
|
|
|
+ if (window.innerHeight < window.innerWidth) {
|
|
|
+ } else {
|
|
|
+ detectDirection();
|
|
|
+ }
|
|
|
+
|
|
|
+ if (window.pageYOffset >= over) {
|
|
|
+ navBlock.classList.add('tab_sticky');
|
|
|
+ } else if (window.pageYOffset < over) {
|
|
|
+ navBlock.classList.remove('tab_sticky');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+$('.navbar-toggler').click(function () {
|
|
|
+ $(".sec-menu").css('display', 'block');
|
|
|
+ $(".wholeBody").css('overflow-y', 'hidden');
|
|
|
+ $('.sec-menu-block').addClass('slidein');
|
|
|
+ $('.sec-menu-block').removeClass('slideout');
|
|
|
+});
|
|
|
+
|
|
|
+$('.navbar-back').click(function () {
|
|
|
+ $(".sec-menu").css('display', 'none');
|
|
|
+ $(".wholeBody").css('overflow-y', 'scroll');
|
|
|
+ $('.sec-menu-block').removeClass('slidein');
|
|
|
+ $('.sec-menu-block').addClass('slideout');
|
|
|
+});
|
|
|
+
|
|
|
+$('.subexpand').click(function () {
|
|
|
+ $(this).parent().next().toggleClass('show');
|
|
|
+ $(this).parent().toggleClass('show');
|
|
|
+});
|
|
|
+
|
|
|
+$('.navbar-search').click(function () {
|
|
|
+ $(".sec-search").css('display', 'block');
|
|
|
+ $(".wholeBody").css('overflow-y', 'hidden');
|
|
|
+})
|
|
|
+
|
|
|
+$('.navbar-backs').click(function () {
|
|
|
+ $(".sec-search").css('display', 'none');
|
|
|
+ $(".wholeBody").css('overflow-y', 'scroll');
|
|
|
+});
|
|
|
+
|
|
|
+$('.navbar-back-fav').click(function () {
|
|
|
+ $(".sec-favor").css('display', 'none');
|
|
|
+})
|
|
|
+
|
|
|
+$('.btn-gotop').click(function () {
|
|
|
+ $('html, body').animate({
|
|
|
+ scrollTop: 0
|
|
|
+ }, 500)
|
|
|
+});
|
|
|
+
|
|
|
+$(window).scroll(function () {
|
|
|
+ if ($(this).scrollTop() > 500) {
|
|
|
+ $('.fixed-btn').fadeIn(222);
|
|
|
+ $('.freeCall').fadeIn(222);
|
|
|
+ } else {
|
|
|
+ $('.fixed-btn').stop().fadeOut(222);
|
|
|
+ $('.freeCall').stop().fadeOut(222);
|
|
|
+ }
|
|
|
+}).scroll();
|
|
|
|
|
|
- $('.btn-gotop').click(function () {
|
|
|
- $('html, body').animate({
|
|
|
- scrollTop: 0
|
|
|
- }, 500)
|
|
|
- });
|
|
|
-
|
|
|
- $(window).scroll(function() {
|
|
|
- if ( $(this).scrollTop() > 500 ){
|
|
|
- $('.fixed-btn').fadeIn(222);
|
|
|
- $('.freeCall').fadeIn(222);
|
|
|
- } else {
|
|
|
- $('.fixed-btn').stop().fadeOut(222);
|
|
|
- $('.freeCall').stop().fadeOut(222);
|
|
|
- }
|
|
|
- }).scroll();
|
|
|
|
|
|
-
|
|
|
const searchBtn = document.querySelector('.searchBtn');
|
|
|
const searchBar = document.querySelector('.searchBar');
|
|
|
const searchHotLink = document.querySelectorAll('.sec-search-hots__link');
|
|
|
searchBtn.addEventListener('click', search);
|
|
|
searchBar.addEventListener('keyup', pressSearch);
|
|
|
function search() {
|
|
|
- if(searchBar.value == '') {
|
|
|
+ if (searchBar.value == '') {
|
|
|
window.location.href = 'https://m.hhh.com.tw/search/lists/case/';
|
|
|
} else {
|
|
|
window.location.href = `https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`;
|
|
|
@@ -395,19 +624,19 @@ function pressSearch(e) {
|
|
|
}
|
|
|
|
|
|
searchHotLink.forEach((item, i) => {
|
|
|
- item.addEventListener('click', function() {
|
|
|
+ item.addEventListener('click', function () {
|
|
|
window.location.href = `https://m.hhh.com.tw/search/lists/case/${this.textContent}-keyword/`;
|
|
|
})
|
|
|
})
|
|
|
|
|
|
-document.addEventListener('lazybeforeunveil', function(e){
|
|
|
+document.addEventListener('lazybeforeunveil', function (e) {
|
|
|
var bg = e.target.getAttribute('data-bg');
|
|
|
- if(bg){
|
|
|
- e.target.style.backgroundImage = 'url(' + bg + ')';
|
|
|
+ if (bg) {
|
|
|
+ e.target.style.backgroundImage = 'url(' + bg + ')';
|
|
|
}
|
|
|
});
|
|
|
|
|
|
-$('.mb__infoCard__more').click(function() {
|
|
|
+$('.mb__infoCard__more').click(function () {
|
|
|
$(this).hide();
|
|
|
$('.other').css('display', 'block');
|
|
|
over = document.querySelector('.infoContent__navBlock').offsetTop;
|
|
|
@@ -418,7 +647,7 @@ checkTab()
|
|
|
$('.infoContent .nav-item-link').click(checkTab);
|
|
|
|
|
|
function checkTab() {
|
|
|
- if($('#pills-intro-tab').hasClass('active')) {
|
|
|
+ if ($('#pills-intro-tab').hasClass('active')) {
|
|
|
$('.likeSee').attr('hidden', false)
|
|
|
} else {
|
|
|
$('.likeSee').attr('hidden', true)
|
|
|
@@ -432,20 +661,20 @@ function renderModalTitle(title) {
|
|
|
|
|
|
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 / 10) - 1;
|
|
|
- if ($(window).scrollTop() + $(window).height() >= ($(document).height() - 100)) {
|
|
|
- console.log('over');
|
|
|
- if(n >= pageNum) {
|
|
|
- n = pageNum;
|
|
|
- return;
|
|
|
- } else {
|
|
|
- n ++;
|
|
|
- let append = '';
|
|
|
- let d = designer['Content'][0].Carddata.slice(10*n, (10*n)+10);
|
|
|
- for(let j = 0;j < d.length; j ++) {
|
|
|
- append += `<div class="col-6 col-md-4">
|
|
|
+ if (nowTab === document.querySelector('#pills-intro')) {
|
|
|
+ let last = document.querySelector('#pills-intro .work__row>div:last-child');
|
|
|
+ let pageNum = Math.ceil(totalPages.intro / 10) - 1;
|
|
|
+ if ($(window).scrollTop() + $(window).height() >= ($(document).height() - 100)) {
|
|
|
+ console.log('over');
|
|
|
+ if (n >= pageNum) {
|
|
|
+ n = pageNum;
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ n++;
|
|
|
+ let append = '';
|
|
|
+ let d = designer['Content'][0].Carddata.slice(10 * n, (10 * n) + 10);
|
|
|
+ for (let j = 0; j < d.length; j++) {
|
|
|
+ append += `<div class="col-6 col-md-4">
|
|
|
<a href="" target="_blank">
|
|
|
<div class="card">
|
|
|
<div style="overflow: hidden;">
|
|
|
@@ -463,29 +692,29 @@ function loadMore(designer) {
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>`
|
|
|
- }
|
|
|
- $('#pills-intro .work__row').append(append);
|
|
|
- }
|
|
|
-
|
|
|
+ }
|
|
|
+ $('#pills-intro .work__row').append(append);
|
|
|
}
|
|
|
+
|
|
|
+ }
|
|
|
} else if (nowTab === document.querySelector('#pills-video')) {
|
|
|
- let pageNum = Math.ceil(totalPages.video / 10) - 1;
|
|
|
- console.log(totalPages.video);
|
|
|
- let last = document.querySelector('#pills-video .work__row>div:last-child');
|
|
|
- if ($(window).scrollTop() + $(window).height() >= ($(document).height() - 100)) {
|
|
|
- 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(10*n_video, (10*n_video)+10);
|
|
|
- for(let j = 0;j < d.length; j ++) {
|
|
|
- append += `<div class="col-6 col-md-4">
|
|
|
+ let pageNum = Math.ceil(totalPages.video / 10) - 1;
|
|
|
+ console.log(totalPages.video);
|
|
|
+ let last = document.querySelector('#pills-video .work__row>div:last-child');
|
|
|
+ if ($(window).scrollTop() + $(window).height() >= ($(document).height() - 100)) {
|
|
|
+ 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(10 * n_video, (10 * n_video) + 10);
|
|
|
+ for (let j = 0; j < d.length; j++) {
|
|
|
+ append += `<div class="col-6 col-md-4">
|
|
|
<a href="" target="_blank">
|
|
|
<div class="card">
|
|
|
<div style="overflow: hidden;">
|
|
|
@@ -504,25 +733,25 @@ function loadMore(designer) {
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>`
|
|
|
- }
|
|
|
- $('#pills-video .work__row').append(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 / 10) - 1;
|
|
|
- if ($(window).scrollTop() + $(window).height() >= ($(document).height() - 100)) {
|
|
|
- if(n_columns >= pageNum) {
|
|
|
- n_columns = pageNum;
|
|
|
- return;
|
|
|
- } else {
|
|
|
- n_columns ++;
|
|
|
- console.log('test');
|
|
|
- let append = '';
|
|
|
- let d = designer['Content'][2].Carddata.slice(10*n_columns, (10*n_columns)+10);
|
|
|
- for(let j = 0;j < d.length; j ++) {
|
|
|
- append += `<div class="col-6 col-md-4">
|
|
|
+ let last = document.querySelector('#pills-columns .work__row>div:last-child');
|
|
|
+ let pageNum = Math.ceil(totalPages.columns / 10) - 1;
|
|
|
+ if ($(window).scrollTop() + $(window).height() >= ($(document).height() - 100)) {
|
|
|
+ if (n_columns >= pageNum) {
|
|
|
+ n_columns = pageNum;
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ n_columns++;
|
|
|
+ console.log('test');
|
|
|
+ let append = '';
|
|
|
+ let d = designer['Content'][2].Carddata.slice(10 * n_columns, (10 * n_columns) + 10);
|
|
|
+ for (let j = 0; j < d.length; j++) {
|
|
|
+ append += `<div class="col-6 col-md-4">
|
|
|
<a href="" target="_blank">
|
|
|
<div class="card">
|
|
|
<div style="overflow: hidden;">
|
|
|
@@ -540,24 +769,35 @@ function loadMore(designer) {
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>`
|
|
|
- }
|
|
|
- $('#pills-columns .work__row').append(append);
|
|
|
- }
|
|
|
-
|
|
|
+ }
|
|
|
+ $('#pills-columns .work__row').append(append);
|
|
|
}
|
|
|
- }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
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('');
|
|
|
+ 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 格式有誤');
|
|
|
+ $('#error').show();
|
|
|
+ $('#error').text('email 格式有誤');
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
+// $(function(){
|
|
|
+// var len = 10;
|
|
|
+// $(".JQellipsis").each(function(i){
|
|
|
+// if($(this).text().length>len){
|
|
|
+// $(this).attr("title",$(this).text());
|
|
|
+// var text=$(this).text().substring(0,len-1)+"...";
|
|
|
+// $(this).text(text);
|
|
|
+// }
|
|
|
+// });
|
|
|
+// });
|
