* 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%;
|
line-height: 140%;
|
||||||
top: 80px;
|
top: 80px;
|
||||||
bottom: 1em;
|
bottom: 1em;
|
||||||
overflow-y: visible;
|
padding-left: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#note_tree_area_holder {
|
#note_tree_area_holder {
|
||||||
height: 100%;
|
max-height: 100%;
|
||||||
overflow-y: auto;
|
font-size: 90%;
|
||||||
padding-left: 1em;
|
overflow: auto;
|
||||||
margin-right: 1em;
|
|
||||||
border-collapse: collapse;
|
|
||||||
margin-left: 0.5em;
|
margin-left: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.note_tree_table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
#note_tree_area_title {
|
#note_tree_area_title {
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
margin-bottom: 0.25em;
|
margin-bottom: 0.25em;
|
||||||
|
@ -275,17 +277,17 @@ img {
|
||||||
|
|
||||||
.note_tree_link {
|
.note_tree_link {
|
||||||
background: url(/static/images/note_icon.png) left center no-repeat;
|
background: url(/static/images/note_icon.png) left center no-repeat;
|
||||||
padding-left: 18px;
|
padding-left: 19px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.note_tree_external_link {
|
.note_tree_external_link {
|
||||||
background: url(/static/images/web_icon.png) left center no-repeat;
|
background: url(/static/images/web_icon.png) left center no-repeat;
|
||||||
padding-left: 18px;
|
padding-left: 19px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.note_tree_file_link {
|
.note_tree_file_link {
|
||||||
background: url(/static/images/file_icon.png) left center no-repeat;
|
background: url(/static/images/file_icon.png) left center no-repeat;
|
||||||
padding-left: 18px;
|
padding-left: 19px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.note_tree_loading {
|
.note_tree_loading {
|
||||||
|
@ -564,46 +566,47 @@ img {
|
||||||
}
|
}
|
||||||
|
|
||||||
.link_area_item {
|
.link_area_item {
|
||||||
padding: 0.2em 0.25em 0.2em 0.5em;
|
padding: 0.25em 0.25em 0.25em 0.5em;
|
||||||
font-size: 90%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.note_tree_item {
|
.note_tree_item {
|
||||||
padding: 0.2em 0.25em 0.2em 0;
|
padding: 0.25em 0.25em 0.25em 0;
|
||||||
font-size: 90%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree_expander {
|
.tree_expander {
|
||||||
float: left;
|
float: left;
|
||||||
width: 11px;
|
width: 11px;
|
||||||
|
height: 11px;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
height: 1.5em;
|
margin-top: 0.5em;
|
||||||
background: url(/static/images/tree_arrow.png) no-repeat center center;
|
background: url(/static/images/tree_arrow.png) no-repeat center top;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree_expander:hover {
|
.tree_expander:hover {
|
||||||
background: url(/static/images/tree_arrow_hover.png) no-repeat center center;
|
background: url(/static/images/tree_arrow_hover.png) no-repeat center top;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree_expander_expanded {
|
.tree_expander_expanded {
|
||||||
float: left;
|
float: left;
|
||||||
width: 11px;
|
width: 11px;
|
||||||
|
height: 11px;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
height: 1.5em;
|
margin-top: 0.5em;
|
||||||
background: url(/static/images/tree_arrow_down.png) no-repeat center center;
|
background: url(/static/images/tree_arrow_down.png) no-repeat center top;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree_expander_expanded:hover {
|
.tree_expander_expanded:hover {
|
||||||
background: url(/static/images/tree_arrow_down_hover.png) no-repeat center center;
|
background: url(/static/images/tree_arrow_down_hover.png) no-repeat center top;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree_expander_empty {
|
.tree_expander_empty {
|
||||||
float: left;
|
float: left;
|
||||||
width: 11px;
|
width: 11px;
|
||||||
|
height: 11px;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
height: 1.5em;
|
margin-top: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#storage_usage_area {
|
#storage_usage_area {
|
||||||
|
|
|
@ -2680,15 +2680,9 @@ Note_tree.prototype.expand_link = function ( event, note_id ) {
|
||||||
"notebook_id": this.notebook_id,
|
"notebook_id": this.notebook_id,
|
||||||
"note_id": note_id
|
"note_id": note_id
|
||||||
},
|
},
|
||||||
function ( result ) {
|
function ( result ) { try{ self.display_child_links( result, children_area ); } catch(e){ alert(e); } }
|
||||||
var span = createDOM( "span" );
|
|
||||||
span.innerHTML = result.tree_html;
|
|
||||||
replaceChildNodes( children_area, span );
|
|
||||||
}
|
|
||||||
);
|
);
|
||||||
|
|
||||||
// TODO: add onclick handler for each link that's to a note
|
|
||||||
|
|
||||||
return;
|
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.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_tree(
|
||||||
[ self.make_item(
|
[ self.make_item(
|
||||||
title = note.title,
|
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",
|
link_class = u"note_tree_link",
|
||||||
has_children = self.LINK_PATTERN.search( note.contents ),
|
has_children = self.LINK_PATTERN.search( note.contents ),
|
||||||
root_note_id = note.object_id,
|
root_note_id = note.object_id,
|
||||||
) for note in root_notes ],
|
) 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_hover_preload" ),
|
||||||
Span( id = "tree_arrow_down_preload" ),
|
Span( id = "tree_arrow_down_preload" ),
|
||||||
|
@ -57,5 +57,5 @@ class Note_tree_area( Div ):
|
||||||
def make_tree( items, tree_id = None ):
|
def make_tree( items, tree_id = None ):
|
||||||
return Table(
|
return Table(
|
||||||
items,
|
items,
|
||||||
id = tree_id,
|
class_ = u"note_tree_table",
|
||||||
)
|
)
|
||||||
|
|
Reference in New Issue