magasine/scrollToHighlights.js

## scrollToHighlights.js
javascript: (function () {
   let vCounter = 0;
   let objAnchors = {};
   let popup;
   let popupStyle = `<style>
      #id_popup:hover {
         border: 2px solid red;
      }
      #id_popup {
         background-color: yellow !important;
         border-radius: 10px;
         border: 2px solid gray;
         color: blue !important;
         clear: left;
         font-family: sans-serif;
         font-size: 1rem;
         margin: 0px;
         overflow: auto;
         padding: 10px;
         position: fixed;
         right: 10px;
         text-align: left;
         top: 100px;
         transition: width 2s height 4s;
         z-zndex: 2147483647;
      }
      #id_popup_title {
         background-color: yellow !important;
      }
      .highlight {
         background-color: yellow !important;
         border-radius: 10px;
         border: 1px solid red;
         color: blue !important;
         padding: 2px;
      }
      #id_btn_fake {
         background-color: white !important;
         border-radius: 5px;
         border: 1px dashed blue;
         color: blue;
         margin: 1px;
         padding: 0px 2px 0px;
      }
      #id_btn_clear {
         background-color: white !important;
         border-radius: 5px;
         border: 1px solid blue;
         color: blue;
         font-size: smaller;
         padding: 0px 2px 0px 2px;
      }
      </style>`

   // Create popup and their elements
   function createPopup() {

      // The current window was opened by another window
      // Prevent the source page from changing the CSS properties of the popup window
      if (window.opener) {
         window.opener.focus();
      }

      // Create the popup element
      popup = document.createElement('div');
      popup.setAttribute('id', 'id_popup');

      // Create the iframe element and append it to the popup
      const iframe = document.createElement('iframe');
      iframe.setAttribute('id', 'id_iframe_STHL');
      popup.appendChild(iframe);

      // Set the style and content of the popup title
      document.head.innerHTML += popupStyle;
      popup.innerHTML = '<div id="id_popup_title"> <details> <summary> <strong>Scroll to Highlights</strong> </summary> <sup> Install or update from <a href="https://gist.github.com/magasine/33a2456d21101dc535ed017a896973f7" target="_blank">GitHub Gist</a> - (<a href="https://twitter.com/magasine" target="_blank">@magasine</a>) </sup> </details> <small> <li>Highlights mark: use hotkeys <button id=id_btn_fake style="cursor: not-allowed;">ctrl</button> + <button id=id_btn_fake style="cursor: not-allowed;">click</button></li><li>Highlights on/off: change checkboxes</li><li>Popup on/off: re-run bookmarklet</li></small></div>';

      // Create the clear button
      const clearButton = document.createElement('button');
      clearButton.setAttribute('id', 'id_btn_clear');
      clearButton.innerHTML = 'clear and reload page from cache';

      // Add an event listener to the button to clear the popup when clicked
      clearButton.addEventListener('click', function () {
         hlClear();
         popup.parentNode.removeChild(popup);
         // window.location.reload();     // this will reload the current page from the server
         window.location.reload(true);    // this will reload the page from the cache instead of the server
      });

      // Append the clear button to the popup and text
      popup.innerHTML += '<div id="id_tags_title" style="color: blue;"><strong>... Start</strong><br><small>Select text and press hotkeys</small></div>';
      popup.appendChild(clearButton);

      // Append the popup to the document body
      document.body.appendChild(popup);
   }

   // Toggle popup visibility
   function togglePopup() {
      let popup = document.getElementById("id_popup");
      if (popup.style.display === 'none') {
         popup.style.display = 'block';
      } else {
         popup.style.display = 'none';
      }
   }

   // Create menu items in popup
   function createItem(hl_text, hl_id) {
      // Create a checkbox element
      const checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.checked = true;
      checkbox.addEventListener('change', () => {
         const span = document.getElementById(hl_id);
         if (checkbox.checked) {
            span.style.backgroundColor = 'yellow';
            span.style.border = '1px solid red';
         } else {
            span.style.backgroundColor = '';
            span.style.border = '';
         }
      });

      // Create a label element
      const label = document.createElement('label');
      const hl_text_shortened = hl_text.substring(0, 20) + '...';
      label.innerHTML = hl_text;
      label.setAttribute('for', hl_id);
      label.setAttribute('id', hl_id + '-label');
      label.innerHTML = '&nbsp' + `<a href="#${hl_id}">${hl_text_shortened}</a>`;

      // Create a list item element
      const item = document.createElement('li');
      item.appendChild(checkbox);
      item.appendChild(label);

      return item;
   }

   // Create hash anchor with highlight id and storage
   function hlAnchor(hl_text) {
      vCounter += 1;
      const hl_id = `ScrollTo-${vCounter}`;
      localStorage.setItem(hl_id, hl_text);
      return hl_id;
   }

   // Clear highligts and remove itens from localStorage
   function hlClear() {

      const localStorageValues = Object.values(objAnchors);

      // Clear highlights e remove values
      for (let i = 0; i < localStorageValues.length; i++) {
         const lsv = document.getElementById(localStorageValues[i]);
         lsv.style.backgroundColor = '';
         lsv.style.border = '';
         localStorage.removeItem(localStorageValues[i]);
      }

      const localStorageKeys = Object.keys(localStorage);

      // Remove keys
      for (let i = 0; i < localStorageKeys.length; i++) {
         const lsk = localStorage.getItem(localStorageKeys[i]);
         if (lsk.includes('ScrollTo-')) {
            localStorage.removeItem(localStorageKeys[i]);
         }
      }
      objAnchors = {};
      vCounter = 0;
   }

   // Highlights selections
   function hlSelection() {
      if (window.getSelection) {
         const selection = window.getSelection();
         if (selection.rangeCount) {
            const range = selection.getRangeAt(0);
            const hl_text = range.toString();
            if (!objAnchors.hasOwnProperty(hl_text)) {
               const hl_id = hlAnchor(hl_text);
               objAnchors[hl_text] = hl_id;
               const span = document.createElement('span');
               span.id = hl_id;
               span.style.backgroundColor = 'yellow';
               span.style.border = '1px solid red';
               span.style.padding = '2px';
               range.surroundContents(span);
            }
         }
      }
   }

   // Populate highlights to popup window
   function popupPopulate() {
      document.addEventListener('click', (event) => {
         if (event.ctrlKey && event.button === 0) {

            hlSelection();

            // Create a div element
            const divNav = document.createElement('div');

            // Append items
            for (const hl_text in objAnchors) {
               const hl_id = objAnchors[hl_text];
               const item = createItem(hl_text, hl_id);
               divNav.appendChild(item);
            }

            // Remove any existing 'div' elements from the popup
            const divElements = popup.querySelectorAll('div:not([id=id_tags_title])');
            for (let i = 0; i < divElements.length; i++) {
               divElements[i].style.display = "none";
            }

            // Append the new 'div' element to the popup
            popup.appendChild(divNav);
         }
      });
   }

   popupPopulate();

   if (!document.getElementById("id_popup")) {
      createPopup();
   } else {
      togglePopup();
   }
})();


// Use:
// - Run the bookmarklet to instructions on popup
// - The storage is temporary, while the localStorage cache exists
	javascript: (function () {
	let vCounter = 0;
	let objAnchors = {};
	let popup;
	let popupStyle = `<style>
	#id_popup:hover {
	border: 2px solid red;
	}
	#id_popup {
	background-color: yellow !important;
	border-radius: 10px;
	border: 2px solid gray;
	color: blue !important;
	clear: left;
	font-family: sans-serif;
	font-size: 1rem;
	margin: 0px;
	overflow: auto;
	padding: 10px;
	position: fixed;
	right: 10px;
	text-align: left;
	top: 100px;
	transition: width 2s height 4s;
	z-zndex: 2147483647;
	}
	#id_popup_title {
	background-color: yellow !important;
	}
	.highlight {
	background-color: yellow !important;
	border-radius: 10px;
	border: 1px solid red;
	color: blue !important;
	padding: 2px;
	}
	#id_btn_fake {
	background-color: white !important;
	border-radius: 5px;
	border: 1px dashed blue;
	color: blue;
	margin: 1px;
	padding: 0px 2px 0px;
	}
	#id_btn_clear {
	background-color: white !important;
	border-radius: 5px;
	border: 1px solid blue;
	color: blue;
	font-size: smaller;
	padding: 0px 2px 0px 2px;
	}
	</style>`

	// Create popup and their elements
	function createPopup() {

	// The current window was opened by another window
	// Prevent the source page from changing the CSS properties of the popup window
	if (window.opener) {
	window.opener.focus();
	}

	// Create the popup element
	popup = document.createElement('div');
	popup.setAttribute('id', 'id_popup');

	// Create the iframe element and append it to the popup
	const iframe = document.createElement('iframe');
	iframe.setAttribute('id', 'id_iframe_STHL');
	popup.appendChild(iframe);

	// Set the style and content of the popup title
	document.head.innerHTML += popupStyle;
	popup.innerHTML = '<div id="id_popup_title"> <details> <summary> <strong>Scroll to Highlights</strong> </summary> <sup> Install or update from <a href="https://gist.github.com/magasine/33a2456d21101dc535ed017a896973f7" target="_blank">GitHub Gist</a> - (<a href="https://twitter.com/magasine" target="_blank">@magasine</a>) </sup> </details> <small> <li>Highlights mark: use hotkeys <button id=id_btn_fake style="cursor: not-allowed;">ctrl</button> + <button id=id_btn_fake style="cursor: not-allowed;">click</button></li><li>Highlights on/off: change checkboxes</li><li>Popup on/off: re-run bookmarklet</li></small></div>';

	// Create the clear button
	const clearButton = document.createElement('button');
	clearButton.setAttribute('id', 'id_btn_clear');
	clearButton.innerHTML = 'clear and reload page from cache';

	// Add an event listener to the button to clear the popup when clicked
	clearButton.addEventListener('click', function () {
	hlClear();
	popup.parentNode.removeChild(popup);
	// window.location.reload(); // this will reload the current page from the server
	window.location.reload(true); // this will reload the page from the cache instead of the server
	});

	// Append the clear button to the popup and text
	popup.innerHTML += '<div id="id_tags_title" style="color: blue;"><strong>... Start</strong><br><small>Select text and press hotkeys</small></div>';
	popup.appendChild(clearButton);

	// Append the popup to the document body
	document.body.appendChild(popup);
	}

	// Toggle popup visibility
	function togglePopup() {
	let popup = document.getElementById("id_popup");
	if (popup.style.display === 'none') {
	popup.style.display = 'block';
	} else {
	popup.style.display = 'none';
	}
	}

	// Create menu items in popup
	function createItem(hl_text, hl_id) {
	// Create a checkbox element
	const checkbox = document.createElement('input');
	checkbox.type = 'checkbox';
	checkbox.checked = true;
	checkbox.addEventListener('change', () => {
	const span = document.getElementById(hl_id);
	if (checkbox.checked) {
	span.style.backgroundColor = 'yellow';
	span.style.border = '1px solid red';
	} else {
	span.style.backgroundColor = '';
	span.style.border = '';
	}
	});

	// Create a label element
	const label = document.createElement('label');
	const hl_text_shortened = hl_text.substring(0, 20) + '...';
	label.innerHTML = hl_text;
	label.setAttribute('for', hl_id);
	label.setAttribute('id', hl_id + '-label');
	label.innerHTML = '&nbsp' + `<a href="#${hl_id}">${hl_text_shortened}</a>`;

	// Create a list item element
	const item = document.createElement('li');
	item.appendChild(checkbox);
	item.appendChild(label);

	return item;
	}

	// Create hash anchor with highlight id and storage
	function hlAnchor(hl_text) {
	vCounter += 1;
	const hl_id = `ScrollTo-${vCounter}`;
	localStorage.setItem(hl_id, hl_text);
	return hl_id;
	}

	// Clear highligts and remove itens from localStorage
	function hlClear() {

	const localStorageValues = Object.values(objAnchors);

	// Clear highlights e remove values
	for (let i = 0; i < localStorageValues.length; i++) {
	const lsv = document.getElementById(localStorageValues[i]);
	lsv.style.backgroundColor = '';
	lsv.style.border = '';
	localStorage.removeItem(localStorageValues[i]);
	}

	const localStorageKeys = Object.keys(localStorage);

	// Remove keys
	for (let i = 0; i < localStorageKeys.length; i++) {
	const lsk = localStorage.getItem(localStorageKeys[i]);
	if (lsk.includes('ScrollTo-')) {
	localStorage.removeItem(localStorageKeys[i]);
	}
	}
	objAnchors = {};
	vCounter = 0;
	}

	// Highlights selections
	function hlSelection() {
	if (window.getSelection) {
	const selection = window.getSelection();
	if (selection.rangeCount) {
	const range = selection.getRangeAt(0);
	const hl_text = range.toString();
	if (!objAnchors.hasOwnProperty(hl_text)) {
	const hl_id = hlAnchor(hl_text);
	objAnchors[hl_text] = hl_id;
	const span = document.createElement('span');
	span.id = hl_id;
	span.style.backgroundColor = 'yellow';
	span.style.border = '1px solid red';
	span.style.padding = '2px';
	range.surroundContents(span);
	}
	}
	}
	}

	// Populate highlights to popup window
	function popupPopulate() {
	document.addEventListener('click', (event) => {
	if (event.ctrlKey && event.button === 0) {

	hlSelection();

	// Create a div element
	const divNav = document.createElement('div');

	// Append items
	for (const hl_text in objAnchors) {
	const hl_id = objAnchors[hl_text];
	const item = createItem(hl_text, hl_id);
	divNav.appendChild(item);
	}

	// Remove any existing 'div' elements from the popup
	const divElements = popup.querySelectorAll('div:not([id=id_tags_title])');
	for (let i = 0; i < divElements.length; i++) {
	divElements[i].style.display = "none";
	}

	// Append the new 'div' element to the popup
	popup.appendChild(divNav);
	}
	});
	}

	popupPopulate();

	if (!document.getElementById("id_popup")) {
	createPopup();
	} else {
	togglePopup();
	}
	})();


	// Use:
	// - Run the bookmarklet to instructions on popup
	// - The storage is temporary, while the localStorage cache exists