Undo (html5)

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 automaticamente 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')

 

Isso ai, esse eo final do html5, mas vou vir com mais tutoriais em outras linguagens, valew.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s