shareOption (component)

Description

This component create an share area on detail sites by scrolling the content (Share posibilities: Link in den Zwischenspeicher, Facebook, Twitter). To test the component use the Übersichtsseite Detailseite - Shared Options.

The Component is only visible in Screen sizes and breakpoints >= 1280px; This things must be done to get a correct functunality:

• For a correct functionality copy the Component in the area where the detailcontent-div is integrated (at the end -> better for Webreader) (for example: <div class="[Classname of the Parent of Detailcontent]"><div class="[Classname of Detailcontent]">[Content of the Detail]</div><div class=“c-share-option–default”>[all other HTML-input of the Component]</div></div>)
• The css position of the div [Classname of the Parent of Detailcontent] musst be position:relative; In the Veams preview the functionality for the sticky, animated Share Area is not working. You need the Integration of the component in the Website or components.hbs. Because of the fixed head of the website the share option area has a fix padding to the top.

Copy-Button: To open the Overlay, an Object is created with content-data defined in Json. A new Type for Overlay is html: { “html”: {“htmlCssContent”: “c-share-option–default”, “htmlContent”: “

”} } In htmlCssContent the Komponent - Class is set. htmlContent contain the HTML which should be in the Overlay box. The Object html is defined in JSON and set in the data-content-Attribute of the List-Item

Facebook:

• Integrate Open Graph-Meta-Tags in the head of the Website for the Facebook share.

• Fill the Open Graph-Meta-Tags with informationens of the Detail-Content

  <meta property=“og:url” content="[location.href]" /> <meta property=“og:type” content=“article” /> <meta property=“og:title” content="[Titel of the article]" /> <meta property=“og:description” content="[Description of the article]" /> <meta property=“og:image” content="[Absolute Path to the Image of the article]" />

• Take care: URL of the Graph-Meta-Tag must be the same as the URL in the Browser (href.location)

Twitter:

• open a share Area with this information:
  • If there is a h1 Headline in the Detail-Content the Info for the Twitter sharing will be the h1 headline. Otherwise the web-title is shown.
  • URL-shown in the Twitter share area is the URL of the Browser (href.location)
  • Hashtag is allways #LMU_Muenchen

---

Requirements

• Veams#5.0.0

---

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/share-option

---

Fields

share-option.hbs

Settings

Parameter	Type	Default	Description
settings.shareOptionClasses	String	''	Modifier classes for component
settings.shareOptionContextClass	String	'default'	Context class of component

Content

Parameter	Type	Description
content.headline	String	Set the headline of the share area
content.items	Array	Define the share items

share-option__items.hbs

Content

Parameter	Type	Description
items.itemClasses	String	Set the css class of the share item
items.itemJsClasses	String	Set the javascript parameter for javascript eventhandling
items.overlaydataContent	String	Contains the Overlay Object as a String to use for the specific share item
items.linkTextBefore	String	Set a text before the main linktext, is not shown for HCM, together with linkText and linkTextAfter it is the Tooltip-Text and the Text spoken from the Reader
items.linkText	String	Set the main name or text of the share item for HCM, together with linkTextBefore and linkTextAfter it is the Tooltip-Text and the Text spoken from the Reader
items.linkTextAfter	String	Set a text after the main linktext, is not shown for HCM, together with linkTextBefore and linkText it is the Tooltip-Text and the Text spoken from the Reader
items.linkHref	String	Set the Link for the Item
items.linkTarget	String	Set the Target-Option for the Item

---

JavaScript Options

The module gives you the possibility to override default options:

Option	Type	Default	Description
classes.visible	String	'is-visible'	Define the class to set the opacity of the share area
selectors.shAreaWrapper	String	'[data-js-item="sh-area-wrapper"]'	Define the element for scrolling reaction depending on the viewport
selectors.jsShareOptionCopy	String	'[data-js-item="js-share-option-copy"]'	Define the element for the copy share item
selectors.jsShareOptionFacebook	String	'[data-js-item="js-share-option-facebook"]'	Define the element for the facebook share item
selectors.jsShareOptionTwitter	String	'[data-js-item="js-share-option-twitter"]'	Define the element for the twitter share item
selectors.jsShareOptionBluesky	String	'[data-js-item="js-share-option-bluesky"]'	Define the element for the bluesky share item
overlayObj.data	Object	{ \"html\": {\"htmlCssContent\": \"c-share-option--default\", \"htmlContent\": \"<div class='share-option__overlay'><p>Link wurde kopiert</p></div>\"} }	Object with Informations for the overlay

---

SASS

Variables

There are multiple variables which you can change:

Variable	Value	Description

$share-option_area-width: 60px !default; $share-option_area-ptop: 9rem !default; | $share-option_area-width | 60px | Width of the share option area | | $share-option_area-ptop | 9rem | Padding-top of the share area |

Modifier Classes

There are modifier classes you can add to share-option__itemarea-item:

Modifier	Description
is-sh-facebook	For the facebook icon in the share area
is-sh-twitter	For the twitter icon in the share area
is-sh-bluesky	For the twitter icon in the share area
is-sh-copy	For the copy icon in the share area

share-option.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Share Area"
			},
			"settings": {
				"shareOptionContextClass": "default",
				"shareOptionClasses": "",
				"shareOptionJsOptions": {}
			},
			"content": {
				"headline": "Teilen",
				"items": [
					{
						"itemClasses": "is-sh-copy",
						"itemJsClasses": "js-share-option-copy",
						"overlaydataContent": "{ \"html\": {\"htmlCssContent\": \"c-share-option--default\", \"htmlContent\": \"<div class='share-option__overlay'><p>Link wurde kopiert</p></div>\"} }",
						"linkTextBefore": "Zum Teilen",
						"linkText": "Link",
						"linkTextAfter": "kopieren",
						"linkHref": "#",
						"linkTarget": "_blank"
					},
					{
						"itemClasses": "is-sh-facebook",
						"itemJsClasses": "js-share-option-facebook",
						"overlaydataContent": "",
						"linkTextBefore": "Auf",
						"linkText": "Facebook",
						"linkTextAfter": "teilen",
						"linkHref": "#",
						"linkTarget": "_blank"
					},
					{
						"itemClasses": "is-sh-twitter",
						"itemJsClasses": "js-share-option-twitter",
						"overlaydataContent": "",
						"linkTextBefore": "Auf",
						"linkText": "Twitter",
						"linkTextAfter": "teilen",
						"linkHref": "https://twitter.com/intent/tweet",
						"linkTarget": "_blank"
					},
					{
						"itemClasses": "is-sh-linkedin",
						"itemJsClasses": "js-share-option-linkedin",
						"overlaydataContent": "",
						"linkTextBefore": "Auf",
						"linkText": "LinkedIn",
						"linkTextAfter": "teilen",
						"linkHref": "#",
						"linkTarget": "_blank"
					}
				]
			}
		},
		"onblack": {
			"docs": {
				"variationName": "Share Area"
			},
			"settings": {
				"shareOptionContextClass": "onblack",
				"shareOptionClasses": "",
				"shareOptionJsOptions": {}
			},
			"content": {
				"headline": "Teilen",
				"items": [
					{
						"itemClasses": "is-sh-copy",
						"itemJsClasses": "js-share-option-copy",
						"overlaydataContent": "{ \"html\": {\"htmlCssContent\": \"c-share-option--default\", \"htmlContent\": \"<div class='share-option__overlay'><p>Link wurde kopiert</p></div>\"} }",
						"linkTextBefore": "Zum Teilen",
						"linkText": "Link",
						"linkTextAfter": "kopieren",
						"linkHref": "#",
						"linkTarget": "_blank"
					},
					{
						"itemClasses": "is-sh-facebook",
						"itemJsClasses": "js-share-option-facebook",
						"overlaydataContent": "",
						"linkTextBefore": "Auf",
						"linkText": "Facebook",
						"linkTextAfter": "teilen",
						"linkHref": "#",
						"linkTarget": "_blank"
					},
					{
						"itemClasses": "is-sh-twitter",
						"itemJsClasses": "js-share-option-twitter",
						"overlaydataContent": "",
						"linkTextBefore": "Auf",
						"linkText": "Twitter",
						"linkTextAfter": "teilen",
						"linkHref": "https://twitter.com/intent/tweet",
						"linkTarget": "_blank"
					},
					{
						"itemClasses": "is-sh-bluesky",
						"itemJsClasses": "js-share-option-bluesky",
						"overlaydataContent": "",
						"linkTextBefore": "Auf",
						"linkText": "Blueskyr",
						"linkTextAfter": "teilen",
						"linkHref": "https://bsky.app/intent/compose",
						"linkTarget": "_blank"
					},
					{
						"itemClasses": "is-sh-linkedin",
						"itemJsClasses": "js-share-option-linkedin",
						"overlaydataContent": "",
						"linkTextBefore": "Auf",
						"linkText": "LinkedIn",
						"linkTextAfter": "teilen",
						"linkHref": "#",
						"linkTarget": "_blank"
					}
				]
			}
		}
	}
}

share-option.js

/**
 * Share component with share area for facebook, twitter and to copy the Website-URL.
 * The share area is triggered as soon as component is in viewport for the first time.
 * The share buttons have different behaviours.
 * The facebook and the twitter Share-button open the common share dialogs.
 * The Link-Button copy the Url and show a Tooltip with a short Informationen
 *
 * Class properties and decorators are supported.
 *
 * @module ShareOption
 * @version v1.0.0
 *
 * @author Ralf Arnert
 */

// Imports
import $ from 'jquery';
import Component from '@veams/component';

class ShareOption extends Component {
	/**
	 * Class Properties
	 */
	$el = $(this.el);
	$shAreaWrapper = $(this.options.selectors.shAreaWrapper, this.el);
	$jsShareOptionCopy = $(this.options.selectors.jsShareOptionCopy, this.el);
	$jsShareOptionFacebook = $(this.options.selectors.jsShareOptionFacebook, this.el);

	/**
	 * Constructor for our class
	 *
	 * @see module.js
	 *
	 * @param {Object} obj - Object which is passed to our class
	 * @param {Object} obj.el - element which will be saved in this.el
	 * @param {Object} obj.options - options which will be passed in as JSON object
	 */
	constructor(obj) {
		let options = {
			classes: {
				visible: 'is-visible'
			},
			selectors: {
				shAreaWrapper: '[data-js-item="sh-area-wrapper"]',
				jsShareOptionCopy: '[data-js-item="js-share-option-copy"]',
				jsShareOptionFacebook: '[data-js-item="js-share-option-facebook"]',
				jsShareOptionTwitter: '[data-js-item="js-share-option-twitter"]',
				jsShareOptionBluesky: '[data-js-item="js-share-option-bluesky"]',
				jsShareOptionLinkedIn: '[data-js-item="js-share-option-linkedin"]',
				jsShareOptionCopyOverlay: '[data-js-item="js-share-option-copy-overlay"]'
			},
			overlayObj: {
				data: {
					caption: {
						captionHeadline: 'Link wurde kopiert',
						captionContent: 'Sie koennen ihn nun an beliebiger Stelle einfuegen'
					}
				}
			}
		};

		super(obj, options);
	}

	/**
	 * Event & subscribe handling
	 */

	// Local Handlers
	get events() {
		return {
			'{{context.EVENTS.click}} {{this.options.selectors.jsShareOptionCopy}}':
				'shareOptionCopyClick',
			'{{context.EVENTS.click}} {{this.options.selectors.jsShareOptionFacebook}}':
				'shareOptionFacebookClick',
			'{{context.EVENTS.click}} {{this.options.selectors.jsShareOptionTwitter}}':
				'shareOptionTwitterClick',
			'{{context.EVENTS.click}} {{this.options.selectors.jsShareOptionBluesky}}':
				'shareOptionBlueskyClick',
			'{{context.EVENTS.click}} {{this.options.selectors.jsShareOptionLinkedIn}}':
					'shareOptionLinkedInClick'
		};
	}

	get subscribe() {
		return {
			'{{context.EVENTS.pagescrollThrottled}}': 'onPageScroll'
		};
	}

	/**
	 * Render class
	 */
	render() {
		return this;
	}

	/** =================================================
	 * CUSTOM METHODS
	 * ================================================= */

	/**
	 * Adjust height position of controller
	 *
	 * @return {string}
	 *
	 */
	getScrollPositionY() {
		let scroll_Y = 0;

		if (typeof window.pageYOffset == 'number') {
			// Netscape
			scroll_Y = window.pageYOffset;
		} else if (document.body && document.body.scrollTop) {
			// DOM
			scroll_Y = document.body.scrollTop;
		}

		return scroll_Y;
	}

	/**
	 * Set a class to an html-Element to make the Share area visible depending on viewport-size and scrolling position
	 *
	 * @param {Object} [e] - Event object
	 */
	onPageScroll(e) {
		let shAreaWrapperPos = this.$shAreaWrapper.css('position');
		let heightViewport = window.innerHeight;
		let pos_Y_ShowShareOptions = heightViewport / 4;

		if (shAreaWrapperPos === 'fixed') {
			let shAreaWrapperPosTop = this.$shAreaWrapper.offset().top;
			let shAreaWrapperHeight = this.$shAreaWrapper.outerHeight();
			let shAreaWrapperBottom = shAreaWrapperPosTop + shAreaWrapperHeight;
			let footerElement = document.getElementById('footer');
			footerElement.style.zIndex = ' 999999';
			let footerPositionTop = footerElement.getBoundingClientRect().top;
			if (footerPositionTop - shAreaWrapperBottom - 120 < 0) {
				if (this.$shAreaWrapper.hasClass(this.options.classes.visible)) {
					this.$shAreaWrapper.removeClass(this.options.classes.visible);
				}
			} else {
				if (!this.$shAreaWrapper.hasClass(this.options.classes.visible)) {
					this.$shAreaWrapper.addClass(this.options.classes.visible);
				}
			}
		} else {
			let scrollpos_Y = this.getScrollPositionY();

			if (
				pos_Y_ShowShareOptions - scrollpos_Y < 0 &&
				!this.$shAreaWrapper.hasClass(this.options.classes.visible)
			) {
				this.$shAreaWrapper.addClass(this.options.classes.visible);
			}
		}
	}

	/**
	 * Copy the URL to the clipboard
	 *
	 * @param {Object} [e] - Event object
	 */
	shareOptionCopyClick(e) {
		e.preventDefault();
		// The Solution for copy the url
		let url = window.location.href;
		let target = document.createElement('textarea');
		let currentFocus = document.activeElement;
		let shareOverlayElements = document.getElementsByClassName('is-sh-copy');

		if (shareOverlayElements !== undefined && shareOverlayElements.length > 0) {
			target.id = 'share-option__tocopy';
			target.textContent = `${url}`;
			shareOverlayElements[0].appendChild(target);
			target.focus();
			target.setSelectionRange(0, target.value.length);

			// copy the url
			let succeed;

			try {
				succeed = document.execCommand('copy');
			} catch (e) {
				succeed = false;
			}

			if (currentFocus && typeof currentFocus.focus === 'function') {
				currentFocus.focus();
			}

			shareOverlayElements[0].removeChild(target);

			if (succeed !== false && shareOverlayElements[0].dataset.content !== undefined) {
				let str_overlay = shareOverlayElements[0].dataset.content;
				let shareOptionOverlay = JSON.parse(str_overlay);
				this.options.overlayObj.data = shareOptionOverlay;
				Veams.Vent.publish(Veams.EVENTS.overlay.open, this.options.overlayObj);

				setTimeout(() => {
					let shareOverlayElClose = document.getElementsByClassName('overlay__close');
					if (shareOverlayElClose !== undefined && shareOverlayElClose.length > 0) {
						shareOverlayElClose[0].click();

						if (currentFocus && typeof currentFocus.focus === 'function') {
							currentFocus.focus();
						}
					}
				}, 1500);
			}
		}

		return false;
	}

	/**
	 * Open the Facebook share-Window with Open Graph Infos
	 *
	 * =================================================
	 * ATTENTION!:
	 * to get a correct working of the Facebook share button it is important to integrate Open Graph-Meta-Tags in the Head of the Website
	 * The Open Graph of the URL <meta property="og:url" must be the same URL as window.location.href
	 * Open Meta Tags see https://developers.facebook.com/docs/sharing/best-practices
	 * <meta property="og:url" content="[location.href]" />
	 * <meta property="og:type" content="article" />
	 * <meta property="og:title" content="[Titel of the article]" />
	 * <meta property="og:description" content="[Description of the article]" />
	 * <meta property="og:image" content="[Absolute Path to the Image of the article]" />
	 * =================================================
	 *
	 * @param {Object} [e] - Event object
	 */
	shareOptionFacebookClick(e) {
		e.preventDefault();

		let url = window.location.href;
		window.open(
			`https://www.facebook.com/sharer/sharer.php?u=${url}`,
			'sharer',
			'width=626,height=436'
		);

		return false;
	}

	/**
	 * Open the Twitter share Window with Parameter Text and URL
	 * Use the og-Tag title or the H1-Element of the Detailcontent for the Text or if there is no H1 take the Title of the Website, Hashtag #LMU_Muenchen
	 *
	 * @param {Object} [e] - Event object
	 */
	shareOptionTwitterClick(e) {
		e.preventDefault();

		let text = '';
		let url = window.location.href;
		let headlineExist = false;

		var metaElements = document.getElementsByTagName('meta');
		for (var i=0; i<metaElements.length; i++) {
			var e = metaElements[i];
			if (e.hasAttribute("property") && e.getAttribute("property") == "og:title" && e.hasAttribute("content")) {
					text = e.getAttribute("content");
					if (text !== '') {
						headlineExist = true;
					}
			}
		}

		if (!headlineExist) {
			let sOAreaElement = document.getElementsByClassName('c-share-option--default');
			if (sOAreaElement !== undefined && sOAreaElement.length > 0) {
				let headlineElements = sOAreaElement[0].parentNode.getElementsByTagName('h1');
				if (headlineElements !== undefined && headlineElements.length > 0) {
					text = headlineElements[0].innerHTML;
					if (text !== '') {
						headlineExist = true;
					}
				}
			}
		}
		if (!headlineExist) {
			text = document.title;
		}

		text = text.replace("|", "/");
		text = text.replace("%", "o/o");

		window.open(
			`https://twitter.com/intent/tweet?text=${text}&url=${url}&hashtags=lmumünchen,universityofmunich`,
			'twitter',
			'width=626,height=436'
		);

		return false;
	}


	/**
	 * Open the Bluesky share Window with Parameter Text and URL
	 * Use the og-Tag title or the H1-Element of the Detailcontent for the Text or if there is no H1 take the Title of the Website, Hashtag #LMU_Muenchen
	 *
	 * @param {Object} [e] - Event object
	 */
	shareOptionBlueskyClick(e) {
		e.preventDefault();

		let text = '';
		let url = window.location.href;
		let encodedUrl;
		let shareText = '';
		let shareTextFix = '';
		let headlineExist = false;

		var metaElements = document.getElementsByTagName('meta');
		for (var i=0; i<metaElements.length; i++) {
			var e = metaElements[i];
			if (e.hasAttribute("property") && e.getAttribute("property") == "og:title" && e.hasAttribute("content")) {
					text = e.getAttribute("content");
					if (text !== '') {
						headlineExist = true;
					}
			}
		}

		if (!headlineExist) {
			let sOAreaElement = document.getElementsByClassName('c-share-option--default');
			if (sOAreaElement !== undefined && sOAreaElement.length > 0) {
				let headlineElements = sOAreaElement[0].parentNode.getElementsByTagName('h1');
				if (headlineElements !== undefined && headlineElements.length > 0) {
					text = headlineElements[0].innerHTML;
					if (text !== '') {
						headlineExist = true;
					}
				}
			}
		}
		if (!headlineExist) {
			text = document.title;
		}


		encodedUrl = encodeURIComponent(url);
    	shareText = encodeURIComponent(text);

		if (shareText.length <= 299) {
			shareTextFix = shareText;
		} else {
			shareText = text.substring(0, 250) + '...';
			shareTextFix =  encodeURIComponent(shareText);
		}

		window.open(
			`https://bsky.app/intent/compose?text=${shareTextFix} + ${encodedUrl}`,
			'bluesky',
			'width=626,height=436'
		);

		return false;
	}


	/**
	 * Open the LinkedIn share Window with Parameter Text and URL
	 *
	 * @param {Object} [e] - Event object
	 */
	shareOptionLinkedInClick(e) {
		e.preventDefault();

		let url = window.location.href;
		window.open(
			`https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
			'sharerlinkedin',
			'width=626,height=436'
		);

		return false;
	}
}

export default ShareOption;