prototype.jsを読み解く

第10回Prototypeライブラリ(2846~3276行目)

最終回

この連載も今回が最終回です。

単に季節物のPrototypeライブラリを解説する、という視点ではなく、今後ライブラリのバージョンがさらにあがっても応用できるような基礎知識や、深追いするためのヒントなどを織り交ぜてきたつもりです。

「あとで読む」つもりの方も多いかと思いますが、読むのを忘れないでもらえれば幸いです。:-))

では、最後まで一気に行きましょう。

Abstract.TimedObserver オブジェクト

2846: Abstract.TimedObserver = function() {}
2847: Abstract.TimedObserver.prototype = {
2848:   initialize: function(element, frequency, callback) {
2849:     this.frequency = frequency;
2850:     this.element   = $(element);
2851:     this.callback  = callback;
2852: 
2853:     this.lastValue = this.getValue();
2854:     this.registerCallback();
2855:   },
2856: 

2846行目からはAbstract.TimedObserverです。

Form.Element.Observer、Form.Observerのprototypeとして使われます。ベースクラスとして使われるだけなので、このオブジェクト自体はClass.create()されずに単なるオブジェクト({})として初期化されています。

よって、2848行目からのinitialize()メソッドはForm.Element.Observer, Form.ObserverオブジェクトがClass.create()で初期化されることで、共通して利用されるコンストラクタとなります。

コンストラクタの中身は、まずインスタンス変数に引数を格納し、各派生クラスで定義されている getValue() を呼んで現状の値を保存しています。渡されたパラメータに基づいて registerCallback()メソッドを呼び出して、その中で定期的なタイマーをsetInterval()で設定しています。

2857:   registerCallback: function() {
2858:     setInterval(this.onTimerEvent.bind(this), this.frequency * 1000);
2859:   },
2860: 

そのregisterCallback()です。前述したように、単にsetInterval()を呼んでいるだけです。特に特徴的な所も無く、this.メソッド名.bind(this)の慣用句を使っているくらいです。

2861:   onTimerEvent: function() {
2862:     var value = this.getValue();
2863:     var changed = ('string' == typeof this.lastValue && 'string' == typeof value
2864:       ? this.lastValue != value : String(this.lastValue) != String(value));
2865:     if (changed) {
2866:       this.callback(this.element, value);
2867:       this.lastValue = value;
2868:     }
2869:   }
2870: }
2871: 

2861行目からはタイマーイベントごとに呼ばれるonTimerEvent()メソッドです。

まずgetValue()で最新の値を取得します。Form.Element.Observerの場合はgetValue()がnullを返す可能性があるので、それも考慮してlastValueから変化があったかどうかをchangedに入れます。

あとは変化した場合にコンストラクタから渡されたコールバック関数を呼び、次のためにlastValueを上書きして終了です。

Form.Element.Observer クラス

2872: Form.Element.Observer = Class.create();
2873: Form.Element.Observer.prototype = Object.extend(new Abstract.TimedObserver(), {
2874:   getValue: function() {
2875:     return Form.Element.getValue(this.element);
2876:   }
2877: });
2878: 

2872行目からはForm.Element.Observerクラスです。

フォームの入力要素を定期的に監視し、変化があった場合にコールバック関数を呼び出します。

実装はClass.create()で雛形を生成し、prototypeに先ほどのAbstract.TimedObserver.prototypeとこのクラス固有のgetValue()メソッドをマージしたものを代入します。

getValue()メソッドでは、Form.Element.getValue()を使って入力要素の値を取得しています。

Form.Observer クラス

2879: Form.Observer = Class.create();
2880: Form.Observer.prototype = Object.extend(new Abstract.TimedObserver(), {
2881:   getValue: function() {
2882:     return Form.serialize(this.element);
2883:   }
2884: });
2885: 
2886: /*--------------------------------------------------------------------------*/
2887: 

2879行目からはForm.Observerクラスです。こちらはフォーム全体を監視します。

Form.Element.Observerと同様にAbstract.TimedObserverから継承し、getValue()には Form.serialize()を使ってフォーム全体の値を文字列として取得しています。

Abstract.EventObserver オブジェクト

2888: Abstract.EventObserver = function() {}
2889: Abstract.EventObserver.prototype = {
2890:   initialize: function(element, callback) {
2891:     this.element  = $(element);
2892:     this.callback = callback;
2893: 
2894:     this.lastValue = this.getValue();
2895:     if (this.element.tagName.toLowerCase() == 'form')
2896:       this.registerFormCallbacks();
2897:     else
2898:       this.registerCallback(this.element);
2899:   },
2900: 

2888行目からはAbstract.EventObserverです。構成はAbstract.TimedObserverとよく似ていて、initialize()でコンストラクタは定義しつつ、このクラス自体はClass.create()は使っていません。後述するForm.Element.EventObserverとForm.EventObserverから使われます。

コンストラクタでは、同様にパラメータをインスタンス変数に格納し、現在の値をgetValue()で取得して保存しています。その後、<form>タグの場合はregisterFormCallbacks()を呼び、それ以外ならregisterCallback()を呼んで各入力要素にイベントハンドラを設定しています。

個人的にはここはif文で分けるのではなく、ひとつメソッドを定義して派生クラス側でやることを分ける方がすっきりするのではないか、と思います。

2901:   onElementEvent: function() {
2902:     var value = this.getValue();
2903:     if (this.lastValue != value) {
2904:       this.callback(this.element, value);
2905:       this.lastValue = value;
2906:     }
2907:   },
2908: 

2901行目からはonElementEvent()です。

これは各要素の'click'/'change'イベントハンドラとして実際に登録される関数で、現在のフォーム/要素の値をgetValue()で取得し、前回と比較して変わっていればコールバック関数を呼び出す、という形になっています。

Abstract.TimedObserver.onTimerEventでも同じような処理をしていますが、こちらの方がシンプルな条件判断になっています。getValue()がnullを返しうるのは変わらないので、両方揃えたほうが良さそうですが、今のところはこのようなコードになっています。

2909:   registerFormCallbacks: function() {
2910:     Form.getElements(this.element).each(this.registerCallback.bind(this));
2911:   },
2912: 

2909行目では、Form.EventObserverの時に使われるregisterFormCallbacks()メソッドです。

Form.getElementsでフォーム内の全入力要素を取得し、各々についてregisterCallback()を呼び出してイベントハンドラを設定しています。

2913:   registerCallback: function(element) {
2914:     if (element.type) {
2915:       switch (element.type.toLowerCase()) {
2916:         case 'checkbox':
2917:         case 'radio':
2918:           Event.observe(element, 'click', this.onElementEvent.bind(this));
2919:           break;
2920:         default:
2921:           Event.observe(element, 'change', this.onElementEvent.bind(this));
2922:           break;
2923:       }
2924:     }
2925:   }
2926: }
2927: 

2913行目からはregisterCallback()です。要素に対して必要なイベントハンドラを設定します。

type='checkbox', type='radio'の時だけonClickイベントを対象にし、それ以外はonChangeイベントを見張っています。お決まりのthis.メソッド名.bind(this) を使って関数を渡しています。

Form.Element.EventObserver クラス

2928: Form.Element.EventObserver = Class.create();
2929: Form.Element.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), {
2930:   getValue: function() {
2931:     return Form.Element.getValue(this.element);
2932:   }
2933: });
2934: 

2928行目からはForm.Element.EventObserverクラスです。Insertion.Beforeなどでも使っている形で、Abstract.* オブジェクトをnewして新たにメモリ上に確保したオブジェクトに対してObject.extend()を適用しています。

Form.Element.TimedObserverのEventObserver版で、特に変わったところはありません。TimedObserver, EventObserverで同じようなクラス定義をしているので、もうちょっと冗長性を無くした書き方ができるかもしれません。

Form.EventObserver クラス

2935: Form.EventObserver = Class.create();
2936: Form.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), {
2937:   getValue: function() {
2938:     return Form.serialize(this.element);
2939:   }
2940: });

Form.EventObserverです。こちらもTimedObserverの時と同様の拡張を行っています。

Event オブジェクトへの拡張

2941: if (!window.Event) {
2942:   var Event = new Object();
2943: }
2944: 

2941行目からはEventオブジェクトです。IEではグローバルオブジェクトとしてEventが存在しますが、それ以外の場合は空のオブジェクトとして作成しておきます。

2945: Object.extend(Event, {
2946:   KEY_BACKSPACE: 8,
2947:   KEY_TAB:       9,
2948:   KEY_RETURN:   13,
2949:   KEY_ESC:      27,
2950:   KEY_LEFT:     37,
2951:   KEY_UP:       38,
2952:   KEY_RIGHT:    39,
2953:   KEY_DOWN:     40,
2954:   KEY_DELETE:   46,
2955:   KEY_HOME:     36,
2956:   KEY_END:      35,
2957:   KEY_PAGEUP:   33,
2958:   KEY_PAGEDOWN: 34,
2959: 

2945行目からはObject.extend()を使ってEventオブジェクトを拡張しています。prototypeではなくEvent直下に拡張しているので、Event.element()などのように呼び出す形となります。

まずはキーコードを名前で参照するために数値との対応を定義しています。

2960:   element: function(event) {
2961:     return $(event.target || event.srcElement);
2962:   },
2963: 

2960行目からはEvent.element()関数です。

イベントが発生した要素を返します。IE系はsrcElementに、他の多くはtargetプロパティに入っているので、どちらかを返すようにしています。

2964:   isLeftClick: function(event) {
2965:     return (((event.which) && (event.which == 1)) ||
2966:             ((event.button) && (event.button == 1)));
2967:   },
2968: 

2964行目からはisLeftClick()です。

Mozilla系ではwhichプロパティに1が入っていれば左クリック、IE系ではbuttonプロパティが1なら左クリックだけのクリックになります(1、2、4の論理和⁠⁠。どちらかが真なら左クリックとしています。

したがって、IE系では右クリックしながら左クリックなどは真になりません。また、IEではそもそもonMouseDown, onMouseUp, onMouseMoveイベントでしかbuttonプロパティに値が入りません。

2969:   pointerX: function(event) {
2970:     return event.pageX || (event.clientX +
2971:       (document.documentElement.scrollLeft || document.body.scrollLeft));
2972:   },
2973: 
2974:   pointerY: function(event) {
2975:     return event.pageY || (event.clientY +
2976:       (document.documentElement.scrollTop || document.body.scrollTop));
2977:   },
2978: 

pointerX(), pointerY()関数です。イベントが発生した場所の、ページ上の位置を返します。スクロールしていてもいなくても、ある要素の位置は同じ値になります。

Mozilla系ではevent.pageX, event.pageYプロパティで該当する値を取得できます。

IE系では、event.clientXにクライアント領域内のオフセットが入ります。後方互換モードではdocument.body.scrollLeftに、標準準拠モードではdocument.documentElement.scrollLeftにクライアント領域のスクロールオフセットが入るので、ページ内の座標に変換するためにそれらのどちらかを足します。

2979:   stop: function(event) {
2980:     if (event.preventDefault) {
2981:       event.preventDefault();
2982:       event.stopPropagation();
2983:     } else {
2984:       event.returnValue = false;
2985:       event.cancelBubble = true;
2986:     }
2987:   },
2988: 

イベントキャンセル用のEvent.stop()です。

Mozilla, Safari、OperaはDOM準拠のpreventDefault()メソッドが使えるので、こちらを呼び出しイベントのデフォルトの挙動(ボタンのonClickでの動作など)をキャンセルし、stopPropagation()でイベントの伝播を停止します。

一方IEでは、event.returnValueにfalseを入れることでデフォルトの挙動をキャンセルし、event.cancelBubbleにtrueを入れることでイベントの伝播を停止します。

2989:   // find the first node with the given tagName, starting from the
2990:   // node the event was triggered on; traverses the DOM upwards
2991:   findElement: function(event, tagName) {
2992:     var element = Event.element(event);
2993:     while (element.parentNode && (!element.tagName ||
2994:         (element.tagName.toUpperCase() != tagName.toUpperCase())))
2995:       element = element.parentNode;
2996:     return element;
2997:   },
2998: 

2991行目からはEvent.findElement()です。

イベントターゲットの要素ではなく、その親のうち、指定されたタグ名を持つ直近の要素を返します。

while文でparentNodeがnullの場合は、自身がdocumentノードなのでdocumentノードを返し、tagNameプロパティが指定されたものと同じであればその要素を返します。そうでなければparentNodeをたどります。

2999:   observers: false,
3000: 

observersは初期値はfalseですが、使われているときは配列となります。これは後述するIEのメモリリーク対策として、イベントを登録するときに一旦保存しておき、ページのonUnload時にdetachEvent()する、という処理を行うためです。

3001:   _observeAndCache: function(element, name, observer, useCapture) {
3002:     if (!this.observers) this.observers = [];
3003:     if (element.addEventListener) {
3004:       this.observers.push([element, name, observer, useCapture]);
3005:       element.addEventListener(name, observer, useCapture);
3006:     } else if (element.attachEvent) {
3007:       this.observers.push([element, name, observer, useCapture]);
3008:       element.attachEvent('on' + name, observer);
3009:     }
3010:   },
3011: 

Event.observe()から呼ばれる内部関数 _observeAndCache()です。名前にCacheとありますが特にキャッシュ的な機能を持つわけではなく、イベントを解除するために保存しておく機能があるだけです。

IEとそれ以外ではイベントの登録方法が違うので、addEventListener()が存在すればDOM準拠の方法で、attachEvent()が存在すればIEでの方法でイベントを登録します。

また、次のunloadCache()で使うためにthis.observersに渡された情報を保存しておきます。

3012:   unloadCache: function() {
3013:     if (!Event.observers) return;
3014:     for (var i = 0, length = Event.observers.length; i < length; i++) {
3015:       Event.stopObserving.apply(this, Event.observers[i]);
3016:       Event.observers[i][0] = null;
3017:     }
3018:     Event.observers = false;
3019:   },
3020: 

Event.unloadCache()関数です。3052行目でwindowにonUnloadイベントのハンドラとして、この関数が登録されています。

IEで動的にイベントを追加すると、ページ遷移してもその分のメモリが開放されないようなので、それを回避するために onUnload でこの関数が呼ばれ、Event.observers に蓄積された登録済みイベントを、すべて Event.stopObserving() を使ってイベント登録を解除しています。

3016行目では、登録されたイベントハンドラEvent.observers[i]のプロパティ'0'に対してnullを代入しています。これが何を意図しているかはわかりませんでした。

3021:   observe: function(element, name, observer, useCapture) {
3022:     element = $(element);
3023:     useCapture = useCapture || false;
3024: 
3025:     if (name == 'keypress' &&
3026:       (Prototype.Browser.WebKit || element.attachEvent))
3027:       name = 'keydown';
3028: 
3029:     Event._observeAndCache(element, name, observer, useCapture);
3030:   },
3031: 

3021行目からはEvent.observe()です。

引数useCaptureが省略された場合はundefinedになるので、その場合はfalseにしておきます。

あとは受け取った引数をEvent._observeAndCache()に渡してイベント登録して終了です。

このobserve()と次のstopObserving()でのkeypress, keydownイベントの扱いは、Operaで問題となります。

下記リンクに記載されている修正でいいかと思いますが、Prototype 1.6.0では該当部分がごっそり書き換わってしまったので、適用できるのは1.5.1.1までとなります。

3032:   stopObserving: function(element, name, observer, useCapture) {
3033:     element = $(element);
3034:     useCapture = useCapture || false;
3035: 
3036:     if (name == 'keypress' &&
3037:         (Prototype.Browser.WebKit || element.attachEvent))
3038:       name = 'keydown';
3039: 
3040:     if (element.removeEventListener) {
3041:       element.removeEventListener(name, observer, useCapture);
3042:     } else if (element.detachEvent) {
3043:       try {
3044:         element.detachEvent('on' + name, observer);
3045:       } catch (e) {}
3046:     }
3047:   }
3048: });
3049: 

3032行目からはstopObserving()です。

observe()と同様に引数のuseCapture, nameを整理して、DOM準拠ブラウザ、IEで分岐してそれぞれremoveEventListener()かdetachEvent()を使ってイベント登録を解除しています。

detachEvent()がtry {}で括られているのは、IEでの例外対策とのことです。

3050: /* prevent memory leaks in IE */
3051: if (Prototype.Browser.IE)
3052:   Event.observe(window, 'unload', Event.unloadCache, false);

ブラウザがIEの時のみ、windowのonUnloadイベント時にEvent.unloadCache()関数が呼ばれるようにしてメモリリークを防いでいます。

Position オブジェクト

3053: var Position = {
3054:   // set to true if needed, warning: firefox performance problems
3055:   // NOT neeeded for page scrolling, only if draggable contained in
3056:   // scrollable elements
3057:   includeScrollOffsets: false,
3058: 

最後のオブジェクトPositionです。特にクラス化はしておらず、Position.prepare()などの形で呼び出されることになります。

また、Prototype 1.6.0以降では、Elementに機能が統合されたため、Positionオブジェクト自体が非推奨となっています。

3057行目のincludeScrollOffsetsはbooleanで、今のところはfalseで固定されているようです。Position.within()の対象がスクロールするものの時にだけtrueにしろ、とコメントでは言及されています。

3059:   // must be called before calling withinIncludingScrolloffset, every time the
3060:   // page is scrolled
3061:   prepare: function() {
3062:     this.deltaX =  window.pageXOffset
3063:                 || document.documentElement.scrollLeft
3064:                 || document.body.scrollLeft
3065:                 || 0;
3066:     this.deltaY =  window.pageYOffset
3067:                 || document.documentElement.scrollTop
3068:                 || document.body.scrollTop
3069:                 || 0;
3070:   },
3071: 

3061行目からはPosition.prepare()です。

Position.withinIncludingScrolloffsets()がここで設定しているdeltaX, deltaYを参照しているので、関数を呼び出す前にprepare()を呼んで設定しておく必要があります。

求めたいのはページ自体のスクロール量なのですが、Mozilla, SafariなどではpageXOffsetが使えます。IEでは標準準拠モードでdocument.documentElement.scrollLeftが、後方互換モードでdocument.body.scrollLeftが使えます。これらのうちいずれかがdeltaXとなります。

deltaYの方も同様です。

3072:   realOffset: function(element) {
3073:     var valueT = 0, valueL = 0;
3074:     do {
3075:       valueT += element.scrollTop  || 0;
3076:       valueL += element.scrollLeft || 0;
3077:       element = element.parentNode;
3078:     } while (element);
3079:     return [valueL, valueT];
3080:   },
3081: 

3072行目からはrealOffset()です。積み重なったスクロール可能なオブジェクトの階層を遡って、すべてのスクロール量を積算して [X, Y] の配列で返します。

対象となる要素から、頂点のdocumentまで遡り、各々のscrollTop, scrollLeftを合計しています。

3082:   cumulativeOffset: function(element) {
3083:     var valueT = 0, valueL = 0;
3084:     do {
3085:       valueT += element.offsetTop  || 0;
3086:       valueL += element.offsetLeft || 0;
3087:       element = element.offsetParent;
3088:     } while (element);
3089:     return [valueL, valueT];
3090:   },
3091: 

3082行目からはcumulativeOffset()です。ドキュメント基点からのオフセットを[X, Y]の配列で返します。

実装はrealOffset()と似ていますが、offsetTop, offsetLeftを合計しているのと、遡るのがparentNodeではなくoffsetParentなところが違います。

Safariでは<body>の子供がposition:absoluteの時に正しい値を返さないため、3258行目で関数全体を上書き定義しなおしています。

3092:   positionedOffset: function(element) {
3093:     var valueT = 0, valueL = 0;
3094:     do {
3095:       valueT += element.offsetTop  || 0;
3096:       valueL += element.offsetLeft || 0;
3097:       element = element.offsetParent;
3098:       if (element) {
3099:         if(element.tagName=='BODY') break;
3100:         var p = Element.getStyle(element, 'position');
3101:         if (p == 'relative' || p == 'absolute') break;
3102:       }
3103:     } while (element);
3104:     return [valueL, valueT];
3105:   },
3106: 

3092行目からはpositionedOffset()です。

cumulativeOffset()と似ていますが、ドキュメントからではなく、一番近い親のうちCSS positionがabsoluteかrelativeなものからのオフセットを求めるところが異なります。

3107:   offsetParent: function(element) {
3108:     if (element.offsetParent) return element.offsetParent;
3109:     if (element == document.body) return element;
3110: 
3111:     while ((element = element.parentNode) && element != document.body)
3112:       if (Element.getStyle(element, 'position') != 'static')
3113:         return element;
3114: 
3115:     return document.body;
3116:   },
3117: 

offsetParent プロパティをクロスブラウザ化したものです。CSSでのcontainer blockを求めるのに使います。

もし渡された要素がoffsetParentを持っていればそのまま返し、document.bodyが渡されていたらそれもそのまま返します。

あとはparentNodeを辿っていき、CSS positionがstatic以外の要素が出てきたらそれを返します。

それ以外の場合はdocument.bodyを返しています。

3118:   // caches x/y coordinate pair to use with overlap
3119:   within: function(element, x, y) {
3120:     if (this.includeScrollOffsets)
3121:       return this.withinIncludingScrolloffsets(element, x, y);
3122:     this.xcomp = x;
3123:     this.ycomp = y;
3124:     this.offset = this.cumulativeOffset(element);
3125: 
3126:     return (y >= this.offset[1] &&
3127:             y <  this.offset[1] + element.offsetHeight &&
3128:             x >= this.offset[0] &&
3129:             x <  this.offset[0] + element.offsetWidth);
3130:   },
3131: 

3118行目からはwithin()です。

Position.includeScrollOffsetsの所でも書いたように、その値が真なら代わりにwithinIncludingScrolloffsets()が呼ばれます。

そうでなければ、cumulativeOffset()を呼び出して要素のドキュメント基点からの位置を算出し、渡された座標が要素の枠内に含まれているかどうかをbooleanで返しています。

this.xcomp, this.ycomp, this.offsetは、別途Position.overlap()で使うためにキャッシュされます。といいつつ、これくらいのことをキャッシュするのにわざわざ「overlap()を呼ぶ前には必ずwithin()を呼ばなければならない」という制約を付けている理由は不明です。階層が深い要素に対してoffsetの計算が時間がかかる場合には、一旦計算しておいてその後に何度もoverlap()を呼び出して計算する、という使い方をするのならキャッシュの意味はありそうです。

3132:   withinIncludingScrolloffsets: function(element, x, y) {
3133:     var offsetcache = this.realOffset(element);
3134: 
3135:     this.xcomp = x + offsetcache[0] - this.deltaX;
3136:     this.ycomp = y + offsetcache[1] - this.deltaY;
3137:     this.offset = this.cumulativeOffset(element);
3138: 
3139:     return (this.ycomp >= this.offset[1] &&
3140:             this.ycomp <  this.offset[1] + element.offsetHeight &&
3141:             this.xcomp >= this.offset[0] &&
3142:             this.xcomp <  this.offset[0] + element.offsetWidth);
3143:   },
3144: 

3132行目からはwithinIncludingScrolloffsets()です。対象要素の上位にスクロールする要素がいる場合にwithin()の代わりに使います。

within()と異なるのは、渡されたx, yに関して、ドキュメント自体のスクロールオフセットdeltaX, deltaYの分を引いていることと、realOffset()を使って本来の位置から動いた分を増やしています。

結果として、this.xcomp, this.ycompには「スクロールしていなかったらそこにあるべき位置」が入ります。

これらの値と、指定された要素の座標(cumulativeOffset())を比較して、その要素の中に含まれているかどうかをbooleanで返します。

3145:   // within must be called directly before
3146:   overlap: function(mode, element) {
3147:     if (!mode) return 0;
3148:     if (mode == 'vertical')
3149:       return ((this.offset[1] + element.offsetHeight) - this.ycomp) /
3150:         element.offsetHeight;
3151:     if (mode == 'horizontal')
3152:       return ((this.offset[0] + element.offsetWidth) - this.xcomp) /
3153:         element.offsetWidth;
3154:   },
3155: 

3146行目からはoverlap()関数です。

within()で設定されたthis.offset, this.xcomp, this.ycompを使っています。

modeがverticalかhorizontalかによって分岐していますが、どちらも渡された要素と計算された座標を元に、どれくらいの割合で重なっているかを算出します。

たとえばmodeが'vertical'の場合、(this.offset[1] + element.offsetHeight) で要素の下辺のY座標となり、((this.offset[1] + element.offsetHeight) - this.ycomp)は渡されたXY座標のY位置から下辺までの長さとなります。これをelement.offsetHeightで割っているので、最終的に返されるのは要素の高さを1とした時、渡されたY座標がどの割合の位置にあるか、ということを示す0から1の間の数値となります。

具体的には、渡されたY座標が要素の上辺と同じ場合には1, 下辺と同じ場合には0, 真ん中の場合は0.5となります。

modeが'horizontal'の場合はX軸が対象となります。

3156:   page: function(forElement) {
3157:     var valueT = 0, valueL = 0;
3158: 
3159:     var element = forElement;
3160:     do {
3161:       valueT += element.offsetTop  || 0;
3162:       valueL += element.offsetLeft || 0;
3163: 
3164:       // Safari fix
3165:       if (element.offsetParent == document.body)
3166:         if (Element.getStyle(element,'position')=='absolute') break;
3167: 
3168:     } while (element = element.offsetParent);
3169: 
3170:     element = forElement;
3171:     do {
3172:       if (!window.opera || element.tagName=='BODY') {
3173:         valueT -= element.scrollTop  || 0;
3174:         valueL -= element.scrollLeft || 0;
3175:       }
3176:     } while (element = element.parentNode);
3177: 
3178:     return [valueL, valueT];
3179:   },
3180: 

3156行目からはpage()です。指定された要素の、viewportから見たオフセットを返します。

まず、要素から遡ってoffsetTop, offsetLeftを加算しておきます。これでドキュメント基点からのオフセットが得られます。

途中、cumulativeOffset()と同様にSafari対策が入っています。

次に、再度要素から遡って、scrollTop, scrollLeftを減算していきます。そうするとスクロールした分だけ左上にずれていくので、最終的にviewportでのオフセット値になります。

3181:   clone: function(source, target) {
3182:     var options = Object.extend({
3183:       setLeft:    true,
3184:       setTop:     true,
3185:       setWidth:   true,
3186:       setHeight:  true,
3187:       offsetTop:  0,
3188:       offsetLeft: 0
3189:     }, arguments[2] || {})
3190: 
3191:     // find page position of source
3192:     source = $(source);
3193:     var p = Position.page(source);
3194: 
3195:     // find coordinate system to use
3196:     target = $(target);
3197:     var delta = [0, 0];
3198:     var parent = null;
3199:     // delta [0,0] will do fine with position: fixed elements,
3200:     // position:absolute needs offsetParent deltas
3201:     if (Element.getStyle(target,'position') == 'absolute') {
3202:       parent = Position.offsetParent(target);
3203:       delta = Position.page(parent);
3204:     }
3205: 
3206:     // correct by body offsets (fixes Safari)
3207:     if (parent == document.body) {
3208:       delta[0] -= document.body.offsetLeft;
3209:       delta[1] -= document.body.offsetTop;
3210:     }
3211: 
3212:     // set position
3213:     if(options.setLeft)   target.style.left  = (p[0] - delta[0] + options.offsetLeft) + 'px';
3214:     if(options.setTop)    target.style.top   = (p[1] - delta[1] + options.offsetTop) + 'px';
3215:     if(options.setWidth)  target.style.width = source.offsetWidth + 'px';
3216:     if(options.setHeight) target.style.height = source.offsetHeight + 'px';
3217:   },
3218: 

3181行目からはclone()関数です。source要素の位置にtarget要素を移動します。

まずoptionsに、デフォルト値を用意した上でマージします。関数の仮引数には明示されていませんが、三番目の引数としてオプション指定のためのオブジェクトが渡せますので、それをarguments[2]として参照しています。

target要素がposition: absoluteの場合、親からの相対位置では正しい位置にならないので、offsetParent()で相対基準の要素を取得し、そのviewport上の位置をdeltaとして保存しておきます。

この場合、たとえばtargetのleft, topに0, 0を指定しても、parentと同じ位置に移動してしまいページの左上には行きません。そこで、left = (p[0] - delta[0]) という形で代入することで、その分を引いて調整するようにしています。

あとは、optionsの指定に従ってtop, left, width, heightを設定します。これらは単位付きで指定しないといけないので、+ 'px' として設定しています。

3219:   absolutize: function(element) {
3220:     element = $(element);
3221:     if (element.style.position == 'absolute') return;
3222:     Position.prepare();
3223: 
3224:     var offsets = Position.positionedOffset(element);
3225:     var top     = offsets[1];
3226:     var left    = offsets[0];
3227:     var width   = element.clientWidth;
3228:     var height  = element.clientHeight;
3229: 
3230:     element._originalLeft   = left - parseFloat(element.style.left  || 0);
3231:     element._originalTop    = top  - parseFloat(element.style.top || 0);
3232:     element._originalWidth  = element.style.width;
3233:     element._originalHeight = element.style.height;
3234: 
3235:     element.style.position = 'absolute';
3236:     element.style.top    = top + 'px';
3237:     element.style.left   = left + 'px';
3238:     element.style.width  = width + 'px';
3239:     element.style.height = height + 'px';
3240:   },
3241: 

3129行目からはabsolutize()です。ページレイアウトを変更せずに、指定された要素をposition: absoluteに変更します。

absoluteにすると直近のstatic 以外の親が基準になるので、Position.positionedOffset()を使ってそこからのオフセットを出します。

あとはaboslute 用に実際に設定する値を用意し、要素の_originalLeftなどのプロパティにrelativeに戻す時のための値を入れておきます。このとき、_originalLeft, _originalTopには、absoluteの基準となる要素の座標からの相対的な位置、として記録しています。これは現在の絶対位置を保存しておくと、absoluteの基準となる要素の位置が変わってしまった場合に追従できなくなってしまうからのようです。

3242:   relativize: function(element) {
3243:     element = $(element);
3244:     if (element.style.position == 'relative') return;
3245:     Position.prepare();
3246: 
3247:     element.style.position = 'relative';
3248:     var top  = parseFloat(element.style.top  || 0) - (element._originalTop || 0);
3249:     var left = parseFloat(element.style.left || 0) - (element._originalLeft || 0);
3250: 
3251:     element.style.top    = top + 'px';
3252:     element.style.left   = left + 'px';
3253:     element.style.height = element._originalHeight;
3254:     element.style.width  = element._originalWidth;
3255:   }
3256: }
3257: 

3242行目からはrelativize()です。absolutize()でposition: absoluteに変更したものをrelativeに戻します。

absolutize()でも書いたように、元の位置ではなく現在の場所からの相対的な位置への移動、という形で位置を回復しています。

3258: // Safari returns margins on body which is incorrect if the child is absolutely
3259: // positioned.  For performance reasons, redefine Position.cumulativeOffset for
3260: // KHTML/WebKit only.
3261: if (Prototype.Browser.WebKit) {
3262:   Position.cumulativeOffset = function(element) {
3263:     var valueT = 0, valueL = 0;
3264:     do {
3265:       valueT += element.offsetTop  || 0;
3266:       valueL += element.offsetLeft || 0;
3267:       if (element.offsetParent == document.body)
3268:         if (Element.getStyle(element, 'position') == 'absolute') break;
3269: 
3270:       element = element.offsetParent;
3271:     } while (element);
3272: 
3273:     return [valueL, valueT];
3274:   }
3275: }
3276: 

3261行目からは、Safari用にPosition.cumulativeOffset()を上書き定義しています。

Safariはbodyの子要素がpositon:absoluteの時に、offsetTop, offsetLeftでマージンの値を返してしまうようです。

3277: Element.addMethods();

最後に、prototype.jsのロードが完了するタイミングで、Element.addMethods()を実行しています。

Element, Element.Methodsなどと分かれているものを、Object.extend()を使ってElementに集めたり、の初期化処理を行っています。

おすすめ記事

記事・ニュース一覧