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 +45 -5
- data/app/assets/javascripts/listy.js +12 -9
- data/lib/listy/version.rb +1 -1
- data/lib/listy/view_helpers.rb +10 -3
- data/listy.gemspec +2 -1
- metadata +4 -3
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
|
-
|
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.
|
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.
|
26
|
+
header.addClass("listy-list-header-expanded");
|
27
|
+
header.removeClass("listy-list-header-collapsed");
|
25
28
|
}
|
26
29
|
}
|
27
30
|
|
28
|
-
function
|
31
|
+
function autoCollapseAllListyBranchesBut(headerName, tree) {
|
29
32
|
jQuery.each(tree.children("li"), function(){
|
30
33
|
|
31
|
-
var listHeaderText = $(this).children(".
|
34
|
+
var listHeaderText = $(this).children(".listy-tree-list-header").html();
|
32
35
|
if(headerName != listHeaderText) {
|
33
|
-
|
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(
|
44
|
+
$(".listy-show-more-link").click(toggleListyShowMoreList);
|
42
45
|
});
|
43
46
|
|
44
|
-
function
|
47
|
+
function toggleListyShowMoreList() {
|
45
48
|
toggleMoreList(200);
|
46
49
|
return false;
|
47
50
|
}
|
48
51
|
|
49
|
-
function
|
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
data/lib/listy/view_helpers.rb
CHANGED
@@ -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
|
-
|
81
|
-
|
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.
|
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-
|
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:
|