Module: Sinatra::IE6NoMore

Defined in:
lib/sinatra/ie6nomore.rb

Overview

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 %>

  </body>
</html>

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>
<![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! No 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.

Copyright © 2010 Kematzy and the guys behind “IE6 No More” site.

Released under the MIT License.

See LICENSE for further details.

Defined Under Namespace

Modules: Helpers

Constant Summary collapse

VERSION = 
'0.1.3'

Class Method Summary collapse

Class Method Details

.gem_root_path ⇒ Object

This method is part of a private API. You should avoid using this method if possible, as it may be removed or be changed in the future.

Sets the full path to the gem_installation, used by the Rake tasks included in the Gem.

Examples

Sinatra::IE6NoMore.gem_root_path  => /path/2/gems/sinatra-ie6nomore-X.X.X



184
185
186
 
# File 'lib/sinatra/ie6nomore.rb', line 184

def self.gem_root_path
  File.expand_path(File.join(File.dirname(__FILE__), '..', '..') )
end

.registered(app) ⇒ Object

/ Helpers



273
274
275
 
# File 'lib/sinatra/ie6nomore.rb', line 273

def self.registered(app)
  app.helpers Sinatra::IE6NoMore::Helpers
end

.version ⇒ Object 



173
 
# File 'lib/sinatra/ie6nomore.rb', line 173

def self.version; "Sinatra::IE6NoMore v#{VERSION}"; end