Chart Grammatical - warwickfoster/qurantools GitHub Wiki

File: app/ajax/ajax_loupe_verse_viewer.php

Purpose

The code snippet you provided is a JavaScript and PHP code that is used to highlight Arabic words in a Quranic text based on user preferences.

Code Functionality

• CSS Style

  • Sets the background color of marked words to a value specified in the $user_preference_highlight_colour variable.
  • Sets the color of marked words to white or black depending on the lightness of the highlight color.

• JavaScript Event Listeners

  • Adds event listeners to various elements (transliterated words, Arabic words, and transliterated letters) to change their background color when hovered over or clicked.
  • The background color changes to the value specified in the $user_preference_cursor_colour variable.

Usage

The code can be used to highlight Arabic words in a Quranic text based on user preferences. When a user hovers over or clicks on a word or letter, the background color of that word or letter, as well as the corresponding transliterated and Arabic elements, will change to the specified highlight color.

Code Breakdown

PHP Variables

• $user_preference_highlight_colour: The preferred highlight color.
• $user_preference_highlight_colour_lightness_value: The lightness value of the highlight color.
• $user_preference_cursor_colour: The preferred cursor color.

JavaScript Variables

• translationWordID: The ID of the transliterated word element.
• arabicWordID: The ID of the Arabic word element.
• transliteratedWordID: The ID of the transliterated letter element.

JavaScript Event Handlers

• mouseover: Changes the background color of the hovered-over element and its corresponding Arabic and transliterated elements.
• mouseout: Resets the background color of the hovered-over element and its corresponding Arabic and transliterated elements.

Additional Notes

• The code assumes that the Arabic words are displayed in elements with the ID prefix "a", transliterated letters in elements with the ID prefix "t", and transliterated words in elements with the ID prefix "e".
• The highlight color and cursor color can be customized based on user preferences.