Butterfly-js

In all the following examples, the Core module is loaded in the variable B as follow:

var B = loader.getModule('bCore');

This function returns the element having as id attribute the id given in arguments.

If the given argument is already a DOM node, it'll be the returned element of the function.

Example

<div id="test-id"></div>
<button onclick="B.$id('foo').innerHTML = 'some content'">Click me</button>

Demo:

This function returns true if the element given in first argument has the css class given in second argument.

The given element can either be a node or an element id.

Example

<div id="test-hasclass" class="someclass someotherclass"></div>
<button onclick="alert(B.hasClass('test-hasclass', 'someclass') ? 'yes' : 'no';">Does "test-hasclass" has the class "someclass" ?</button>
<button onclick="alert(B.hasClass('test-hasclass', 'newclass') ? 'yes' : 'no';">Does "test-hasclass" has the class "newclass" ?</button>

Demo

This function sets the class given in second argument to the element given in first argument.

The given element can either be a node or an element id.

Example

<style type="text/css">
.classA {
	color: red;
}
.classB {
	font-weight: bold;
}
</style>
<div id="test-setclass">I have no class...yet</div>
<button onclick="B.setClass('test-setclass', 'classA');">Set class "classA" to "test-setclass"</button>
<button onclick="B.setClass('test-setclass', 'classB');">Set class "classB" to "test-setclass"</button>

Demo

This function adds the class given in second argument to the element given in first argument.

The given element can either be a node or an element id.

Example

<style type="text/css">
.classA {
	color: red;
}
.classB {
	font-weight: bold;
}
</style>
<div id="test-addclass">I have no class...yet</div>
<button onclick="B.addClass('test-addclass', 'classA');">Add class "classA" to "test-addclass"</button>
<button onclick="B.addClass('test-addclass', 'classB');">Add class "classB" to "test-addclass"</button>

Demo

This function remove the class given in second argument from the element given in first argument.

The given element can either be a node or an element id.

Example

<style type="text/css">
.removeclassA {
	color: red;
}
.removeclassB {
	font-weight: bold;
}
</style>
<div id="test-removeclass" class="removeclassA removeclassB">I have some class</div>
<button onclick="B.removeClass('test-removeclass', 'removeclassA');">Remove class "removeclassA" from "test-removeclass"</button>
<button onclick="B.removeClass('test-removeclass', 'removeclassB');">Remove class "removeclassB" from "test-removeclass"</button>

Demo

This function replace the class given in second argument by the class given in third argument for the element given in first argument.

A fourth boolean argument can be given. If its value is true and the element does not have the searched class, the new class will still be set.

The given element can either be a node or an element id.

Example

<style type="text/css">
	.replaceclassA {
		color: red;
	}
	.replaceclassB {
		color: blue;
	}
</style>
<div id="test-replaceclass" class="replaceclassA">I have a class which will be replaced</div>
<button onclick="B.replaceClass('test-replaceclass', 'replaceclassA', 'replaceclassB');">Replace "test-replaceclass"'s class "replaceclassA" by "replaceclassB"</button>
<button onclick="B.replaceClass('test-replaceclass', 'replaceclassB', 'replaceclassA');">Replace "test-replaceclass"'s class "replaceclassB" by "replaceclassA"</button>

Demo

This function binds an event given in second argument to the element given in first argument.

When the event is fired, the action given in third argument is executed.

The arguments given in fifth argument will be passed to the executed action.

Available options

• skipEvent
• scope
• propagate

Example

<style type="text/css">
	.eventbloc {
		width: 100px;
		height: 100px;
		border: 1px solid black;
	}
</style>
<button id="clickbutton">Click me</button><br />
<span>Mouse events:</span>
<div id="eventbloc" class="eventbloc"></div>
<script type="text/javascript">
	var clicksAddEvent = 0, html = '';
	B.on(B.$id('clickbutton'), 'click', function(event){
		event = event || window.event;
		var target = event.target || event.srcElement;

		clicksAddEvent++;
		html = "I've been clicked ";
		switch (clicksAddEvent) {
			case 1:
				html += 'once';
				break;
			case 2:
				html += 'twice';
				break;
			default:
				html += clicksAddEvent + ' times';
				break;
		}
		target.innerHTML = html;
	});


	B.on('eventbloc', 'mouseover', function() {
		this.innerHTML = "Mouse over";
	}, {scope: 'eventbloc', skipEvent: true});
	B.on('eventbloc', 'mouseout', function() {
		this.innerHTML = "Mouse out";
	}, {scope: 'eventbloc', skipEvent: true});
	B.on('eventbloc', 'mousemove', function(e) {
		this.innerHTML = "Mouse move (" + e.clientX + ", " + e.clientY + ")";
	}, {scope: 'eventbloc'});
	B.on('eventbloc', 'click', function() {
		this.innerHTML = "Click";
	}, {scope: 'eventbloc', skipEvent: true});
</script>

Demo:

This function remove a binded event.

To unbind an event, the callback function used to set the event is needed.

Example

<button id="clickbutton2">Click me</button><br />
<button id="removeeventbutton">Disable button</button><br />
<script type="text/javascript">
	var clicksRemoveEvent = 0, html = '';
	function clickFunction(event){
		event = event || window.event;
		var target = event.target || event.srcElement;

		clicksRemoveEvent++;
		html = "I've been clicked ";
		switch (clicksRemoveEvent) {
			case 1:
				html += 'once';
				break;
			case 2:
				html += 'twice';
				break;
			default:
				html += clicksRemoveEvent + ' times';
				break;
		}
		target.innerHTML = html;
	}
	B.on('clickbutton2', 'click', clickFunction);


	B.on('removeeventbutton', 'click', function(){
		B.off('clickbutton2', 'click', clickFunction);
	});
</script>

Demo:

Those methods return the value of the style attribute styleKey of item.

• getStyle: return the full value, with the units (eg. 42px)
• getStyle: return the numeric value, without the units (eg. 42). Will return NaN if the style value is not numeric.

Note: The style instructions must be full. B.getStyle(item, 'border') will return '', B.getStyle(item, 'border-top-width') will return '1px' for example.

Example

<style type="text/css">
	#get-style-element {
		width: 100px;
		height: 100px;
		border: 1px solid black;
	}
</style>
<div id="get-style-element">Element to analyse</div>
<div id="get-style-element-result"></div>
<script type="text/javascript">
	B.$id('get-style-element-result').innerHTML = B.getStyle('get-style-element', 'width');
</script>

Demo:

This method create a DOM node which type is the name argument, with as attributes the elements in the attributes argument and inject it in the node given as third parameter. The method returns the created node.

• name: string, tag name of the node to create.
• attributes: associative array, the keys are the attributes' names, and the values are the attributes' values.
• parent: associative array, needs 2 elements, one in a "element" key, which will be the parent node and a key "after" or "before" which must contain a child of the parent node. The created node will be inserted before or after the corresponding node in the given parent node.

Example

<style type="text/css">
	#get-style-element {
		width: 100px;
		height: 100px;
		border: 1px solid black;
	}
</style>
<ul id="parent">
	<li>An element</li>
</ul>
<script type="text/javascript">
	B.create('li', {'text': 'Created li node at the end of the list'}, {'element': B.$id('parent')});
	B.create('li', {'text': 'Created li node at the beginning of the list'}, {'element': B.$id('parent'), 'before': B.$id('parent').firstChild});
	B.create('li', {'text': 'Created li node at the 2nd position in the list'}, {'element': B.$id('parent'), 'after': B.$id('parent').firstChild});
</script>

Demo:

This method inject a collection of nodes at the end of the node's existing children.

This is nothing but a shortcut for the usage of appendChild in a loop.

• node: Dom node where the children nodes must be injected.
• children: Nodes to inject.

Example

<ul id="empty-parent"></ul>
<script type="text/javascript">
	var nodes = [
		B.create('li', {'text': 'First node'}),
		B.create('li', {'text': 'Second node'}),
		B.create('li', {'text': 'Third node'})
	];
	B.appendChildren('empty-parent', nodes);
</script>

Demo: