Drupal Powered Pages

https://content.boston.gov/

There are a few things that needs to happen here.

1. Select the "Formatted Text Blocks" from the list of component library available in Drupal. Make sure to set the "text format" to "JSON Friendly". See image below:

Drupal Text Editor - One Column Text

1. Add the following code to editor:

<iframe id="softr-9c49c089-f2a3-469c-ad9a-8b079b689019-original-design" src="https://bostonyouthresourcehub.softr.app/embed/pages/2f1a3969-4480-4a85-9c37-f0c2f3dd095d/blocks/list2" width="100%" height="1000" scrolling="no" frameborder="0" style="border:none;" class="iframe-component"></iframe>    <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.min.js"></script>    <script> iFrameResize({ checkOrigin: false, log: true }, '#softr-9c49c089-f2a3-469c-ad9a-8b079b689019-original-design');</script>

<script src="https://cdn.weglot.com/weglot.min.js"></script><script>
// In your parent window
Weglot.initialize({
    api_key: 'wg_4be3fcbbe36be8315557bb8ae51e61dc0',
    translate_iframes: ["#softr-9c49c089-f2a3-469c-ad9a-8b079b689019-original-design", ".iframe-component"]
});
</script>

Don't forget to go to Weglot Dashboard and grab the api_key to include in the Weglot.initialize function below.

api_key: 'wg_4be3fcbbe36be8315557bb8ae51e61dc0'

1. Add CSS style to overwrite the current "Translation" text and/or link on the website.

<style>
#targetLanguage {visibility:hidden;}
.wg-drop.country-selector .wgcurrent {border: none;}

.wg-drop.country-selector .wgcurrent a {
background-image: url(/themes/custom/bos_theme/images/Google_Translate_logo.svg_32.png);
background-repeat: no-repeat;
padding-left: 40px;
padding-right: 0;
background-size: 20px 20px;
    background-position: left;
    padding-left: 26px;
    font-size: 14px;
    LINE-HEIGHT: 65;
    letter-spacing: 0px;
    font-family: Montserrat, Arial, sans-serif;
    text-transform: uppercase;
}
.wg-drop.country-selector .wgcurrent a:hover {color: #d22d23;}
.site-banner-hidden .wg-default, .site-banner-hidden .wg-default .country-selector {top: 15px; }
.site-banner-visible .wg-default, .site-banner-visible .wg-default .country-selector {top: 55px; }
.wg-default .wg-drop.country-selector li {background-image: none;}
.wg-default, .wg-default .country-selector {
    top: 52px; 
    position: fixed;
    right: 60px;
    Bottom: auto;
    height: 40px;
    clear: both;
    overflow: hidden;
}
.wg-default, .wg-default .country-selector.open {overflow: visible;}
.wg-drop.country-selector .wgcurrent:after {display:none;}
body.logged-in.toolbar-fixed.toolbar-tray-open .wg-default {top: 4.4em; display: none;}
body.toolbar-fixed.toolbar-horizontal #page .wg-default {top: 2.15em; display: none;}
body.toolbar-fixed .wg-defaul, body.toolbar-fixed .wg-default {top: 2.15em; display: none;}
@media screen and (max-width: 750px) {
  .wg-default, .wg-default .country-selector {
    top: 70px; 
  }
}
</style>

1. Add Javascript to fix window position of translation link/dropdown on the page:

<script>

  function debounce(func, wait = 10, immediate = true) {
    let timeout;
    return function() {
      let context = this, args = arguments;
      let later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      let callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  };

  let scrollPos = 0;
  const nav = document.querySelector('.page-node');

  function checkPosition() {
    let windowY = window.scrollY;
    if (windowY < scrollPos) {
      // Scrolling UP
      nav.classList.remove('site-banner-hidden');
      nav.classList.remove('site-banner-visible');
      
    } else if (windowY > scrollPos) {
      //Scrolling DOWN
     // nav.classList.remove('site-banner-visible');
      nav.classList.add('site-banner-hidden');
     
   }else {
      //nav.classList.add('site-banner-visible');
      nav.classList.remove('site-banner-hidden');
   }

    //scrollPos = windowY;
  }

  //window.addEventListener('scroll', checkPosition);
  window.addEventListener('scroll', debounce(checkPosition));

</script>