harry
/
space
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change pin color to orbit bar setting

This commit is contained in:
chiu 2020-10-02 04:32:20 +08:00
parent 4e9a82ced9
commit c788c307e4
6 changed files with 230 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
app/assets/stylesheets/space-frontend.scss
View File

@ -3,14 +3,30 @@
// space-box // space-box
.overlay { .overlay {
position: absolute; position: absolute;
display: flex;
align-items: center;
justify-content: center;
} }
.s-space.show-space .selection-box-label.absolute-center{ .s-space.show-space .selection-box-label.absolute-center{
display: none; display: none;
} }
.fa.fa-map-marker{
font-size: 8vw;
}
.anchor{
position: absolute;
left: 20%;
width: 0;
height: 0;
border-style: solid;
border-width: 1em 1em 0 1em;
border-color: #2196f3 transparent transparent transparent;
}
.s-space.show-space .selection-box-label.absolute-center.active{ .s-space.show-space .selection-box-label.absolute-center.active{
display: block; display: block;
position: absolute; position: absolute;
bottom: 110%; bottom: 110%;
bottom: calc(100% + 0.8em);
left: 0%; left: 0%;
background: #2196F3; background: #2196F3;
color: white; color: white;
@ -32,3 +48,27 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
} }
.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;
}

58
app/assets/stylesheets/spaces.scss
View File

@ -360,15 +360,31 @@
width: 2px; width: 2px;
height: 2px; height: 2px;
cursor: pointer; cursor: pointer;
display: flex;
.selection-box-label { align-items: center;
box-sizing: border-box; justify-content: center;
font-family: $main-font; .selection-box-label.absolute-center{
min-width: calc(100% + 4px); display: none;
color: $white; }
background-color: rgba($main-color, 0.9); .anchor{
padding: 5px 8px; position: absolute;
white-space: nowrap; left: 20%;
width: 0;
height: 0;
border-style: solid;
border-width: 1em 1em 0 1em;
border-color: #2196f3 transparent transparent transparent;
}
.s-space.show-space .selection-box-label.absolute-center.active{
display: block;
position: absolute;
bottom: 110%;
bottom: calc(100% + 0.8em);
left: 0%;
background: #2196F3;
color: white;
width: 100%;
padding: 0.2em;
} }
} }
@ -462,3 +478,27 @@ ul#layout-canvas {
.floor-unit-title { .floor-unit-title {
text-align: center; text-align: center;
} }
.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;
}

52
app/controllers/spaces_controller.rb
View File

@ -35,7 +35,10 @@ class SpacesController < ApplicationController
thumb_image = (!floor.frontend_image.thumb.url.nil? ? floor.frontend_image.thumb.url : "/assets/default-floor.jpg") 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 : "#") image = (!floor.frontend_image.mobile.url.nil? ? floor.frontend_image.mobile.url : "#")
page = Page.where(:page_id => params[:page_id]).first page = Page.where(:page_id => params[:page_id]).first
site = Site.first
hover_color = (site.orbit_bar_submenu_background_color rescue nil) || 'null'
bg_color = (site.orbit_bar_background_color rescue nil) || 'null'
block_color = hex2rgba((site.orbit_bar_submenu_background_color rescue nil),0.3) || 'null'
{ {
"floor-title" => floor.title, "floor-title" => floor.title,
"floor-frontend-image-thumb" => thumb_image, "floor-frontend-image-thumb" => thumb_image,
@ -44,7 +47,11 @@ class SpacesController < ApplicationController
"building-back-link" => "/" + I18n.locale.to_s + page.url, "building-back-link" => "/" + I18n.locale.to_s + page.url,
"floor-layout" => floor.layout, "floor-layout" => floor.layout,
"floor-id" => floor.id.to_s, "floor-id" => floor.id.to_s,
"page-id" => page.page_id "page-id" => page.page_id,
"hover_color" => hover_color,
"bg_color" => bg_color,
"block_color" => block_color,
"style_label" => style_label(bg_color,site.orbit_bar_text_color)
} }
end end
@ -88,12 +95,20 @@ class SpacesController < ApplicationController
page = Page.where(:page_id => params[:page_id]).first 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 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}" backlink = unit.floor.layout.nil? ? "/" + I18n.locale.to_s + page.url : "/" + I18n.locale.to_s + page.url + "/#{unit.floor.to_param}"
site = Site.first
hover_color = (site.orbit_bar_submenu_background_color rescue nil) || 'null'
bg_color = (site.orbit_bar_background_color rescue nil) || 'null'
block_color = hex2rgba((site.orbit_bar_submenu_background_color rescue nil),0.3) || 'null'
{ {
"unit-title" => unit.title, "unit-title" => unit.title,
"floor-back-link" => backlink, "floor-back-link" => backlink,
"unit-layout" => layout, "unit-layout" => layout,
"unit-id" => unit.id.to_s, "unit-id" => unit.id.to_s,
"page-id" => page.page_id "page-id" => page.page_id,
"hover_color" => hover_color,
"bg_color" => bg_color,
"block_color" => block_color,
"style_label" => style_label(bg_color,site.orbit_bar_text_color)
} }
end end
@ -111,10 +126,39 @@ class SpacesController < ApplicationController
{ {
"unit-images" => images, "unit-images" => images,
"extras" => { "extras" => {
"unit-title" => unit.title "unit-title" => unit.title,
"content" => unit.content || ''
} }
} }
end end
private
def hex2rgba(my_hex,percent=1)
if my_hex
if my_hex[0] == '#'
my_hex = my_hex[1..-1]
end
rgb = my_hex.split(//).each_slice(my_hex.length/3).map{|v| v.join.to_i(16)}
"rgba(#{rgb[0]},#{rgb[1]},#{rgb[2]},#{percent})"
else
nil
end
end
def style_label(color1,color2)
if color1
"<style>
.s-space.show-space .selection-box-label.absolute-center.active{
background: #{color1} !important;
color: #{color2} !important;
}
.overlay .anchor{
border-color: #{color1} transparent transparent transparent !important;
}
</style>"
else
""
end
end
end end

65
modules/space/show.html.erb
View File

@ -17,11 +17,13 @@
</div> </div>
</article> </article>
<div id="space-for-ad-banner"></div> <div id="space-for-ad-banner"></div>
{{style_label}}
<script> <script>
(function() { (function() {
var canvas = $("#full-layout-canvas"); var layout = $(".s-space__apartment-layout").eq(-1)
var layoutImage = $("#layout-image"); var canvas = layout.find("#full-layout-canvas");
var cover = canvas.find(".image-cover"); var layoutImage =layout.find("#layout-image");
var cover = canvas.eq(-1).find(".image-cover");
var pxToDeduct = (Modernizr.touch ? 157 : 257); var pxToDeduct = (Modernizr.touch ? 157 : 257);
var windowHeight = ($(window).height() - pxToDeduct); var windowHeight = ($(window).height() - pxToDeduct);
var coverImageHeight = (parseInt(windowHeight)); var coverImageHeight = (parseInt(windowHeight));
@ -32,21 +34,22 @@
var $closeBtn = $('<div class="s-space__close-btn btn-close"><i class="fa fa-times"></i></div>'); var $closeBtn = $('<div class="s-space__close-btn btn-close"><i class="fa fa-times"></i></div>');
var floorId = "{{floor-id}}"; var floorId = "{{floor-id}}";
var pageId = "{{page-id}}"; var pageId = "{{page-id}}";
var spaceForAdBanner = $("#space-for-ad-banner"); var spaceForAdBanner = layout.parents('.s-space.show-space').next('#space-for-ad-banner');
var loading = $("div.loading-cover"); var loading = $("div.loading-cover");
var $controlBtn = null; var $controlBtn = null;
var $controlIcon = null; var $controlIcon = null;
var $collapse = null; var $collapse = null;
var active_color = '{{hover_color}}' || '#e84c3d';
canvas.height(windowHeight); var map_color = '{{bg_color}}' || '#00a8f3';
cover.height(coverImageHeight); var block_color = '{{block_color}}' || 'rgba(0,0,0,0.4)';
layoutImage.height(coverImageHeight); canvas.css('height','');
cover.css('height','');
cover.css('width','');
layoutImage.css('height','');
layoutImage.css('width','100%');
tmpImg.src = layoutImage.attr('src') ; tmpImg.src = layoutImage.attr('src') ;
tmpImg.onload = function() { spaceForAdBanner.hide()
cover.width(layoutImage.width());
};
$('.selection-box-btn-holder').remove(); $('.selection-box-btn-holder').remove();
$.ajax({ $.ajax({
@ -65,23 +68,35 @@
temp.find('.pulse').remove(); temp.find('.pulse').remove();
} }
var text = $(this).find('.selection-box-label.absolute-center') var text = $(this).find('.selection-box-label.absolute-center')
temp.prepend('<img src="/assets/space-p1.png">') text.append('<div class="anchor"></div>')
temp.prepend('<i class="fa fa-map-marker"></i>')
temp.find('.fa-map-marker').css('color',map_color)
$(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.absolute-center').removeClass('active')
inactive_map(pin_link)
}
})
temp.on('focus',function(){ temp.on('focus',function(){
$(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').addClass('active') $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').addClass('active')
$(this).find('img').attr('src','/assets/space-p2.png') active_map(this)
}) })
temp.on('mouseover',function(){ temp.on('mouseover',function(){
$(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').addClass('active') $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').addClass('active')
$(this).find('img').attr('src','/assets/space-p2.png') active_map(this)
}) })
temp.on('blur',function(){ temp.on('blur',function(){
$(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').removeClass('active') $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').removeClass('active')
$(this).find('img').attr('src','/assets/space-p1.png') inactive_map(this)
}) })
temp.on('mouseleave',function(){ temp.on('mouseleave',function(){
if (!$(this).is(':focus')){ if (!$(this).is(':focus')){
$(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').removeClass('active') $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').removeClass('active')
$(this).find('img').attr('src','/assets/space-p1.png') inactive_map(this)
} }
}) })
//temp.prepend($(this).find('.selection-box-label.absolute-center')) //temp.prepend($(this).find('.selection-box-label.absolute-center'))
@ -99,10 +114,10 @@
dataType : "html", dataType : "html",
type : "get" type : "get"
}).done(function(data){ }).done(function(data){
var template = $(data).find('#main-content') var template = $($(data).find('#main-content').html())
template.find('.s-space__back-btn-wrap').hide() template.find('.s-space__back-btn-wrap').hide()
createAdbanner(template); createAdbanner(template);
$("#space-for-ad-banner").show() spaceForAdBanner.show()
$closeBtn $closeBtn
.on('click', destroyAdbanner) .on('click', destroyAdbanner)
.prependTo(template); .prependTo(template);
@ -188,9 +203,11 @@
}; };
function destroyAdbanner() { function destroyAdbanner() {
if ($slideshow){
$slideshow.cycle('destroy'); $slideshow.cycle('destroy');
}
$closeBtn.remove(); $closeBtn.remove();
$('#space-for-ad-banner') spaceForAdBanner
.children() .children()
.remove() .remove()
.end() .end()
@ -198,5 +215,13 @@
$(document).off('keyup.adbanner'); $(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> </script>

29
modules/space/showcase.html.erb
View File

@ -1,29 +1,3 @@
<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 ad-banner-widget-1 s-showcase">
<div class="w-ad-banner__pager-wrap w-ad-banner__page--active"> <div class="w-ad-banner__pager-wrap w-ad-banner__page--active">
<h2 class="w-ad-banner__widget-title">{{unit-title}}</h2> <h2 class="w-ad-banner__widget-title">{{unit-title}}</h2>
@ -57,4 +31,7 @@
<img class="w-ad-banner__image banner-responsive" src="{{image-url}}" alt="{{alt-image}}"> <img class="w-ad-banner__image banner-responsive" src="{{image-url}}" alt="{{alt-image}}">
</div> </div>
</div> </div>
<div class="content">
{{content}}
</div>
</div> </div>

57
modules/space/unit.html.erb
View File

@ -12,12 +12,13 @@
</div> </div>
</article> </article>
<div id="space-for-ad-banner"></div> <div id="space-for-ad-banner"></div>
{{style_label}}
<script> <script>
(function() { (function() {
var canvas = $("#full-layout-canvas"); var layout = $(".s-space__apartment-layout").eq(-1)
var layoutImage = $("#layout-image"); var canvas = layout.find("#full-layout-canvas");
var cover = canvas.find(".image-cover"); var layoutImage = layout.find("#layout-image");
var cover = canvas.eq(-1).find(".image-cover");
var pxToDeduct = (Modernizr.touch ? 157 : 257); var pxToDeduct = (Modernizr.touch ? 157 : 257);
var windowHeight = ($(window).height() - pxToDeduct); var windowHeight = ($(window).height() - pxToDeduct);
var coverImageHeight = (parseInt(windowHeight)); var coverImageHeight = (parseInt(windowHeight));
@ -28,20 +29,23 @@
var $closeBtn = $('<div class="s-space__close-btn btn-close"><i class="fa fa-times"></i></div>'); var $closeBtn = $('<div class="s-space__close-btn btn-close"><i class="fa fa-times"></i></div>');
var unitId = "{{unit-id}}"; var unitId = "{{unit-id}}";
var pageId = "{{page-id}}"; var pageId = "{{page-id}}";
var spaceForAdBanner = $("#space-for-ad-banner"); var spaceForAdBanner = layout.parents('.s-space.show-space').next('#space-for-ad-banner');
var loading = $("div.loading-cover"); var loading = $("div.loading-cover");
var $controlBtn = null; var $controlBtn = null;
var $controlIcon = null; var $controlIcon = null;
var $collapse = 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',''); canvas.css('height','');
cover.css('height','') cover.css('height','');
cover.css('width','');
layoutImage.css('height',''); layoutImage.css('height','');
layoutImage.css('width','100%'); layoutImage.css('width','100%');
tmpImg.src = layoutImage.attr('src') ; tmpImg.src = layoutImage.attr('src') ;
cover.css('width',''); cover.css('width','');
spaceForAdBanner.hide()
$('.selection-box-btn-holder').remove(); $('.selection-box-btn-holder').remove();
$.ajax({ $.ajax({
@ -63,23 +67,36 @@
temp.find('.pulse').remove(); temp.find('.pulse').remove();
} }
var text = $(this).find('.selection-box-label.absolute-center') var text = $(this).find('.selection-box-label.absolute-center')
temp.prepend('<img src="/assets/space-p1.png">') text.append('<div class="anchor"></div>')
temp.prepend('<i class="fa fa-map-marker"></i>')
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.absolute-center').removeClass('active')
inactive_map(pin_link)
}
})
temp.on('focus',function(){ temp.on('focus',function(){
$(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').addClass('active') $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').addClass('active')
$(this).find('img').attr('src','/assets/space-p2.png') active_map(this)
}) })
temp.on('mouseover',function(){ temp.on('mouseover',function(){
$(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').addClass('active') $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').addClass('active')
$(this).find('img').attr('src','/assets/space-p2.png') active_map(this)
}) })
temp.on('blur',function(){ temp.on('blur',function(){
$(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').removeClass('active') $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').removeClass('active')
$(this).find('img').attr('src','/assets/space-p1.png') inactive_map(this)
}) })
temp.on('mouseleave',function(){ temp.on('mouseleave',function(){
if (!$(this).is(':focus')){ if (!$(this).is(':focus')){
$(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').removeClass('active') $(this).parents('.selection-box.overlay').find('.selection-box-label.absolute-center').removeClass('active')
$(this).find('img').attr('src','/assets/space-p1.png') inactive_map(this)
} }
}) })
//temp.prepend($(this).find('.selection-box-label.absolute-center')) //temp.prepend($(this).find('.selection-box-label.absolute-center'))
@ -99,7 +116,7 @@
}).done(function(data){ }).done(function(data){
var template = $(data) var template = $(data)
createAdbanner(template); createAdbanner(template);
$("#space-for-ad-banner").show() spaceForAdBanner.show()
$closeBtn $closeBtn
.on('click', destroyAdbanner) .on('click', destroyAdbanner)
.prependTo(template); .prependTo(template);
@ -185,9 +202,11 @@
}; };
function destroyAdbanner() { function destroyAdbanner() {
if ($slideshow){
$slideshow.cycle('destroy'); $slideshow.cycle('destroy');
}
$closeBtn.remove(); $closeBtn.remove();
$('#space-for-ad-banner') spaceForAdBanner
.children() .children()
.remove() .remove()
.end() .end()
@ -195,5 +214,13 @@
$(document).off('keyup.adbanner'); $(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> </script>