SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot Biju's Avatar
    Join Date
    Sep 2004
    Location
    India
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can anyone explain this code?

    var FacebookList = new Class({

    Extends: TextboxList,

    options: {
    onBoxDispose: function(item) { this.autoFeed(item.retrieve('text')); },
    onInputFocus: function() { this.autoShow(); },
    onInputBlur: function(el) {
    this.lastinput = el;
    this.blurhide = this.autoHide.delay(200, this);
    },
    autocomplete: {
    'opacity': 0.8,
    'maxresults': 10,
    'minchars': 1
    }
    },

    initialize: function(element, autoholder, options) {
    arguments.callee.parent(element, options);
    this.data = [];
    this.autoholder = $(autoholder).set('opacity', this.options.autocomplete.opacity);
    this.autoresults = this.autoholder.getElement('ul');
    var children = this.autoresults.getElements('li');
    children.each(function(el) { this.add(el.innerHTML); }, this);
    },

    autoShow: function(search) {
    this.autoholder.setStyle('display', 'block');
    this.autoholder.getChildren().setStyle('display', 'none');
    if(! search || ! search.trim() || (! search.length || search.length < this.options.autocomplete.minchars))
    {
    this.autoholder.getElement('.default').setStyle('display', 'block');
    this.resultsshown = false;
    } else {
    this.resultsshown = true;
    this.autoresults.setStyle('display', 'block').empty();
    this.data.filter(function(str) { return str ? str.test(search, 'i') : false; }).each(function(result, ti) {
    if(ti >= this.options.autocomplete.maxresults) return;
    var that = this;
    var el = new Element('li').addEvents({
    'mouseenter': function() { that.autoFocus(this); },
    'click': function(e) {
    new Event(e).stop();
    that.autoAdd(this);
    }
    }).set('html', this.autoHighlight(result, search)).inject(this.autoresults);
    el.store('result', result);
    if(ti == 0) this.autoFocus(el);
    }, this);
    }
    return this;
    },

    autoHighlight: function(html, highlight) {
    return html.replace(new RegExp(highlight, 'gi'), function(match) {
    return '<em>' + match + '</em>';
    });
    },

    autoHide: function() {
    this.resultsshown = false;
    this.autoholder.setStyle('display', 'none');
    return this;
    },

    autoFocus: function(el) {
    if(! el) return;
    if(this.autocurrent) this.autocurrent.removeClass('auto-focus');
    this.autocurrent = el.addClass('auto-focus');
    return this;
    },

    autoMove: function(direction) {
    if(!this.resultsshown) return;
    this.autoFocus(this.autocurrent['get' + (direction == 'up' ? 'Previous' : 'Next')]());
    return this;
    },

    autoFeed: function(text) {
    this.data.include(text);
    return this;
    },

    autoAdd: function(el) {
    if(!el || ! el.retrieve('result')) return;
    this.add(el.retrieve('result'));
    delete this.data[this.data.indexOf(el.retrieve('result'))];
    this.autoHide();
    var input = this.lastinput || this.current.retrieve('input');
    input.set('value', '').focus();
    return this;
    },

    createInput: function(options) {
    var li = arguments.callee.parent(options);
    var input = li.retrieve('input');
    input.addEvents({
    'keydown': function(e) {
    this.dosearch = false;
    switch(new Event(e).code) {
    case Event.Keys.up: return this.autoMove('up');
    case Event.Keys.down: return this.autoMove('down');
    case Event.Keys.enter:
    if(! this.autocurrent) break;
    this.autoAdd(this.autocurrent);
    this.autocurrent = false;
    this.autoenter = true;
    break;
    case Event.Keys.esc:
    this.autoHide();
    if(this.current && this.current.retrieve('input'))
    this.current.retrieve('input').set('value', '');
    break;
    default: this.dosearch = true;
    }
    }.bind(this),
    'keyup': function() {
    if(this.dosearch) this.autoShow(input.value);
    }.bind(this)
    });
    input.addEvent(Browser.Engine.trident ? 'keydown' : 'keypress', function(e) {
    if(this.autoenter) new Event(e).stop()
    this.autoenter = false;
    }.bind(this));
    return li;
    },

    createBox: function(text, options) {
    var li = arguments.callee.parent(text, options);
    return li.addEvents({
    'mouseenter': function() { this.addClass('bit-hover') },
    'mouseleave': function() { this.removeClass('bit-hover') }
    }).adopt(new Element('a', {
    'href': '#',
    'class': 'closebutton',
    'events': {
    'click': function(e) {
    new Event(e).stop();
    if(! this.current) this.focus(this.maininput);
    this.dispose(li);
    }.bind(this)
    }
    })).store('text', text);
    }

    });

    window.addEvent('domready', function() {
    // init
    var tlist2 = new FacebookList('facebook-demo', 'facebook-auto');

    // fetch and feed
    new Request.JSON({'url': 'json.html', 'onComplete': function(j) {
    j.each(tlist2.autoFeed, tlist2);
    }}).send();
    });
    Can anyone explain this code?
    I suggest everyone to upgrade to Windows Vista.

  2. #2
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My guess is a new class gets declared using a huge object to provide lots of parameters.
    You should probably check the source where you downloaded this script.

  3. #3
    SitePoint Zealot Biju's Avatar
    Join Date
    Sep 2004
    Location
    India
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ize View Post
    My guess is a new class gets declared using a huge object to provide lots of parameters.
    You should probably check the source where you downloaded this script.
    There is no documentation for the code. I need to understand the code before i tell my friends to use it.
    var FacebookList = new Class({

    Extends: TextboxList,

    options: {
    onBoxDispose: function(item) { this.autoFeed(item.retrieve('text')); },
    onInputFocus: function() { this.autoShow(); },
    onInputBlur: function(el) {
    this.lastinput = el;
    this.blurhide = this.autoHide.delay(200, this);
    },
    autocomplete: {
    'opacity': 0.8,
    'maxresults': 10,
    'minchars': 1
    }
    },
    What does this piece of code tell
    I suggest everyone to upgrade to Windows Vista.

  4. #4
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tell your friends not to use it. It's JavaScript 2.0, which many browsers do not yet support.

  5. #5
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Its the Mootools implementation of a facebook style list:

    Documentation here: http://devthought.com/textboxlist-fa...ynamic-inputs/

    Code:
    var FacebookList = new Class({ /* new class */
    
    Extends: TextboxList, 
    /* extends the existing class called TextboxList
    	** so it can use its functions */
    
    options: {
    	/* options - what options the class can take or be given as parameters */
    onBoxDispose: function(item) { this.autoFeed(item.retrieve('text')); },
    	/* custom function - onBoxDispose means it is more than likely
    		** to be a mootools implementation */ 
    onInputFocus: function() { this.autoShow(); },
    	/* onInputFocus
    		** When the <input> has the cursors focus */ 
    
    	/* onIputBlur - when the cursor moves away from the input the function is triggered
    		** In this case an autoHide with blur effect */
    onInputBlur: function(el) {
    	this.lastinput = el;
    	this.blurhide = this.autoHide.delay(200, this);
    },
    	autocomplete: {
    	'opacity': 0.8,
    	'maxresults': 10,
    	'minchars': 1
    	}
    },
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  6. #6
    We're from teh basements.
    Join Date
    Apr 2007
    Posts
    1,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by spikeZ View Post
    Its the Mootools implementation of a facebook style list....
    Ah, yet another framework. I should've known.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •