Captura de pantalla 2015-11-12 a las 22.25.08

12 Nov

Comentarios Deja un comentario
Autor lenguaparaisosscc
Posted in Aprender de otra forma: Nuestro coro morfológico.
Full-size 681 × 460

Deja un comentario Cancelar la respuesta

<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet"  type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap" rel="stylesheet" type="text/css">
<link href="https://fonts.cdnfonts.com/css/opendyslexic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"  type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet"  type="text/css">


<style>
  
  .z-index {
    z-index: 999;
  }

  .select-container {
    display: inline-block;
    position: relative;
    z-index: 999;
  }

  .font-button {
    padding: 8px 16px;
    border: 1px solid black;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin: 8px;
    text-align: center;
    text-decoration: none;
    background-color: white;
    color: black;
    z-index: 999;
  }

  .fontButtonContainer {
     z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* establece el wrap para que los botones se distribuyan en varias líneas */
    gap: 5px; /* ajusta el espacio entre los botones */
    position: static; /* fija la barra de botones en la página: static para que aparezca en la parte superior, fixed para que quede flotando */
    top: 40px; /* fija la barra de botones en la parte superior de la página */
    left: 0; /* fija la barra de botones en el margen izquierdo */
    right: 0; /* fija la barra de botones en el margen derecho */
    margin: auto; /* centra la barra de botones horizontalmente */
  }
    
  /* Estilo para el desplegable */
  select {
    padding: 8px 4px;
    border: 1px solid black;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin: 6px;
    text-align: center;
    text-decoration: none;
    background-color: white;
  }
  
  select option {
  text-align: left;
  }
  
</style>

<script>

// BatexeGo v3 Juan José de Haro 

// Define los textos que se ven en pantalla. Reemplazar el texto entre comillas

  // Textos del menú desplegable
    const defaultText = 'Parámetros por defecto:'; //Descripción de la opción por defecto
    const standardText = 'Fuente estándar'; // Fuente original del documento
    
    const dyslexicDesc = 'Dislexia:'; // Descripción de la opción OpenDyslexic  
    const dyslexicText = 'OpenDyslexic'; 
    
    const hyperlegibleDesc = 'Deficiencias visuales:'; // Descripción de la opción Atkinson Hyperlegible
    const hyperlegibleText = 'Atkinson Hyperlegible'; 
    
    const highLegibilityDesc = 'Alta legibilidad:'; // Descripción de las opciones de alta legibilidad
    const opensansText = 'OpenSans'; 
    const robotoText = 'Roboto'; 
    const latoText = 'Lato'; 
    const montserratText = 'Montserrat'; 

  // Botones aumentar y disminuir fuente
    const increaseFontText = 'A+'; // Botón para incrementar la fuente
    const increaseFontTitle = 'Incrementa la fuente'; // Texto emergente al pasar el ratón
    
    const decreaseFontText = 'A-'; // Botón para reducir la fuente
    const decreaseFontTitle = 'Reduce la fuente'; // Texto emergente al pasar el ratón

  // Botón para traducir
    const translateText = '🌐'; // Texto para el botón de traducción de Google
    const translateTitle = 'Traduce la página'; // Texto emergente al pasar el ratón

  // Botón para leer / detener la lectura en voz alta
    let readText = 'Leer'; // Botón para leer en voz alta el contenido de la página
    const readTextTitle ='Lee en voz alta la selección o la página entera'; // Texto emergente al pasar el ratón
    
    const stopText = 'Detener'; // Texto del botón para detener la lectura
    const stopTextTitle = 'Detiene la lectura'; // Texto emergente al pasar el ratón
  
  // Botones para que los botones estén siempre visibles
    let floatingFix = 'Fijar'; // Texto del botón flotante cuando está sobre el texto
    let floatingFixTitle = 'Fija la barra de botones en la parte superior'; // Texto emergente al pasar el ratón
    
    let floatingFloat = 'Flotar'; //Texto del botón flotante cuando está fijo en la parte superior
    let floatingFloatTitle = 'La barra permanecerá siempre visible';
  
  
  // Enlace +Info
    const infoText = '+Info'; // Texto del enlace +Info
    const infoTextLink = 'https://batexego.bilateria.org'; // Destino del enlace de +Info

// Fin 
  

  readText = `${readText} (${document.documentElement.lang})`; //Se añade el idioma al botón Leer
  

  let originalFont;
  let currentFontSize;
  let originalFontSize;
  let isReading = false;
  let utterance = new SpeechSynthesisUtterance();
  let googleTranslateWidgetVisible = localStorage.getItem('googleTranslateWidgetVisible');

  function setFont(font) {
  document.body.style.fontFamily = font;
  localStorage.setItem('font', font);
  }

  function setFontSize(size) {
  currentFontSize = parseInt(window.getComputedStyle(document.body).getPropertyValue('font-size'));
  currentFontSize += size;
  document.body.style.fontSize = currentFontSize + 'px';
  localStorage.setItem('fontSize', currentFontSize + 'px');
  }
  
  

function toggleGoogleTranslateWidget() {
  if (!googleTranslateWidgetVisible) {
    const script = document.createElement('script');
    script.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
    script.id = 'google-translate-script';
    document.head.appendChild(script);
    
    const googleTranslateElement = document.createElement('div');
    googleTranslateElement.id = 'google_translate_element';
    googleTranslateElement.style.position = 'fixed';
    googleTranslateElement.style.top = '0';
    googleTranslateElement.style.right = '0';
    googleTranslateElement.style.zIndex = '1000';
    document.body.appendChild(googleTranslateElement);

    window.googleTranslateElementInit = function() {
      new google.translate.TranslateElement({pageLanguage: 'auto', layout: google.translate.TranslateElement.FloatPosition.TOP_RIGHT}, 'google_translate_element');
    };

    googleTranslateWidgetVisible = true;
    
  } else {
    const script = document.getElementById('google-translate-script');
    script.remove();
    
    const googleTranslateElement = document.getElementById('google_translate_element');
    googleTranslateElement.remove();

    googleTranslateWidgetVisible = false;
  }
  localStorage.setItem('googleTranslateWidgetVisible',googleTranslateWidgetVisible);
}




  document.addEventListener('DOMContentLoaded', () => {

    googleTranslateWidgetVisible = JSON.parse(localStorage.getItem('googleTranslateWidgetVisible'));
  if(googleTranslateWidgetVisible) {
    googleTranslateWidgetVisible = false;
    toggleGoogleTranslateWidget();
  }

    
  
    originalFont = window.getComputedStyle(document.body).getPropertyValue('font-family');
    localStorage.setItem('originalFont', originalFont);
    let font = localStorage.getItem('font');
    if (!font) {
    font = originalFont;
    }
    document.body.style.fontFamily = font;

    let fontSize = localStorage.getItem('fontSize');
    originalFontSize = window.getComputedStyle(document.body).getPropertyValue('font-size');
    localStorage.setItem('originalFontSize', originalFontSize);
    if (!fontSize) {
    fontSize = originalFontSize
    localStorage.setItem('fontSize', fontSize);
    }
    document.body.style.fontSize = fontSize;

    const fontButtonContainer = document.createElement('div');
    fontButtonContainer.classList.add('fontButtonContainer'); 
    
    const selectContainer = document.createElement('div');
    selectContainer.classList.add('select-container');
    const select = document.createElement('select');
    select.classList.add('z-index');
    const standardOption = document.createElement('option');
    standardOption.value = 'standard';
    standardOption.text = standardText;

    const defaultFontOptGroup = document.createElement('optgroup');
    defaultFontOptGroup.label = defaultText;
    defaultFontOptGroup.appendChild(standardOption);

    select.appendChild(defaultFontOptGroup);


    const dyslexicOption = document.createElement('option');
    dyslexicOption.value = 'dyslexic';
    dyslexicOption.text = dyslexicText;
    select.add(dyslexicOption);

    const dyslexicOptGroup = document.createElement('optgroup');
    dyslexicOptGroup.label = dyslexicDesc;
    dyslexicOptGroup.appendChild(dyslexicOption);
    select.appendChild(dyslexicOptGroup);

    const hyperlegibleOption = document.createElement('option');
    hyperlegibleOption.value = 'hyperlegible';
    hyperlegibleOption.text = hyperlegibleText;
    select.add(hyperlegibleOption);

    const hyperlegibleOptGroup = document.createElement('optgroup');
    hyperlegibleOptGroup.label = hyperlegibleDesc;
    hyperlegibleOptGroup.appendChild(hyperlegibleOption);
    select.appendChild(hyperlegibleOptGroup);

    const opensansOption = document.createElement('option');
    opensansOption.value = 'Open Sans';
    opensansOption.text = opensansText;
    select.add(opensansOption);

    const robotoOption = document.createElement('option');
    robotoOption.value = 'Roboto';
    robotoOption.text = robotoText;
    select.add(robotoOption);

    const latoOption = document.createElement('option');
    latoOption.value = 'Lato';
    latoOption.text = latoText;
    select.add(latoOption);

    const montserratOption = document.createElement('option');
    montserratOption.value = 'Montserrat';
    montserratOption.text = montserratText;
    select.add(montserratOption);  
    

    const highLegibilityOptGroup = document.createElement('optgroup');
    highLegibilityOptGroup.label = highLegibilityDesc;
    highLegibilityOptGroup.appendChild(latoOption);
    highLegibilityOptGroup.appendChild(montserratOption);
    highLegibilityOptGroup.appendChild(opensansOption);
    highLegibilityOptGroup.appendChild(robotoOption);
    
    
    
    select.appendChild(highLegibilityOptGroup);

    // Seleccionar la opción correspondiente al cargar la página
    if (font === originalFont) { // Nueva condición
    select.selectedIndex = 0; // Nueva línea
    } else if (font === 'OpenDyslexic') {
    select.selectedIndex = 1;
    } else if (font === 'Atkinson Hyperlegible') {
    select.selectedIndex = 2;
    } else if (font === 'Roboto') {
    select.selectedIndex = 6;
    } else if (font === 'Lato') {
    select.selectedIndex = 3;
    } else if (font === 'Open Sans') {
    select.selectedIndex = 5;
    } else if (font === 'Montserrat') {
    select.selectedIndex = 4;
    }

    select.addEventListener('change', () => {
    const font = select.value;
    if (font === 'standard') {
    setFont(originalFont);
    fontSize = originalFontSize;
    localStorage.setItem('fontSize', fontSize);
    document.body.style.fontSize = localStorage.getItem('originalFontSize');
    } else if (font === 'dyslexic') {
    setFont('OpenDyslexic');
    } else if (font === 'hyperlegible') {
    setFont('Atkinson Hyperlegible');
    } else if (font === 'Open Sans') {
    setFont('Open Sans');
    } else if (font === 'Roboto') {
    setFont('Roboto');
    } else if (font === 'Lato') {
    setFont('Lato');
    }  else if (font === 'Montserrat') {
    setFont('Montserrat');
    }
    });

    selectContainer.appendChild(select);
    fontButtonContainer.appendChild(selectContainer);
    

    const increaseFontButton = document.createElement('button');
    increaseFontButton.classList.add('font-button');
    increaseFontButton.textContent = increaseFontText;
    increaseFontButton.setAttribute('title', increaseFontTitle);
    increaseFontButton.addEventListener('click', () => setFontSize(1));
    fontButtonContainer.appendChild(increaseFontButton);

    const decreaseFontButton = document.createElement('button');
    decreaseFontButton.classList.add('font-button');
    decreaseFontButton.textContent = decreaseFontText;
    decreaseFontButton.setAttribute('title', decreaseFontTitle);
    decreaseFontButton.addEventListener('click', () => setFontSize(-1));
    fontButtonContainer.appendChild(decreaseFontButton);
    
    const translateButton = document.createElement('button');
    translateButton.classList.add('font-button');
    translateButton.textContent = translateText;
    translateButton.setAttribute('title', translateTitle);
    translateButton.addEventListener('click', toggleGoogleTranslateWidget);
    fontButtonContainer.appendChild(translateButton);

  // Botón para leer en voz alta
    const readButton = document.createElement('button');
    readButton.classList.add('font-button');
    readButton.textContent = readText;
    readButton.setAttribute('title', readTextTitle);
    
    readButton.addEventListener('click', () => {
    let selectedText = window.getSelection().toString();
    let text = '';
    let lang = document.documentElement.lang;
    if (selectedText !== '') {
      text = selectedText;
      let selectedNode = window.getSelection().anchorNode;
      while (selectedNode && selectedNode.nodeType !== Node.ELEMENT_NODE) {
        selectedNode = selectedNode.parentNode;
      }
      if (selectedNode) {
        const selectedLang = selectedNode.getAttribute('lang');
        if (selectedLang) {
          lang = selectedLang;
        }
      }
    } else {
      text = document.body.innerText;
      const bodyLang = document.body.getAttribute('lang');
      if (bodyLang) {
        lang = bodyLang;
      }
    }

    utterance.lang = lang;
    utterance.text = text;

    if (!isReading) {
      isReading = true;
      readButton.textContent = `${stopText} (${lang})`;
      readButton.setAttribute('title', stopTextTitle);
      speechSynthesis.speak(utterance);
    } else {
      isReading = false;
      readButton.textContent = readText;
      readButton.setAttribute('title', readTextTitle);
      speechSynthesis.cancel();
    }

    utterance.addEventListener('end', () => {
      isReading = false;
      readButton.textContent = readText;
      readButton.setAttribute('title', readTextTitle);
    });
  });  
    
    fontButtonContainer.appendChild(readButton);
    
  // Botón para que la barra esté siempre visible
    const floatingButton = document.createElement('button');
    floatingButton.classList.add('font-button');
    floatingButton.textContent = floatingFloat;
    floatingButton.setAttribute('title', floatingFloatTitle);
    floatingButton.addEventListener('click', () => {
    if (floatingButton.textContent === floatingFix) {
      fontButtonContainer.style.position = 'static';
      floatingButton.textContent = floatingFloat;
      floatingButton.setAttribute('title', floatingFloatTitle);
      localStorage.setItem('floatState', 'static');
    } else {
      fontButtonContainer.style.position = 'fixed';
      floatingButton.textContent = floatingFix;
      floatingButton.setAttribute('title', floatingFixTitle);
      localStorage.setItem('floatState', 'fixed');
    }
  });

    

    let floatState = localStorage.getItem('floatState');
    if (!floatState) {
      floatState = 'static';
      floatingButton.textContent = floatingFix;
      floatingButton.setAttribute('title', floatingFixTitle);
    }
    if (floatState === 'fixed') {
      fontButtonContainer.style.position = 'fixed';
      floatingButton.textContent = floatingFix;
      floatingButton.setAttribute('title', floatingFixTitle);
    } else {
      fontButtonContainer.style.position = 'static';
      floatingButton.textContent = floatingFloat;
      floatingButton.setAttribute('title', floatingFloatTitle);
    }
    
    localStorage.setItem('floatState', floatState);
    
  fontButtonContainer.appendChild(floatingButton);


    const infoLink = document.createElement('a');
    infoLink.textContent = infoText;
    infoLink.href = infoTextLink;
    infoLink.target = '_blank';
    infoLink.style.marginLeft = '8px';
    infoLink.style.fontSize = '12px';
    fontButtonContainer.appendChild(infoLink);

    
    infoLink.classList.add('z-index');

    document.body.insertBefore(fontButtonContainer, document.body.firstChild);
   
  });
  
  

</script>