N
niels.froehling
Hy;
I'm stucked in modifying events to make a multi-select select-input
being additive/subtractive only. Because I should offer a solution
similar to that select for DAUs (aka. MostIdioticUser) I have to
make something else (checkboxes?).
It's not that want to fiddle around with events, but it seemed to be
the
most simply-plug-in-working-no-change-html-php solution.
Here is a fragment (the select and the plug-in code, I guess it's
explanatory for people fimilar with events, and it's not production-
code, it's only trying, trying, trying, ...):
<select size="10" name="uniqueMember[]" multiple="multiple"
id="members">
<option>ABC</option>
<option>DEF</option>
<option>GHI</option>
<option>JKL</option>
<option>MNO</option>
<option>PQR</option>
</select>
<script type="text/javascript">
function cloneEventMouse(nevt, oevt) {
if (nevt.initMouseEvent)
nevt.initMouseEvent(
oevt.bubbles, // PRBool canBubbleArg
oevt.cancelable, // PRBool cancelableArg
oevt.view, // nsIDOMAbstractView viewArg
oevt.detail, // PRInt32 detailArg
oevt.screenX, // PRInt32 screenXArg
oevt.screenY, // PRInt32 screenYArg
oevt.clientX, // PRInt32 clientXArg
oevt.clientY, // PRInt32 clientYArg
oevt.ctrlKey, // PRBool ctrlKeyArg
oevt.altKey, // PRBool altKeyArg
oevt.shiftKey, // PRBool shiftKeyArg
oevt.metaKey, // PRBool metkeyArg
oevt.button, // PRUint16 buttonArg
oevt.relatedTarget // nsIDOMEventTarget relatedTargetArg
);
else
for (var key in oevt)
try {
nevt[key] = oevt[key];
} catch(e) {}
nevt.cloned = true;
}
function modifyEvent(receiver, oevt, templ) {
var nevt = null;
var typeEvent = null;
var cloneEvent = null;
/* determine type of event-cloning */
switch (oevt.type) {
case 'mousedown':
case 'mouseover':
case 'mouseout':
case 'mouseup':
typeEvent = "MouseEvents";
cloneEvent = cloneEventMouse;
break;
default:
return null;
}
/* get a template */
if (!templ)
templ = new Array();
/* clone infos into template */
for (var key in oevt)
if (typeof oevt[key] != 'function' )
if (typeof templ[key] == 'undefined')
// try {
templ[key] = oevt[key];
// } catch(e) {}
/* clone the event */
if (document.createEvent && (nevt =
document.createEvent(typeEvent))) {
cloneEvent(nevt, templ);
receiver.dispatchEvent(nevt);
}
else if (document.createEventObject && (nevt =
document.createEventObject())) {
cloneEvent(nevt, templ);
receiver.fireEvent("on" + oevt.type, nevt);
}
if (nevt) {
/* cancel the old event if possible */
// if (oevt.bubbles) {
if (oevt.stopPropagation)
oevt.stopPropagation();
oevt.cancelBubble = true; //}
// if (oevt.cancelable)
oevt.returnValue = false;
}
return nevt;
}
function tunnelEvent(obj, type, templ) {
if (obj.addEventListener)
obj.addEventListener(type,
function m(event) {
var cloned = (typeof event.cloned != 'undefined' &&
event.cloned);
/* modify if it's not allready */
if (!cloned)
modifyEvent(obj, event, templ);
return cloned;
}, true);
else
if (obj.attachEvent)
obj.attachEvent('on' + type,
function m(event) {
var cloned = (typeof event.cloned != 'undefined' &&
event.cloned);
/* modify if it's not allready */
if (!cloned) {
modifyEvent(obj, event, templ);
/* this is disgusting:
*
* reason to do it this way:
* - internet explorer doesn't cancel events for inouts
* - internet explorer rejects events for disabled inputs
* - fireEvent is synchronous, the new event occurs before the
old event
*
* so I do this
* - create and send the new event with enabled field,
everything works fine
* - disable the input for the old event, after the new has
been processed
* - reactivate the input after old event rejected
(setTimeout(0) seem to need longer)
*/
obj.disabled = true;
setTimeout(function ar() {
obj.disabled = false;
}, 0);
}
return cloned;
});
}
tunnelEvent(document.getElementById('members'), 'mousedown', {
'ctrlKey' : true });
</script>
Thanks for any suggestions
Niels
I'm stucked in modifying events to make a multi-select select-input
being additive/subtractive only. Because I should offer a solution
similar to that select for DAUs (aka. MostIdioticUser) I have to
make something else (checkboxes?).
It's not that want to fiddle around with events, but it seemed to be
the
most simply-plug-in-working-no-change-html-php solution.
Here is a fragment (the select and the plug-in code, I guess it's
explanatory for people fimilar with events, and it's not production-
code, it's only trying, trying, trying, ...):
<select size="10" name="uniqueMember[]" multiple="multiple"
id="members">
<option>ABC</option>
<option>DEF</option>
<option>GHI</option>
<option>JKL</option>
<option>MNO</option>
<option>PQR</option>
</select>
<script type="text/javascript">
function cloneEventMouse(nevt, oevt) {
if (nevt.initMouseEvent)
nevt.initMouseEvent(
oevt.bubbles, // PRBool canBubbleArg
oevt.cancelable, // PRBool cancelableArg
oevt.view, // nsIDOMAbstractView viewArg
oevt.detail, // PRInt32 detailArg
oevt.screenX, // PRInt32 screenXArg
oevt.screenY, // PRInt32 screenYArg
oevt.clientX, // PRInt32 clientXArg
oevt.clientY, // PRInt32 clientYArg
oevt.ctrlKey, // PRBool ctrlKeyArg
oevt.altKey, // PRBool altKeyArg
oevt.shiftKey, // PRBool shiftKeyArg
oevt.metaKey, // PRBool metkeyArg
oevt.button, // PRUint16 buttonArg
oevt.relatedTarget // nsIDOMEventTarget relatedTargetArg
);
else
for (var key in oevt)
try {
nevt[key] = oevt[key];
} catch(e) {}
nevt.cloned = true;
}
function modifyEvent(receiver, oevt, templ) {
var nevt = null;
var typeEvent = null;
var cloneEvent = null;
/* determine type of event-cloning */
switch (oevt.type) {
case 'mousedown':
case 'mouseover':
case 'mouseout':
case 'mouseup':
typeEvent = "MouseEvents";
cloneEvent = cloneEventMouse;
break;
default:
return null;
}
/* get a template */
if (!templ)
templ = new Array();
/* clone infos into template */
for (var key in oevt)
if (typeof oevt[key] != 'function' )
if (typeof templ[key] == 'undefined')
// try {
templ[key] = oevt[key];
// } catch(e) {}
/* clone the event */
if (document.createEvent && (nevt =
document.createEvent(typeEvent))) {
cloneEvent(nevt, templ);
receiver.dispatchEvent(nevt);
}
else if (document.createEventObject && (nevt =
document.createEventObject())) {
cloneEvent(nevt, templ);
receiver.fireEvent("on" + oevt.type, nevt);
}
if (nevt) {
/* cancel the old event if possible */
// if (oevt.bubbles) {
if (oevt.stopPropagation)
oevt.stopPropagation();
oevt.cancelBubble = true; //}
// if (oevt.cancelable)
oevt.returnValue = false;
}
return nevt;
}
function tunnelEvent(obj, type, templ) {
if (obj.addEventListener)
obj.addEventListener(type,
function m(event) {
var cloned = (typeof event.cloned != 'undefined' &&
event.cloned);
/* modify if it's not allready */
if (!cloned)
modifyEvent(obj, event, templ);
return cloned;
}, true);
else
if (obj.attachEvent)
obj.attachEvent('on' + type,
function m(event) {
var cloned = (typeof event.cloned != 'undefined' &&
event.cloned);
/* modify if it's not allready */
if (!cloned) {
modifyEvent(obj, event, templ);
/* this is disgusting:
*
* reason to do it this way:
* - internet explorer doesn't cancel events for inouts
* - internet explorer rejects events for disabled inputs
* - fireEvent is synchronous, the new event occurs before the
old event
*
* so I do this
* - create and send the new event with enabled field,
everything works fine
* - disable the input for the old event, after the new has
been processed
* - reactivate the input after old event rejected
(setTimeout(0) seem to need longer)
*/
obj.disabled = true;
setTimeout(function ar() {
obj.disabled = false;
}, 0);
}
return cloned;
});
}
tunnelEvent(document.getElementById('members'), 'mousedown', {
'ctrlKey' : true });
</script>
Thanks for any suggestions
Niels