Name

notebook

Global

#import monaco
#import jquery

function getCSS() {
 return `
  button > img {
   height:8px;
  }
 `;
}

function gen_notebook_document_widget(name) {
 var div = document.createElement('div');
 var titlespan = document.createElement('span');
 var savebutton = document.createElement('button');
 var quitbutton = document.createElement('button');
 var deletebutton = document.createElement('button');
 var editordiv = document.createElement('div');
 titlespan.innerText = name;
 savebutton.innerText = 'Save';
 quitbutton.innerText = 'Quit';
 deletebutton.innerText = 'Delete';
 savebutton.innerText='Save';
 titlespan.style.fontWeight = 500;
 editordiv.style.height = '500px';
 div.append(savebutton);
 div.append(quitbutton);
 div.append(deletebutton);
 div.append(titlespan);
 div.append(editordiv);
 quitbutton.addEventListener('click',()=>{
  div.remove();
 });
 deletebutton.addEventListener('click',()=>{
  $(div).remove();
  $('body>div>button').each((i,e)=>{
   if(e.innerText==name) {
    $(e).remove();
   }
  });
  $.post('/skey/set/notebook.'+name,'',()=>{});
  $.post('/skey/get/notebook_list',data=>{
   data=JSON.parse(data||'[]').filter(item=>item!=name);
   $.post('/skey/set/notebook_list',JSON.stringify(data),()=>{}); 
  });
 });
 $.post('/skey/get/notebook.'+name,function filleditor(data) {
  if(!window.monaco) {
   return getmonaco(()=>{filleditor(data)});
  }
  var editor = monaco.editor.create(editordiv,{
   value:data,
   language:'plain',
   theme:'vs-light'
  });
  savebutton.addEventListener('click',()=>{
   $.post('/skey/set/notebook.'+name,editor.getValue(),()=>{});
   if(!data) { //This was opened new and we must add it to our list of files.
    $.post('/skey/get/notebook_list',data=>{
     var isuniq=true;
     data = JSON.parse(data||'[]');
     data.forEach(item=>{
      if(item==name) {
       isuniq=false;
      }
     });
     if(isuniq) {
      data.push(name);
     }
     $('body>div>button').last().after(gen_notebook_launch_button(name,$('body>div').first()));
     $.post('/skey/set/notebook_list',JSON.stringify(data),()=>{});
    });
   }
  });
 });
 return div;
}
function gen_notebook_launch_button(name,notebook) {
 var button = document.createElement('button');
 button.innerText = name;
 button.addEventListener('click',()=>{
  notebook.append(gen_notebook_document_widget(name));
 });
 return button;
}
function gen_notebook_launch_textarea(notebook) {
 var span = document.createElement('span');
 var input = document.createElement('input');
 var button = document.createElement('button');
 var img = document.createElement('img');
 input.placeholder='New';
 img.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcBAMAAACAI8KnAAAAJ1BMVEUAAACVpaaVpaaVpaaVpaaVpaaVpaaVpaaVpaaVpaaVpaaVpaaVpaaIwTQzAAAADHRSTlMAAQ4eLTxAiJHa+f1EOsXaAAAAV0lEQVQYV2NgAAGRtFQFMAMCas6c2YTEXXPmzFEk7pkzZ47RmiuSBgRA7gkgBXQa0EEIsAnkIAQ4CtKGAMcIcOcgc48wWCLxThWiO4O+3DkgByGAJcxBAMSWjllqjf8HAAAAAElFTkSuQmCC';
 button.append(img);
 span.append(input);
 span.append(button);
 button.addEventListener('click',()=>{
  if(input.value.trim().length===0) {   return;  }
  var newname = input.value.trim();
  notebook.append(gen_notebook_document_widget(newname));
  input.value = '';
  //$('body>div').first().append(gen_notebook_launch_button(newname,notebook));
 });
 input.addEventListener('keydown',e=>{
  if(e.keyCode==13) {
   button.click();
  }
 });
 return span;
}
function gen_notebook_launch_widget() {
 var div = document.createElement('div');
 $.post('/skey/get/notebook_list',(data)=>{
  data=JSON.parse(data||'[]');
  div.append(gen_notebook_launch_textarea(div));
  data.forEach(name=>{
   div.append(gen_notebook_launch_button(name,div));
  });
 });
 return div;
}

function startNotebook () {
 add_style(getCSS());
 getjquery(()=>{
  $('body').append(gen_notebook_launch_widget());
 });
}

function start () {
 startNotebook();
}

Init

startNotebook();

Build

notebook