change unit html for front page
This commit is contained in:
parent
7148a53dc8
commit
caba7bc721
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
|
|
@ -4,7 +4,19 @@
|
|||
.overlay {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.s-space.show-space .selection-box-label.absolute-center{
|
||||
display: none;
|
||||
}
|
||||
.s-space.show-space .selection-box-label.absolute-center.active{
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 110%;
|
||||
left: 100%;
|
||||
background: #2196F3;
|
||||
color: white;
|
||||
width: 150%;
|
||||
padding: 0.2em;
|
||||
}
|
||||
#full-layout-canvas {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"frontend": [
|
||||
{
|
||||
"filename" : "space_index1",
|
||||
"name" : {
|
||||
"zh_tw" : "1. 卡片式 ( 模組標題, 大樓, 樓層)",
|
||||
"en" : "1. Card-like layout ( widget-title, buildings, floors )"
|
||||
},
|
||||
"thumbnail" : "thumb.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<article class="s-space show-space">
|
||||
<h3 class="s-space__apartment-name">{{floor-title}}</h3>
|
||||
<div class="s-space__apartment-layout">
|
||||
{{floor-layout}}
|
||||
</div>
|
||||
|
||||
<!-- <div class="s-space__floor-img-small">
|
||||
<img class="img-btn" src="{{floor-frontend-image-thumb}}" alt="{{image-alt}}">
|
||||
</div>
|
||||
|
||||
<div class="s-space__floor-img-large">
|
||||
<img src="{{floor-frontend-image}}" alt="{{image-alt}}">
|
||||
</div>
|
||||
-->
|
||||
<div class="s-space__back-btn-wrap">
|
||||
<a href="{{building-back-link}}" class="s-space__back-btn btn btn-primary"><i class="fa fa-arrow-left"></i></a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
var canvas = $("#full-layout-canvas");
|
||||
var layoutImage = $("#layout-image");
|
||||
var cover = canvas.find(".image-cover");
|
||||
var pxToDeduct = (Modernizr.touch ? 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 floorId = "{{floor-id}}";
|
||||
var pageId = "{{page-id}}";
|
||||
var id = '';
|
||||
var obj = null;
|
||||
var temp = null;
|
||||
var $imgToggle = $('.s-space__floor-img-small');
|
||||
var $imgLarge = $('.s-space__floor-img-large');
|
||||
var $lightbox = $('<div class="s-space__light-box"></div>');
|
||||
var $closeBtn = $('<div class="s-space__close-btn"><i class="fa fa-times"></i></div>');
|
||||
var body = document.body;
|
||||
|
||||
canvas.height(windowHeight);
|
||||
cover.height(coverImageHeight);
|
||||
layoutImage.height(coverImageHeight);
|
||||
|
||||
tmpImg.src = layoutImage.attr('src') ;
|
||||
tmpImg.onload = function() {
|
||||
cover.width(layoutImage.width());
|
||||
};
|
||||
|
||||
// get rid of these buttons since we're not using them on frontend page
|
||||
$('.selection-box-btn-holder').remove();
|
||||
|
||||
// get URLs for each link
|
||||
$.ajax({
|
||||
url: "/xhr/spaces/get_floor_units",
|
||||
data: {floor_id : floorId, page_id : pageId },
|
||||
dataType: 'JSON'
|
||||
|
||||
}).done(function(data) {
|
||||
$box.each(function(i) {
|
||||
id = $(this).data('unit-id');
|
||||
obj = data.units.filter(function(x) {
|
||||
return x.id == id;
|
||||
});
|
||||
temp = $pin.clone();
|
||||
temp.attr('href', obj[0].url);
|
||||
$(this).append(temp);
|
||||
});
|
||||
});
|
||||
|
||||
$imgToggle.on('click', function(e) {
|
||||
if (!$(body).children('.light-box').length) {
|
||||
$lightbox.append($closeBtn);
|
||||
$(body).append($lightbox);
|
||||
}
|
||||
|
||||
$(body).toggleClass('has-lightbox');
|
||||
|
||||
$closeBtn.on('click', function(e) {
|
||||
$(body).removeClass('has-lightbox');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
$('html').keyup(function(e) {
|
||||
if (e.keyCode === 27) {
|
||||
$(body).removeClass('has-lightbox');
|
||||
}
|
||||
});
|
||||
|
||||
}());
|
||||
</script>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<style type="text/css">
|
||||
.w-ad-banner__pager-wrap.w-ad-banner__page--active .w-ad-banner__pager.external {
|
||||
display: none;
|
||||
}
|
||||
.w-ad-banner__pager-wrap.w-ad-banner__page--active.active .w-ad-banner__pager.external {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
.w-ad-banner__pager.external img {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
.bundle-button{
|
||||
padding-bottom: 1em;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.fa.fa-times{
|
||||
background: #e4225d;
|
||||
color: white;
|
||||
padding: 0.2em;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<div class="w-ad-banner ad-banner-widget-1 s-showcase">
|
||||
<div class="w-ad-banner__pager-wrap w-ad-banner__page--active">
|
||||
<h2 class="w-ad-banner__widget-title">{{unit-title}}</h2>
|
||||
<div class="bundle-button">
|
||||
<div class="w-ad-banner__control">
|
||||
<button class="w-ad-banner__btn pull-left ui-button">
|
||||
<i class="fa fa-pause"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="w-ad-banner__collpase ui-button">
|
||||
<i class="fa fa-chevron-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-ad-banner__pager external" data-list="unit-images" data-level="0">
|
||||
<span class="w-ad-banner__pager-item">
|
||||
<img src="{{image-thumb-url}}" alt="{{alt-image}}">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-ad-banner__wrap cycle-slideshow"
|
||||
data-list="unit-images"
|
||||
data-level="0"
|
||||
data-cycle-fx="tileSlide"
|
||||
data-cycle-slides=".w-ad-banner__slide"
|
||||
data-cycle-timeout="5000"
|
||||
data-cycle-pager=".w-ad-banner__pager"
|
||||
data-cycle-pager-template=""
|
||||
data-cycle-log="false"
|
||||
>
|
||||
<div class="w-ad-banner__slide">
|
||||
<img class="w-ad-banner__image banner-responsive" src="{{image-url}}" alt="{{alt-image}}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
|
|
@ -0,0 +1,197 @@
|
|||
<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"></div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
var canvas = $("#full-layout-canvas");
|
||||
var layoutImage = $("#layout-image");
|
||||
var cover = canvas.find(".image-cover");
|
||||
var pxToDeduct = (Modernizr.touch ? 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 = $("#space-for-ad-banner");
|
||||
var loading = $("div.loading-cover");
|
||||
var $controlBtn = null;
|
||||
var $controlIcon = null;
|
||||
var $collapse = null;
|
||||
|
||||
canvas.height(windowHeight);
|
||||
cover.height(coverImageHeight);
|
||||
layoutImage.height(coverImageHeight);
|
||||
|
||||
tmpImg.src = layoutImage.attr('src') ;
|
||||
tmpImg.onload = function() {
|
||||
cover.width(layoutImage.width());
|
||||
};
|
||||
|
||||
$('.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) {
|
||||
var id = $(this).data('unit-id');
|
||||
var obj = data.sub_units.filter(function(x) {
|
||||
return x.id == id;
|
||||
});
|
||||
var temp = $pin.clone();
|
||||
temp.attr('href', obj[0].url);
|
||||
if (obj[0].url == "#") {
|
||||
temp.find('.pulse').remove();
|
||||
}
|
||||
var text = $(this).find('.selection-box-label.absolute-center')
|
||||
temp.prepend('<img src="/assets/space-p1.png">')
|
||||
temp.on('focus',function(){
|
||||
$(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').addClass('active')
|
||||
$(this).find('img').attr('src','/assets/space-p2.png')
|
||||
})
|
||||
temp.on('mouseover',function(){
|
||||
$(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').addClass('active')
|
||||
$(this).find('img').attr('src','/assets/space-p2.png')
|
||||
})
|
||||
temp.on('blur',function(){
|
||||
$(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').removeClass('active')
|
||||
$(this).find('img').attr('src','/assets/space-p1.png')
|
||||
})
|
||||
temp.on('mouseleave',function(){
|
||||
if (!$(this).is(':focus')){
|
||||
$(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').removeClass('active')
|
||||
$(this).find('img').attr('src','/assets/space-p1.png')
|
||||
}
|
||||
})
|
||||
//temp.prepend($(this).find('.selection-box-label.absolute-center'))
|
||||
$(this).append(temp);
|
||||
});
|
||||
canvas.find(".s-space__pin-link").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);
|
||||
$("#space-for-ad-banner").show()
|
||||
$closeBtn
|
||||
.on('click', destroyAdbanner)
|
||||
.prependTo(template);
|
||||
});
|
||||
}
|
||||
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() {
|
||||
$slideshow.cycle('destroy');
|
||||
$closeBtn.remove();
|
||||
$('#space-for-ad-banner')
|
||||
.children()
|
||||
.remove()
|
||||
.end()
|
||||
.hide();
|
||||
|
||||
$(document).off('keyup.adbanner');
|
||||
}
|
||||
}());
|
||||
</script>
|
||||
|
|
@ -2,7 +2,19 @@ $:.push File.expand_path("../lib", __FILE__)
|
|||
|
||||
# Maintain your gem's version:
|
||||
require "space/version"
|
||||
|
||||
app_path = File.expand_path(__dir__)
|
||||
template_path = ENV['PWD'] + '/app/templates'
|
||||
all_template = Dir.glob(template_path+'/*/')
|
||||
puts 'copying module'
|
||||
all_template.each do |folder|
|
||||
if folder.split('/')[-1] != 'mobile'
|
||||
begin
|
||||
system ('cp -r '+ app_path + '/modules/ ' + folder)
|
||||
rescue
|
||||
puts 'error copy'
|
||||
end
|
||||
end
|
||||
end
|
||||
# Describe your gem and declare its dependencies:
|
||||
Gem::Specification.new do |s|
|
||||
s.name = "space"
|
||||
|
|
|
|||
Loading…
Reference in New Issue