#CSS/#RSCE: Animation der Schaltfläche "Share"

2023-05-04 10:23 von Rashid Bairamov

<?php

######################################
### Created by Rashid Bairamov #######
### https://www.rashidbairamov.de ####
######################################

return array(
  'label' => array(
    'Share button with social media links ( button, links, icons )',
  ),
  'types' => array('content'),
  'contentCategory' => 'RSCE: Content',
  'beTemplate' => 'be_wildcard',
  'standardFields' => array( 'cssID' ),
  'wrapper' => array(
    'type' => 'none',
  ),
  'fields' => array(
    ### group ###
    'button_group' => array(
      'label' => array('Button ', 'Here you can add the button'),
      'inputType' => 'group',
    ),

    ### text ###
    'button_text' => array(
      'label' => array( 'Button text', 'Here you can add title for the button'),
      'inputType' => 'text',
      'eval' => array(
        'tl_class' => 'w50 clr',
      ),
    ),

    ### list ###
    'list' => array(
      'label' => array( 'Link list', 'Here you can add links, images, color-picker' ),
      'elementLabel' => array( 'de' => 'Link %s' ),
      'inputType' => 'list',
      'minItems' => 1,
      'maxItems' => 4,
      'fields' => array(

        ### icon_group ###
        'icon_group' => array(
          'label' => array( 'Image', 'You can add an image here' ),
          'inputType' => 'group',
        ),

        ### icon ###
        'icon' => array(
          'label' => array('Image', 'You can add an image here'),
          'inputType' => 'fileTree',
          'eval' => array(
            'fieldType' => 'radio',
            'filesOnly' => true,
            'extensions' => 'svg',
            'tl_class' => 'clr',
          ),
        ),

        ### icon_alt ###
        'icon_alt' => array(
          'label' => array( 'Alt-attribute', 'Here you can enter an alt attribute for the image' ),
          'inputType' => 'text',
          'eval' => array(
            'tl_class' => 'w50 clr',
          ),
        ),

        ### icon_title ###
        'icon_title' => array(
          'label' => array( 'Image title', 'Here you can add a title for the image' ),
          'inputType' => 'text',
          'eval' => array(
            'tl_class' => 'w50 clr',
          )
        ),

        ### link_group ###
        'link_group' => array(
          'label' => array( 'Link', 'Here you can add a Link'),
          'inputType' => 'group',
        ),

        ### link ###
        'link' => array(
          'label' => array( 'Link', 'Here you can add a Link' ),
          'inputType' => 'url',
          'eval' => array(
            'tl_class' => 'w50 clr',
          ),
        ),

        ### link_title ###
        'link_title' => array(
          'label' => array( 'Link title', 'Here you can add a title for the Link ( title-attribute )'),
          'inputType' => 'text',
          'eval' => array(
            'tl_class' => 'w50 clr',
          ),
        ),

        ### color_picker_group ###
        'color_picker_group' => array(
          'label' => array('Color picker', 'Here you can choice a color for the item' ),
          'inputType' => 'group',
        ),

        ### color_picker ###
        'background_color' => array(
          'label' => array( 'Icon background', 'Here you can choice background color for social media link' ),
          'inputType' => 'text',
          'eval' => array(
            'colorpicker' => true,
            'tl_class' => 'wizard w50 clr',
          ),
        ),
      ),
    ),
  ),
);

<div class="rsce_share <?= $this->class ?>" <?= $this->cssID ?> >
  <div class="rsce_share__container">
    <span class="rsce_share__title">
      <?= $this->button_text ?>
    </span>
    <nav class="rsce_share__navigation">
      <?php foreach ( $this->list as $item ): ?>
        <?php if ( $item->link ): ?>
          <a href="<?= $item->link ?>"
             class="rsce_share__link"
             title="<?= $item->link_title ?>"
             aria-label="<?= $item->link_title ?>"
             data-background="<?= $item-> background_color ?>"
          >
            <?php if ( $icon = $this->arrData[ 'getImageObject']( $item->icon ) ): ?>
              <img
                src="<?= $icon->src ?>"
                alt="<?= $icon->alt ?: $item->icon_alt ?>"
                title="<?= $icon->title ?: $item->icon_title ?>"
              >
            <?php endif; ?>
          </a>
        <?php endif; ?>
      <?php endforeach; ?>
    </nav>
  </div>
</div>

.rsce_share {
	$background_color: #e5eef3;
	$text_color: #f1ce64;
	$button_color: #ffffff;
	$color_1: #229ED9;
	$color_2: #1DA1F2;
	$color_3: #dd5143;
	$color_4: #151013;

	@include main_margin_bottom;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: rem-calc( 100px ) 0;
	background-color: $background_color;
	@include media-breakpoint-up( lg ) {
		padding: rem-calc( 200px );
	}

	&__container {
		position: relative;

		&:hover {
			.rsce_share__title {
				opacity: 0;
			}

			.rsce_share__link {
				margin: 0 rem-calc( 10px );
				border-radius: 50%;
				background-color: $text_color;
			}
		}
	}



	&__title {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		font-size: rem-calc( 28px );
		font-weight: 700;
		text-transform: uppercase;
		color: $text_color;
		opacity: 1;
		pointer-events: none;
	}

	&__navigation {
		font-size: 0;
	}

	&__link {
		display: inline-block;
		width: rem-calc( 80px );
		margin: 0 rem-calc( -20px );
		text-align: center;
		line-height: rem-calc( 80px );
		background-color:$button_color;
		color: $button_color;
		overflow: hidden;
		opacity: 1;
		transition: all .3s ease-in-out;
		box-shadow: 3px 1px 3px rgba(0, 0, 0, 0.1);
		&:nth-child( 1 ) {
			border-top-left-radius: rem-calc( 40px );
			border-bottom-left-radius: rem-calc( 40px );
		}
		&:last-child {
			border-top-right-radius: rem-calc( 40px );
			border-bottom-right-radius: rem-calc( 40px );
		}
	}
}

'use strict';

document.addEventListener( 'DOMContentLoaded', function ( event) {
  const rsce_share = document.querySelector( '.rsce_share' );
  const rsce_share_links = document.querySelectorAll( '.rsce_share__link' );
  const rsce_share_container = document.querySelector( '.rsce_share__container' );
  if ( rsce_share ) {
  	rsce_share_container.addEventListener( 'mouseleave', function () {
  	  rsce_share_links.forEach( function ( link ) {
  	  	link.style.backgroundColor = '#ffffff';
  	  });
	});

	rsce_share_container.addEventListener( 'mouseenter', function () {
	  rsce_share_links.forEach( function ( link) {
	  	link.style.backgroundColor = '#f1ce64';
	  });
	});
	
	rsce_share_links.forEach( function ( link ) {
	  let data_background = link.getAttribute( 'data-background' );
	  link.addEventListener( 'mouseenter', function () {
	  	link.style.backgroundColor = '#'+data_background;
	  });
	  link.addEventListener( 'mouseleave', function () {
	  	link.style.backgroundColor = '#f1ce64';
	  });
	});
  }
});