JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
  
<script type="text/javascript" src="//rawgit.com/que-etc/resize-observer-polyfill/master/dist/ResizeObserver.global.min.js"></script>

<script type="text/javascript" src="//rawgit.com/megawac/MutationObserver.js/master/dist/mutationobserver.min.js"></script>

<script type="text/javascript" src="//cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/qtip2/3.0.3/jquery.qtip.min.css">

<h2>Research Links</h2>
<a href="https://developers.google.com/web/updates/2016/10/resizeobserver">ResizeObserver</a> <br>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver">MutationObserver</a> |
<a href="http://ryanmorr.com/using-mutation-observers-to-watch-for-element-availability/">MutationObserver</a>

<h2> Usage:</h2>
<pre>
    normal :
    data-track-page="{'page''page three'}"

    inline templates:
    data-track-page="{\'page\':\'page three\'}"
</pre>

<hr>

<a href="#" id='click' data-track="" data-track-click="{'click':'page 1'}">..page1..</a>
<a href="#" id='clicke' data-track="" data-track-click="{'click':'page 2'}">..page2..</a>

<hr>
<a href="" class="selector">qtip tooltip</a>

<div class="hidden" id="dom">
    <div>
        <div data-track="" data-track-page="{'page':'page 1'}">page 1</div>
    </div>
</div>
<div class="hidden" id="dome">
    <div>
        <div data-track="" data-track-page="{'page':'page 2', 'appel': 'peer'}">page 2</div>

    </div>
</div>
<div  data-track="" data-track-page="{'page':'page 3', 'appel': 'ei'}">always visible page 3</div>
	
<h3>add new elements to the dom</h3>
<button id="addToDom">add To Dom</button>
<input type="text" id="addToDomValue" value="">
<div id="addToDomContainer"></div>

<hr>
<a href="#" id='clicked'>..domLogging..</a>
<pre id="domLogging"></pre>

CSS

body{
  background:#fff;
}
.active{
    color:red;
}

.hidden{
    display:none;
}

pre {
    white-space: pre-wrap;                 /* CSS3 browsers  */
    white-space: -moz-pre-wrap !important; /* 1999+ Mozilla  */
    white-space: -pre-wrap;                /* Opera 4 thru 6 */
    white-space: -o-pre-wrap;              /* Opera 7 and up */
    word-wrap: break-word;                 /* IE 5.5+ and up */
    /* overflow-x: auto; */                /* Firefox 2 only */
    /* width: 99%; */		       /* only if needed */
}

#domLogging{
    height: 100px;
    overflow: scroll;
    display: block;
    border: 1px solid rgba(0,0,0,0.15);
    width: 100%;
    -webkit-box-shadow: 0px 20px 48px -20px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 20px 48px -20px rgba(0,0,0,0.15);
    box-shadow: 0px 20px 48px -20px rgba(0,0,0,0.15);
    overflow-y: scroll !important;
}

JavaScript

/******************************************************************************/
(function () {
	$('#addToDom').on('click', function (e) {
		e.preventDefault();
		var addToDomValue = $('#addToDomValue').val();
		$('#addToDomContainer').append('<div  data-track="" data-track-page="{page:\' page' + addToDomValue + '\'}">' + addToDomValue + ' <button class="remove" data-track="" data-track-click="{click:\' page' + addToDomValue + '\'}">x</button></div>')
	});

	$(document).on('click', '.remove', function (e) {
		e.preventDefault();
		$(this).parent().remove();
	});

	$('#click').on('click', function (e) {
		e.preventDefault();
		if ($(this).hasClass('active')) {
			$(this).removeClass('active');
		} else {
			$(this).addClass('active');
		}

		var dom = $('#dom');
		if (dom.hasClass('hidden')) {
			dom.removeClass('hidden');
		} else {
			dom.addClass('hidden');
		}
	});

	$('#clicke').on('click', function (e) {
		e.preventDefault();
		var clicke = $(this);
		if (clicke.hasClass('active')) {
			clicke.removeClass('active');
		} else {
			clicke.addClass('active');
		}

		var dome = $('#dome');
		if (dome.hasClass('hidden')) {
			dome.removeClass('hidden');
		} else {
			dome.addClass('hidden');
		}
	});


	$('#clicked').on('click', function (e) {
		e.preventDefault();
		var addToDomContainer = $('#addToDomContainer');
		if (addToDomContainer.hasClass('hidden')) {
			addToDomContainer.removeClass('hidden');
		} else {
			addToDomContainer.addClass('hidden');
		}
	});
	
	$('.selector').qtip({
		id: 'myTooltip',
		content: {
			text: '<span style="display:inline-block;" data-track="" data-track-page="{\'tooltip\':\'tooltip 1\'}">My ID is #qtip-myTooltip</span>'
		}
	});

	
})();


/******************************************************************************/

/******************************************************************************/

/******************************************************************************/


var tmsTrackPage = (function () {
	var logging...