• + ประกาศเช่าที่นี่+
    • ข้อมูลผู้ใช้งาน
      • ตั้งค่า
        • Languageภาษา th
          • -list-active'); target.addClass('unit-list-active'); $(element).map(function (key, item) { if ($(item).data('gallery-id') === id) { $(element).addClass('d-none'); $(item).removeClass('d-none'); } }); }) }); } $('.unit-list__item').on('click', function (event) { if (event.target.dataset.popup) { renderFeatureTabs(event.target.dataset.popup, true); $('.feature-property-button-active').removeClass('feature-property-button-active'); $(event.target).addClass('feature-property-button-active'); } }); var bindFeatureToggle = false; function renderFeatureTabs(tabId) { tabId = tabId.replace('#', ''); var fromSideList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; var slideToImage = arguments.length > 1 && arguments[2] > 0 ? arguments[2] : 1; var popupFeatureId = tabId.split('-').pop(); var isFeaturePopup = tabId.indexOf('feature') >= 0; var showedFirstTab = false; try { history.replaceState({page: 3}, document.title, '?popup=' + tabId); } catch (e) { console.log('Error: replaceState in renderFeatureTabs(tabId)'); } $('.feature-side-list .enriched-feature-list > li').each(function (i, el) { if (!bindFeatureToggle) { $(el).on('click', function (event) { if (event.target.dataset.popup) { return; } var parent = $(event.target).closest('.unit-list-active'); featureTab = parent.data('feature-tab'); if (featureTab && featureTab.length) { renderFeatureTabs(featureTab, true); parent.find('.wrapper-feature-property-button').show(); $('#photos').removeClass('active'); } }); } if (!fromSideList) { if ($(el).data('feature-tab').split('-').pop() === popupFeatureId) { $('.feature-side-list').find('.unit-list-active').removeClass('unit-list-active'); $(el).addClass('unit-list-active'); } } if ($(el).data('feature-tab').split('-').pop() !== popupFeatureId) { $(el).find('.wrapper-feature-property-button').hide(); } else { $('.feature-property-button-active').removeClass('feature-property-button-active'); $(el).find('.wrapper-feature-property-button').show() .find('.feature-property-button').each(function (i, el) { if ($(el).data('popup') === tabId) { $(el).addClass('feature-property-button-active'); } }); } }); bindFeatureToggle = true; $('#modalPopup .nav-tabs .nav-link').each(function (i, el) { if (el.dataset.featureTab) { $(el).addClass('active'); } else { $(el).removeClass('active'); } }); showedFirstTab = false; $('#modalPopup .tab-pane').each(function (i, el) { var isFeatureButton = $(el).attr('id').indexOf('feature') >= 0; var featureId = $(el).attr('id').split('-').pop(); var isSelectedFeatureId = isFeaturePopup && popupFeatureId === featureId; var isSelectedFeature = isSelectedFeatureId && $(el).attr('id') === tabId; var shown = false; if (isFeatureButton) { if (!isSelectedFeature) { $(el).removeClass('active'); } else { $(el).addClass('active'); shown = true; } $('#photos').removeClass('active'); } else { $(el)[showedFirstTab ? 'removeClass' : 'addClass']('active'); showedFirstTab = true; shown = !showedFirstTab; } if (shown) { var paneSwiper = el.querySelector('.swiper-container').swiper ?? false; if (paneSwiper) { paneSwiper.slideTo(slideToImage); } } }); } function bindPhotoGalleryUnitList() { var photoTab = $('.tab-pane#photos'); var unitList = $('.unit-list li', photoTab); if (unitList.length > 1) { var swiperContainer = $('.swiper-container', photoTab); $.each(unitList, function (unitKey, unit) { $(unit).bind("click", function () { var galleryId = $(this).data('galleryId'); $.each(swiperContainer, function (containerKey, container) { var toggle = $(container).data('galleryId') !== galleryId; $(container).toggleClass('d-none', toggle); }); $('.unit-list-active', photoTab).removeClass('unit-list-active'); $(this).addClass('unit-list-active'); }); }); } } function bindVideoUnitList() { var videoTab = $('.tab-pane#video'); var unitList = $('.unit-list li', videoTab); if (unitList.length > 0) { unitList.first().addClass('unit-list-active'); } if (unitList.length > 1) { $.each(unitList, function (unitKey, unit) { $(unit).bind("click", function () { renderVideoIframe($(unit).data('videoCode')); $('.unit-list-active', videoTab).removeClass('unit-list-active'); $(this).addClass('unit-list-active'); }); }); } } function bindBuildingFloorPlans() { var buildingTab = $('.tab-pane#buildingfloorplans'); var buildingList = $('.unit-list li', buildingTab); if (buildingList.length > 1) { var swiperContainer = $('.swiper-container', buildingTab); $.each(buildingList, function (key, building) { $(building).bind("click", function () { var buildingId = $(this).data('buildingId'); $.each(swiperContainer, function (containerKey, container) { var toggle = $(container).data('buildingId') !== buildingId; $(container).toggleClass('d-none', toggle); }); $('.unit-list-active', buildingTab).removeClass('unit-list-active'); $(this).addClass('unit-list-active'); $(building).get(0).dispatchEvent(new Event('buildingChanged')); }); }); } } function renderVideoIframe(code) { var iframe = $(".tab-pane#video #iframe_youtube"); var newUrl = 'https://www.youtube.com/embed/' + code + '?enablejsapi=1'; var setIframeSrc = function () { var oldUrl = iframe.attr('src'); if ((newUrl !== oldUrl)) { iframe.attr('src', newUrl); } }; if (!iframe.hasClass('lazyloaded')) { var checkExist = setInterval(function () { if (iframe.hasClass('lazyloaded')) { setIframeSrc(); clearInterval(checkExist); } }, 100); } else { setIframeSrc(); } } function bindPhotoGallery() { $('.photo-gallery-detail-page__main-box').bind("click", function () { $('#modalPopup').on('shown.bs.modal', () => setModalProjectGalleryIndex(-1)); }); var secImage = $('.photo-gallery-detail-page__secondary-box a.secondary-box-inner'); $.each(secImage, function (index, image) { $(image).bind("click", function () { $('#modalPopup').on('shown.bs.modal', () => setModalProjectGalleryIndex(index)); }); }); } function setModalProjectGalleryIndex(index) { var mobileUnitGallerySlider = $('.mobile-swiper'); var goToSlide = 0; if (mobileUnitGallerySlider.length && mobileUnitGallerySlider[0].swiper) { goToSlide = mobileUnitGallerySlider[0].swiper.realIndex; } var tabPhoto = $('.tab-pane#photos'); var dataId = '[data-gallery-id="project"]'; $('li.unit-list__item' + dataId, tabPhoto).trigger("click"); var mySwiper = $('.swiper-container' + dataId, tabPhoto); $(mySwiper).ready(function () { if ($(mySwiper).data('swiper-init-done')) { $(mySwiper).get(0).swiper.slideTo(goToSlide > 0 ? goToSlide : index + 2, 0); } }); $('#modalPopup').off('shown.bs.modal'); } $(document).ready(function () { googleMapLazyLoad("AIzaSyAiOxtLDztto0-3s5oKVIctWXpSfrwbuKs"); }); function googleMapLazyLoad(api_key) { 'use strict'; var googleMapLoadedApi = false; function loadedGoogleMap() { googleMapLoadedApi = true; } loadjs.ready('map', loadedGoogleMap); if (api_key) { var options = { rootMargin: '400px', threshold: 0, }; var featureImageOpened; var featureTabOpened; loadjs(['https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js'], 'bootstrap'); loadjs(['https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css', '/js/swiper-4.4.6.min.js'], 'swiper'); loadjs.ready('bootstrap', function () { var mapTabsId = { 'photos': 'photo-tab', 'mapview': 'map-tab', 'masterplan': 'masterplan-tab', 'buildingfloorplans': 'building-floor-plan-tab', 'unitfloorplans': 'unit-floor-plan-tab', '3dview': 'matterport-tab', 'video': 'video-tab', 'streetview': 'map-tab', 'feature-gallery-1406': 'feature-tab-gallery-1406','feature-video-1406': 'feature-tab-video-1406','feature-matterport-1406': 'feature-tab-matterport-1406','feature-floorplan-1406': 'feature-tab-floorplan-1406','feature-gallery-1408': 'feature-tab-gallery-1408','feature-video-1408': 'feature-tab-video-1408','feature-matterport-1408': 'feature-tab-matterport-1408','feature-floorplan-1408': 'feature-tab-floorplan-1408','feature-gallery-1410': 'feature-tab-gallery-1410','feature-video-1410': 'feature-tab-video-1410','feature-matterport-1410': 'feature-tab-matterport-1410','feature-floorplan-1410': 'feature-tab-floorplan-1410','feature-gallery-1412': 'feature-tab-gallery-1412','feature-video-1412': 'feature-tab-video-1412','feature-matterport-1412': 'feature-tab-matterport-1412','feature-floorplan-1412': 'feature-tab-floorplan-1412', }; var popUp = getParameterByName('popup'); if (popUp) { renderFeatureTabs(popUp); var tapId = mapTabsId[popUp] || 'photo-tab'; $('#modalPopup').modal('show'); var tabEl = $('#' + tapId); tabEl && tabEl.tab && tabEl.tab('show'); } $('#modalPopup').on('hide.bs.modal', function (e) { try { history.replaceState({page: 3}, document.title, window.location.pathname) } catch (e) { console.log('Error: replaceState'); } }); var mapPopup = { 'photo-tab': 'photos', 'map-tab': 'mapview', 'masterplan-tab': 'masterplan', 'building-floor-plan-tab': 'buildingfloorplans', 'unit-floor-plan-tab': 'unitfloorplans', 'matterport-tab': '3dview', 'video-tab': 'video', 'streetview-tab': 'mapview', 'feature-tab-gallery-1406': 'feature-gallery-1406','feature-tab-video-1406': 'feature-video-1406','feature-tab-matterport-1406': 'feature-matterport-1406','feature-tab-floorplan-1406': 'feature-floorplan-1406','feature-tab-gallery-1408': 'feature-gallery-1408','feature-tab-video-1408': 'feature-video-1408','feature-tab-matterport-1408': 'feature-matterport-1408','feature-tab-floorplan-1408': 'feature-floorplan-1408','feature-tab-gallery-1410': 'feature-gallery-1410','feature-tab-video-1410': 'feature-video-1410','feature-tab-matterport-1410': 'feature-matterport-1410','feature-tab-floorplan-1410': 'feature-floorplan-1410','feature-tab-gallery-1412': 'feature-gallery-1412','feature-tab-video-1412': 'feature-video-1412','feature-tab-matterport-1412': 'feature-matterport-1412','feature-tab-floorplan-1412': 'feature-floorplan-1412', }; $('#popup-map-tab li a').on('shown.bs.tab', function (e) { var popUp = $(e.target).attr('id'); var tapId = mapPopup[popUp] || 'photos'; var quirySting = '?popup=' + tapId; try { history.replaceState({page: 3}, document.title, quirySting) } catch (e) { console.log('Error: replaceState #2'); } }); $('#modalPopup').on('show.bs.modal', function (e) { featureImageOpened = $(e.relatedTarget).data('image'); var dataId = $(e.relatedTarget).data('id'); featureTabOpened = $(e.relatedTarget).attr('href'); if (dataId) { var tapId = mapTabsId[dataId] || 'photo-tab'; var tabEl = $('#' + tapId); tabEl && tabEl.tab && tabEl.tab('show'); } var activeTap = $('#popup-map-tab li a.active')[0]; if (activeTap.dataset.featureTab) { return; } var popUp = activeTap.getAttribute("id"); var tapId = mapPopup[popUp] || 'photos'; var quirySting = '?popup=' + tapId; try { history.replaceState({page: 3}, document.title, quirySting) } catch (e) { console.log('Error: replaceState #3'); } }); }); var swipers = $('.swiper-container:not(#ag-swiper)'); var intersectionObserverSwiper = new IntersectionObserver(function (entries, observer) { Array.prototype.slice.call(entries).forEach(function (entry) { var isIntersecting = typeof entry.isIntersecting === 'boolean' ? entry.isIntersecting : entry.intersectionRatio > 0; if (isIntersecting) { loadjs.ready('swiper', function () { $('.swiper-container').each(function (index, element) { var $this = $(this); $this.addClass('instance-' + index); $this.find('.swiper-button-prev').addClass('btn-prev-' + index); $this.find('.swiper-button-next').addClass('btn-next-' + index); $this.find('.swiper-pagination').addClass('pagination-' + index); var swiper = new Swiper('.instance-' + index, { pagination: { el: '.pagination-' + index, type: 'fraction', }, lazy: { loadPrevNext: true }, watchOverflow: true, effect: 'slide', on: { init: function () { var $this = this; if ($($this.$el).find('.swiper-wrapper>.swiper-slide').length === 1) { $($this.$el).find('.swiper-button-prev').remove(); $($this.$el).find('.swiper-button-next').remove(); $($this.$el).find('.swiper-pagination').remove(); } $($this.$el).data('swiper-init-done', true); }, }, simulateTouch: false, navigation: { nextEl: '.btn-next-' + index, prevEl: '.btn-prev-' + index, }, loop: true, keyboard: { enabled: true, }, observer: true, observeParents: true, }); var swiperFeatureGallery = $(element).closest(featureTabOpened); if (featureTabOpened && featureImageOpened && swiperFeatureGallery.length) { swiper.slideTo(featureImageOpened, 0); featureImageOpened = undefined; featureTabOpened = undefined; } if ($(element).data('buildingId')) { $(element).get(0).dispatchEvent(new Event('buildingInit')); } if ($('#swiper-master-plan', element).length) { $(element).get(0).dispatchEvent(new Event('masterPlanInit')); } }); }); observer.unobserve(entry.target); } }); }, options ); Array.prototype.slice.call(swipers).forEach(function (each) { intersectionObserverSwiper.observe(each); }); } }