123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484 |
- let result;
- $.ajax({
- method: "GET",
- url: "../json/realtime.json",
- dataType: "json",
- }).done(function (msg) {
- result = [...msg];
- renderSec00(result);
- renderSec02(result);
- renderSec05(result);
- renderSec06(result);
- renderSec07(result);
- renderSec08(result);
- renderSec09(result);
- renderSec10(result);
- renderVideo(result);
- renderTrending(result);
- });
- 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: false,
- });
- }
- function renderSec02(data) {
- let temp = data[1]['data'];
- renderBannerStr('sec-02__slider', temp);
- $(".sec-02__slider").slick({
- dots: false,
- autoplay: true,
- arrows: true,
- fade: true,
- autoplaySpeed: 4000,
- });
- }
- function renderBannerStr(sec, data) {
- let str = '';
- for(let i = 0; i < data.length; i++){
- str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['DimgUrl']}');"></div>`
- }
- $(`.${sec}`).html(str);
- }
- function renderSec05(data) {
- let randomIdx = Math.floor(Math.random()*3);
- const ran = $('.sec-05__tabdiv .nav-pills li').eq(randomIdx);
- const ranDiv = $('.sec-05tab-content>div').eq(randomIdx);
- $('.sec-05tab-content>div').hide();
- ranDiv.show();
- ran.addClass('active');
- ran.children().addClass('active');
- $('.sec-05 .morelink').attr('href', $('.sec-05__tabdiv .nav-item-link.active').data('link'));
- let temp = data[2]['data'];
- for(let i = 0; i < temp.length; i++){
- if(temp[i]["tab"] == '最夯設計'){
- let str = '';
- let sub = temp[i]["data"];
- for(let j = 0; j < sub.length; j++){
- str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
- <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');"></div>
- <h5 class="mb-2 me-2">${sub[j]['description']}</h5>
- <p class="mt-2">${sub[j]['txt']}</p>
- </div>`;
- }
- $('#pills-hot-tab .tabpar').html(str);
- }
- if(temp[i]["tab"] == '影音實錄'){
- let str = '';
- let sub = temp[i]["data"];
- for(let j = 0; j < sub.length; j++){
- str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
- <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');"><img src="images/Play-Button.png" alt="" class="tabpar__card__play"></div>
- <h5 class="mb-2 me-2">${sub[j]['description']}</h5>
- <p class="mt-2">${sub[j]['txt']}</p>
- </div>`;
- }
- $('#pills-video-tab .tabpar').html(str);
- }
- if(temp[i]["tab"] == '專欄文章'){
- let str = '';
- let sub = temp[i]["data"];
- for(let j = 0; j < sub.length; j++){
- str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
- <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');"></div>
- <h5 class="mb-2 me-2">${sub[j]['description']}</h5>
- <p class="mt-2">${sub[j]['txt']}</p>
- </div>`;
- }
- $('#pills-blog-tab .tabpar').html(str);
- }
- }
- const cardText = document.querySelectorAll('.tabpar__card p');
- cardText.forEach((item, i) => {
- let len = item.textContent.length;
- if(len > 20) {
- let str = item.textContent.substring(0, 20) + '...';
- item.textContent = str;
- }
- })
- $('.sec-05__tabdiv .nav-pills button').on('click', function(event){
- event.preventDefault();
- $('.sec-05__tabdiv .nav-pills li').removeClass('active');
- $('.sec-05__tabdiv .nav-pills li button').removeClass('active');
- $(this).addClass('active');
- $(this).parent().addClass('active');
- $('.sec-05tab-content>div').hide();
- var target = $(this).attr('id');
- $(`#pills-tab #${target}`).show();
- $('.sec-05tab-content .tabpar').slick('setPosition');
- });
- $(`.sec-05tab-content .tabpar`).slick({
- arrows: true,
- slidesToShow: 3,
- infinite: false,
- dots: false,
- slidesToScroll: 1,
- prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
- nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
- });
- $('.sec-05__tabdiv .nav-item-link').click(function() {
- $('.sec-05 .morelink').attr('href',$('.sec-05__tabdiv .nav-item-link.active').data('link'));
- });
- }
- function renderSec06(data) {
- let temp = data[3]['data'];
- let str = '';
- for(let i = 0; i < temp.length; i++){
- if(temp[i].video == 'true'){
- str+= `<div class="sec-06__card" onclick="window.open('${temp[i]['link']}');">
- <div class="sec-06__card__outer"><div class="sec-06__card__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');"><img class="sec-06__card__play" src="images/Play-Button.png"></div></div>
- <h5 class="mb-2 mt-2">${temp[i]['title']}</h5>
- <p class="mt-2">${temp[i]['description']}</p>
- </div>`;
- } else {
- str+= `<div class="sec-06__card" onclick="window.open('${temp[i]['link']}');">
- <div class="sec-06__card__outer"><div class="sec-06__card__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');"></div></div>
- <h5 class="mb-2 mt-2">${temp[i]['title']}</h5>
- <p class="mt-2">${temp[i]['description']}</p>
- </div>`;
- }
- }
- $('.sec-06 .sec-06__slider').html(str);
- $('.sec-06__slider').slick({
- arrows: true,
- dots: false,
- speed: 800,
- prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 30px;color: white;"></i></button>',
- nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 30px;color: white;"></i></button>'
- });
- const cardText = document.querySelectorAll('.sec-06__card p');
- cardText.forEach((item, i) => {
- let len = item.textContent.length;
- if(len > 20) {
- let str = item.textContent.substring(0, 40) + '...';
- item.textContent = str;
- }
- });
- }
- function renderSec07(data) {
- let temp = data[5]['data'];
- let str = '';
- for(let i = 0; i < temp.length; i++){
- str+= `<div class="sec-07__slider-${i+1} slide-item" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');"></div>`
- }
- $(`.sec-07__slider`).html(str);
- $(".sec-07__slider").slick({
- dots: false,
- autoplay: true,
- arrows: false,
- slidesToShow: 4,
- slidesToScroll: 1,
- autoplaySpeed: 7000,
- initialSlide: 0,
- infinite: true,
- });
- }
- function renderSec08(data) {
- let temp = data[4]['data'];
- let str = '';
- for(let i = 0; i < temp.length; i++){
- if(temp[i].video == 'true'){
- str+= `<div class="sec-08__slider-${i+1} sec-08__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
- <div class="sec-08__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');"><img class="sec-08__card__play" src="images/Play-Button.png"></div>
- <h5 class="mb-2 me-2">${temp[i]['description']}</h5>
- <p class="mb-2 me-2">${temp[i]['txt']}</p>
- </div>`;
- } else {
- str+= `<div class="sec-08__slider-${i+1} sec-08__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
- <div class="sec-08__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');"></div>
- <h5 class="mb-2 me-2">${temp[i]['description']}</h5>
- <p class="mb-2 me-2">${temp[i]['txt']}</p>
- </div>`;
- }
- }
- $('.sec-08__slider').html(str);
- $(".sec-08__slider").slick({
- arrows: true,
- slidesToShow: 1,
- infinite: false,
- dots: false,
- slidesToShow: 3,
- centerPadding: '12px',
- prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
- nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
- });
- const cardText = document.querySelectorAll('.sec-08__card p');
- cardText.forEach((item, i) => {
- let len = item.textContent.length;
- if(len > 20) {
- let str = item.textContent.substring(0, 20) + '...';
- item.textContent = str;
- }
- })
- }
- function renderSec09(data) {
- let temp = data[6]['data'];
- let str = '';
- for(let i = 0; i < temp.length; i++){
- str+= `<div class="sec-09__slider-1 sec-09__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
- <div class="sec-09__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');"></div>
- <p class="sec-09__cardtxt">${temp[i]['description']}</p>
- </div>`
- }
- $('.sec-09__slider').html(str);
- $(".sec-09__slider").slick({
- autoplay: true,
- autoplaySpeed: 7000,
- arrows: true,
- slidesToShow: 4,
- infinite: true,
- dots: false,
- slidesToScroll: 1,
- prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
- nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
- });
- }
- function renderSec10(data) {
- renderRecStr("sec-10", data[7]['data'].slice(0, 6));
- renderRecStr("sec-11", data[8]['data'].slice(0, 6));
- }
- function renderRecStr(sec, data) {
- let str = '';
- for(let i = 0; i < data.length; i++){
- if(data[i].video == 'true') {
- str+= `<div class="${sec}__card col-4 mb-3" onclick="window.open('${data[i]['link']}');">
- <div class="${sec}__card-img mb-2" style="background-image: url('${data[i]['imgUrl']}');"><img class="${sec}__card__play" src="images/Play-Button.png"></div>
- <h5 class="me-2">${data[i]['description']}</h5>
- <p class="${sec}__cardtxt me-2">${data[i]['txt']}</p>
- </div>`
- } else {
- str+= `<div class="${sec}__card col-4 mb-3" onclick="window.open('${data[i]['link']}');">
- <div class="${sec}__card-img mb-2" style="background-image: url('${data[i]['imgUrl']}');"></div>
- <h5 class="me-2">${data[i]['description']}</h5>
- <p class="${sec}__cardtxt me-2">${data[i]['txt']}</p>
- </div>`
- }
-
- }
- $(`.${sec} .row`).html(str);
- const cardText = document.querySelectorAll(`.${sec}__card p`);
- cardText.forEach((item, i) => {
- let len = item.textContent.length;
- if(len > 20) {
- let str = item.textContent.substring(0, 20) + '...';
- item.textContent = str;
- }
- })
- }
- function renderVideo(data) {
- let temp = data[9];
- console.log(data[9]);
- $('.sec-06__videotxt').text(temp['title']);
- console.log('test');
- $('.sec-06__video__imgfr').css('background-image', `url(https://img.youtube.com/vi/${temp['yt']}/hqdefault.jpg)`);
- $('#videoModal').on('shown.bs.modal', function () {
- $('#videoModal iframe').attr('src', `https://www.youtube.com/embed/${temp['yt']}?controls=0&autoplay=1&enablejsapi=1&origin=https%3A%2F%2Fm.hhh.com.tw&widgetid=1`);
- });
- $('#videoModal').on('hidden.bs.modal', function () {
- $('#videoModal iframe').removeAttr('src');
- });
- }
- function renderTrending(result){
- let temp = result[10]['data'];
- let str = '';
- for(let i = 0; i < temp.length; i++){
- str += `<a class="dropbox__hots__link" href="https://hhh.com.tw/search/lists/case/${temp[i]}-keyword/">${temp[i]}</a>`
- }
- $('.dropbox__hots').html(`<strong class="dropbox__hots__title">熱搜關鍵字:</strong>${str}`);
- }
- function tab2 () {
- if(('.dropbox__tabdiv').length){
- // Show the first tab by default
- $('.dropbox-tab-content>div').hide();
- $('.dropbox-tab-content>div:first').show();
- $('.dropbox__tabdiv .nav-pills li:first').addClass('active');
- $('.dropbox__tabdiv .nav-pills li:first button').addClass('active');
- // Change tab class and display content
- $('.dropbox__tabdiv .nav-pills button').on('click', function(event){
- event.preventDefault();
- $('.dropbox__tabdiv .nav-pills li').removeClass('active');
- $('.dropbox__tabdiv .nav-pills li button').removeClass('active');
- $(this).addClass('active');
- $(this).parent().addClass('active');
- $('.dropbox-tab-content>div').hide();
- var target = $(this).attr('id');
- $(`#pills-tab-2 #${target}`).show();
- });
- }
- }
- tab2();
- window.addEventListener('scroll', fixedOnScroll);
-
- const navbar = document.querySelector('.navbar-main');
-
- function fixedOnScroll() {
- const sticky = 250;
- 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();
- $('.btn-gotop').click(function () {
- $('html, body').animate({
- scrollTop: 0
- }, 500)
- });
- $('.navbar-search img').click(function(){
- $('.navbar-search .dropbox').toggleClass('open');
- });
- // search
- const searchBtn = document.querySelector('.dropbox__searchBar__submit');
- const searchBar = document.querySelector('.dropbox__searchBar__input');
- searchBtn.addEventListener('click', search);
- searchBar.addEventListener('keyup', pressSearch);
- function search() {
- 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/`;
- console.log(`https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`)
- }
- }
- function pressSearch(e) {
- if (e.keyCode === 13) {
- e.preventDefault();
- search();
- }
- }
- function todayTV() {
- var utc = new Date().toJSON().slice(0,10).replace(/-/g,'-');
- window.open(`https://hhh.com.tw/program/?tv=gstv&date=${utc}&type=tv`);
- }
- // city result
- //jQuery time
- var current_fs, next_fs, previous_fs; //fieldsets
- var left, opacity, scale; //fieldset properties which we will animate
- var animating; //flag to prevent quick multi-click glitches
-
- $(".next").click(function(){
- if(animating) return false;
- animating = true;
-
- current_fs = $(this).parent().parent();
- next_fs = $(this).parent().parent().next();
-
- //activate next step on progressbar using the index of next_fs
- $(".form-progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
-
- //show the next fieldset
- next_fs.animate({opacity: 1}, {
- step: function(now, mx) {
- //as the opacity of current_fs reduces to 0 - stored in "now"
- //1. scale current_fs down to 80%
- scale = 0 + (1 + now) * .5 ;
- //2. bring next_fs from the right(50%)
- left = (now * 50)+"%";
- //3. increase opacity of next_fs to 1 as it moves in
- opacity = 0 + now;
- next_fs.css({
- 'transform': 'scale('+scale+')',
- });
- next_fs.css({'opacity': opacity});
- },
- duration: 400,
- complete: function(){
- next_fs.show();
- animating = false;
- },
- //this comes from the custom easing plugin
- easing: 'easeInOutBack'
- });
- //hide the current fieldset with style
- current_fs.animate({opacity: 0}, {
- step: function(now, mx) {
- //as the opacity of current_fs reduces to 0 - stored in "now"
- //1. scale current_fs down to 80%
- scale = 1 - (1 - now) * 0.2;
- //2. bring next_fs from the right(50%)
- left = (now * 50)+"%";
- //3. increase opacity of next_fs to 1 as it moves in
- opacity = 1 - now;
- current_fs.css({
- 'transform': 'scale('+scale+')',
- });
- next_fs.css({'opacity': opacity});
- },
- duration: 400,
- complete: function(){
- current_fs.hide();
- animating = false;
- },
- //this comes from the custom easing plugin
- easing: 'easeInOutBack'
- });
- });
- /* const sec = document.querySelectorAll('.sec');
- const title = document.querySelectorAll('.title');
- const cover = document.querySelectorAll('.cover');
- const test_content = document.querySelectorAll('.test_content');
- function checkSlide() {
- console.log('pass');
- sec.forEach((block, i) => {
- // half way through the image
- //const test = document.querySelector('.test');
- const slideInAt = window.scrollY + window.innerHeight;
- console.log(slideInAt);
- //console.log(test.offsetTop);
- // bottom of the image
- const isHalfShown = slideInAt > block.offsetTop;
- if (isHalfShown) {
- console.log('active');
- title[i].style.bottom = '0em';
- cover[i].classList.add('slidein');
- test_content[i].classList.add('fadein');
- }
- })
- };
- window.addEventListener('scroll', checkSlide); */
|