Develop a fanquery plugin

I) Adding more methods to Jq class

Make sure you have read how to use fanqery plugins before you read this page.
In any app if you want to add more methods to the Jq class, you can do it. For eg., let's add a method "slideUpAndDown" to Jq class. Open fan/Jq.fan and modify it as below

using fanquery
using fancybox

@Js
class Jq : JqBase{
  new make(Obj? selector, JqBase? context := null) 
                            : super(selector, context){}
  Void slideUpAndDown(){
    slideUp.slideDown
  }
}

That's it. Now you can use this method like this

Jq("link").click{
 Jq("button").slideUpAndDown
}

Now let's go on to see how to develop reusable fanquery plugins

II) Write a pure fantom fanquery plugin

Let's develop a simple plugin called "betterclick" that will show an alert when clicked on anything it's attached to:

1) Create a regular pod "betterclick" with on mixin BetterClick on it. Code it like this

using fanquerybase
using dom

@Js
mixin BetterClick{
  JqBase betterClick(){
    JqBase self := (Obj)this

    self.click|cur, event|{
      Win.cur.alert("Ouch, you clicked me...")
      event.preventDefault
    }

    return self
  }
}

That's it. Build pod. Now you can use it in your app like this

Distribute betterclick.pod and your consumer's will be able to use the betterclick() method like this:

Jq("#mylink").betterClick()

III) Porting a Existing Jquery plugin

Let's see how to code the fancybox plugin. Almost all the steps remains same, except you need to write some native javascript code

1) Write a regular pod("fancybox") with one class FancyBox like this

using fanquery
@Js
mixin FancyBox{
  Void fancybox([Str:Obj]? props := null){
    JqBase self := (Obj)this
    FancyBoxNative.fancybox(self, props)
  }

  static Void close(){
    FancyBoxNative.close
  }
}

@Js
class FancyBoxNative{
  native static Void fancybox(JqBase self, [Str:Obj]? props := null)
  native static Void close()
}

add js/FanyBoxNativePeer.js which looks like this

fan.fancybox.FancyBoxNativePeer = fan.sys.Obj.$extend(fan.sys.Obj);
  
fan.fancybox.FancyBoxNativePeer.fancybox = function(self, props){
  var jsProps = toJsMap(props);
  if(jsProps){
    self.selector.fancybox(jsProps);
  }
  else{
    self.selector.fancybox();
  }

}

You can also add a fan/Conf.fan. It defines the set of additional js files that needs to be delivered. You can also optionally deliver more js files depending on conf parameter. You can include all these files in your pods res/ directory.

class Conf{
  Str[] getExtraJsFiles([Str:Obj]? conf){
    args := ["res/fancybox/jquery.fancybox-1.3.4.js"]
    if(conf["easing"] == true){
      args.add("res/fancybox/jquery.easing.js")
    }
    return args
  }
}

Now when someone includes this plugin like this

@Js
@Include{ plugins =[
      Plugin{name="fancybox"; conf=["easing":true]}
   ]
}
class IndexJs{..}

Both fancybox js and easing js will be included.