@tilde-nlp/ngx-translate 1.0.0

package/src/assets/webtranslate/translate-website.js

@@ -0,0 +1,393 @@
+function waitUntilJobDone(test, success, timeout) {
+  if (test()) {
+    success();
+    return;
+  }
+
+  // stop trying at some time
+  if (timeout) {
+    timeout -= 50;
+    if (timeout <= 0) {
+      return;
+    }
+  }
+  window.setTimeout(function () {
+    waitUntilJobDone(test, success, timeout);
+  }, 50);
+}
+
+$(document).ready(function () {
+  var pageIsLoaded = false;
+
+  var letsmtTranslatePagePrefix = Tilde.PageTranslateWidgetClientConfiguration.TranslatePagePrefix;
+
+  // when opening new page, don't start auto-translating because previous translation system is remembered in cookie
+  document.cookie = 'letsmt-translation-system=;path=/;expires=' + new Date().toUTCString();
+
+  var getQueryStringParameters = function () {
+    var vars = [],
+      hash;
+    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
+    for (var i = 0; i < hashes.length; i++) {
+      hash = hashes[i].split('=');
+      vars.push(hash[0]);
+      vars[hash[0]] = decodeURIComponent(hash[1]);
+    }
+    return vars;
+  };
+
+  var queryStringParameters = getQueryStringParameters();
+  var url = queryStringParameters['url'];
+  var termCorpusId = null;
+
+  function discardMiddleClick(event) {
+    if (event.which == 2) {
+      event.preventDefault();
+    }
+  }
+
+  $(document).on('click', discardMiddleClick);
+
+  var iframe = $('#letsmt-translate-page-iframe')[0];
+  if (iframe && iframe.contentWindow) {
+    suppressMiddleClickOnNewlyLoadedDocument(iframe.contentWindow);
+    if (iframe.contentWindow.document) {
+      $(iframe.contentWindow.document).on('click', discardMiddleClick);
+    }
+  }
+
+  var loadingPage = false;
+  var showWait = function () {
+
+    if (!loadingPage) {
+      window.parent.postMessage({ message: 'startedLoading' }, '*');
+      loadingPage = true;
+    }
+
+    var iframeWindow = $('#letsmt-translate-page-iframe')[0].contentWindow;
+    if (iframeWindow && iframeWindow.document) {
+      Tilde.oldDocument = iframeWindow.document;
+    } else {
+      Tilde.oldDocument = null;
+    }
+
+    if (Tilde.pageLoadTimeout) {
+      window.clearTimeout(Tilde.pageLoadTimeout);
+      Tilde.pageLoadTimeout = null;
+    }
+
+    Tilde.pageLoadTimeout = window.setTimeout(pageLoaded, 5000); // page load timeout
+    //pageLoaded()
+  };
+
+  var hideWait = function () {
+    if (Tilde.pageLoadTimeout) {
+      window.clearTimeout(Tilde.pageLoadTimeout);
+      Tilde.pageLoadTimeout = null;
+    }
+
+    window.parent.postMessage({ message: 'stoppedLoading' }, '*');
+
+    loadingPage = false;
+  };
+
+  var navigateIframe = function (address, autoTranslate) {
+    translateAfterLoad = autoTranslate === true;
+    // when new url is entered forget previous translation system so that it does not autotranslate the page
+    // this is unset in unload event, so that when navigating further by link click, previous system is remembered and auto translation happens
+    // don't do this when the current page is about:blank, because unload event won't be fired thus system forgetting will actually
+    // happen the next time someone clicks on a link
+    forgetPreviousTranslationSystem = $('#letsmt-translate-page-iframe')[0].contentWindow.location.href != 'about:blank';
+
+    showWait();
+    address = $.trim(address);
+    var lowerCaseAddress = address.toLowerCase();
+    var protocol = 'http';
+    if (lowerCaseAddress.indexOf('http://') == 0) {
+      address = address.substring(7);
+    } else if (lowerCaseAddress.indexOf('https://') == 0) {
+      protocol = 'https';
+      address = address.substring(8);
+    }
+
+    address = location.protocol + "//" + letsmtTranslatePagePrefix + protocol + "/" + address;
+    $('#letsmt-translate-page-iframe').attr('name', 'letsmtTranslatePageIframe');
+    window.open(address, 'letsmtTranslatePageIframe');
+  };
+
+  var normalizeUrl = function (url) {
+    if (url.substring(url.length - 1) == "/") {
+      url = url.substring(0, url.length - 1);
+    }
+    return url;
+  }
+
+  var navigateOrTranslate = function (address, translateAfterLoad) {
+    if (translateAfterLoad) {
+      // if translate after load is requested
+      // check if requested url is already loaded
+      // if it is, do not reload page and just start the translation
+      // even if wrong language is selected
+
+      address = normalizeUrl(address);
+      var loadedAddress = '';
+      var iframeWindow = $('#letsmt-translate-page-iframe')[0].contentWindow;
+      if (iframeWindow && iframeWindow.location && iframeWindow.location.href && iframeWindow.location.href !== 'about:blank') {
+        loadedAddress = normalizeUrl(proxyUrlToRealUrl(iframeWindow.location.href).trim());
+      }
+
+      if (!address || loadedAddress != address) {
+        // address is different, load page as usual
+      } else {
+        // address is already loaded, don't load, just start translation
+        Tilde.PageTranslateWidget.translate(null, termCorpusId);
+        return;
+      }
+    }
+
+    navigateIframe(address, translateAfterLoad);
+  };
+
+  var translateAfterLoad = false;
+
+  // when widget is loaded, override onTranslateClick
+  waitUntilJobDone(
+    function () {
+      return typeof Tilde !== 'undefined' && Tilde.PageTranslateWidget && Tilde.PageTranslateWidget.loading === false;
+    },
+    function () {
+
+      // set up communication between translation widget and parent page that hosts the widget page in an iframe
+      Tilde.PageTranslateWidget.onSystemChange = function (systemId, changed, auto) {
+        window.parent.postMessage({ message: 'systemChanged', systemId: systemId, changed: changed, auto: auto }, '*');
+      };
+
+      Tilde.PageTranslateWidget.onTranslationStart = function () {
+        window.parent.postMessage({ message: 'translationStarted' }, '*');
+      };
+
+      Tilde.PageTranslateWidget.onTranslationStop = function () {
+        window.parent.postMessage({ message: 'translationStopped' }, '*');
+      };
+
+      Tilde.PageTranslateWidget.onRestoreFinished = function () {
+        window.parent.postMessage({ message: 'untranslated' }, '*');
+      };
+
+      Tilde.PageTranslateWidget.onTranslated = function () {
+        window.parent.postMessage({ message: 'translated' }, '*');
+      };
+
+      Tilde.PageTranslateWidget.onError = function (errorMessage) {
+        window.parent.postMessage({ message: 'error', description: errorMessage }, '*');
+      };
+
+      Tilde.PageTranslateWidget.onWarning = function (warningMessage) {
+        window.parent.postMessage({ message: 'warning', description: warningMessage }, '*');
+      };
+
+      Tilde.PageTranslateWidget.onProgress = function (percent) {
+        if (percent == 0 || percent == '0%') {
+          window.parent.postMessage({ message: 'progress', progress: '1' }, '*');
+        } else {
+          window.parent.postMessage({ message: 'progress', progress: parseInt(percent) }, '*');
+        }
+      };
+
+      window.addEventListener(
+        'message',
+        function (event) {
+          if (event.data) {
+            switch (event.data.message) {
+              case 'changeSystem':
+                Tilde.PageTranslateWidget.changeSystem(event.data.systemId);
+                break;
+              case 'loadUrl':
+                pageIsLoaded = false;
+                termCorpusId = event.data.termCorpusId;
+                navigateOrTranslate(event.data.url, event.data.translateAfterLoad);
+                break;
+              case 'translate':
+                if (loadingPage) {
+                  window.parent.postMessage(
+                    { message: 'warning', description: 'It is not safe to translate a page that is still loading.' },
+                    '*'
+                  );
+                } else {
+                  termCorpusId = event.data.termCorpusId;
+                  Tilde.PageTranslateWidget.translate(null, termCorpusId);
+                }
+                break;
+              case 'untranslate':
+                Tilde.PageTranslateWidget.cancel();
+                break;
+              case 'setSystemList':
+                Tilde.PageTranslateWidget.setTranslationSystemList(event.data.systemList);
+                break;
+              default:
+                break;
+            }
+          }
+        },
+        false
+      );
+
+      window.parent.postMessage({ message: 'ready' }, '*');
+    },
+    30000
+  );
+
+  function proxyUrlToRealUrl(proxyUrl) {
+    var proxyIndex = proxyUrl.indexOf(letsmtTranslatePagePrefix);
+    if (proxyIndex > -1) {
+      var protocolEndIndex = proxyUrl.indexOf('/', proxyIndex + letsmtTranslatePagePrefix.length);
+      var protocol = proxyUrl.substring(proxyIndex + letsmtTranslatePagePrefix.length, protocolEndIndex);
+      return protocol + '://' + proxyUrl.substring(protocolEndIndex + 1);
+    }
+    return null;
+  }
+
+  function suppressMiddleClickOnNewlyLoadedDocument(iframeWindow) {
+    if (iframeWindow && iframeWindow.document) {
+      $(iframeWindow).on('unload', function () {
+        // wait until enough of the document is loaded to be able to attach mouseclick events
+        window.setTimeout(function () {
+          waitUntilJobDone(
+            function () {
+              return iframeWindow && iframeWindow.document;
+            },
+            function () {
+              $(iframeWindow.document).on('click', discardMiddleClick);
+            },
+            60000
+          );
+        }, 50);
+      });
+    }
+  }
+
+  function onUnload() {
+    //showWait();
+
+    if (typeof Tilde !== 'undefined' && Tilde.PageTranslateWidget && Tilde.PageTranslateWidget.cancel) {
+      Tilde.PageTranslateWidget.cancel(!forgetPreviousTranslationSystem, true);
+      forgetPreviousTranslationSystem = false;
+    }
+  }
+
+  var timesToTry = 25
+  function pageLoaded() {
+    const pageIframe = $('#letsmt-translate-page-iframe')[0]
+    if (!pageIframe || pageIsLoaded) {
+      return
+    }
+    --timesToTry
+
+    var iframeWindow = pageIframe.contentWindow;
+
+    if (iframeWindow && iframeWindow.location && iframeWindow.location.href != 'about:blank' && iframeWindow.document) {
+
+      var stillTheSameDocument = false;
+      try {
+        stillTheSameDocument = iframeWindow.document === Tilde.oldDocument;
+      } catch (err) {
+        // if we don't have access/premission to old document
+        // it means that document has changed
+      }
+
+      if (!stillTheSameDocument) {
+        Tilde.pageLoadTimeout = null;
+        timesToTry = 25;
+
+        suppressMiddleClickOnNewlyLoadedDocument(iframeWindow);
+
+        var url = proxyUrlToRealUrl(iframeWindow.location.href);
+        if (url) {
+          pageIsLoaded = true;
+
+          window.parent.postMessage({ message: 'urlLoaded', url: url }, '*');
+        }
+
+
+        $(iframeWindow).on('unload', onUnload);
+
+        $(iframeWindow.document).ready(function () {
+          // page that needs translation could be loaded before translate widget finished loading,
+          // so wait before trying to translate it
+          waitUntilJobDone(
+            function () {
+              return typeof Tilde !== 'undefined' && Tilde.PageTranslateWidget && Tilde.PageTranslateWidget.loading === false;
+            },
+            function () {
+              if (
+                $(iframeWindow.document)
+                  .find('html')
+                  .hasClass('error')
+              ) {
+                // don't try to translate error pages generated by TranslateProxy
+                // (common error messages are already localized)
+                translateAfterLoad = false;
+
+                window.parent.postMessage(
+                  {
+                    message: 'error',
+                    description: $(iframeWindow.document)
+                      .find('body')
+                      .text(),
+                    shownInUI: true
+                  },
+                  '*'
+                );
+
+              } else {
+                var loadedPageLanguageCode = $(iframeWindow.document)
+                  .find('html')
+                  .attr('lang');
+
+                var languageChanged = false;
+                if (loadedPageLanguageCode) {
+                  languageChanged = Tilde.PageTranslateWidget.setSourceLanguage(loadedPageLanguageCode.substring(0, 2));
+                }
+
+                if (translateAfterLoad) {
+                  if (!languageChanged) {
+                    // if page load was initiated by translate button, start translation as soon as page is loaded
+                    Tilde.PageTranslateWidget.translate(null, termCorpusId);
+                    translateAfterLoad = false;
+                  }
+                } else {
+                  if (Tilde.PageTranslateWidget.autoTranslateIfNeeded) {
+                    Tilde.PageTranslateWidget.autoTranslateIfNeeded();
+                  }
+                }
+              }
+            },
+            30000
+          );
+        });
+
+        hideWait();
+        return
+      }
+    }
+
+    if (timesToTry > 0) {
+      tryAgain()
+    }
+  }
+
+  function tryAgain() {
+    --timesToTry
+    setTimeout(() => {
+      pageLoaded()
+    }, 200);
+  }
+
+  $('#letsmt-translate-page-iframe').on('load', function () {
+    if (Tilde.pageLoadTimeout) {
+      window.clearTimeout(Tilde.pageLoadTimeout);
+      Tilde.pageLoadTimeout = null;
+      pageLoaded();
+    }
+  });
+});

package/src/assets/webtranslate/widget.css

@@ -0,0 +1,139 @@
+.letsmt-widget-container {
+  display: inline-block;
+  font-size: 13px;
+  line-height: 21px;
+}
+.letsmt-widget-container a img {
+  border: 0;
+}
+#letsmt-authorization {
+  float: right;
+}
+.letsmt-original-text-popup,
+#letsmt-update-translation-popup {
+  font-size: 13px;
+  line-height: 21px;
+  position: absolute;
+  background-color: #fff;
+  padding: 0.7em 1em 0.7em 1em;
+  border: solid 1px #444;
+  border-radius: 0.5em;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  min-width: 170px;
+  z-index: 2147483647;
+}
+.letsmt-original-text-popup a {
+  margin-top: 0.55em;
+  display: block;
+}
+.letsmt-original-text-popup label,
+#letsmt-update-translation-popup label {
+  font-size: 12px;
+  line-height: 21px;
+  margin: 0 0 0.3em 0;
+  font-weight: bold;
+  display: block;
+  color: #4d4d4f;
+}
+#letsmt-original-text-popup-close {
+  margin: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 8px 12px 3px 12px;
+}
+#letsmt-original-text-popup-close img {
+  border: 0;
+}
+#letsmt-update-translation-popup {
+  position: fixed;
+}
+.letsmt-translation:hover {
+  background-color: #ffffe0 !important;
+  color: #000 !important;
+}
+.letsmt-translation:hover span,
+.letsmt-translation:hover em {
+  background-color: inherit;
+  color: inherit;
+}
+.letsmt-popup-button-row {
+  margin-top: 0.8em;
+  text-align: center;
+}
+.letsmt-popup-button-row a {
+  margin-left: 0.3em;
+  margin-right: 0.3em;
+}
+#letsmt-update-translation-original {
+  width: 550px;
+  margin-bottom: 1em;
+}
+#letsmt-update-translation-translations {
+  width: 550px;
+  margin-bottom: 0.5em;
+  overflow-y: auto;
+  clear: both;
+}
+.letsmt-update-translation-list-row {
+  border: solid 1px #888;
+  margin-bottom: 1em;
+}
+.letsmt-update-translation-list-row table {
+  display: block;
+}
+.letsmt-update-translation-list-row table,
+.letsmt-update-translation-list-row tr,
+.letsmt-update-translation-list-row td {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  border-collapse: collapse;
+}
+.letsmt-update-translation-list-row table td {
+  vertical-align: top;
+}
+.letsmt-update-translation-list-accepted {
+  background-color: #efe;
+}
+.letsmt-update-translation-list-row:last-child {
+  margin-bottom: 0;
+}
+.letsmt-update-translation-list-row .letsmt-update-translation-list-buttons {
+  padding: 0.5em;
+}
+.letsmt-update-translation-list-buttons a {
+  display: block;
+}
+.letsmt-update-translation-list-row .letsmt-update-translation-list-text {
+  width: 100%;
+}
+.letsmt-update-translation-list-row .letsmt-update-translation-list-text div {
+  padding: 0.5em 0 0 0.5em;
+}
+#letsmt-update-translation-popup textarea {
+  padding: 0.5em;
+  margin: 0;
+  border: solid 1px #888;
+  display: block;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  width: 100%;
+  resize: none;
+}
+#letsmt-update-translation-popup .letsmt-update-translation-list-row textarea {
+  border-top: 0;
+  border-left: 0;
+}
+#letsmt-update-translation-popup #letsmt-update-translation-translation {
+  width: 550px;
+  margin-bottom: 0.5em;
+}
+.letsmt-update-translation-list-row .letsmt-update-translation-list-metadata {
+  font-size: 11px;
+  vertical-align: bottom;
+  padding: 0.5em;
+}

package/src/styles/colors.scss

@@ -0,0 +1,15 @@
+$collection-header: #e8eaec;
+$primary: #5a6672;
+$accent: #ad234a;
+$background: #ffffff;
+$target-background: #ffffff;
+$description-text: #9aa5b1;
+$sentence-highlight:#e8e8e8;
+$word-highlight: #c8c8c8;
+$empty-target-background: $background;
+$selected-sentence-background: #d6ebff;
+$source-download-color: #5a6672;
+$border-color: #cbd2d9;
+$button-border-color: rgba(0, 0, 0, 0.12);
+$incorrect-phrase-color: red;
+$link-color: #5A6672;

package/src/styles/fonts.scss

@@ -0,0 +1,3 @@
+@use "@tilde-nlp/ngx-common/styles/variables/fonts.variables" as tld;
+
+$primary-font: tld.$tld-font;

package/src/styles/mixin/border-default.scss

@@ -0,0 +1,10 @@
+@mixin border-direction-default($direction, $width:1px){
+    border-#{$direction}: $width solid var(--base-70);
+}
+
+@mixin border-default($width:1px){
+    @include border-direction-default('top', $width);
+    @include border-direction-default('bottom', $width);
+    @include border-direction-default('right', $width);
+    @include border-direction-default('left', $width);
+}

package/src/styles/mixin/tld-translate-accent-colors.scss

@@ -0,0 +1,46 @@
+@mixin tld-translate-accent-colors($accent) {
+  .tld-translate {
+    button[color="accent"]:not(.mat-button-disabled) svg,
+    mat-icon[color="accent"] svg {
+      fill: $accent;
+    }
+  }
+
+  .accent-outline {
+    border: 1px solid $accent !important;
+  }
+  
+  .accent-color {
+    color: $accent !important;
+  }
+
+  .accent-bg-color {
+    background-color: $accent !important;
+  }
+
+  // language-title styles should be outside of .tld-translate because language menu gets added to body and otherwise styles would not be applied.
+  .language-title:not(.no-highlight),
+  .tld-list-title {
+    &:hover:not([disabled]) {
+      color: $accent;
+    }
+  }
+
+  .tld-language-list-element.active {
+    .language-title {
+      color: $accent;
+    }
+  }
+
+  .tld-lang-list:not(.single-element-list) {
+    .active {
+      .language-title:after {
+        background: $accent;
+      }
+    }
+  }
+
+  .border-accent{
+    border-color: $accent!important;
+  }
+}

package/src/styles/mixin/tld-translate-colors.scss

@@ -0,0 +1,7 @@
+@import "tld-translate-accent-colors";
+@import "tld-translate-primary-colors";
+
+@mixin tld-translate-colors($primary, $accent) {
+  @include tld-translate-primary-colors($primary);
+  @include tld-translate-accent-colors($accent);
+}

package/src/styles/mixin/tld-translate-placeholders.scss

@@ -0,0 +1,5 @@
+@mixin tld-translate-placeholders($color){
+    .tld-translate .description-text{
+        color:$color;
+    }
+}

package/src/styles/mixin/tld-translate-primary-colors.scss

@@ -0,0 +1,5 @@
+@mixin tld-translate-primary-colors($primary) {
+  button[color="primary"] {
+    color: $primary;
+  }
+}