267 lines
9.1 KiB
Plaintext
267 lines
9.1 KiB
Plaintext
|
<script type="text/javascript" src="/assets/space/tingle.js"></script>
|
||
|
|
<link rel="stylesheet" type="text/css" href="/assets/space/tingle.css">
|
||
|
|
<article class="s-space show-space">
|
||
|
|
<div class="loading-cover loading-hide">
|
||
|
|
<div class="loading"></div>
|
||
|
|
</div>
|
||
|
|
<h3 class="s-space__apartment-name">{{unit-title}}</h3>
|
||
|
|
<div class="s-space__apartment-layout">
|
||
|
|
{{unit-layout}}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="s-space__back-btn-wrap">
|
||
|
|
<a href="{{floor-back-link}}" class="s-space__back-btn btn btn-primary"><i class="fa fa-arrow-left"></i></a>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
<div id="space-for-ad-banner-unit"></div>
|
||
|
|
{{style_label}}
|
||
|
|
<script>
|
||
|
|
(function() {
|
||
|
|
var touch_flag = 'ontouchstart' in window || navigator.msMaxTouchPoints;
|
||
|
|
var layout = $(".s-space__apartment-layout").eq(-1)
|
||
|
|
var canvas = layout.find("#full-layout-canvas");
|
||
|
|
var layoutImage = layout.find("#layout-image");
|
||
|
|
var cover = canvas.eq(-1).find(".image-cover");
|
||
|
|
var pxToDeduct = (touch_flag ? 157 : 257);
|
||
|
|
var windowHeight = ($(window).height() - pxToDeduct);
|
||
|
|
var coverImageHeight = (parseInt(windowHeight));
|
||
|
|
var tmpImg = new Image();
|
||
|
|
var $box = $('.selection-box');
|
||
|
|
var $pin = $('<a class="s-space__pin-link" href="#"><div class="pin"></div><div class="pulse"></div></a>');
|
||
|
|
var $slideshow = null;
|
||
|
|
var $closeBtn = $('<div class="s-space__close-btn btn-close"><i class="fa fa-times"></i></div>');
|
||
|
|
var unitId = "{{unit-id}}";
|
||
|
|
var pageId = "{{page-id}}";
|
||
|
|
var spaceForAdBanner = layout.parents('.s-space.show-space').next('#space-for-ad-banner-unit');
|
||
|
|
var loading = $("div.loading-cover");
|
||
|
|
var $controlBtn = null;
|
||
|
|
var $controlIcon = null;
|
||
|
|
var $collapse = null;
|
||
|
|
var active_color = '{{hover_color}}' || '#e84c3d';
|
||
|
|
var map_color = '{{bg_color}}' || '#00a8f3';
|
||
|
|
var block_color = '{{block_color}}' || 'rgba(0,0,0,0.4)';
|
||
|
|
canvas.css('height','');
|
||
|
|
cover.css('height','');
|
||
|
|
cover.css('width','');
|
||
|
|
layoutImage.css('height','');
|
||
|
|
layoutImage.css('width','100%');
|
||
|
|
var modal = new tingle.modal({
|
||
|
|
footer: false,
|
||
|
|
stickyFooter: false,
|
||
|
|
closeMethods: ['overlay', 'button', 'escape'],
|
||
|
|
closeLabel: "Close",
|
||
|
|
//cssClass: ['custom-class-1', 'custom-class-2'],
|
||
|
|
onOpen: function() {
|
||
|
|
console.log('modal open');
|
||
|
|
},
|
||
|
|
onClose: function() {
|
||
|
|
destroyAdbanner()
|
||
|
|
},
|
||
|
|
beforeClose: function() {
|
||
|
|
// here's goes some logic
|
||
|
|
// e.g. save content before closing the modal
|
||
|
|
return true; // close the modal
|
||
|
|
return false; // nothing happens
|
||
|
|
}
|
||
|
|
});
|
||
|
|
tmpImg.src = layoutImage.attr('src') ;
|
||
|
|
cover.css('width','');
|
||
|
|
spaceForAdBanner.hide()
|
||
|
|
$('.selection-box-btn-holder').remove();
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
url: "/xhr/spaces/get_floor_sub_units",
|
||
|
|
data: {unit_id : unitId, page_id : pageId },
|
||
|
|
dataType: 'JSON'
|
||
|
|
}).done(function(data) {
|
||
|
|
$box.each(function(i) {
|
||
|
|
$(this).attr('tabindex','0')
|
||
|
|
var id = $(this).data('unit-id');
|
||
|
|
var obj = data.sub_units.filter(function(x) {
|
||
|
|
return x.id == id;
|
||
|
|
});
|
||
|
|
if (obj.length==0){
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var temp = $pin.clone();
|
||
|
|
temp.attr('href', obj[0].url);
|
||
|
|
var text = $(this).find('.selection-box-label')
|
||
|
|
if (obj[0].url == "#") {
|
||
|
|
temp.find('.pulse').remove();
|
||
|
|
}else{
|
||
|
|
text.append('<a class="popup" href="'+obj[0].url+'">></a>')
|
||
|
|
}
|
||
|
|
text.append('<div class="anchor"></div>')
|
||
|
|
temp.prepend('<i class="fa fa-map-marker"></i>')
|
||
|
|
temp.prepend(text)
|
||
|
|
temp.find('.fa-map-marker').css('color',map_color)
|
||
|
|
$(this).find('.selection-box.overlay')
|
||
|
|
$(this).on('mouseover',function(){
|
||
|
|
$(this).css('background-color',block_color)
|
||
|
|
})
|
||
|
|
$(this).on('mouseleave',function(){
|
||
|
|
var pin_link = $(this).find('.s-space__pin-link')
|
||
|
|
if (!pin_link.is(':focus')){
|
||
|
|
$(this).find('.selection-box-label').removeClass('active')
|
||
|
|
inactive_map(pin_link)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
temp.on('focus',function(){
|
||
|
|
$(this).parents('.selection-box.overlay').find('.selection-box-label').addClass('active')
|
||
|
|
$(this).parents('.selection-box.overlay').focus()
|
||
|
|
active_map(this)
|
||
|
|
})
|
||
|
|
temp.on('mouseover',function(){
|
||
|
|
$(this).parents('.selection-box.overlay').find('.selection-box-label').addClass('active')
|
||
|
|
active_map(this)
|
||
|
|
})
|
||
|
|
temp.parents('.selection-box.overlay').on('blur',function(){
|
||
|
|
$(this).find('.selection-box-label').removeClass('active')
|
||
|
|
inactive_map($(this).find('a.s-space__pin-link'))
|
||
|
|
})
|
||
|
|
temp.on('mouseleave',function(){
|
||
|
|
if (!$(this).is(':focus')){
|
||
|
|
$(this).parents('.selection-box.overlay').find('.selection-box-label').removeClass('active')
|
||
|
|
inactive_map(this)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
//temp.prepend($(this).find('.selection-box-label.absolute-center'))
|
||
|
|
$(this).append(temp);
|
||
|
|
});
|
||
|
|
if (touch_flag){
|
||
|
|
canvas.find(".s-space__pin-link .popup").on("click",pinLinkClickHandler)
|
||
|
|
canvas.find(".s-space__pin-link").on("click",function(){
|
||
|
|
return false;
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
canvas.find(".s-space__pin-link").on("click",pinLinkClickHandler)
|
||
|
|
canvas.find(".s-space__pin-link .popup").on("click",pinLinkClickHandler)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var pinLinkClickHandler = function(){
|
||
|
|
var el = $(this);
|
||
|
|
if(el.attr("href") != "#"){
|
||
|
|
loading.removeClass("loading-hide");
|
||
|
|
$.ajax({
|
||
|
|
url : el.attr("href"),
|
||
|
|
dataType : "html",
|
||
|
|
type : "get"
|
||
|
|
}).done(function(data){
|
||
|
|
var template = $(data)
|
||
|
|
createAdbanner(template);
|
||
|
|
spaceForAdBanner.show()
|
||
|
|
/*$closeBtn
|
||
|
|
.on('click', destroyAdbanner)
|
||
|
|
.prependTo(template);
|
||
|
|
*/
|
||
|
|
});
|
||
|
|
window.setTimeout(function(){
|
||
|
|
$(modal.modalBoxContent).html(spaceForAdBanner)
|
||
|
|
modal.open()
|
||
|
|
},1)
|
||
|
|
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
destroyAdbanner()
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
function createAdbanner(data) {
|
||
|
|
spaceForAdBanner.html(data);
|
||
|
|
$closeBtn.removeClass('active');
|
||
|
|
imageLoad(function(){
|
||
|
|
setTimeout(function(){
|
||
|
|
loading.addClass("loading-hide");
|
||
|
|
},1000);
|
||
|
|
});
|
||
|
|
|
||
|
|
$slideshow = data.find('.cycle-slideshow');
|
||
|
|
$slideshow.cycle();
|
||
|
|
$controlBtn = data.find('.w-ad-banner__btn');
|
||
|
|
$controlIcon = $controlBtn.find('i');
|
||
|
|
$collapse = data.find('.w-ad-banner__collpase');
|
||
|
|
|
||
|
|
$(document).on('keyup.adbanner', function(e) {
|
||
|
|
if (e.keyCode === 37) {
|
||
|
|
$slideshow.cycle('prev');
|
||
|
|
} else if (e.keyCode === 39) {
|
||
|
|
$slideshow.cycle('next');
|
||
|
|
} else if (e.keyCode === 27) {
|
||
|
|
destroyAdbanner();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$controlBtn.on('click', function(e) {
|
||
|
|
if ($slideshow.hasClass('cycle-paused')) {
|
||
|
|
$slideshow.cycle('resume');
|
||
|
|
$controlIcon.attr('class', 'fa fa-pause');
|
||
|
|
} else {
|
||
|
|
$slideshow.cycle('pause');
|
||
|
|
$controlIcon.attr('class', 'fa fa-play');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// collapse cycle pager and close button
|
||
|
|
$collapse.on('click', function(e) {
|
||
|
|
var $this = $(this);
|
||
|
|
console.log($this.parents('.w-ad-banner.s-showcase').find('.w-ad-banner__wrap.cycle-slideshow'))
|
||
|
|
if ($this.hasClass('active')) {
|
||
|
|
$this
|
||
|
|
.removeClass('active')
|
||
|
|
.find('.fa')
|
||
|
|
.removeClass('fa-chevron-up')
|
||
|
|
.addClass('fa-chevron-down');
|
||
|
|
$this.parents('.w-ad-banner.s-showcase').find('.w-ad-banner__wrap.cycle-slideshow').show();
|
||
|
|
} else {
|
||
|
|
$this
|
||
|
|
.addClass('active')
|
||
|
|
.find('.fa')
|
||
|
|
.removeClass('fa-chevron-down')
|
||
|
|
.addClass('fa-chevron-up');
|
||
|
|
$this.parents('.w-ad-banner.s-showcase').find('.w-ad-banner__wrap.cycle-slideshow').hide();
|
||
|
|
}
|
||
|
|
$this.parents('.w-ad-banner__pager-wrap.w-ad-banner__page--active').toggleClass('active');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
var imageLoad = function(fn){
|
||
|
|
var images = spaceForAdBanner.find("img.w-ad-banner__image");
|
||
|
|
images_loaded = 0;
|
||
|
|
images.each(function(){
|
||
|
|
var img = new Image();
|
||
|
|
img.src = $(this).attr("src");
|
||
|
|
img.onload = function(){
|
||
|
|
images_loaded++;
|
||
|
|
if(typeof fn == "function" && images_loaded == images.length){
|
||
|
|
fn.call();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
function destroyAdbanner() {
|
||
|
|
if ($slideshow){
|
||
|
|
$slideshow.cycle('destroy');
|
||
|
|
}
|
||
|
|
$closeBtn.remove();
|
||
|
|
spaceForAdBanner
|
||
|
|
.children()
|
||
|
|
.remove()
|
||
|
|
.end()
|
||
|
|
.hide();
|
||
|
|
|
||
|
|
$(document).off('keyup.adbanner');
|
||
|
|
}
|
||
|
|
function active_map(ele){
|
||
|
|
$(ele).find('.fa-map-marker').css('color',active_color)
|
||
|
|
$(ele).parents('.selection-box.overlay').eq(0).css('background-color',block_color)
|
||
|
|
}
|
||
|
|
function inactive_map(ele){
|
||
|
|
$(ele).find('.fa-map-marker').css('color',map_color)
|
||
|
|
$(ele).parents('.selection-box.overlay').eq(0).css('background-color','')
|
||
|
|
}
|
||
|
|
}());
|
||
|
|
</script>
|