fixed #23, fixed #25, fixed #26

dist/sample.html

@@ -28,6 +28,7 @@ <h2 class="Every html element in one place. Just waiting to be styled.">HTML</h2
       -->
     <header>
       <h1 class="other-class"><a href="" title="Site title">Site title ("other-class")</a></h1>
+      <h2 id="foo_bar">My ID is foo_bar.</h2>
       <nav>
         <ul>
           <li> <a href="#" title="Home">Home</a> </li>
@@ -437,6 +438,7 @@ <h1>Footer</h1>
         attributionImageUrl: 'google-translate.svg',
         preferredSupportedLanguages: ['en', 'es', 'zh', 'de'],
         ignoreClasses: ['other-class'],
+        ignoreSelectors: ['#foo_bar'],
         infoText: {
           title: 'Disclaimer', // From: https://cloud.google.com/translate/attribution#disclaimer
           message: 'THIS SERVICE MAY CONTAIN TRANSLATIONS POWERED BY GOOGLE. GOOGLE DISCLAIMS ALL WARRANTIES RELATED TO THE TRANSLATIONS, EXPRESS OR IMPLIED, INCLUDING ANY WARRANTIES OF ACCURACY, RELIABILITY, AND ANY IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. ' +

src/Dropdown.tsx

@@ -244,13 +244,15 @@ export function Dropdown(props: { options: DropdownOptions }) {
    * Respond to changes in language
    */
   useEffect(() => {
-    console.log('language changed')
-    if(language !== '' && options.pageLanguage !== language) {
-      setShowBanner(true);
-      htmlRef.current?.setAttribute('lang', `${language}-x-mtfrom-${options.pageLanguage}`);
-    }
-    else {
-      htmlRef.current?.setAttribute('lang', options.pageLanguage);
+    if(options.verboseOutput) console.log('language changed')
+    if(options.updateDocumentLanguageAttribute) {
+      if(language !== '' && options.pageLanguage !== language) {
+        setShowBanner(true);
+        htmlRef.current?.setAttribute('lang', `${language}-x-mtfrom-${options.pageLanguage}`);
+      }
+      else {
+        htmlRef.current?.setAttribute('lang', options.pageLanguage);
+      }
     }
     setLastLanguage(language)
   }, [language])
@@ -260,7 +262,7 @@ export function Dropdown(props: { options: DropdownOptions }) {
    * This pairs with handleDocumentMutation
    */
   useEffect(() => {
-    console.log('translatedNodes effect! language: ', language, translatedNodes);
+    if(options.verboseOutput) console.log('translatedNodes effect! language: ', language, translatedNodes);
     // if translatedNodes is not initialized, initialize it
     if(translatedNodes.length === 0) {
       // get all leaf text nodes
@@ -298,7 +300,7 @@ export function Dropdown(props: { options: DropdownOptions }) {
               e.translationStatus[language] === TranslationStatus.NotTranslated) &&
               (options.ignoreIntersection === true || e.isIntersecting === true));
 
-          console.log(`needs translating (${needsTranslating.length}): `, needsTranslating);
+          if(options.verboseOutput) console.log(`needs translating (${needsTranslating.length}): `, needsTranslating);
           // if any translations need to be fetched, do them
           // prevent infinite loop because we'll be setting the state
           if(needsTranslating.length > 0) {

src/customTreeWalker.ts

@@ -35,6 +35,12 @@ export class CustomTreeWalker {
             return NodeFilter.FILTER_REJECT
           }
         }
+        // skip parents that include one of the configurable selectors
+        for(let selector of options.ignoreSelectors) {
+          if(anyParentSatisfies(node, e => e instanceof Element && e.matches(selector))) {
+            return NodeFilter.FILTER_REJECT
+          }
+        }
         // skip nodes that have children
         if(node.childNodes.length > 0) {
           return NodeFilter.FILTER_SKIP

src/options.ts

@@ -41,6 +41,23 @@ export interface DropdownOptions {
    *  ['pac-container', 'pac-logo']
    */
   ignoreClasses: string[];
+  /**
+   * Selectors to ignore when translating. Useful for specifing other widgets or third-party sections 
+   * where adding the ".skiptranslate" class is impractical.
+   * 
+   * uses Element.matches() on candidate nodes
+   * see: https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
+   */
+  ignoreSelectors: string[];
+  /**
+   * Should the "lang" attribute of the <html> element be updated as languages are changed?
+   * This can have adverse effects on other tools which rely on a specific value to be present.
+   */
+  updateDocumentLanguageAttribute: boolean;
+  /**
+   * Should helpful debugging messages be printed?
+   */
+  verboseOutput: boolean;
   /**
    * Used for specifying message that appears when the help and info button are pressed.
    * Providing undefined disables and hides the button.

src/widget.tsx

@@ -16,6 +16,9 @@ export function initHook(args: any, mountLocation: string) {
     intersectionThreshold: extract(args, 'intersectionThreshold', 0.0),
     ignoreIntersection: extract(args, 'ignoreIntersection', false),
     ignoreClasses: extract(args, 'ignoreClasses', []),
+    ignoreSelectors: extract(args, 'ignoreSelectors', []),
+    verboseOutput: extract(args, 'verboseOutput', false),
+    updateDocumentLanguageAttribute: extract(args, 'updateDocumentLanguageAttribute', false),
     helpText: args.helpText ? {
       title: extract(args, ['helpText', 'title'], ''),
       message: extract(args, ['helpText', 'message'], ''),