@ithaka/bonsai/js/social/bonsai.socialbase.js

ITHAKA core styling

import uuidv4 from "uuid/v4";

import { BonsaiTooltip } from "../bonsai.tooltip";

import { updateUrlParameter } from "../utils/urls";

/** Base class that contains logic for social sharing buttons
 * @class
 * @name BonsaiSocialBase
 * @param {string} container - Selector for element that will contain button
 * @property {string} platformName - Name of the social media platform
 * @property {string} currentUrl - Current URL with getCurrentUrl() modifications
 * @property {string} shareUrl - What URL is to be used to share to the social media platform?
 * @property {string} buttonBackgroundColor - What color should the button background be?
 * @property {string} accessibleText - Text that will be read to screenreaders and in tooltips
 * @property {string} buttonDataAttribute - What is the data attribute that will represent this platforms button?
 * @property {string} iconClass - What icon will this button have?
 * @property {string} windowName - Optional, if opening in a new window, what title should that window have?
 * @property {string} windowWidth - Optional, if opening in a new window, what is the width?
 * @property {string} windowHeight - Optional, if opening in a new window, what is the height?
 * @property {boolean} inNewWindow - true|false [open in new window|don't open in new window] default is true
 * @property {uuid} uuid - Random UUID that will be added to events and URLs
 *
 * @example
 * class BonsaiNewSocialMediaPlatform extends BonsaiSocialBase {}
 * new BonsaiNewSocialMediaPlatform().addButton();
 */
class BonsaiSocialBase {
    constructor(container, uuid = uuidv4()) {
        this.container = container;
        this.uuid = uuid;
        this.platformName = "platform";

        this.shareUrl = "";

        this.buttonBackgroundColor = "";
        this.accessibleText = "";
        this.buttonDataAttribute = "";
        this.iconClass = "";

        this.windowName = "";
        this.windowWidth = 500;
        this.windowHeight = 300;

        this.inNewWindow = true;
    }

    /**
     * Returns the encoded URL of the current page that the javascript has been executed on.
     * - If running locally, hardcodes a URL for testing
     * - Adds tracking parameter to URL
     *
     * @public
     */
    getCurrentUrl() {
        let currentUrl = window.location.href;

        if (currentUrl.includes("localhost")) {
            currentUrl = "http://www.jstor.org/styleguide";
        }

        currentUrl = updateUrlParameter(currentUrl, "socuuid", this.uuid);
        currentUrl = updateUrlParameter(currentUrl, "socplat", this.platformName);

        return encodeURIComponent(currentUrl);
    }

    /**
     * Adds the button and registers onClick event for button
     *
     * @public
     */
    addButton() {
        let clickElementSelector;
        this._injectButton();

        if ($(this.container).is("ul")) {
            this._addStylesToListButton();
            clickElementSelector = $(this.container).find(`li[data-${this.platformName}]`);
        } else {
            this._initializeButtonWithTooltip();
            clickElementSelector = `button[${this.buttonDataAttribute}]`;
        }

        this._registerOnClick(clickElementSelector);
    }

    /**
     * Binds events to an existing element without adding a button
     *
     * @public
     */
    bind() {
        this._registerOnClick($(this.container));
    }

    /**
     * Adds the button and registers onClick event for button
     *
     * @public
     */
    _addStylesToListButton() {
        let buttonWrapper = `<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item" data-${this.platformName}></li>`,
            $buttonElement = $(this.container).find(`button[${this.buttonDataAttribute}]`);

        $buttonElement.wrap(buttonWrapper).after(`<span class="primary-color">${this.descriptionName}</span>`);
    }

    /**
     * Inject button HTML
     *
     * @private
     */
    _injectButton() {
        $(this.container).append(this._makeButtonHtml());
    }

    /**
     * Initialize button with tooltip
     *
     * @private
     */
    _initializeButtonWithTooltip() {
        new BonsaiTooltip($(`[${this.buttonDataAttribute}]`));
    }

    /**
     * Start onclick event for button
     *
     * @private
     * @param clickElementSelector - the element selector to register click event on
     */
    _registerOnClick(clickElementSelector) {
        $(clickElementSelector).on("click", (event) => {
            event.preventDefault();

            $(this.container).trigger("bonsai-social-click", [
                this.buttonDataAttribute,
                this.getCurrentUrl(),
                this.uuid
            ]);

            if (this.inNewWindow) {
                window.open(this.shareUrl, this.windowName, `width=${this.windowWidth},height=${this.windowHeight}`);
            }
            else {
                window.location = this.shareUrl;
            }
        });
    }

    /**
     * Create the HTML for the button
     *
     * @private
     */
    _makeButtonHtml() {
        return `
            <button
                class="button ${this.buttonBackgroundColor} has-tip"
                aria-label="${this.accessibleText}"
                title="${this.accessibleText}"
                data-tooltip
                ${this.buttonDataAttribute}
            >
                <i class="${this.iconClass}"></i>
            </button>`;
    }
}

export { BonsaiSocialBase };