codemirror

Change class name on click in jQuery

by abuhamzah

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<script src="https://codepen.io/Souleste/pen/RXebxO.cs"></script>
<script src="https://codepen.io/Souleste/pen/BaBRwaY.cs"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/mode/javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.0/mode/xml/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.2/beautify.js"></script>
<script src="https://codepen.io/Souleste/pen/BaBRwaY.js"></script>
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodeMirror Copy to Clipboard</title>
  

</head>
<body>
<!-- partial:index.partial.html -->
<div class="content">
	<div class="type">JS</div>
	<!-- button to copy the editor -->
	<div class="copy-code-wrap cooltool" data-tooltip-dir="left" data-content-before="copy code" data-content-after="copied!"  data-keep-after="true">
		<div class="copy-code"></div>
	</div>
	
	<!-- add contenteditable div as it respects new lines when copying unlike textarea -->
	<div class="copy-this" contenteditable style="display: none"></div>
	<textarea class="editor" style="display: none;">
		foundName = false
		found = false
			unless result.first.nil ?
				for r in result.fields
					if r.name
						if r.name.downcase.eql('volunteer_organization_status__c')
							for r2 in r.picklistValues
								if r2.label.downcase.eql ? ('pending approval')
									found = true
									if r2.defaultValue ==...

JavaScript

// add this to your javascript files in codepen 

	// when dynamically creating something with a tool-tip, just call this function: 
	function setCoolTool() {
		var cooltool = $('.cooltool');
	
		cooltool.each(function() {
			var el = $(this);
			if(!el.find('.tooltip').length > 0) {
				el.append('<span class="tooltip" data-tooltip="'+el.attr('data-tooltip-dir')+'"><span class="before-content">'+el.attr('data-content-before').replace(/\/n/g, "<br>")+'</span><span class="after-content">'+el.attr('data-content-after')+'</span></span>');
			}
		});

		$(document).on('click', '.cooltool', function() {
			var el = $(this);
			var tool = $(this).find('.tooltip');
			var b = el.find('.before-content');
			var a = el.find('.after-content');
			if (el.attr('data-content-after') != undefined) {
				if (el.attr('data-keep-after') == 'true' || el.attr('data-keep-after') == '') {
					a.addClass('showTip');
					b.addClass('hideTip');
				} else {
					function changeContent() {
						b.addClass('hideTip').delay(1200).queue(function(next){
							b.removeClass('hideTip');
							next();
						});
						a.addClass('showTip').delay(1200).queue(function(next){
							a.removeClass('showTip');
							next();
						});
					} changeContent();
				}
			}
		});

		$(document).on('mouseleave', '.cooltool', function() {
			console.log('touchend');
			var el = $(this);
			var b = el.find('.before-content');
			var a = el.find('.after-content');
			function revertChange() {
				a.delay(300).queue(function(next){
					a.addClass('hideTip').removeClass('showTip');
					a.removeClass('hideTip');
					next();
				});
				b.delay(300).queue(function(next){
					b.addClass('showTip').removeClass('hideTip');
					b.removeClass('showTip');
					next();
				});
			} revertChange();
		});
		
	} setCoolTool();
	
	
// 	$(document).on('touchend', '.cooltool', function() {
// 		var el = $(this);
// 		var b = el.find('.before-content');
// 		var a = el.find('.after-content');
// 		var tool =...