-
-
Save davidbehler/91300492f82f2f399001 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var LayrList = Class.create({ | |
initialize: function() { | |
this.list = new Array(); | |
}, | |
add: function (controllerInput, value, operator, element, attributes) { | |
if(typeof this.list[controllerInput] == 'undefined') { | |
this.list[controllerInput] = new Array(); | |
this.setupObserver($(controllerInput)); | |
} | |
this.list[controllerInput].push(new Layr(controllerInput, value, operator, element, attributes)); | |
this.list[controllerInput].last().check(); | |
}, | |
setupObserver : function(elm) { | |
Event.observe(elm, 'change', this.check.bindAsEventListener(this), false); | |
}, | |
check: function(ev) { | |
eventElementId = Event.findElement(ev).id; | |
this.list[eventElementId].each(function(element) { | |
element.reset(); | |
}); | |
this.list[eventElementId].each(function(element) { | |
element.check(); | |
}); | |
} | |
}); | |
var Layr = Class.create({ | |
initialize: function(controllerInput, value, operator, element, attributes) { | |
this.controllerInput = $(controllerInput); | |
this.value = value; | |
this.operator = operator; | |
this.element = $(element); | |
this.attributeList = attributes.split(" | "); | |
this.elementClassList = this.element.classNames(); | |
this.customClasses = new Array(); | |
}, | |
check: function () { | |
valueToCheck = this.controllerInput.getValue(); | |
isMatch = false; | |
switch (this.operator){ | |
case "=": | |
if(valueToCheck == this.value) { | |
isMatch = true; | |
} | |
break; | |
case "!=": | |
if(valueToCheck != this.value) { | |
isMatch = true; | |
} | |
break; | |
default: | |
break; | |
} | |
if(isMatch) { | |
this.setAttributes(); | |
} | |
}, | |
setAttributes: function () | |
{ | |
for (var index = 0; index < this.attributeList.length; ++index) { | |
var attribute = this.attributeList[index]; | |
switch (attribute) { | |
case "disabled": | |
if(typeof this.element.disable == 'function') { | |
this.element.disable(); | |
} | |
this.element.addClassName(attribute); | |
this.customClasses.push(attribute); | |
break; | |
case "hidden": | |
this.element.hide(); | |
break; | |
default: | |
this.element.addClassName(attribute); | |
this.customClasses.push(attribute); | |
break; | |
} | |
} | |
}, | |
reset: function () { | |
if(this.customClasses.length > 0) { | |
for (var index = 0; index < this.customClasses.length; ++index) { | |
var element = this.customClasses[index]; | |
if(typeof element == 'string') { | |
this.element.removeClassName(element); | |
} | |
} | |
} | |
this.customClasses = new Array(); | |
if(typeof this.element.enable == 'function') { | |
this.element.enable(); | |
} | |
this.element.show(); | |
} | |
}); | |
var list = new LayrList(); | |
/** | |
* list.add(controllerInput, value, operator, element, attributes) | |
* | |
* controllerInput: Id of the input whose value should be checked | |
* value: The value that must match the controllerInput's value to have an effect on the elemet | |
* element: Element that's affected by changes to the controllerInput | |
* attributes: Attributes (disabled, hidden or class names seperated by ' | ' that should be set if the values match | |
* | |
* In this example the following would happen: | |
* Each time the 'change' event is invoked for the input with the id 'controllerInput', the class checks wether its value | |
* is not equals 3 and if that is so, then the element 'test' is hidden, if its value equals 1, then the class 'class_xy' is added to the element 'test', | |
* if its value equals 2, then the element 'test' is disabled | |
* If the condition is not matched, the element is set back to enabled and visible and all added classes are removed again | |
* | |
* Available operators are '=' and '!=' | |
* | |
**/ | |
Event.observe(window, 'load',function(){ list.add('controllerInput', '3', '!=', 'test', 'hidden'); }, false); | |
Event.observe(window, 'load',function(){ list.add('controllerInput', '1', '=', 'test', 'class_xy'); }, false); | |
Event.observe(window, 'load',function(){ list.add('controllerInput', '2', '=', 'test', 'disabled'); }, false); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment