Sinatra::IE6NoMore

A simple extension in support of the “IE6 No More” campaign to rid the world of the nasty bug ridden monstrosity called IE6.

Check the “IE6 No More” site for more information.

Installation

#  Add RubyGems.org (former Gemcutter) to your RubyGems sources 
$  gem sources -a http://rubygems.org

$  (sudo)? gem install sinatra-ie6nomore

Dependencies

This Gem depends upon the following:

Runtime:

sinatra ( >= 1.0.a )

Development & Tests:

sinatra-tests (>= 0.1.6)
rspec (>= 1.3.0 )
rack-test (>= 0.5.3)
rspec_hpricot_matchers (>= 0.1.0)

Getting Started

To use this extension in your App just follow these two simple steps:

Step 1

require 'sinatra/ie6nomore'

class YourApp < Sinatra::Base
  helpers Sinatra::IE6NoMore::Helpers
  # or
  register(Sinatra::IE6NoMore)

  <snip...>
end

Step 2

Add this to your ../views/layout.erb file.

<html>
  <body>

    <%= ie6_no_more %>

    <snip...>

And in your HTML you’ll see some output like this:

<!--[if lt IE 7]>
<div style="border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;">
  <div style="position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;">
    <a href="#" onclick="javascript:this.parentNode.parentNode.style.display="none"; return false;">
      <img src="/images/ie6nomore/ie6nomore-cornerx.jpg" style="border: none;" alt="Close this notice"/>
    </a>
  </div>
  <div style="width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;">
    <div style="width: 75px; float: left;">
      <img src="/images/ie6nomore/ie6nomore-warning.jpg" alt="Warning!"/>
    </div>
    <div style="width: 275px; float: left; font-family: Arial, sans-serif;">
      <div style="font-size: 14px; font-weight: bold; margin-top: 12px;">
        You are using an outdated browser
      </div>
      <div style="font-size: 12px; margin-top: 6px; line-height: 12px;">
        For a better experience using this site, please upgrade to a modern web browser.</div>
      </div>
      <div style="width: 75px; float: left;">
        <a href="http://getfirefox.com/" target="_blank">
          <img src="/images/ie6nomore/ie6nomore-firefox.jpg" style="border: none;" alt="Get Firefox 3.5"/>
        </a>
      </div>
      <div style="width: 75px; float: left;">
        <a href="http://www.browserforthebetter.com/download.html" target="_blank">
          <img src="/images/ie6nomore/ie6nomore-ie8.jpg" style="border: none;" alt="Get Internet Explorer 8"/>
        </a>
      </div>
      <div style="width: 73px; float: left;">
        <a href="http://www.apple.com/safari/download/" target="_blank">
          <img src="/images/ie6nomore/ie6nomore-safari.jpg" style="border: none;" alt="Get Safari 4"/>
        </a>
      </div>
      <div style="float: left;">
        <a href="http://www.google.com/chrome" target="_blank">
          <img src="/images/ie6nomore/ie6nomore-chrome.jpg" style="border: none;" alt="Get Google Chrome"/>
        </a>
      </div>
    </div>
  </div>
</div>
<![endif]-->

That’s what it does in a nutshell.

Customizing options

You can easily customize the output through the following parameters passed to the method call:

:locale => Sets the locale for the output. (Default = :en => English)
:img_host => The URL to the ie6nomore images (Default = /images/ie6nomore/). NB! with trailing slash
:border => The div border color. (Default = “1px solid #F7941D”)
:background => The div background color. (Default = “#FEEFDA”)
:text_color => The div text color. (Default = “black”)
:debug => Whether to encapsulate the code with IE Comments or not. So you can see how it looks like when developing on NON-IE 6 browsers. (Default = false)

Examples:

# to change the image host
<%= ie6_no_more(:img_host => "http://assets.example.com/images/ie6nomore/" ) %>

# to change the background colour
<%= ie6_no_more(:background => "#369" ) %>

# to check how the site looks like with the IE6NoMore banner displayed during development
<%= ie6_no_more(:debug => true) %>

Localizations

You can also localize the output text with these currently available localizations:

English (en)
Spanish (es)
French (fr)
Portugese (br)
Italian (it)
Japanese (jp)
Swedish (se)

Awaiting further translations from IE6NoMore website or through your fork.

GOTCHAs

By default the image host for the images displayed in the banner is your server [ /images/ie6nomore/ ]. However upon initial inclusion of the solution, you do not have the required images on your server.

You can remedie this by adding the following to your app’s Rakefile.

# in ../Rakefile

require 'sinatra/ie6nomore/rake

Then you can fire up your CLI and use this rake task:

rake ie6nomore:copy_images

You should now have all the images locally stored on your server.

NB! assumes that the '../public/' directory is at the root of your app, and that it contains an 'images/' directory.

RTFM

If the above is not clear enough, please check the Specs for a better understanding.

Errors / Bugs

If something is not behaving intuitively, it is a bug, and should be reported. Report it here: github.com/kematzy/sinatra-outputbuffer/issues

TODOs

Further localizations
Keep it up to date with any changes in Sinatra or IE6 No More site.
Any other improvements you can think of.

Note on Patches/Pull Requests

Fork the project.
Make your feature addition or bug fix.
Add tests for it. This is important so I don’t break it in a future version unintentionally.
Commit, do not mess with rakefile, version, or history.
- (if you want to have your own version, that is fine but bump version in a commit by itself I can ignore when I pull)
Send me a pull request. Bonus points for topic branches.

Copyright

Released under the MIT License.

See LICENSE for further details.