jdm_javascript_dom_manipulator
Version:
framework javascript
129 lines (118 loc) • 4.24 kB
HTML
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jdm</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
pre {
margin: 0;
}
.box {
margin-top: 1rem;
border: 1px solid #cccccc;
}
.code {
background-color: #333333;
color: white;
}
.text-orange {
color: darkorange;
}
.text-yellow {
color: yellow;
}
.text-green {
color: greenyellow;
}
.text-cyan {
color: deepskyblue;
}
</style>
</head>
<body>
<jdm-element></jdm-element>
<script src="../dist/jdm.js"></script>
<script>
const element = document.querySelector("jdm-element");
console.log(element);
fetch('../README.md') // Percorso relativo al file
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text(); // Leggi il contenuto del file come testo
})
.then(data => {
// console.log('Contenuto del file README.md:', data);
processMarkdown(data); // Processa il contenuto del file
})
.catch(error => {
console.error('Errore durante il caricamento del file:', error);
});
function processMarkdown(content) {
// Qui puoi elaborare il contenuto del file .md
// console.log(content);
}
const dom = JDM(
//language=html
`<div class="container my-4">
<div class="row">
<div class="col d-flex align-items-center mb-3">
<h2 class="">JDM</h2>
</div>
<hr>
</div>
<div data-name="container"></div>
</div>`, document.body).jdm_extendChildNode();
const genExample = (title, code)=> {
//language=html
const domString = `
<div class="box row overflow-hidden rounded">
<div class="col-12 p-0">
<div class="title bg-primary p-2 text-white">
<h5 class="m-0">${title}</h5>
</div>
<div class="body p-3">
<div class="code rounded p-3 mb-3">
<pre data-name="code">${code}</pre>
</div>
<button class="btn btn-secondary" data-name="execute">Execute</button>
<div data-name="resultContainer"></div>
</div>
</div>
</div>
`;
return JDM(domString, dom.container).jdm_extendChildNode();
}
function highlightKeywords(escaped ) {
escaped = escaped.replace(/[&<>"']/g, (char) => ({
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": ''',
})[char]);
escaped = escaped.replace(/\b(const|let)\b/g, '<span class="text-orange">$1</span>');
escaped = escaped.replace(/\b(JDM)\b/g, '<span class="text-yellow">$1</span>');
escaped = escaped.replace(/('|")(?:\\.|[^\\])*?\1/g, '<span class="text-green">$&</span>');
escaped = escaped.replace(/(<span class="text-green">.*?<\/span>)|(\b\d+(\.\d+)?\b)/g, (match, span, number) => {
if (span) return span;
if (number) return `<span class="text-cyan">${number}</span>`;
return match;
});
return escaped;
}
const code = `const div = JDM('<div>lorem & ipsum</div>', document.body)
.jdm_setAttribute('id', 'myDiv')
.jdm_setAttribute('data-test', 'foo')
.jdm_setAttribute('counter', 1)`;
const example = genExample('jdm_setAttribute', highlightKeywords(code));
example.execute.jdm_onClick(()=>{
const container = JDM( `<div class="result border rounded mt-3 p-3"> Result</div>`, example.resultContainer);
eval(example.code.innerText)
});
</script>
</body>
</html>