Thursday, June 26, 2008

Rails Javascript Widget

At Entertonement (I know, the name sounds like a old appliance, but that's the retro cool thing about it), we're building a rails app to upload and work with sound clips. You can add a clip - then we'll convert it - allow you to make a ring tone out of it, embed it in a blog, etc. Here's the first test of the javascript widget that we're making. Sorry - it'll probably break if you're not logged into our dev site.

Some details about the Rails Javascript Widget:

I have a simple .rhtml file that looks like so:

<% style = params[:style]; size = params[:size] || 'medium' %> <br /><% width = (size == 'large') ? '200px' : '100px' %> <br />(function(){ <br />document.write('<div style="border:solid 1px grey; width:<%= width %>;overflow:hidden;text-align:center;font:normal 11pt verdana;padding:3px;<%= style %>">'); <br />document.write('<%= image_tag( @clip.image_file(size.to_sym || :medium), :style => "width:#{width};padding:0px;border:0px") %><br>'); <br />document.write('<object type="application/x-shockwave-flash" data="<%= DOMAIN %>/embed/button/musicplayer.swf?&song_url=<%= @clip.audio_path %>&" width="17" height="17" align="top" style="margin:5px">'); <br />document.write('<param name="movie" value="/embed/button/musicplayer.swf?&song_url=<%= @clip.audio_path %>&" />'); <br />document.write('<img src="noflash.gif" width="17" height="17" alt="" />'); <br />document.write('</object>'); <br />document.write('<div style="border-top:solid 1px #EEE;padding:5px 0px;line-height:19px;">'); <br />document.write('<a href="<%= escape_javascript @clip.url %>" style="color:#888;font-size:8pt"><strong><%= escape_javascript(h(@clip.name)) %></strong><br>Sound clip on<br><span style="color:#C4222B;white-space:nowrap">ENTER<span style="color:#418CC5">TONE</span>MENT</span></a>'); <br />document.write('</div></div>'); <br />})()

Mainly a bunch of document.write calls to display the appropriate html.

When you add it to a website - you simple add this kind of code:

<script type="text/javascript" src="http://devsite.entertonement.com/clips/embed/400084"></script>

This will be on the live site soon enough to test for real.

0 comments:

Post a Comment