pupu 0.0.1

data/examples/blog/media/pupu/autocompleter/README.textile

@@ -0,0 +1,26 @@
+h1. About merb_pupu
+
+Merb_pupu is a plugin system for merb's public stuff like mootools plugins, icon sets etc. It knows dependencies and it has CLI interface, so it's really easy to bundle such plugins into your app. Please see http://github.com/botanicus/merb_pupu for more informations.
+
+h1. About autocompleter
+
+This pupu is based on "digitarald's mootools autocompleter":http://digitarald.de/project/autocompleter. It's very flexible and configuratable. It can deal with local data, and few types of AJAX requests (basic request, JSON and HTM request). For more informations please see the showcases on digitarald's page.
+
+h1. Usage
+
+h2. Initializer
+
+Edit the public/javascripts/initializers/autocompleter.js.
+
+h2. Layout
+
+<pre>
+# for basic functionality
+plugin :autocompleter
+
+# for local requests through Autocompleter.Request class
+plugin :autocompleter, :type => "local"
+
+# for ajax requests through Autocompleter.Request class
+plugin :autocompleter, :type => "request"
+</pre>

data/examples/blog/media/pupu/autocompleter/Rakefile

@@ -0,0 +1,29 @@
+namespace :git do
+  desc "Do the initial import"
+  task :init do
+    sh "git init"
+    sh "git add ."
+    sh "git commit -a -m 'Initial import'"
+  end
+end
+
+namespace :javascripts do
+  desc "Compress javascripts"
+  task :compress do
+    puts "This task isn't ready yet."
+  end
+end
+
+namespace :stylesheets do
+  desc "Compress stylesheets"
+  task :compress do
+    puts "This task isn't ready yet."
+  end
+end
+
+namespace :sass do
+  desc "Compile Sass templates"
+  task :compile do
+    puts "This task isn't ready yet."
+  end
+end

data/examples/blog/media/pupu/autocompleter/TODO

@@ -0,0 +1 @@
+- more comments in initializers

data/examples/blog/media/pupu/autocompleter/config.rb

@@ -0,0 +1,12 @@
+# autocompleter depends on mootools
+dependencies :mootools
+
+# javascripts for loading
+javascripts "observer", "autocompleter"
+
+# stylesheet
+stylesheet "autocompleter"
+
+parameter :type, :optional => ["local", "request"] do |type|
+  javascript "autocompleter.#{type}"
+end

data/examples/blog/media/pupu/autocompleter/javascripts/autocompleter.js

@@ -0,0 +1,442 @@
+/**
+ * Autocompleter
+ *
+ * http://digitarald.de/project/autocompleter/
+ *
+ * @version		1.1.2
+ *
+ * @license		MIT-style license
+ * @author		Harald Kirschner <mail [at] digitarald.de>
+ * @copyright	Author
+ */
+
+var Autocompleter = new Class({
+
+	Implements: [Options, Events],
+
+	options: {/*
+		onOver: $empty,
+		onSelect: $empty,
+		onSelection: $empty,
+		onShow: $empty,
+		onHide: $empty,
+		onBlur: $empty,
+		onFocus: $empty,*/
+		minLength: 1,
+		markQuery: true,
+		width: 'inherit',
+		maxChoices: 10,
+		injectChoice: null,
+		customChoices: null,
+		emptyChoices: null,
+		visibleChoices: true,
+		className: 'autocompleter-choices',
+		zIndex: 42,
+		delay: 400,
+		observerOptions: {},
+		fxOptions: {},
+
+		autoSubmit: false,
+		overflow: false,
+		overflowMargin: 25,
+		selectFirst: false,
+		filter: null,
+		filterCase: false,
+		filterSubset: false,
+		forceSelect: false,
+		selectMode: true,
+		choicesMatch: null,
+
+		multiple: false,
+		separator: ', ',
+		separatorSplit: /\s*[,;]\s*/,
+		autoTrim: false,
+		allowDupes: false,
+
+		cache: true,
+		relative: false
+	},
+
+	initialize: function(element, options) {
+		this.element = $(element);
+		this.setOptions(options);
+		this.build();
+		this.observer = new Observer(this.element, this.prefetch.bind(this), $merge({
+			'delay': this.options.delay
+		}, this.options.observerOptions));
+		this.queryValue = null;
+		if (this.options.filter) this.filter = this.options.filter.bind(this);
+		var mode = this.options.selectMode;
+		this.typeAhead = (mode == 'type-ahead');
+		this.selectMode = (mode === true) ? 'selection' : mode;
+		this.cached = [];
+	},
+
+	/**
+	 * build - Initialize DOM
+	 *
+	 * Builds the html structure for choices and appends the events to the element.
+	 * Override this function to modify the html generation.
+	 */
+	build: function() {
+		if ($(this.options.customChoices)) {
+			this.choices = this.options.customChoices;
+		} else {
+			this.choices = new Element('ul', {
+				'class': this.options.className,
+				'styles': {
+					'zIndex': this.options.zIndex
+				}
+			}).inject(document.body);
+			this.relative = false;
+			if (this.options.relative) {
+				this.choices.inject(this.element, 'after');
+				this.relative = this.element.getOffsetParent();
+			}
+			this.fix = new OverlayFix(this.choices);
+		}
+		if (!this.options.separator.test(this.options.separatorSplit)) {
+			this.options.separatorSplit = this.options.separator;
+		}
+		this.fx = (!this.options.fxOptions) ? null : new Fx.Tween(this.choices, $merge({
+			'property': 'opacity',
+			'link': 'cancel',
+			'duration': 200
+		}, this.options.fxOptions)).addEvent('onStart', Chain.prototype.clearChain).set(0);
+		this.element.setProperty('autocomplete', 'off')
+			.addEvent((Browser.Engine.trident || Browser.Engine.webkit) ? 'keydown' : 'keypress', this.onCommand.bind(this))
+			.addEvent('click', this.onCommand.bind(this, [false]))
+			.addEvent('focus', this.toggleFocus.create({bind: this, arguments: true, delay: 100}))
+			.addEvent('blur', this.toggleFocus.create({bind: this, arguments: false, delay: 100}));
+	},
+
+	destroy: function() {
+		if (this.fix) this.fix.destroy();
+		this.choices = this.selected = this.choices.destroy();
+	},
+
+	toggleFocus: function(state) {
+		this.focussed = state;
+		if (!state) this.hideChoices(true);
+		this.fireEvent((state) ? 'onFocus' : 'onBlur', [this.element]);
+	},
+
+	onCommand: function(e) {
+		if (!e && this.focussed) return this.prefetch();
+		if (e && e.key && !e.shift) {
+			switch (e.key) {
+				case 'enter':
+					if (this.element.value != this.opted) return true;
+					if (this.selected && this.visible) {
+						this.choiceSelect(this.selected);
+						return !!(this.options.autoSubmit);
+					}
+					break;
+				case 'up': case 'down':
+					if (!this.prefetch() && this.queryValue !== null) {
+						var up = (e.key == 'up');
+						this.choiceOver((this.selected || this.choices)[
+							(this.selected) ? ((up) ? 'getPrevious' : 'getNext') : ((up) ? 'getLast' : 'getFirst')
+						](this.options.choicesMatch), true);
+					}
+					return false;
+				case 'esc': case 'tab':
+					this.hideChoices(true);
+					break;
+			}
+		}
+		return true;
+	},
+
+	setSelection: function(finish) {
+		var input = this.selected.inputValue, value = input;
+		var start = this.queryValue.length, end = input.length;
+		if (input.substr(0, start).toLowerCase() != this.queryValue.toLowerCase()) start = 0;
+		if (this.options.multiple) {
+			var split = this.options.separatorSplit;
+			value = this.element.value;
+			start += this.queryIndex;
+			end += this.queryIndex;
+			var old = value.substr(this.queryIndex).split(split, 1)[0];
+			value = value.substr(0, this.queryIndex) + input + value.substr(this.queryIndex + old.length);
+			if (finish) {
+				var tokens = value.split(this.options.separatorSplit).filter(function(entry) {
+					return this.test(entry);
+				}, /[^\s,]+/);
+				if (!this.options.allowDupes) tokens = [].combine(tokens);
+				var sep = this.options.separator;
+				value = tokens.join(sep) + sep;
+				end = value.length;
+			}
+		}
+		this.observer.setValue(value);
+		this.opted = value;
+		if (finish || this.selectMode == 'pick') start = end;
+		this.element.selectRange(start, end);
+		this.fireEvent('onSelection', [this.element, this.selected, value, input]);
+	},
+
+	showChoices: function() {
+		var match = this.options.choicesMatch, first = this.choices.getFirst(match);
+		this.selected = this.selectedValue = null;
+		if (this.fix) {
+			var pos = this.element.getCoordinates(this.relative), width = this.options.width || 'auto';
+			this.choices.setStyles({
+				'left': pos.left,
+				'top': pos.bottom,
+				'width': (width === true || width == 'inherit') ? pos.width : width
+			});
+		}
+		if (!first) return;
+		if (!this.visible) {
+			this.visible = true;
+			this.choices.setStyle('display', '');
+			if (this.fx) this.fx.start(1);
+			this.fireEvent('onShow', [this.element, this.choices]);
+		}
+		if (this.options.selectFirst || this.typeAhead || first.inputValue == this.queryValue) this.choiceOver(first, this.typeAhead);
+		var items = this.choices.getChildren(match), max = this.options.maxChoices;
+		var styles = {'overflowY': 'hidden', 'height': ''};
+		this.overflown = false;
+		if (items.length > max) {
+			var item = items[max - 1];
+			styles.overflowY = 'scroll';
+			styles.height = item.getCoordinates(this.choices).bottom;
+			this.overflown = true;
+		};
+		this.choices.setStyles(styles);
+		this.fix.show();
+		if (this.options.visibleChoices) {
+			var scroll = document.getScroll(),
+			size = document.getSize(),
+			coords = this.choices.getCoordinates();
+			if (coords.right > scroll.x + size.x) scroll.x = coords.right - size.x;
+			if (coords.bottom > scroll.y + size.y) scroll.y = coords.bottom - size.y;
+			window.scrollTo(Math.min(scroll.x, coords.left), Math.min(scroll.y, coords.top));
+		}
+	},
+
+	hideChoices: function(clear) {
+		if (clear) {
+			var value = this.element.value;
+			if (this.options.forceSelect) value = this.opted;
+			if (this.options.autoTrim) {
+				value = value.split(this.options.separatorSplit).filter($arguments(0)).join(this.options.separator);
+			}
+			this.observer.setValue(value);
+		}
+		if (!this.visible) return;
+		this.visible = false;
+		if (this.selected) this.selected.removeClass('autocompleter-selected');
+		this.observer.clear();
+		var hide = function(){
+			this.choices.setStyle('display', 'none');
+			this.fix.hide();
+		}.bind(this);
+		if (this.fx) this.fx.start(0).chain(hide);
+		else hide();
+		this.fireEvent('onHide', [this.element, this.choices]);
+	},
+
+	prefetch: function() {
+		var value = this.element.value, query = value;
+		if (this.options.multiple) {
+			var split = this.options.separatorSplit;
+			var values = value.split(split);
+			var index = this.element.getSelectedRange().start;
+			var toIndex = value.substr(0, index).split(split);
+			var last = toIndex.length - 1;
+			index -= toIndex[last].length;
+			query = values[last];
+		}
+		if (query.length < this.options.minLength) {
+			this.hideChoices();
+		} else {
+			if (query === this.queryValue || (this.visible && query == this.selectedValue)) {
+				if (this.visible) return false;
+				this.showChoices();
+			} else {
+				this.queryValue = query;
+				this.queryIndex = index;
+				if (!this.fetchCached()) this.query();
+			}
+		}
+		return true;
+	},
+
+	fetchCached: function() {
+		return false;
+		if (!this.options.cache
+			|| !this.cached
+			|| !this.cached.length
+			|| this.cached.length >= this.options.maxChoices
+			|| this.queryValue) return false;
+		this.update(this.filter(this.cached));
+		return true;
+	},
+
+	update: function(tokens) {
+		this.choices.empty();
+		this.cached = tokens;
+		var type = tokens && $type(tokens);
+		if (!type || (type == 'array' && !tokens.length) || (type == 'hash' && !tokens.getLength())) {
+			(this.options.emptyChoices || this.hideChoices).call(this);
+		} else {
+			if (this.options.maxChoices < tokens.length && !this.options.overflow) tokens.length = this.options.maxChoices;
+			tokens.each(this.options.injectChoice || function(token){
+				var choice = new Element('li', {'html': this.markQueryValue(token)});
+				choice.inputValue = token;
+				this.addChoiceEvents(choice).inject(this.choices);
+			}, this);
+			this.showChoices();
+		}
+	},
+
+	choiceOver: function(choice, selection) {
+		if (!choice || choice == this.selected) return;
+		if (this.selected) this.selected.removeClass('autocompleter-selected');
+		this.selected = choice.addClass('autocompleter-selected');
+		this.fireEvent('onSelect', [this.element, this.selected, selection]);
+		if (!this.selectMode) this.opted = this.element.value;
+		if (!selection) return;
+		this.selectedValue = this.selected.inputValue;
+		if (this.overflown) {
+			var coords = this.selected.getCoordinates(this.choices), margin = this.options.overflowMargin,
+				top = this.choices.scrollTop, height = this.choices.offsetHeight, bottom = top + height;
+			if (coords.top - margin < top && top) this.choices.scrollTop = Math.max(coords.top - margin, 0);
+			else if (coords.bottom + margin > bottom) this.choices.scrollTop = Math.min(coords.bottom - height + margin, bottom);
+		}
+		if (this.selectMode) this.setSelection();
+	},
+
+	choiceSelect: function(choice) {
+		if (choice) this.choiceOver(choice);
+		this.setSelection(true);
+		this.queryValue = false;
+		this.hideChoices();
+	},
+
+	filter: function(tokens) {
+		return (tokens || this.tokens).filter(function(token) {
+			return this.test(token);
+		}, new RegExp(((this.options.filterSubset) ? '' : '^') + this.queryValue.escapeRegExp(), (this.options.filterCase) ? '' : 'i'));
+	},
+
+	/**
+	 * markQueryValue
+	 *
+	 * Marks the queried word in the given string with <span class="autocompleter-queried">*</span>
+	 * Call this i.e. from your custom parseChoices, same for addChoiceEvents
+	 *
+	 * @param		{String} Text
+	 * @return		{String} Text
+	 */
+	markQueryValue: function(str) {
+		return (!this.options.markQuery || !this.queryValue) ? str
+			: str.replace(new RegExp('(' + ((this.options.filterSubset) ? '' : '^') + this.queryValue.escapeRegExp() + ')', (this.options.filterCase) ? '' : 'i'), '<span class="autocompleter-queried">$1</span>');
+	},
+
+	/**
+	 * addChoiceEvents
+	 *
+	 * Appends the needed event handlers for a choice-entry to the given element.
+	 *
+	 * @param		{Element} Choice entry
+	 * @return		{Element} Choice entry
+	 */
+	addChoiceEvents: function(el) {
+		return el.addEvents({
+			'mouseover': this.choiceOver.bind(this, [el]),
+			'click': this.choiceSelect.bind(this, [el])
+		});
+	}
+});
+
+var OverlayFix = new Class({
+
+	initialize: function(el) {
+		if (Browser.Engine.trident) {
+			this.element = $(el);
+			this.relative = this.element.getOffsetParent();
+			this.fix = new Element('iframe', {
+				'frameborder': '0',
+				'scrolling': 'no',
+				'src': 'javascript:false;',
+				'styles': {
+					'position': 'absolute',
+					'border': 'none',
+					'display': 'none',
+					'filter': 'progid:DXImageTransform.Microsoft.Alpha(opacity=0)'
+				}
+			}).inject(this.element, 'after');
+		}
+	},
+
+	show: function() {
+		if (this.fix) {
+			var coords = this.element.getCoordinates(this.relative);
+			delete coords.right;
+			delete coords.bottom;
+			this.fix.setStyles($extend(coords, {
+				'display': '',
+				'zIndex': (this.element.getStyle('zIndex') || 1) - 1
+			}));
+		}
+		return this;
+	},
+
+	hide: function() {
+		if (this.fix) this.fix.setStyle('display', 'none');
+		return this;
+	},
+
+	destroy: function() {
+		if (this.fix) this.fix = this.fix.destroy();
+	}
+
+});
+
+Element.implement({
+
+	getSelectedRange: function() {
+		if (!Browser.Engine.trident) return {start: this.selectionStart, end: this.selectionEnd};
+		var pos = {start: 0, end: 0};
+		var range = this.getDocument().selection.createRange();
+		if (!range || range.parentElement() != this) return pos;
+		var dup = range.duplicate();
+		if (this.type == 'text') {
+			pos.start = 0 - dup.moveStart('character', -100000);
+			pos.end = pos.start + range.text.length;
+		} else {
+			var value = this.value;
+			var offset = value.length - value.match(/[\n\r]*$/)[0].length;
+			dup.moveToElementText(this);
+			dup.setEndPoint('StartToEnd', range);
+			pos.end = offset - dup.text.length;
+			dup.setEndPoint('StartToStart', range);
+			pos.start = offset - dup.text.length;
+		}
+		return pos;
+	},
+
+	selectRange: function(start, end) {
+		if (Browser.Engine.trident) {
+			var diff = this.value.substr(start, end - start).replace(/\r/g, '').length;
+			start = this.value.substr(0, start).replace(/\r/g, '').length;
+			var range = this.createTextRange();
+			range.collapse(true);
+			range.moveEnd('character', start + diff);
+			range.moveStart('character', start);
+			range.select();
+		} else {
+			this.focus();
+			this.setSelectionRange(start, end);
+		}
+		return this;
+	}
+
+});
+
+/* compatibility */
+
+Autocompleter.Base = Autocompleter;