@ -1,6 +1,16 @@
import { saveSelection , loadSelection , insertTextAtCaret } from './caret.js' ;
import { formatLine , load , save , formatTable , redrawTables , appendData , dpwidth } from './md.js' ;
const showtokens = [
{ fontSize : 0 } ,
{ fontSize : '95%' }
] ;
const hidetokens = [
{ fontSize : '95%' } ,
{ fontSize : 0 }
] ;
function timeoutSave ( ) {
if ( window . tos !== null ) {
window . clearTimeout ( window . tos ) ;
@ -8,9 +18,24 @@ function timeoutSave() {
window . tos = window . setTimeout ( onsave , 5000 ) ;
}
function showTokens ( ) {
let tokens = document . getElementsByClassName ( 'token' ) ;
for ( let i = 0 ; i < tokens . length ; i ++ ) {
tokens [ i ] . animate ( showtokens , { duration : 200 , iterations : 1 } ) ;
}
}
function hideTokens ( ) {
let tokens = document . getElementsByClassName ( 'token' ) ;
for ( let i = 0 ; i < tokens . length ; i ++ ) {
tokens [ i ] . animate ( hidetokens , { duration : 200 , iterations : 1 } ) ;
}
}
function ontextarea ( e ) {
let ta = document . getElementById ( 'ta' ) ;
if ( ta . style . display != 'inline' ) {
let taButton = document . getElementById ( 'taButton' ) ;
if ( taButton . classList . contains ( 'buttonoff' ) ) {
ta . style . display = 'inline' ;
} else {
ta . style . display = 'none' ;
@ -44,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 ;
@ -173,36 +243,141 @@ function ondragleave(e) {
// alert('leave')
}
function addButton ( id , icon , onclick ) {
let buttons = document . getElementById ( 'buttons' ) ;
let button = document . createElement ( 'button' ) ;
button . id = id ;
button . classList . add ( 'button' ) ;
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 ;
}
function addOnOffButton ( id , icon , alt _icon , onclick , on = false ) {
let button ;
if ( on == true ) {
button = addButton ( id , icon , onclick ) ;
button . classList . add ( 'onoffbutton' ) ;
button . classList . add ( 'buttonon' ) ;
} else {
button = addButton ( id , alt _icon , onclick ) ;
button . classList . add ( 'onoffbutton' ) ;
button . classList . add ( 'buttonoff' ) ;
}
button . addEventListener ( 'click' , function ( e ) {
if ( button . classList . contains ( 'buttonon' ) ) {
button . classList . remove ( 'buttonon' ) ;
button . classList . add ( 'buttonoff' ) ;
button . innerText = alt _icon . replace ( ':' , '' )
} else {
button . classList . remove ( 'buttonoff' ) ;
button . classList . add ( 'buttonon' ) ;
button . innerText = icon . replace ( ':' , '' )
}
} ) ;
return button ;
}
function lastButton ( button ) {
button . classList . add ( 'rightborder' ) ;
return button ;
}
function floatRight ( button ) {
button . classList . add ( 'floatright' ) ;
return button ;
}
function addSeparator ( ) {
let separator = addButton ( '' , ':more_vert' , function ( ) { } ) ;
separator . classList . add ( 'separator' ) ;
separator . classList . remove ( 'button' ) ;
}
function enableFormatButtons ( ) {
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 ( ) {
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 ) {
let cheezenotes = document . getElementById ( 'cheezenotes' ) ;
redrawTables ( cheezenotes ) ;
onsave ( ) ;
hideTokens ( ) ;
disableFormatButtons ( ) ;
}
function onfocus ( ) {
redrawTables ( cheezenotes , dpwidth ( ) ) ;
showTokens ( ) ;
enableFormatButtons ( ) ;
}
function init ( pagename = null ) {
let cheezenotesdiv = document . getElementById ( 'cheezenotes' ) ;
dpwidth ( cheezenotesdiv ) ;
cheezenotesdiv . addEventListener ( 'input' , onedit ) ;
cheezenotesdiv . addEventListener ( 'keyup' , onkeyup ) ;
cheezenotesdiv . addEventListener ( 'keypress' , onkeypress ) ;
cheezenotesdiv . addEventListener ( 'keydown' , onkeydown ) ;
cheezenotesdiv . addEventListener ( 'paste' , onpaste ) ;
cheezenotesdiv . addEventListener ( 'copy' , oncopy ) ;
cheezenotesdiv . addEventListener ( 'blur' , ( ) => { redrawTables ( cheezenotesdiv ) ; onsave ( ) } ) ;
cheezenotesdiv . addEventListener ( 'focus' , ( ) => { redrawTables ( cheezenotesdiv , dpwidth ( ) ) ; } ) ;
cheezenotesdiv . addEventListener ( 'drag' , ondrag ) ;
cheezenotesdiv . addEventListener ( 'dragenter' , ondragenter ) ;
cheezenotesdiv . addEventListener ( 'dragleave' , ondragleave ) ;
let cheezenotes = document . getElementById ( 'cheezenotes' ) ;
let saveButton = document . getElementById ( 'saveButton' ) ;
dpwidth ( cheezenotes ) ;
cheezenotes . addEventListener ( 'input' , onedit ) ;
cheezenotes . addEventListener ( 'keyup' , onkeyup ) ;
cheezenotes . addEventListener ( 'keypress' , onkeypress ) ;
cheezenotes . addEventListener ( 'keydown' , onkeydown ) ;
cheezenotes . addEventListener ( 'paste' , onpaste ) ;
cheezenotes . addEventListener ( 'copy' , oncopy ) ;
cheezenotes . addEventListener ( 'blur' , onblur ) ;
cheezenotes . addEventListener ( 'focus' , onfocus ) ;
cheezenotes . addEventListener ( 'drag' , ondrag ) ;
cheezenotes . addEventListener ( 'dragenter' , ondragenter ) ;
cheezenotes . addEventListener ( 'dragleave' , ondragleave ) ;
let saveButton = addButton ( 'saveButton' , ':save' , onsave ) ;
saveButton . disabled = true ;
saveButton . addEventListener ( 'click' , onsave ) ;
let taButton = document . getElementById ( 'taButton' ) ;
taButton . addEventListener ( 'click' , ontextarea ) ;
let lockButton = document . getElementById ( 'lockButton' ) ;
lockButton . addEventListener ( 'click' , onlockbutton ) ;
let boldButton = document . getElementById ( 'boldButton' ) ;
boldButton . addEventListener ( 'mousedown' , onboldbutton ) ;
let italicButton = document . getElementById ( 'italicButton' ) ;
italicButton . addEventListener ( 'mousedown' , onitalicbutton ) ;
let strikeButton = document . getElementById ( 'strikeButton' ) ;
strikeButton . addEventListener ( 'mousedown' , onstrikebutton ) ;
addSeparator ( ) ;
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 ) ;
lastButton ( addOnOffButton ( 'taButton' , ':notes' , ':notes' , ontextarea ) ) ;
disableFormatButtons ( ) ;
onload ( ) ;
}
