Outro dia escrevi aqui sobre um script para traduzir HTML para WikiFormat e vice-versa. Bem, fiz esse script mas depois de pronto achei que era perda de tempo… ninguém ia usar aquilo. O fato é que cheguei à conclusão que esse sistema só ia funcionar bem num editor tipo wysiwyg, que alternasse entre a renderização HTML e o código wiki em vez do HTML.

Poder arrastar e soltar elementos HTML na página é quase sempre um grande ganho em interatividade e design, além de, em muitos casos, permitir a troca das incômodas janelas popup por divs flutuantes, que podem ser movidos pelo usuário.

Vou mostrar aqui uma forma bastante simples e funcional de fazer isso em Javascript, com três funções apenas, mas antes de mostrar o código, vou explicar a idéia da coisa e desmistificar logo o "complicadíssimo drag and drop", antes que você se decepcione com o tamanho do código…

Acessar o CSS com javascript é algo que fazemos com frequência e que não envolve grandes mistérios, mas há certas coisas que raramente precisamos fazer e acabamos esquecendo até que aquilo é possível. Desculpem, estou escrevendo na 3ª pessoa mas na verdade estou falando apenas por mim… Nesse texto vou responder às minhas próprias dúvidas, tentando exorcisar o comodismo, mas também por acreditar que outros podem ganhar com as respostas que encontrei.

O CSS declarado inline, dentro da própria TAG, está facilmente acessível ao javascript, tanto para ler quanto para modificar. Podemos também ler e modificar com facilidade o valor da propriedade className das TAGs, alternando entre grupos de regras css pelos nomes das classes correspondentes. Mas, até pouco tempo atrás, havia para mim dois pontos incógnitos, duas perguntas que me perseguiam: "como modificar regras dentro de uma classe?" e "como obter as regras que incidem em determinado elemento por herança?". Bem, sou um autodidata e é essa curiosidade que me faz andar para frente, portanto, pesquisei e, como sempre, descobri que é simples. Aliás, essa é uma lição que posso dar aos iniciantes que são autodidatas como eu: difícil é aquilo que ainda não aprendemos a fazer, o resto é fácil. Não se deixe intimidar.

Acabei de construir uma funçãozinha muito útil em Javascript para inverter uma determinada cor, que pode ser enviada em rgb ou hexadecimal. Resolvi compartilhar com vocês.

Minha situação era a seguinte: eu precisava marcar, sobressaltar partes de um texto, mas não sabia qual seria a cor desse texto. Bem, para isso existe o valor ‘highlight’, mas ele não é aconselhado pela W3C… e nem sempre o resultado é ir para a cor oposta a do texto, embora resolva os problemas de baixo contraste. Mas o W3C falou, tá falado. Usei, a princípio, cores fixas (fundo azul marinho e fonte branca). Não ficava mal, mas seria mais elegante usar a cor oposta… e fiquei com isso na cabeça: como inverter uma cor?

Este é um tema tão falado ultimamente, que é difícil achar alguém que não conhece (de nome) a tal da acessibilidade. Outro dia vi na TV um anúncio (não lembro de que entidade) ensinando ao público o que é acessibilidade. Mas ainda é fácil perceber que a preocupação em fornecer acesso à pessoas com algum tipo de deficiência (que não são poucas) ainda não é algo levado muito a sério. Às vezes executar uma ação simples torna-se impossível graças a um pequeno detalhe que poderia ter sido projetado levando em conta as nescessidades dessas pessoas - muitas vezes sem custo adicional.

Até pouco tempo atrás, eu mesmo nunca tinha pensado a respeito, mas agora parei para fazer isso e percebi o quanto é importante - além de ser respeitoso e educado com aqueles que tem alguma dificuldade e que tem (ao menos teoricamente) o direito de acesso a tudo que é público. Mas como traduzir esses conceitos de acessibilidade para um website?

As “hotkeys” - ou atalhos de teclado - são um recurso muito legal e pouco utilizado em páginas da web. Aliás, pouca gente usa os atalhos em qualquer programa. Na maior parte das vezes o usuário não passa do Ctrl + X/C/V (recortar, copiar e colar). Mas eles são verdadeiros “atalhos”, cortando, muitas vezes, grande parte do caminho que teríamos que percorrer para chegar ao comando desejado.
Além de, dentro dos preceitos da web 2.0, ser um recurso de usabilidade bastante desejável. O Google (símbolo máximo da tal de web 2.0), por exemplo, oferece alguns atalhos para comandos na interface do Gmail.

Vou mostrar neste artigo uma função para reorganizar as linhas de uma tabela a partir dos valores de suas colunas. Tive dúvidas sobre um título que dissesse isso em uma linha, mas achei que a idéia do data-grid ilustraria bem. A idéia é olhar a tabela por suas colunas e, a partir de um click no elemento <th> correspondente, classificar e reorganizar as linhas pelos valores na coluna escolhida.

Esse script foi criado a partir de um exemplo que consegui na internet há anos, não sei, mas se não me engano foi num site da Microsoft. Não havia informações autorais, mas a verdade é que quando digo "criado a partir de" significa que mudei bem a coisa.
O legal da função é que usa propriedades e métodos nativos do elemento <table> e de seus sub elementos, que quase não se vê e não são muito utilizados - coisa antiga, da época em que "Dom" era só para quem tinha algum talento especial e "Ajax" não passava de material de limpeza (rsrsrs).

Hoje, mexendo em um trabalho que fiz há algum tempo, redescobri essa função que considero muito útil. Com ela é possível abrir determinados elementos para edição. Deixar o usuário editar o conteúdo de um DIV ou TD por exemplo (ou qualquer um que tenha a propriedade innerHTML). Eu criei a função para um sistema em que o usuário editava dados em um XML: montava a página a partir do XML e deixava o usuário editar os textos, então remontava o XML a partir do innerHTML da página.

A idéia surgiu  com uma função que encontrei nos meus garimpos, para determinar a posição exata de um elemento na página, a absPos(). Essa é uma função que está toda dentro de um for que não tem bloco de comandos, numa sintaxe legal, pouco comum. Não sei quem é o autor (displicência minha… desculpe-me por isso o autor dessa função tão legal), veja: