@tilde-nlp/website-translator 7.1.0

package/dist/widget.js.LICENSE.txt

@@ -0,0 +1,3 @@
+/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */
+
+/*! WTW version: v0.0.0 */

package/examples/Multi pretranslated lang example/main.js

@@ -0,0 +1,32 @@
+// Configure your personal API key
+WebsiteTranslator.Options.api.clientId = 'x-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
+
+// Step #1: Specify embedded languages of your webpage that has translation already
+WebsiteTranslator.Options.translation.thirdPartyTranslationLanguages = ['en', 'fr']
+// Step #2: Set language of the webpage that is currently rendered
+WebsiteTranslator.Options.currentLanguage = document.documentElement.getAttribute('lang')
+console.log('Current document language: ' + WebsiteTranslator.Options.currentLanguage)
+// Step #3: Add custom logic to use embedded translations instead of machine translation
+WebsiteTranslator.Options.translation.onLanguageSelected = function (selectedLanguage) {
+  return new Promise(function (resolve) {
+    let translationHandled = false
+    console.info('Language selected: ' + selectedLanguage)
+    // Check if custom action must be perform to open embedded translation bypassing machine translation process
+    if (WebsiteTranslator.Options.translation.thirdPartyTranslationLanguages.includes(selectedLanguage)) {
+      translationHandled = true
+      if (WebsiteTranslator.Options.currentLanguage !== selectedLanguage) {
+        console.info('Redirecting to embedded language version of the page')
+        // Add your own logic on how to transform URL of current language to URL of selected target language
+        // or other necessary actions.
+        // Note. This replacement logic is to transform http://example.com/page_en.html to http://example.com/page_de.html
+        // and vice versa.
+        window.location.href = window.location.href.replace(/page_\w+/, 'page_' + selectedLanguage)
+        // For example, for page https://example.com/en/news to transform to https://example.com/de/news
+        // window.location.href = window.location.href.replace(/example.com\/\w+/, "/example.com/" + selectedLanguage)
+      }
+    }
+    resolve(translationHandled)
+  })
+}
+
+WebsiteTranslator.Initialize()

package/examples/Multi pretranslated lang example/page_de.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="de">
+    <head>
+        <script src="widget.js"></script>
+    </head>
+    <body>
+        <p>
+            Text zur Übersetzung
+        </p>
+
+        <div class="website-translator"></div>
+
+        <p>
+            Text zur Übersetzung
+        </p>
+
+        <script src="main.js"></script>
+    </body>
+</html>

package/examples/Multi pretranslated lang example/page_en.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <script src="widget.js"></script>
+    </head>
+    <body>
+        <p>According to the United Nations <a href="/wiki/World_Food_Programme" title="World Food Programme">World Food Programme</a>, famine is declared when malnutrition is widespread, and when people have started dying of starvation through lack of access to sufficient,&nbsp;nutritious food.<sup id="cite_ref-3" class="reference"><a href="#cite_note-3">[3]</a></sup> The <a href="/wiki/Integrated_Food_Security_Phase_Classification" title="Integrated Food Security Phase Classification">Integrated Food Security Phase Classification</a> criteria define <i>Phase 5 famine</i> of acute food insecurity as occurring when:<sup id="cite_ref-4" class="reference"><a href="#cite_note-4">[4]</a></sup><sup id="cite_ref-IPC_famine_5-0" class="reference"><a href="#cite_note-IPC_famine-5">[5]</a></sup>
+        </p>
+
+        <div class="website-translator"></div>
+
+        <script src="main.js"></script>
+    </body>
+</html>

package/examples/Multi pretranslated lang example/page_fr.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <script src="widget.js"></script>
+    </head>
+    <body>
+        <p>
+            Custom content FR
+        </p>
+
+        <div class="website-translator"></div>
+
+        <script src="main.js"></script>
+    </body>
+</html>

package/examples/example1.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<head>
+    <!-- Enter correct source code path -->
+    <script src="widget.js"></script>
+    <style>
+        [translate="yes"]{
+            color:green;
+        }
+        [translate="no"]{
+            color:crimson;
+        }
+    </style>
+</head>
+<body>
+    <div class="website-translator"></div>
+
+    <button onclick="translateToLV()">
+        Click this button to start translation to Latvian.
+    </button><br>
+
+    <button onclick="translateToLT()">
+        Click this button to start translation to Lithuanian.
+    </button><br>
+
+    <button onclick="restoreTranslation()">
+        Click this button to stop translation and return page to original state
+    </button><br>
+
+
+
+    This text will not be translated because of
+    <code>
+        WebsiteTranslator.Options.translation.translateOnlyAllowedTags = true
+    </code>
+
+    <div translate="yes">
+        You can define elements to translate with translate attribute
+
+        <div translate="no">
+            Excluded elements can be child of translatable elements
+            <div translate="yes">
+                Multiple levels of translate attribute can be processed
+                <div translate="no">
+                    This element will not be translated because of translate attribute
+                </div>
+            </div>
+        </div>
+    </div>
+
+</body>
+
+<footer>
+    <script>
+        var translatorIsInitialized = false;
+        // Configure plugin
+        WebsiteTranslator.Options.translation.translateOnlyAllowedTags = true
+        WebsiteTranslator.Options.translation.autoTranslate = false
+        WebsiteTranslator.Options.debug = true
+
+        WebsiteTranslator.Options.api.clientId = 'x-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
+
+        WebsiteTranslator.Initialize().then(function(){
+            translatorIsInitialized = true;
+        })
+        function translateToLV(){
+            if(translatorIsInitialized){
+                var translationFinish = null
+
+                // You should always await for translation start
+                translationFinish = WebsiteTranslator.Translate("lv").then(function(translationFinish){
+                    console.log("Translation is started")
+                })
+            }
+        }
+
+        function translateToLT(){
+            if(translatorIsInitialized){
+                // But you can call next translation even when previous is not finished
+                WebsiteTranslator.Translate("lt").then(function(translationFinish){
+                    // Or you can await when page is translated
+                    Promise.all(translationFinish).then(function(){
+                        console.log("Translation is complete")
+                    })
+                })
+            }
+        }
+
+        function restoreTranslation(){
+            if(translatorIsInitialized){
+                // To restore page in original state
+                WebsiteTranslator.CancelAndRestore()
+            }
+        }
+    </script>
+</footer>
+</html>

package/examples/example2.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<head>
+    <!-- Enter correct source code path -->
+    <script src="widget.js"></script>
+    <style>
+        [translate="yes"]{
+            color:green;
+        }
+        [translate="no"]{
+            color:crimson;
+        }
+        .website-translator{
+            background:ghostwhite;
+        }
+    </style>
+</head>
+<body>
+    <div class="website-translator"></div>
+
+    <div translate="yes">
+        You can define elements to translate with translate attribute
+
+        <div translate="no">
+            Excluded elements can be child of translatable elements
+            <div translate="yes">
+                Multiple levels of translate attribute can be processed
+                <div translate="no">
+                    This element will not be translated because of translate attribute
+                </div>
+            </div>
+        </div>
+    </div>
+
+</body>
+
+<footer>
+    <script>
+        // Configure
+        WebsiteTranslator.Options.ui.toolbarPosition = "top"
+
+        WebsiteTranslator.Options.api.clientId = 'x-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
+
+        var params = new URLSearchParams(window.location.search);
+
+        //   Languages which are already pretranslated and don't need to be machine translated
+        var thirdPartyLanguages = ["de", "fr", "sv"];
+        WebsiteTranslator.Options.translation.thirdPartyTranslationLanguages = thirdPartyLanguages;
+        WebsiteTranslator.Options.translation.onLanguageSelected = function(selectedLanguage) {
+            return new Promise(function(resolve) {
+                var translationHandled = false;
+
+                console.info("Selecting language", selectedLanguage);
+                if (thirdPartyLanguages.includes(selectedLanguage)) {
+                    console.info("Switching to third-party language with external code");
+                    translationHandled = true;
+                    // Third party translation
+
+                    var newUrl = new URL(window.location.href)
+                    newUrl.searchParams.set("lang", selectedLanguage)
+                    window.location.href = newUrl.href
+                }
+
+                resolve(translationHandled);
+            });
+        };
+
+        // Initialize and run translations
+        WebsiteTranslator.Initialize()
+    </script>
+</footer>
+</html>

package/examples/example3-async-defer-load.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <!-- Enter correct source code path -->
+        <script src="widget.js" async defer onload="InitWebsiteTranslation()"></script>
+    </head>
+    <body>
+        <div class="website-translator"></div>
+        
+        <script>
+            function InitWebsiteTranslation(){
+                // Configure
+                WebsiteTranslator.Options.api.clientId = 'x-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
+
+                // ...
+
+                // Initialize and run translations
+                WebsiteTranslator.Initialize()
+            }
+        </script>
+    </body>
+</html>

package/examples/example4-defer-load.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <!-- Enter correct source code path -->
+        <script src="widget.js" defer></script>
+    </head>
+    <body>
+        <div class="website-translator"></div>
+        
+        <script>
+            window.onload = function(){
+                // Configure
+                WebsiteTranslator.Options.api.clientId = 'x-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
+
+                // ...
+
+                // Initialize and run translations
+                WebsiteTranslator.Initialize()
+            }
+        </script>
+    </body>
+</html>

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@tilde-nlp/website-translator",
+  "description": "Widget to integrate in to another website to translate it",
+  "version": "7.1.0",
+  "main": "dist/widget.js",
+  "directories": {
+    "doc": "docs",
+    "lib": "dist",
+    "example": "example"
+  },
+  "author": {
+    "name": "Tilde, SIA",
+    "url": "https://tilde.com"
+  },
+  "keywords": [
+    "translate",
+    "translator",
+    "html",
+    "tilde",
+    "webpage",
+    "website"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {
+    "lint": "standardx --parser @typescript-eslint/parser --plugin @typescript-eslint/eslint-plugin **/*.ts",
+    "lint:fix": "standardx --parser @typescript-eslint/parser --plugin @typescript-eslint/eslint-plugin **/*.ts --fix",
+    "patch-version": "@powershell -NoProfile -Command ./auto_version_patch.ps1",
+    "publish-public-latest": "@powershell -NoProfile -Command ./publish_public_npm.ps1",
+    "build:prod": "webpack --mode production",
+    "build:dev": "webpack --mode development",
+    "start": "webpack serve --progress --mode development"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.14.0",
+    "@typescript-eslint/parser": "^5.14.0",
+    "css-loader": "^6.7.1",
+    "ifdef-loader": "^2.3.2",
+    "node-sass": "^7.0.1",
+    "sass-loader": "^12.6.0",
+    "standardx": "^7.0.0",
+    "style-loader": "^3.3.1",
+    "ts-loader": "^9.2.8",
+    "typescript": "^4.6.2",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.70.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4"
+  },
+  "dependencies": {
+    "@babel/polyfill": "^7.12.1",
+    "axios": "^0.25.0",
+    "core-js": "^3.21.1",
+    "rxjs": "^7.5.5"
+  },
+  "eslintConfig": {
+    "rules": {
+      "object-property-newline": [
+        "error",
+        {
+          "allowAllPropertiesOnSameLine": false
+        }
+      ],
+      "no-var": "error",
+      "no-console": "error",
+      "brace-style": [
+        "error",
+        "stroustrup"
+      ],
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": "warn"
+    },
+    "globals": {
+      "EventListenerOrEventListenerObject": "readonly",
+      "MutationObserverInit": "readonly"
+    },
+    "env": {
+      "browser": true,
+      "node": true
+    }
+  },
+  "standardx": {
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+      "@typescript-eslint/eslint-plugin"
+    ]
+  }
+}

package/src/js/enums/PluginUILanguageType.ts

@@ -0,0 +1,4 @@
+export enum PluginUILanguageType{
+    SOURCE = 'source',
+    TARGET = 'target'
+}

package/src/js/enums/ToolbarPositionType.ts

@@ -0,0 +1,4 @@
+export enum PluginToolbarPositionType{
+    TOP = 'top',
+    BOTTOM = 'bottom'
+}

package/src/js/interfaces/IPluginOptions.ts

@@ -0,0 +1,149 @@
+// TODO: convert some of the types to enums
+
+import { PluginUILanguageType } from '../enums/PluginUILanguageType'
+import { PluginToolbarPositionType } from '../enums/ToolbarPositionType'
+
+export interface IPluginOptions{
+    /**
+   * Source language for machine translation
+   * @recomended  "en"
+   * @required
+   */
+  sourceLanguage: string,
+  /**
+   * Current web page language (if the web page is already pre-translated).
+   * The language in which the website has been translated.
+   * When {currentLanguage} is not equal to {sourceLanguage}, selecting language to translate, plugin will try to get page in {sourceLanguage} by calling {translation.onLanguageSelected({sourceLanguage})}
+   * @optional
+   * @default null
+   */
+  currentLanguage: string,
+  /**
+   * Where is the plugin api and how it connects to it
+   */
+  api: {
+    /**
+     * Authorization key which allows plugin to access translation api
+     * @required
+     */
+    clientId: string,
+    /**
+     * Translation service Uri.
+     * @required
+     */
+    url: string,
+    /**
+     * API version
+     * 1 - older version
+     * 2 - version with seperate API endpoint for configuration
+     */
+    version: number
+  },
+  /**
+   * How plugin translates
+   */
+  translation: {
+    /**
+     * Save last translation {target language} and on next page load, automatically translate to it.
+     */
+    autoTranslate: boolean,
+
+    targetLanguages:Array<string>
+    /**
+     * Translate only tags and their children which have [translate="yes"] attribute
+     */
+    translateOnlyAllowedTags: boolean,
+    /**
+     * Translate HTML attributes
+     */
+    translateAttributes: boolean,
+    /**
+     * Custom actions on selecting languages.
+     * If webpage is pre-translated by third-party, then you should handle {sourceLanguage} here too
+     * @returns {boolean} Language should be Translated with this Translation plugin
+     * Please dont use this, this was requirement, but it is not desired way. Please use your own language menu.
+     */
+    onLanguageSelected: any,
+    /**
+     * Define languages which are supposed to be translated with third party
+     */
+    thirdPartyTranslationLanguages: Array<string>
+  },
+  /**
+   * How plugin looks
+   */
+  ui: {
+    /**
+     * Hide MT toolbar with translation progress.
+     */
+    headless: boolean
+    /**
+     * Show sign in link for WTW
+     */
+    showSignInLink: boolean
+    /**
+     * Translate plugin ui, values can be:
+     *    source - Show plugin ui in source language
+     *    target - Show plugin ui in target language
+     */
+    translate: PluginUILanguageType
+    /**
+     * Show or hide "restore" and "cancel" translation buttons on Translation Plugin UI
+     */
+    showTranslationControls: boolean
+    /**
+     * Change display mode of the language selection in UI, values can be:
+     *    "menu" - Show available languages in select
+     *    "list" - Show available languages as list items
+     *    null - Hide language menu
+     * If you wish to add more functionality, please consider use your own language menu?
+     */
+    layout: string,
+    /**
+     * How much time to wait after user is started to hover translation to show suggestion popup (in ms)
+     */
+    tooltipShowDelay: number,
+    /**
+     * Where toolbar is positioned.
+     */
+    toolbarPosition: PluginToolbarPositionType,
+    /**
+     * Main container [HTMLElement] for web page that contains all scrollable content
+     */
+    mainContentElement: HTMLElement,
+    /**
+     * Show original text even if public suggestions are set to false
+     */
+    alwaysShowOriginalTextInPopup: boolean,
+    /**
+     * Show notification about what service is providing translation.
+     */
+    showPopupTranslationProvider: boolean,
+    /**
+     * Show or hide translation popup.
+     */
+    showPopup: boolean
+    /**
+     * Show languages in native language for example in Language Menu
+     */
+    showLanguagesInNativeLanguage: boolean,
+    branding:{
+      /**
+       * Name of provider that provides MT
+       */
+      name:string,
+      /**
+       * URL which is used for links to MT
+       */
+      url:string
+    }
+  },
+  /**
+   * Enable verbose logging in console
+   */
+  debug: boolean,
+  /**
+   * App id, this is usefull to make seperate statistics
+   */
+  appID: string
+}

package/src/style/constants.scss

@@ -0,0 +1,6 @@
+$zIndex: 100000;
+$defaultFontFamily: Roboto;
+$iconDefaultColor: invert(59%) sepia(0%) saturate(0%) hue-rotate(117deg) brightness(81%) contrast(82%);
+$defaultFontSize: 14px;
+$defaultTextColor: #000000;
+$defaultAccentColor: #005693;