editor: Link and Images buttons works, still need some CSS and cleaning
This commit is contained in:
parent
95166b2da3
commit
5eaf1cc207
|
@ -96,42 +96,42 @@ function editor_act_on_lines(event, fn)
|
|||
ta.selectionEnd = end;
|
||||
}
|
||||
|
||||
/*
|
||||
* Create a modal used to get input from the user when generating some M⬇
|
||||
*/
|
||||
function editor_create_modal(event, content = document.createElement("div"), fn = {}) {
|
||||
// The anchor is two levels above because the event.srcElement/event.target
|
||||
// are the path inside the button.
|
||||
const anchor = event.currentTarget;
|
||||
function editor_clear_modals(event, close = true) {
|
||||
// Stop the propagation of the event
|
||||
event.stopPropagation()
|
||||
|
||||
const modal = document.createElement("div");
|
||||
const contentDiv = document.createElement("div");
|
||||
const btnDiv = document.createElement("div");
|
||||
const validateBtn = document.createElement("button");
|
||||
const cancelBtn = document.createElement("button");
|
||||
// Reset all modal inputs
|
||||
document.getElementById('img-alt-input').value = '';
|
||||
document.getElementById('img-link-input').value = '';
|
||||
document.getElementById('link-desc-input').value = '';
|
||||
document.getElementById('link-desc-input').value = '';
|
||||
|
||||
modal.classList.add("modal");
|
||||
// Close all modal if requested
|
||||
if (!close) { return }
|
||||
const modals = document.getElementsByClassName('modal');
|
||||
for (const i of modals) {i.style.display = 'none'};
|
||||
}
|
||||
|
||||
validateBtn.onclick = function() {
|
||||
modal.remove()
|
||||
function editor_insert_link(event, link, text = "", image = false)
|
||||
{
|
||||
const [editor, button, ta] = editor_event_source(event);
|
||||
ta.focus();
|
||||
let indexStart = ta.selectionStart;
|
||||
let indexEnd = ta.selectionEnd;
|
||||
|
||||
fn(event, content);
|
||||
};
|
||||
validateBtn.textContent = "Valider";
|
||||
validateBtn.classList = ["bg-ok"];
|
||||
editor_clear_modals(event);
|
||||
|
||||
cancelBtn.onclick = function() {
|
||||
modal.remove()
|
||||
};
|
||||
cancelBtn.textContent = "Annuler";
|
||||
cancelBtn.classList = ["bg-error"];
|
||||
let [start, end] = editor_replace_range(ta, indexStart, indexEnd,
|
||||
`[${text.length === 0 ? ta.value.substring(indexStart, indexEnd) : text}]${image ? "!" : ""}(${link})`);
|
||||
|
||||
contentDiv.appendChild(content);
|
||||
modal.appendChild(contentDiv);
|
||||
btnDiv.appendChild(validateBtn);
|
||||
btnDiv.appendChild(cancelBtn);
|
||||
modal.appendChild(btnDiv);
|
||||
anchor.appendChild(modal);
|
||||
/* Restore selection */
|
||||
if(indexStart != indexEnd) {
|
||||
ta.selectionStart = start;
|
||||
ta.selectionEnd = end;
|
||||
}
|
||||
else {
|
||||
ta.selectionStart = ta.selectionEnd = start + 1;
|
||||
}
|
||||
}
|
||||
|
||||
function editor_set_title(event, level, diff)
|
||||
|
|
|
@ -103,30 +103,47 @@
|
|||
</svg>
|
||||
</button>
|
||||
-->
|
||||
<button type="button" onclick="event.currentTarget.children[1].style = {'display': 'block'} /* toggle display on div */" title="Lien">
|
||||
<button type="button" onclick="event.currentTarget.children[1].style = {'display': 'block'}" title="Lien">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>
|
||||
</svg>
|
||||
<div class="modal" style="display: none">
|
||||
<div>
|
||||
Content
|
||||
<label for="link-desc-input">Description</label>
|
||||
<input type="text" id="link-desc-input" name="link-desc-input">
|
||||
<label for="link-link-input">Lien</label>
|
||||
<input type="url" id="link-link-input" name="link-link-input">
|
||||
</div>
|
||||
<div>
|
||||
<a type="button" class="button bg-ok" onclick="">Valider</a>
|
||||
<a type="button" class="button bg-error" onclick="">Annuler</a>
|
||||
<a type="button" class="button bg-ok" onclick="editor_insert_link(event, document.getElementById('link-link-input').value, document.getElementById('link-desc-input').value)">Valider</a>
|
||||
<a type="button" class="button bg-error" onclick="editor_clear_modals(event)">Annuler</a>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button type="button" onclick="editor_create_modal(event)" title="Image">
|
||||
<button type="button" onclick="event.currentTarget.children[1].style = {'display': 'block'}" title="Image">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
|
||||
</svg>
|
||||
<div class="modal" style="display: none">
|
||||
<div>
|
||||
<label for="img-alt-input">Texte alternatif (sera affiché en cas d'erreur de chargement)</label>
|
||||
<input type="text" id="img-alt-input" name="img-alt-input">
|
||||
<label for="img-link-input">Lien vers l'image</label>
|
||||
<input type="url" id="img-link-input" name="img-link-input">
|
||||
</div>
|
||||
<div>
|
||||
<a type="button" class="button bg-ok" onclick="editor_insert_link(event, document.getElementById('img-link-input').value, document.getElementById('img-alt-input').value, true)">Valider</a>
|
||||
<a type="button" class="button bg-error" onclick="editor_clear_modals(event)">Annuler</a>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<!-- Disabled because we have something similar under the form
|
||||
<button type="button" onclick="editor_btn_type()" title="Joindre un fichier">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</button>
|
||||
-->
|
||||
<div class="filler"></div>
|
||||
<a href="#">Aide</a>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue