Doge log

Abby CTO 雑賀 力王のオフィシャルサイトです

ダブルサブミットというか連打対策 その2

いやー昨日はラリってたんだね。いや、ホント。
普通にイベントってキャンセルできるはずやもんね。
というわけで出来たっぽい。

disabled.js

if (typeof(Kumu) == 'undefined') {
  Kumu = {};
}else{
  Kumu.dynamicLoad('event');
}

if (typeof(Kumu.Html) == 'undefined') {
  Kumu.Html = {};
}

if (typeof(Kumu.Html.Disabled) == 'undefined') {
  Kumu.Html.Disabled = {};
}

DisabledConf = false;

Kumu.extend(Kumu.Html.Disabled, {
  
  time : 1000,
  
  anchor : false,
  
  submitMessage : false,
  
  anchorMessage : false,

  lock : function(element) {
    if(!element.__lock){
      element.__lock = true;
    }
  },
   
  unlock : function(element) {
    (function(){
      if(element.__lock){
        element.__lock = false;
      }
    }.deferred(this.time))();
  },
  
  disable : function(evt, element, func){
    if(element.__lock){
	  if(func){
        func(element);
      }
	  Kumu.Event.stopEvent(evt);
	  return false;
    }else{
      this.lock(element);
      this.unlock(element);
	  return true;
    }
  },
  
  disableAnchor : function(){
    document.body.onclick = function(e){
      var element = e.target || e.srcElement;
      if(element){
        if(self.anchor && element.id){
          for(var i = 0; i < self.anchor.length; i++){
            if(element.id == self.anchor[i]){
              return;
            }
          }
        }
        var name = element.nodeName.toUpperCase();
        if(name == 'A'){
			return this.disable(e, element, this.anchorMessage);
        }
      }
    }.bindScopeAsEventListener(this);
  },
  
  disableForms: function(forms) {
    Kumu.map(function(f){
      if(f.onsubmit){
      }else{
	  	f.onsubmit = function(e){
		  return this.disable(e, f, this.submitMessage);
	  	}.bindScopeAsEventListener(this);
      }
    }.bindScope(this), Kumu.toArray(forms));
  },
      
  loadDisabled : function(){
    var forms = Kumu.toArray(document.forms);
    if(DisabledConf){
      if(DisabledConf.time){
        this.time = DisabledConf.time;
      }
      if(DisabledConf.expectAnchor){
        this.anchor = DisabledConf.expectAnchor;       
      }
      if(DisabledConf.submitMessage){
        this.submitMessage = DisabledConf.submitMessage;       
      }
      if(DisabledConf.anchorMessage){
        this.anchorMessage = DisabledConf.anchorMessage;       
      }
      if(DisabledConf.expectForm){
        var ids  = DisabledConf.expectForm;
        forms = Kumu.filter(function(f){
          if(f.id){
            for(var i = 0; i < ids.length; i++){
              if(f.id == ids[i]){
                return false;
              }
            }
          }
          return true;
        }, forms);
      }
    }
    this.disableForms(forms);
    this.disableAnchor();
  }
});
Kumu.Event.addOnLoadEvent(Kumu.Html.Disabled.loadDisabled.bindScope(Kumu.Html.Disabled));

おほほ。
中止ボタンが押された際、submitやanchorを再度押せるようになるため、遅延を使ってます。
(どうもコレが流行らしい)
設定もできます。

	DisabledConf = {
		time : 50000,
		expectForm : ['test2'],
		submitMessage : function(){alert('form_test')},
		expectAnchor : ['a2'],
		anchorMessage : function(){alert('anchor_test')}
	}

除外するform、aのidが指定できます。
送信中のメッセージを定義できます。
もう少しテストしないといけないけどね。
かなり怪しいので・・・
まあでもなんで今までsubmit自体をキャンセルするサンプルってなかったのかね?
disableばっかり。
javascriptでsubmitされたら意味ないやん。
うくく。