How to subscribe only for child event?

Board index » YUI 3.x: » Using YUI 3.x Components

Page 1 of 1

[ 3 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

Zaar Hai

YUI Contributor

Username: haizaar
Joined: Tue Sep 20, 2011 7:18 am
Posts: 46
GitHub: haizaar
Gists: haizaar

Tags:

How to subscribe only for child event?

Posted: Thu Apr 05, 2012 3:10 pm

+0-

Good day!

I'm trying to build hierarchical widget and currently studying Hierarchical ListBox Widget [1].

I want to subscribe only to click event of the particular child that was clicked. Continuing usage example from the above page, I'm doing:

Code:

listbox.on("listbox:click", function(e) {...});

Now when I click on the "Item Three - Two" entry in the list, this event gets fired for "Item Three - Two", "Item Three" and root widgets. Inside that event handler, I've found no way to determine whether e.target is the original widget I've clicked on or one if its parents.

So my questions are:
1. How do I discover that I'm in event handler of the original widget that was clicked?
2. Is it possible to make clicked widget be the only one that fires the event?

Thank you,
Zaar

[1]. http://yuilibrary.com/yui/docs/widget/w ... stbox.html

Zaar Hai

YUI Contributor

Username: haizaar
Joined: Tue Sep 20, 2011 7:18 am
Posts: 46
GitHub: haizaar
Gists: haizaar

Tags:

Re: How to subscribe only for child event?

Posted: Fri Apr 06, 2012 2:00 pm

+0-

I've simplified the problem down to creating a simplest widget that can be nested into itself.

How do I subscribe only to event of only the child that was clicked???? My click event always get fired for parents as well.

There should be a very simple solution to this trivial probem. Please help.

The code is below.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head> <style type="text/css"> div { padding-left: 10px; } </style> </head>

<body>
  <div id="exampleContainer"></div>

  <script src="http://yui.yahooapis.com/3.4.1/build/yui-base/yui-base.js"></script>
  <script type="text/javascript">
    YUI.add('simpletree', function(Y) {

    Y.SimpleTree = Y.Base.create("simpletree", Y.Widget, [Y.WidgetParent, Y.WidgetChild], {

      CONTENT_TEMPLATE : "<em></em>",

      renderUI: function () {
        this.get("contentBox").setContent('<a href=#>'+this.get("label")+'</a>');
      },

    }, {
      ATTRS : {
        defaultChildType: {
          value: "SimpleTree",
        },
        label : {
          validator: Y.Lang.isString
        },

      }
    });

    }, '1.0' ,{requires:['substitute', 'widget', 'widget-parent', 'widget-child']});

    YUI({
    }).use("simpletree", function (Y) {

      var mytree = new Y.SimpleTree({
        label: "label 1",
        children: [
          { label: "label 1-1" },
          { label: "label 1-2",
              children: [
              { label: "label 1-2-1" },
              { label: "label 1-2-2" }
            ]
          }
        ]
      });
      mytree.render();

      mytree.on("click", function(e) {
        Y.log("ON CLICK event: Target: "+e.target + "; is root: " + e.target.isRoot() + "; label: " + e.target.get("label"));
      });
    });

  </script>

</body>
</html>

Zaar Hai

YUI Contributor

Username: haizaar
Joined: Tue Sep 20, 2011 7:18 am
Posts: 46
GitHub: haizaar
Gists: haizaar

Tags:

Re: How to subscribe only for child event?

Posted: Fri Apr 06, 2012 4:06 pm

+0-

I think I finally can answer to myself

What I was asking for is kind of impossible... I have several widgets that have their bounding box nested. Clicking on the bounding box of the inner widget, means also clicking on the bounding box of outer widgets that contain it. I.e. I'm actually clicking on all of them.
Since widgets just set click events on their bounding box, they most probably do not have any way to know that actuall click point landed on their child that also listens for this event.
Its like delegating click for a bunch of nested div elements - once you click on one of them, you'll also get events those its contained in.

But there is a nice solution to my problem after all:
- Publish custom event, say "nodeclick"
- Setup a click listener on bounding box of the root widget.
- This listener should try doing e.target.getByNode - this will return the widget that was actually clicked.
- Fire "nodeclick" event of that widget.[/list]

Below are the code that need to added info my code snippet in the the previous post to suport this functionality.

Code:

mytree.on("click", ...)

should be changed to

Code:

mytree.on("nodeclick", ...)

======================

Code:

            initializer: function(config) {
                this.publish("nodeclick", {
                    defaultFn: this._nodeClickDefaultFn
                });
            },

            _nodeClickDefaultFn: function(e) {
                //
            },

            bindUI: function() {
                if (this.isRoot()) {
                    this.get("boundingBox").on("click", function(e) {
                        var w = Y.Widget.getByNode(e.target);
                        if (w instanceof Y.SimpleTree) {
                            w.fire("nodeclick");
                        }
                    });
                }
            },

Page 1 of 1

[ 3 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum