204
by Dylan McCall
Filters render HTML with the new structure. |
1 |
It is critical that we describe filters using a consistent format. Every morsel of data provided in HTML is used by Javascript and CSS for context-specific behaviours and styles. |
2 |
||
3 |
We need to support static HTML output with or without CSS, and with or without Javascript. So, don't expect it to be entirely elegant, but it works! |
|
4 |
||
5 |
For brevity, this document uses standard CSS selectors to refer to elements. For example, #elemid refers to an element's ID attribute and .elemclass refers to a class attribute. |
|
6 |
||
7 |
||
8 |
||
9 |
||
10 |
----- General overview ----- |
|
11 |
||
12 |
Here I will define the expected DOM hierarchy to be described in HTML and what it all means. |
|
13 |
||
14 |
#container - Contains everything. This is important for CSS, to align the footer correctly. |
|
15 |
#header - The top part of the page, consistent and visible on most pages. |
|
16 |
span#pagetitle - The title, which is drawn as the leftmost part of the header with a special font. |
|
17 |
img#sitelogo - Logo for the web site. |
|
18 |
h1#sitename - The actual name of the site. |
|
19 |
span#releasename - The name of the current release. Eg: Beta, Revision 201. Should be blank if it is a stable release. Printed as a subscript beside sitename. |
|
20 |
span#userdata - Tools specific to logging in, or the logged in user. |
|
21 |
||
22 |
||
23 |
||
24 |
#content - The portion of the page that changes specific to what is being looked at. |
|
25 |
#filters - Contains the list of filters. Shows their current state and allows the user to interact with them, enabling / disabling filters and setting their values. Filters are explained in more detail later. |
|
26 |
||
218
by Dylan McCall
Separate Package class in harvest.js. Contains event handler, local variables and methods for each package. |
27 |
#results-pane - Container that holds results and surrounding widgets. |
28 |
#results - Holds the list of packages that results from the selected filters. |
|
204
by Dylan McCall
Filters render HTML with the new structure. |
29 |
|
30 |
#footer |
|
31 |
#footnav - More technical links go in here... |
|
32 |
#smallprint - The fine print. Contents are shrunken and ellipsized (where supported) to be really unobtrusive. When moused over, they are shown in more detail. |
|
33 |
#copyright - Copyright notice. |
|
34 |
#techdetails - Stuff geeks and Harvest hackers may want to know, like page generation time and SQL queries count. |
|
35 |
||
36 |
||
37 |
||
38 |
||
39 |
-----Filters----- |
|
40 |
||
41 |
A list of filters goes inside the element #filters. (These are probably FilterGroups, which contain more filters). A filter is described as follows: |
|
42 |
<span class="filter editfilter pkgnamefilter" data-filter-fullname="filter-pkg:name"> |
|
43 |
The class is set to the actual Python class hierarchy of the Filter object in Django, with all Filter subclasses that influence its behaviour. The data-filter-fullname field is the full name of the Filter object in Django, as used in the querystring. |
|
44 |
||
45 |
||
46 |
The immediate contents of each Filter object should be consistent: |
|
47 |
||
48 |
.filter |
|
49 |
.filter-label - The filter's label. This is its name, usually spanning a single line. |
|
207
by Dylan McCall
Implemented EditField editing in Javascript! |
50 |
a.item-toggle - May not be present, but in most cases it is. See .filter.filtergroup .filter-value ul below for more information. Usually .item-toggle for a filter spans its entire .filter-label element. |
51 |
.filter-value - (Optional) Contains a list, a text field or some other element corresponding to the value assigned to this filter, depending on its class. |
|
204
by Dylan McCall
Filters render HTML with the new structure. |
52 |
|
53 |
||
54 |
Now I will describe the different .filter-value elements that are expected. |
|
55 |
||
56 |
.filtergroup , .choicefilter |
|
207
by Dylan McCall
Implemented EditField editing in Javascript! |
57 |
.filter-value ul - List items are all possible choices for the filter. |
204
by Dylan McCall
Filters render HTML with the new structure. |
58 |
li - Needs the data-choice-id attribute, which specifies the exact ID of this choice relative to the current Filter. Add the data-selected attribute if this element is selected. |
59 |
.checkbox - Must always be present. Contents indicate whether the element is selected. If it is currently selected, it must be populated with a check mark character (✓, U+2713, or ✓). |
|
60 |
||
61 |
.choicefilter |
|
62 |
ul > li > a.item-toggle - Expected to enable or disable the item. The href field should be a querystring that does this with static pages from Django, and Javascript will override that default behaviour. |
|
63 |
||
64 |
.filtergroup |
|
65 |
ul > li .filter > .filter-label > .item-toggle - Just like a.item-toggle with .choicefilter; just unfortunately placed for technical reasons. |
|
66 |
||
67 |
.editfilter |
|
207
by Dylan McCall
Implemented EditField editing in Javascript! |
68 |
.filter-value input - An HTML input field. Should not be attached to a form. For now, we are relying on Javascript to hande its value. |
204
by Dylan McCall
Filters render HTML with the new structure. |
69 |
(##TODO##: require type="hidden" if Javascript dependency remains). |
70 |
||
71 |
||
72 |
||
73 |
||
74 |
-----Standard Attributes----- |
|
75 |
||
76 |
For .filter: |
|
77 |
data-filter-fullname: Should be the full name of the filter, as it is in the querystring and in the FilterSystem in Django. (Eg: id="filter-pkg:set"). |
|
78 |
data-filter-value: The filter's value in serialized form. This attribute does not need to be filled initially, but our Javascript will fill it in as new values are generated. |
|
79 |
||
80 |
For .filtergroup > ul > li and .choicefilter > ul > li: |
|
81 |
data-item-name: The id of this item relative to the parent filter; not its full name. (Eg: data-item-name="netbook" for the choice with id_str="netbook"). |
|
223
by Dylan McCall
Adding newlines to files that were tragically cut short. |
82 |
data-selected: Add if the choice is currently selected. |
83 |