JS: No Right Click Based on Element Class

Quick and simple vanilla js to block right clicking on an element. Pretty much useless if someone knows how to use developer tools, but easy to "protect" stuff from people who don't.

<script>
/**
 * norightclick.js
 *
 * Blocks right-click context menu on any element with the class
 * "rightclick-protected" and shows a brief copyright notice toast.
 *
 * Usage: add class="rightclick-protected" to any element you want to protect.
 * The block applies to the element and all its descendants (images, etc.)
 *
 * Load this script before </body>.
 */
(function () {
  'use strict';
  var PROTECTED_CLASS = 'rightclick-protected';
  var TOAST_ID		= 'rightclick-cr-toast';
  var TOAST_DURATION  = 2800; // ms before toast fades out
  /* ── Toast styles ────────────────────────────────────────────────── */
  var css = [
	'#' + TOAST_ID + '{',
	'  position:fixed;',
	'  bottom:1.5rem;',
	'  left:50%;',
	'  transform:translateX(-50%) translateY(0.5rem);',
	'  background:#2c1f0e;',		   /* --carto-ink */
	'  color:#f5edd8;',				/* --carto-parchment */
	'  font-family:"Libre Baskerville",Georgia,serif;',
	'  font-size:0.82rem;',
	'  letter-spacing:0.04em;',
	'  padding:0.65rem 1.25rem;',
	'  border:1px solid #8b6e3c;',	 /* --carto-gold */
	'  border-radius:2px;',
	'  box-shadow:0 4px 18px rgba(0,0,0,0.35);',
	'  opacity:0;',
	'  pointer-events:none;',
	'  transition:opacity 0.25s ease, transform 0.25s ease;',
	'  z-index:9999;',
	'  white-space:nowrap;',
	'}',
	'#' + TOAST_ID + '.show{',
	'  opacity:1;',
	'  transform:translateX(-50%) translateY(0);',
	'}'
  ].join('\n');
  var style = document.createElement('style');
  style.textContent = css;
  document.head.appendChild(style);
  /* ── Toast element ───────────────────────────────────────────────── */
  var toast = document.createElement('div');
  toast.id = TOAST_ID;
  toast.textContent = '© This content is copyrighted.';
  document.body.appendChild(toast);
  var hideTimer = null;
  function showToast() {
	clearTimeout(hideTimer);
	toast.classList.add('show');
	hideTimer = setTimeout(function () {
	  toast.classList.remove('show');
	}, TOAST_DURATION);
  }
  /* ── Right-click handler ─────────────────────────────────────────── */
  document.addEventListener('contextmenu', function (e) {
	var el = e.target;
	// Walk up the DOM to see if the clicked element is inside a protected zone
	while (el && el !== document) {
	  if (el.classList && el.classList.contains(PROTECTED_CLASS)) {
		e.preventDefault();
		showToast();
		return;
	  }
	  el = el.parentNode;
	}
  });
})();
</script>