3ENGINE

Programación y otros cachivaches

Etiqueta: javascript

Página 1/2

Tecnologia

Bootstrap: cómo agregar estado checked a los elementos de un menu dropdown


A continuación te muestro cómo agregar estado checked a los elementos de un menu dropdown de Bootstrap

Bootstrap es un framework Open Source creado por Twitter que facilita el diseño web. En la lista de componentes facilitados por este genial framework tenemos el dropdown. Un dropdown permite mostrar una lista de opciones en un desplegable. El problema es que bootstrap no permite indicar si una opcion de la lista está checked (activada) o unchecked (desactivada). Para conseguir esto por nuestra cuenta vamos a necesitar un poco de css y javascript:

  • La clase dropdown-item-checked añade un símbolo ‘✓’ a la izquierda de la opción, esto se consigue con CSS.
  • Con HTML asociamos cada una de las opciones del dropdown a la clase option que nos servirá para capturar el evento click y añadimos la clase dropdown-item-checked a las opciones que queremos a checked por defecto.
  • Javascript captura el evento click sobre las opciones y conmuta la clase dropdown-item-checked de la opcion sobre la que hemos hecho click. Cuando la opción no tiene la clase dropdown-item-checked el símbolo ‘✓’ desaparece y viceversa, cuando la opción tiene la clase dropdown-item-checked el símbolo ‘✓’ aparece de nuevo.

Código HTML

<div class="btn-toolbar">
  <div class="input-group">
    <div class="input-group-btn">
      <button type="button" class="btn btn-default" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" id="menu">
        <li><a href="#" id="option-one" class="option dropdown-item-checked">My option one</a></li>
        <li><a href="#" id="option-two" class="option">My option two</a></li>
        <li><a href="#" id="option-three" class="option dropdown-item-checked">My option three</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#" id="option-five" class="option">My option five</a></li>
      </ul>
    </div>
  </div>
</div>

Código CSS

.dropdown-item-checked::before {
   position: absolute;
   left: .4rem;
   content: '✓';
   font-weight: 600;
}

Código Javascript

$(".option").click(function(event){
  event.preventDefault();
  var id = $(this).attr('id');
  $(this).toggleClass("dropdown-item-checked");
  var isChecked = $(this).hasClass("dropdown-item-checked");
  if (id == 'option-one') {
   if (isChecked) {
     // bla bla bla 
     }
  } else if (id == 'option-two') {
  // bla bla bla
  } else if (id == 'option-three') {
  // bla bla bla
  } else if (id == 'option-four') {
  // bla bla bla
  }
});

Aqui el código en jsfiddle




Tecnologia

Cómo deshabilitar la tecla enter en una página web


De modo predeterminado el envio de un formulario se puede ejecutar con un botón submit asociado al formulario o pulsando enter.

deshabilitar la tecla enter en una página web

Para desactivar el envio del formulario mediante la tecla enter con javascript + jquery:

$(function () {
    $("form").keypress(function (e) {
        var key;
        if (window.event)
            key = window.event.keyCode; //IE
        else
            key = e.which; //firefox     
        return (key != 13);
    });
});

Este código asigna el evento keypress al formulario. Si queremos el mismo comportamiento para toda la página entonces tenemos que sustituir $(«form») por $(«body») u otro selector jquery que se adapte a tus necesidades.




Tecnologia

Cómo traducir textos con python y Google Translate


Si necesitas traducir textos a otros idiomas de manera totalmente automática, Google ofrece la API de su producto Google Translate. Pero tienes que saber que necesitas una API Key de Google y que es de pago.

Una alternativa gratuita es hacer uso de técnicas de Web Scraping para simular que nuestra aplicación es un humano navegando por la Web y recopilar información de forma automática.

 traducir textos con python y Google Translate

Es posible traducir textos con python y Google Translate. Se trata de simular los siguientes pasos:

  1. Entrar en la página del traductor Google Translate.
  2. Introducir el texto original que queremos traducir.
  3. Indicar el idioma de origen o decirle que detecte el idioma en el que está escrito.
  4. Indicar el idioma destino.
  5. Traducir.
  6. Recoger el texto traducido.
  7. Recoger el idioma de origen si le dijimos a Google Translate que detectara el idioma.

Para implementar todos los pasos necesitamos estas librerías de Python:

  • urllib para codificar los parámetros GET.
  • urllib2 para modificar la cabecera HTTP y enviar la petición GET (Request).
  • re para adaptar la respuesta (Response) mediante el uso de expresiones regulares.
  • json para deserializar la respuesta a un objeto Python.

Si te falta alguna de estas librerías utiliza pip como gestor de paquetes e instalalas.  Este enlace te explica cómo instalar pip.

El código, mas abajo comento cómo funciona:

from urllib import urlencode
from urllib2 import urlopen, Request
import re
import json
def get_google_translate(text, translate_lang, source_lang=None):
    if source_lang == None:
        source_lang= 'auto'
    params = urlencode({'client':'t', 'tl':translate_lang, 'q':text.encode('utf-8'),
                       'sl':source_lang})
    http_headers = {"User-Agent":"Mozilla/4.0 (compatible; MSIE 5.5;Windows NT)"}
    request_object = Request('http://translate.google.com/translate_a/t?'+params, 
                     None, http_headers)
    try:
        response = urlopen(request_object)
        string = re.sub(',,,|,,',',"0",', response.read())
        n = json.loads(string)
        translate_text = n[0][0][0]
        res_source_lang = n[2]
        return True, res_source_lang, translate_text
    except Exception, e:
        return False, '', e

En la línea 14 se hace la petición GET donde se le pasa la cabecera modificada para simular que nuestra rutina es un navegador Web. Como parámetros GET se le pasa el texto a traducir así como el idioma de destino y el idioma de origen o ‘auto’ para que detecte el idioma.

La respuesta es un array en el formato javascript:

[[[«Happy Birthday!»,»С днём рождения!»,»»,»S dnom rozhdeniya!»]],,«ru»,,[[«Happy Birthday!»,[4],True,False,627,0,3,0]],[[«С днем рождения !»,4,[[«Happy Birthday!»,627,True,False],[«Happy birthday»,0,True,False]],[[0,16]],»С днём рождения!»]],,,[],1]

Necesita de una pequeña adaptación para ser un JSON compatible y de esto se encarga la línea 15 de código mediante una expresión regular que añade un cero a cualquier aparición de item vacío. La línea 16 deserializa el JSON para después leer el texto traducido y el idioma de origen.

Test:

result, code, text = get_google_translate(u'Hola Mundo!', 'en')
print result, code, text
result, code, text = get_google_translate(u'Hello World!', 'es')
print result, code, text
result, code, text = get_google_translate(u'привет мир', 'en')  
print result, code, text
result, code, text = get_google_translate(u'مرحبا العالم', 'en') 
print result, code, text
result, code, text = get_google_translate(u'Ciao Mondo', 'pt', 'it') 
print result, code, text

En todas las traducciones, excepto en la última, indicamos que detecte automáticamente el idioma del texto a traducir.

Resultado:

True es Hello World!
True en ¡Hola Mundo!
True ru hello world
True ar Hello world
True it Olá Mundo

Comprobamos que detecta que el idioma de origen es el español (es), inglés (en), ruso (ru) y árabe (ar) respectivamente. Por último indica que el idioma es el italiano (it) que es el indicado. Ahora podemos traducir textos con python y Google Translate fácilmente.




Tecnologia

node.js, javascript: función para formatear una fecha


Javascript y por lo tanto node.js no proveen de funciones potentes para formatear una fecha. La siguiente función para formatear una fecha quizá os facilite la vida.

/*
parámetro fstr: %Y - año , %m - mes, %d - día, %H - hora, %M - minuto, %S - segundo
parámetro utc: true, calcula la fecha y hora local
*/Date.prototype.format = function(fstr, utc) {
  var that = this;
  utc = utc ? 'getUTC' : 'get';
  return fstr.replace (/%[YmdHMS]/g, function (m) {
    switch (m) {
    case '%Y': return that[utc + 'FullYear'] ();
    case '%m': m = 1 + that[utc + 'Month'] (); break;
    case '%d': m = that[utc + 'Date'] (); break;
    case '%H': m = that[utc + 'Hours'] (); break;
    case '%M': m = that[utc + 'Minutes'] (); break;
    case '%S': m = that[utc + 'Seconds'] (); break;
    default: return m.slice (1); 
    }    
    return ('0' + m).slice (-2);
  });
};

Demo:

a = new Date();
console.log(a.format ("%Y-%m-%d %H:%M:%S", true) );
console.log(a.format ("%d/%m/%Y %H:%M:%S", true));
console.log(a.format ("%d/%m/%Y %H:%M:%S", false));
console.log(a.format ("%m", true) ); 
console.log(a.format ("%d", true) );
2013-05-22 19:40:27
22/05/2013 19:40:27
22/05/2013 21:40:27
05
22