Webアプリケーションの変更を追跡する

Question

最新の編集中に加えられた変更をユーザーが確認する必要があるアプリケーションがあります。 変更によって、私は、テキストエリア、ドロップダウンのようなすべての入力に加えられた変更を意味します。

私は右上に背景画像を表示し、ユーザーがこの背景画像をクリックすると、その違いを示すポップアップが表示されます。 プロトタイプ1.7.0を使用しています。

私の最初の質問は次のようになります。 -
1.この機能を実装するにはどうすればよいでしょうか？
2.背景画像にonClickを付けることはできますか？

Answer 1

jQueryライブラリには、あなたにとって有益な機能がいくつかあります。プロトタイプを使用している場合は、私が利用できる類似の機能がいくつかあると思います。私はこのようないくつかのコードを書くことをお勧め

：

var $input = $('input').add('textarea').add('select'); 

$input.each(function() { 
var id = $(this).attr('id'); 
var value = $(this).val(); 
var hiddenId = 'hidden' + id; 
var newHiddenInput = $("<input type='hidden'").val(value).attr('id',hiddenId); 
$(this).after(newHiddenInput); 
}); 

上記のコードは、各入力のための新しい隠し入力、テキストエリアを作成し、あなたのページで選択します。それは、それが複製する入力と同じ値を持ちます。これは、idに「hidden」という単語を付加することに相当するidを持つでしょう。

クリックハンドラーを背景画像に添付できるかどうかはわかりません。あなたの入力が<div>の中に囲まれている場合、あなたのdivにクリックハンドラを付けることで、あなたが望む結果を得ることができるかもしれません。

いずれの場合でも、差異の概要を準備できるように、以前の値をユーザーの入力と簡単に比較できるようにする必要があります。

Answer 2

プロトタイプは私たちに、このためにほぼ完璧ですが、別のハッシュとの差を算出する方法を欠いているので、のはそれを追加してみましょうHashクラスを提供します...

Hash.prototype.difference = function(hash) 
{ 
    var result = this.clone(); 
    hash.each(function(pair) { 
     if (result.get(pair.key) === undefined) 
      // exists in hash but not in this 
      result.set(pair.key, pair.value); 
     else if (result.get(pair.key) == pair.value) 
      // no difference so remove from result 
      result.unset(pair.key); 
     // else exists in this but not in hash 
    }); 
    return result; 
}; 

これがあれば教えする方法はありませんCSS3が複数の背景やトランジションのような複雑さを加えるので、クリックした座標を見つけることができますが、それは絶対ではありません。ボタンとして機能するように絶対配置された要素を持つ方がよいでしょう。

$('button-element').observe('click', function() { 
    var form_values = $H($('form-id').serialize(true)); 
    if (old_values) { 
     var differences = old_values.difference(form_values); 
     if (differences.size()) { 
      showDiffPopup(differences); 
     } 
    } 
    window.old_values = form_values; 
}); 
// preset current values in advance 
window.old_values = $H($('form-id').serialize(true)); 

残っているのは、計算differencesを表示するshowDiffPopupを実装することです。