Category: Mootools
JSB 1.3.0 released - Good bye Inline-Javascript
Today I finally finished JSB 1.3.0. The JsBehavourToolkit is a little toolkit to avoid any inline javascript, allow copy-and-paste of behaviour on html elements.
There is a native version, which works without any framework from (Firefox 3+, Safari 5+, Opera, Chrome and IE9+). The jQuery and Mootools Version works with any browser (even IE6).
New in 1.3.0 is a simple (by design!) event system. It is framework independent and works with simple channel identifier and a json-object as value.
This should be fired by a Js-Behaviour which needs to say something, instead of global variables and direct call. This enables you to use dependency injection if you keep the channel identifier the same.
You can listen to that event, too:
2
3
4
5
6
'HoneyPot::CLICKED', // identifier
function(values) { // callback
alert('The user ' + values.name + ' clicked it already ' + values.times);
}
);
It's even possible to filter for a filter-object when listening:
2
3
4
5
6
7
'HoneyPot::CLICKED', // identifier
{"name": "Bob"}, // filter everything with name = Bob
function(values) { // callback
alert('The user ' + values.name + ' clicked it already ' + values.times);
}
);
You may also use RegExp as channel identifier when calling jsb.on:
2
3
4
5
6
/^HoneyPot.*$, // identifier which starts with HoneyPot*
function(values) { // callback
alert('The user ' + values.name + ' clicked it already ' + values.times);
}
);
Have fun with this release. Sourcecode is of course MIT-Licensed and available on github. Tests for jquery, mootols and native version are shipped in the tests-folder.
Update for Mootools Youtube Player
Today I updated the YtMooPlayer.js-component (showcase).
A while back the youtube chromeless api of google changed, so it was manadatory to set the "version"-parameter.
The new 1.0.1 version of YtMooPlayer.js fixes this issue.
You can download the youtube mootools class at dracoblue.net or pull the source from github.
JsBehaviour 1.0 released
This is a tiny library I have been using to create inline dynamic effects at docsforit without inline javascript. Since it is not spludo (serverside javascript mvc framework) specific and works as long as mootools is available, I release it for the public today.
How does it work?
The idea behind JsBehaviour is pretty simple. Put a class (jsb_) on all elements which should be enriched/enhanced by javascript. Additionally put a class jsb_keyword on the element to define which behaviour should be applied to the element.
Each behaviour can register on such keyword by using this
method. As soon as the dom is loaded
is executed. You might even overwrite your Request.HTML method to do the same.
Hope you enjoy to work and tweak this little piece of MIT-licensed software.
Download @ DracoBlue.net and js-behaviour@dracoblue.
Demo + Spludo-Integration at "Editing the sections" on docsforit (double click on the content, this is all done by using JsBehaviour!!).
Encode/Decode special xml characters in Javascript
When you want to convert htmlspecialchars in javascript to not so dangerous text and decode those html entities back again, you may have some convenient methods on a dom entity (like mootools .get('html') and .get('text')).
If you want to do that simple work on simple strings, I use the following functions:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
'&': '&',
'"': '"',
'<': '<',
'>': '>'
};
var escaped_one_to_xml_special_map = {
'&': '&',
'"': '"',
'<': '<',
'>': '>'
};
function encodeXml(string) {
return string.replace(/([\&"<>])/g, function(str, item) {
return xml_special_to_escaped_one_map[item];
});
};
function decodeXml(string) {
return string.replace(/("|<|>|&)/g,
function(str, item) {
return escaped_one_to_xml_special_map[item];
});
}
Mootools Youtube Chromeless Player
Today I finished the release for YtMooPlayer.js - the chromeless youtube player for mootools.
The plain youtube chromeless player does not run in an own namespace and makes using multiple players on the same site ugly. Since the chromeless player has a swf as "real" player, one needs to wait until its loaded.
That and some useful events are encapsulated in this class. So have fun using youtube with mootools on your site! I am currently using it successfully for 6 month at my koala search engine for youtube player and a custom javascript playlist.
Beside the YtMooPlayer.js-Download, there is also a Demo and Api-Docs (generated with the excellent jsdoc toolkit).
Morph css background-position in Internet Explorer
If you try to set the CSS-property background-position in Internet Explorer (I tested with 7) and even use that with Mootools' morph/tween-functions, it will not work.
You can workaround that issue, if you set also background-position-x and background-position-y (actually ignored by my Firefox 3.0).
This is the code, I use at koala to move the background upwards.
2
3
4
'background-position':'0 -140px',
'background-position-y':'-140px',
});
