diff --git a/Source/TextboxList.Autocomplete.js b/Source/TextboxList.Autocomplete.js index edb6ed8..1d6e764 100644 --- a/Source/TextboxList.Autocomplete.js +++ b/Source/TextboxList.Autocomplete.js @@ -35,7 +35,8 @@ TextboxList.Autocomplete = new Class({ loadPlaceholder: 'Please wait...' }, method: 'standard', - placeholder: 'Type to receive suggestions' + placeholder: 'Type to See Suggestions', + keys: {up: 'up', down: 'down', enter: 'enter'} }, initialize: function(textboxlist, options){ @@ -194,20 +195,21 @@ TextboxList.Autocomplete = new Class({ }, navigate: function(ev){ - switch (ev.code){ - case Event.Keys.up: + switch (ev.key){ + case this.options.keys.up: ev.stop(); (!this.options.onlyFromValues && this.current && this.current == this.list.getFirst()) ? this.blur() : this.focusRelative('previous'); break; - case Event.Keys.down: + case this.options.keys.down: ev.stop(); this.current ? this.focusRelative('next') : this.focusFirst(); break; - case Event.Keys.enter: + case this.options.keys.enter: ev.stop(); - if (this.current) this.addCurrent(); - else if (!this.options.onlyFromValues){ - var value = this.currentInput.getValue(); + if (this.current) { + this.addCurrent(); + } else if (!this.options.onlyFromValues) { + var value = this.currentInput.getValue(); var b = this.textboxlist.create('box', value); if (b){ b.inject($(this.currentInput), 'before'); @@ -241,4 +243,4 @@ TextboxList.Autocomplete.Methods = { }; -})(); \ No newline at end of file +})(); diff --git a/Source/TextboxList.js b/Source/TextboxList.js index 5f69556..854a6d9 100644 --- a/Source/TextboxList.js +++ b/Source/TextboxList.js @@ -20,39 +20,40 @@ var TextboxList = new Class({ plugins: [], options: {/* - onFocus: $empty, - onBlur: $empty, - onBitFocus: $empty, - onBitBlur: $empty, - onBitAdd: $empty, - onBitRemove: $empty, - onBitBoxFocus: $empty, - onBitBoxBlur: $empty, - onBitBoxAdd: $empty, - onBitBoxRemove: $empty, - onBitEditableFocus: $empty, - onBitEditableBlue: $empty, - onBitEditableAdd: $empty, - onBitEditableRemove: $empty,*/ - prefix: 'textboxlist', - max: null, - unique: false, - uniqueInsensitive: true, - endEditableBit: true, - startEditableBit: true, - hideEditableBits: true, - inBetweenEditableBits: true, - keys: {previous: Event.Keys.left, next: Event.Keys.right}, - bitsOptions: {editable: {}, box: {}}, - plugins: {}, - check: function(s){ return s.clean().replace(/,/g, '') != ''; }, - encode: function(o){ - return o.map(function(v){ - v = ($chk(v[0]) ? v[0] : v[1]); - return $chk(v) ? v : null; - }).clean().join(','); - }, - decode: function(o){ return o.split(','); } + onFocus: $empty, + onBlur: $empty, + onBitFocus: $empty, + onBitBlur: $empty, + onBitAdd: $empty, + onBitRemove: $empty, + onBitBoxFocus: $empty, + onBitBoxBlur: $empty, + onBitBoxAdd: $empty, + onBitBoxRemove: $empty, + onBitEditableFocus: $empty, + onBitEditableBlue: $empty, + onBitEditableAdd: $empty, + onBitEditableRemove: $empty,*/ + prefix: 'textboxlist', + max: null, + unique: false, + uniqueInsensitive: true, + endEditableBit: true, + startEditableBit: true, + hideEditableBits: true, + inBetweenEditableBits: true, + inputPlaceholder: null, + keys: {previous: 'left', next: 'right', delete: 'delete', backspace: 'backspace'}, + bitsOptions: {editable: {}, box: {}}, +plugins: {}, + check: function(s){ return s.clean().replace(/,/g, '') != ''; }, + encode: function(o){ + return o.map(function(v){ + v = ($chk(v[0]) ? v[0] : v[1]); + return $chk(v) ? v : null; + }).clean().join(','); + }, + decode: function(o){ return o.split(','); } }, initialize: function(element, options){ @@ -62,6 +63,13 @@ var TextboxList = new Class({ this.container.addEvent('click', function(e){ if ((e.target == this.list || e.target == this.container) && (!this.focused || $(this.current) != this.list.getLast())) this.focusLast(); }.bind(this)); + if(this.options.inputPlaceholder) { + this.inputPlaceholder = new Element('div', {'class': this.options.prefix + '-placeholder'}).inject(this.container, 'top'); + this.inputPlaceholder.set('html', this.options.inputPlaceholder); + this.inputPlaceholder.addEvent('click', function(e){ + this.focusLast(); + }.bind(this)); + } this.list = new Element('ul', {'class': this.options.prefix + '-bits'}).inject(this.container); for (var name in this.options.plugins) this.enablePlugin(name, this.options.plugins[name]); ['check', 'encode', 'decode'].each(function(i){ this.options[i] = this.options[i].bind(this); }, this); @@ -93,11 +101,12 @@ var TextboxList = new Class({ var value = this.current.getValue()[1]; var special = ['shift', 'alt', 'meta', 'ctrl'].some(function(e){ return ev[e]; }); var custom = special || (this.current.is('editable') && this.current.isSelected()); - switch (ev.code){ - case Event.Keys.backspace: - if (this.current.is('box')){ + switch (ev.key){ + case this.options.keys.delete: + case this.options.keys.backspace: + if (this.current.is('box')){ ev.stop(); - return this.current.remove(); + return this.current.remove(); } case this.options.keys.previous: if (this.current.is('box') || ((caret == 0 || !value.length) && !custom)){ @@ -105,12 +114,7 @@ var TextboxList = new Class({ this.focusRelative('previous'); } break; - case Event.Keys['delete']: - if (this.current.is('box')){ - ev.stop(); - return this.current.remove(); - } - case this.options.keys.next: + case this.options.keys.next: if (this.current.is('box') || (caret == value.length && !custom)){ ev.stop(); this.focusRelative('next'); @@ -143,6 +147,7 @@ var TextboxList = new Class({ this.focused = true; this.fireEvent('focus', bit); } + this.toggleInputPlaceholder(); }, onBlur: function(bit, all){ @@ -168,6 +173,7 @@ var TextboxList = new Class({ var prior = this.getBit($(bit).getPrevious()); if (prior && prior.is('editable')) prior.remove(); this.focusRelative('next', bit); + this.toggleInputPlaceholder(); }, focusRelative: function(dir, to){ @@ -186,6 +192,7 @@ var TextboxList = new Class({ if (! this.focused) return this; if (this.current) this.current.blur(); this.focused = false; + this.toggleInputPlaceholder(); return this.fireEvent('blur'); }, @@ -219,7 +226,12 @@ var TextboxList = new Class({ update: function(){ this.original.set('value', this.options.encode(this.getValues())); - } + }, + + toggleInputPlaceholder: function() { + if(!this.options.inputPlaceholder) return false; + this.inputPlaceholder.setStyle('display', (this.focused || this.original.get('value') != '') ? 'none' : 'block') + }, }); @@ -428,9 +440,9 @@ TextboxListBit.Box = new Class({ this.bit.addEvent('click', this.focus.bind(this)); if (this.options.deleteButton){ this.bit.addClass(this.typeprefix + '-deletable'); - this.close = new Element('a', {href: '#', 'class': this.typeprefix + '-deletebutton', events: {click: this.remove.bind(this)}}).inject(this.bit); + this.close = new Element('a', {href: 'javascript:void(0)', 'class': this.typeprefix + '-deletebutton', events: {click: this.remove.bind(this)}}).inject(this.bit); } this.bit.getChildren().addEvent('click', function(e){ e.stop(); }); } -}); \ No newline at end of file +});