add page tree + jquery tristate checkbox plugin

4 files changed, 217 insertions, 74 deletions

diff --git a/app/assets/javascripts/banners/banners.js b/app/assets/javascripts/banners/banners.js
new file mode 100644
index 0000000..9fcea06
--- /dev/null
+++ b/app/assets/javascripts/banners/banners.js
@@ -0,0 +1,25 @@
+$(function() {
+    $(document).ready(function() {
+        $(".tree ul:first > li:first").addClass("branch_start");
+        $('.tree  ul').find('li:last').addClass("branch_end");
+        $('ul.tristate').tristate();
+
+        $('.tree').delegate('.toggle','click', function(e) {
+            e.preventDefault();
+
+            var $li   = $(this).parents('li:first');
+            var $icon = $li.find('.icon.toggle');
+            var $nested = $li.find('.nested');
+
+            if ($icon.hasClass('expanded')) {
+                $icon.removeClass('expanded');
+                $nested.slideUp();
+            }
+            else {
+                $icon.addClass('expanded');
+                $nested.slideDown();
+            }
+
+        });
+    });
+});
diff --git a/app/assets/javascripts/banners/jquery.tristate.js b/app/assets/javascripts/banners/jquery.tristate.js
new file mode 100644
index 0000000..2d2903d
--- /dev/null
+++ b/app/assets/javascripts/banners/jquery.tristate.js
@@ -0,0 +1,94 @@
+/**********************************************************************************
+ **
+ **              jQuery Tristate Checkbox Plugin
+ **              version: 1.0
+ **
+ **              Dual licensed under the MIT and GPL licenses:
+ **              http://www.opensource.org/licenses/mit-license.php
+ **              http://www.gnu.org/licenses/gpl.html
+ **
+ **              author: Jeff Leombruno
+ **              creation date: 09.20.2011
+ **              dependencies: jQuery v1.6 or higher
+ **
+ **              This file contains the functionality for implementing 3 state checkboxes.
+ **              Inspired by:
+ **                   http://code.google.com/p/jquery-tristate-checkbox/
+ **                   http://css-tricks.com/13467-indeterminate-checkboxes/
+ **
+ **********************************************************************************/
+
+(function($){
+    $.fn.tristate = function(options){
+
+        var config = {
+            selector: $(this).selector,
+            checked: null,
+            container: null,
+            siblings: null
+        };
+        var opts = $.extend(config, options);
+
+        return this.each(function(){
+            var obj = $(this);
+
+            var triState = function() {
+
+                var pub = {};
+
+                pub.init = function(){
+                    $('input[type="checkbox"]', obj).change(function(e) {
+                        config.checked = $(this).prop("checked")
+                        config.container = $(this).parent()
+                        config.siblings = config.container.siblings();
+
+                        config.container.find('input[type="checkbox"]').prop({
+                            indeterminate: false,
+                            checked: config.checked
+                        });
+
+                        pub.checkSiblings(config.container);
+                    });
+                    // run checkSiblings for every checked checkbox when the page loads
+                    $('input[type=checkbox]:checked', obj).each( function() {
+                        pub.checkSiblings($(this).parent());
+                    });
+                };
+
+                pub.checkSiblings = function(el) {
+                    var parent = el.parent().parent();
+                    var all = true;
+
+                    el.siblings().each(function() {
+                        return all = ($(this).children('input[type="checkbox"]').prop("checked") === config.checked);
+                    });
+
+                    if (all && config.checked) {
+                        parent.children('input[type="checkbox"]').prop({
+                            indeterminate: false,
+                            checked: config.checked
+                        });
+                        pub.checkSiblings(parent);
+                    } else if (all && !config.checked) {
+                        parent.children('input[type="checkbox"]').prop("checked", config.checked);
+                        parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
+                        pub.checkSiblings(parent);
+                    } else {
+                        el.parents("li").children('input[type="checkbox"]').prop({
+                            indeterminate: true,
+                            checked: false
+                        });
+                    }
+                };
+
+                return pub;
+
+            }();
+
+            triState.init();
+            triState.checkSiblings(obj);
+
+
+        });
+    };
+})(jQuery);
diff --git a/app/views/refinery/banners/admin/banners/_form.html.erb b/app/views/refinery/banners/admin/banners/_form.html.erb
index 1403fc4..b249f09 100644
--- a/app/views/refinery/banners/admin/banners/_form.html.erb
+++ b/app/views/refinery/banners/admin/banners/_form.html.erb
@@ -1,76 +1,81 @@
+<%- content_for(:javascripts) do -%>
+    <%= javascript_include_tag "banners/jquery.tristate.js", "banners/banners.js" -%>
+<%- end -%>
+
 <%= form_for [refinery, :banners_admin, @banner] do |f| -%>
-  <%= render '/refinery/admin/error_messages',
-              :object => @banner,
-              :include_object_name => true %>
-
-  <%= hidden_field_tag 'banner[page_ids][]' %>
-
-  <div class='field'>
-    <%= f.label :name -%>
-    <%= f.text_field :name, :class => 'larger widest'  -%>
-
-  </div>
-  
-  <div class='field'>
-    <%= f.label :title -%>
-    <%= f.text_field :title  -%>
-
-  </div>
-  
-  <div class='field'>
-    <%= f.label :description -%>
-    <%= f.text_field :description  -%>
-
-  </div>
-  
-  <div class='field'>
-    <%= f.label :image -%>
-    <%= render '/refinery/admin/image_picker',
-               :f => f,
-               :field => :image_id,
-               :image => @banner.image,
-               :toggle_image_display => false,
-               :description => t('refinery.banners.admin.banner')
-    %>
-
-  </div>
-  
-  <div class='field'>
-    <%= f.label :url -%>
-    <%= f.text_field :url  -%>
-
-  </div>
-  
-  <div class='field'>
-    <%= f.label :is_active -%>
-    <%= f.check_box :is_active, :checked => @banner[:is_active]  -%>
-
-  </div>
-  
-  <div class='field'>
-    <%= f.label :start_date -%>
-    <%= f.date_select :start_date  -%>
-
-  </div>
-  
-  <div class='field'>
-    <%= f.label :expiry_date -%>
-    <%= f.date_select :expiry_date  -%>
-
-  </div>
-
-  <div class="field">
-    <%= f.label :pages %>
-    <% Refinery::Page.all.each do |page| %>
-      <div>
-        <%= check_box_tag "banner[page_ids][]", page.id, @banner.pages.include?(page) %>
-        <%= page.title %>
-      </div>
-    <% end %>
-  </div>
-
-  <%= render '/refinery/admin/form_actions', :f => f,
-             :continue_editing => false,
-             :delete_title => t('delete', :scope => 'refinery.banners.admin.banners.banner'),
-             :delete_confirmation => t('message', :scope => 'refinery.admin.delete', :title => @banner.name) %>
+    <%= render '/refinery/admin/error_messages',
+               :object => @banner,
+               :include_object_name => true %>
+
+    <%= hidden_field_tag 'banner[page_ids][]' %>
+
+    <div class='field'>
+      <%= f.label :name -%>
+      <%= f.text_field :name, :class => 'larger widest'  -%>
+
+    </div>
+
+    <div class='field'>
+      <%= f.label :title -%>
+      <%= f.text_field :title  -%>
+
+    </div>
+
+    <div class='field'>
+      <%= f.label :description -%>
+      <%= f.text_field :description  -%>
+
+    </div>
+
+    <div class='field'>
+      <%= f.label :image -%>
+      <%= render '/refinery/admin/image_picker',
+                 :f => f,
+                 :field => :image_id,
+                 :image => @banner.image,
+                 :toggle_image_display => false,
+                 :description => t('refinery.banners.admin.banner')
+      %>
+
+    </div>
+
+    <div class='field'>
+      <%= f.label :url -%>
+      <%= f.text_field :url  -%>
+
+    </div>
+
+    <div class='field'>
+      <%= f.label :is_active -%>
+      <%= f.check_box :is_active, :checked => @banner[:is_active]  -%>
+
+    </div>
+
+    <div class='field'>
+      <%= f.label :start_date -%>
+      <%= f.date_select :start_date  -%>
+
+    </div>
+
+    <div class='field'>
+      <%= f.label :expiry_date -%>
+      <%= f.date_select :expiry_date  -%>
+
+    </div>
+
+    <section id="records" class="tree">
+      <%= f.label :pages %>
+      <ul class="tristate">
+        <%= render :partial => 'refinery/banners/admin/banners/page', :collection => Refinery::Page.order("lft ASC").select{|p| p.parent_id.nil?}  %>
+      </ul>
+    </section>
+
+
+    <div style="clear: both;"></div>
+    <%= render '/refinery/admin/form_actions', :f => f,
+               :continue_editing => false,
+               :delete_title => t('delete', :scope => 'refinery.banners.admin.banners.banner'),
+               :delete_confirmation => t('message', :scope => 'refinery.admin.delete', :title => @banner.name) %>
 <% end -%>
+
+
diff --git a/app/views/refinery/banners/admin/banners/_page.html.erb b/app/views/refinery/banners/admin/banners/_page.html.erb
new file mode 100644
index 0000000..640d378
--- /dev/null
+++ b/app/views/refinery/banners/admin/banners/_page.html.erb
@@ -0,0 +1,19 @@
+<li class='clearfix record icons' id="<%= dom_id(page) -%>" >
+
+    <% if page.children.present? %>
+        <span class="icon toggle expanded" title="<%= t('expand_collapse', :scope => 'refinery.admin.pages') %>"></span>
+    <% else %>
+        <span class="icon"></span>
+    <% end %>
+
+    <%= check_box_tag "banner[page_ids][]", page.id, @banner.pages.include?(page) %>
+
+    <span class='title <%= 'toggle' if page.children.present? %>'>
+      <%= page.title %>
+    </span>
+
+
+  <ul class='nested' >
+    <%= render(:partial => 'refinery/banners/admin/banners/page', :collection => page.children) %>
+  </ul>
+</li>