* Added onclick handlers for dynamically loaded note tree links and their
associated expanders. * Waged an epic battle against the dark forces of CSS. Did you know that the max-height property applies to nearly all HTML elements *except* tables? No? Well neither did I until I looked it up, seriously wondered what the W3C could have been smoking, and then proceeded to spend the next DAY AND A FRICKING HALF making my table have a max-height without breaking any of my other intricately arranged CSS. Victory is mine.
This commit is contained in:
parent
b6acd92630
commit
a3909d05d5
|
@ -256,18 +256,20 @@ img {
|
|||
line-height: 140%;
|
||||
top: 80px;
|
||||
bottom: 1em;
|
||||
overflow-y: visible;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
#note_tree_area_holder {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding-left: 1em;
|
||||
margin-right: 1em;
|
||||
border-collapse: collapse;
|
||||
max-height: 100%;
|
||||
font-size: 90%;
|
||||
overflow: auto;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.note_tree_table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#note_tree_area_title {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.25em;
|
||||
|
@ -275,17 +277,17 @@ img {
|
|||
|
||||
.note_tree_link {
|
||||
background: url(/static/images/note_icon.png) left center no-repeat;
|
||||
padding-left: 18px;
|
||||
padding-left: 19px;
|
||||
}
|
||||
|
||||
.note_tree_external_link {
|
||||
background: url(/static/images/web_icon.png) left center no-repeat;
|
||||
padding-left: 18px;
|
||||
padding-left: 19px;
|
||||
}
|
||||
|
||||
.note_tree_file_link {
|
||||
background: url(/static/images/file_icon.png) left center no-repeat;
|
||||
padding-left: 18px;
|
||||
padding-left: 19px;
|
||||
}
|
||||
|
||||
.note_tree_loading {
|
||||
|
@ -564,46 +566,47 @@ img {
|
|||
}
|
||||
|
||||
.link_area_item {
|
||||
padding: 0.2em 0.25em 0.2em 0.5em;
|
||||
font-size: 90%;
|
||||
padding: 0.25em 0.25em 0.25em 0.5em;
|
||||
}
|
||||
|
||||
.note_tree_item {
|
||||
padding: 0.2em 0.25em 0.2em 0;
|
||||
font-size: 90%;
|
||||
padding: 0.25em 0.25em 0.25em 0;
|
||||
}
|
||||
|
||||
.tree_expander {
|
||||
float: left;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin-right: 4px;
|
||||
height: 1.5em;
|
||||
background: url(/static/images/tree_arrow.png) no-repeat center center;
|
||||
margin-top: 0.5em;
|
||||
background: url(/static/images/tree_arrow.png) no-repeat center top;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tree_expander:hover {
|
||||
background: url(/static/images/tree_arrow_hover.png) no-repeat center center;
|
||||
cursor: pointer;
|
||||
background: url(/static/images/tree_arrow_hover.png) no-repeat center top;
|
||||
}
|
||||
|
||||
.tree_expander_expanded {
|
||||
float: left;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin-right: 4px;
|
||||
height: 1.5em;
|
||||
background: url(/static/images/tree_arrow_down.png) no-repeat center center;
|
||||
margin-top: 0.5em;
|
||||
background: url(/static/images/tree_arrow_down.png) no-repeat center top;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tree_expander_expanded:hover {
|
||||
background: url(/static/images/tree_arrow_down_hover.png) no-repeat center center;
|
||||
cursor: pointer;
|
||||
background: url(/static/images/tree_arrow_down_hover.png) no-repeat center top;
|
||||
}
|
||||
|
||||
.tree_expander_empty {
|
||||
float: left;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
margin-right: 4px;
|
||||
height: 1.5em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
#storage_usage_area {
|
||||
|
|
|
@ -2680,15 +2680,9 @@ Note_tree.prototype.expand_link = function ( event, note_id ) {
|
|||
"notebook_id": this.notebook_id,
|
||||
"note_id": note_id
|
||||
},
|
||||
function ( result ) {
|
||||
var span = createDOM( "span" );
|
||||
span.innerHTML = result.tree_html;
|
||||
replaceChildNodes( children_area, span );
|
||||
}
|
||||
function ( result ) { try{ self.display_child_links( result, children_area ); } catch(e){ alert(e); } }
|
||||
);
|
||||
|
||||
// TODO: add onclick handler for each link that's to a note
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -2703,3 +2697,29 @@ Note_tree.prototype.expand_link = function ( event, note_id ) {
|
|||
|
||||
Note_tree.prototype.collapse_link = function ( event, note_id ) {
|
||||
}
|
||||
|
||||
Note_tree.prototype.display_child_links = function ( result, children_area ) {
|
||||
var self = this;
|
||||
|
||||
function connect_expander( expander, note_id ) {
|
||||
connect( expander, "onclick", function ( event ) { self.expand_link( event, note_id ); } );
|
||||
}
|
||||
|
||||
var span = createDOM( "span" );
|
||||
span.innerHTML = result.tree_html;
|
||||
replaceChildNodes( children_area, span );
|
||||
|
||||
// add an onclick handler for each newly loaded expander and each note link
|
||||
var links = getElementsByTagAndClassName( "a", null, children_area );
|
||||
for ( var i in links ) {
|
||||
var link = links[ i ];
|
||||
connect( link, "onclick", function ( event ) { self.link_clicked( event ); } );
|
||||
var expander = getFirstElementByTagAndClassName( "td", "tree_expander", link.parentNode.parentNode );
|
||||
|
||||
if ( expander ) {
|
||||
var note_id = parse_query( link )[ "note_id" ];
|
||||
if ( note_id )
|
||||
connect_expander( expander, note_id );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -20,13 +20,13 @@ class Note_tree_area( Div ):
|
|||
self.make_tree(
|
||||
[ self.make_item(
|
||||
title = note.title,
|
||||
link_attributes = u"href=/notebooks/%s?note_id=%s" % ( notebook.object_id, note.object_id ),
|
||||
link_attributes = u'href="/notebooks/%s?note_id=%s"' % ( notebook.object_id, note.object_id ),
|
||||
link_class = u"note_tree_link",
|
||||
has_children = self.LINK_PATTERN.search( note.contents ),
|
||||
root_note_id = note.object_id,
|
||||
) for note in root_notes ],
|
||||
tree_id = u"note_tree_area_holder",
|
||||
),
|
||||
id = u"note_tree_area_holder",
|
||||
),
|
||||
Span( id = "tree_arrow_hover_preload" ),
|
||||
Span( id = "tree_arrow_down_preload" ),
|
||||
|
@ -57,5 +57,5 @@ class Note_tree_area( Div ):
|
|||
def make_tree( items, tree_id = None ):
|
||||
return Table(
|
||||
items,
|
||||
id = tree_id,
|
||||
class_ = u"note_tree_table",
|
||||
)
|
||||
|
|
Reference in New Issue
Block a user