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: http://www.microsoftvirtualacademy.com

Tags:

Follow the Discussion

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.