Rails spinoffs - Sep 2006 - script.aculo.us drop_receiving_element for multiple DOM IDs

Hello, I''m curious to know if there''s a way to apply
script.aculo.us''
drop_receiving_element call to cater for multiple DOM IDs without
repeating too much code.

I''ll give a little background for what I need to know for:

In a class at univeristy we are developing the interface and backend
for a multi-player online boardgame. We are using rails as our
framework as our lecturer is very much interested in how we can utilise
it. Basically the game is a 18x18 board and each user has 9 pieces to
start with.

Anyhow, I''m working on the UI and for a little spark I''m
making use of
script.aculo.us helper methods. I made use of draggable_element for the
player pieces (paste below) and now I need to do the reverse with the
board.

                  <h1>Game Pieces</h1>
                  <% for piece in @pieces %>
                  <%= image_tag "/images/#{piece[:name]}", :id
=>
"piece_#{piece[:id]}" %>
                  <%= draggable_element "piece_#{piece[:id]}",
:revert
=> true %>
                  <% end %>

As the board is rather sizey I created the table with a small
javascript loop assigning each DOM an ID. Now when a user drags one of
their pieces into a box on the table an AJAX call is made and that id
is reloaded. As you may see applying the above loop is going to repeat
300+ and that''s no good as I''m trying to cut down on
overheads.

Is there a way to do this? I had a look at the script.aculo.us site and
seen something like what I''m after, however for draggables.


[''about-bubble'',''ref-bubble'',''downloads-bubble'',''docs-bubble''].each(function(b){
        new Draggable(b,{revert:true,handle:b+''-handle''});
      });

It would be great if I could see how this is applied with rails.

Anyone advise on this would be great, and yes I have spent quite a
while Googling for solutions - no good however.

Thanks


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---

Hey there,

I''m not too sure of what you want to achieve.  I mean, your Rails loop
and the JS loop you mentioned are exactly isomorphic:

<% for piece in @pieces %>
    <%= draggable_element "piece_#{piece[:id]}", :revert => true
%>
<% end %>

for...in in Ruby is syntactic sugar over the each iterator, and:

[''about-bubble'',''ref-bubble'',''downloads-bubble'',''docs-bubble''].each(function(b){
    new Draggable(b,{revert:true,handle:b+''-handle''});
});

Also invoked a draggable creation /n/ times.
> It would be great if I could see how this is applied with rails.
You already do apply this to Rails.  So what is your quandary?

-- 
Christophe Porteneuve a.k.a. TDD
"[They] did not know it was impossible, so they did it." --Mark Twain
Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---

Thanks Christophe, however this doesn''t really answer my query.
Currently I have:

                  <% for piece in @pieces %>
                  <%= image_tag "/images/#{piece[:name]}", :id
=>
"piece_#{piece[:id]}" %>
                  <%= draggable_element "piece_#{piece[:id]}",
:revert
=> true %>
                  <% end %>

Which is producing:

                  <img alt="Tile6" id="piece_6"
src="/fractals/images/tile6.gif?1158726306" />
                  <script type="text/javascript">
//<![CDATA[
new Draggable("piece_6", {revert:true})
//]]>
</script>

                  <img alt="Tile14" id="piece_14"
src="/fractals/images/tile14.gif?1158726306" />
                  <script type="text/javascript">
//<![CDATA[
new Draggable("piece_14", {revert:true})
//]]>
</script>

The current implementation is just using a 2 hash array but imagine the
amount is data for a 324 sized hash array.

This code:
[''about-bubble'',''ref-bubble'',''downloads-bubble'',''docs-bubble''].each(function(b){
    new Draggable(b,{revert:true,handle:b+''-handle''});

});

Is not mine, this is the source javascript (check the index) I found on
the script.aculo.us site. I''m hoping to see how this was written in the
view file.

Cheers


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---

colabus-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org a écrit
:
> This code:
>
[''about-bubble'',''ref-bubble'',''downloads-bubble'',''docs-bubble''].each(function(b){
>     new Draggable(b,{revert:true,handle:b+''-handle''});
> 
> });
> 
> Is not mine, this is the source javascript (check the index) I found on
> the script.aculo.us site. I''m hoping to see how this was written
in the
> view file.
Oh, OK.  Well, this *wasn''t* generated.  This is hand-written.  So you
should, basically, hand-write it too.  For instance, let''s say your
images are in a container ID''d "images", and your images use
a "item" class:

$(''images'').getElementsByClassName(''item'').each(function(img)
{
    new Draggable(img, {revert: true});
});

''should do.

-- 
Christophe Porteneuve a.k.a. TDD
"[They] did not know it was impossible, so they did it." --Mark Twain
Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---

I''d suggest that you implement your own helper for this, that  
generates the code.
Look at the implementation of draggable_element and extend/adjust to  
your
needs.

-Thomas

Am 01.10.2006 um 04:07 schrieb colabus-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org:
>
> Thanks Christophe, however this doesn''t really answer my query.
> Currently I have:
>
>                   <% for piece in @pieces %>
>                   <%= image_tag "/images/#{piece[:name]}", :id
=>
> "piece_#{piece[:id]}" %>
>                   <%= draggable_element "piece_#{piece[:id]}",
:revert
> => true %>
>                   <% end %>
>
> Which is producing:
>
>                   <img alt="Tile6" id="piece_6"
> src="/fractals/images/tile6.gif?1158726306" />
>                   <script type="text/javascript">
> //<![CDATA[
> new Draggable("piece_6", {revert:true})
> //]]>
> </script>
>
>                   <img alt="Tile14" id="piece_14"
> src="/fractals/images/tile14.gif?1158726306" />
>                   <script type="text/javascript">
> //<![CDATA[
> new Draggable("piece_14", {revert:true})
> //]]>
> </script>
>
> The current implementation is just using a 2 hash array but imagine  
> the
> amount is data for a 324 sized hash array.
>
> This code:
>
[''about-bubble'',''ref-bubble'',''downloads-bubble'',''docs-bubble''].each
> (function(b){
>     new Draggable(b,{revert:true,handle:b+''-handle''});
>
> });
>
> Is not mine, this is the source javascript (check the index) I  
> found on
> the script.aculo.us site. I''m hoping to see how this was written
in
> the
> view file.
>
> Cheers
>
>
> >

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---

Thomas Fuchs a écrit :
> I''d suggest that you implement your own helper for this, that  
> generates the code.
> Look at the implementation of draggable_element and extend/adjust to  
> your
> needs.
Hmm, yes, that would do it, especially if you need this multiple times.
 Something like this in your app/helpers/application_helper.rb should do
the trick:

def draggable_elements(*args)
  options = {}
  options = args.pop if args.last.is_a?(Hash)
  js = ''''
  args.each do |a|
    js << draggable_element_js(a, options) << "\n"
  end
  javascript_tag(js.chop!)
end

-- 
Christophe Porteneuve a.k.a. TDD
"[They] did not know it was impossible, so they did it." --Mark Twain
Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---

Woops!

Sorry guys, went moronic for a moment.  My suggested helper is not so
good for the original need, which was to significantly reduce overhead:
it only reduces the script wrapper tags, not the Draggable calls.  This
is because I wanted to reuse the draggable_element_js method.

Here''s another go, that produces something more like what was
originally
wanted:

def draggable_elements(*args)
  return '''' if args.empty?
  options = {}
  options = args.pop if args.last.is_a?(Hash)
  js = ''['' + args.map { |a| a.to_json }.join('',
'') + '']''
  js << ".each(function(a) {\n  "
  js << "new Draggable(a,
#{options_for_javascript(options)});\n"
  js << ''});''
  javascript_tag(js)
end

There, much better.

-- 
Christophe Porteneuve a.k.a. TDD
"[They] did not know it was impossible, so they did it." --Mark Twain
Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---

Cheers for the replies guys, I did what Thomas suggested and I''m slowly
making progress. I have noticed the draggable effects are not as smooth
as I would have hoped. I suspect this is due to the 300+ listening
Droppables.

      <script type="text/javascript">
        <!-- Assign all game pieces draggable -->
        document.getElementsByClassName(''game_pieces'').each(
          function(piece)
          {
            new Draggable(piece, { revert: true });
          }
        );
        <!-- Assign all board positions droppable -->
       
document.getElementsByClassName(''board_position'').each(
          function(position)
          {
            Droppables.add(position, {
              accept:''game_pieces'',
              onDrop:function(element){
                new Ajax.Updater(position, ''/main/move'', {
                  onLoading:function(request){
                    Element.show(''indicator'')
                  },
                  onComplete:function(request){
                    Element.hide(''indicator'')
                  },
                  parameters:''id='' +
encodeURIComponent(element.id),
evalScripts:true, asynchronous:true
                })
              },
              hoverclass:''position_active''
            })
          }
        );
      </script>

Any opinions on this?


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---