asiaH4/modules/space/space_index1.html.erb

90 lines
2.6 KiB
Plaintext

<div class="i-space index-space-1">
<ul
class="i-sapce__building-wrap list-unstyled cycle-slideshow"
data-list="buildings"
data-level="0"
data-cycle-slide=".i-space__building"
>
<li class="i-space__building">
<span class="i-space__img-wrap">
<img src="{{building-image}}" alt="{{alt-title}}" class="i-space__building-img img-responsive">
</span>
<span class="i-space__building-title">{{building-title}}</span>
<ol class="i-space__floors list-unstyled" data-list="floors" data-level="1">
<li class="i-space__floor-item">
<a class="i-space__floor-link" href="{{link_to_show}}">
<span class="i-space__floor-name">{{floor-title}}</span>
<img src="{{floor-image}}" alt="" class="i-space__floor-img" alt="{{alt-title}}">
</a>
</li>
</ol>
</li>
</ul>
</div>
<div class="background-div">
<ul data-list="buildings" data-level="0">
<li class="background-image" style="background-image: url({{building-image}});"></li>
</ul>
</div>
<script>
(function(){
var body = document.body;
var $img = $('.i-space__img-wrap');
var $this = null;
var activeCls = 'active';
var floorActiveCls = 'floors--active';
var windowWidth = $(window).width();
var breakpointExtraSmall = 480;
$img.on('click', function(e) {
e.stopPropagation();
$this = $(this);
var floors = $(this).parents(".i-space__building").find("ol li");
if (floors.length == 1){
window.location.href = floors.first().find("a").attr("href");
} else {
if (windowWidth < breakpointExtraSmall) {
$('.i-space__floors')
.removeClass(activeCls);
if (!$this.hasClass(activeCls)) {
$this
.addClass(activeCls)
.siblings('.i-space__floors')
.addClass(activeCls);
} else {
$this
.removeClass(activeCls)
.siblings('.i-space__floors')
.removeClass(activeCls);
}
} else {
$('.i-space__floors')
.removeClass(activeCls);
if (!$this.hasClass(activeCls)) {
$this
.addClass(activeCls)
.siblings('.i-space__floors')
.addClass(activeCls);
} else {
$this
.removeClass(activeCls)
.siblings('.i-space__floors')
.removeClass(activeCls);
}
}
}
});
$(document).on('click', function() {
$('.i-space__img-wrap, .i-space__floors').removeClass(activeCls);
});
}());
</script>