view/js/input_assist.js


// Copyright (c) 2009 Katsuhisa Yuasa <berupon [at] gmail.com>
// License http://www.opensource.org/licenses/mit-license.html
//
// Inspired by suggest.js http://www.enjoyxstudy.com/javascript/suggest/
//

InputAssist = function (elem) {
        this.init.apply(this, arguments);
};

InputAssist.prototype = {
        
        init : function (elem) {
                this.elem = elem;
                this.listElem = null;
                this.oldValue = elem.value;
                this.timer = null;
                this.interval = 300;
                this.listClassName = "assist_list";
                this.listItemClassName = "item";
                this.activeListItemClassName = "active";
                this.listActiveIndex = -1;
                this.dataList = new Array();
                this.matchedDataList = new Array();
                
                elem.observe("focus", this.onFocus.bind(this));
                elem.observe("blur", this.onBlur.bind(this));
                
                elem.observe("keydown", this.onKeyDown.bind(this));
                var keyevent = (Prototype.Browser.Opera || Prototype.Browser.Gecko) ? 'keypress' : 'keyup';
                elem.observe(keyevent, this.onKeyUp.bind(this));
                document.observe('mousemove', this.onMouseMove.bind(this));
        },
        
        onFocus : function (e) {
                var elem = Event.element(e);
                this.createListElem();
        },
        
        onBlur : function (e) {
                var matched = false;
                if (this.matchedDataList.length) {
                        for (var i=0; i<this.matchedDataList.length; ++i) {
                                if (this.matchData(this.matchedDataList[i]) == 1) {
                                        matched = true;
                                        this.selectData(i);
                                        break;
                                }
                        }
                }
                if (!matched) {
                        this.setData(null);
                }
                this.hideList();
                if (this.timer) {
                        clearTimeout(this.timer);
                        this.timer = null;
                }
        },
        
        onKeyDown : function (e) {
                switch (e.keyCode) {
                case 9: // tab
                        if (1
                                && this.matchedDataList.length
                                && this.listActiveIndex >= 0
                                && this.listActiveIndex < this.matchedDataList.length
                        ) {
                                this.selectData(this.listActiveIndex);
                                break;
                        }
                case 13: // enter
                        if (1
                                && this.matchedDataList.length
                                && this.listActiveIndex >= 0
                                && this.listActiveIndex < this.matchedDataList.length
                        ) {
                                this.selectData(this.listActiveIndex, true);
                                Event.stop(e);
                                break;
                        }
                        break;
                }
        },
        
        selectData : function (idx, bFocus) {
                setTimeout(
                        function () {
                                this.hideList();
                                this.setData(this.matchedDataList[idx]);
                                this.oldValue = this.elem.value;
                                this.listActiveIndex = -1;
                                if (bFocus) {
                                        this.elem.focus();
                                }
                        }.bind(this),
                        10
                );
        },
        
        onKeyUp : function (e) {
                if (this.timer) {
                        switch (e.keyCode) {
                        case 16: // shift
                        case 17: // ctrl
                        case 18: // alt
                                break;
                        default:
                                clearTimeout(this.timer);
                        }
                }
                switch (e.keyCode) {
                case 37: // left
                        break;
                case 38: // up
                        this.shiftItemFocus(-1);
                        break;
                case 39: // right
                        break;
                case 40: // down
                        if (e.altKey) {
                                this.oldValue = "";
                                this.onTimer();
                        }else {
                                this.shiftItemFocus(1);
                        }
                        break;
                case 27: // esc
                        this.hideList();
                        break;
                case 13: // enter
                case 9: // tab
                case 16: // shift
                case 17: // ctrl
                case 18: // alt
                        break;
                case 8: // backspace
                case 46: // delete
                        if (this.elem.value == "") {
                                this.onTimer();
                                break;
                        }
                default:
                        if (!e.altKey && !e.ctrlKey) {
                                if (this.oldValue == "") {
                                        this.timer = setTimeout(this.onTimer.bind(this), this.interval/10);
                                }else {
                                        this.timer = setTimeout(this.onTimer.bind(this), this.interval);
                                }
                        }
                        break;
                }
        },
        
        onMouseMove : function (e) {
                if (!this.listElem) {
                        return;
                }
                var nodes = this.listElem.childNodes;
                if (nodes.length == 0) {
                        return;
                }
                var x = Event.pointerX(e);
                var y = Event.pointerY(e);
                var listItems = this.listElem.childNodes;
                for (var i=0; i<listItems.length; ++i) {
                        var elem = listItems[i];
                        if (Position.within(elem, x, y)) {
                                this.moveItemFocus(i);
                                break;
                        }
                }

        },
        
        shiftItemFocus : function (shift) {
                if (!Element.visible(this.listElem)) {
                        return;
                }
                var nodes = this.listElem.childNodes;
                if (nodes.length == 0) {
                        return;
                }
                var newActiveIndex = -1;
                if (this.listActiveIndex == -1) {
                        if (shift < 0) {
                                newActiveIndex = nodes.length - 1;
                        }else {
                                newActiveIndex = 0;
                        }
                }else {
                        newActiveIndex = this.listActiveIndex + shift;
                        if (newActiveIndex >= nodes.length) {
                                newActiveIndex = -1;
                        }
                }
                this.moveItemFocus(newActiveIndex);
        },
        
        moveItemFocus : function (newActiveIndex) {
                if (this.listActiveIndex != newActiveIndex) {
                        var nodes = this.listElem.childNodes;
                        if (this.listActiveIndex != -1 && this.listActiveIndex < nodes.length) {
                                Element.removeClassName(nodes[this.listActiveIndex], this.activeListItemClassName);
                        }
                        if (newActiveIndex != -1) {
                                if (newActiveIndex < 0) {
                                        alert(1);
                                }
                                Element.addClassName(nodes[newActiveIndex], this.activeListItemClassName);
                        }
                        this.listActiveIndex = newActiveIndex;
                }
        },
        
        onTimer : function () {
                if (this.elem.value.length == 0) {
                        this.hideList();
                        return;
                }
                if (this.elem != document.activeElement) {
                        return;
                }
                if (this.elem.value == this.oldValue) {
                        return;
                }
                this.setList();
                this.oldValue = this.elem.value;
                this.timer = setTimeout(this.onTimer.bind(this), this.interval);
        },
        
        onMouseDown : function(e) {
                var x = Event.pointerX(e);
                var y = Event.pointerY(e);
                var listItems = this.listElem.childNodes;
                for (var i=0; i<listItems.length; ++i) {
                        var elem = listItems[i];
                        if (Position.within(elem, x, y)) {
                                this.selectData(i, true);
                                break;
                        }
                }
        },
        
        createListElem : function () {
                if (this.listElem) {
                        return;
                }
                var listElem = document.createElement('DIV');
                listElem.className = this.listClassName;
                Element.hide(listElem);
                Event.observe(listElem, "mousedown", this.onMouseDown.bind(this));
                this.listElem = listElem;
                this.elem.parentNode.insertBefore(listElem, this.elem.nextSibling);
        },
        
        addListElemItem : function (html) {
                var listItem = document.createElement('DIV');
                listItem.className = this.listItemClassName;
                listItem.innerHTML = html;
                this.listElem.appendChild(listItem);
        },
        
        setList : function () {
                if (!this.listElem) {
                        return;
                }
                if (this.listElem.childNodes) {
                        for (var i=this.listElem.childNodes.length-1; i>=0; --i) {
                                this.listElem.removeChild(this.listElem.childNodes[i]);
                        } 
                }
                this.dataList = this.provideDataList();
                this.matchedDataList = new Array();
                var results = new Array();
                for (var i=0; i<this.dataList.length; ++i) {
                        var data = this.dataList[i];
                        var ret = {html:''};
                        if (this.matchData(data, ret)) {
                                this.matchedDataList.push(data);
                                results.push(ret.html);
                        }
                }
                if (results.length != 0) {
                        for (var i=0; i<results.length; ++i) {
                                this.addListElemItem(results[i]);
                        }
                        var style = this.listElem.style;
                        var offset = Element.cumulativeOffset(this.elem);
                        style.left = offset[0] + "px";
                        style.top = (offset[1] + this.elem.offsetHeight) + "px";
                        style.minWidth = this.elem.offsetWidth + "px";
                        Element.show(this.listElem);
                }else {
                        this.hideList();
                }
        },
        
        hideList : function () {
                if (!this.listElem) {
                        return;
                }
                this.oldValue = this.elem.value;
                this.listActiveIndex = -1;
                Element.hide(this.listElem);
        }
        
};
