listy 0.0.6 → 0.0.7

Sign up to get free protection for your applications and to get access to all the features.
data/README.md CHANGED
@@ -39,7 +39,7 @@ Listy also includes some Javascript assets, so be sure to add the following line
39
39
 
40
40
  If you don't plan on using any of the Hiding/Collapsing of the lists - you don't have to include this.
41
41
 
42
- ## Usage
42
+ ## Rails Helpers Usage
43
43
 
44
44
  There are a couple of helper methods including:
45
45
 
@@ -53,7 +53,7 @@ This method creates a simple unordered list of links of the elements in the coll
53
53
 
54
54
  Options you can pass in include
55
55
 
56
- * display_method - Symbol of method to be called on each record to generate what is displayed in the list. If you set is not specified, to_s will be called on the element to generate the display string.
56
+ * :display_method - Symbol of method to be called on each record to generate what is displayed in the list. If you set is not specified, to_s will be called on the element to generate the display string.
57
57
  * :css_class - The class that is applied to the resulting ul list element
58
58
  * :empty_message - The message that is displayed if the collection is empty
59
59
  * :show_more - If set to true, the list will display only the first 10 elements, and hide the rest and create a "Show More" link. Show more functionality requires JQuery and list.js - please read above.
@@ -70,6 +70,8 @@ Options you can pass in include
70
70
 
71
71
  <%= listy_links Product.all, :display_method => :part_number, :show_more => true, :show_more_limit => 100, :css_class => "products-list" %>
72
72
  ```
73
+
74
+
73
75
  ### multi_column_listy_links
74
76
 
75
77
  multi_column_listy_links(collection, number_of_columns, options={})
@@ -81,7 +83,7 @@ This does the same thing as listy_links but presents it in the number of columns
81
83
 
82
84
  Options you can pass in include:
83
85
 
84
- * display_method - Symbol of method to be called on each record to generate what is displayed in the list. If you set is not specified, to_s will be called on the element to generate the display string.
86
+ * :display_method - Symbol of method to be called on each record to generate what is displayed in the list. If you set is not specified, to_s will be called on the element to generate the display string.
85
87
  * :css_class - The class that is applied to the resulting ul list elements in each column
86
88
  * :empty_message - The message that is displayed if the collection is empty
87
89
 
@@ -95,6 +97,7 @@ Options you can pass in include:
95
97
  <%= multi_column_listy_links Product.all, 4, :display_method => :part_number, :css_class => "products-list", :empty_message => "There are no products" %>
96
98
  ```
97
99
 
100
+
98
101
  ### listy_tree
99
102
 
100
103
  listy_tree(collection, spec, options={})
@@ -102,14 +105,32 @@ Options you can pass in include:
102
105
  This method is for creating a nested tree of unordered lists for a collection with nested collections.
103
106
  This is suitable for Rails models that have has_many relationships. The lists will be collapsable if you click on the parent elements (requires JQuery and listy.js, please read above).
104
107
 
105
- The spec is basically instructions on how to create the nested tree. It is a nested hash where each child specifies how to create the nested list
108
+ The spec is basically instructions on how to create the nested tree. It is a nested hash where each child specifies how to create the nested list.
109
+
110
+ * collection - Collection, usually nested, of elements, usually ActiveRecord's with has_many relationships
111
+ * spec - explained below
112
+
113
+ Options you can pass in include:
114
+
115
+ * :css_class - The class that is applied to the resulting div tag that surrounds the nested lists
116
+ * :empty_message - The message that is displayed if the collection is empty
117
+
118
+ #### CSS Classes
119
+
120
+ Each nested ul element ends up being assigned a class. The upper most ul has a css class of `listy-tree-level-0` and the next one has a css class of `listy-tree-level-1` and so on.
121
+
122
+ Also, with the collapsing and expanding of the list, the following classes also are applied and taken away to the headers of the lists `listy-list-header-expanded` and `listy-list-header-collapsed`. This way you can style what the header looks like when you expand or collapse the list.
123
+
124
+ Lastly, the leafs of a listy-tree have the css class `listy-tree-leaf`.
125
+
126
+ Basically this are all used for custom styling.
106
127
 
107
128
 
108
129
  #### Spec Explanation
109
130
 
110
131
  The spec is a nested hash that contains the following elements:
111
132
 
112
- * display_method - Symbol of method to be called on each record to generate what is displayed in the list. If you set is not specified, to_s will be called on the element to generate the display string.
133
+ * :display_method - Symbol of method to be called on each record to generate what is displayed in the list. If you set is not specified, to_s will be called on the element to generate the display string.
113
134
  * :children - The name of the method (typically the has_many relationship) to call to get the nested collection (leave unspecified or nil if this is the leaf node)
114
135
  * :child - The spec for the elements of the children (leave unspecified or nil if this is the leaf node)
115
136
 
@@ -148,6 +169,25 @@ Let's say we have the following
148
169
 
149
170
  Be sure that the inner most child of the spec has :children => nil (or just leave it undefined). This will stop the nesting.
150
171
 
172
+ ## JQuery based Javascript Functions
173
+
174
+ Aside from the javascript functions that are used by the generated elements (like the Show More button), there are some javascript functions that might be useful to users described below.
175
+
176
+ ### autoCollapseAllListyBranchesBut
177
+
178
+ autoCollapseAllListyBranchesBut(headerName, tree)
179
+
180
+ This method is handy to collapse all branches of a listy_tree with the exception of a branch that has a header that matches the passed in headerName.
181
+
182
+ * headerName - The text to match. If a list in the listy_tree has a header that matches this value, it will be left alone. All other lists will be collapsed.
183
+ * tree - The listy tree element. If using JQuery, you can pass in something like $(".listy-tree listy-tree-level-1")
184
+
185
+ #### Example Usage:
186
+
187
+ ```javascript
188
+ autoCollapseAllListyBranchesBut("Products", $(".listy-tree listy-tree-level-1"));
189
+ ```
190
+
151
191
 
152
192
  ## Contributing
153
193
 
@@ -6,10 +6,11 @@ $(function(){
6
6
  function listyTreeListHeaderClick() {
7
7
  var list = $(this).siblings("ul");
8
8
  toggleListyTreeList(list);
9
+ return false;
9
10
  }
10
11
 
11
12
  function toggleListyTreeList(list) {
12
- toggleListyTreList(200);
13
+ toggleListyTreeList(list, 200);
13
14
  }
14
15
 
15
16
  function toggleListyTreeList(list, duration) {
@@ -17,20 +18,22 @@ function toggleListyTreeList(list, duration) {
17
18
  var header = list.siblings(".listy-tree-list-header");
18
19
  if(list.is(":visible")) {
19
20
  list.slideUp(duration);
20
- header.children(".icon").html("<i class='icon-angle-right'></i>");
21
+ header.removeClass("listy-list-header-expanded");
22
+ header.addClass("listy-list-header-collapsed");
21
23
  }
22
24
  else {
23
25
  list.slideDown(duration);
24
- header.children(".icon").html("<i class='icon-angle-down'></i>");
26
+ header.addClass("listy-list-header-expanded");
27
+ header.removeClass("listy-list-header-collapsed");
25
28
  }
26
29
  }
27
30
 
28
- function autoCollapseAllBut(headerName, tree) {
31
+ function autoCollapseAllListyBranchesBut(headerName, tree) {
29
32
  jQuery.each(tree.children("li"), function(){
30
33
 
31
- var listHeaderText = $(this).children(".list-header").children(".list-header-text").html();
34
+ var listHeaderText = $(this).children(".listy-tree-list-header").html();
32
35
  if(headerName != listHeaderText) {
33
- toggleList($(this).children(".list-header").siblings("ul"), 0);
36
+ toggleListyTreeList($(this).children(".listy-tree-list-header").siblings("ul"), 0);
34
37
  }
35
38
 
36
39
  });
@@ -38,15 +41,15 @@ function autoCollapseAllBut(headerName, tree) {
38
41
 
39
42
  /*********************** LISTY SHOW-MORE LIST ******************************************/
40
43
  $(function(){
41
- $(".listy-show-more-link").click(toggleMoreList);
44
+ $(".listy-show-more-link").click(toggleListyShowMoreList);
42
45
  });
43
46
 
44
- function toggleMoreList() {
47
+ function toggleListyShowMoreList() {
45
48
  toggleMoreList(200);
46
49
  return false;
47
50
  }
48
51
 
49
- function toggleMoreList(duration) {
52
+ function toggleListyShowMoreList(duration) {
50
53
  var showMoreList = $(this).siblings(".listy-show-more-list");
51
54
  if(showMoreList.is(":visible")) {
52
55
  showMoreList.slideUp(duration);
data/lib/listy/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Listy
2
- VERSION = "0.0.6"
2
+ VERSION = "0.0.7"
3
3
  end
@@ -2,8 +2,9 @@ module Listy
2
2
  module ViewHelpers
3
3
 
4
4
  def listy_tree(collection, spec, options={})
5
+ css_class = options[:css_class] || ""
5
6
  if collection.present?
6
- html = "<div class='listy-tree'>" + create_listy_tree(collection, spec, "", 0) + "</div>"
7
+ html = "<div class='listy-tree " + css_class + "'>" + create_listy_tree(collection, spec, "", 0) + "</div>"
7
8
  else
8
9
  html = options[:empty_message] || "There are no entries in this list."
9
10
  end
@@ -77,8 +78,14 @@ module Listy
77
78
  collection.each do |element|
78
79
  html += "<li>"
79
80
  display = spec[:display_method].nil? ? element.to_s : element.try(spec[:display_method])
80
- html += "<div class='listy-tree-list-header'>#{display}</div>"
81
- html = create_listy_tree(element.try(spec[:children]), spec[:child], html, level+1) if !spec[:children].nil?
81
+
82
+ if !spec[:children].nil?
83
+ html += "<div class='listy-tree-list-header listy-list-header-expanded'>#{display}</div>"
84
+ html = create_listy_tree(element.try(spec[:children]), spec[:child], html, level+1)
85
+ else
86
+ html += "<div class='listy-tree-leaf'>#{display}</div>"
87
+ end
88
+
82
89
  html += "</li>"
83
90
  end
84
91
 
data/listy.gemspec CHANGED
@@ -7,7 +7,8 @@ Gem::Specification.new do |gem|
7
7
  gem.description = %q{"A bunch of helpers to create fancy lists"}
8
8
  gem.summary = %q{"Everything for list of links from collections to multi-column lists"}
9
9
  gem.homepage = ""
10
-
10
+ gem.license = 'MIT'
11
+
11
12
  gem.files = `git ls-files`.split($\)
12
13
  gem.executables = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
13
14
  gem.test_files = gem.files.grep(%r{^(test|spec|features)/})
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: listy
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.6
4
+ version: 0.0.7
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2013-07-23 00:00:00.000000000 Z
12
+ date: 2013-07-25 00:00:00.000000000 Z
13
13
  dependencies: []
14
14
  description: ! '"A bunch of helpers to create fancy lists"'
15
15
  email:
@@ -33,7 +33,8 @@ files:
33
33
  - lib/listy/view_helpers.rb
34
34
  - listy.gemspec
35
35
  homepage: ''
36
- licenses: []
36
+ licenses:
37
+ - MIT
37
38
  post_install_message:
38
39
  rdoc_options: []
39
40
  require_paths: