Skip to content

Instantly share code, notes, and snippets.

@Gozala
Gozala / Readme.md
Last active January 12, 2021 13:52
Range hilighting code by wrapping text nodes of the range & replacing images.

Highlight Selection Ranges

Code here takes a DOM Selection Range instance and starts traversing a DOM starting from startContainer up to endContainer and wraps Text elements with elements that have semi-transparent background & swaps img elements with clones that are styled to have semi-transparent yellow overlay.

Issues

  • Only handles selecting text and images & would not cover divs with backgrounds for instance.
@Gozala
Gozala / Readme.md
Last active June 8, 2023 07:31
Range hilighting code using getClientRects API

Highlight Selection Ranges

Code here takes a DOM Selection Range instance and creates a highlighting for it by using getClientRects. Approach was inspired by marks although here function attempts to find nearest positioned parent element to the commonAncestorContainer and draw all the highilighting rectangles there, this avoids issues with an overflowing content.

Issues

  • Approach ignores z-index which isn't great as some element might be overlaying the selection in which case it should not appear, but it does if we use high z-index value. If we use low z-index value then some elements (possibly ones containing selection) might end up overlaying selection itself.
  • Rendered selections are scattered all o
@Bill
Bill / docker-compose.yml
Last active July 8, 2022 07:10
Run a local Hypothes.is annotation server (and the services it needs) via docker-compose
# This docker-compose.yml will run the Hypothes.is annotation server.
# (adapted from instructions here https://h.readthedocs.org/en/latest/INSTALL.html)
#
# Place this file in the working directory (clone of https://github.com/hypothesis/h)
# run with docker-compose up -d
#
# Now browse to Hypothes.is at http://192.168.59.103:8000/ and create an account
# You'll see the invitation email in Mailcatcher at http://192.168.59.103:1080/
# Click that invitation link and log in on your local Hypothes.is
# And you are ready to annotate!
@max-mapper
max-mapper / readme.md
Last active October 20, 2020 03:21
node modules for converting PDFs into other formats
@kidoman
kidoman / annotator.js
Last active January 9, 2016 15:32
A annotation library
function highlight(range) {
var textNodes = allTextNodes(range)
// Wrap all child text nodes
textNodes.forEach(function(node) {
var range = document.createRange()
range.selectNodeContents(node)
range.surroundContents(wrapperNode())
})
@cowboy
cowboy / ba-smallwalker.js
Created May 5, 2011 21:27
Small Walker: A small and simple JavaScript DOM walker
/*!
* Small Walker - v0.1.1 - 5/5/2011
* http://benalman.com/
*
* Copyright (c) 2011 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
// Walk the DOM, depth-first (HTML order). Inside the callback, `this` is the