toggle menu

[focusfriend]

I want to create a tag based menu kind of widget with a dual mode; one
that acts like a checkbox form (multiple selections possible) and one
that acts like a radio button form (only one selection possible). When
a tag is clicked, it should toggle its color and a script should
process the new state of the entire menu (based on all the current
selections). Here's the base setup:

http://84.81.3.149/labs/ac/src/tm.html

Now I've the following questions:
[1] It seems that clicks are generated/triggered twice. Any clue?
[2] What's an easy way to toggle a tag's color (select/unselect)?
[3] What's an easy way to capture the entire menu (e.g. the state of
each individual tag after a click)?

Here's part of the main code:

<app:iterator items="['option1','option2','option3']">
<span class="togglemenu" on="
mouseover then set[background-color='#545454']
or
mouseout then set[background-color='#191919']
or
togglemenu[select] then set[color='#990000']
or
togglemenu[unselect] then set[color='#bbb'] or
click then l:pickone
">
&nbsp;#{iterator_value}&nbsp;
</span>
</app:iterator>

<app:statemachine id="togglemenu" initial="select">
<state name="select" if="l:do.togglemenu.all"></state>
<state name="unselect" if="l:do.togglemenu.none"></
state>
</app:statemachine>

[Jeff Haynie]

see inline:

On Feb 20, 2008 11:42 AM, focusfriend <focus...@gmail.com> wrote:

I want to create a tag based menu kind of widget with a dual mode; one
that acts like a checkbox form (multiple selections possible) and one
that acts like a radio button form (only one selection possible). When
a tag is clicked, it should toggle its color and a script should
process the new state of the entire menu (based on all the current
selections). Here's the base setup:

http://84.81.3.149/labs/ac/src/tm.html

Now I've the following questions:
[1] It seems that clicks are generated/triggered twice. Any clue?

It's because the click event is being propagated to other elements i think.  You can stop this by using click! -- like:

on="click! then l:foo"

All Javascript events can be "stopped" from propagation through the use of the exclamation point.
 

[2] What's an easy way to toggle a tag's color (select/unselect)?

you might consider using a CSS class and just switching the class -- i.e. set[class=foo]

[3] What's an easy way to capture the entire menu (e.g. the state of
each individual tag after a click)?

Probably i'd put an ID on the  element and try and pluck out the value like $('myid').value or $('myid').innerHTML

or you could send it as part of a message -- like:

on="click then l:my_click[idx=#{iterator_index},value='#{iterator_value}']"

You can then listen for that event and use the value payload.

[Mark Luffel]

Now I've the following questions:
[1] It seems that clicks are generated/triggered twice. Any clue?

 

Try this instead:

<app:script>$MQ('l:load_options', ['option1','option2','option3'])</app:script>

        <app:iterator on="l:load_options then execute">

It looks like there is a bug in the way that the "items" attribute of iterator works, and your click event was being registered twice. We'll track down the cause of this, but the above code should work for you (and you'll probably want to use a message to fill the menu anyways)

I like that use of app:statemachine!

[te...@vijedi.net]

Rather than use 'set[class=foo]', you might want to try using add/remove instead.  This will prevent you from clobbering classes that are already on the element.  

Tejus Parikh
Software Developer
Appcelerator, Inc

----- Original Message -----
From: "focusfriend" <focus...@gmail.com>
To: "Appcelerator Platform SDK" <appcelerator...@googlegroups.com>
Sent: Wednesday, February 20, 2008 11:42:47 AM GMT -05:00 US/Canada Eastern
Subject: [appcelerator-platform-sdk] toggle menu


I want to create a tag based menu kind of widget with a dual mode; one
that acts like a checkbox form (multiple selections possible) and one
that acts like a radio button form (only one selection possible). When
a tag is clicked, it should toggle its color and a script should
process the new state of the entire menu (based on all the current
selections). Here's the base setup:

http://84.81.3.149/labs/ac/src/tm.html

Now I've the following questions:
[1] It seems that clicks are generated/triggered twice. Any clue?

[2] What's an easy way to toggle a tag's color (select/unselect)?

[3] What's an easy way to capture the entire menu (e.g. the state of
each individual tag after a click)?

[focusfriend]

I'm now passing the options via $MQ (which is indeed the intended
approach) and this solves the double registration issue. But a new
issue is introduced, because now the statemachine doesn't get its
default state (initially, all options should be "selected" and become
red).

http://84.81.3.149/labs/ac/src/tm.html

And yes, I do like this use of the statemachine as well :)

[focusfriend]

As for the "ID" approach, once an option gets clicked, I have to
retrieve/know the current state of ALL the options; not just the one
that is clicked. Is a "fieldset" approach possible on none-input
objects?

On 20 feb, 18:09, "Jeff Haynie" <jhay...@gmail.com> wrote:
> see inline:
>

> --
> Jeff Hayniehttp://blog.jeffhaynie.us

[focusfriend]

How would the toggling of colors look like in this approach? Cause on
every click the color changes back and forth.

[Nolan Wright]

I think your "initial state" problem is due to the state machine
widget being defined above the script widget that generates your
iterator data.

The state machine's initial state is being fired prior to the iterator
being populated hence the menu items are all white. I think it will
work if you move the state machine below the script widget.

[focusfriend]

If that's true, than it means that the initial state is not going to
work with async created objects. Is there a workaround for this? In my
real app, the menu-options are stored in a JSON file and are retrieved
every 5 minutes via <app:http>

[Nolan Wright]

Not sure I follow. It should work fine in the remote data case. The
specific case I was referring to was the initial page load and the
initial state condition being fired. Since you defined the state
machine above the data script widget, the very first state condition
is fired before the iterator is populated (since the script widget is
below the state machine). This is due to the fact that the HTML is
parsed from top-to-bottom and each widget is "wired" as its
encountered.

Does that make sense or am I misunderstanding your issue?

[focusfriend]

I moved the statemachine to the bottom of the page, but it doesn't
make any difference...