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
.overlay {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.s-space.show-space .selection-box-label.absolute-center{
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{
display: block;
position: absolute;
bottom: 110%;
bottom: calc(100% + 0.8em);
left: 0%;
background: #2196F3;
color: white;
@ -32,3 +48,27 @@
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;
height: 2px;
cursor: pointer;
.selection-box-label {
box-sizing: border-box;
font-family: $main-font;
min-width: calc(100% + 4px);
color: $white;
background-color: rgba($main-color, 0.9);
padding: 5px 8px;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
.selection-box-label.absolute-center{
display: none;
}
.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{
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 {
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;
}

54
app/controllers/spaces_controller.rb
View File

@ -34,8 +34,11 @@ class SpacesController < ApplicationController
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
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-frontend-image-thumb" => thumb_image,
@ -44,7 +47,11 @@ class SpacesController < ApplicationController
"building-back-link" => "/" + I18n.locale.to_s + page.url,
"floor-layout" => floor.layout,
"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
@ -88,12 +95,20 @@ class SpacesController < ApplicationController
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}"
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,
"floor-back-link" => backlink,
"unit-layout" => layout,
"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
@ -111,10 +126,39 @@ class SpacesController < ApplicationController
{
"unit-images" => images,
"extras" => {
"unit-title" => unit.title
"unit-title" => unit.title,
"content" => unit.content || ''
}
}
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

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

@ -17,11 +17,13 @@
</div>
</article>
<div id="space-for-ad-banner"></div>
{{style_label}}
<script>
(function() {
var canvas = $("#full-layout-canvas");
var layoutImage = $("#layout-image");
var cover = canvas.find(".image-cover");
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 = (Modernizr.touch ? 157 : 257);
var windowHeight = ($(window).height() - pxToDeduct);
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 floorId = "{{floor-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 $controlBtn = null;
var $controlIcon = null;
var $collapse = null;
canvas.height(windowHeight);
cover.height(coverImageHeight);
layoutImage.height(coverImageHeight);
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%');
tmpImg.src = layoutImage.attr('src') ;
tmpImg.onload = function() {
cover.width(layoutImage.width());
};
spaceForAdBanner.hide()
$('.selection-box-btn-holder').remove();
$.ajax({
@ -65,23 +68,35 @@
temp.find('.pulse').remove();
}
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(){
$(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(){
$(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(){
$(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(){
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')
inactive_map(this)
}
})
//temp.prepend($(this).find('.selection-box-label.absolute-center'))
@ -99,10 +114,10 @@
dataType : "html",
type : "get"
}).done(function(data){
var template = $(data).find('#main-content')
var template = $($(data).find('#main-content').html())
template.find('.s-space__back-btn-wrap').hide()
createAdbanner(template);
$("#space-for-ad-banner").show()
spaceForAdBanner.show()
$closeBtn
.on('click', destroyAdbanner)
.prependTo(template);
@ -188,9 +203,11 @@
};
function destroyAdbanner() {
$slideshow.cycle('destroy');
if ($slideshow){
$slideshow.cycle('destroy');
}
$closeBtn.remove();
$('#space-for-ad-banner')
spaceForAdBanner
.children()
.remove()
.end()
@ -198,5 +215,13 @@
$(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>

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__pager-wrap w-ad-banner__page--active">
<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}}">
</div>
</div>
<div class="content">
{{content}}
</div>
</div>

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

@ -12,12 +12,13 @@
</div>
</article>
<div id="space-for-ad-banner"></div>
{{style_label}}
<script>
(function() {
var canvas = $("#full-layout-canvas");
var layoutImage = $("#layout-image");
var cover = canvas.find(".image-cover");
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 = (Modernizr.touch ? 157 : 257);
var windowHeight = ($(window).height() - pxToDeduct);
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 unitId = "{{unit-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 $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('height','');
cover.css('width','');
layoutImage.css('height','');
layoutImage.css('width','100%');
tmpImg.src = layoutImage.attr('src') ;
cover.css('width','');
spaceForAdBanner.hide()
$('.selection-box-btn-holder').remove();
$.ajax({
@ -63,23 +67,36 @@
temp.find('.pulse').remove();
}
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(){
$(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(){
$(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(){
$(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(){
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')
inactive_map(this)
}
})
//temp.prepend($(this).find('.selection-box-label.absolute-center'))
@ -99,7 +116,7 @@
}).done(function(data){
var template = $(data)
createAdbanner(template);
$("#space-for-ad-banner").show()
spaceForAdBanner.show()
$closeBtn
.on('click', destroyAdbanner)
.prependTo(template);
@ -185,9 +202,11 @@
};
function destroyAdbanner() {
$slideshow.cycle('destroy');
if ($slideshow){
$slideshow.cycle('destroy');
}
$closeBtn.remove();
$('#space-for-ad-banner')
spaceForAdBanner
.children()
.remove()
.end()
@ -195,5 +214,13 @@
$(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>