Rodrigo Rodriguez (Pragmatismo)
b9395cb0d7
Added new navigation links for Dashboard, Editor, Player, Paper, Settings, Tables, and News sections. Each link includes click handlers to switch sections and active state styling. This expands the application's navigation options for better user access to different features.
77 lines
1.9 KiB
JavaScript
77 lines
1.9 KiB
JavaScript
// Editor module JavaScript using Alpine.js
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('editor', () => ({
|
|
fileName: 'Document 1',
|
|
fontSize: '12',
|
|
fontFamily: 'Calibri',
|
|
textColor: '#000000',
|
|
highlightColor: '#ffff00',
|
|
activeTab: 'home',
|
|
zoom: 100,
|
|
pages: [1],
|
|
content: '',
|
|
|
|
init() {
|
|
// Initialize with default content
|
|
this.content = `
|
|
<h1 style="text-align: center; font-size: 24px; margin-bottom: 20px;">${this.fileName}</h1>
|
|
<p><br></p>
|
|
<p>Start typing your document here...</p>
|
|
<p><br></p>
|
|
`;
|
|
},
|
|
|
|
// Ribbon tab switching
|
|
setActiveTab(tab) {
|
|
this.activeTab = tab;
|
|
},
|
|
|
|
// Formatting methods
|
|
formatBold() {
|
|
document.execCommand('bold', false);
|
|
},
|
|
formatItalic() {
|
|
document.execCommand('italic', false);
|
|
},
|
|
formatUnderline() {
|
|
document.execCommand('underline', false);
|
|
},
|
|
alignLeft() {
|
|
document.execCommand('justifyLeft', false);
|
|
},
|
|
alignCenter() {
|
|
document.execCommand('justifyCenter', false);
|
|
},
|
|
alignRight() {
|
|
document.execCommand('justifyRight', false);
|
|
},
|
|
alignJustify() {
|
|
document.execCommand('justifyFull', false);
|
|
},
|
|
|
|
// Zoom controls
|
|
zoomOut() {
|
|
this.zoom = Math.max(50, this.zoom - 10);
|
|
this.updateZoom();
|
|
},
|
|
zoomIn() {
|
|
this.zoom = Math.min(200, this.zoom + 10);
|
|
this.updateZoom();
|
|
},
|
|
updateZoom() {
|
|
document.querySelector('.pages-container').style.transform = `scale(${this.zoom / 100})`;
|
|
},
|
|
|
|
// Save document
|
|
saveDocument() {
|
|
const content = document.getElementById('editor-content').innerHTML;
|
|
const blob = new Blob([content], { type: 'text/html' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `${this.fileName}.html`;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
}));
|
|
});
|