JSFiddle - React, Tailwind, and code Playground

by Nenad Novakovic

JavaScript

/*
 *  Project: jQuery echoBox for Socials
 *  Description: echoBox is light weight jQuery Plugin for Social Shares.
 *  Author: dvL-den
 *  License: Copyrights dvL-den. All rights reserved.
 */

;(function ($, window, document, undefined) {

	// Create the defaults once
	var pluginName = "echoSoc";
	var defaults = {
		text: "test sample",
		overlay_color: '#09f',
		overlay_opacity: '.6'
	};


	// The actual plugin constructor
	function EchoSoc(element, options) {
		this.element = element;

		this.options = $.extend({}, defaults, options);
		this._defaults = defaults;
		this._name = pluginName;
		this.init(); // Woah wtf ... returns loop.
	}

	EchoSoc.prototype = {
		
		init: function () {
			// Plugin HTML Structure
			$('body').append( //-->
				'<div class="echoSoc_wrap">'
			+		'<div class="echoSoc_frame">'
			+			'<div class="echoSoc_title" />'
			+			'<div class="echoSoc_description" />'
			+			'<div class="echoSoc_countdown" />'
			+		'</div>'
			+		'<div class="echoSoc_overlay" />'
			+	'</div>'
			// <--
			);

			// Plugin CSS Styling
			$('.echoSoc_wrap, .echoSoc_overlay').css({
				'width': '100%',
				'height': '100%',
				'position': 'absolute',
				'top': '0',
				'left': '0'
			});

			$('.echoSoc_wrap').css({ 'zIndex': '999999999' });

			$('.echoSoc_overlay').css({
				'background-color': this.options.overlay_color,
				'opacity': this.options.overlay_opacity,
				'zIndex': '777777'
			});

			$('.echoSoc_frame').css({
				'background': 'rgba(200, 200, 200, 1)',
				'width': '400',
				'height': '100',
				'position': 'relative',
				'zIndex': '888888'
			});


			this._echoCenter();

			$(window).on('resize', function() {
				console.log('how to run _echoCenter in here to resize $(".echoSoc_wrap")');
			});
		},
		_echoCenter: function () {
			var str_wrap 	= $('.echoSoc_wrap'),
				str_frame	= $('.echoSoc_frame');

			str_frame.css({
				top: Math.round( str_wrap.height() / 2 - str_frame.outerHeight() / 2 -...