script.aculo.usを読み解く

第7回 slider.js

この記事を読むのに必要な時間:およそ 12.5 分

0239:  update: function(event) {
0240:   if (this.active) {
0241:      if (!this.dragging) this.dragging = true;
0242:      this.draw(event);
0243:      if (Prototype.Browser.WebKit) window.scrollBy(0,0);
0244:      Event.stop(event);
0245:   }
0246:  },

239~246行目の,updateは,ドラッグ開始後にマウスポインタの動きに応じてスライダーを動かす関数です。この関数はdocumentのmousemoveイベントのリスナです。

240行目で,activeフラグがtrueということは,ドラッグ開始後ということです。

241行目で,ドラッグ中であることを示すdraggingフラグをtrueにします。

242行目で,後述のdraw関数を呼びます。

243行目で,サファリブラウザには,window.scrollBy(0,0)で再描画を促します。

0247:  draw: function(event) {
0248:    var pointer = [Event.pointerX(event), Event.pointerY(event)];
0249:    var offsets = Position.cumulativeOffset(this.track);
0250:    pointer[0] -= this.offsetX + offsets[0];
0251:    pointer[1] -= this.offsetY + offsets[1];
0252:    this.event = event;
0253:    this.setValue(this.translateToValue( this.isVertical() ? pointer[1] : pointer[0] ));
0254:    if (this.initialized && this.options.onSlide)
0255:      this.options.onSlide(this.values.length>1 ? this.values : this.value, this)
0256:  },

247~256行目の,drawは,ドラッグ中のスライダーを描画する関数です。上述のupdate関数(mousemoveイベントリスナ)からeventを引数で渡されます。

248行目で,マウスポインタの位置を取得して配列にします。

249行目で,cumulativeOffsetメソッドで,ドキュメント基点からのオフセットを取得します。

250,251行目で,ドラッグ開始時のハンドルとマウスポインタのずれ具合を加味して,トラックの左上を基点としたポインタの位置を求めます。

253行目で,ポインタの位置をtranslateToValueで,スライダーの値に換算してsetValueします。

254行目で,onSlideフックがあれば呼びます。引数にハンドルの値と,このインスタンスを渡します。

0257:  endDrag: function(event) {
0258:    if (this.active && this.dragging) {
0259:      this.finishDrag(event, true);
0260:      Event.stop(event);
0261:    }
0262:    this.active = false;
0263:    this.dragging = false;
0264:  },  

257~264行目の,endDragは,ドラッグを終了(ドロップ)する関数です。

258行目で,activeフラグは,ドラッグ開始後であることを表し,draggingフラグは,ドラッグ中であることを表しています。両方のフラグが立っているとき,後述のfinishDragを呼びます。

262,263行目で,フラグをそれぞれfalseにします。

0265:  finishDrag: function(event, success) {
0266:    this.active = false;
0267:    this.dragging = false;
0268:    this.updateFinished();
0269:  },

265~269行目の,finishDragは,ドラッグ終了時にendDragから呼ばれる関数です。updateFinishedを呼びます。

0270:  updateFinished: function() {
0271:    if (this.initialized && this.options.onChange) 
0272:      this.options.onChange(this.values.length>1 ? this.values : this.value, this);
0273:    this.event = null;
0274:  }
0275:});
0276:

270~276行目の,updateFinishedは,setValueで値が更新されたときと,ドラッグの終了時に呼ばれる関数です。

271行目で,onChangeフックがあれば呼びます。引数にハンドルの値と,このインスタンスを渡します。

273行目で,this.eventをnullにします。

著者プロフィール

源馬照明(げんまてるあき)

名古屋大学大学院多元数理科学研究科1年。学部生のときにSchemeの素晴らしさを知ったのをきっかけに,関数型言語の世界へ。JavaScriptに,ブラウザからすぐに試せる関数型言語としての魅力と将来性を感じている。

ブログ:Gemmaの日記

コメント

コメントの記入