ActionItem152: implementing search inside lightbox

git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@1193 3f533792-8f58-4932-b0fe-aaf55b0a4547

ActionItem152: implementing search inside lightbox
git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@1193 3f533792-8f58-4932-b0fe-aaf55b0a4547
AntonioTerceiro
1 parent 372527d6
Showing 8 changed files with 355 additions and 4 deletions Show diff stats
app/controllers/public/search_controller.rb
app/helpers/application_helper.rb
app/helpers/lightbox_helper.rb
app/views/layouts/application.rhtml
app/views/search/popup.rhtml
public/javascripts/lightbox.js
public/stylesheets/lightbox.css
test/unit/lightbox_helper_text.rb
@@ -52,8 +52,8 @@ class SearchController &lt; ApplicationController
     @tagged = @tag.taggings.map(&:taggable)
   end
  
-  def advanced_search
-    
+  def popup
+    render :action => 'popup', :layout => false
   end
  
 end
 # Methods added to this helper will be available to all templates in the
 # application.
 module ApplicationHelper
+
   include PermissionName
+
+  include LightboxHelper
  
   # Displays context help. You can pass the content of the help message as the
   # first parameter or using template code inside a block passed to this
@@ -110,6 +113,8 @@ module ApplicationHelper
   end
  
   def shortcut_header_links
+    search_link = ( lightbox_link_to content_tag('span', _('Search')), { :controller => 'search', :action => 'popup' }, { :id => 'open_search'} )
+
     if logged_in?
       [
         ( link_to_homepage '<img src="' +
@@ -120,13 +125,13 @@ module ApplicationHelper
 	# O ID icon_accessibility tambem tem que aparcer e testei o link nao ta funcionado.
         ( link_to content_tag('span', _('Admin')), { :controller => 'admin_panel' }, :id => 'link_admin_panel' if current_user.person.is_admin?), 
         ( link_to content_tag('span', _('Logout')), { :controller => 'account', :action => 'logout'}, :id => 'link_logout'),
-        '<a href="javascript:alert(\'to do...\')" id="open_search"><span>Search</span></a>'
+        search_link,
       ]
     else
       [
         ( link_to _("%s's home") % @environment.name, { :controller=>"home" }, :id=>"link_to_envhome" ),
         ( link_to content_tag('span', _('Login')), { :controller => 'account', :action => 'login' }, :id => 'link_login' ),
-        '<a href="javascript:alert(\'to do...\')" id="open_search"><span>Search</span></a>'
+        search_link,
       ]
     end.join(" ")
   end
@@ -0,0 +1,19 @@
+module LightboxHelper
+
+  def include_lightbox_header
+    stylesheet_link_tag('lightbox') + javascript_include_tag('lightbox')
+  end
+
+  def lightbox_link_to(text, url, options = {})
+    the_class = 'lbOn'
+    the_class << " #{options[:class]}" if options.has_key?(:class)
+    link_to(text, url, options.merge(:class => the_class ))
+  end
+
+  def lightbox_close(text, options = {})
+    the_class = 'lbAction'
+    the_class << " #{options[:class]}" if options.has_key?(:class)
+    link_to(text, '#', options.merge({ :class => the_class, :rel => 'deactivate' }))
+  end
+
+end
@@ -17,6 +17,7 @@
     <%= stylesheet_link_tag 'button' %>
     <%= stylesheet_link_tag 'search' %>
     <%= javascript_include_tag 'menu' %>
+    <%= include_lightbox_header %>
     <%# cms stuff %>
     <% if params[:controller] == 'cms' %>
       <%= javascript_include_tag 'cms' %>
@@ -0,0 +1,21 @@
+<h2><%= _('Search %s') % @environment.name %></h2>
+
+<% form_tag(:action => 'index') do%>
+  <div id='search-' style='text-align: center;'>
+    <%= text_field_tag('query', '', :style => 'width: 70%;') %>
+    <%= submit_tag(_('Search')) %>
+  </div>
+
+  <h3><%= _('Search options') %></h3>
+
+
+  <div>
+    <%= submit_tag(_('Search')) %>
+    <%= lightbox_close(_('Close')) %>
+  </div>
+
+<% end %>
+
+<script type='text/javascript'>
+  $('query').focus();
+</script>
@@ -0,0 +1,202 @@
+/*
+Created By: Chris Campbell
+Website: http://particletree.com
+Date: 2/1/2006
+
+Inspired by the lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
+*/
+
+/*-------------------------------GLOBAL VARIABLES------------------------------------*/
+
+var detect = navigator.userAgent.toLowerCase();
+var OS,browser,version,total,thestring;
+
+/*-----------------------------------------------------------------------------------------------*/
+
+//Browser detect script origionally created by Peter Paul Koch at http://www.quirksmode.org/
+
+function getBrowserInfo() {
+	if (checkIt('konqueror')) {
+		browser = "Konqueror";
+		OS = "Linux";
+	}
+	else if (checkIt('safari')) browser 	= "Safari"
+	else if (checkIt('omniweb')) browser 	= "OmniWeb"
+	else if (checkIt('opera')) browser 		= "Opera"
+	else if (checkIt('webtv')) browser 		= "WebTV";
+	else if (checkIt('icab')) browser 		= "iCab"
+	else if (checkIt('msie')) browser 		= "Internet Explorer"
+	else if (!checkIt('compatible')) {
+		browser = "Netscape Navigator"
+		version = detect.charAt(8);
+	}
+	else browser = "An unknown browser";
+
+	if (!version) version = detect.charAt(place + thestring.length);
+
+	if (!OS) {
+		if (checkIt('linux')) OS 		= "Linux";
+		else if (checkIt('x11')) OS 	= "Unix";
+		else if (checkIt('mac')) OS 	= "Mac"
+		else if (checkIt('win')) OS 	= "Windows"
+		else OS 								= "an unknown operating system";
+	}
+}
+
+function checkIt(string) {
+	place = detect.indexOf(string) + 1;
+	thestring = string;
+	return place;
+}
+
+/*-----------------------------------------------------------------------------------------------*/
+
+Event.observe(window, 'load', initialize, false);
+Event.observe(window, 'load', getBrowserInfo, false);
+Event.observe(window, 'unload', Event.unloadCache, false);
+
+var lightbox = Class.create();
+
+lightbox.prototype = {
+
+	yPos : 0,
+	xPos : 0,
+
+	initialize: function(ctrl) {
+		this.content = ctrl.href;
+		Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
+		ctrl.onclick = function(){return false;};
+	},
+	
+	// Turn everything on - mainly the IE fixes
+	activate: function(){
+		if (browser == 'Internet Explorer'){
+			this.getScroll();
+			this.prepareIE('100%', 'hidden');
+			this.setScroll(0,0);
+			this.hideSelects('hidden');
+		}
+		this.displayLightbox("block");
+	},
+	
+	// Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
+	prepareIE: function(height, overflow){
+		bod = document.getElementsByTagName('body')[0];
+		bod.style.height = height;
+		bod.style.overflow = overflow;
+  
+		htm = document.getElementsByTagName('html')[0];
+		htm.style.height = height;
+		htm.style.overflow = overflow; 
+	},
+	
+	// In IE, select elements hover on top of the lightbox
+	hideSelects: function(visibility){
+		selects = document.getElementsByTagName('select');
+		for(i = 0; i < selects.length; i++) {
+			selects[i].style.visibility = visibility;
+		}
+	},
+	
+	// Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
+	getScroll: function(){
+		if (self.pageYOffset) {
+			this.yPos = self.pageYOffset;
+		} else if (document.documentElement && document.documentElement.scrollTop){
+			this.yPos = document.documentElement.scrollTop; 
+		} else if (document.body) {
+			this.yPos = document.body.scrollTop;
+		}
+	},
+	
+	setScroll: function(x, y){
+		window.scrollTo(x, y); 
+	},
+	
+	displayLightbox: function(display){
+		$('overlay').style.display = display;
+		$('lightbox').style.display = display;
+		if(display != 'none') this.loadInfo();
+	},
+	
+	// Begin Ajax request based off of the href of the clicked linked
+	loadInfo: function() {
+		var myAjax = new Ajax.Request(
+        this.content,
+        {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
+		);
+		
+	},
+	
+	// Display Ajax response
+	processInfo: function(response){
+		info = "<div id='lbContent'>" + response.responseText + "</div>";
+		new Insertion.Before($('lbLoadMessage'), info)
+		$('lightbox').className = "done";	
+		this.actions();			
+	},
+	
+	// Search through new links within the lightbox, and attach click event
+	actions: function(){
+		lbActions = document.getElementsByClassName('lbAction');
+
+		for(i = 0; i < lbActions.length; i++) {
+			Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
+			lbActions[i].onclick = function(){return false;};
+		}
+
+	},
+	
+	// Example of creating your own functionality once lightbox is initiated
+	insert: function(e){
+	   link = Event.element(e).parentNode;
+	   Element.remove($('lbContent'));
+	 
+	   var myAjax = new Ajax.Request(
+			  link.href,
+			  {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
+	   );
+	 
+	},
+	
+	// Example of creating your own functionality once lightbox is initiated
+	deactivate: function(){
+		Element.remove($('lbContent'));
+		
+		if (browser == "Internet Explorer"){
+			this.setScroll(0,this.yPos);
+			this.prepareIE("auto", "auto");
+			this.hideSelects("visible");
+		}
+		
+		this.displayLightbox("none");
+	}
+}
+
+/*-----------------------------------------------------------------------------------------------*/
+
+// Onload, make all links that need to trigger a lightbox active
+function initialize(){
+	addLightboxMarkup();
+	lbox = document.getElementsByClassName('lbOn');
+	for(i = 0; i < lbox.length; i++) {
+		valid = new lightbox(lbox[i]);
+	}
+}
+
+// Add in markup necessary to make this work. Basically two divs:
+// Overlay holds the shadow
+// Lightbox is the centered square that the content is put into.
+function addLightboxMarkup() {
+	bod 				= document.getElementsByTagName('body')[0];
+	overlay 			= document.createElement('div');
+	overlay.id		= 'overlay';
+	lb					= document.createElement('div');
+	lb.id				= 'lightbox';
+	lb.className 	= 'loading';
+	lb.innerHTML	= '<div id="lbLoadMessage">' +
+						  '<p>Loading</p>' +
+						  '</div>';
+	bod.appendChild(overlay);
+	bod.appendChild(lb);
+}
 \ No newline at end of file
@@ -0,0 +1,62 @@
+/* - - - - - - - - - - - - - - - - - - - - -
+
+Title : Lightbox CSS
+Author : Kevin Hale
+URL : http://particletree.com/features/lightbox-gone-wild/
+
+Created : January 13, 2006
+Modified : February 1, 2006
+
+- - - - - - - - - - - - - - - - - - - - - */
+
+#lightbox{
+	display:none;
+	position: absolute;
+	top:50%;
+	left:50%;
+	z-index:9999;
+	width:500px;
+	height:400px;
+	margin:-220px 0 0 -250px;
+	border:1px solid #fff;
+	background:#FDFCE9;
+	text-align:left;
+}
+#lightbox[id]{
+	position:fixed;
+}
+
+#overlay{
+	display:none;
+	position:absolute;
+	top:0;
+	left:0;
+	width:100%;
+	height:100%;
+	z-index:5000;
+	background-color:#000;
+	-moz-opacity: 0.8;
+	opacity:.80;
+	filter: alpha(opacity=80);
+}
+#overlay[id]{
+	position:fixed;
+}
+
+#lightbox.done #lbLoadMessage{
+	display:none;
+}
+#lightbox.done #lbContent{
+	display:block;
+}
+#lightbox.loading #lbContent{
+	display:none;
+}
+#lightbox.loading #lbLoadMessage{
+	display:block;
+}
+
+#lightbox.done img{
+	width:100%;
+	height:100%;
+}
 \ No newline at end of file
@@ -0,0 +1,41 @@
+require File.dirname(__FILE__) + '/../test_helper'
+
+class LightboxHelperTest < Test::Unit::TestCase
+
+  include LightboxHelper
+
+  should 'include lightbox properly' do
+    expects(:stylesheet_link_tag).with('lightbox').returns('[lightbox.css]')
+    expects(:javascript_include_tag).with('lightbox').returns('[lightbox.js]')
+    assert_equal '[lightbox.css][lightbox.js]', include_lightbox_header
+  end
+
+  should 'provide the needed files' do
+    assert File.exists?(File.join(RAILS_ROOT, 'public', 'stylesheets', 'lightbox.css')), 'lightbox.css expected to be in public/stylesheets, but not found'
+    assert File.exists?(File.join(RAILS_ROOT, 'public', 'javascripts', 'lightbox.js')), 'lightbox.js expected to be in public/javascripts, but not found'
+  end
+
+  should 'provide lightbox_link_to helper' do
+    expects(:link_to).with('text', { :action => 'view', :id => '1' }, { :class => 'lbOn', :id => 'my-link' }).returns('[link]')
+    assert_equal '[link]', lightbox_link_to('text', { :action => 'view', :id => '1'}, { :id => 'my-link' })
+  end
+
+  should 'merge existing :class option in lightbox_link_to' do
+    expects(:link_to).with('text', { :action => 'view', :id => '1' }, { :class => 'lbOn my-button', :id => 'my-link' }).returns('[link]')
+    assert_equal '[link]', lightbox_link_to('text', { :action => 'view', :id => '1'}, { :class => 'my-button',  :id => 'my-link' })
+
+  end
+
+  should 'provide link to close lightbox' do
+    expects(:link_to).with('text', '#', { :class => 'lbAction', :rel => 'deactivate', :id => 'my-id' }).returns('[close-lightbox]')
+
+    assert_equal '[close-lightbox]', lightbox_close('text', :id => 'my-id')
+  end
+
+  should 'merge existing :class option in lightbox_close' do
+    expects(:link_to).with('text', '#', { :class => 'lbAction my-class', :rel => 'deactivate', :id => 'my-id' }).returns('[close-lightbox]')
+
+    assert_equal '[close-lightbox]', lightbox_close('text', :class => 'my-class', :id => 'my-id' )
+  end
+
+end
...	...	@@ -52,8 +52,8 @@ class SearchController < ApplicationController
52	52	@tagged = @tag.taggings.map(&:taggable)
53	53	end
54	54
55		- def advanced_search
56		-
	55	+ def popup
	56	+ render :action => 'popup', :layout => false
57	57	end
58	58
59	59	end
...	...
1	1	# Methods added to this helper will be available to all templates in the
2	2	# application.
3	3	module ApplicationHelper
	4	+
4	5	include PermissionName
	6	+
	7	+ include LightboxHelper
5	8
6	9	# Displays context help. You can pass the content of the help message as the
7	10	# first parameter or using template code inside a block passed to this
...	...	@@ -110,6 +113,8 @@ module ApplicationHelper
110	113	end
111	114
112	115	def shortcut_header_links
	116	+ search_link = ( lightbox_link_to content_tag('span', _('Search')), { :controller => 'search', :action => 'popup' }, { :id => 'open_search'} )
	117	+
113	118	if logged_in?
114	119	[
115	120	( link_to_homepage '<img src="' +
...	...	@@ -120,13 +125,13 @@ module ApplicationHelper
120	125	# O ID icon_accessibility tambem tem que aparcer e testei o link nao ta funcionado.
121	126	( link_to content_tag('span', _('Admin')), { :controller => 'admin_panel' }, :id => 'link_admin_panel' if current_user.person.is_admin?),
122	127	( link_to content_tag('span', _('Logout')), { :controller => 'account', :action => 'logout'}, :id => 'link_logout'),
123		- '<a href="javascript:alert(\'to do...\')" id="open_search"><span>Search</span></a>'
	128	+ search_link,
124	129	]
125	130	else
126	131	[
127	132	( link_to _("%s's home") % @environment.name, { :controller=>"home" }, :id=>"link_to_envhome" ),
128	133	( link_to content_tag('span', _('Login')), { :controller => 'account', :action => 'login' }, :id => 'link_login' ),
129		- '<a href="javascript:alert(\'to do...\')" id="open_search"><span>Search</span></a>'
	134	+ search_link,
130	135	]
131	136	end.join(" ")
132	137	end
...	...
...	...	@@ -0,0 +1,19 @@
	1	+module LightboxHelper
	2	+
	3	+ def include_lightbox_header
	4	+ stylesheet_link_tag('lightbox') + javascript_include_tag('lightbox')
	5	+ end
	6	+
	7	+ def lightbox_link_to(text, url, options = {})
	8	+ the_class = 'lbOn'
	9	+ the_class << " #{options[:class]}" if options.has_key?(:class)
	10	+ link_to(text, url, options.merge(:class => the_class ))
	11	+ end
	12	+
	13	+ def lightbox_close(text, options = {})
	14	+ the_class = 'lbAction'
	15	+ the_class << " #{options[:class]}" if options.has_key?(:class)
	16	+ link_to(text, '#', options.merge({ :class => the_class, :rel => 'deactivate' }))
	17	+ end
	18	+
	19	+end
...	...
...	...	@@ -17,6 +17,7 @@
17	17	<%= stylesheet_link_tag 'button' %>
18	18	<%= stylesheet_link_tag 'search' %>
19	19	<%= javascript_include_tag 'menu' %>
	20	+ <%= include_lightbox_header %>
20	21	<%# cms stuff %>
21	22	<% if params[:controller] == 'cms' %>
22	23	<%= javascript_include_tag 'cms' %>
...	...
...	...	@@ -0,0 +1,21 @@
	1	+<h2><%= _('Search %s') % @environment.name %></h2>
	2	+
	3	+<% form_tag(:action => 'index') do%>
	4	+ <div id='search-' style='text-align: center;'>
	5	+ <%= text_field_tag('query', '', :style => 'width: 70%;') %>
	6	+ <%= submit_tag(_('Search')) %>
	7	+ </div>
	8	+
	9	+ <h3><%= _('Search options') %></h3>
	10	+
	11	+
	12	+ <div>
	13	+ <%= submit_tag(_('Search')) %>
	14	+ <%= lightbox_close(_('Close')) %>
	15	+ </div>
	16	+
	17	+<% end %>
	18	+
	19	+<script type='text/javascript'>
	20	+ $('query').focus();
	21	+</script>
...	...
...	...	@@ -0,0 +1,202 @@
	1	+/*
	2	+Created By: Chris Campbell
	3	+Website: http://particletree.com
	4	+Date: 2/1/2006
	5	+
	6	+Inspired by the lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
	7	+*/
	8	+
	9	+/-------------------------------GLOBAL VARIABLES------------------------------------/
	10	+
	11	+var detect = navigator.userAgent.toLowerCase();
	12	+var OS,browser,version,total,thestring;
	13	+
	14	+/-----------------------------------------------------------------------------------------------/
	15	+
	16	+//Browser detect script origionally created by Peter Paul Koch at http://www.quirksmode.org/
	17	+
	18	+function getBrowserInfo() {
	19	+ if (checkIt('konqueror')) {
	20	+ browser = "Konqueror";
	21	+ OS = "Linux";
	22	+ }
	23	+ else if (checkIt('safari')) browser = "Safari"
	24	+ else if (checkIt('omniweb')) browser = "OmniWeb"
	25	+ else if (checkIt('opera')) browser = "Opera"
	26	+ else if (checkIt('webtv')) browser = "WebTV";
	27	+ else if (checkIt('icab')) browser = "iCab"
	28	+ else if (checkIt('msie')) browser = "Internet Explorer"
	29	+ else if (!checkIt('compatible')) {
	30	+ browser = "Netscape Navigator"
	31	+ version = detect.charAt(8);
	32	+ }
	33	+ else browser = "An unknown browser";
	34	+
	35	+ if (!version) version = detect.charAt(place + thestring.length);
	36	+
	37	+ if (!OS) {
	38	+ if (checkIt('linux')) OS = "Linux";
	39	+ else if (checkIt('x11')) OS = "Unix";
	40	+ else if (checkIt('mac')) OS = "Mac"
	41	+ else if (checkIt('win')) OS = "Windows"
	42	+ else OS = "an unknown operating system";
	43	+ }
	44	+}
	45	+
	46	+function checkIt(string) {
	47	+ place = detect.indexOf(string) + 1;
	48	+ thestring = string;
	49	+ return place;
	50	+}
	51	+
	52	+/-----------------------------------------------------------------------------------------------/
	53	+
	54	+Event.observe(window, 'load', initialize, false);
	55	+Event.observe(window, 'load', getBrowserInfo, false);
	56	+Event.observe(window, 'unload', Event.unloadCache, false);
	57	+
	58	+var lightbox = Class.create();
	59	+
	60	+lightbox.prototype = {
	61	+
	62	+ yPos : 0,
	63	+ xPos : 0,
	64	+
	65	+ initialize: function(ctrl) {
	66	+ this.content = ctrl.href;
	67	+ Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
	68	+ ctrl.onclick = function(){return false;};
	69	+ },
	70	+
	71	+ // Turn everything on - mainly the IE fixes
	72	+ activate: function(){
	73	+ if (browser == 'Internet Explorer'){
	74	+ this.getScroll();
	75	+ this.prepareIE('100%', 'hidden');
	76	+ this.setScroll(0,0);
	77	+ this.hideSelects('hidden');
	78	+ }
	79	+ this.displayLightbox("block");
	80	+ },
	81	+
	82	+ // Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
	83	+ prepareIE: function(height, overflow){
	84	+ bod = document.getElementsByTagName('body')[0];
	85	+ bod.style.height = height;
	86	+ bod.style.overflow = overflow;
	87	+
	88	+ htm = document.getElementsByTagName('html')[0];
	89	+ htm.style.height = height;
	90	+ htm.style.overflow = overflow;
	91	+ },
	92	+
	93	+ // In IE, select elements hover on top of the lightbox
	94	+ hideSelects: function(visibility){
	95	+ selects = document.getElementsByTagName('select');
	96	+ for(i = 0; i < selects.length; i++) {
	97	+ selects[i].style.visibility = visibility;
	98	+ }
	99	+ },
	100	+
	101	+ // Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
	102	+ getScroll: function(){
	103	+ if (self.pageYOffset) {
	104	+ this.yPos = self.pageYOffset;
	105	+ } else if (document.documentElement && document.documentElement.scrollTop){
	106	+ this.yPos = document.documentElement.scrollTop;
	107	+ } else if (document.body) {
	108	+ this.yPos = document.body.scrollTop;
	109	+ }
	110	+ },
	111	+
	112	+ setScroll: function(x, y){
	113	+ window.scrollTo(x, y);
	114	+ },
	115	+
	116	+ displayLightbox: function(display){
	117	+ $('overlay').style.display = display;
	118	+ $('lightbox').style.display = display;
	119	+ if(display != 'none') this.loadInfo();
	120	+ },
	121	+
	122	+ // Begin Ajax request based off of the href of the clicked linked
	123	+ loadInfo: function() {
	124	+ var myAjax = new Ajax.Request(
	125	+ this.content,
	126	+ {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
	127	+ );
	128	+
	129	+ },
	130	+
	131	+ // Display Ajax response
	132	+ processInfo: function(response){
	133	+ info = "<div id='lbContent'>" + response.responseText + "</div>";
	134	+ new Insertion.Before($('lbLoadMessage'), info)
	135	+ $('lightbox').className = "done";
	136	+ this.actions();
	137	+ },
	138	+
	139	+ // Search through new links within the lightbox, and attach click event
	140	+ actions: function(){
	141	+ lbActions = document.getElementsByClassName('lbAction');
	142	+
	143	+ for(i = 0; i < lbActions.length; i++) {
	144	+ Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
	145	+ lbActions[i].onclick = function(){return false;};
	146	+ }
	147	+
	148	+ },
	149	+
	150	+ // Example of creating your own functionality once lightbox is initiated
	151	+ insert: function(e){
	152	+ link = Event.element(e).parentNode;
	153	+ Element.remove($('lbContent'));
	154	+
	155	+ var myAjax = new Ajax.Request(
	156	+ link.href,
	157	+ {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
	158	+ );
	159	+
	160	+ },
	161	+
	162	+ // Example of creating your own functionality once lightbox is initiated
	163	+ deactivate: function(){
	164	+ Element.remove($('lbContent'));
	165	+
	166	+ if (browser == "Internet Explorer"){
	167	+ this.setScroll(0,this.yPos);
	168	+ this.prepareIE("auto", "auto");
	169	+ this.hideSelects("visible");
	170	+ }
	171	+
	172	+ this.displayLightbox("none");
	173	+ }
	174	+}
	175	+
	176	+/-----------------------------------------------------------------------------------------------/
	177	+
	178	+// Onload, make all links that need to trigger a lightbox active
	179	+function initialize(){
	180	+ addLightboxMarkup();
	181	+ lbox = document.getElementsByClassName('lbOn');
	182	+ for(i = 0; i < lbox.length; i++) {
	183	+ valid = new lightbox(lbox[i]);
	184	+ }
	185	+}
	186	+
	187	+// Add in markup necessary to make this work. Basically two divs:
	188	+// Overlay holds the shadow
	189	+// Lightbox is the centered square that the content is put into.
	190	+function addLightboxMarkup() {
	191	+ bod = document.getElementsByTagName('body')[0];
	192	+ overlay = document.createElement('div');
	193	+ overlay.id = 'overlay';
	194	+ lb = document.createElement('div');
	195	+ lb.id = 'lightbox';
	196	+ lb.className = 'loading';
	197	+ lb.innerHTML = '<div id="lbLoadMessage">' +
	198	+ '<p>Loading</p>' +
	199	+ '</div>';
	200	+ bod.appendChild(overlay);
	201	+ bod.appendChild(lb);
	202	+}
0	203	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,62 @@
	1	+/* - - - - - - - - - - - - - - - - - - - - -
	2	+
	3	+Title : Lightbox CSS
	4	+Author : Kevin Hale
	5	+URL : http://particletree.com/features/lightbox-gone-wild/
	6	+
	7	+Created : January 13, 2006
	8	+Modified : February 1, 2006
	9	+
	10	+- - - - - - - - - - - - - - - - - - - - - */
	11	+
	12	+#lightbox{
	13	+ display:none;
	14	+ position: absolute;
	15	+ top:50%;
	16	+ left:50%;
	17	+ z-index:9999;
	18	+ width:500px;
	19	+ height:400px;
	20	+ margin:-220px 0 0 -250px;
	21	+ border:1px solid #fff;
	22	+ background:#FDFCE9;
	23	+ text-align:left;
	24	+}
	25	+#lightbox[id]{
	26	+ position:fixed;
	27	+}
	28	+
	29	+#overlay{
	30	+ display:none;
	31	+ position:absolute;
	32	+ top:0;
	33	+ left:0;
	34	+ width:100%;
	35	+ height:100%;
	36	+ z-index:5000;
	37	+ background-color:#000;
	38	+ -moz-opacity: 0.8;
	39	+ opacity:.80;
	40	+ filter: alpha(opacity=80);
	41	+}
	42	+#overlay[id]{
	43	+ position:fixed;
	44	+}
	45	+
	46	+#lightbox.done #lbLoadMessage{
	47	+ display:none;
	48	+}
	49	+#lightbox.done #lbContent{
	50	+ display:block;
	51	+}
	52	+#lightbox.loading #lbContent{
	53	+ display:none;
	54	+}
	55	+#lightbox.loading #lbLoadMessage{
	56	+ display:block;
	57	+}
	58	+
	59	+#lightbox.done img{
	60	+ width:100%;
	61	+ height:100%;
	62	+}
0	63	\ No newline at end of file
...	...
...	...	@@ -0,0 +1,41 @@
	1	+require File.dirname(__FILE__) + '/../test_helper'
	2	+
	3	+class LightboxHelperTest < Test::Unit::TestCase
	4	+
	5	+ include LightboxHelper
	6	+
	7	+ should 'include lightbox properly' do
	8	+ expects(:stylesheet_link_tag).with('lightbox').returns('[lightbox.css]')
	9	+ expects(:javascript_include_tag).with('lightbox').returns('[lightbox.js]')
	10	+ assert_equal '[lightbox.css][lightbox.js]', include_lightbox_header
	11	+ end
	12	+
	13	+ should 'provide the needed files' do
	14	+ assert File.exists?(File.join(RAILS_ROOT, 'public', 'stylesheets', 'lightbox.css')), 'lightbox.css expected to be in public/stylesheets, but not found'
	15	+ assert File.exists?(File.join(RAILS_ROOT, 'public', 'javascripts', 'lightbox.js')), 'lightbox.js expected to be in public/javascripts, but not found'
	16	+ end
	17	+
	18	+ should 'provide lightbox_link_to helper' do
	19	+ expects(:link_to).with('text', { :action => 'view', :id => '1' }, { :class => 'lbOn', :id => 'my-link' }).returns('[link]')
	20	+ assert_equal '[link]', lightbox_link_to('text', { :action => 'view', :id => '1'}, { :id => 'my-link' })
	21	+ end
	22	+
	23	+ should 'merge existing :class option in lightbox_link_to' do
	24	+ expects(:link_to).with('text', { :action => 'view', :id => '1' }, { :class => 'lbOn my-button', :id => 'my-link' }).returns('[link]')
	25	+ assert_equal '[link]', lightbox_link_to('text', { :action => 'view', :id => '1'}, { :class => 'my-button', :id => 'my-link' })
	26	+
	27	+ end
	28	+
	29	+ should 'provide link to close lightbox' do
	30	+ expects(:link_to).with('text', '#', { :class => 'lbAction', :rel => 'deactivate', :id => 'my-id' }).returns('[close-lightbox]')
	31	+
	32	+ assert_equal '[close-lightbox]', lightbox_close('text', :id => 'my-id')
	33	+ end
	34	+
	35	+ should 'merge existing :class option in lightbox_close' do
	36	+ expects(:link_to).with('text', '#', { :class => 'lbAction my-class', :rel => 'deactivate', :id => 'my-id' }).returns('[close-lightbox]')
	37	+
	38	+ assert_equal '[close-lightbox]', lightbox_close('text', :class => 'my-class', :id => 'my-id' )
	39	+ end
	40	+
	41	+end
...	...