HTML5 - Undo

UNDO

O objeto UndoManager

O agente de usuário deve armazenar um histórico de alterações para cada documento carregado. Esse histórico é controlado pelo objeto UndoManager, acessível através de window.undoManager. O histórico guarda dois tipos de alterações:

Alterações DOM

O próprio histórico de alterações do navegador, as alterações DOM são inseridas automati-camente no histórico quando o usuário usa um campo de edição.

Objetos undo

Os objetos undo são inseridos no histórico e controlados pelos seus scripts. Por exemplo, uma aplicação de e-mail pode guardar um objeto undo representando o fato de que o usuário moveu um e-mail de uma pasta para outra.

O objeto UndoManager possui os seguintes métodos e propriedades:

length

  o número de entradas no histórico

position

  o número da entrada atual no histórico

add(data,title)

  adiciona uma entrada específica no histório. data pode ser um objeto literal com dados arbitrários. title é como essa entrada vai aparecer descrita na lista do histórico

remove(index)

  remove uma entrada específica do histórico

clearUndo()

  remove todas as entradas antes da atual no histórico

clearRedo()

  remove todas as entradas após a atual no histórico.

Além disso, os itens no histórico podem ser acessados com window.undoManager[index].

Respondendo às ações de undo e redo

Cada vez que o usuário disparar uma ação de undo ou redo, e o item do histórico for um objeto undo, será disparado o evento correspondente, window.onundo ou window.onredo. As funções associadas a estes eventos receberão como parâmetro um objeto event, contendo uma propriedade data, cujo valor é o objeto undo que você inseriu no histórico.

Veja o exemplo:

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

Disparando as ações de undo e redo

Se você quiser oferecer em sua aplicação botões para undo e redo, basta que eles executem:

document.execCommand(‘undo’)

ou

document.execCommand(‘redo’)

Este treinamento faz parte do Microsoft Virtual Academy: https://www.microsoftvirtualacademy.com