Skip to content

Instantly share code, notes, and snippets.

@PixelRobot

PixelRobot/notes.js

Last active January 20, 2024 22:11
Show Gist options
  • Save PixelRobot/456b807549c729db0976 to your computer and use it in GitHub Desktop.
Save PixelRobot/456b807549c729db0976 to your computer and use it in GitHub Desktop.
Download ZIP
A bookmarklet for taking notes in the browser
Raw
notes.js
javascript:(
function(doc){
doc.write('<body contenteditable style="font:12px monospace; max-width:50em; margin:0; padding:10px;">');
var key = 'PixelRobot';
var body = doc.querySelector('body');
if (localStorage[key] != undefined)
body.innerHTML = localStorage[key];
else
body.innerHTML = 'Type your notes here';
body.oninput = function(){
localStorage[key] = body.innerHTML;
}
}
)(document);
@magasine
Copy link

magasine commented Apr 22, 2023 •
edited
Loading

I really liked the idea!
Collaborating with some modifications:

(function (doc) {
  if (doc.getElementById('myOverlay')) {
    return;
  }

  var key = 'PixelRobot';

  // cria camada de sobreposição
  var overlay = doc.createElement('div');
  overlay.setAttribute('id', 'myOverlay'); // adiciona um id para referência posterior
  overlay.style.position = 'fixed';
  overlay.style.top = '0';
  overlay.style.left = '0';
  overlay.style.width = '100%';
  overlay.style.height = '100%';
  overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  overlay.style.zIndex = '9999';

  // cria container da modal
  var modal = doc.createElement('div');
  modal.style.position = 'absolute';
  modal.style.top = '50%';
  modal.style.left = '50%';
  modal.style.transform = 'translate(-50%, -50%)';
  modal.style.minWidth = '30vw';
  modal.style.maxWidth = '70vw';
  modal.style.minHeight = '5vh';
  modal.style.maxHeight = '70vh';
  modal.style.overflow = 'auto';
  modal.style.backgroundColor = '#fff';
  modal.style.padding = '10px';
  modal.style.borderRadius = '5px';
  modal.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';

  // cria conteúdo editável
  var content = doc.createElement('div');
  content.setAttribute('contenteditable', true);
  content.style.backgroundColor = '#fff';
  content.style.color = '#000';
  content.style.font = '14px monospace';
  content.style.border = '2px solid red';
  content.style.margin = '0';
  content.style.padding = '15px';

  // adiciona o conteúdo armazenado ou padrão
  if (localStorage[key] != undefined) {
    content.innerHTML = localStorage[key];
  } else {
    content.innerHTML = 'Type your notes here...';
  }

  // adiciona evento para armazenar o conteúdo editado
  content.oninput = function () {
    localStorage[key] = content.innerHTML;
  }

  // adiciona o conteúdo à modal
  modal.appendChild(content);

  // adiciona a modal à camada de sobreposição
  overlay.appendChild(modal);

  // adiciona a camada de sobreposição ao documento
  doc.body.appendChild(overlay);

  // adiciona evento de clique fora do contexto da modal para fechá-la
  overlay.addEventListener('click', function (e) {
    if (e.target === overlay) {
      overlay.remove();
    }
  });
})(document);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment