jquery plugin

Svelte: using jQuery plugin with Action API

codef0rmer Angular2, Javascript, Jquery/UI, typescript , , , , ,

You may have used jQuery in your projects before, however, with the advancements in Frontend frameworks, we are sort of forced to forget about the vast ecosystem of jQuery and its plugins. And the main reason is that your framework of choice is not compatible with jQuery or does not have a jQuery friendly API out of the box. So we either look for an alternative library that is written from scratch or a wrapper library on top of jQuery/Javascript plugin written in your framework of choice. However, Svelte is a different beast and it has something called Action API that lets you use/consume jQuery/Javascript plugin without much framework-related overhead.

I had tweeted my wild prediction last time which what I have show-cased in this tutorial video.

You can watch the video below👇 to see it in action or grab the source code from Github.

Advertisement

An approach to use jQuery Plugins with AngularJS

codef0rmer Angular.js, Javascript , , ,

Lets face it, we can not completely get rid of jQuery and its plugins ecosystem, even though Angular has a built-in subset of jQuery under the name jQLite. At one point or another, we often need some sort of jQuery plugins in our application and we can/should not port entire plugin into Angular world in order to use it but we can avoid the plugin initialization code to be scattered across.

How?

Simply by writing a directive for it.

I would like to give you a small demo of Toolbar.js which is a jquery plugin I found recently on geekli.st. This is how we create a tooltip style toolbar in jQuery:

<!-- Click this to see a toolbar -->
<div id="format-toolbar" class="settings-button">
    <img src="http://paulkinzett.github.com/toolbar/img/icon-cog-small.png">
</div>

<!-- Our tooltip style toolbar -->
<div id="format-toolbar-options">
	<a href="#"><i class="icon-align-left"></i></a>
	<a href="#"><i class="icon-align-center"></i></a>
	<a href="#"><i class="icon-align-right"></i></a>
</div>

<!-- Typical jQuery plugin invocation -->
$('#format-toolbar').toolbar({
	content: '#format-toolbar-options', 
	position: 'left'
});

Enter the dragon a.k.a Angular

We’ll keep our markup intact by just adding a custom attribute named `toolbar-tip` – which will be an angular directive we’ll going to write soon. So our markup will change to:

<div id="format-toolbar1" class="settings-button" toolbar-tip="{content: '#format-toolbar-options', position: 'top'}">
	<img src="http://paulkinzett.github.com/toolbar/img/icon-cog-small.png">
</div>

One thing to notice here is that I’ve moved all the options of a toolbar into an HTML so that we can use the same directiv anywhere else with different options/settings.

Finally,

<script>
var App = angular.module('Toolbar', []);

App.directive('toolbarTip', function() {
	return {
		// Restrict it to be an attribute in this case
		restrict: 'A',
		// responsible for registering DOM listeners as well as updating the DOM
		link: function(scope, element, attrs) {
		    $(element).toolbar(scope.$eval(attrs.toolbarTip));
		}
	};
});
</script>

Woohoo! Is not that awesome?? Everything is simple, maintainable and testable!!!

Demo

http://jsfiddle.net/codef0rmer/TH87t/

If you found this article useful in anyway, feel free to donate me and receive my dilettante painting as a token of appreciation for your donation.