change unit html for front page

This commit is contained in:
chiu 2020-09-18 14:39:31 +08:00
parent 7148a53dc8
commit caba7bc721
11 changed files with 583 additions and 108 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

View File

@ -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;

View File

@ -1,120 +1,120 @@
class SpacesController < ApplicationController
def index
params = OrbitHelper.params
page = Page.where(:page_id => params[:page_id]).first
buildings = Building.filter_by_categories.collect do |building|
floors = building.floors.desc(:title).collect do |floor|
image = (!floor.frontend_image.thumb.url.nil? ? floor.frontend_image.thumb.url : "/assets/default-floor.jpg")
link = floor.layout.nil? ? (floor.floor_units.empty? ? "#" : "/#{I18n.locale.to_s}#{page.url}/#{floor.floor_units.first.to_param}?method=unit") : OrbitHelper.url_to_show(floor.to_param)
{
"floor-title" => floor.title,
"floor-image" => image,
"alt-title" => floor.title,
"link_to_show" => link
}
end
{
"building-title" => building.title,
"building-image" => building.image.url,
"alt-title" => building.title,
"floors" => floors
}
end
def index
params = OrbitHelper.params
page = Page.where(:page_id => params[:page_id]).first
buildings = Building.filter_by_categories.collect do |building|
floors = building.floors.desc(:title).collect do |floor|
image = (!floor.frontend_image.thumb.url.nil? ? floor.frontend_image.thumb.url : "/assets/default-floor.jpg")
link = floor.layout.nil? ? (floor.floor_units.empty? ? "#" : "/#{I18n.locale.to_s}#{page.url}/#{floor.floor_units.first.to_param}?method=unit") : OrbitHelper.url_to_show(floor.to_param)
{
"floor-title" => floor.title,
"floor-image" => image,
"alt-title" => floor.title,
"link_to_show" => link
}
end
{
"building-title" => building.title,
"building-image" => building.image.url,
"alt-title" => building.title,
"floors" => floors
}
end
{
"buildings" => buildings,
"extras" => {
{
"buildings" => buildings,
"extras" => {
}
}
end
}
}
end
def show
params = OrbitHelper.params
floor = Floor.where(:uid => params[:uid]).first rescue nil
thumb_image = (!floor.frontend_image.thumb.url.nil? ? floor.frontend_image.thumb.url : "/assets/default-floor.jpg")
image = (!floor.frontend_image.mobile.url.nil? ? floor.frontend_image.mobile.url : "#")
page = Page.where(:page_id => params[:page_id]).first
def show
params = OrbitHelper.params
floor = Floor.where(:uid => params[:uid]).first rescue nil
thumb_image = (!floor.frontend_image.thumb.url.nil? ? floor.frontend_image.thumb.url : "/assets/default-floor.jpg")
image = (!floor.frontend_image.mobile.url.nil? ? floor.frontend_image.mobile.url : "#")
page = Page.where(:page_id => params[:page_id]).first
{
"floor-title" => floor.title,
"floor-frontend-image-thumb" => thumb_image,
"floor-frontend-image" => image,
"image-alt" => floor.title,
"building-back-link" => "/" + I18n.locale.to_s + page.url,
"floor-layout" => floor.layout,
"floor-id" => floor.id.to_s,
"page-id" => page.page_id
}
end
{
"floor-title" => floor.title,
"floor-frontend-image-thumb" => thumb_image,
"floor-frontend-image" => image,
"image-alt" => floor.title,
"building-back-link" => "/" + I18n.locale.to_s + page.url,
"floor-layout" => floor.layout,
"floor-id" => floor.id.to_s,
"page-id" => page.page_id
}
end
def floor_units
floor = Floor.find(params[:floor_id]) rescue nil
page = Page.where(:page_id => params[:page_id]).first rescue nil
units = []
if !floor.nil?
floor.floor_units.each do |unit|
url = "/#{I18n.locale.to_s}#{page.url}/#{unit.to_param}?method=unit" rescue "#"
units << {
"id" => unit.id.to_s,
"url" => url
}
end
end
def floor_units
floor = Floor.find(params[:floor_id]) rescue nil
page = Page.where(:page_id => params[:page_id]).first rescue nil
units = []
if !floor.nil?
floor.floor_units.each do |unit|
url = "/#{I18n.locale.to_s}#{page.url}/#{unit.to_param}?method=unit" rescue "#"
units << {
"id" => unit.id.to_s,
"url" => url
}
end
end
render :json => {"success" => true, "units" => units}
end
render :json => {"success" => true, "units" => units}
end
def floor_sub_units
unit = FloorUnit.find(params[:unit_id]) rescue nil
page = Page.where(:page_id => params[:page_id]).first rescue nil
units = []
if !unit.nil?
unit.floor_sub_units.each do |subunit|
url = subunit.floor_sub_unit_images.empty? ? "#" : "/#{I18n.locale.to_s}#{page.url}/#{subunit.to_param}?method=showcase&layout=false" rescue "#"
units << {
"id" => subunit.id.to_s,
"url" => url
}
end
end
def floor_sub_units
unit = FloorUnit.find(params[:unit_id]) rescue nil
page = Page.where(:page_id => params[:page_id]).first rescue nil
units = []
if !unit.nil?
unit.floor_sub_units.each do |subunit|
url = subunit.floor_sub_unit_images.empty? ? "#" : "/#{I18n.locale.to_s}#{page.url}/#{subunit.to_param}?method=showcase&layout=false" rescue "#"
units << {
"id" => subunit.id.to_s,
"url" => url
}
end
end
render :json => {"success" => true, "sub_units" => units}
end
render :json => {"success" => true, "sub_units" => units}
end
def unit
params = OrbitHelper.params
unit = FloorUnit.where(:uid => params[:uid]).first rescue nil
page = Page.where(:page_id => params[:page_id]).first
layout = unit.layout.nil? ? "<div id='full-layout-canvas'><img href='<%= unit.layout_image.url %>' id='layout-image'></div>" : unit.layout
backlink = unit.floor.layout.nil? ? "/" + I18n.locale.to_s + page.url : "/" + I18n.locale.to_s + page.url + "/#{unit.floor.to_param}"
{
"unit-title" => unit.title,
"floor-back-link" => backlink,
"unit-layout" => layout,
"unit-id" => unit.id.to_s,
"page-id" => page.page_id
}
end
def unit
params = OrbitHelper.params
unit = FloorUnit.where(:uid => params[:uid]).first rescue nil
page = Page.where(:page_id => params[:page_id]).first
layout = unit.layout.nil? ? "<div id='full-layout-canvas'><img href='<%= unit.layout_image.url %>' id='layout-image'></div>" : unit.layout
backlink = unit.floor.layout.nil? ? "/" + I18n.locale.to_s + page.url : "/" + I18n.locale.to_s + page.url + "/#{unit.floor.to_param}"
{
"unit-title" => unit.title,
"floor-back-link" => backlink,
"unit-layout" => layout,
"unit-id" => unit.id.to_s,
"page-id" => page.page_id
}
end
def showcase
params = OrbitHelper.params
unit = FloorSubUnit.where(:uid => params[:uid]).first rescue nil
images = []
unit.floor_sub_unit_images.each do |image|
images << {
"image-thumb-url" => image.image.thumb.url,
"image-url" => image.image.url,
"alt-image" => unit.title
}
end
{
"unit-images" => images,
"extras" => {
"unit-title" => unit.title
}
}
end
def showcase
params = OrbitHelper.params
unit = FloorSubUnit.where(:uid => params[:uid]).first rescue nil
images = []
unit.floor_sub_unit_images.each do |image|
images << {
"image-thumb-url" => image.image.thumb.url,
"image-url" => image.image.url,
"alt-image" => unit.title
}
end
{
"unit-images" => images,
"extras" => {
"unit-title" => unit.title
}
}
end
end

12
modules/space/info.json Normal file
View File

@ -0,0 +1,12 @@
{
"frontend": [
{
"filename" : "space_index1",
"name" : {
"zh_tw" : "1. 卡片式 ( 模組標題, 大樓, 樓層)",
"en" : "1. Card-like layout ( widget-title, buildings, floors )"
},
"thumbnail" : "thumb.png"
}
]
}

View File

@ -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>

View File

@ -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>

View File

@ -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

197
modules/space/unit.html.erb Normal file
View File

@ -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>

View File

@ -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"