MooTools - DOM Inserted Event - mootools

I would like an element to receive an event and perform some action when it is injected into the DOM. Is there any event available to perform this?
Something like the following:
new Element('div', {
events : {
insertedIntoDom : function() {
// Do something
}
}
})
Thanks

There is no event that fires when an element is inserted into the DOM, but you can create custom events. After you create your event, you can fire the event after inserting the element.

Related

polymer, shadow dom, events and bubbeling

I have a polymer custom element using shadow dom (v1), this element is inside another polymer custom element, also wrapped in shadow dom..
In my understanding, when the most inner element raises an event, the most outer element (the app) should be able to listen for these events.
Is this incorrect?
I have a rating component inside a review component inside an app component. the rating component throws an event:
this.dispatchEvent(new CustomEvent('custom-event'), { bubbles:true, composed:true });
However, the code below in the app-component never gets fired..
connectedCallback() {
super.connectedCallback();
this.addEventListener('custom-event', () => { console.log('a');});
}
Am I incorrect in assuming the event should bubble all the way up the different shadow doms to the window eventually, unless someone stops the propagation?
Thanx for any answers..
John.
Found it, I set the options as argument to the dispatchEvent instead of adding the options to the CustomEvent.
so instead of
this.dispatchEvent(new CustomEvent("event"), { options });
you have to do
this.dispatchEvent(new CustomEvent("event", { options }));

I have to attach two event (click and sortable) on one element

here is the problem,I have to attach two event (click and sortable) on one element,but when i click the element,it also trigger sortable complete event. Is there any way to solve this?
I saw the source code of sortables,it bind mousedown event,so it will trigger by click.while how can i deteted whether is fired by click or drag.
otherwise,if there is a good way to detect element resort or not will be fine.
One option, pointed out by Timmeh at the #mootools irc, is to use the onSort event and have a flag there.
Like:
onSort: function () {
this.sorted = true;
},
onComplete: function (el) {
if (this.sorted) {
alert("complete trigger complete");
}
this.sorted = false;
}
Fiddle
Checking the element seems to work http://fiddle.jshell.net/F2VKK/3/

ObjectChanged Event not Bubbling for ValuesAdded/ValuesRemoved

I am trying to reduce the number of event listeners attached to my collaborative models. In order to do this, I have started listening to the ObjectChanged event instead of specific event types and delegating to other handlers. However it doesn't look like the ObjectChanged event is being bubbled properly for the ValuesAdded/ValuesRemoved changes on CollaborativeLists.
function onObjectChanged(e)
{
log('Changed: ', e);
}
// Placeholder, called when we load our doc through the realtime api.
function onDocLoaded(doc)
{
var docModel = doc.getModel();
var docRoot = docModel.getRoot();
console.log('Drive document loaded: ', window.performance.now());
if (docRoot.has('testMap'))
{
docRoot.delete('testMap');
}
docRoot.set('testMap', docModel.createMap());
var testMap = docRoot.get('testMap');
console.assert(testMap, 'Test map required');
docRoot.addEventListener(gapi.drive.realtime.EventType.OBJECT_CHANGED, onObjectChanged);
var testList = docModel.createList();
testMap.set('testList', testList);
console.assert(testList, 'Test list required');
setTimeout(function ()
{
console.log('Begin Push');
testList.push('This is a test string');
console.log('End Push');
}, 1000);
}
The code above is run on doc load and demonstrates the problem. In this case, I would expect two ObjectChanged events to be fired (first for the list being set on the map and second for the string push into the list). The first event fires correctly, however the list push does not trigger an ObjectChanged event on either the 'docRoot' or the 'testMap'. As both of these are ancestors of the testList an event should be bubbled to them (based on https://developers.google.com/drive/realtime/handle-events#event_bubbling).
The ObjectChanged event however IS fired on the testList, so it looks like there is an issue with only the bubbling portion.
Is there a way of ensuring that the event bubbling will occur? Additionally, for events that are bubbling up, is there a way to stop bubbling partway?

I need help bubbling an event in AS3

I want to have the parent of my class handle the event first, then I want to have the child handle the event. Is there a way to explicitly bubble the event up? I want to do something like this:
...
this.addEventListener(MouseEvent.CLICK, characterClicked);
...
private function characterClicked(e:Event):void{
// pass event to parent to be handled first
...
}
Is this possible, and if so how?
There are three "phases" of an event; Capture, At target and Bubble. They occur in this order, meaning that if you set an event listener to be in the capture phase it will always fire before one set regularly (which would mean either at target or bubble).
Like so:
// in parent, third argument is "use capture"
child.addEventListener(MouseEvent.CLICK, handleClickInParent, true);
// in child, add listener as usual
addEventListener(MouseEvent.CLICK, handleClick);
Now, your parent event listener will always fire first!
I figured out a way to do this. Is seems hackish, but it works. If there is a better way of doing this please let me know.
...
this.addEventListener(MouseEvent.CLICK, characterClicked);
...
private function characterClicked(e:Event):void{
// pass event to parent to be handled first
this.removeEventListener(MouseEvent.CLICK, characterClicked); //prevent infinite loop
dispatchEvent(e); // send event to parent object
this.addEventListener(MouseEvent.CLICK, characterClicked);
e.stopImmediatePropagation();
...
}
If you were to handle the listener in the parent instead of the child it might be easier. Then you could just pass the event to the child when you're done:
// inside parent class:
childObj.addEventListener(MouseEvent.CLICK, onCharacterClicked);
private function onCharacterClicked(e:Event):void {
// do parent stuff first
// ...
// then pass event to child
childObj.onCharacterClicked(e);
}

Can I specify a delay before the browser raises "rollover" event?

I am working on an ASP.NET web application that is required to bring up a popup on a roolover. I am using the "OnMouseOver" event and it works as expected. The problem is that the event is on a "hair trigger"; even a casual passage of the mouse over the control brings up the popup (which then must be manually dismissed). I want to add a delay so that a rapid pass over the control in question does not trigger the event. Is there a way to set such a delay or is there a different event that I could use to get the same "trigger event on a slow rollover"?
One solution that comes to mind, there may be better ways though:
Make the onmouseover call the function via a setTimeout delay
Inside the function, check the mouse is actually over that element.
You could also use an onmouseout to clear the setTimeout, but then you'd have to store a reference to the timer in a global variable to get at it again.
What I ended up doing is as follows (oRow is a table row but it could be any control):
function ItemMouseOver(oRow, "parameters for the popup")
{
oRow.showTimer = window.setTimeout(function()
{
alert('popup');
}, 1000);
}
function ItemMouseOut(oRow)
{
if (oRow.showTimer)
window.clearTimeout(oRow.showTimer);
In the ASP.NET grid view RowDataBound event: I added the following code:
protected void ReportGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow && (
e.Row.RowState == DataControlRowState.Normal
|| e.Row.RowState == DataControlRowState.Alternate))
{
// get the input values for the popup for the row (stuff deleted)
e.Row.Attributes["onmouseover"] = "javascript:ItemMouseOver(this,
"parameters for the popup");";
e.Row.Attributes["onmouseout"] = "javascript:ItemMouseOut(this);";
}
}
It works just fine. Thanks.