Skip to content

Instantly share code, notes, and snippets.

@csuwildcat

csuwildcat/Element.Event.js

Forked from ibolmo/Element.Event.js
Created August 19, 2011 17:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save csuwildcat/1157453 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save csuwildcat/1157453 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @ibolmo ibolmo revised this gist Aug 19, 2011. 2 changed files with 42 additions and 54 deletions.
    42 changes: 42 additions & 0 deletions Element.Event.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    /*<ltIE9>*/
    if (!window.addEventListener) (function(){

    var update = function(event){
    event.target.store('$change:last', {
    type: event.type,
    value: event.target.checked
    });
    };

    Element.Events._change = {
    base: 'change'
    };

    Element.Events.change = {
    base: 'click',
    condition: function(event){
    var target = event.target, type = target.type, last = target.retrieve('$change:last', {});
    if (type == 'text' || /textarea|select/.test(target.get('tag'))) return event.type == 'change';
    if (type == 'radio' && last.type != 'mousedown' && /up|down|left|right/.test(target.retrieve('$change:key', ''))) return true;
    return target.checked != last.value;
    },
    onAdd: function(fn){
    this.addEvents(this.retrieve('$change:events', {
    keydown: update,
    mousedown: update,
    _change: function(event){
    if (!/radio|checkbox/.test(event.target.type)) fn.call(this, event);
    },
    keyup: function(event) {
    event.target.store('$change:key', event.key);
    return event.code != 16 && event.key != 'tab';
    }
    }));
    },
    onRemove: function(){
    this.removeEvents(this.retrieve('$change:events')).eliminate('$change:events');
    }
    };

    })();
    /*</ltIE9>*/
    54 changes: 0 additions & 54 deletions Element.Events.change.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,54 +0,0 @@
    /*
    ---
    name: Element.Events.change
    description: Contains Element methods for normalizing change events across browsers for checkboxes and radios.
    license: MIT-style license.
    requires: Element.Event
    provides: Element.Events.change
    ...
    */

    (function(){

    var hasListener = !!window.addEventListener;

    var update = function(event){
    event.target.store('$change', {
    type: event.type,
    value: event.target.checked
    });
    };

    Element.Events.change = {
    base: 'click',
    condition: function(event){
    var target = event.target;
    if (target.get('type') != 'radio') return true;
    return (event.type == 'keyup') ? !target.checked : target.checked;
    },
    onAdd: function(fn){
    var type = this.get('type');
    if (type == 'checkbox' || type == 'radio') this.addEvents(this.retrieve('$change:events', {
    focus: update,
    keydown: update,
    keyup: function(event){
    var code = event.which || event.keyCode, element = event.target, value = element.retrieve('$change').value;
    if (!hasListener && value != null && value != element.checked){
    if ((type == 'checkbox' && code == 32) || (type == 'radio' && code >= 37 && code <= 39)) fn.call(this, event)
    }
    }
    });
    },
    onRemove: function(){
    this.removeEvents(this.retrieve('$change:events')).eliminate('$change:events');
    }
    };


    })();
  2. @ibolmo ibolmo renamed this gist Aug 19, 2011. 1 changed file with 9 additions and 12 deletions.
    21 changes: 9 additions & 12 deletions Element.Event.change.js → Element.Events.change.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,15 +1,15 @@
    /*
    ---
    name: Element.Event.Change
    name: Element.Events.change
    description: Contains Element methods for normalizing change events across browsers.
    description: Contains Element methods for normalizing change events across browsers for checkboxes and radios.
    license: MIT-style license.
    requires: [Element, Event]
    requires: Element.Event
    provides: Element.Event.Change
    provides: Element.Events.change
    ...
    */
    @@ -25,12 +25,6 @@ var update = function(event){
    });
    };

    var hasChanged = function(element, code){
    var value = element.retrieve('$change').value;
    if (hasListener || value == null || value == element.checked) return false;
    return (type == 'radio') ? (code >= 37 && code <= 39) : (key == 'space');
    };

    Element.Events.change = {
    base: 'click',
    condition: function(event){
    @@ -44,7 +38,10 @@ Element.Events.change = {
    focus: update,
    keydown: update,
    keyup: function(event){
    if (hasChanged(event.target, event.which || event.keyCode)) fn.call(this, event);
    var code = event.which || event.keyCode, element = event.target, value = element.retrieve('$change').value;
    if (!hasListener && value != null && value != element.checked){
    if ((type == 'checkbox' && code == 32) || (type == 'radio' && code >= 37 && code <= 39)) fn.call(this, event)
    }
    }
    });
    },
    @@ -54,4 +51,4 @@ Element.Events.change = {
    };


    })();
    })();
  3. @ibolmo ibolmo revised this gist Aug 19, 2011. 1 changed file with 22 additions and 33 deletions.
    55 changes: 22 additions & 33 deletions Element.Event.change.js
    View file
    Original file line number Diff line number Diff line change
    @@ -16,53 +16,42 @@ provides: Element.Event.Change

    (function(){

    var hasListener = !!window.addEventListener

    var getValue = function(element){
    var type = element.get('type');
    return element[type == 'radio' || type == 'checkbox' ? 'checked' : 'value'];
    }
    var hasListener = !!window.addEventListener;

    var update = function(event){
    event.target.store('$change', {
    type: event.type,
    value: getValue(event.target)
    value: event.target.checked
    });
    };

    var hasChanged = function(event){
    var target = event.target, value = target.retrieve('$change').value;
    if (value == null || value == getValue(target)) return false;
    if (target.get('tag') == 'select') return true;
    if (!hasListener) switch(event.key){
    case 'up': case 'down': case 'left': case 'right': return target.get('type') == 'radio';
    case 'space': return target.get('type') == 'checkbox';
    }
    }
    var hasChanged = function(element, code){
    var value = element.retrieve('$change').value;
    if (hasListener || value == null || value == element.checked) return false;
    return (type == 'radio') ? (code >= 37 && code <= 39) : (key == 'space');
    };

    Element.Events.change = {
    base: function(){
    var type = this.get('type');
    return (!hasListener && (type == 'checkbox' || type == 'radio')) ? 'click' : 'change';
    },
    base: 'click',
    condition: function(event){
    var target = event.target;
    if (hasListener && event.type == 'change' && target.get('tag') == 'select' && target.retrieve('$change').type == 'keydown') return false;
    return target.get('type') == 'radio' ? (event.type == 'keyup' ? !target.checked : target.checked) : true;
    if (target.get('type') != 'radio') return true;
    return (event.type == 'keyup') ? !target.checked : target.checked;
    },
    onAdd: function(fn){
    var events = {
    keyup: function(event){
    if (hasChanged(event)) fn.call(this, event);
    },
    var type = this.get('type');
    if (type == 'checkbox' || type == 'radio') this.addEvents(this.retrieve('$change:events', {
    focus: update,
    keydown: update
    };
    this.store('$changeEvents', events).addEvents(events);
    keydown: update,
    keyup: function(event){
    if (hasChanged(event.target, event.which || event.keyCode)) fn.call(this, event);
    }
    });
    },
    onRemove: function(fn){
    this.removeEvents(this.retrieve('$changeEvents')).eliminate('$changeEvents');
    onRemove: function(){
    this.removeEvents(this.retrieve('$change:events')).eliminate('$change:events');
    }
    }
    };


    })();
    })();
  4. @ibolmo ibolmo revised this gist Aug 15, 2011. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions Element.Event.change.js
    View file
    Original file line number Diff line number Diff line change
    @@ -23,7 +23,7 @@ var getValue = function(element){
    return element[type == 'radio' || type == 'checkbox' ? 'checked' : 'value'];
    }

    var storeChange = function(event){
    var update = function(event){
    event.target.store('$change', {
    type: event.type,
    value: getValue(event.target)
    @@ -55,8 +55,8 @@ Element.Events.change = {
    keyup: function(event){
    if (hasChanged(event)) fn.call(this, event);
    },
    focus: storeChange,
    keydown: storeChange
    focus: update,
    keydown: update
    };
    this.store('$changeEvents', events).addEvents(events);
    },
  5. @ibolmo ibolmo revised this gist Aug 15, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Element.Event.change.js
    View file
    Original file line number Diff line number Diff line change
    @@ -16,7 +16,7 @@ provides: Element.Event.Change

    (function(){

    var hasListener = window.addEventListener;
    var hasListener = !!window.addEventListener

    var getValue = function(element){
    var type = element.get('type');
  6. @ibolmo ibolmo revised this gist Aug 15, 2011. 1 changed file with 10 additions and 17 deletions.
    27 changes: 10 additions & 17 deletions Element.Event.change.js
    View file
    Original file line number Diff line number Diff line change
    @@ -17,24 +17,22 @@ provides: Element.Event.Change
    (function(){

    var hasListener = window.addEventListener;

    var getValue = function(element){
    var type = element.get('type');
    return element[type == 'radio' || type == 'checkbox' ? 'checked' : 'value'];
    }

    var storeChange = function(event){
    event.target.store('$change', {
    type: event.type,
    value: getValue(event.target)
    });
    };
    var hasChanged = function(element){
    var value = element.retrieve('$change').value;
    return (value != null && value != getValue(element));
    };

    var keychange = function(event){
    var target = event.target;
    if (!hasChanged(target)) return false;
    var hasChanged = function(event){
    var target = event.target, value = target.retrieve('$change').value;
    if (value == null || value == getValue(target)) return false;
    if (target.get('tag') == 'select') return true;
    if (!hasListener) switch(event.key){
    case 'up': case 'down': case 'left': case 'right': return target.get('type') == 'radio';
    @@ -53,22 +51,17 @@ Element.Events.change = {
    return target.get('type') == 'radio' ? (event.type == 'keyup' ? !target.checked : target.checked) : true;
    },
    onAdd: function(fn){
    this.addEvents({
    var events = {
    keyup: function(event){
    if (keychange(event)) fn.call(this, event);
    if (hasChanged(event)) fn.call(this, event);
    },
    focus: storeChange,
    keydown: storeChange
    });
    };
    this.store('$changeEvents', events).addEvents(events);
    },
    onRemove: function(fn){
    this.removeEvents({
    keyup: function(event){
    if (keychange(event)) fn.call(this, event);
    },
    focus: storeChange,
    keydown: storeChange
    });
    this.removeEvents(this.retrieve('$changeEvents')).eliminate('$changeEvents');
    }
    }

  7. @ibolmo ibolmo revised this gist Aug 15, 2011. 1 changed file with 43 additions and 5 deletions.
    48 changes: 43 additions & 5 deletions Element.Event.change.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,12 +1,46 @@
    var hasChanged = function(event){
    /*
    ---
    name: Element.Event.Change
    description: Contains Element methods for normalizing change events across browsers.
    license: MIT-style license.
    requires: [Element, Event]
    provides: Element.Event.Change
    ...
    */

    (function(){

    var hasListener = window.addEventListener;
    var getValue = function(element){
    var type = element.get('type');
    return element[type == 'radio' || type == 'checkbox' ? 'checked' : 'value'];
    }
    var storeChange = function(event){
    event.target.store('$change', {
    type: event.type,
    value: getValue(event.target)
    });
    };
    var hasChanged = function(element){
    var value = element.retrieve('$change').value;
    return (value != null && value != getValue(element));
    };

    var keychange = function(event){
    var target = event.target;
    if (!hasChanged(target)) return false;
    if (target.get('tag') == 'select') return true;
    if (!hasListener) switch(event.key){
    case 'up': case 'down': case 'left': case 'right': return target.get('type') == 'radio';
    case 'space': return target.get('type') == 'checkbox';
    }
    };
    }
    }

    Element.Events.change = {
    base: function(){
    @@ -20,14 +54,18 @@ Element.Events.change = {
    },
    onAdd: function(fn){
    this.addEvents({
    keyup: hasChanged,
    keyup: function(event){
    if (keychange(event)) fn.call(this, event);
    },
    focus: storeChange,
    keydown: storeChange
    });
    },
    onRemove: function(fn){
    this.removeEvents({
    keyup: hasChanged,
    keyup: function(event){
    if (keychange(event)) fn.call(this, event);
    },
    focus: storeChange,
    keydown: storeChange
    });
  8. @ibolmo ibolmo created this gist Aug 15, 2011.
    37 changes: 37 additions & 0 deletions Element.Event.change.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    var hasChanged = function(event){
    var target = event.target;
    if (!hasChanged(target)) return false;
    if (target.get('tag') == 'select') return true;
    if (!hasListener) switch(event.key){
    case 'up': case 'down': case 'left': case 'right': return target.get('type') == 'radio';
    case 'space': return target.get('type') == 'checkbox';
    }
    };

    Element.Events.change = {
    base: function(){
    var type = this.get('type');
    return (!hasListener && (type == 'checkbox' || type == 'radio')) ? 'click' : 'change';
    },
    condition: function(event){
    var target = event.target;
    if (hasListener && event.type == 'change' && target.get('tag') == 'select' && target.retrieve('$change').type == 'keydown') return false;
    return target.get('type') == 'radio' ? (event.type == 'keyup' ? !target.checked : target.checked) : true;
    },
    onAdd: function(fn){
    this.addEvents({
    keyup: hasChanged,
    focus: storeChange,
    keydown: storeChange
    });
    },
    onRemove: function(fn){
    this.removeEvents({
    keyup: hasChanged,
    focus: storeChange,
    keydown: storeChange
    });
    }
    }

    })();