Download as
Browse Code »

Commit 48e8a1da9776f48e6a68b07d4c3b59da342bcff7

Authored by Braulio Bhavamitra
1 parent 582e694e
Exists in master and in 22 other branches angular_poc, api-article-archived, article-readonly, backup-7-jan-2016, captcha_serpro_plugin, content-manager-hostspot, export-comment-paragraph, fix_event_date_issue, login-captcha, master_rails3, new_video_plugin, pg_search_rank, production, refactor_with_role, refactor_with_role_scope, remove_profile_cat_icons, resend_confirmation_email, staging, staging_rails3, tasks_keep_filter_params, theme-brasil-digital-from-staging, travis

modals: Replace lightbox with colorbox

Showing 18 changed files with 19 additions and 420 deletions   Show diff stats
app/helpers/application_helper.rb
  Diff comments   View file @48e8a1d
... ... @@ -8,8 +8,6 @@ module ApplicationHelper
8 8  
9 9 include PermissionNameHelper
10 10  
11   - include LightboxHelper
12   -
13 11 include ColorboxHelper
14 12  
15 13 include BoxesHelper
... ... @@ -649,8 +647,8 @@ module ApplicationHelper
649 647 ' onfocus="if(this.value==\''+s+'\'){this.value=\'\'} this.form.className=\'focus-in\'"'+
650 648 ' onblur="if(/^\s*$/.test(this.value)){this.value=\''+s+'\'} this.form.className=\'focus-out\'">'+
651 649 '</form>'
652   - else #opt == 'lightbox_link' is default
653   - lightbox_link_to '<span class="icon-menu-search"></span>'+ _('Search'), {
  650 + else
  651 + colorbox_link_to '<span class="icon-menu-search"></span>'+ _('Search'), {
654 652 :controller => 'search',
655 653 :action => 'popup',
656 654 :category_path => (@category ? @category.explode_path : nil)},
... ...
app/helpers/colorbox_helper.rb
  Diff comments   View file @48e8a1d
... ... @@ -17,7 +17,7 @@ module ColorboxHelper
17 17 end
18 18  
19 19 def colorbox_close_button(text, options = {})
20   - button(:close, text, '#', colorbox_options(options, :close))
  20 + button(:close, text, '#', colorbox_options(options, :close).merge(:rel => 'deactivate'))
21 21 end
22 22  
23 23 def colorbox_button(type, label, url, options = {})
... ...
app/helpers/lightbox_helper.rb
View file @582e694
... ... @@ -1,36 +0,0 @@
1   -module LightboxHelper
2   -
3   - def lightbox_link_to(text, url, options = {})
4   - link_to(text, url, lightbox_options(options))
5   - end
6   -
7   - def lightbox_close_button(text, options = {})
8   - button(:close, text, '#', lightbox_options(options, 'lbAction').merge(:rel => 'deactivate'))
9   - end
10   -
11   - def lightbox_button(type, label, url, options = {})
12   - button(type, label, url, lightbox_options(options))
13   - end
14   -
15   - def lightbox_icon_button(type, label, url, options = {})
16   - icon_button(type, label, url, lightbox_options(options))
17   - end
18   -
19   - # options must be an HTML options hash as passed to link_to etc.
20   - #
21   - # returns a new hash with lightbox class added. Keeps existing classes.
22   - def lightbox_options(options, lightbox_type = 'lbOn')
23   - the_class = lightbox_type
24   - the_class << " #{options[:class]}" if options.has_key?(:class)
25   - options.merge(:class => the_class)
26   - end
27   -
28   - def lightbox?
29   - request.xhr?
30   - end
31   -
32   - def lightbox_remote_button(type, label, url, options = {})
33   - button(type, label, url, lightbox_options(options, 'remote-lbOn'))
34   - end
35   -
36   -end
app/views/account/_login_form.html.erb
  Diff comments   View file @48e8a1d
1 1 <%= labelled_form_for :user,
2 2 :url => { :controller => 'account', :action => (params[:enterprise_code] ? 'activate_enterprise' : 'login') } do |f| %>
3 3  
4   -<%= f.text_field :login,
5   - :id => ( lightbox? ? 'lightbox_' : '' ) + 'user_login',
6   - :onchange => 'this.value = convToValidLogin( this.value )' %>
  4 +<%= f.text_field :login, :id => 'user_login', :onchange => 'this.value = convToValidLogin( this.value )' %>
7 5  
8   -<%= f.password_field :password,
9   - :id => ( lightbox? ? 'lightbox_' : '' ) + 'user_password' %>
  6 +<%= f.password_field :password, :id => 'user_password' %>
10 7  
11 8 <% if params[:enterprise_code] %>
12 9 <%= hidden_field_tag :enterprise_code, params[:enterprise_code] %>
... ... @@ -16,7 +13,7 @@
16 13  
17 14 <% button_bar do %>
18 15 <%= submit_button( 'login', _('Log in') )%>
19   - <%= lightbox_close_button(_('Cancel')) if lightbox? %>
  16 + <%= colorbox_close_button _('Cancel') if request.xhr? %>
20 17 <% end %>
21 18  
22 19 <% end %>
... ...
app/views/account/index_anonymous.html.erb
  Diff comments   View file @48e8a1d
1 1 <h1><%= _('Identify yourself') %></h1>
2 2  
3 3 <p>
4   -<%= lightbox_link_to _('Login.'), { :controller => 'account', :action => 'login_popup' } %>
  4 +<%= colorbox_link_to _('Login.'), { :controller => 'account', :action => 'login_popup' } %>
5 5  
6 6 <%= _('You need to login to be able to use all the features in this environment.') %>
7 7 </p>
... ...
app/views/account/logout_popup.html.erb
  Diff comments   View file @48e8a1d
... ... @@ -2,6 +2,6 @@
2 2 <p>
3 3 <% button_bar do %>
4 4 <%= button :ok, _('Yes'), { :controller => 'account', :action => 'logout' } %>
5   - <%= lightbox_close_button _('No, I want to stay.') %>
  5 + <%= colorbox_close_button _('No, I want to stay.') %>
6 6 <% end %>
7 7 </p>
... ...
app/views/cms/edit.html.erb
  Diff comments   View file @48e8a1d
... ... @@ -28,7 +28,7 @@
28 28 <% end %>
29 29  
30 30 <div style='float: right'>
31   - <%= lightbox_button :help, _('Why categorize?'), :action => 'why_categorize' %>
  31 + <%= colorbox_button :help, _('Why categorize?'), :action => 'why_categorize' %>
32 32 </div>
33 33  
34 34 <%= select_categories(:article, _('Categorize your article')) %>
... ...
app/views/cms/why_categorize.html.erb
  Diff comments   View file @48e8a1d
... ... @@ -5,5 +5,5 @@
5 5 </p>
6 6  
7 7 <% button_bar do %>
8   - <%= lightbox_close_button _('Close') %>
  8 + <%= colorbox_close_button _('Close') %>
9 9 <% end %>
... ...
app/views/profile/join.html.erb
  Diff comments   View file @48e8a1d
... ... @@ -9,7 +9,7 @@
9 9 <%= hidden_field_tag(:confirmation, 1) %>
10 10 <%= submit_button(:ok, _("Yes, I want to join.") % profile.name) %>
11 11 <% if logged_in? && request.xhr? %>
12   - <%= lightbox_close_button(_("No, I don't want")) %>
  12 + <%= colorbox_close_button _("No, I don't want") %>
13 13 <% else %>
14 14 <%= button(:cancel, _("No, I don't want."), profile.url) %>
15 15 <% end %>
... ...
app/views/profile/leave.html.erb
  Diff comments   View file @48e8a1d
... ... @@ -9,7 +9,7 @@
9 9 <%= hidden_field_tag(:back_to, @back_to) %>
10 10 <%= submit_button(:ok, _("Yes, I want to leave.") % profile.name) %>
11 11 <% if logged_in? && request.xhr? %>
12   - <%= lightbox_close_button(_("No, I don't want")) %>
  12 + <%= colorbox_close_button _("No, I don't want") %>
13 13 <% else %>
14 14 <%= button(:cancel, _("No, I don't want."), profile.url) %>
15 15 <% end %>
... ...
app/views/profile_themes/add_css.html.erb
  Diff comments   View file @48e8a1d
... ... @@ -5,7 +5,7 @@
5 5  
6 6 <% button_bar do %>
7 7 <%= submit_button(:add, _('Add')) %>
8   - <%= lightbox_close_button(_('Cancel')) %>
  8 + <%= colorbox_close_button _('Cancel') %>
9 9 <% end %>
10 10  
11 11 <% end %>
... ...
app/views/profile_themes/edit.html.erb
  Diff comments   View file @48e8a1d
... ... @@ -16,7 +16,7 @@
16 16 <% end %>
17 17 </ul>
18 18 <% button_bar do %>
19   - <%= lightbox_button(:add, _('New CSS'), :action => 'add_css', :id => @theme.id) %>
  19 + <%= colorbox_button :add, _('New CSS'), :action => 'add_css', :id => @theme.id %>
20 20 <% end %>
21 21 </div>
22 22  
... ... @@ -25,10 +25,10 @@
25 25 <ul>
26 26 <% for image in @image_files %>
27 27 <li><%= image_tag("/user_themes/#{@theme.id}/images/#{image}") %></li>
28   - <% end %>
  28 + <% end %>
29 29 </ul>
30 30 <% button_bar do %>
31   - <%= lightbox_button(:add, _('Add image'), :action => 'add_image', :id => @theme.id) %>
  31 + <%= colorbox_button :add, _('Add image'), :action => 'add_image', :id => @theme.id %>
32 32 <% end %>
33 33 </div>
34 34  
... ...
app/views/profile_themes/index.html.erb
  Diff comments   View file @48e8a1d
... ... @@ -42,7 +42,7 @@
42 42  
43 43 <% button_bar do %>
44 44 <% if environment.enabled?('user_themes') %>
45   - <%= lightbox_button(:add, _('New theme ...'), :action => 'new') %>
  45 + <%= colorbox_button :add, _('New theme ...'), :action => 'new' %>
46 46 <% end %>
47 47 <%= button(:back, _('Back'), :controller => 'profile_editor', :action => 'index') %>
48 48 <% end %>
... ...
app/views/shared/user_menu.html.erb
  Diff comments   View file @48e8a1d
... ... @@ -20,7 +20,7 @@
20 20 </li>
21 21  
22 22 <li>
23   - <%= lightbox_link_to('<span class="icon-new"></span>' + _('New article'), '/myprofile/{login}/cms/new') %>
  23 + <%= colorbox_link_to '<span class="icon-new"></span>' + _('New article'), '/myprofile/{login}/cms/new' %>
24 24 </li>
25 25  
26 26 <li id='manage-enterprises-link-template' style='display: none'><a href='/myprofile/{identifier}'><span class="icon-menu-enterprise"></span><%= _('Manage %s') % '{name}' %></a></li>
... ...
public/javascripts/lightbox.js
View file @582e694
... ... @@ -1,232 +0,0 @@
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', getBrowserInfo, false);
55   -
56   -var lightbox = Class.create();
57   -
58   -lightbox.prototype = {
59   -
60   - yPos : 0,
61   - xPos : 0,
62   -
63   - initialize: function(ctrl) {
64   - this.content = ctrl.href;
65   - if (ctrl.id != '') {
66   - this.lightbox_className = ctrl.id;
67   - }
68   - ctrl.onclick = function(){return false;};
69   - ctrl.lightbox = this;
70   - },
71   -
72   - // Turn everything on - mainly the IE fixes
73   - activate: function(){
74   - if (browser == 'Internet Explorer'){
75   - this.getScroll();
76   - this.prepareIE('100%', 'hidden');
77   - this.setScroll(0,0);
78   - this.hideSelects('hidden');
79   - }
80   - this.hideObjectsAndEmbeds('hidden');
81   - this.displayLightbox("block");
82   - },
83   -
84   - // Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
85   - prepareIE: function(height, overflow){
86   - bod = document.getElementsByTagName('body')[0];
87   - bod.style.height = height;
88   - bod.style.overflow = overflow;
89   -
90   - htm = document.getElementsByTagName('html')[0];
91   - htm.style.height = height;
92   - htm.style.overflow = overflow;
93   - },
94   -
95   - // In IE, select elements hover on top of the lightbox
96   - hideSelects: function(visibility){
97   - selects = document.getElementsByTagName('select');
98   - for(i = 0; i < selects.length; i++) {
99   - selects[i].style.visibility = visibility;
100   - }
101   - },
102   -
103   - // In FF, objects and embeds elements hover on top of the lightbox
104   - hideObjectsAndEmbeds: function(visibility){
105   - var f = function(collection) {
106   - for(i = 0; i < collection.length; i++) {
107   - if (collection[i].style) {
108   - collection[i].style.visibility = visibility;
109   - }
110   - }
111   - };
112   - f(document.getElementsByTagName('object'));
113   - f(document.getElementsByTagName('embed'));
114   - },
115   -
116   - // Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
117   - getScroll: function(){
118   - if (self.pageYOffset) {
119   - this.yPos = self.pageYOffset;
120   - } else if (document.documentElement && document.documentElement.scrollTop){
121   - this.yPos = document.documentElement.scrollTop;
122   - } else if (document.body) {
123   - this.yPos = document.body.scrollTop;
124   - }
125   - },
126   -
127   - setScroll: function(x, y){
128   - window.scrollTo(x, y);
129   - },
130   -
131   - displayLightbox: function(display){
132   - $('overlay').style.display = display;
133   - $('lightbox').style.display = display;
134   - if(display != 'none') this.loadInfo();
135   - },
136   -
137   - // Begin Ajax request based off of the href of the clicked linked
138   - loadInfo: function() {
139   - var myAjax = new Ajax.Request(
140   - this.content,
141   - {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
142   - );
143   -
144   - },
145   -
146   - // Display Ajax response
147   - processInfo: function(response){
148   - info = "<div id='lbContent'><div id='lbBottomBG'><div id='lbTopBG'>" + response.responseText + "</div></div></div>";
149   - new Insertion.Before($('lbLoadMessage'), info)
150   - if (this.lightbox_className) {
151   - $('lightbox').className = "done " + this.lightbox_className;
152   - } else {
153   - $('lightbox').className = "done";
154   - }
155   - this.actions();
156   - },
157   -
158   - // Search through new links within the lightbox, and attach click event
159   - actions: function(){
160   - lbActions = document.getElementsByClassName('lbAction');
161   -
162   - for(i = 0; i < lbActions.length; i++) {
163   - Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
164   - lbActions[i].onclick = function(){return false;};
165   - }
166   -
167   - },
168   -
169   - // Example of creating your own functionality once lightbox is initiated
170   - insert: function(e){
171   - link = Event.element(e).parentNode;
172   - Element.remove($('lbContent'));
173   -
174   - var myAjax = new Ajax.Request(
175   - link.href,
176   - {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
177   - );
178   -
179   - },
180   -
181   - // Example of creating your own functionality once lightbox is initiated
182   - deactivate: function(){
183   - Element.remove($('lbContent'));
184   -
185   - if (browser == "Internet Explorer"){
186   - this.setScroll(0,this.yPos);
187   - this.prepareIE("auto", "auto");
188   - this.hideSelects("visible");
189   - }
190   - this.hideObjectsAndEmbeds("visible");
191   - this.displayLightbox("none");
192   - }
193   -}
194   -
195   -/*-----------------------------------------------------------------------------------------------*/
196   -
197   -jQuery('.lbOn').live('click', function(event) {
198   - if (jQuery('#lbLoadMessage').length == 0)
199   - addLightboxMarkup();
200   - if (this.lightbox == undefined)
201   - valid = new lightbox(this);
202   - else {
203   - removeLightboxMarkup();
204   - addLightboxMarkup();
205   - }
206   -
207   - this.lightbox.activate();
208   -
209   - event.preventDefault();
210   - return false;
211   -});
212   -
213   -// Add in markup necessary to make this work. Basically two divs:
214   -// Overlay holds the shadow
215   -// Lightbox is the centered square that the content is put into.
216   -function addLightboxMarkup() {
217   - bod = document.getElementsByTagName('body')[0];
218   - overlay = document.createElement('div');
219   - overlay.id = 'overlay';
220   - lb = document.createElement('div');
221   - lb.id = 'lightbox';
222   - lb.className = 'loading';
223   - lb.innerHTML = '<div id="lbLoadMessage">' +
224   - '<img src="' + noosfero_root() + '/images/2loading.gif"/>' +
225   - '</div>';
226   - bod.appendChild(overlay);
227   - bod.appendChild(lb);
228   -}
229   -function removeLightboxMarkup() {
230   - Element.remove($('overlay'));
231   - Element.remove($('lightbox'));
232   -}
public/stylesheets/lightbox.css
View file @582e694
... ... @@ -1,63 +0,0 @@
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: 150px;
16   - left: 50%;
17   - z-index: 300;
18   - width: 500px;
19   - margin-left: -265px;
20   - border: 1px solid #000;
21   - text-align: left;
22   - padding: 1em;
23   - background: #FFF;
24   -}
25   -
26   -#overlay{
27   - display:none;
28   - position:absolute;
29   - top:0;
30   - left:0;
31   - width:100%;
32   - height:100%;
33   - z-index:200;
34   - background-color:#000;
35   - -moz-opacity: 0.75;
36   - opacity:.75;
37   - filter: alpha(opacity=75);
38   -}
39   -#overlay[id]{
40   - position:fixed;
41   -}
42   -
43   -#lightbox.done #lbLoadMessage{
44   - display:none;
45   -}
46   -#lightbox.done #lbContent{
47   - display:block;
48   -}
49   -#lightbox.loading #lbContent{
50   - display:none;
51   -}
52   -#lightbox.loading #lbLoadMessage{
53   - display:block;
54   -}
55   -
56   -#lightbox.done img{
57   - width:100%;
58   - height:100%;
59   -}
60   -
61   -#lightbox select {
62   - max-width: 100%;
63   -}
test/functional/cms_controller_test.rb
  Diff comments   View file @48e8a1d
... ... @@ -638,7 +638,7 @@ class CmsControllerTest &lt; ActionController::TestCase
638 638  
639 639 should 'display OK button on why_categorize popup' do
640 640 get :why_categorize, :profile => profile.identifier
641   - assert_tag :tag => 'a', :attributes => { :rel => 'deactivate'} # lightbox close button
  641 + assert_tag :tag => 'a', :attributes => { :rel => 'deactivate'} # colorbox close button
642 642 end
643 643  
644 644 should 'display published option' do
... ...
test/unit/lightbox_helper_test.rb
View file @582e694
... ... @@ -1,65 +0,0 @@
1   -require_relative "../test_helper"
2   -
3   -class LightboxHelperTest < ActiveSupport::TestCase
4   -
5   - include LightboxHelper
6   -
7   - def setup
8   - stubs(:_).with(anything).returns('TEXT')
9   - end
10   -
11   - should 'provide the needed files' do
12   - assert File.exists?(Rails.root.join('public', 'stylesheets', 'lightbox.css')), 'lightbox.css expected to be in public/stylesheets, but not found'
13   - assert File.exists?(Rails.root.join('public', 'javascripts', 'lightbox.js')), 'lightbox.js expected to be in public/javascripts, but not found'
14   - end
15   -
16   - should 'provide lightbox_link_to helper' do
17   - expects(:link_to).with('text', { :action => 'view', :id => '1' }, has_entries({ :class => 'lbOn', :id => 'my-link' })).returns('[link]')
18   - assert_equal '[link]', lightbox_link_to('text', { :action => 'view', :id => '1'}, { :id => 'my-link' })
19   - end
20   -
21   - should 'merge existing :class option in lightbox_link_to' do
22   - expects(:link_to).with('text', { :action => 'view', :id => '1' }, has_entries({ :class => 'lbOn my-button', :id => 'my-link' })).returns('[link]')
23   - assert_equal '[link]', lightbox_link_to('text', { :action => 'view', :id => '1'}, { :class => 'my-button', :id => 'my-link' })
24   -
25   - end
26   -
27   - should 'provide link to close lightbox' do
28   - expects(:button).with(:close, 'text', '#', has_entries({ :class => 'lbAction', :rel => 'deactivate', :id => 'my-id' })).returns('[close-lightbox]')
29   -
30   - assert_equal '[close-lightbox]', lightbox_close_button('text', :id => 'my-id')
31   - end
32   -
33   - should 'merge existing :class option in lightbox_close_button' do
34   - expects(:button).with(:close, 'text', '#', has_entries({ :class => 'lbAction my-class', :rel => 'deactivate', :id => 'my-id' })).returns('[close-lightbox]')
35   -
36   - assert_equal '[close-lightbox]', lightbox_close_button('text', :class => 'my-class', :id => 'my-id' )
37   - end
38   -
39   - should 'provide lightbox_button' do
40   - expects(:button).with('type', 'label', { :action => 'popup'}, has_entries({ :class => 'lbOn' })).returns('[button]')
41   -
42   - assert_equal '[button]', lightbox_button('type', 'label', { :action => 'popup'})
43   - end
44   -
45   - should 'provide lightbox_icon_button' do
46   - expects(:icon_button).with('type', 'label', { :action => 'popup'}, has_entries({ :class => 'lbOn' })).returns('[button]')
47   -
48   - assert_equal '[button]', lightbox_icon_button('type', 'label', { :action => 'popup'})
49   - end
50   -
51   - should 'tell if rendering inside lightbox' do
52   - request = mock
53   - expects(:request).returns(request)
54   - request.expects(:xhr?).returns(true)
55   -
56   - assert lightbox?
57   - end
58   -
59   - should 'provide lightbox_remote_button' do
60   - expects(:button).with('type', 'label', { :action => 'popup'}, has_entries({ :class => 'remote-lbOn' })).returns('[button]')
61   -
62   - assert_equal '[button]', lightbox_remote_button('type', 'label', { :action => 'popup'})
63   - end
64   -
65   -end