Merge pull request #845 from BBaoVanC/highlight-linked-comment

[client] Highlight linked comments to identify them

Author: ix5

docs/docs/guides/tips-and-tricks.rst

@@ -166,6 +166,21 @@ From `blog.mdosch.de <https://blog.mdosch.de/2018/05/20/isso-ip-adressen-woechen
 them to to zero.*
 
 
+Change linked comment highlight color
+-------------------------------------
+
+When you click a link that goes to a specific Isso comment (such as ``https://example.com/example-post/#isso-43``),
+the comment will be highlighted yellow and then fade out over a few seconds.
+
+Add the following CSS to your site to change that color (replace ``#3f3c1c`` with any color of your choice):
+
+.. code-block:: css
+
+   @keyframes isso-target-fade {
+     0% { background-color: #3f3c1c; }
+   }
+
+
 .. attention::
 
    This section of the Isso documentation is incomplete. Please help by expanding it.

isso/css/isso.css

@@ -162,6 +162,19 @@
     display: none;
 }
 
+/* "target" means the comment that's being linked to, for example:
+ * https://example.com/blog/example/#isso-15
+ */
+.isso-target {
+    animation: isso-target-fade 5s ease-out;
+}
+@keyframes isso-target-fade {
+    0% { background-color: #eee5a1; }
+    /* This color should be changed when used on a dark background,
+     * maybe #3f3c1c for example
+     */
+}
+
 .isso-postbox {
     max-width: 68em;
     margin: 0 auto 2em;

isso/js/embed.js

@@ -54,6 +54,19 @@ function init() {
     // and the call to fetch those is in fetchComments()
     isso_thread.append(heading);
     isso_thread.append('<div id="isso-root"></div>');
+
+    window.addEventListener('hashchange', function() {
+        if (!window.location.hash.match("^#isso-[0-9]+$")) {
+            return;
+        }
+
+        var existingTarget = $(".isso-target");
+        if (existingTarget != null) {
+            existingTarget.classList.remove("isso-target");
+        }
+
+        $(window.location.hash + " > .isso-text-wrapper").classList.add("isso-target");
+    });
 }
 
 function fetchComments() {
@@ -105,6 +118,11 @@ function fetchComments() {
             if (window.location.hash.length > 0 &&
                 window.location.hash.match("^#isso-[0-9]+$")) {
                 $(window.location.hash).scrollIntoView();
+
+                // We can't just set the id to `#isso-target` because it's already set to `#isso-[number]`
+                // So a class `.isso-target` has to be used instead, and then we can manually remove the
+                // class from the old target comment in the `hashchange` listener.
+                $(window.location.hash + " > .isso-text-wrapper").classList.add("isso-target");
             }
         },
         function(err) {

isso/js/tests/integration/highlight-comments.test.js

@@ -0,0 +1,45 @@
+const ISSO_ENDPOINT = process.env.ISSO_ENDPOINT ?
+  process.env.ISSO_ENDPOINT : 'http://localhost:8080';
+
+beforeEach(async () => {
+  await page.goto(
+    ISSO_ENDPOINT + '/demo#isso-1',
+    { waitUntil: 'load' }
+  )
+  await expect(page.url()).toBe(ISSO_ENDPOINT + '/demo/index.html#isso-1');
+})
+
+test('Linked should be highlighted', async () => {
+  await expect(page).toFill(
+    '.isso-textarea',
+    'A comment with *italics* and [a link](http://link.com)'
+  );
+  const [postCreated] = await Promise.all([
+    page.waitForResponse(async (response) =>
+      response.url().includes('/new') && response.ok(),
+      { timout: 500 }
+    ),
+    expect(page).toClick('.isso-post-action > input[type=submit]'),
+  ]);
+
+  // Refresh page to arm window.location.hash listeners
+  await page.goto(
+    ISSO_ENDPOINT + '/demo#isso-1',
+    { waitUntil: 'load' }
+  )
+
+  let highlightedComment = await expect(page).toMatchElement('#isso-1');
+  let wrapper = await expect(highlightedComment).toMatchElement('.isso-target');
+
+  // Use another (invalid) hash
+  await page.goto(
+    ISSO_ENDPOINT + '/demo#isso-x',
+    { waitUntil: 'load' }
+  )
+  await expect(page).not.toMatchElement('.isso-target');
+
+  // Cleanup
+  // Need to click once to surface "confirm" and then again to confirm
+  await expect(page).toClick('#isso-1 > .isso-text-wrapper > .isso-comment-footer > .isso-delete');
+  await expect(page).toClick('#isso-1 > .isso-text-wrapper > .isso-comment-footer > .isso-delete');
+});

isso/js/tests/integration/puppet.test.js

@@ -128,4 +128,23 @@ test("should fill Postbox with valid data and receive 201 reply", async () => {
     .toEqual(
       expect.objectContaining(expected)
     );
+
+  await page.waitForSelector('#isso-1 > .isso-text-wrapper > .isso-comment-footer > .isso-edit');
+
+  // Edit comment
+  await expect(page).toClick('#isso-1 > .isso-text-wrapper > .isso-comment-footer > .isso-edit');
+  await expect(page).toFill(
+    '#isso-1 > .isso-text-wrapper > .isso-textarea-wrapper > .isso-textarea',
+    'Some other comment. *Emphasis* and [a link](https://example.com/foo).'
+  );
+  // .isso-edit is now 'Save' button
+  await expect(page).toClick('#isso-1 > .isso-text-wrapper > .isso-comment-footer > .isso-edit');
+
+  await expect(page).toMatchElement('#isso-1 > .isso-text-wrapper > .isso-text',
+    { text: 'Some other comment. Emphasis and a link.' });
+
+  // Delete comment again
+  await expect(page).toClick('#isso-1 > .isso-text-wrapper > .isso-comment-footer > .isso-delete');
+  // Need to click once to surface "confirm" and then again to confirm
+  await expect(page).toClick('#isso-1 > .isso-text-wrapper > .isso-comment-footer > .isso-delete');
 });

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "test": "jest --config isso/js/jest.config.js isso/js/tests/",
     "test-unit": "jest --config isso/js/jest-unit.config.js isso/js/tests/unit/",
-    "test-integration": "jest --config isso/js/jest-integration.config.js isso/js/tests/integration/",
+    "test-integration": "jest --runInBand --config isso/js/jest-integration.config.js isso/js/tests/integration/",
     "build-dev": "webpack --config isso/js/webpack.config.js --config-name dev",
     "watch-dev": "webpack --config isso/js/webpack.config.js --config-name dev --watch",
     "build-prod": "webpack --config isso/js/webpack.config.js --merge --config-name dev --config-name prod"