social share button radial on home collection

src/assets/js/js.js

@@ -84,12 +84,11 @@ jQuery(document).ready(function( $ ) {
     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())
     }); */
-    $('.fab').click(function () {
+    $('.collection-header--share-button').click(function () {
-        $('.radial').toggleClass('open');
+        $('.collection-header--share').toggleClass('open');
     });
 });
 jQuery(document).ready(function(e) {
-    ! function() {
         var t = e(".dotmore");
         t.dotdotdot({
             keep: ".toggle"
@@ -97,6 +96,8 @@ jQuery(document).ready(function(e) {
         var n = t.data("dotdotdot");
         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(".trigger").click(function() {
+            e(".collection-header--share").toggleClass("active"); 
+        });
 });

src/assets/scss/_home-collection.scss

@@ -97,7 +97,7 @@
                 }
                 margin-top: 0.5rem;
             }
-            &.elimore {
+            &.dotmore {
                 height: 65px;
                 .toggle {
                     &::before{
@@ -117,7 +117,7 @@
     }
 }
 
-.radial {
+/* .collection-header--share {
     width: 100px;
     height: 100px;
     position: absolute;
@@ -126,78 +126,151 @@
     transition: all 0.5s;
     margin-right: 4.16666666667%;
     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;
+        }
+    }
     
-.fab {
+    #collection-header--share-button-plus {
-    border: none;
+        transition: all 0.5s;
-    color: #2c2d2d;
+    }
-    background-color: #fff;
+    
-    border-radius: 50%;
+    #fa-1, #fa-2, #fa-3 {
-    width: 100px;
+        position: absolute;
-    height: 100px;
+        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);
+        }
+    }
+} */
+
+.absolute-center {
     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);
 }

src/functions/single-functions.php

@@ -86,8 +86,24 @@ function social_meta() {
     if(is_single() || is_tax() || is_archive()) {
 
         $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(
            'url' => (!empty($img_info[0]) && $img_info[1] >= 200 && $img_info[2] >= 200) ? $img_info[0] : $logo,
@@ -95,20 +111,12 @@ function social_meta() {
            '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: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: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:width" content="<?php echo $image['width']; ?>"/>
         <meta property="og:image:height" content="<?php echo $image['height']; ?>"/>

src/template-parts/headerCollection.php

@@ -11,21 +11,62 @@
                     ?>
                     </h4>
                 </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 ); ?>&amp;text=<?php echo tainacan_get_the_collection_name(); ?>&amp;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>
                 </button>
+            </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(); ?>&amp;text=<?php the_title_attribute(); ?>&amp;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 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>
-            <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">
                     <?php tainacan_the_collection_name(); ?>
                 </h2>