Thanks, Geoff. Very nice.
On Mar 5, 2014 11:28 PM, "Geoff Callender" <
geoff.callender.jumpst...@gmail.com> wrote:
> Here's an Any div that is a container of things you can click on to
> select, identified by having CSS class "selectable". JavaScript listens for
> click from selectables in the container. It adds css class "active" to the
> selected thing and removes "active" from the others. You can see an
> EventLink in the example, because that's what you'd normally have in a
> situation like this, but the example works the same without it.
>
> This code is adapted from working code, but not tested in this form.
>
> <div t:id="thingsDiv" t:type="any">
> <t:loop source="things" value="thing"
> formstate="none">
> <t:eventlink event="selected" context="
> thing.id" zone="^">
> <div class="${selectableCssClass}"
> data-value="${thing.id}">
> <!-- etc -->
> </div>
> </t:eventlink>
> </t:loop>
> </div>
>
> @Property
> private String selectableCssClass = "selectable";
>
> @InjectComponent
> private Any thingsDiv;
>
> void afterRender() {
> JSONObject params = new JSONObject();
> params.put("containerId", thingsDiv.getClientId());
> params.put("selectableCssClass", selectableCssClass);
> params.put("selectedCssClass", "active");
>
> javaScriptSupport.require("activate-selectables").with(params);
> }
>
> define(["jquery"], function($) {
>
> /**
> * Adds selectedCssClass to the selected item when clicked, so
> that the server doesn't have to redisplay the container.
> * Didn't use the jQuery Selectables because it behaves oddly -
> some say it should have been called Lasooable.
> *
> * Params:
> * containerId Eg. "persons".
> * selectableCssClass Eg. "selectable".
> * selectedCssClass Eg. "active".
> */
> return function(params) {
> var containerId = params.containerId;
> var selectableClass = params.selectableCssClass;
> var selectedClass = params.selectedCssClass;
>
> var $container = $("#" + containerId);
>
> $container.on("click", "." + selectableClass, function(e) {
> var $clicked = $(this);
> var $selectables = $("#" + containerId + " ." +
> selectableClass);
>
> // Unselect all other selectables.
>
> $selectables.each(function() {
> var $this = $(this);
>
> if (!$this.is($clicked)) {
> if ($this.hasClass(selectedClass))
> {
>
> $this.removeClass(selectedClass);
>
> $this.trigger("unselected");
> }
> }
> });
>
> // Select the clicked selectable.
>
> $clicked.addClass(selectedClass);
> $clicked.trigger("selected");
> });
>
> };
>
> });
>
>
> On 06/03/2014, at 1:17 PM, Bob Harner wrote:
>
> > Geoff, Kristian, do you have any examples for using the "any"
> > component when you need to generate a unique client id to pass to
> > JavaScript?
> >
> >
> > On Wed, Mar 5, 2014 at 8:23 AM, Bob Harner <bobhar...@gmail.com> wrote:
> >> javadocs. I meant javadocs
> >>
> >> On Wed, Mar 5, 2014 at 8:23 AM, Bob Harner <bobhar...@gmail.com> wrote:
> >>> Thanks, everybody! I'll be updating the avocados for that component
> >>> soon, with examples.
> >>>
> >>> On Wed, Mar 5, 2014 at 8:08 AM, Geoff Callender
> >>> <geoff.callender.jumpst...@gmail.com> wrote:
> >>>> My biggest use is the same as Kristian mentioned: to generate a unique
> >>>> client id to pass to javascript. It's usually on a div, span, but
> sometimes
> >>>> on a ul, p, area, or canvas.
> >>>> Option 2 too, but less often.
> >>>>
> >>>>
> >>>> On 3 March 2014 19:51, Kristian Marinkovic <
> kristian.marinko...@gmail.com>wrote:
> >>>>
> >>>>> i use it if i need unique clientIds for certain dom elements to
> access it
> >>>>> with my javascripts.
> >>>>> g,
> >>>>> Kris
> >>>>>
> >>>>>
> >>>>> On Mon, Mar 3, 2014 at 8:18 AM, Lance Java <
> lance.j...@googlemail.com
> >>>>>> wrote:
> >>>>>
> >>>>>> I've used option 2 and I've also extended "any" to make new
> components.
> >>>>>>
> >>>>>
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org
> > For additional commands, e-mail: users-h...@tapestry.apache.org
> >
>
>
