jQuack Coldfusion Component for jQuery

Update: JQuack is now a Coldfusion on Wheels plugin!

A CFC wrapper for including jQuery core files, plugins, UI components and themes. Explicitly including jQuery files is no big deal, but jQuack’s strength is being able to bundle a plugin’s core and any dependencies into a single function call with a single parameter (or no parameter at all!)

Is a dependency shared between plugins (e.g. bgiframe.js)? No problem, jQuack prevents files from being included more than once per request.

It makes application-wide or server-wide version changes simple.

Download it @ GitHub

Example Plugin Package Structure

<!--- Setup your plugin packages (structure of arrays) --->
<cfset pluginStruct = {} />
<cfset pluginStruct.foo = ["foo/foo.js","foo/foo.css"] />
<cfset pluginStruct.bar = ["bar/bar.css","bar/bar.js","bar/foobar.js","jquery.barfoo.js"] />
<cfset pluginStruct.CFJS = ["cfjs/jquery.cfjs.packed.js"] />

Example init params

<cfset initArgs = {} />
<!--- Name of the jQuery core file --->
<cfset initArgs.coreFileName = "jquery-6.6.6.min.js" />
<!--- URL Path to your javascript directory, defaults to /jquery/ --->
<cfset initArgs.rootPath = "/jquery/" />
<!--- Name of the jQuery UI bundle --->
<cfset initArgs.UIBundleName = "jquery-ui-1.0.0.custom" />
<!--- Name of the theme directory --->
<cfset initArgs.themeName = "sunny" />
<!--- 	URL Path to your plugins directory, defaults to /{rootPath}/plugins/ --->
<cfset initArgs.pluginPath = "/jquery/plugins/"	/>
<!---
A structure of arrays. Plugins will be reference by their structure key,
the array will contain URLs to the plugin files relative to the {pluginPath}
See Example pluginStruct above
--->
<cfset initArgs.pluginStruct = pluginStruct />
<!--- Intialising jQuack --->
<cfset jQuack = CreateObject("component","{your_cfc_path}.jQuack").init(argumentCollection=initArgs) />

Example Function Calls

<!--- Calling jQuack in your views --->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>jQuack..</title>
		#jQuack.core()#
		#jQuack.plugin("foo,bar,cfjs")#
		#jQuack.ui()#

		<!--- a different core file --->
		#jQuack.core("jquery-6.6.6.min.js")#

		<!--- from an external URL --->
		#jQuack.core(coreFileName="jquery.min.js", rootPath="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/")#

		<!--- a single plugin --->
		#jQuack.plugin("foo")#

		<!--- multiple plugins --->
		#jQuack.plugin("foo,bar")#

		<!--- ALL plugins --->
		#jQuack.plugin()#

		<!--- a plugin not defined in the pluginStruct --->
		#jQuack.plugin(file="outbackjack/outbackjack.js")#

		<!--- a plugin from an external URL --->
		#jQuack.plugin(file="penelopepitstop.js", pluginPath="http://plugins.wackyraces.com/")#

		<!--- UI with a different theme --->
		#jQuack.ui(themeName="rainy")#
	</head>
	<body>...</body>
</html>

Example Directory Structure

Core File
/{yourWebRoot}/jquery/
/{yourWebRoot}/jquery/jquery-1.0.0.min.js

Plugins
/{yourWebRoot}/jquery/plugins/
/{yourWebRoot}/jquery/plugins/foo/
/{yourWebRoot}/jquery/plugins/foo/foo.js
/{yourWebRoot}/jquery/plugins/foo/foo.css
/{yourWebRoot}/jquery/plugins/bar/
/{yourWebRoot}/jquery/plugins/bar/bar.js
/{yourWebRoot}/jquery/plugins/bar/bar.css

UI & Themes
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/sunny/
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/sunny/images/
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/sunny/jquery-ui-1.0.0.custom.css

/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/rainy/
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/rainy/images/
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/css/rainy/jquery-ui-1.0.0.custom.css
/{yourWebRoot}/jquery/jquery-ui-1.0.0.custom/js/jquery-ui-1.0.0.custom.min.js

Advertisements

One thought on “jQuack Coldfusion Component for jQuery

  1. Pingback: JQuack for jQuery CFWheels Plugin | It's hip to be []

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s