cheeze.fr
/
CheezeNotes
1
0
Fork 0
Code Issues 15 Pull Requests Packages Projects Releases Wiki Activity

boutons...

Browse Source
pull/15/head
Nicolas Sanchez 3 years ago
parent f1329b8842
commit 0410a4ec9c
4 changed files with 130 additions and 59 deletions
Show Stats Download Patch File Download Diff File

4
pages/index.md
Unescape View File

@ -1,6 +1,6 @@
[Accueil](accueil) [Accueil](accueil)
# CheezeNotes ## CheezeNotes
L'objectif de CheezeNotes est de pouvoir saisir des notes avec un minimum de formatage le plus rapidement possible. L'objectif de CheezeNotes est de pouvoir saisir des `notes` avec un minimum de formatage le plus rapidement possible.
> Cette page est un bac à sable. Les modifications ne seront jamais enregistrées. > Cette page est un bac à sable. Les modifications ne seront jamais enregistrées.
> Pour réinitialiser la page, il suffit de la recharger. > Pour réinitialiser la page, il suffit de la recharger.
## Utilisation ## Utilisation

BIN
static/MaterialIconsOutlined-Regular.otf
View File

Binary file not shown.

76
static/cheezenotes.css
Unescape View File

@ -4,14 +4,24 @@
font-weight: 400; font-weight: 400;
src: local('Material Icons'), src: local('Material Icons'),
local('MaterialIcons-Regular'), local('MaterialIcons-Regular'),
url(/static/MaterialIcons-Regular.ttf) format('truetype'); url(/static/MaterialIconsOutlined-Regular.otf) format('woff');
}
html {
font-family: system-ui;
font-size: 12pt;
}
body {
margin: 0;
background-color: #f6f6f6;
} }
.material-icons { .material-icons {
font-family: 'Material Icons'; font-family: 'Material Icons';
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-size: 24px; /* Preferred icon size */ font-size: 20px; /* Preferred icon size */
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
text-transform: none; text-transform: none;
@ -25,21 +35,12 @@
font-feature-settings: 'liga'; font-feature-settings: 'liga';
} }
html {
font-family: system-ui;
font-size: 12pt;
}
body {
margin: 0;
background-color: #f6f6f6;
}
div#buttons { div#buttons {
background-color: #f6f6f6; white-space: nowrap;
content: ""; box-sizing: border-box;
clear: both; padding: .2rem;
position: fixed; position: fixed;
background-color: #dddde5;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
@ -49,22 +50,17 @@ div#buttons {
} }
div#buttons button.button { div#buttons button.button {
margin: 0.2rem; color: #444444;
margin-right: 0; padding: 0;
margin-left: 0; margin: 0;
height: 3rem; height: 1.8rem;
width: 3rem; width: 1.8rem;
background-color: #eeeeee; background-color: #eeeeee;
border: 1px solid #cccccc; border: 1px solid #cccccc;
border-right: none; border-right: none;
} }
div#buttons button.button:disabled {
div#buttons button.floatright { color: #aaaaaa;
float: right;
}
div#buttons button.rightborder {
border-right: 1px solid #cccccc;
} }
div#buttons button.separator { div#buttons button.separator {
@ -72,10 +68,26 @@ div#buttons button.separator {
color: #bbbbbb; color: #bbbbbb;
border: none; border: none;
border-left: 1px solid #cccccc; border-left: 1px solid #cccccc;
height: 3rem; height: 1.8rem;
margin: 0.2rem; margin: 0;
margin-right: 0; padding: 0;
margin-left: 0; }
div#buttons button.text {
color: #444444;
font-size: 16px;
vertical-align: bottom;
}
div#buttons button.text:disabled {
color: #aaaaaa;
}
div#buttons button.floatright {
float: right;
}
div#buttons button.rightborder {
border-right: 1px solid #cccccc;
} }
div#buttons button.onoffbutton.buttonon { div#buttons button.onoffbutton.buttonon {
@ -111,7 +123,7 @@ textarea#ta {
} }
div#cheezenotes { div#cheezenotes {
margin-top: 3rem; margin-top: 2rem;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
max-width: 1200; max-width: 1200;

107
static/modules/cheezenotes.js
Unescape View File

@ -69,6 +69,51 @@ function onstrikebutton(e) {
return false; return false;
} }
function onmonobutton(e) {
e.preventDefault();
let cheezenotes = document.getElementById('cheezenotes');
cheezenotes.focus();
insertTextAtCaret('`', '`');
onedit(e);
return false;
}
function onh1button(e) {
e.preventDefault();
let cheezenotes = document.getElementById('cheezenotes');
cheezenotes.focus();
insertTextAtCaret('#', '');
onedit(e);
return false;
}
function onh2button(e) {
e.preventDefault();
let cheezenotes = document.getElementById('cheezenotes');
cheezenotes.focus();
insertTextAtCaret('##', '');
onedit(e);
return false;
}
function onh3button(e) {
e.preventDefault();
let cheezenotes = document.getElementById('cheezenotes');
cheezenotes.focus();
insertTextAtCaret('###', '');
onedit(e);
return false;
}
function onbqbutton(e) {
e.preventDefault();
let cheezenotes = document.getElementById('cheezenotes');
cheezenotes.focus();
insertTextAtCaret('>', '');
onedit(e);
return false;
}
function onsave(e) { function onsave(e) {
let saveButton = document.getElementById('saveButton'); let saveButton = document.getElementById('saveButton');
saveButton.disabled = true; saveButton.disabled = true;
@ -203,8 +248,12 @@ function addButton(id, icon, onclick) {
let button = document.createElement('button'); let button = document.createElement('button');
button.id = id; button.id = id;
button.classList.add('button'); button.classList.add('button');
if (icon.substring(0, 1) == ':') {
button.classList.add('material-icons'); button.classList.add('material-icons');
button.innerText = icon; } else {
button.classList.add('text');
}
button.innerText = icon.replace(':', '');
button.addEventListener('mousedown', onclick); button.addEventListener('mousedown', onclick);
buttons.appendChild(button); buttons.appendChild(button);
return button; return button;
@ -225,11 +274,11 @@ function addOnOffButton(id, icon, alt_icon, onclick, on = false) {
if (button.classList.contains('buttonon')) { if (button.classList.contains('buttonon')) {
button.classList.remove('buttonon'); button.classList.remove('buttonon');
button.classList.add('buttonoff'); button.classList.add('buttonoff');
button.innerText = alt_icon; button.innerText = alt_icon.replace(':', '')
} else { } else {
button.classList.remove('buttonoff'); button.classList.remove('buttonoff');
button.classList.add('buttonon'); button.classList.add('buttonon');
button.innerText = icon; button.innerText = icon.replace(':', '')
} }
}); });
return button; return button;
@ -246,27 +295,31 @@ function floatRight(button) {
} }
function addSeparator() { function addSeparator() {
let separator = addButton('', 'more_vert', function () { }); let separator = addButton('', ':more_vert', function () { });
separator.classList.add('separator'); separator.classList.add('separator');
separator.classList.remove('button'); separator.classList.remove('button');
} }
function enableFormatButtons() { function enableFormatButtons() {
let boldButton = document.getElementById('boldButton'); document.getElementById('boldButton').disabled = false;
let italicButton = document.getElementById('italicButton'); document.getElementById('italicButton').disabled = false;
let strikeButton = document.getElementById('strikeButton'); document.getElementById('strikeButton').disabled = false;
boldButton.disabled = false; document.getElementById('h1Button').disabled = false;
italicButton.disabled = false; document.getElementById('h2Button').disabled = false;
strikeButton.disabled = false; document.getElementById('h3Button').disabled = false;
document.getElementById('monoButton').disabled = false;
document.getElementById('bqButton').disabled = false;
} }
function disableFormatButtons() { function disableFormatButtons() {
let boldButton = document.getElementById('boldButton'); document.getElementById('boldButton').disabled = true;
let italicButton = document.getElementById('italicButton'); document.getElementById('italicButton').disabled = true;
let strikeButton = document.getElementById('strikeButton'); document.getElementById('strikeButton').disabled = true;
boldButton.disabled = true; document.getElementById('h1Button').disabled = true;
italicButton.disabled = true; document.getElementById('h2Button').disabled = true;
strikeButton.disabled = true; document.getElementById('h3Button').disabled = true;
document.getElementById('monoButton').disabled = true;
document.getElementById('bqButton').disabled = true;
} }
function onblur(e) { function onblur(e) {
@ -300,22 +353,28 @@ function init(pagename = null) {
cheezenotes.addEventListener('dragenter', ondragenter); cheezenotes.addEventListener('dragenter', ondragenter);
cheezenotes.addEventListener('dragleave', ondragleave); cheezenotes.addEventListener('dragleave', ondragleave);
let saveButton = addButton('saveButton', 'save', onsave); let saveButton = addButton('saveButton', ':save', onsave);
saveButton.disabled = true; saveButton.disabled = true;
addSeparator(); addSeparator();
addButton('boldButton', 'format_bold', onboldbutton); addButton('boldButton', ':format_bold', onboldbutton);
addButton('italicButton', 'format_italic', onitalicbutton); addButton('italicButton', ':format_italic', onitalicbutton);
lastButton(addButton('strikeButton', 'format_strikethrough', onstrikebutton)); addButton('strikeButton', ':format_strikethrough', onstrikebutton);
addButton('monoButton', ':code', onmonobutton);
floatRight(lastButton(addOnOffButton('taButton', 'notes', 'notes', ontextarea))); addSeparator();
floatRight(addOnOffButton('editModeButton', 'edit_note', 'visibility', addButton('h1Button', 'H1', onh1button);
addButton('h2Button', 'H2', onh2button);
addButton('h3Button', 'H3', onh3button);
lastButton(addButton('bqButton', ':format_quote', onbqbutton));
addSeparator();
addOnOffButton('editModeButton', ':edit_note', ':visibility',
function (e) { function (e) {
if (editModeButton.classList.contains('buttonon')) { if (editModeButton.classList.contains('buttonon')) {
cheezenotes.contentEditable = false; cheezenotes.contentEditable = false;
} else { } else {
cheezenotes.contentEditable = true; cheezenotes.contentEditable = true;
} }
}, true)); }, true);
lastButton(addOnOffButton('taButton', ':notes', ':notes', ontextarea));
disableFormatButtons(); disableFormatButtons();

Write Preview
Loading…
Cancel
Save