social share button radial on home collection
This commit is contained in:
parent
f8d1f45ab9
commit
4e64c5c1cc
|
@ -84,12 +84,11 @@ jQuery(document).ready(function( $ ) {
|
||||||
t.on("click", ".toggle", function(e) {
|
t.on("click", ".toggle", function(e) {
|
||||||
t.preventDefault(), t.hasClass("ddd-truncated") ? (n.restore(), t.addClass("full-story")) : (t.removeClass("full-story"), n.truncate(), n.watch())
|
t.preventDefault(), t.hasClass("ddd-truncated") ? (n.restore(), t.addClass("full-story")) : (t.removeClass("full-story"), n.truncate(), n.watch())
|
||||||
}); */
|
}); */
|
||||||
$('.fab').click(function () {
|
$('.collection-header--share-button').click(function () {
|
||||||
$('.radial').toggleClass('open');
|
$('.collection-header--share').toggleClass('open');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
jQuery(document).ready(function(e) {
|
jQuery(document).ready(function(e) {
|
||||||
! function() {
|
|
||||||
var t = e(".dotmore");
|
var t = e(".dotmore");
|
||||||
t.dotdotdot({
|
t.dotdotdot({
|
||||||
keep: ".toggle"
|
keep: ".toggle"
|
||||||
|
@ -97,6 +96,8 @@ jQuery(document).ready(function(e) {
|
||||||
var n = t.data("dotdotdot");
|
var n = t.data("dotdotdot");
|
||||||
t.on("click", ".toggle", function(e) {
|
t.on("click", ".toggle", function(e) {
|
||||||
e.preventDefault(), t.hasClass("ddd-truncated") ? (n.restore(), t.addClass("full-story")) : (t.removeClass("full-story"), n.truncate(), n.watch())
|
e.preventDefault(), t.hasClass("ddd-truncated") ? (n.restore(), t.addClass("full-story")) : (t.removeClass("full-story"), n.truncate(), n.watch())
|
||||||
})
|
});
|
||||||
}()
|
e(".trigger").click(function() {
|
||||||
|
e(".collection-header--share").toggleClass("active");
|
||||||
|
});
|
||||||
});
|
});
|
|
@ -97,7 +97,7 @@
|
||||||
}
|
}
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
}
|
}
|
||||||
&.elimore {
|
&.dotmore {
|
||||||
height: 65px;
|
height: 65px;
|
||||||
.toggle {
|
.toggle {
|
||||||
&::before{
|
&::before{
|
||||||
|
@ -117,7 +117,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.radial {
|
/* .collection-header--share {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -126,78 +126,151 @@
|
||||||
transition: all 0.5s;
|
transition: all 0.5s;
|
||||||
margin-right: 4.16666666667%;
|
margin-right: 4.16666666667%;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
.collection-header--share-button {
|
||||||
|
border: none;
|
||||||
|
color: #2c2d2d;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
height: 30px !important;
|
||||||
|
width: 30px !important;
|
||||||
|
margin-right: 4.16666666667%;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -1rem;
|
||||||
|
&:hover {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
&:focus{
|
||||||
|
outline:none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#collection-header--share-button-plus {
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#fa-1, #fa-2, #fa-3 {
|
||||||
|
position: absolute;
|
||||||
|
color: #2c2d2d;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: none;
|
||||||
|
right: 0;
|
||||||
|
transition: all 0.5s;
|
||||||
|
height: 30px !important;
|
||||||
|
width: 30px !important;
|
||||||
|
margin-right: 4.16666666667%;
|
||||||
|
right: 0;
|
||||||
|
bottom: -1rem;
|
||||||
|
}
|
||||||
|
#fa-1, #fa-2, #fa-3 {
|
||||||
|
&:hover{
|
||||||
|
tansition-delay: 0s;
|
||||||
|
color: #ff8db3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.open {
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
right: 0;
|
||||||
|
.fab {
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 4px 8px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
#plus {
|
||||||
|
-webkit-transform: rotateZ(135deg) translate(-1px, 3px);
|
||||||
|
transform: rotateZ(135deg) translate(-1px, 3px);
|
||||||
|
}
|
||||||
|
#fa-1 {
|
||||||
|
transition-delay: 0s;
|
||||||
|
-webkit-transform: translate(-53px, 10px);
|
||||||
|
transform: translate(-53px, 10px);
|
||||||
|
}
|
||||||
|
#fa-2 {
|
||||||
|
transition-delay: 0.1s;
|
||||||
|
-webkit-transform: translate(-38px, -39px);
|
||||||
|
transform: translate(-38px, -39px);
|
||||||
|
}
|
||||||
|
#fa-3 {
|
||||||
|
transition-delay: 0.2s;
|
||||||
|
-webkit-transform: translate(10px, -53px);
|
||||||
|
transform: translate(10px, -53px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} */
|
||||||
|
|
||||||
.fab {
|
.absolute-center {
|
||||||
border: none;
|
|
||||||
color: #2c2d2d;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 100px;
|
|
||||||
height: 100px;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
top: 50%;
|
||||||
height: 30px !important;
|
left: 50%;
|
||||||
width: 30px !important;
|
transform: translateX(-50%) translateY(-50%);
|
||||||
margin-right: 4.16666666667%;
|
}
|
||||||
position: absolute;
|
.collection-header--share {
|
||||||
bottom: -1rem;
|
@extend .absolute-center;
|
||||||
}
|
width: 35px;
|
||||||
.fab:hover {
|
height: 35px;
|
||||||
background-color: #fff;
|
left: 93%;
|
||||||
}
|
.btn {
|
||||||
.fab:focus{
|
position: absolute;
|
||||||
outline:none;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #fff;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: -10;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 1s, z-index 0.3s, transform 1s;
|
||||||
|
transform: translateX(0);
|
||||||
|
color: #2c2d2d;
|
||||||
|
.mdi {
|
||||||
|
@extend .absolute-center;
|
||||||
|
font-size: 24px;
|
||||||
|
transition: color 0.3s;
|
||||||
|
}
|
||||||
|
&.trigger {
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 100;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rotater {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
a {
|
||||||
|
color: #2c2d2d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.btn-icon {
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#plus {
|
$numOfElems: 8;
|
||||||
transition: all 0.5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#fa-1, #fa-2, #fa-3 {
|
@for $i from 1 through $numOfElems {
|
||||||
position: absolute;
|
$deg: 360deg / $numOfElems;
|
||||||
color: #2c2d2d;
|
.rotater:nth-child(#{$i}) {
|
||||||
background-color: #fff;
|
transform: rotate($deg/-2 + $deg * ($i - 1));
|
||||||
border-radius: 50%;
|
}
|
||||||
border: none;
|
|
||||||
right: 0;
|
|
||||||
transition: all 0.5s;
|
|
||||||
height: 30px !important;
|
|
||||||
width: 30px !important;
|
|
||||||
margin-right: 4.16666666667%;
|
|
||||||
right: 0;
|
|
||||||
bottom: -1rem;
|
|
||||||
}
|
|
||||||
#fa-1:hover, #fa-2:hover, #fa-3:hover {
|
|
||||||
tansition-delay: 0s;
|
|
||||||
color: #ff8db3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radial.open {
|
.collection-header--share.active {
|
||||||
height: 100px;
|
.rotater:nth-child(#{$i}) .btn-icon {
|
||||||
width: 100px;
|
transform: translateX(-4em) rotate($deg/2 - $deg * ($i - 1));
|
||||||
right: 0;
|
}
|
||||||
}
|
}
|
||||||
.radial.open .fab {
|
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 4px 8px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
.radial.open #plus {
|
|
||||||
/* -webkit-transform: rotateZ(135deg) translate(-1px, 3px);
|
|
||||||
transform: rotateZ(135deg) translate(-1px, 3px); */
|
|
||||||
}
|
|
||||||
.radial.open #fa-1 {
|
|
||||||
transition-delay: 0s;
|
|
||||||
-webkit-transform: translate(-53px, 10px);
|
|
||||||
transform: translate(-53px, 10px);
|
|
||||||
}
|
|
||||||
.radial.open #fa-2 {
|
|
||||||
transition-delay: 0.1s;
|
|
||||||
-webkit-transform: translate(-38px, -39px);
|
|
||||||
transform: translate(-38px, -39px);
|
|
||||||
}
|
|
||||||
.radial.open #fa-3 {
|
|
||||||
transition-delay: 0.2s;
|
|
||||||
-webkit-transform: translate(10px, -53px);
|
|
||||||
transform: translate(10px, -53px);
|
|
||||||
}
|
}
|
|
@ -86,29 +86,37 @@ function social_meta() {
|
||||||
if(is_single() || is_tax() || is_archive()) {
|
if(is_single() || is_tax() || is_archive()) {
|
||||||
|
|
||||||
$logo = get_stylesheet_directory_uri().'/assets/images/social-logo.png';
|
$logo = get_stylesheet_directory_uri().'/assets/images/social-logo.png';
|
||||||
|
global $wp;
|
||||||
$img_info = (has_post_thumbnail($post->ID)) ? wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), "thumbnail") : $logo;
|
if(is_archive('tainacan-collection')){
|
||||||
|
$title = tainacan_get_the_collection_name();
|
||||||
|
$img_info = (has_post_thumbnail(tainacan_get_collection_id())) ? get_the_post_thumbnail_url(tainacan_get_collection_id()) : $logo;
|
||||||
|
$url_src = home_url( $wp->request );
|
||||||
|
$excerpt = tainacan_get_the_collection_description();
|
||||||
|
} else {
|
||||||
|
$title = get_the_title();
|
||||||
|
$img_info = (has_post_thumbnail($post->ID)) ? wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), "thumbnail") : $logo;
|
||||||
|
$url_src = get_permalink();
|
||||||
|
$content = wp_trim_words( $post->post_content, 28, '[...]');
|
||||||
|
if($excerpt = $content) {
|
||||||
|
$excerpt = strip_tags($content);
|
||||||
|
$excerpt = str_replace("", "'", $excerpt);
|
||||||
|
} else {
|
||||||
|
$excerpt = get_bloginfo('description');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
$image = array(
|
$image = array(
|
||||||
'url' => (!empty($img_info[0]) && $img_info[1] >= 200 && $img_info[2] >= 200) ? $img_info[0] : $logo,
|
'url' => (!empty($img_info[0]) && $img_info[1] >= 200 && $img_info[2] >= 200) ? $img_info[0] : $logo,
|
||||||
'width' => (!empty($img_info[1]) && $img_info[1] >= 200 && $img_info[2] >= 200) ? $img_info[1] : 200,
|
'width' => (!empty($img_info[1]) && $img_info[1] >= 200 && $img_info[2] >= 200) ? $img_info[1] : 200,
|
||||||
'height' => (!empty($img_info[2]) && $img_info[1] >= 200 && $img_info[2] >= 200) ? $img_info[2] : 200,
|
'height' => (!empty($img_info[2]) && $img_info[1] >= 200 && $img_info[2] >= 200) ? $img_info[2] : 200,
|
||||||
);
|
);
|
||||||
|
|
||||||
$content = wp_trim_words( $post->post_content, 28, '[...]');
|
|
||||||
if($excerpt = $content) {
|
|
||||||
$excerpt = strip_tags($content);
|
|
||||||
$excerpt = str_replace("", "'", $excerpt);
|
|
||||||
} else {
|
|
||||||
$excerpt = get_bloginfo('description');
|
|
||||||
}
|
|
||||||
|
|
||||||
?>
|
?>
|
||||||
<meta property="og:type" content="article"/>
|
<meta property="og:type" content="article"/>
|
||||||
<meta property="og:title" content="<?php echo the_title(); ?>"/>
|
<meta property="og:title" content="<?php echo $title; ?>"/>
|
||||||
<meta property="og:site_name" content="<?php echo get_bloginfo(); ?>"/>
|
<meta property="og:site_name" content="<?php echo get_bloginfo(); ?>"/>
|
||||||
<meta property="og:description" content="<?php echo $excerpt; ?>"/>
|
<meta property="og:description" content="<?php echo $excerpt; ?>"/>
|
||||||
<meta property="og:url" content="<?php echo the_permalink(); ?>"/>
|
<meta property="og:url" content="<?php echo $url_src; ?>"/>
|
||||||
<meta property="og:image" content="<?php echo $image['url']; ?>"/>
|
<meta property="og:image" content="<?php echo $image['url']; ?>"/>
|
||||||
<meta property="og:image:width" content="<?php echo $image['width']; ?>"/>
|
<meta property="og:image:width" content="<?php echo $image['width']; ?>"/>
|
||||||
<meta property="og:image:height" content="<?php echo $image['height']; ?>"/>
|
<meta property="og:image:height" content="<?php echo $image['height']; ?>"/>
|
||||||
|
|
|
@ -11,21 +11,62 @@
|
||||||
?>
|
?>
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</div>
|
||||||
<?php endif; ?>
|
<?php endif;
|
||||||
<div class="radial collection-header--share">
|
global $wp; ?>
|
||||||
<button class="mdi mdi-facebook" id="fa-1"></button>
|
<!-- <div class="collection-header--share">
|
||||||
<button class="mdi mdi-twitter" id="fa-2"></button>
|
<?php if ( true == get_theme_mod( 'facebook_share', false ) ) : ?>
|
||||||
<button class="mdi mdi-google-plus" id="fa-3"></button>
|
<button onclick="location.href='http://www.facebook.com/sharer.php?u=<?php echo home_url( $wp->request ); ?>'" target="_blank" class="mdi mdi-facebook" id="fa-1"></button>
|
||||||
<button class="fab collection-header--share-button">
|
<?php endif; ?>
|
||||||
|
<?php if ( true == get_theme_mod( 'twitter_share', false ) && get_option( 'twitter_user') ) : ?>
|
||||||
|
<button onclick="location.href='http://twitter.com/share?url=<?php echo home_url( $wp->request ); ?>&text=<?php echo tainacan_get_the_collection_name(); ?>&via=<?php echo get_option( 'twitter_user', '' ) ?>'" target="_blank" class="mdi mdi-twitter" id="fa-2"></button>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php if ( true == get_theme_mod( 'google_share', false ) ) : ?>
|
||||||
|
<button onclick="location.href='https://plus.google.com/share?url=<?php echo home_url( $wp->request ); ?>'" target="_blank" class="mdi mdi-google-plus" id="fa-3"></button>
|
||||||
|
<?php endif; ?>
|
||||||
|
<button class="collection-header--share-button">
|
||||||
<div class="mdi mdi-share-variant" id="collection-header--share-button-plus"></div>
|
<div class="mdi mdi-share-variant" id="collection-header--share-button-plus"></div>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div> -->
|
||||||
|
<div class="collection-header--share">
|
||||||
|
<div class="btn trigger">
|
||||||
|
<span class="mdi mdi-share-variant"></span>
|
||||||
|
</div>
|
||||||
|
<div class="icons">
|
||||||
|
<div class="rotater">
|
||||||
|
<?php if ( true == get_theme_mod( 'facebook_share', false ) ) : ?>
|
||||||
|
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" target="_blank">
|
||||||
|
<div class="btn btn-icon">
|
||||||
|
<i class="mdi mdi-facebook"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
<div class="rotater">
|
||||||
|
<?php if ( true == get_theme_mod( 'twitter_share', false ) && get_option( 'twitter_user') ) : ?>
|
||||||
|
<a href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title_attribute(); ?>&via=<?php echo get_option( 'twitter_user', '' ) ?>" target="_blank">
|
||||||
|
<div class="btn btn-icon">
|
||||||
|
<i class="mdi mdi-twitter"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
<div class="rotater">
|
||||||
|
<?php if ( true == get_theme_mod( 'google_share', false ) ) : ?>
|
||||||
|
<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank">
|
||||||
|
<div class="btn btn-icon">
|
||||||
|
<i class="mdi mdi-google-plus"></i>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row t-collection--info max-large margin-one-column" style="overflow-x: inherit;">
|
<div class="row t-collection--info max-large margin-one-column" style="overflow-x: inherit;">
|
||||||
<div class="col-4 col-md-3 px-0 t-collection--col-3">
|
<div class="col-4 col-md-3 px-0 t-collection--col-3">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-8 col-md-9 pl-0 t-collection--col-9" style="z-index: 2">
|
<div class="col-8 col-md-9 pl-0 t-collection--col-9 mt-md-3" style="z-index: 2">
|
||||||
<h2 class="t-collection--info-title text-white">
|
<h2 class="t-collection--info-title text-white">
|
||||||
<?php tainacan_the_collection_name(); ?>
|
<?php tainacan_the_collection_name(); ?>
|
||||||
</h2>
|
</h2>
|
||||||
|
|
Loading…
Reference in New Issue