First Commit
This commit is contained in:
commit
ce0758fbbb
496 changed files with 52062 additions and 0 deletions
276
static/js/utils/bbcode_display.js
Normal file
276
static/js/utils/bbcode_display.js
Normal file
|
|
@ -0,0 +1,276 @@
|
|||
document.addEventListener('DOMContentLoaded', () => {
|
||||
let textarea = document.querySelector('textarea');
|
||||
const quoteButtons = document.querySelectorAll('#quote');
|
||||
console.log(quoteButtons);
|
||||
quoteButtons.forEach((elem) =>{
|
||||
const post_id = elem.target;
|
||||
elem.addEventListener('click', event => {
|
||||
const author = document.querySelector(`#author-post-${post_id}`).textContent;
|
||||
const content = document.querySelector(`#post-${post_id}`).textContent;
|
||||
|
||||
textarea.value = `[citation=${author}]${content}[/citation]`;
|
||||
textarea.focus();
|
||||
});
|
||||
});
|
||||
|
||||
let colorBarVisible = false;
|
||||
let existingColorBar = null;
|
||||
|
||||
fetch('/static/js/utils/bbcode-bar.html')
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
return response.text();
|
||||
} else {
|
||||
throw new Error('Impossible de charger le fichier HTML');
|
||||
}
|
||||
})
|
||||
.then(html => {
|
||||
textarea.insertAdjacentHTML('beforebegin', html);
|
||||
|
||||
const bbcodeBar = document.querySelector('.bbcode-bar');
|
||||
bbcodeBar.addEventListener('click', event => {
|
||||
if (event.target.tagName === 'BUTTON' && event.target.classList.contains('bbcode-bar-item')) {
|
||||
const tag = event.target.getAttribute('data-tag');
|
||||
if (tag.includes('][')) {
|
||||
const [openTag, closeTag] = tag.split('][');
|
||||
let startTag = openTag + ']';
|
||||
if(tag === '[list][/list]') {
|
||||
startTag = openTag + '][*]';
|
||||
}
|
||||
const endTag = '[' + closeTag;
|
||||
|
||||
const startPos = textarea.selectionStart;
|
||||
const endPos = textarea.selectionEnd;
|
||||
|
||||
const text = textarea.value;
|
||||
|
||||
textarea.value =
|
||||
text.slice(0, startPos) +
|
||||
startTag +
|
||||
text.slice(startPos, endPos) +
|
||||
endTag +
|
||||
text.slice(endPos);
|
||||
|
||||
textarea.selectionStart = startPos + startTag.length;
|
||||
textarea.selectionEnd = startPos + startTag.length;
|
||||
|
||||
textarea.focus();
|
||||
} else {
|
||||
console.error('Format de balise incorrect :', tag);
|
||||
}
|
||||
} else if (event.target.tagName === 'BUTTON' && event.target.classList.contains('bbcode-bar-button-gallery')) {
|
||||
let draggableWindows = document.querySelector('.draggable');
|
||||
let header = draggableWindows.querySelector('.header');
|
||||
const contentArea = document.querySelector('.content-gallery')
|
||||
fetch('/gallery/')
|
||||
.then(response => {
|
||||
if(response.ok) {
|
||||
return response.text();
|
||||
} else {
|
||||
throw new Error('Impossible de charger le fichier html de la galerie');
|
||||
}
|
||||
})
|
||||
.then(html => {
|
||||
contentArea.innerHTML = html;
|
||||
draggableWindows.style.display = 'block';
|
||||
})
|
||||
.catch(error => {
|
||||
contentArea.innerHTML = '<h4 style="color:red;">Erreur lors du chargement de la galerie</h4>';
|
||||
draggableWindows.style.display = 'block';
|
||||
})
|
||||
|
||||
if (draggableWindows) {
|
||||
const windowWidth = window.innerWidth;
|
||||
const windowHeight = window.innerHeight;
|
||||
const modalWidth = draggableWindows.offsetWidth;
|
||||
const modalHeight = draggableWindows.offsetHeight;
|
||||
|
||||
// Centre la fenêtre au milieu de l'écran
|
||||
draggableWindows.style.left = `${(windowWidth - modalWidth) / 2}px`;
|
||||
draggableWindows.style.top = `${(windowHeight - modalHeight) / 2}px`;
|
||||
|
||||
// Assure que la fenêtre soit positionnée en mode absolu
|
||||
draggableWindows.style.position = 'fixed';
|
||||
}
|
||||
|
||||
if (draggableWindows) {
|
||||
if (header) {
|
||||
header.addEventListener('mousedown', (e) => {
|
||||
e.preventDefault();
|
||||
let offsetX = e.clientX - draggableWindows.offsetLeft;
|
||||
let offsetY = e.clientY - draggableWindows.offsetTop;
|
||||
|
||||
function onMouseMove(e) {
|
||||
draggableWindows.style.left = e.clientX - offsetX + 'px';
|
||||
draggableWindows.style.top = e.clientY - offsetY + 'px';
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
|
||||
document.addEventListener('mouseup', () => {
|
||||
document.removeEventListener('mousemove', onMouseMove);
|
||||
}, { once: true });
|
||||
});
|
||||
}
|
||||
|
||||
const closeButton = document.querySelector('#close-window');
|
||||
if (closeButton) {
|
||||
closeButton.addEventListener('click', () => {
|
||||
console.log("test fermeture")
|
||||
draggableWindows.style.display = 'none';
|
||||
});
|
||||
}
|
||||
}
|
||||
} else if (event.target.tagName === 'BUTTON' && event.target.classList.contains('bbcode-bar-button-colors')) {
|
||||
event.preventDefault();
|
||||
|
||||
if (existingColorBar) {
|
||||
// Si la barre existe déjà, on bascule sa visibilité
|
||||
existingColorBar.style.display = colorBarVisible ? 'none' : 'block';
|
||||
colorBarVisible = !colorBarVisible;
|
||||
return;
|
||||
}
|
||||
|
||||
// Si la barre n'existe pas encore, on la crée
|
||||
const colors = [
|
||||
// Basiques
|
||||
'black',
|
||||
'white',
|
||||
|
||||
// Gris
|
||||
'gray',
|
||||
'darkgray',
|
||||
'silver',
|
||||
|
||||
// Rouges
|
||||
'red',
|
||||
'darkred',
|
||||
'maroon',
|
||||
'crimson',
|
||||
'coral',
|
||||
|
||||
// Roses/Violets
|
||||
'pink',
|
||||
'hotpink',
|
||||
'fuchsia',
|
||||
'purple',
|
||||
'blueviolet',
|
||||
'darkmagenta',
|
||||
|
||||
// Bleus
|
||||
'blue',
|
||||
'navy',
|
||||
'darkblue',
|
||||
'royalblue',
|
||||
'cornflowerblue',
|
||||
'skyblue',
|
||||
'aqua',
|
||||
'cyan',
|
||||
'darkcyan',
|
||||
'teal',
|
||||
|
||||
// Verts
|
||||
'green',
|
||||
'darkgreen',
|
||||
'lime',
|
||||
'limegreen',
|
||||
'springgreen',
|
||||
'aquamarine',
|
||||
'chartreuse',
|
||||
|
||||
// Jaunes/Oranges
|
||||
'yellow',
|
||||
'gold',
|
||||
'orange',
|
||||
'darkorange',
|
||||
|
||||
// Marrons
|
||||
'brown',
|
||||
'chocolate',
|
||||
'saddlebrown',
|
||||
'burlywood',
|
||||
|
||||
// Tons pastel
|
||||
'aliceblue',
|
||||
'antiquewhite',
|
||||
'azure',
|
||||
'beige',
|
||||
'bisque',
|
||||
'blanchedalmond',
|
||||
'cornsilk',
|
||||
'darkkhaki',
|
||||
'olive'
|
||||
];
|
||||
|
||||
const colorBar = document.createElement('div');
|
||||
colorBar.classList.add('bbcode-bar-colors');
|
||||
colorBar.style.display = 'block';
|
||||
|
||||
const colorButtons = colors.map(color => {
|
||||
const link = document.createElement('a');
|
||||
link.classList.add('bbcode-bar-item-color');
|
||||
link.style.backgroundColor = color;
|
||||
link.style.width = '20px';
|
||||
link.style.height = '20px';
|
||||
link.style.display = 'inline-block';
|
||||
link.style.margin = '2px';
|
||||
link.setAttribute('data-color', color);
|
||||
link.href = '#';
|
||||
return link;
|
||||
});
|
||||
|
||||
colorButtons.forEach(link => colorBar.appendChild(link));
|
||||
bbcodeBar.appendChild(colorBar);
|
||||
|
||||
existingColorBar = colorBar;
|
||||
colorBarVisible = true;
|
||||
} else if (event.target.tagName === 'A' && event.target.classList.contains('bbcode-bar-item-color')) {
|
||||
event.preventDefault();
|
||||
const color = event.target.getAttribute('data-color');
|
||||
if (color) {
|
||||
insertBBCode(`[color=${color}]`, `[/color]`);
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
.catch(error => console.error('Erreur: ', error));
|
||||
});
|
||||
|
||||
function insertBBCode(openTag, closeTag) {
|
||||
const textarea = document.querySelector('textarea'); // Assurez-vous de sélectionner le bon textarea
|
||||
if (!textarea) return;
|
||||
|
||||
const start = textarea.selectionStart;
|
||||
const end = textarea.selectionEnd;
|
||||
const text = textarea.value;
|
||||
|
||||
const before = text.substring(0, start);
|
||||
const selected = text.substring(start, end);
|
||||
const after = text.substring(end);
|
||||
|
||||
textarea.value = `${before}${openTag}${selected}${closeTag}${after}`;
|
||||
textarea.focus();
|
||||
textarea.selectionStart = start + openTag.length;
|
||||
textarea.selectionEnd = end + openTag.length;
|
||||
}
|
||||
|
||||
function load_gallery() {
|
||||
const contentArea = document.querySelector('.content-gallery')
|
||||
fetch('/gallery/')
|
||||
.then(response => {
|
||||
if(response.ok) {
|
||||
return response.text();
|
||||
} else {
|
||||
throw new Error('Impossible de charger le fichier html de la galerie');
|
||||
}
|
||||
})
|
||||
.then(html => {
|
||||
contentArea.innerHTML = html;
|
||||
draggableWindows.style.display = 'block';
|
||||
})
|
||||
.catch(error => {
|
||||
contentArea.innerHTML = '<p>Erreur lors du chargement de la galerie</p>';
|
||||
draggableWindows.style.display = 'block';
|
||||
})
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue