Move to modal api

Braulio Bhavamitra
1 parent 48e8a1da
Showing 44 changed files with 195 additions and 196 deletions Show diff stats
app/helpers/application_helper.rb
app/helpers/boxes_helper.rb
app/helpers/colorbox_helper.rb
app/helpers/comment_helper.rb
app/helpers/modal_helper.rb
app/views/account/_login_form.html.erb
app/views/account/index_anonymous.html.erb
app/views/account/login.html.erb
app/views/account/logout_popup.html.erb
app/views/box_organizer/add_block.html.erb
app/views/box_organizer/edit.html.erb
app/views/box_organizer/index.html.erb
app/views/cms/edit.html.erb
app/views/cms/select_article_type.html.erb
app/views/cms/view.html.erb
app/views/cms/why_categorize.html.erb
app/views/comment/_comment_form.html.erb
app/views/content_viewer/_article_toolbar.html.erb
app/views/content_viewer/_comment_form.html.erb
app/views/layouts/_user.html.erb
@@ -8,7 +8,7 @@ module ApplicationHelper
   include PermissionNameHelper
-  include ColorboxHelper
+  include ModalHelper
   include BoxesHelper
@@ -648,7 +648,7 @@ module ApplicationHelper
       ' onblur="if(/^\s*$/.test(this.value)){this.value=\''+s+'\'} this.form.className=\'focus-out\'">'+
       '</form>'
     else
-      colorbox_link_to '<span class="icon-menu-search"></span>'+ _('Search'), {
+      modal_link_to '<span class="icon-menu-search"></span>'+ _('Search'), {
                        :controller => 'search',
                        :action => 'popup',
                        :category_path => (@category ? @category.explode_path : nil)},
@@ -1046,7 +1046,7 @@ module ApplicationHelper
       {s_('contents|Most commented') => {:href => url_for({:controller => 'search', :action => 'contents', :filter => 'more_comments'})}}
     ]
     if logged_in?
-      links.push(_('New content') => colorbox_options({:href => url_for({:controller => 'cms', :action => 'new', :profile => current_user.login, :cms => true})}))
+      links.push(_('New content') => modal_options({:href => url_for({:controller => 'cms', :action => 'new', :profile => current_user.login, :cms => true})}))
     end
     link_to(content_tag(:span, _('Contents'), :class => 'icon-menu-articles'), {:controller => "search", :action => 'contents', :category_path => nil}, :id => 'submenu-contents') +
@@ -231,7 +231,7 @@ module BoxesHelper
       end
       if block.editable?
-        buttons << colorbox_icon_button(:edit, _('Edit'), { :action => 'edit', :id => block.id })
+        buttons << modal_icon_button(:edit, _('Edit'), { :action => 'edit', :id => block.id })
       end
       if !block.main?
@@ -241,7 +241,7 @@ module BoxesHelper
     end
     if block.respond_to?(:help)
-      buttons << colorbox_inline_icon(:help, _('Help on this block'), {}, "#help-on-box-#{block.id}") << content_tag('div', content_tag('h2', _('Help')) + content_tag('div', block.help, :style => 'margin-bottom: 1em;') + colorbox_close_button(_('Close')), :style => 'display: none;', :id => "help-on-box-#{block.id}")
+      buttons << modal_inline_icon(:help, _('Help on this block'), {}, "#help-on-box-#{block.id}") << content_tag('div', content_tag('h2', _('Help')) + content_tag('div', block.help, :style => 'margin-bottom: 1em;') + modal_close_button(_('Close')), :style => 'display: none;', :id => "help-on-box-#{block.id}")
     end
     if block.embedable?
@@ -1,46 +0,0 @@
-module ColorboxHelper
-
-  def colorbox_inline_link_to title, url, selector, options = {}
-    link_to title, url, colorbox_options(options.merge(:inline => selector))
-  end
-
-  def colorbox_inline_icon type, title, url, selector, options = {}
-    icon_button type, title, url, colorbox_options(options.merge(:inline => selector))
-  end
-
-  def colorbox_link_to title, url, options = {}
-    link_to title, url, colorbox_options(options)
-  end
-
-  def colorbox_close_link text, options = {}
-    link_to text, '#', colorbox_options(options, :close)
-  end
-
-  def colorbox_close_button(text, options = {})
-    button(:close, text, '#', colorbox_options(options, :close).merge(:rel => 'deactivate'))
-  end
-
-  def colorbox_button(type, label, url, options = {})
-    button(type, label, url, colorbox_options(options))
-  end
-
-  def colorbox_icon_button(type, label, url, options = {})
-    icon_button(type, label, url, colorbox_options(options))
-  end
-
-  # options must be an HTML options hash as passed to link_to etc.
-  #
-  # returns a new hash with colorbox class added. Keeps existing classes.
-  def colorbox_options(options, type=nil)
-    inline_selector = options.delete :inline
-    options[:onclick] = "return colorbox_helpers.inline('#{inline_selector}')" if inline_selector
-
-    classes = if inline_selector then '' else 'colorbox' end
-    classes += "-#{type.to_s}" if type.present?
-    classes << " #{options[:class]}" if options.has_key? :class
-    options.merge!(:class => classes)
-
-    options
-  end
-
-end
@@ -65,7 +65,7 @@ module CommentHelper
   def link_for_edit(comment)
     if comment.can_be_updated_by?(user)
-      {:link => expirable_comment_link(comment, :edit, _('Edit'), url_for(:profile => profile.identifier, :controller => :comment, :action => :edit, :id => comment.id),:class => 'colorbox')}
+      {:link => expirable_comment_link(comment, :edit, _('Edit'), url_for(:profile => profile.identifier, :controller => :comment, :action => :edit, :id => comment.id),:class => 'modal')}
     end
   end
@@ -0,0 +1,46 @@
+module ModalHelper
+
+  def modal_inline_link_to title, url, selector, options = {}
+    link_to title, url, modal_options(options.merge(:inline => selector))
+  end
+
+  def modal_inline_icon type, title, url, selector, options = {}
+    icon_button type, title, url, modal_options(options.merge(:inline => selector))
+  end
+
+  def modal_link_to title, url, options = {}
+    link_to title, url, modal_options(options)
+  end
+
+  def modal_close_link text, options = {}
+    link_to text, '#', modal_options(options, :close)
+  end
+
+  def modal_close_button(text, options = {})
+    button :close, text, '#', modal_options(options, :close).merge(:rel => 'deactivate')
+  end
+
+  def modal_button(type, label, url, options = {})
+    button type, label, url, modal_options(options)
+  end
+
+  def modal_icon_button(type, label, url, options = {})
+    icon_button type, label, url, modal_options(options)
+  end
+
+  # options must be an HTML options hash as passed to link_to etc.
+  #
+  # returns a new hash with modal class added. Keeps existing classes.
+  def modal_options(options, type=nil)
+    inline_selector = options.delete :inline
+    options[:onclick] = "return noosfero.modal.inline('#{inline_selector}')" if inline_selector
+
+    classes = if inline_selector then '' else 'modal-toggle' end
+    classes += " modal-#{type.to_s}" if type.present?
+    classes << " #{options[:class]}" if options.has_key? :class
+    options.merge!(:class => classes)
+
+    options
+  end
+
+end
@@ -13,7 +13,7 @@
 <% button_bar do %>
   <%= submit_button( 'login', _('Log in') )%>
-  <%= colorbox_close_button _('Cancel') if request.xhr? %>
+  <%= modal_close_button _('Cancel') if request.xhr? %>
 <% end %>
 <% end %>
 <h1><%= _('Identify yourself') %></h1>
 <p>
-<%= colorbox_link_to _('Login.'), { :controller => 'account', :action => 'login_popup' } %>
+<%= modal_link_to _('Login.'), { :controller => 'account', :action => 'login_popup' } %>
 <%= _('You need to login to be able to use all the features in this environment.') %>
 </p>
@@ -18,7 +18,7 @@
      <% button_bar do %>
        <%= submit_button( 'login', _('Log in') )%>
        <% if is_popin %>
-         <%= colorbox_close_button(_('Cancel')) %>
+         <%= modal_close_button(_('Cancel')) %>
        <% end %>
      <% end %>
@@ -2,6 +2,6 @@
 <p>
 <% button_bar do %>
   <%= button :ok, _('Yes'), { :controller => 'account', :action => 'logout' } %>
-  <%= colorbox_close_button _('No, I want to stay.') %>
+  <%= modal_close_button _('No, I want to stay.') %>
 <% end %>
 </p>
@@ -42,7 +42,7 @@
     <% button_bar do %>
       <%= submit_button(:add, _("Add")) %>
-      <%= colorbox_close_button(_('Close')) %>
+      <%= modal_close_button(_('Close')) %>
     <% end %>
   <% end %>
@@ -27,7 +27,7 @@
     <% button_bar do %>
       <%= submit_button(:save, _('Save')) %>
-      <%= colorbox_close_button(_('Cancel')) %>
+      <%= modal_close_button(_('Cancel')) %>
     <% end %>
   <% end %>
 <h1><%= _('Editing sideboxes')%></h1>
 <% button_bar :class=>'design-menu' do %>
-  <%= colorbox_button('add', _('Add a block'), { :action => 'add_block' }) %>
+  <%= modal_button('add', _('Add a block'), { :action => 'add_block' }) %>
   <%= button(:back, _('Back to control panel'), :controller => (profile.nil? ? 'admin_panel': 'profile_editor')) %>
 <% end %>
@@ -28,7 +28,7 @@
   <% end %>
   <div style='float: right'>
-    <%= colorbox_button :help, _('Why categorize?'), :action => 'why_categorize' %>
+    <%= modal_button :help, _('Why categorize?'), :action => 'why_categorize' %>
   </div>
   <%= select_categories(:article, _('Categorize your article')) %>
@@ -15,6 +15,6 @@
 </ul>
 <br style="clear:both" />
-<%= colorbox_close_button(_('Cancel')) %>
+<%= modal_close_button(_('Cancel')) %>
 </div>
@@ -17,7 +17,7 @@
 <% button_bar(:style => 'margin-bottom: 1em;') do %>
   <% parent_id = ((@article && @article.allow_children?) ? @article : nil) %>
-  <%= colorbox_button('new', _('New content'), :action => 'new', :parent_id => parent_id, :cms => true) %>
+  <%= modal_button('new', _('New content'), :action => 'new', :parent_id => parent_id, :cms => true) %>
   <%= button(:back, _('Back to control panel'), :controller => 'profile_editor', :action => "index") %>
 <% end %>
@@ -5,5 +5,5 @@
 </p>
 <% button_bar do %>
-  <%= colorbox_close_button _('Close') %>
+  <%= modal_close_button _('Close') %>
 <% end %>
@@ -10,7 +10,7 @@
     <%= recaptcha_tags(:display => { :theme => 'clean' }, :ajax => true) %>
     <% button_bar do %>
       <%= button_to_function :add, _('Confirm'), "return false", :id => "confirm-captcha" %>
-      <%= button_to_function :cancel, _('Cancel'), "jQuery.colorbox.close()" %>
+      <%= button_to_function :cancel, _('Cancel'), "noosfero.modal.close()" %>
     <% end %>
   </div>
@@ -31,10 +31,10 @@ function check_captcha(button, confirm_action) {
   return true;
   <% else %>
   jQuery('#recaptcha-container').show();
-  jQuery.colorbox({ html: jQuery('#recaptcha-container').html(), maxWidth : '600px', maxHeight : '300px' });
+  noosfero.modal.inline('#recaptcha-container', {maxWidth :'600px', maxHeight : '300px' });
   jQuery('#confirm-captcha').unbind('click');
   jQuery('#confirm-captcha').bind('click', function() {
-    jQuery.colorbox.close();
+    noosfero.modal.close();
     button.form.recaptcha_response_field.value = jQuery('#recaptcha_response_field').val();
     button.form.recaptcha_challenge_field.value = jQuery('#recaptcha_challenge_field').val();
     button.form.confirm.value = 'true';
@@ -88,7 +88,7 @@ function check_captcha(button, confirm_action) {
     <% if !edition_mode %>
       <%= button :cancel, _('Cancel'), '', :id => 'cancel-comment' %>
     <% else %>
-      <%= button :cancel, _('Cancel'), '#', :onclick => "jQuery.colorbox.close();" %>
+      <%= button :cancel, _('Cancel'), '#', :onclick => "noosfero.modal.close();" %>
     <% end %>
   <% end %>
 <% end %>
@@ -28,7 +28,7 @@
         <%= expirable_button @page, :locale, content, url %>
       <% end %>
-      <%= colorbox_button(:new, label_for_new_article(@page), profile.admin_url.merge(:controller => 'cms', :action => 'new', :parent_id => (@page.folder? ? @page : (@page.parent.nil? ? nil : @page.parent)))) unless remove_content_button(:new, @page) %>
+      <%= modal_button(:new, label_for_new_article(@page), profile.admin_url.merge(:controller => 'cms', :action => 'new', :parent_id => (@page.folder? ? @page : (@page.parent.nil? ? nil : @page.parent)))) unless remove_content_button(:new, @page) %>
     <% end %>
     <% if @page.accept_uploads? && @page.allow_create?(user) %>
@@ -7,10 +7,10 @@ function submit_comment_form(button) {
   return true;
   <% else %>
   jQuery('#recaptcha-container').show();
-  jQuery.colorbox({ inline : true, href : '#recaptcha-container', maxWidth : '600px', maxHeight : '300px' });
+  noosfero.modal.inline('#recaptcha-container', {maxWidth :'600px', maxHeight : '300px' });
   jQuery('#confirm-captcha').unbind('click');
   jQuery('#confirm-captcha').bind('click', function() {
-    jQuery.colorbox.close();
+    noosfero.modal.close();
     button.form.recaptcha_response_field.value = jQuery('#recaptcha_response_field').val();
     button.form.recaptcha_challenge_field.value = jQuery('#recaptcha_challenge_field').val();
     button.form.confirm.value = 'true';
@@ -38,7 +38,7 @@ function submit_comment_form(button) {
     <%= recaptcha_tags(:display => { :theme => 'clean' }, :ajax => true) %>
     <% button_bar do %>
       <%= button_to_function :add, _('Confirm'), "return false", :id => "confirm-captcha" %>
-      <%= button_to_function :cancel, _('Cancel'), "jQuery.colorbox.close()" %>
+      <%= button_to_function :cancel, _('Cancel'), "noosfero.modal.close()" %>
     <% end %>
   </div>
@@ -7,7 +7,7 @@
     </span>
   <% else %>
     <span class='not-logged-in'>
-      <%= _("<span class='login'>%s</span>") % colorbox_inline_link_to('<i class="icon-menu-login"></i><strong>' + _('Login') + '</strong>', login_url, '#inlineLoginBox', :id => 'link_login') %>
+      <%= _("<span class='login'>%s</span>") % modal_inline_link_to('<i class="icon-menu-login"></i><strong>' + _('Login') + '</strong>', login_url, '#inlineLoginBox', :id => 'link_login') %>
       <%= @plugins.dispatch(:alternative_authentication_link).collect { |content| instance_exec(&content) }.join("") %>
     <div id='inlineLoginBox' style='display: none;'>
@@ -18,7 +18,7 @@
     <%= yield :head %>
     <%=
       @plugins.dispatch(:head_ending).map do |content|
-        if content.respond_to?(:call) then instance_exec(&content).html_safe else content.html_safe end
+        if content.respond_to?(:call) then instance_exec(&content).to_s.html_safe else content.to_s.html_safe end
       end.join("\n")
     %>
@@ -32,7 +32,7 @@
     <%=
       @plugins.dispatch(:body_beginning).map do |content|
-        if content.respond_to?(:call) then instance_exec(&content).html_safe else content.html_safe end
+        if content.respond_to?(:call) then instance_exec(&content).to_s.html_safe else content.to_s.html_safe end
       end.join("\n")
     %>
@@ -9,7 +9,7 @@
   <%= hidden_field_tag(:confirmation, 1) %>
   <%= submit_button(:ok, _("Yes, I want to join.") % profile.name) %>
   <% if logged_in? && request.xhr? %>
-    <%= colorbox_close_button _("No, I don't want") %>
+    <%= modal_close_button _("No, I don't want") %>
   <% else %>
     <%= button(:cancel, _("No, I don't want."), profile.url) %>
   <% end %>
@@ -9,7 +9,7 @@
   <%= hidden_field_tag(:back_to, @back_to) %>
   <%= submit_button(:ok, _("Yes, I want to leave.") % profile.name) %>
   <% if logged_in? && request.xhr? %>
-    <%= colorbox_close_button _("No, I don't want") %>
+    <%= modal_close_button _("No, I don't want") %>
   <% else %>
     <%= button(:cancel, _("No, I don't want."), profile.url) %>
   <% end %>
@@ -9,7 +9,7 @@
   <% end %>
   <%= submit_button(:send, _('Report profile'), :style => 'float: left; cursor: pointer;', :id => 'report-abuse-submit-button', :onclick => "jQuery('#form-submit-loading').show()") %>
-  <%= button(:cancel, _('Cancel'), {}, :style => 'float: left; padding-top: 0px; padding-bottom: 0px;', :onclick => 'jQuery.colorbox.close(); return false;')%>
+  <%= button(:cancel, _('Cancel'), {}, :style => 'float: left; padding-top: 0px; padding-bottom: 0px;', :onclick => 'noosfero.modal.close(); return false;')%>
   <div id="form-submit-loading" class="small-loading" style="width: 16px; height: 16px; margin-top: 3px; float: left; display: none;"></div>
 <% end %>
@@ -30,7 +30,7 @@
       success: function(data, status, ajax){
         if ( !data.ok ) display_notice(data.error.message);
         else {
-          $.colorbox.close();
+          noosfero.modal.close();
           display_notice(data.message);
           window.location.reload();
         }
@@ -5,7 +5,7 @@
   <% button_bar do %>
     <%= submit_button(:add, _('Add')) %>
-    <%= colorbox_close_button _('Cancel') %>
+    <%= modal_close_button _('Cancel') %>
   <% end %>
 <% end %>
@@ -16,7 +16,7 @@
     <% end %>
   </ul>
   <% button_bar do %>
-    <%= colorbox_button :add, _('New CSS'), :action => 'add_css', :id => @theme.id %>
+    <%= modal_button :add, _('New CSS'), :action => 'add_css', :id => @theme.id %>
   <% end %>
 </div>
@@ -28,7 +28,7 @@
     <% end %>
   </ul>
   <% button_bar do %>
-    <%= colorbox_button :add, _('Add image'), :action => 'add_image', :id =>  @theme.id %>
+    <%= modal_button :add, _('Add image'), :action => 'add_image', :id =>  @theme.id %>
   <% end %>
 </div>
@@ -42,7 +42,7 @@
 <% button_bar do %>
   <% if environment.enabled?('user_themes')  %>
-    <%= colorbox_button :add, _('New theme ...'), :action => 'new' %>
+    <%= modal_button :add, _('New theme ...'), :action => 'new' %>
   <% end %>
   <%= button(:back, _('Back'), :controller => 'profile_editor', :action => 'index') %>
 <% end %>
@@ -20,7 +20,7 @@
         </li>
         <li>
-        <%= colorbox_link_to '<span class="icon-new"></span>' + _('New article'), '/myprofile/{login}/cms/new' %>
+        <%= modal_link_to '<span class="icon-new"></span>' + _('New article'), '/myprofile/{login}/cms/new' %>
         </li>
         <li id='manage-enterprises-link-template' style='display: none'><a href='/myprofile/{identifier}'><span class="icon-menu-enterprise"></span><%= _('Manage %s') % '{name}' %></a></li>
@@ -58,7 +58,7 @@
       <% if theme_option( :menu_login ) == 'full_form' %>
         <%= render :file => 'account/login_block' %>
       <% else %>
-        <%= colorbox_inline_link_to('<span class="icon-menu-login"></span>'+ _('Login'), login_url, '#inlineLoginBox', :id => 'link_login') %>
+        <%= modal_inline_link_to('<span class="icon-menu-login"></span>'+ _('Login'), login_url, '#inlineLoginBox', :id => 'link_login') %>
         <div id='inlineLoginBox' style='display: none;'>
           <%= render :file => 'account/login', :locals => { :is_popin => true } %>
         </div>
@@ -25,7 +25,7 @@
 .edit-information {
   display: none;
 }
-#colorbox .edit-information {
+.modal .edit-information {
   display: block;
 }
@@ -26,7 +26,7 @@
   <%= labelled_radio_button 'Multiple Select', "fields[#{counter}][kind]", 'multiple_select', field.multiple && field.list %><br />
   <% button_bar do %>
-    <%= button :ok, c_('Ok'), '#', :class => 'colorbox-ok-button', :div_id => elem_id %>
+    <%= button :ok, _('Ok'), '#', :div_id => elem_id %>
   <% end %>
 </div>
@@ -290,14 +290,11 @@ function Cart(config) {
         log.error('Send request - HTTP '+status, errorThrown);
       },
       complete: function() {
-        $.colorbox.close();
+        noosfero.modal.close();
       }
     });
   }
-  Cart.colorbox_close = function() {
-    $.colorbox.close();
-  }
   $(window).bind('beforeunload', function(){
     log('Page unload.');
@@ -5,7 +5,7 @@
       <a href="cart:clean" onclick="Cart.clean(this); return false" class="cart-clean"><%=_('Clean basket')%></a>
       <ul class="cart-items"></ul>
       <div class="cart-total"><%=_('Total:')%> <b></b></div>
-      <a href="/plugin/shopping_cart/buy" class="cart-buy colorbox"><%=_('Shopping checkout')%></a>
+      <a href="/plugin/shopping_cart/buy" class="cart-buy modal"><%=_('Shopping checkout')%></a>
     </div>
     <a href="#" onclick="Cart.toggle(this); return false" class="cart-toggle">
       <span class="str-show"><%=_('Show basket')%></span>
@@ -24,7 +24,7 @@
   <% end %>
   <% delivery_option = @settings.delivery_options.first && @settings.delivery_options.first.first %>
   <%= items_table(@cart[:items], @profile, delivery_option) %>
-  <%= link_to '', '#', :onclick => "Cart.colorbox_close(this);", :class => 'cart-box-close icon-cancel' %>
+  <%= link_to_function '', "noosfero.modal.close();", :class => 'cart-box-close icon-cancel' %>
 </div>
 <%= javascript_include_tag '../plugins/shopping_cart/buy' %>
@@ -17,7 +17,7 @@
     </div>
   <% end %>
   <%= items_table(session[:cart][:items], profile) %>
-  <%= link_to '', '#', :onclick => "Cart.colorbox_close(this);", :class => 'cart-box-close icon-cancel' %>
+  <%= link_to_function '', "noosfero.modal.close();", :class => 'cart-box-close icon-cancel' %>
 </div>
 <script type="text/javascript">
@@ -55,9 +55,10 @@ $(&quot;#usp_id_field&quot;).observe_field(1, function(){
 });
 function displayValidationUspIdError(error){
-  jQuery.colorbox({html: '<h2>'+error.message+'</h2>'+error.backtrace.join("<br />"),
+  noosfero.modal.html('<h2>'+error.message+'</h2>'+error.backtrace.join("<br />"), {
     height: "80%",
-    width:  "70%" });
+    width:  "70%"
+  });
 }
 jQuery('#usp_id_field').focus(function() { jQuery('#usp-id-balloon').fadeIn('slow'); });
@@ -88,7 +88,7 @@ jQuery(function($) {
     var $item = $(this).closest('.item');
     var html_selector = $item.attr('data-item');
     insert_item_in_text($item.find(html_selector));
-    $.colorbox.close();
+    noosfero.modal.close();
     return false;
   });
   $('a.zoom').live('click', function() {
@@ -96,14 +96,13 @@ jQuery(function($) {
     var html_selector = $item.attr('data-item');
     var name = $item.attr('title');
     var img = $item.find(html_selector).find('img').attr('src');
-    $.colorbox({
-      html: zoom_dialog_html(name, img),
-      scrolling: false
+    noosfero.modal.html(zoom_dialog_html(img), {
+      scrolling: false,
     });
     return false;
   });
   $('a.close').live('click', function() {
-    $.colorbox.close();
+    noosfero.modal.close();
     return false;
   })
@@ -1,44 +0,0 @@
-colorbox_helpers = {
-
-  watchClass: function() {
-    jQuery(function($) {
-      $('.colorbox').live('click', function() {
-        $.colorbox({
-          href:       $(this).attr('href'),
-          maxWidth:   $(window).width()-50,
-          height:     $(window).height()-50,
-          open:       true,
-          close:      'Cancel',
-          onComplete: function(bt) {
-            var opt = {}, maxH = $(window).height()-50;
-            if ($('#cboxLoadedContent *:first').height() > maxH) opt.height = maxH;
-            $.colorbox.resize(opt);
-          }
-        });
-        return false;
-      });
-
-      $('.colorbox-close').live('click', function() {
-        $.colorbox.close();
-        return false;
-      });
-
-    });
-  },
-
-  inline: function(href) {
-    var href = jQuery(href);
-
-    jQuery.colorbox({
-      inline: true, href: href,
-      onLoad: function(){ href.show(); },
-      onCleanup: function(){ href.hide(); },
-    });
-
-    return false;
-  },
-
-};
-
-colorbox_helpers.watchClass();
-
@@ -53,7 +53,7 @@ function save_comment(button) {
       //Comment of reply
       $('#'+ data.render_target).replaceWith(data.html);
       $('#' + data.render_target).effect("highlight", {}, 3000);
-      $.colorbox.close();
+      noosfero.modal.close();
       increment_comment_count(comment_div);
     } else {
       //New comment of article
@@ -64,7 +64,7 @@ function save_comment(button) {
       });
       page_comment_form.find('.errorExplanation').remove();
-      $.colorbox.close();
+      noosfero.modal.close();
       increment_comment_count(comment_div);
     }
@@ -0,0 +1,58 @@
+noosfero.modal = {
+
+  watchClass: function() {
+    jQuery(function($) {
+      $(document).delegate('.modal-toggle', 'click', function() {
+        $.colorbox({
+          href:       $(this).attr('href'),
+          maxWidth:   $(window).width()-50,
+          height:     $(window).height()-50,
+          open:       true,
+          close:      'Cancel',
+          class:      'modal',
+          onComplete: function(bt) {
+            var opt = {}, maxH = $(window).height()-50;
+            if ($('#cboxLoadedContent *:first').height() > maxH) opt.height = maxH;
+            $.colorbox.resize(opt);
+          }
+        });
+        return false;
+      });
+
+      $(document).delegate('.modal-close', 'click', function() {
+        $.colorbox.close();
+        return false;
+      });
+
+    });
+  },
+
+  inline: function(href, options) {
+    href = jQuery(href);
+    options = jQuery.extend({
+      inline: true, href: href,
+      onLoad: function(){ href.show(); },
+      onCleanup: function(){ href.hide(); },
+    }, options)
+
+    jQuery.colorbox(options);
+
+    return false;
+  },
+
+  html: function(html, options) {
+    options = jQuery.extend({
+      html: html,
+    }, options);
+
+    jQuery.colorbox(options);
+  },
+
+  close: function() {
+    jQuery.colorbox.close();
+  },
+
+};
+
+noosfero.modal.watchClass();
+
 jQuery(function($) {
   $('.report-abuse-action').live('click', function() {
     if($(this).attr('href')){
-      $.fn.colorbox({
-        href: $(this).attr('href'),
+      noosfero.modal.inline($(this).attr('href'), {
         innerHeight: '300px',
         innerWidth: '445px'
       });
@@ -1901,17 +1901,6 @@ a.button.disabled, input.disabled {
  * Block options editor floating window *
  ****************************************/
-/* FIXME This changes broke colorboxes all over the place.
- * Therefore I'm canceling them until they are properly treateda. */
-#cboxLoadedContent {
-  background: #FFF;
-/*  box-shadow: 0 0 15px #888 inset;
-    border-radius: 5px;
-    border: 1px solid #777;
-    border-left: none;
-    border-right: none; */
-}
-
 .block-config-options {
   padding: 0px 10px 0px 30px;
 }
@@ -638,7 +638,7 @@ class CmsControllerTest &lt; ActionController::TestCase
   should 'display OK button on why_categorize popup' do
     get :why_categorize, :profile => profile.identifier
-    assert_tag :tag => 'a', :attributes => { :rel => 'deactivate'} # colorbox close button
+    assert_tag :tag => 'a', :attributes => { :rel => 'deactivate'} # modal close button
   end
   should 'display published option' do
@@ -1,36 +0,0 @@
-require_relative "../test_helper"
-
-class ColorboxHelperTest < ActiveSupport::TestCase
-
-  include ColorboxHelper
-
-  should 'provide the needed files' do
-    assert File.exists?(Rails.root.join('public', 'stylesheets', 'colorbox.css')), 'colorbox.css expected to be in public/stylesheets, but not found'
-    assert File.exists?(Rails.root.join('public', 'javascripts', 'colorbox.js')), 'colorbox.js expected to be in public/javascripts, but not found'
-  end
-
-  should 'provide link to close colorbox' do
-    expects(:button).with(:close, 'text', '#', has_entries({ :class => 'colorbox-close', :id => 'my-id' })).returns('[close-colorbox]')
-
-    assert_equal '[close-colorbox]', colorbox_close_button('text', :id => 'my-id')
-  end
-
-  should 'merge existing :class option in colorbox_close_button' do
-    expects(:button).with(:close, 'text', '#', has_entries({ :class => 'colorbox-close my-class', :id => 'my-id' })).returns('[close-colorbox]')
-
-    assert_equal '[close-colorbox]', colorbox_close_button('text', :class => 'my-class', :id => 'my-id' )
-  end
-
-  should 'provide colorbox_button' do
-    expects(:button).with('type', 'label', { :action => 'popup'}, has_entries({ :class => 'colorbox' })).returns('[button]')
-
-    assert_equal '[button]', colorbox_button('type', 'label', { :action => 'popup'})
-  end
-
-  should 'provide colorbox_icon_button' do
-    expects(:icon_button).with('type', 'label', { :action => 'popup'}, has_entries({ :class => 'colorbox' })).returns('[button]')
-
-    assert_equal '[button]', colorbox_icon_button('type', 'label', { :action => 'popup'})
-  end
-
-end
@@ -0,0 +1,36 @@
+require_relative '../test_helper'
+
+class ModalHelperTest < ActiveSupport::TestCase
+
+  include ModalHelper
+
+  should 'provide the needed files' do
+    assert File.exists?(Rails.root.join('public', 'stylesheets', 'colorbox.css')), 'colorbox.css expected to be in public/stylesheets, but not found'
+    assert File.exists?(Rails.root.join('public', 'javascripts', 'jquery.colorbox-min.js')), 'jquery.colorbox-min.js expected to be in public/javascripts, but not found'
+  end
+
+  should 'provide link to close modal' do
+    expects(:button).with(:close, 'text', '#', has_entries({ :class => 'modal-toggle modal-close', :id => 'my-id' })).returns('[close-modal]')
+
+    assert_equal '[close-modal]', modal_close_button('text', :id => 'my-id')
+  end
+
+  should 'merge existing :class option in modal_close_button' do
+    expects(:button).with(:close, 'text', '#', has_entries({ :class => 'modal-toggle modal-close my-class', :id => 'my-id' })).returns('[close-modal]')
+
+    assert_equal '[close-modal]', modal_close_button('text', :class => 'my-class', :id => 'my-id' )
+  end
+
+  should 'provide modal_button' do
+    expects(:button).with('type', 'label', { :action => 'popup'}, has_entries({ :class => 'modal-toggle' })).returns('[button]')
+
+    assert_equal '[button]', modal_button('type', 'label', { :action => 'popup'})
+  end
+
+  should 'provide modal_icon_button' do
+    expects(:icon_button).with('type', 'label', { :action => 'popup'}, has_entries({ :class => 'modal-toggle' })).returns('[button]')
+
+    assert_equal '[button]', modal_icon_button('type', 'label', { :action => 'popup'})
+  end
+
+end
	@@ -8,7 +8,7 @@ module ApplicationHelper		@@ -8,7 +8,7 @@ module ApplicationHelper
8		8
9	include PermissionNameHelper	9	include PermissionNameHelper
10		10
11	- include ColorboxHelper	11	+ include ModalHelper
12		12
13	include BoxesHelper	13	include BoxesHelper
14		14
	@@ -648,7 +648,7 @@ module ApplicationHelper		@@ -648,7 +648,7 @@ module ApplicationHelper
648	' onblur="if(/^\s*$/.test(this.value)){this.value=\''+s+'\'} this.form.className=\'focus-out\'">'+	648	' onblur="if(/^\s*$/.test(this.value)){this.value=\''+s+'\'} this.form.className=\'focus-out\'">'+
649	'</form>'	649	'</form>'
650	else	650	else
651	- colorbox_link_to '<span class="icon-menu-search"></span>'+ _('Search'), {	651	+ modal_link_to '<span class="icon-menu-search"></span>'+ _('Search'), {
652	:controller => 'search',	652	:controller => 'search',
653	:action => 'popup',	653	:action => 'popup',
654	:category_path => (@category ? @category.explode_path : nil)},	654	:category_path => (@category ? @category.explode_path : nil)},
	@@ -1046,7 +1046,7 @@ module ApplicationHelper		@@ -1046,7 +1046,7 @@ module ApplicationHelper
1046	{s_('contents\|Most commented') => {:href => url_for({:controller => 'search', :action => 'contents', :filter => 'more_comments'})}}	1046	{s_('contents\|Most commented') => {:href => url_for({:controller => 'search', :action => 'contents', :filter => 'more_comments'})}}
1047	]	1047	]
1048	if logged_in?	1048	if logged_in?
1049	- links.push(_('New content') => colorbox_options({:href => url_for({:controller => 'cms', :action => 'new', :profile => current_user.login, :cms => true})}))	1049	+ links.push(_('New content') => modal_options({:href => url_for({:controller => 'cms', :action => 'new', :profile => current_user.login, :cms => true})}))
1050	end	1050	end
1051		1051
1052	link_to(content_tag(:span, _('Contents'), :class => 'icon-menu-articles'), {:controller => "search", :action => 'contents', :category_path => nil}, :id => 'submenu-contents') +	1052	link_to(content_tag(:span, _('Contents'), :class => 'icon-menu-articles'), {:controller => "search", :action => 'contents', :category_path => nil}, :id => 'submenu-contents') +
	@@ -231,7 +231,7 @@ module BoxesHelper		@@ -231,7 +231,7 @@ module BoxesHelper
231	end	231	end
232		232
233	if block.editable?	233	if block.editable?
234	- buttons << colorbox_icon_button(:edit, _('Edit'), { :action => 'edit', :id => block.id })	234	+ buttons << modal_icon_button(:edit, _('Edit'), { :action => 'edit', :id => block.id })
235	end	235	end
236		236
237	if !block.main?	237	if !block.main?
	@@ -241,7 +241,7 @@ module BoxesHelper		@@ -241,7 +241,7 @@ module BoxesHelper
241	end	241	end
242		242
243	if block.respond_to?(:help)	243	if block.respond_to?(:help)
244	- buttons << colorbox_inline_icon(:help, _('Help on this block'), {}, "#help-on-box-#{block.id}") << content_tag('div', content_tag('h2', _('Help')) + content_tag('div', block.help, :style => 'margin-bottom: 1em;') + colorbox_close_button(_('Close')), :style => 'display: none;', :id => "help-on-box-#{block.id}")	244	+ buttons << modal_inline_icon(:help, _('Help on this block'), {}, "#help-on-box-#{block.id}") << content_tag('div', content_tag('h2', _('Help')) + content_tag('div', block.help, :style => 'margin-bottom: 1em;') + modal_close_button(_('Close')), :style => 'display: none;', :id => "help-on-box-#{block.id}")
245	end	245	end
246		246
247	if block.embedable?	247	if block.embedable?
	@@ -1,46 +0,0 @@	@@ -1,46 +0,0 @@
1	-module ColorboxHelper
2	-
3	- def colorbox_inline_link_to title, url, selector, options = {}
4	- link_to title, url, colorbox_options(options.merge(:inline => selector))
5	- end
6	-
7	- def colorbox_inline_icon type, title, url, selector, options = {}
8	- icon_button type, title, url, colorbox_options(options.merge(:inline => selector))
9	- end
10	-
11	- def colorbox_link_to title, url, options = {}
12	- link_to title, url, colorbox_options(options)
13	- end
14	-
15	- def colorbox_close_link text, options = {}
16	- link_to text, '#', colorbox_options(options, :close)
17	- end
18	-
19	- def colorbox_close_button(text, options = {})
20	- button(:close, text, '#', colorbox_options(options, :close).merge(:rel => 'deactivate'))
21	- end
22	-
23	- def colorbox_button(type, label, url, options = {})
24	- button(type, label, url, colorbox_options(options))
25	- end
26	-
27	- def colorbox_icon_button(type, label, url, options = {})
28	- icon_button(type, label, url, colorbox_options(options))
29	- end
30	-
31	- # options must be an HTML options hash as passed to link_to etc.
32	- #
33	- # returns a new hash with colorbox class added. Keeps existing classes.
34	- def colorbox_options(options, type=nil)
35	- inline_selector = options.delete :inline
36	- options[:onclick] = "return colorbox_helpers.inline('#{inline_selector}')" if inline_selector
37	-
38	- classes = if inline_selector then '' else 'colorbox' end
39	- classes += "-#{type.to_s}" if type.present?
40	- classes << " #{options[:class]}" if options.has_key? :class
41	- options.merge!(:class => classes)
42	-
43	- options
44	- end
45	-
46	-end
	@@ -65,7 +65,7 @@ module CommentHelper		@@ -65,7 +65,7 @@ module CommentHelper
65		65
66	def link_for_edit(comment)	66	def link_for_edit(comment)
67	if comment.can_be_updated_by?(user)	67	if comment.can_be_updated_by?(user)
68	- {:link => expirable_comment_link(comment, :edit, _('Edit'), url_for(:profile => profile.identifier, :controller => :comment, :action => :edit, :id => comment.id),:class => 'colorbox')}	68	+ {:link => expirable_comment_link(comment, :edit, _('Edit'), url_for(:profile => profile.identifier, :controller => :comment, :action => :edit, :id => comment.id),:class => 'modal')}
69	end	69	end
70	end	70	end
71		71
@@ -0,0 +1,46 @@		@@ -0,0 +1,46 @@
	1	+module ModalHelper
	2	+
	3	+ def modal_inline_link_to title, url, selector, options = {}
	4	+ link_to title, url, modal_options(options.merge(:inline => selector))
	5	+ end
	6	+
	7	+ def modal_inline_icon type, title, url, selector, options = {}
	8	+ icon_button type, title, url, modal_options(options.merge(:inline => selector))
	9	+ end
	10	+
	11	+ def modal_link_to title, url, options = {}
	12	+ link_to title, url, modal_options(options)
	13	+ end
	14	+
	15	+ def modal_close_link text, options = {}
	16	+ link_to text, '#', modal_options(options, :close)
	17	+ end
	18	+
	19	+ def modal_close_button(text, options = {})
	20	+ button :close, text, '#', modal_options(options, :close).merge(:rel => 'deactivate')
	21	+ end
	22	+
	23	+ def modal_button(type, label, url, options = {})
	24	+ button type, label, url, modal_options(options)
	25	+ end
	26	+
	27	+ def modal_icon_button(type, label, url, options = {})
	28	+ icon_button type, label, url, modal_options(options)
	29	+ end
	30	+
	31	+ # options must be an HTML options hash as passed to link_to etc.
	32	+ #
	33	+ # returns a new hash with modal class added. Keeps existing classes.
	34	+ def modal_options(options, type=nil)
	35	+ inline_selector = options.delete :inline
	36	+ options[:onclick] = "return noosfero.modal.inline('#{inline_selector}')" if inline_selector
	37	+
	38	+ classes = if inline_selector then '' else 'modal-toggle' end
	39	+ classes += " modal-#{type.to_s}" if type.present?
	40	+ classes << " #{options[:class]}" if options.has_key? :class
	41	+ options.merge!(:class => classes)
	42	+
	43	+ options
	44	+ end
	45	+
	46	+end
	@@ -13,7 +13,7 @@		@@ -13,7 +13,7 @@
13		13
14	<% button_bar do %>	14	<% button_bar do %>
15	<%= submit_button( 'login', _('Log in') )%>	15	<%= submit_button( 'login', _('Log in') )%>
16	- <%= colorbox_close_button _('Cancel') if request.xhr? %>	16	+ <%= modal_close_button _('Cancel') if request.xhr? %>
17	<% end %>	17	<% end %>
18		18
19	<% end %>	19	<% end %>
1	<h1><%= _('Identify yourself') %></h1>	1	<h1><%= _('Identify yourself') %></h1>
2		2
3	<p>	3	<p>
4	-<%= colorbox_link_to _('Login.'), { :controller => 'account', :action => 'login_popup' } %>	4	+<%= modal_link_to _('Login.'), { :controller => 'account', :action => 'login_popup' } %>
5		5
6	<%= _('You need to login to be able to use all the features in this environment.') %>	6	<%= _('You need to login to be able to use all the features in this environment.') %>
7	</p>	7	</p>
	@@ -18,7 +18,7 @@		@@ -18,7 +18,7 @@
18	<% button_bar do %>	18	<% button_bar do %>
19	<%= submit_button( 'login', _('Log in') )%>	19	<%= submit_button( 'login', _('Log in') )%>
20	<% if is_popin %>	20	<% if is_popin %>
21	- <%= colorbox_close_button(_('Cancel')) %>	21	+ <%= modal_close_button(_('Cancel')) %>
22	<% end %>	22	<% end %>
23	<% end %>	23	<% end %>
24		24
	@@ -2,6 +2,6 @@		@@ -2,6 +2,6 @@
2	<p>	2	<p>
3	<% button_bar do %>	3	<% button_bar do %>
4	<%= button :ok, _('Yes'), { :controller => 'account', :action => 'logout' } %>	4	<%= button :ok, _('Yes'), { :controller => 'account', :action => 'logout' } %>
5	- <%= colorbox_close_button _('No, I want to stay.') %>	5	+ <%= modal_close_button _('No, I want to stay.') %>
6	<% end %>	6	<% end %>
7	</p>	7	</p>
	@@ -42,7 +42,7 @@		@@ -42,7 +42,7 @@
42		42
43	<% button_bar do %>	43	<% button_bar do %>
44	<%= submit_button(:add, _("Add")) %>	44	<%= submit_button(:add, _("Add")) %>
45	- <%= colorbox_close_button(_('Close')) %>	45	+ <%= modal_close_button(_('Close')) %>
46	<% end %>	46	<% end %>
47		47
48	<% end %>	48	<% end %>