diff options
Diffstat (limited to 'public/edit.html')
| -rw-r--r-- | public/edit.html | 142 |
1 files changed, 75 insertions, 67 deletions
diff --git a/public/edit.html b/public/edit.html index 9cf8ae5..6938c02 100644 --- a/public/edit.html +++ b/public/edit.html @@ -6,12 +6,12 @@ content="width=device-width,minimum-scale=1,initial-scale=1"> <title>Plugins examples</title> - <script src="js/qcm.js"></script> - <script src="js/hmd.min.js"></script> + <script src="/js/qcm.js"></script> + <script src="/js/hmd.min.js"></script> <link rel="stylesheet" type="text/css" href="/css/style.css"> <link rel="stylesheet" type="text/css" href="/css/contenu.css"> - <link rel="stylesheet" type="text/css" href="css/katex.min.css"> + <link rel="stylesheet" type="text/css" href="/css/katex.min.css"> <style> html { height: 100vh; @@ -27,98 +27,78 @@ body { width: 100vv; margin: 0; padding: 0; - overflow-y: hidden; - overflow-x: hidden; } #edit { grid-area: edit; - overflow-y: auto; - overflow-x: hidden; - height: 100vh; -} -#edit-zone{ - overflow-x: hidden; + padding: 20px; + background-color: #EEE; + resize: none; } #preview { margin-left: 5px; grid-area: preview; overflow-y: scroll; overflow-x: hidden; + min-height: 100vh; } </style> </head> <body> - <div id="edit"><div contenteditable="true" id="edit-zone"> </div></div> + <textarea id="edit" contenteditable="true" spellcheck="false" placeholder="Write here..." autofocus=true></textarea> <div id="preview" class="view" contenteditable="false">If you can read this line more thant <em>15s</em> there is a bug in the matrix.</div> <!-- This is the bundle generated by rollup.js --> <script> -let edit = document.getElementById('edit-zone'); +let edit = document.getElementById('edit'); let preview = document.getElementById('preview'); let modification = true; +const saveButton = document.createElement('button'); +saveButton.classList.add('raw_button'); +let tmpDiv = document.createElement('div'); +let tmpDiv2 = document.createElement('div'); -edit.innerText = `Plugins presentation -================= - -This page is an example of using [remark][remark] with plugins that I created. These plugins are used to parse [lines][remark-line-input] of [text](remark-text-input), [selection boxes][remark-select] and even [MCQs][remark-mcq]. - -The goal of this project is to propose a set of plugins allowing to create **exercises** easily. - -To first let's see somes examples ! - -Example of exercises --------------------- - -The 151th pokémon [__151th pokémon__]{#pokemon oninput="pokemon(this)"} is one of the two pokemons that can use transform attack (the other one is [ Pikachu | Ditto | Mewtow | Eevee |v] ). - - -Line edit ---------- - -You can use line edit like that : - -Login : [__email or username__]{#login} -Passwd: [__Passwd__]{#password type=password} - -Text edit --------- +let password = ""; -It's also easy to use text edit : +tmpDiv2.appendChild(document.createTextNode('Save')) +tmpDiv.appendChild(tmpDiv2); +saveButton.appendChild(tmpDiv); +saveButton.style = "margin-right: 10px;"; -[______ -This is a text zone +edit.value = hmd.defaultValue; -______]{rows=13 cols=30} +async function saveMD() { + // Default options are marked with * + const url = window.location.href; + console.log(url); -Selection box -------------- + const data = {}; + data.text = edit.value; + data.password = password; -To use a selection box, just write it in the markdown file. - -[ Mario | Peach | Luigi |v] - -[remark]: https://github.com/remarkjs/remark "Github of the remark project" -[remark-line-input]: https://www.npmjs.com/package/remark-line-input -[remark-text-input]: https://www.npmjs.com/package/remark-text-input -[remark-select]: https://www.npmjs.com/package/remark-select - - -<script> - if( !pokemon ) { -function pokemon( elem ) { - if( elem.value != 'mew' ) { - if( elem.classList.contains('valid') ) - elem.classList.remove('valid') - elem['className'] = 'invalid'; - }else{ - if( elem.classList.contains('invalid') ) - elem.classList.remove('invalid') - elem.classList.add('valid') + const response = await fetch(url, { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(data) + }).then( res => { + if (res.status >= 400 && res.status < 600) { + throw new Error(`${res.status}Bad error code`); + } + return res; + }).then( res => { + }).catch( err => { + console.log('Catch !'); + if (!password) { + password = window.prompt("You shall NOT pass !"); + window.alert('Try again !'); + } else { + window.alert(`${err} - Erreur fichier \ +${window.location.pathname.replace(/\/edit/g, '/md')}`); } -}}` + `</scr` + `ipt>`; + }); +} function nodeScriptReplace(node) { if (node.tagName === 'SCRIPT') { @@ -145,10 +125,11 @@ function nodeScriptClone(node) { let interval = setInterval( () => { if( modification ) { - hmd(edit.innerText, (err, file) => { + hmd(edit.value, (err, file) => { let finalString = String(file); if( finalString ) { preview.innerHTML = String(file); + preview.appendChild(saveButton); nodeScriptReplace(preview); modification = false; } @@ -160,6 +141,33 @@ edit.addEventListener('input', () => { modification = true; }, false); +saveButton.addEventListener('click', saveMD, false); + +document.addEventListener("DOMContentLoaded", function(event) { + let url = window.location.href; + url = url.replace(/\/edit/g, '/md'); + url += '?raw=true'; + + fetch(url). + then(function(response) { + if(response.ok) { + return response.text(); + } else { + console.error(`${response.status} - Erreur fichier \ +${window.location.pathname.replace(/\/edit/g, '/md')}`); + } + }) + .then(function(data) { + if( data ) { + edit.value = data; + } + }) + .catch(function(error) { + console.log('Il y a eu un problème avec l\'opération fetch: ' + error.message); + }); +}); + + </script> |