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
>
