pull/15/head
Nicolas Sanchez 3 years ago
parent f1329b8842
commit 0410a4ec9c

@ -1,6 +1,6 @@
[Accueil](accueil)
# CheezeNotes
L'objectif de CheezeNotes est de pouvoir saisir des notes avec un minimum de formatage le plus rapidement possible.
## CheezeNotes
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.
> Pour réinitialiser la page, il suffit de la recharger.
## Utilisation

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

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

Loading…
Cancel
Save