UXDE dot Net Wordpress Themes

Entendendo o objeto UndoManager do HTML5

HTML5 Logo

HTML5 Logo

Undo: Entendendo o objeto UndoManager

Os browsers (navegadores de internet), armazenam um histórico de modificações para cada um dos documentos carregados. Esse histórico de mudanças é gerenciado por um objeto UndoManager que pode ser acessado através de window.undoManager.

Nesse histórico são guardados dois tipos diferentes de alteração:

Alterações DOM

Se trata do próprio histórico de modificações do navegador. As alterações DOM se inserem de forma automática ao histórico quando o usuário utiliza um campo editável.

Objetos undo

São inseridos no histórico e gerenciados por scripts próprios. Como exemplo, podemos citar uma aplicação de e-mail que pode guardar um objeto undo indicando que o usuário moveu um e-mail de pasta.

Do objeto UndoManager, destaca-se alguns de seus métodos e aributos:

length: Numero de entradas no histórico;
position: Numero da entrada atual;
add(data,title): Adiciona entradas específicas no histórico. data pode ser um objeto literal com dados arbitrários. title representa a forma como a entrada aparecerá descrita na lista de histórico;
remove(index): Remove entradas especificas do histórico;
clearUndo(): Remove todas entradas anteriores a atual contidas no histórico;
clearRedo(): Remove todas entradas posteriores a atual contidas no histórico.

Itens específicos do histórico também podem ser acessados com window.undoManager.[index].

Respondendo ações de undo e redo

Quando ações de undo(desfazer alterações) ou redo (reverter alterações) são disparadas pelo usuário e o item do histórico for um objeto histórico undo, um evento será disparado: window.onundo. para undo e window.onredo. para redo. As funções que são associadas a esses eventos receberão um objeto event como parâmetro com um atributo data e seu valor é o objeto undo inserido no histórico. Veja o exemplo abaixo:

window.onundo=function(e){
      alert(‘Refazer a alteração: ‘+e.data)
}

Disparando ações de undo e redo

Caso queira oferecer botões para undo e redo em sua aplicação, eles devem executar:

document.execCommand(‘undo’)

ou

document.execCommand(‘redo’)

Conclusão

Conclui-se assim, a importância do entendimento dos eventos de undo e redo para realização de alterações em documentos carregados, bem como a revisão de algumas características e funcionalidades de um objeto UndoManager para manipulação do histórico de modificações em navegadores de internet

Leia mais sobre o assunto!

Escrito por Matheus de Oliveira|Site|Outros textos

Comente!

Atenção: É obrigatório o preenchimento dos campos nome e e-mail!