View all the memes together

rberenguel · Nov 25, 2024 · 70fb9bf · 70fb9bf
1 parent cfad024
commit 70fb9bf
Show file tree

Hide file tree

Showing 64 changed files with 137 additions and 61 deletions.
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@
 
 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`. Depending on the browser you may need to click "paste", or accept some clipboard access permissions. Use `m` to have fun with memes.
+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`. Depending on the browser you may need to click "paste", or accept some clipboard access permissions. Use `m` to have fun with memes. You can see all memes available [here](https://www.mostlymaths.net/goita/memes/) (it's also available from within the extension or the standalone help).
 
 All images and text are processed locally, no data is sent anywhere.
 

diff --git a/index.html b/index.html
@@ -6,54 +6,6 @@
     <link href="src/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>

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": "2.1.0",
+  "version": "2.2.0",
   "permissions": [
     "tabs",
     "activeTab",

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/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-bush.jpg b/memes/homer-bush.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/index.html b/memes/index.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Goita: all the memes</title>
+    <link href="../fonts/fonts.css" rel="stylesheet" />
+    <link href="../src/style.css" rel="stylesheet" />
+    <style>
+      #meme-container {
+        top: 1rem;
+        display: grid;
+        width: calc(100% - 2rem);
+        margin-left: 1rem;
+        position: absolute;
+        z-index: 1000;
+        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+        gap: 0em;
+        padding: 0;
+        background-color: white;
+        border-radius: 5px;
+        border: none;
+        backdrop-filter: blur(5px);
+      }
+
+      .blur {
+        filter: blur(1em);
+      }
+
+      .meme-img {
+        margin-bottom: 0.8rem;
+        padding: 0em;
+        width: 16rem;
+        height: 16rem;
+        border: none;
+        border-radius: 0.3rem;
+        border: 1px solid black;
+      }
+
+      .meme-img > img {
+        border: none;
+      }
+
+      #enlarged {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 1000;
+        opacity: 1;
+        transition: opacity 0.5s ease-in-out;
+        padding: 0.5rem;
+        background: white;
+        border: 2px solid black;
+        border-radius: 0.5rem;
+      }
+
+      #enlarged > img {
+        max-height: 50vh;
+        border-radius: 0.3rem 0.3rem 0 0;
+      }
+
+      #enlarged.hidden {
+        opacity: 0;
+      }
+
+      .meme-title {
+        border-top: 2px solid #630;
+        font-size: 190%;
+      }
+
+      .close {
+        position: absolute;
+        right: 1.5em;
+        top: 1.5em;
+        cursor: pointer;
+        transition: transform 0.1s ease-in-out;
+        transform: translateX(0em);
+      }
+    </style>
+  </head>
+  <body>
+    <div id="filtered-memes"></div>
+    <div id="enlarged" class="hidden"></div>
+    <script type="module" src="show.js"></script>
+  </body>
+</html>
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
@@ -1,4 +1,4 @@
-export { filterMemes, displayMemes };
+export { memes, filterMemes, displayMemes };
 
 const memes = [
   {
@@ -440,6 +440,11 @@ const memes = [
     file: "xkcd-dependency.jpg",
     keywords: ["xkcd dependency", "developer", "xkcd"],
   },
+  {
+    title: "I have no idea what I'm doing",
+    file: "no-idea.jpg",
+    keywords: ["I have no idea what I'm doing", "dog", "confused"],
+  },
 ];
 
 const filterTextElement =
@@ -499,21 +504,16 @@ function displayMemes(memes, settings) {
 
   memes.forEach((meme) => {
     const memeDiv = document.createElement("div");
-    memeDiv.style.border = "1px solid #ccc";
-    memeDiv.style.overflow = "hidden"; // Hide any content that overflows
-    memeDiv.style.position = "relative";
     const img = document.createElement("img");
     img.src = settings.basepath + "memes/" + meme.file;
     img.alt = meme.title;
     img.style.width = "100%";
     img.style.height = "100%";
     img.style.objectFit = "cover"; // This is key for square trimming
-
+    memeDiv.classList.add("meme-div");
     memeDiv.appendChild(img);
     memeDiv.dataset["title"] = meme.title;
     memeDiv.classList.add("meme-img");
-    memeDiv.style.width = "12em"; // Set a fixed width
-    memeDiv.style.height = "12em"; // Set the same height for a square
     memeDiv.addEventListener("click", settings.callback("memes/" + meme.file));
     newContainer.appendChild(memeDiv);
   });

diff --git a/memes/no-idea.jpg b/memes/no-idea.jpg
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/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/show.js b/memes/show.js
@@ -0,0 +1,34 @@
+import { memes, displayMemes } from "./memes.js";
+
+const cb = (a) => () => {};
+
+displayMemes(memes, { basepath: "../", callback: cb });
+
+const enlarged = document.getElementById("enlarged");
+const container = document.getElementById("meme-container");
+
+document.addEventListener("click", (ev) => {
+  if (
+    ev.target.nodeName === "IMG" &&
+    ev.target.closest(".meme-img") &&
+    enlarged.classList.contains("hidden")
+  ) {
+    enlarged.innerHTML = "";
+    const img = document.createElement("IMG");
+    const closer = document.createElement("DIV");
+    closer.classList.add("close");
+    closer.innerHTML = "&#x274C;";
+    const title = document.createElement("DIV");
+    title.classList.add("meme-title");
+    title.innerHTML = ev.target.closest(".meme-img").dataset["title"];
+    img.src = ev.target.src;
+    enlarged.appendChild(img);
+    enlarged.appendChild(closer);
+    enlarged.appendChild(title);
+    enlarged.classList.remove("hidden");
+    container.classList.add("blur");
+  } else {
+    enlarged.classList.add("hidden");
+    container.classList.remove("blur");
+  }
+});
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/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/memes/xkcd-compiling.jpg b/memes/xkcd-compiling.jpg
diff --git a/memes/xkcd-dependency.jpg b/memes/xkcd-dependency.jpg
diff --git a/src/help.js b/src/help.js
@@ -1,10 +1,9 @@
 export { createHelpDiv };
 
-function createHelpDiv() {
+function createHelpDiv(settings = {}) {
   if (document.getElementById("help")) {
     return;
   }
-
   const helpDiv = document.createElement("div");
   helpDiv.id = "help";
   helpDiv.classList.add("hide");
@@ -57,6 +56,7 @@ function createHelpDiv() {
       <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>      </code> see all memes <a href="${settings.basepath}/memes/index.html">here</a></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>

diff --git a/src/screenshot.js b/src/screenshot.js
@@ -169,7 +169,7 @@ const setupAllTheThings = (testImage, basepath) => () => {
 
   const svg = document.getElementById("svgOverlay");
 
-  createHelpDiv();
+  createHelpDiv({ basepath: basepath });
 
   const help = document.getElementById("help");
 

diff --git a/src/style.css b/src/style.css
@@ -174,8 +174,13 @@ svg {
   backdrop-filter: blur(5px);
 }
 
-#meme-container > div {
+.meme-img {
   padding: 0em;
+  width: 12em;
+  height: 12em;
+  border: 1px solid #ccc;
+  overflow: hidden;
+  position: relative;
 }
 
 .meme-img[data-title]:hover::after {