Last active
November 9, 2023 10:02
-
-
Save ManuFerrer094/c3834fb0fef355257e8c414cb538ac4a to your computer and use it in GitHub Desktop.
WP Function to make a Json Formatter Web Based Tool
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function load_json_formatter_scripts() { | |
wp_enqueue_script('jquery'); | |
wp_enqueue_script('json-formatter', get_template_directory_uri() . '/json-formatter.js', array('jquery'), '1.0', true); | |
wp_enqueue_script('jsonlint', 'https://cdnjs.cloudflare.com/ajax/libs/jsonlint/1.6.0/jsonlint.min.js', array('jquery'), '1.6.0', true); | |
} | |
add_action('wp_enqueue_scripts', 'load_json_formatter_scripts'); | |
function json_formatter_shortcode() { | |
ob_start(); | |
?> | |
<style> | |
.container { | |
width: 80%; | |
margin: 0 auto; | |
font-family: Arial, sans-serif; | |
font-size: 16px; | |
color: #333; | |
} | |
.step h4 { | |
margin-bottom: 10px; | |
font-size: 1.2rem; | |
color: #007bff; | |
} | |
.first-step { | |
display: grid; | |
grid-template-columns: 90% 20%; | |
grid-template-rows: auto auto; | |
gap: 10px; | |
margin-bottom: 20px; | |
} | |
.json-textarea { | |
grid-column: span 2; | |
width: 100%; | |
height: 370px; | |
padding: 10px; | |
box-sizing: border-box; | |
margin-bottom: 10px; | |
font-family: 'Courier New', monospace; | |
font-size: 14px; | |
background-color: #f5f5f5; | |
border: 1px solid #ccc; | |
border-radius: 5px; | |
} | |
.select-container select { | |
width: 100%; | |
padding: 10px; | |
box-sizing: border-box; | |
font-family: Arial, sans-serif; | |
font-size: 16px; | |
border: 1px solid #ccc; | |
border-radius: 5px; | |
background-color: #ffffff; | |
} | |
.button-panel { | |
grid-column: span 2; | |
background-color: #007bff; | |
border: none; | |
color: white; | |
padding: 10px 20px; | |
text-align: center; | |
text-decoration: none; | |
font-size: 14px; | |
cursor: pointer; | |
border-radius: 5px; | |
margin-top: 10px; | |
width: 100%; | |
transition: background-color 0.3s ease; | |
} | |
.button-panel:hover { | |
background-color: #0056b3; | |
} | |
h5 { | |
padding: 0; | |
font-size: 0.90rem; | |
color: #555; | |
} | |
/* Media Query for Tablets and Smaller Screens */ | |
@media screen and (max-width: 768px) { | |
.first-step { | |
grid-template-columns: 100%; | |
} | |
.json-textarea { | |
height: 150px; | |
} | |
} | |
/* Media Query for Phones and Smaller Screens */ | |
@media screen and (max-width: 480px) { | |
.json-textarea { | |
height: 100px; | |
} | |
} | |
</style> | |
<section class="json-formatter-section"> | |
<div id="json-formatter" class="container"> | |
<div class="step"> | |
<h4>Drag and drop your JSON here or write your code.</h4> | |
</div> | |
<div class="first-step"> | |
<div class="textarea-container"> | |
<textarea id="json-input" placeholder="Drag and drop your JSON file here or write your code" class="json-textarea" ondrop="handleDrop(event)" ondragover="handleDragOver(event)"></textarea> | |
</div> | |
<div class="process-button-container"> | |
<div class="select-container-1"> | |
<h5>Formatting Style</h5> | |
<select id="format-select" class="button-panel"> | |
<option value="0">Compact</option> | |
<option value="1">1 Space Tab</option> | |
<option value="2">2 Space Tab</option> | |
<option value="3">3 Space Tab</option> | |
<option value="4">4 Space Tab</option> | |
</select> | |
</div> | |
<div class="select-container-2"> | |
<h5>Validation Type</h5> | |
<select id="validation-type" class="button-panel"> | |
<option value="ecma-404">ECMA-404</option> | |
<option value="rfc-8259">RFC-8259</option> | |
<option value="rfc-7159">RFC-7159</option> | |
<option value="rfc-4627">RFC-4627</option> | |
<option value="skip-validation">Skip Validation</option> | |
</select> | |
</div> | |
<div class="select-container-3"> | |
<h5>Press Process Button</h5> | |
<button class="button-panel" id="format-button">Process JSON</button> | |
</div> | |
</div> | |
</div> | |
<div class="step"> | |
<h4>The Processed JSON Result.</h4> | |
</div> | |
<div class="first-step"> | |
<div class="textarea-container"> | |
<textarea id="formatted-json" class="json-textarea"></textarea> | |
</div> | |
<div class="process-button-container"> | |
<div class="select-container-1"> | |
<h5>Download result</h5> | |
<button class="button-panel" id="download-button">Download</button> | |
</div> | |
<div class="select-container-3"> | |
<h5>Copy result</h5> | |
<button class="button-panel" id="copy-button">Copy to Clipboard</button> | |
</div> | |
<div class="select-container-2"> | |
<h5>Clear result</h5> | |
<button class="button-panel" id="clear-button">Clear</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<script> | |
jQuery(document).ready(function($) { | |
$('#json-input').on('dragover', function(event) { | |
event.preventDefault(); | |
$(this).addClass('drag-over'); | |
}); | |
$('#json-input').on('dragleave', function(event) { | |
event.preventDefault(); | |
$(this).removeClass('drag-over'); | |
}); | |
$('#json-input').on('drop', function(event) { | |
event.preventDefault(); | |
$(this).removeClass('drag-over'); | |
var files = event.originalEvent.dataTransfer.files; | |
if (files.length > 0) { | |
var reader = new FileReader(); | |
reader.onload = function(e) { | |
$('#json-input').val(e.target.result); | |
}; | |
reader.readAsText(files[0]); | |
} | |
}); | |
$('#format-button').on('click', function() { | |
try { | |
var jsonString = $('#json-input').val(); | |
var selectedFormat = $('#format-select').val(); | |
var validationType = $('#validation-type').val(); | |
console.log('JSON recibido:', jsonString); | |
var jsonObject; | |
// Validar el JSON según el tipo de validación seleccionado | |
if (validationType === 'ecma-404' || validationType === 'rfc-8259' || validationType === 'rfc-7159' || validationType === 'rfc-4627') { | |
jsonlint.parse(jsonString); | |
jsonObject = JSON.parse(jsonString); | |
} else if (validationType === 'skip-validation') { | |
// No se aplica validación | |
jsonObject = JSON.parse(jsonString); | |
} else { | |
throw new Error('Tipo de validación no reconocido'); | |
} | |
var formattedJson = JSON.stringify(jsonObject, null, parseInt(selectedFormat)); | |
$('#formatted-json').val(formattedJson); | |
} catch (error) { | |
$('#formatted-json').val(error.message); | |
} | |
}); | |
$('#download-button').on('click', function() { | |
var content = $('#formatted-json').val(); | |
if (content) { | |
var blob = new Blob([content], { type: 'application/json' }); | |
var url = URL.createObjectURL(blob); | |
var a = document.createElement('a'); | |
a.href = url; | |
a.download = 'formatted-file.json'; | |
document.body.appendChild(a); | |
a.click(); | |
window.URL.revokeObjectURL(url); | |
} else { | |
alert('No hay contenido para descargar.'); | |
} | |
}); | |
$('#clear-button').on('click', function() { | |
$('#json-input').val(''); | |
$('#formatted-json').val(''); | |
}); | |
$('#copy-button').on('click', function() { | |
$('#formatted-json').select(); | |
document.execCommand('copy'); | |
alert('JSON copiado al portapapeles.'); | |
}); | |
}); | |
</script> | |
<?php | |
return ob_get_clean(); | |
} | |
add_shortcode('jsonformatter', 'json_formatter_shortcode'); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Este Gist contiene un código PHP para crear un shortcode de WordPress que proporciona una interfaz de usuario para formatear y validar JSON. Su uso es simplemente colocar el shortcode [jsonformatter] en cualquier parte del contenido de WordPress. Simplemente copia y pega este codigo en tu archivo functions.php