Version 2.0

rberenguel · Nov 24, 2024 · 45de35c · 45de35c
1 parent 21e997e
commit 45de35c
Show file tree

Hide file tree

Showing 83 changed files with 324 additions and 142 deletions.
diff --git a/README.md b/README.md
@@ -11,7 +11,9 @@
 
 An extension to take and annotate screenshots.
 
-It can also be used in a standalone way by visiting https://www.mostlymaths.net/goita/ To annotate an image you have in your clipboard, press `q`, otherwise you can paste pieces of images using `v` [NOTE: this is broken in Safari due to some clipboard permission issue]. Depending on the browser you may need to click "paste", or accept some clipboard access permissions. All images and text are processed locally, no data is sent anywhere.
+It can also be used in a standalone way by visiting https://www.mostlymaths.net/goita/ To annotate an image you have in your clipboard, press `q`, otherwise you can paste pieces of images using `v` [NOTE: this is broken in Safari due to some clipboard permission issue]. Depending on the browser you may need to click "paste", or accept some clipboard access permissions. Use `m` to have fun with memes.
+
+All images and text are processed locally, no data is sent anywhere.
 
 ## Demo video
 
@@ -31,43 +33,43 @@ Also, two features I have wanted for a while:
 
 2. In addition to an image, **it can export the screenshot as a `data:base64` encoded URL**, where the image is clickable (combines with point 1). I can't embed an example in a README (github seems to throw such a long URL away) but you can find it in [`media/data-url-example`](https://raw.githubusercontent.com/rberenguel/goita/refs/heads/gh-pages/media/data-url-example), copy that blob of text in the URL of your browser (tested in Chrome and Safari) and you should see a screenshot as the one above, clickable.
 
-## Annotation features
-
-For all these, creation and deletion (click the element and press backspace) should be possible.
-
-- [x] Choose color: press `c` and then one of:
-  - `r`: Red (this is the default).
-  - `y`: Yellow.
-  - `b`: Blue.
-  - `g`: Green.
-  - `w`: White.
-  - `x`: Redact (will use solid black in everything).
-  - `c`: To cancel the "choose color" mode.
-- [x] Rectangles: press `r` and drag to create.
-- [x] Arrows: press `a` and drag to create from source to destination.
-- [x] Text: press `t` and click to place.
-  - [x] `Ctrl-.` and `Ctrl-,` increase and decrease the font for text, respectively.
-  - [x] `Ctrl + scrollwheel` over a text block increase / decrease the size of the bounding box.
-  - [x] `Ctrl-/` Cycle through fonts (Monoid, Reforma1969, Inter, Roboto)
-- [x] Highlight: press `s` and drag to create. Use color `x` to redact. (why `s` and not `h`? Because all other shape/tool letters are on the left hand)
-- [x] Redact: Use highlighting with color "redact".
-- [x] Clip-on-drag the initial screenshot: press `k` at any time.
-  - The resulting clipped block is draggable after clicking on it to select it.
-  - Shift-dragging drags the clip.
-  - Select the clipped image and press `k` again to restore the viewframe.
-- [x] Paste images from the clipboard: press `v` and then click somewhere.
-  - The pasted image is draggable.
-  - The pasted image can be deleted by pressing backspace (like any other element after selection).
-  - `Ctrl + scrollwheel` over a pasted image resizes it.
-- [x] Paste HTML text from the clipboard: press `v` and then click somewhere.
-  - The pasted text is draggable.
-  - The pasted text is contenteditable.
-  - The pasted image can be deleted by pressing backspace (like any other element after selection).
-  - [x] Handle `text/plain`
-- [x] Circles/ellipses: press `p` and drag, like a rectangle
-- [x] The current mode and color (when drawing) is showed in the extension badge. Make sure to pin it.
-- [x] Control font size for text (it is fixed and the same for all blocks)
-- [x] Most shortcuts are quickly customizable in a single file (`shortcuts.js`)
+## Features and functionality
+
+Taken from the extension's help modal. These are the default shortcut keys.
+
+- `a`: draw an arrow
+- `r`: draw a rectangle
+- `p`: draw an ellipse
+- `s`: highlight an area
+- `t`: write text
+  - `ctrl .`: Make text larger (for this text block)
+  - `ctrl ,`: Make text smaller (for this text block)
+  - `ctrl /`: Cycle through fonts (Monoid, Reforma, Inter, Roboto)
+  - `ctrl + scrollwheel`: Resize the text bounding box
+  - `ctrl + c`: Center the text
+- `v`: paste images or text from the clipboard
+  - `ctrl + scrollwheel`: Resize the pasted image while selected
+- `k`: clip the screenshot
+  - `drag`: dragging moves the clipped image
+  - `shift+drag`: dragging moves the clipping rectangle
+- `q`: swap the screenshot for whatever image there is on the clipboard (or go back to the screenshot)
+- `c`: choose color for the next operations
+  - `r`: red (default)
+  - `y`: yellow
+  - `b`: blue
+  - `g`: green
+  - `o`: orange
+  - `w`: white
+  - `x`: black (and highlight then redacts)
+- `m`: enter meme selection, it will be placed on the last click and behave as a pasted image
+  - `type`: to dynamically search through the list of memes
+  - `tab`: to display meme thumbnails
+  - `enter`: to select the topmost meme
+  - `click`: on the image or name to select it
+  - `paste`: an external meme URL (should be valid) to use that instead
+  - `esc`: to dismiss
+- `z`: switch between the screenshot and a white canvas (better for tweaking memes or diagrams)
+- `backspace`: delete anything selected
 
 ## Installation
 

diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -61,6 +61,6 @@
     </div>
     <div id="filter-text"></div>
     <div id="filtered-memes"></div>
-    <script type="module" src="main.js"></script>
+    <script type="module" src="src/main.js"></script>
   </body>
 </html>
diff --git a/manifest.json b/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Goita",
   "description": "Take a screenshot, add arrows and sh*t as you wish. With blackjack, and memes",
-  "version": "1.9.3",
+  "version": "2.0.0",
   "permissions": [
     "tabs",
     "activeTab",

diff --git a/media/favicon.ico b/media/favicon.ico
diff --git a/media/icon.ico b/media/icon.ico
diff --git a/memes/always-been.jpg b/memes/always-been.jpg
diff --git a/memes/american-chopper.jpg b/memes/american-chopper.jpg
diff --git a/memes/ancient-aliens.jpg b/memes/ancient-aliens.jpg
diff --git a/memes/bart-chair.jpg b/memes/bart-chair.jpg
diff --git a/memes/batman-slapping.jpg b/memes/batman-slapping.jpg
diff --git a/memes/batman-thinking.jpg b/memes/batman-thinking.jpg
diff --git a/memes/be-normal.jpg b/memes/be-normal.jpg
diff --git a/memes/boardroom-suggestion.jpg b/memes/boardroom-suggestion.jpg
diff --git a/memes/cadaver.jpg b/memes/cadaver.jpg
diff --git a/memes/carbon-rod.jpg b/memes/carbon-rod.jpg
diff --git a/memes/change-my-mind.jpg b/memes/change-my-mind.jpg
diff --git a/memes/confused-travolta.jpg b/memes/confused-travolta.jpg
diff --git a/memes/distracted-boyfriend.jpg b/memes/distracted-boyfriend.jpg
diff --git a/memes/do-today.jpg b/memes/do-today.jpg
diff --git a/memes/facepalm.jpg b/memes/facepalm.jpg
diff --git a/memes/flex-tape.jpg b/memes/flex-tape.jpg
diff --git a/memes/go-banana.jpg b/memes/go-banana.jpg
diff --git a/memes/hammocks.jpg b/memes/hammocks.jpg
diff --git a/memes/harold.jpg b/memes/harold.jpg
diff --git a/memes/homer-terminator.jpg b/memes/homer-terminator.jpg
diff --git a/memes/i-hate-this-more.jpg b/memes/i-hate-this-more.jpg
diff --git a/memes/invisible-typewriter.jpg b/memes/invisible-typewriter.jpg
diff --git a/memes/is-this-a-pigeon.jpg b/memes/is-this-a-pigeon.jpg
diff --git a/memes/khaaan.jpg b/memes/khaaan.jpg
diff --git a/memes/kick-barney.jpg b/memes/kick-barney.jpg
diff --git a/memes/kill-it-with-fire.jpg b/memes/kill-it-with-fire.jpg
diff --git a/memes/left-exit-12.jpg b/memes/left-exit-12.jpg
diff --git a/memes/make-it-so.jpg b/memes/make-it-so.jpg
diff --git a/memes/memes.js b/memes/memes.js
@@ -14,12 +14,12 @@ const memes = [
   {
     title: "Confused Travolta",
     file: "confused-travolta.jpg",
-    keywords: ["confused", "travolta", "pulp fiction"],
+    keywords: ["confused travolta", "pulp fiction"],
   },
   {
     title: "Homer Terminator",
     file: "homer-terminator.jpg",
-    keywords: ["terminator", "homer", "rod tod", "simpsons"],
+    keywords: ["terminator homer", "rod tod", "simpsons"],
   },
   {
     title: "Ralph: Go Banana",
@@ -29,7 +29,12 @@ const memes = [
   {
     title: "Ralph (Chuckles): I'm in Danger",
     file: "ralph-danger.jpg",
-    keywords: ["ralph chuckle in danger", "ralph", "simpsons"],
+    keywords: [
+      "Ralph (Chuckles): I'm in Danger",
+      "ralph chuckle in danger",
+      "ralph",
+      "simpsons",
+    ],
   },
   {
     title: "Skinner Out of Touch",
@@ -310,6 +315,12 @@ const memes = [
     ],
   },
 
+  {
+    title: "Picard Facepalm",
+    file: "facepalm.jpg",
+    keywords: ["Picard facepalm", "facepalm", "jean-luc picard", "star trek"],
+  },
+
   {
     title: "Khaaan!",
     file: "khaaan.jpg",
@@ -416,8 +427,15 @@ const memes = [
   },
 ];
 
-const filterTextElement = document.getElementById("filter-text");
-const filteredMemesElement = document.getElementById("filtered-memes");
+const filterTextElement =
+  document.getElementById("filter-text") ||
+  document.body.appendChild(document.createElement("div"));
+filterTextElement.id = "filter-text";
+
+const filteredMemesElement =
+  document.getElementById("filtered-memes") ||
+  document.body.appendChild(document.createElement("div"));
+filteredMemesElement.id = "filtered-memes";
 
 function filterMemes(text, settings = {}) {
   const lowerCaseText = text.toLowerCase();
@@ -452,7 +470,6 @@ function filterMemes(text, settings = {}) {
 }
 
 function displayMemes(memes, settings) {
-  console.log(memes);
   const container = document.getElementById("meme-container");
 
   if (container) {

diff --git a/memes/not-sure-if-fry.jpg b/memes/not-sure-if-fry.jpg
diff --git a/memes/nothing-to-see-here.jpg b/memes/nothing-to-see-here.jpg
diff --git a/memes/old-man-yells.jpg b/memes/old-man-yells.jpg
diff --git a/memes/one-does-not-simply.jpg b/memes/one-does-not-simply.jpg
diff --git a/memes/one-of-us.jpg b/memes/one-of-us.jpg
diff --git a/memes/pepe-silvia.jpg b/memes/pepe-silvia.jpg
diff --git a/memes/pingu-dont-want-to.jpg b/memes/pingu-dont-want-to.jpg
diff --git a/memes/pingu-toot.jpg b/memes/pingu-toot.jpg
diff --git a/memes/ptsdog.jpg b/memes/ptsdog.jpg
diff --git a/memes/raccoon-plan.jpg b/memes/raccoon-plan.jpg
diff --git a/memes/raccoon-praise.jpg b/memes/raccoon-praise.jpg
diff --git a/memes/ralph-danger.jpg b/memes/ralph-danger.jpg
diff --git a/memes/say-it-bart.jpg b/memes/say-it-bart.jpg
diff --git a/memes/shut-up-and-take-my-money.jpg b/memes/shut-up-and-take-my-money.jpg
diff --git a/memes/side-eye-monkey.jpg b/memes/side-eye-monkey.jpg
diff --git a/memes/skinner-idea.jpg b/memes/skinner-idea.jpg
diff --git a/memes/smarts.jpg b/memes/smarts.jpg
diff --git a/memes/so-far.jpg b/memes/so-far.jpg
diff --git a/memes/spice-adams.jpg b/memes/spice-adams.jpg
diff --git a/memes/spiderman-pointing.jpg b/memes/spiderman-pointing.jpg
diff --git a/memes/steamed-hams.jpg b/memes/steamed-hams.jpg
diff --git a/memes/stop-already.jpg b/memes/stop-already.jpg
diff --git a/memes/thought-police.jpg b/memes/thought-police.jpg
diff --git a/memes/to-do-webcomicname-dot-com.jpg b/memes/to-do-webcomicname-dot-com.jpg
diff --git a/memes/tom-gauld-science-hell.jpg b/memes/tom-gauld-science-hell.jpg
diff --git a/memes/two-buttons.jpg b/memes/two-buttons.jpg
diff --git a/memes/wink-wink.jpg b/memes/wink-wink.jpg
diff --git a/src/help.js b/src/help.js
@@ -0,0 +1,66 @@
+export { createHelpDiv };
+
+function createHelpDiv() {
+  if (document.getElementById("help")) {
+    return;
+  }
+
+  const helpDiv = document.createElement("div");
+  helpDiv.id = "help";
+  helpDiv.classList.add("hide");
+
+  helpDiv.innerHTML = `
+      <p style="text-align: center"><code>Goita!</code> Ruben Berenguel 2024</p>
+      <hr />
+      <ul>
+        <li>Everything you can create can be dragged around and deleted.</li>
+        <li>Click to select things.</li>
+        <li>Drag to move them.</li>
+        <li>
+          If you prefer other shortcuts, change them in
+          <code>shortcuts.js</code> (only those
+          <span class="u">underlined</span> are configurable).
+        </li>
+      </ul>
+      <p><code>h</code> show and hide this help</p>
+      <p><code class="u">{arrow}</code> draw an arrow</p>
+      <p><code class="u">{rect}</code>: draw a rectangle</p>
+      <p><code class="u">{ellipse}</code> draw an ellipse</p>
+      <p><code class="u">{highlight}</code> highlight an area</p>
+      <p><code class="u">{text}</code> write text</p>
+      <p><code> ctrl .</code> Make text larger (for this text block)</p>
+      <p><code> ctrl ,</code> Make text smaller (for this text block)</p>
+      <p>
+        <code> ctrl /</code> Cycle through fonts (Monoid, Reforma, Inter,
+        Roboto)
+      </p>
+      <p><code> ctrl + scrollwheel</code> Resize the text bounding box</p>
+      <p><code> ctrl + c</code> Center the text</p>
+      <p><code class="u">{paste}</code> paste images or text from the clipboard</p>
+      <p><code> ctrl + scrollwheel</code> Resize the pasted image</p>
+      <p><code class="u">{clip}</code> clip the screenshot</p>
+      <p><code> drag</code> dragging moves the clipped image</p>
+      <p><code> shift+drag</code> dragging moves the clipping rectangle</p>
+      <p><code class="u">{clipboard}</code> swap the screenshot for whatever
+        image there is on the clipboard (or go back to the screenshot)</p>
+      <p><code class="u">{color}</code> choose color for the next operations</p>
+      <p><code> r</code> red (default)</p>
+      <p><code> y</code> yellow</p>
+      <p><code> b</code> blue</p>
+      <p><code> g</code> green</p>
+      <p><code> o</code> orange</p>
+      <p><code> w</code> white</p>
+      <p><code> x</code> black (and highlight then redacts)</p>
+      <p><code>{memes}</code>: enter meme selection, it will be placed on the last click</p>
+      <p><code> type</code> to dynamically search through the list of memes</p>
+      <p><code> tab</code> to display meme thumbnails</p>
+      <p><code> enter</code> to select the topmost meme</p>
+      <p><code> click</code> on the image or name to select it</p>
+      <p><code> paste</code> an external meme URL (should be valid) to use that instead</p>
+      <p><code> esc</code> to dismiss</p>
+      <p><code>{empty}</code>: switch between the screenshot and a white canvas (better for tweaking memes or diagrams)</p>
+      <p><code>backspace</code>: delete anything selected</p>
+    `;
+
+  document.body.insertBefore(helpDiv, document.body.firstChild);
+}
diff --git a/src/screenshot.html b/src/screenshot.html
@@ -6,54 +6,6 @@
     <link href="style.css" rel="stylesheet" />
   </head>
   <body>
-    <div id="help" class="hide">
-      <p style="text-align: center"><code>Goita!</code> Ruben Berenguel 2024</p>
-      <hr />
-      <ul>
-        <li>Everything you can create can be dragged around and deleted.</li>
-        <li>Click to select things.</li>
-        <li>Drag to move them.</li>
-        <li>
-          If you prefer other shortcuts, change them in
-          <code>shortcuts.js</code> (only those
-          <span class="u">underlined</span> are configurable).
-        </li>
-      </ul>
-      <p><code>h</code> show and hide this help</p>
-      <p><code class="u">{arrow}</code> draw an arrow</p>
-      <p><code class="u">{rect}</code>: draw a rectangle</p>
-      <p><code class="u">{ellipse}</code> draw an ellipse</p>
-      <p><code class="u">{highlight}</code> highlight an area</p>
-      <p><code class="u">{text}</code> write text</p>
-      <p><code> ctrl .</code> Make text larger (for this text block)</p>
-      <p><code> ctrl ,</code> Make text smaller (for this text block)</p>
-      <p>
-        <code> ctrl /</code> Cycle through fonts (Monoid, Reforma, Inter,
-        Roboto)
-      </p>
-      <p><code> ctrl + scrollwheel</code> Resize the text bounding box</p>
-      <p><code> ctrl + c</code> Center the text</p>
-      <p>
-        <code class="u">{paste}</code> paste images or text from the clipboard
-      </p>
-      <p><code> ctrl + scrollwheel</code> Resize the pasted image</p>
-      <p><code class="u">{clip}</code> clip the screenshot</p>
-      <p><code> drag</code> dragging moves the clipped image</p>
-      <p><code> shift+drag</code> dragging moves the clipping rectangle</p>
-      <p>
-        <code class="u">{clipboard}</code> swap the screenshot for whatever
-        image there is on the clipboard (or go back to the screenshot)
-      </p>
-      <p><code class="u">{color}</code> choose color for the next operations</p>
-      <p><code> r</code> red (default)</p>
-      <p><code> y</code> yellow</p>
-      <p><code> b</code> blue</p>
-      <p><code> g</code> green</p>
-      <p><code> o</code> orange</p>
-      <p><code> w</code> white</p>
-      <p><code> x</code> black (and highlight then redacts)</p>
-      <p><code>backspace</code>: delete anything selected</p>
-    </div>
     <div id="screenshotContainer">
       <div id="sourceLink"></div>
       <svg id="svgOverlay"></svg>