Anouncement originally posted on <a href="http://hackd.wordpress.com/2007/11/23/sexy-time-zones-in-ruby-on-rails-with-timezone_fu/">hack'd</a>Working with Timezones in Rails even after you have installed the <a href="http://tzinfo.rubyforge.org/" title="TZInfo">TZInfo</a> plugin is still a pain in the you know what. (You are using TZInfo, right?) I never liked having to jump through hoops converting from UTC to localtime when displaying times to Users. I suppose I could have used Javascript to do the conversion but I prefer to deal with the conversion on the back end. Adding support for time zones to our apps wasn’t very fun. While adding timezones to another model model for the third or forth time I decided there had to be a better way. I pointed my browser to the <a href="http://agilewebdevelopment.com/plugins">agile web development plug in</a> site and did a quick search. I found a couple plug-ins that helped with timezones or helped with date time pickers; but nothing that did quite what I wanted.Ideally I wanted a plugin similar to <a href="http://agilewebdevelopment.com/plugins/attachment_fu">attachment_fu</a>. I wanted to specify within a model a single method that handled all of the setup. So when I accessed a datetime field the local time would be returned. I also wanted to be able to set the field to local time and have that value converted to UTC before being saved to the database. And the plugin had to do all of this with minimal setup and effort on the part of the developer. Not finding anything that satisfied my requirements I decided to write something. After an hour or two I put together something that I think is worth sharing. Included at the bottom of this post are links to grab the plug-in. While building <a href="http://www.thrivesmart.com/sprout">ThriveSmart Sprout!</a> we used plugins from various developers. The availability of plugins was on the the great strengths of the Rails comunity. In honor of <a href="http://techno-weenie.net/">techno weenie</a> and the <a href="http://agilewebdevelopment.com/plugins/attachment_fu">attachment_fu</a> plug-in our plug-in was christened timezone_fu. Timezone_fu makes it really easy to deal with datetime fields in your models. It adds a method to your models has_timezone that takes a hash of options. the README for the plugin describes all of the options but below is an example: <pre style="border: 1px solid #eeeeee"> class Event < ActiveRecord::Base has_timezone :fields => [ :start_datetime, :end_datetime] end</pre> Our Event model has three fields a start_datetime and end_datetime and a timezone. Adding has_timezone to the model changes the behavior of the two datetime attributes. Notice below that calling event.start_datetime shows the time in local time (”America/New York”). <pre style="border: 1px solid #eeeeee">>> event = Event.find(:first) => #<Event:0×1b71b40 @attributes={ “end_datetime” => “2007-11-21 15:00:00″, “start_datetime” => “2007-11-21 14:15:00″, “timezone” => “America/New_York”} >> event.start_datetime => Wed Nov 21 09:15:00 UTC 2007 >> event.display_start_datetime => “Nov. 21, 2007 09:15 AM” >> event.utc_start_datetime => Wed Nov 21 14:15:00 UTC 2007</pre> You can also set the value of the field to a local date/time and it will be converted to UTC automatically: <pre style="border: 1px solid #eeeeee">>> event.start_datetime = Time.now => Sun Nov 25 06:26:35 +0000 2007 => #<Biz::Event:0×1b71b40 @attributes={ “end_datetime” => “2007-11-21 15:00:00″ “start_datetime” => Sun Nov 25 11:26:35 +0000 2007, “timezone” => “America/New_York” } </pre> If you want to access the fields and retrieve the database value you can use the utc_field_name method to access the UTC value of the attribute. The plugin makes a couple of core assumptions. One it assumes that the default rails timezone is UTC: <pre style="border: 1px solid #eeeeee">ENV[‘TZ’] = ‘UTC’</pre> Second it assumes that the model has a timezone attribute named timezone: <pre style="border: 1px solid #eeeeee">t.column :timezone, :string, :default => ”</pre> The plug-in depends on <a href="http://tzinfo.rubyforge.org/">TZInfo</a> and has been tested under Rails 1.2.3 You can grab a copy of the plug-in here: <a href="http://www.thrivesmart.com/open_source/timezone_fu">http://www.thrivesmart.com/open_source/timezone_fu</a>. Or if zipped is more your style: <a href="http://www.thrivesmart.com/open_source/timezone_fu.zip">http://www.thrivesmart.com/open_source/timezone_fu.zip</a> If you love and/ or hate the plug-in feel free to leave your comments below.

Timezone_fu 3

false

A Ruby on Rails Plugin (1.2.3) That makes it easy to deal with timezones in your models

5263

806

Announcement Originally posted on <a href="http://hackd.wordpress.com/2007/08/28/part-two-how-to-create-an-image-selection-plugin-for-tinymce-with-ruby-on-rails/">Hack'd</a><div class="snap_preview">Update: A <a href="http://www.thrivesmart.com/open_source/image_select_demo_v1.0.1.zip">sample project</a> is now available In the <a href="http://hackd.wordpress.com/2007/08/23/how-to-create-an-image-selction-plugin-for-tinymce-with-ruby-on-rails/" title="How to Create an Image Selection Plugin for tinyMCE with Ruby on Rails">first part of our how-to</a> we created a tinyMCE plugin with a dynamic image selector panel based on the advimage plugin. Now we will add functionality to upload images or select an existing image. Our plugin needed to satisfy the following requirements: <ul><li>Use the existing inline popup (IFRAME) adding a form for uploading an image. We did not want the user to be directed to another page or create a pop up window.</li><li>In javascript determine which controller to call in the form because we can not pass a variable from the parent to the image selection IFRAME.</li><li>The image selection IFRAME should not reload when the form is submitted. Reloading the IFRAME would trigger another fetch of uploaded images and that should be avoided.</li><li>After an image is successfully uploaded the source and alternative text fields should be set as if the user had clicked on an existing image and the IFRAME should then disappear using the plugins existing functionality.</li></ul> <a href="http://hackd.files.wordpress.com/2007/08/picture-1.png" title="picture-1.png"><img src="http://hackd.files.wordpress.com/2007/08/picture-1.png" border="0" alt="picture-1.png" /></a> To follow along with this tutorial you will need: <ul><li>The updated advimage plugin from the end of <a href="http://hackd.wordpress.com/2007/08/23/how-to-create-an-image-selction-plugin-for-tinymce-with-ruby-on-rails/">How to Create an Image Selection Plugin for tinyMCE.</a></li><li>The <a href="http://sean.treadway.info/svn/plugins/responds_to_parent/">responds_to_parent</a> rails plugin [1] installed, Sean Treadway has a great tutorial on <a href="http://sean.treadway.info/articles/2006/05/29/iframe-remoting-made-easy">using the plugin within a rails project.</a></li></ul> With what we want our updated plugin to do, let’s get started! <ol><li>The original image.htm (tiny_mce/plugins/ts_advimage/image.htm) has a form tag right after the body tag, we need to relocate this form in order for our image upload to function properly: <pre style="border: 1px solid #eeeeee; overflow: auto"><body id=“advimage” onload=“tinyMCEPopup.executeOnLoad(’init();’);” style=“display: none”> <form onsubmit=“insertAction();return false;” action=“#”> </pre> Relocate the form just before the tabs div: <pre style="border: 1px solid #eeeeee; overflow: auto"><form onsubmit=“insertAction();return false;” action=“#”> <div class=“tabs”> </pre> </li><li>Add a form for the image upload image.htm. Create a new div called “image-upload” to house the form. The form needs to have multipart/form-data encoding and will call a javascript function ts_onload (which we will write shortly) on submit. The target for our form is html_editor_image_upload_frame which we will create dynamically to avoid javascript errors when the plugin removes the IFRAME containing the inline popup window. <pre style="border: 1px solid #eeeeee; overflow: auto"><div id=“image-upload”> <fieldset> <legend>Upload New Image</legend> <form id=‘image_upload_form’ enctype=“multipart/form-data” method=“post” onsubmit=“ts_onload(); return true;” target=“html_editor_image_upload_frame”> <input class=“input-file” id=“image_uploaded_data” name=“image[uploaded_data]” size=“30″ type=“file” /> <div class=“submit”> <input class=“input-submit” name=“commit” type=“submit” value=“Upload & Insert” /> </div> </form> </fieldset> </div> </pre> </li><li>Adding the form to the panel breaks the plugin because the plugin was originally written assuming that there would only be one form. We need to change instances of document.forms[0] to document.forms[1]. We could simple do a find and replace but if we ever add a form in the future we would have to do that again. Instead let’s create a function called formElement that returns the proper form: <pre style="border: 1px solid #eeeeee; overflow: auto">function formElement() { return document.forms[1]; } </pre> Now, search for instances of document.forms[0] and replace them with calls to formElement(); (there should be sixteen). </li><li>Create javascript functions to create the IFRAME and determine the path for the form action in tiny_mce/plugins/ts_advimage/jscripts/functions.jsts_onload: Create a hidden one pixel by one pixel IFRAME with an id of html_editor_image_upload_frame and add it to the end of the image-upload div we created in step two. The function also modifies our form action with the result from ts_upload_image_path(). The code highlighted below was generated [2] by <a href="http://muffinresearch.co.uk/code/javascript/DOMTool/">DOMTool v1.1</a> <pre style="border: 1px solid #eeeeee; overflow: auto">function ts_onload(){ var iframe1=ts_ce(‘iframe’,‘html_editor_image_upload_frame’); iframe1.setAttribute(’src’,‘about:blank’); iframe1.style.border=“0px none”; iframe1.style.position=“absolute”; iframe1.style.width=“1px”; iframe1.style.height=“1px”; iframe1.style.visibility=“hidden”; iframe1.setAttribute(‘id’,‘html_editor_image_upload_frame’); $(‘image-upload’).appendChild(iframe1); $(‘image_upload_form’).setAttribute(“action”, ts_upload_image_path()); } </pre> ts_ce: A helper for creating the iframe <pre style="border: 1px solid #eeeeee; overflow: auto">function ts_ce(tag,name){ if (name && window.ActiveXObject){ element = document.createElement(‘<’+tag+‘ name=”‘+name+‘”>’); }else{ element = document.createElement(tag); element.setAttribute(‘name’,name); } return element; } </pre> ts_upload_image_path: Determine the action for the image upload form based on the URI of the parent. Divide the path into segments delimited by a forward slash. Our path_prefix is always the token after the domain name. The result is a string used to call the controller with the action for uploading images. <pre style="border: 1px solid #eeeeee; overflow: auto">function ts_upload_image_path() { path_prefix = window.parent.location.pathname.split(“/”)[1]; to_path = “/” + path_prefix + “/manage_images.js”; return to_path; } </pre> </li><li> With the HTML and javascript completed, let’s revisit our manage images controller. In part one our controllers respond_to block looked like this: <pre style="border: 1px solid #eeeeee; overflow: auto"> respond_to do |format| format.html format.js end </pre> We need to modify our create action so it notifies the parent IFRAME that the image was uploaded. We will use a responds_to_parent block to call the javascript ts_insert_image function we wrote in part one: <pre style="border: 1px solid #eeeeee; overflow: auto">def create @image = handle_uploaded_image params[:image] respond_to do |format| if @image.save format.js do responds_to_parent do render :update do |page| page << “ts_insert_image(’#{@image.public_filename()}’, ‘#{@image.name}’);” end end end else format.js do responds_to_parent do render :update do |page| page.alert(’sorry, error uploading image’) end end end end end end </pre> </li><li>One final step. We need to modify the responds_to_parent plugin (vendor/plugins/responds_to_parent/lib/responds_to_parent.rb) to fix a javascript error caused when the IFRAME is removed from the DOM by the tinyMCE plugin. Change the rendor block near the end of the file from: <pre style="border: 1px solid #eeeeee; overflow: auto">render :text => “<html><body><script type=’text/javascript’ charset=’utf-8′> var loc = document.location; with(window.parent) { setTimeout(function() { window.eval(‘#{script}’); loc.replace(‘about:blank’); }, 1) } </script></body></html>” </pre> To: <pre style="border: 1px solid #eeeeee; overflow: auto">render :text => “<html><body><script type=’text/javascript’ charset=’utf-8′> var loc = document.location; with(window.parent) { setTimeout(function() { window.eval(‘#{script}’); try { loc.replace(‘about:blank’); } catch(ignored){} }, 1) } </script></body></html>“ </pre> </li></ol> You now have a new tinyMCE image plugin that allows a user to select an existing uploaded image or use a form to upload a new image. Once the image is uploaded the IFRAME is removed from the DOM and the image is inserted into the tinyMCE text box. Notes: <ol><li>The responds_to_parent plugin allows “AJAX” style file uploads by posting a form to a hidden IFRAME.</li><li>Dynamic IFRAME javascript code was generated by <a href="http://muffinresearch.co.uk/code/javascript/DOMTool/">http://muffinresearch.co.uk/code/javascript/DOMTool/ </a>- “The compatibility mode for attributes in Internet Explorer is only required should the user need to use innerHTML or outerHTML to get hold of the markup for a form. Using either name properties or setAttribute results in the name attributes being present in the document but not available to innerHTML or outerHTML. When disabled DOMTool uses setAttribute to generate name attributes”</li></ol> </div>

Image Selection and Upload Plugin for TinyMCE 30

false

For TinyMCE 2 with Rails 1.2.3 and attachment_fu

5264