[mootools]スクロールに追随させる – mooFollow.js

「[mootools]スクロールに追随させる – mooFollow.js」への4件のフィードバック

1. 質問させていただきたいのですが、
   moofollow.js内のmakeFxにてonComplete時に
   fireEventを行っていると思うのですが、このfireEventで
   （マニュアルを参照しましたがクラスインスタンス内のイベントを発生させる、とありました）
   ‘complete’を指定しているのですがmoofollow.js内に無い
   関数だと思うのですがこの行では何がおこなわれているのですか？
   mootoolsの基本的な事なのかも分かりませんが、
   お教えいただけますか？

   お忙しいとは思いますがよろしくお願いいたします。

   返信

2. お答えします！

   冒頭のこの行で
   ＞Implements: [Options,Events],
   Class:Eventを実装して、新しくmoofollowクラスを作成しています。

   Class:Eventをクラスに実装すると’complete’、 ’start’、 ‘cancel’のようなイベント機能を追加することが出来ます。
   そのため、moofollowクラスにcompleteメソッドはありませんが、fireEventで呼び出すことが出来るというわけです。

   オプションでは次のようにonをつけて書いていますが
   options: {
   onStart:$empty,
   onComplete:$empty
   }
   これはonを省略するとClass:Optionsにイベントとして認識されないからです。
   オプションで‘onComplete’とすると’complete’イベント、’onStart’は’start’イベントになります。
   (complete:$emptyだと何も起きなくなります。把握してないと大抵ハマる）
   $emptyは空の関数（プレイスホルダー）です。

   返信

3. お答えいただきありがとうございます！！
   参考になりました。

   自分でもmootoolsの中を見てみた所、
   fireEventではtype（第一引数）をremoveONっていうのに渡して
   onを取って先頭文字を小文字にして、this.$events[type]があれば
   そのままthisを返して、なければfn.createで作っているみたいですね・・・
   （恐らくですが・・・）

   それで、また基本的な質問のようで恐縮なのですが、
   fireEventでstart、completeを行う意味、というか何を行う為なのでしょうか？
   FxClassのstart、completeを覗いてみたのですが、startは通らなくても
   動作出来る様な気がしますし・・・（間違っていたらすみません）

   また、smoothgallery(http://smoothgallery.jondesign.net/)という
   プラグインの中身を学習の為、調査したのですが
   例えば、
   showCarousel: function () {
   console.log(‘—————————————————showCarousel start’);
   this.fireEvent(‘onShowCarousel’);
   this.carouselContainer.start({
   ‘opacity’: this.options.carouselMaximizedOpacity,
   ‘top’: 0
   }).chain(function() {
   this.carouselActive = true;
   this.carouselWrapper.scroller.start();
   this.fireEvent(‘onCarouselShown’);
   this.carouselContainer.options.onComplete = null;
   }.bind(this));
   console.log(‘—————————————————showCarousel end’);
   },
   という記述があり（console.logは私がいれました）fireEventで
   命名から判断すると開始、終了でfireEventで
   onShowCarousel、onCarouselShownが実行されています。
   これはthis.$events[type]には当然ないのでfn.createを通ってると
   思います。
   こちらの方でもやはりfireEventをする意味、というか何を行う為なのか
   よく理解できていません。

   度々申し訳ないのですが上記に関してもご教授いただけますでしょうか？
   お忙しいとは思いますがよろしくお願いします。

   返信

4. >fireEventでstart、completeを行う意味、というか何を行う為なのでしょうか？
   >FxClassのstart、completeを覗いてみたのですが、startは通らなくても
   >動作出来る様な気がしますし・・・（間違っていたらすみません）

   んー…イベントから別のイベントを発生させるためです。
   Eventsクラスには「Eventsをインプリメントしたクラスのイベントは、
   オプションかaddEventで追加しなくてはならない（.options.onEventNameではダメ）」という制約があるので

   mooFollowのソースでは
   
options:{
onStart:$empty,
onComplete:$empty
}

   このようにoptionsでmooFollowクラスにstartとcompleteイベントを追加しています。

   上記デフォルトは空関数にしているので何も実行されませんが、
   何かしら指定された場合はイベント発生時にその内容が実行されなければなりません。

   mooFollowのstartとcompleteは要素がスクロールし始めるときと停止した時なので、
   要素を移動させているFx.MorphのstartとcompleteにfireEventを追加し
   
onComplete:function(){
this.fireEvent('complete');
if(this.options.watermark == true) this.watermark.fade("in",{duration:500});
}

   Fx.MorphのonCompleteで、（optionsで追加した）クラスのcompleteイベントを発生させるようにしています。

   fireEventは「クラスインスタンス内の特定のタイプのイベントをすべて発生させる」
   『全て発生させる』ので、複数追加された場合はすべての内容が実行されます。

   ▼オプション
   
var sample1 =new mooFollow($("two"),{
onStart:function(){$("two").setStyle("background-color","#3f454a");},
onComplete:function(){$("two").setStyle("background-color","#e8e82a");},
onComplete:function(){$("two").setStyle("border","solid 1px red");}
});


   ▼addEventでもOK
   
sample1.addEvent("complete",function(){
$("two").setStyle("border","solid 1px red");
$("two").setStyle("width","80px");
});


   ▼clickはクラスにイベントを追加してないから何も起きない
   
sample1.addEvent("click",function(){
$("two").setStyle("border","solid 1px red");
});


   これはこういうもんだとしか把握してないので、的外れな内容だったらすみません。

   で、以上を踏まえて考えるとサンプルに挙げられたsmoothgalleryのソースは
   独自のEvent追加するためかなーという気がしますが真の用途は良く分かりません。

   ▼demo.htmlでこうすると
   
myGallery.addEvent("showCarousel",function(){ console.log("show") });
myGallery.addEvent("carouselShown",function(){ console.log("shown") });

   サムネイルオープンとオープン完了時にコンソールログがでますが、
   fireEvent()の部分をコメントアウトすると何も出なくなります。

   返信

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。