This commit is contained in:
parent
b0cb872c53
commit
5179282b9f
|
@ -22,6 +22,23 @@
|
||||||
max-width: 60em;
|
max-width: 60em;
|
||||||
margin: 0 auto;
|
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>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
@ -38,42 +55,77 @@
|
||||||
<main role="main">
|
<main role="main">
|
||||||
|
|
||||||
<h2>Basic Godo</h2>
|
<h2>Basic Godo</h2>
|
||||||
<p>Juste p, strong & em</p>
|
<p>Just p, strong, em & a</p>
|
||||||
<form>
|
<form>
|
||||||
<textarea class="textarea-for-godo" id="basic-godo-source" hidden>
|
<div class="grid-2cols">
|
||||||
<h1>TItre de mon commentaire</h1>
|
<div>
|
||||||
<ul class="fucking class">
|
<h3>Textarea</h3>
|
||||||
<li>Item de liste 1</li>
|
<textarea class="textarea-for-godo" id="basic-godo-source">
|
||||||
<li>Item de liste 2</li>
|
<h1>Quamquam haec quidem <strong>praeposita</strong></h1>
|
||||||
</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>
|
|
||||||
|
|
||||||
<h3 class="intertitre">Intertitre</h3>
|
<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>
|
||||||
</textarea>
|
|
||||||
<godo-editor schema="basic" linked-source="basic-godo-source"></godo-editor>
|
<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>
|
||||||
<button type="submit">send</button>
|
|
||||||
|
<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>
|
</form>
|
||||||
|
|
||||||
<h2>Full Godo</h2>
|
<h2>Full Godo</h2>
|
||||||
<p>p, h1 -> h3, strong, em, ul</p>
|
<p>p, h1 -> h2, strong, em, a, ul</p>
|
||||||
<form action="">
|
<form action="">
|
||||||
<textarea class="textarea-for-godo-2" data-godo-schema="full" id="full-godo-source" hidden>
|
<div class="grid-2cols">
|
||||||
<h1>titre</h1>
|
<div>
|
||||||
<h2>Sous-titre</h2>
|
<h3>Textarea</h3>
|
||||||
<p>Paragraphe.</p>
|
<textarea class="textarea-for-godo-2" id="full-godo-source">
|
||||||
<ul>
|
<h1>Quamquam haec quidem <strong>praeposita</strong></h1>
|
||||||
<li>First Item</li>
|
|
||||||
<li>Second Item</li>
|
|
||||||
<li>Third Item</li>
|
|
||||||
</ul>
|
|
||||||
</textarea>
|
|
||||||
<godo-editor linked-source="full-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="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>
|
</form>
|
||||||
</main>
|
</main>
|
||||||
</div><!-- #wrapper -->
|
</div><!-- #wrapper -->
|
||||||
|
@ -81,7 +133,15 @@
|
||||||
|
|
||||||
<!-- Javascript -->
|
<!-- Javascript -->
|
||||||
<script type="module">
|
<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>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in New Issue