entrouvert
/
godo.js
16
1
Fork 0
Code Issues Pull Requests 2 Releases Wiki Activity

misc: improve demo page (#87286)
gitea/godo.js/pipeline/head This commit looks good Details

This commit is contained in:
Thomas Jund 2024-02-21 16:16:44 +01:00 committed by Thomas Jund
parent b0cb872c53
commit 5179282b9f
1 changed files with 90 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
dist/index.html vendored
View File

@ -22,6 +22,23 @@
max-width: 60em;
margin: 0 auto;
}
.grid-2cols textarea {
display: block;
width: 100%;
min-height: 30em;
}
@media (min-width: 960px) {
.grid-2cols {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
}
.grid-2cols textarea {
min-height: 40em;
}
}
</style>
</head>
@ -38,42 +55,77 @@
<main role="main">
<h2>Basic Godo</h2>
<p>Juste p, strong & em</p>
<p>Just p, strong, em & a</p>
<form>
<textarea class="textarea-for-godo" id="basic-godo-source" hidden>
<h1>TItre de mon commentaire</h1>
<ul class="fucking class">
<li>Item de liste 1</li>
<li>Item de liste 2</li>
</ul>
<h1>Titre <em><b>dans</b></em> l'éditeur</h1>
<p>
paragraphe dans l'éditeur. <br>
Ligne suivante. <a href="http://sacripant.fr" class="pk-button">My website</a>
</p>
<div class="grid-2cols">
<div>
<h3>Textarea</h3>
<textarea class="textarea-for-godo" id="basic-godo-source">
<h1>Quamquam haec quidem <strong>praeposita</strong></h1>
<h3 class="intertitre">Intertitre</h3>
</textarea>
<godo-editor schema="basic" linked-source="basic-godo-source"></godo-editor>
<button type="submit">send</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haeret in salebra. <a href='http://loripsum.net/' target='_blank'>Sed tamen intellego quid velit</a>.</p>
<p>Qualem igitur <strong>hominem natura</strong> inchoavit ? Duo Reges: constructio interrete. Summum a vobis bonum voluptas dicitur. Huius, Lyco, oratione locuples, rebus ipsis ielunior. Cui Tubuli nomen odio non est? Ea possunt paria non esse. Aliter autem vobis placet. </p>
<h2>Recte et <em>reiecta dicere</em> licebit</h2>
<ul>
<li>Haec mihi <em>videtur delicatior</em>, ut ita dicam, molliorque ratio, quam virtutis vis gravitasque postulat.</li>
<li>Mihi quidem Antiochum, quem audis, satis belle videris attendere.</li>
<li>Nam illud quidem adduci vix possum, ut ea, quae senserit ille, tibi non vera videantur.</li>
<li>Sed id ne cogitari quidem potest quale sit, ut non repugnet ipsum sibi.</li>
<li>Cum autem in quo sapienter dicimus, id a primo rectissime dicitur.</li>
</ul>
</textarea>
<button type="button" class="change-btn" data-target="basic-godo-source" data-event="wcs:change">textarea has changed</button>
</div>
<div>
<h3>Editor</h3>
<godo-editor
schema="basic"
linked-source="basic-godo-source"
instant-update
update-event="wcs:change"
></godo-editor>
</div>
</div>
</form>
<h2>Full Godo</h2>
<p>p, h1 -&gt; h3, strong, em, ul</p>
<p>p, h1 -&gt; h2, strong, em, a, ul</p>
<form action="">
<textarea class="textarea-for-godo-2" data-godo-schema="full" id="full-godo-source" hidden>
<h1>titre</h1>
<h2>Sous-titre</h2>
<p>Paragraphe.</p>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</textarea>
<godo-editor linked-source="full-godo-source"></godo-editor>
<div class="grid-2cols">
<div>
<h3>Textarea</h3>
<textarea class="textarea-for-godo-2" id="full-godo-source">
<h1>Quamquam haec quidem <strong>praeposita</strong></h1>
<button type="submit">send</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haeret in salebra. <a href='http://loripsum.net/' target='_blank'>Sed tamen intellego quid velit</a>.</p>
<p>Qualem igitur <strong>hominem natura</strong> inchoavit ? Duo Reges: constructio interrete. Summum a vobis bonum voluptas dicitur. Huius, Lyco, oratione locuples, rebus ipsis ielunior. Cui Tubuli nomen odio non est? Ea possunt paria non esse. Aliter autem vobis placet. </p>
<h2>Recte et <em>reiecta dicere</em> licebit</h2>
<ul>
<li>Haec mihi <em>videtur delicatior</em>, ut ita dicam, molliorque ratio, quam virtutis vis gravitasque postulat.</li>
<li>Mihi quidem Antiochum, quem audis, satis belle videris attendere.</li>
<li>Nam illud quidem adduci vix possum, ut ea, quae senserit ille, tibi non vera videantur.</li>
<li>Sed id ne cogitari quidem potest quale sit, ut non repugnet ipsum sibi.</li>
<li>Cum autem in quo sapienter dicimus, id a primo rectissime dicitur.</li>
</ul>
</textarea>
<button type="button" class="change-btn" data-target="full-godo-source" data-event="wcs:change">textarea has changed</button>
</div>
<div>
<h3>Editor</h3>
<godo-editor
linked-source="full-godo-source"
heading-level="1,2"
instant-update
update-event="wcs:change"
></godo-editor>
</div>
</div>
</form>
</main>
</div><!-- #wrapper -->
@ -81,7 +133,15 @@
<!-- Javascript -->
<script type="module">
import Godo from "./js/godo.js";
import Godo from "./js/godo.js"
const changeBtns = document.querySelectorAll('.change-btn')
changeBtns.forEach((btn) => {
btn.addEventListener('click', function(e) {
const textarea = document.getElementById(btn.dataset.target)
textarea.dispatchEvent(new CustomEvent(btn.dataset.event))
})
})
</script>
</body>