The tutorial of Filter

The tutorial of Filter

In this tutorial, the easy filter for understanding a contents filter is created.
The filter to create creates the filter which indicates the specific keyword in contents by highlight.

Step1. The filter which applies a filter is defined.

Favorite namespace is defined and the base of a filter is defined.
Since the keyword is indicated by highlight this time, a keyword is also described together.

(function(){

var yournamesapce = this.yournamesapce = {};

yournamesapce.KeywordFilter = {

	keywords: ['mootools', 'Presentation.js']	//Keyword list

}

}.call(this));

Step2. Processing when displayed on a filter is defined.

Next, the processing at the time is described that the page was displayed.
It is the processing which indicates the important keyword by highlight.

//The contents are indicated by highlight.
activate: function(content){
	var html = '',
		element = null,
		replaceKeywords = '',
		replaceContent = '',
		replaceTarget = null,
		replaceValue = '',
		isHighlight = false;

	//It changes into an element from a content object. 
	element = $(content);

	//Status is acquired from data store, and already case highlighted, it skips.
	isHighlight = element.retrieve('content:highlight');

	if (isHighlight === true){
		return;
	}

	html = element.get('html');

	//The keyword in contents is emphasized with a strong element.
	replaceKeywords = this.keywords.join('|');

	replaceTarget = new RegExp('/(' + replaceKeywords + ')/', 'g');
	replaceValue = '<strong class="highlight">$1</strong>';

	replaceContent = html.replace(replaceTarget, replaceValue);

	element.set('html', replaceContent)
		.store('content:html', html)		//The contents before a highlight are backed up. 
		.store('content:highlight', true);	//It uses ending with a highlight.
}

Step3. Processing when it becomes undisplayed is defined as a filter.

Next, processing when a page becomes undisplayed is described.
Although the keyword is indicated by the highlight, the processing returned to the original state here is put in.
Although I think that it is unnecessary, since it serves also as description of a filter, it incorporates and sees this time.

//It restores to a front state from the state where it has highlighted.
deactivate: function(content){

	var element = null,
		beforeContent = '',
		isHighlight = false;

	//It changes into an element from a content object. 
	element = $(content);

	isHighlight = element.retrieve('content:highlight');
	if (isHighlight !== true){
		return;
	}

	beforeContent = element.retrieve('content:html');

	element.set('html', beforeContent)
		.store('content:highlight', false);	//It cancels ending with a highlight.

}

Step4. A filter is registered.

A filter is registered using an addFilter method.
The rest performs a start method and starts a slide.

(function(yournamesapce){

this.addEvent('domready', function(){

	var p = new Presentation('presentation');

	p.addFilter(yournamesapce.KeywordFilter);

	p.displayFullScreen().start();

});

}.call(this, yournamesapce));

Step5. The code of a final filter

The code of a final filter turns into the following codes.

keyword-filter.js

(function(){

var yournamesapce = this.yournamesapce = {};

yournamesapce.KeywordFilter = {

	keywords: ['mootools', 'Presentation.js'],

	//The contents are indicated by highlight.
	activate: function(content){
		var html = '',
			element = null,
			replaceKeywords = '',
			replaceContent = '',
			replaceTarget = null,
			replaceValue = '',
			isHighlight = false;

		//It changes into an element from a content object. 
		element = $(content);

		//Status is acquired from data store, and already case highlighted, it skips.
		isHighlight = element.retrieve('content:highlight');

		if (isHighlight === true){
			return;
		}

		html = element.get('html');

		//The keyword in contents is emphasized with a strong element.
		replaceKeywords = this.keywords.join('|');

		replaceTarget = new RegExp('/(' + replaceKeywords + ')/', 'g');
		replaceValue = '<strong class="highlight">$1</strong>';

		replaceContent = html.replace(replaceTarget, replaceValue);

		element.set('html', replaceContent)
			.store('content:html', html)		//The contents before a highlight are backed up. 
			.store('content:highlight', true);	//It uses ending with a highlight.
	},

	//It restores to a front state from the state where it has highlighted.
	deactivate: function(content){

		var element = null,
			beforeContent = '',
			isHighlight = false;

		//It changes into an element from a content object. 
		element = $(content);

		isHighlight = element.retrieve('content:highlight');
		if (isHighlight !== true){
			return;
		}

		beforeContent = element.retrieve('content:html');

		element.set('html', beforeContent)
			.store('content:highlight', false);	//It cancels ending with a highlight.

	}

}

}.call(this));

The tutorial of a filter is an end now.
Thank you for everything.