share-popup.js

/* ========================================================================
 * Share
 * ========================================================================
 * Copyright 2017 Arkanister.
 * ======================================================================== */


/**
 * <a href="https://github.com/arkanister/" title="Arkanister Profile" data-share="facebook">Share on Facebook</a>
 * <a href="https://github.com/arkanister/" title="Arkanister Profile" data-share="twitter">Twitter</a>
 * <a href="https://github.com/arkanister/" title="Arkanister Profile" data-share="google-plus">Share on Google Plus</a>
 * <a href="https://github.com/arkanister/" title="Arkanister Profile" data-share="linked-in">Share on Linked In</a>
 */

+function ($) {
    'use strict';

    // ## Facebook
    //
    // ##

    var Share = function (element, options) {
        var $element = $(element)
        var self = this

        self.options = $.extend(self.DEFAULTS, options)
        var share_url = self.getUrl(self.options.socialUrl, self.options.params)
        var share_popup_id = self.options.type + '-share-dialog'

        $element.on('click', function (e) {
            self.getPopup(
                share_url,
                share_popup_id,
                self.options.popupWidth,
                self.options.popupHeight)

            return false;
        });
    }

    Share.DEFAULTS = {
        type: 'social',
        popupWidth: 626,
        popupHeight: 436,
        socialUrl: null,
        params: null
    }

    Share.prototype.getUrl = function (url, params) { return url + '?' + $.param(params) }
    
    Share.prototype.getPopup = function(url, id, width, height) {
        var self = this
        var defaults = ',menubar=no,resizable=no,scrollbars=no,status=no,titlebar=no,toolbar=no'
        self.window = window.open(url, id, 'width=' + width + ',height=' + height + defaults)
    }

    var Plugin = function (option) {
        return this.each(function () {
            var $this   = $(this)
            var data    = $this.data('sb.share')
            var options = typeof option == 'object' && option

            if (!data) $this.data('sb.share', (data = new Share(this, options)))
            if (typeof option == 'string') data[option]()
        })
    }

    $.fn.share             = Plugin
    $.fn.share.Constructor = Share

    // SHARE DATA-API
    // ==============

    $(window).on('load', function () {

        // ## Facebook
        //
        // ##

        $('[data-share="facebook"]').each(function () {
            var share = $(this)
            var data = share.data()
            var shareUrl = share.attr('href') || data.url
            var title = share.attr('title') || data.title
            var options = {
                socialUrl: "https://www.facebook.com/sharer.php",
                popupWidth: 558,
                popupHeight: 436,
                params: {'u': shareUrl, 't': title}
            }

            Plugin.call(share, options)
        })

        // ## Twitter
        //
        // ##

        $('[data-share="twitter"]').each(function () {
            var share = $(this)
            var data = share.data()
            var shareUrl = share.attr('href') || data.url
            var title = share.attr('title') || data.title
            var text = data.text || title
            var options = {
                socialUrl: "https://twitter.com/intent/tweet",
                popupWidth: 478,
                popupHeight: 253,
                params: {
                    'url': shareUrl,
                    'text': text
                }
            }

            Plugin.call(share, options)
        })

        // ## Google Plus
        //
        // ##

        $('[data-share="google-plus"]').each(function () {
            var share = $(this)
            var data = share.data()
            var shareUrl = share.attr('href') || data.url
            var options = {
                socialUrl: "https://plus.google.com/share",
                popupWidth: 400,
                popupHeight: 436,
                params: {'url': shareUrl}
            }

            Plugin.call(share, options)
        })

        // ## Linked In
        //
        // ##

        $('[data-share="linked-in"]').each(function () {
            var share = $(this)
            var data = share.data()
            var shareUrl = share.attr('href') || data.url
            var summary = data.summary || ''
            var options = {
                socialUrl: "https://www.linkedin.com/shareArticle",
                popupWidth: 550,
                popupHeight: 533,
                params: {
                    'url': shareUrl,
                    'mini': true,
                    'summary': summary
                }
            }

            Plugin.call(share, options)
        })
    })

}(jQuery);