Website Screensaver in MooTools

To achieve screensaver like behavior, I wrote Screensaver.js. Note that the script doesn’t show or display a screensaver itself. It simply lets you attach functions to a pair of events for when the user goes idle and when they return. I’m using it on a couple of pages to start/stop a slideshow. It’s perfect for toggling type of functions which make sense to fire when the user goes idle. Or how about preloading images only when the user is idle?

You use it by creating a new Screensaver object and simply attaching your show/hide functions to the onActive and onIdle events it fires. For example, let’s say you have a Lightbox type of element and want to display it when the user goes idle. You would do something like this:

// Lightbox pseudocode
var lightbox = new Lightbox();

// Screensaver
var moosaver = new Screensaver({
	onIdle:  lightbox.show,
	onActive: lightbox.hide,
	ttl: 15000 // 15 seconds till idle.
});

Download your own copy at the GitHub Repo or just copy and paste the code below. The repo has a bit of documentation if you need more info.

(function() {
	Screensaver = new Class({
		Implements: [Options, Events],
		options: {/*
			onActive: $empty,
			onIdle: $empty,*/
			events: ['click', 'keypress', 'mousemove', 'resize', 'scroll'],
			target: window,
			ttl: 10000
		},

		initialize: function(options) {
			this.setOptions(options);
			this.enabled = false;

			var target = document.id(this.options.target);
			this.options.events.each(function(ev) {
				target.addEvent(ev, this.reset.bind(this));
			}, this);

			this.monitor();
		},

		monitor: function() {
			this.timer = this.display.delay(this.options.ttl, this);
		},

		reset: function() {
			$clear(this.timer);
			if (this.enabled) {
				this.fireEvent('active');
				this.enabled = false;
			}
			this.monitor();
		},

		display: function() {
			this.fireEvent('idle');
			this.enabled = true;
		}
	});

	Element.implement({
		screensave: function(options) {
			options.target = this;
			return new Screensaver(options)
		}
	});
})();

  • Daryl

    Do you have a demo of this? The intro paragraph mentioned a demo, yet I can't find it. I have been trying to link a mootools idletimer to a modal pop up to achieve this, and this seems to be the solution, but as a novice javascripter, I'm not sure how to make this work.

  • As there is no direct link for the source file in the website, ... A custom icon file can be specified for your screensaver. ...

  • Frank C. Tannehill

    I'm not a very good Java coder but your code seems simple enough to implement on my own domain. Thanks for sharing your work, I know you must have spent some of your free time on this.

  • arc

    Hi!

    I just found, after hours of searching and trying on my own, your CSS3-Translate-Libraries. I'm really impressed and glad i found them. Keep up the good work!

blog comments powered by Disqus