On Sat, Oct 26, 2013 at 6:52 AM, Edward K. Ream <[email protected]> wrote:
> On Fri, Oct 25, 2013 at 8:01 PM, Brian Theado <[email protected]>
> wrote:
>
>>
>> I played around
>> with creating some html/css which could display example leo tree
>> structure just as it would appear in leo itself.
>>
>> Check out the result here: http://jsfiddle.net/YFsNL/ (the result is
>> rendered in the bottom right "pane").
[...]
>
> This would make an relatively easy-to-do @button node.
>
>> For those that didn't click the jsfiddle link above, here is the html and
>> css:
>> [snip]
>
>
> Very nice. And one could add other css tags for all variations of marked,
> cloned, dirty nodes. 16 in all.
Here's some lightly test code suitable for an @button node (modulo
possible email line-wrap issues). It just displays both the css and
the html to the log pane. Supports all 16 icon boxes:
@language python
g.es('=============')
basecss = r'''
ul.leo-tree-example {
background-color: #ffffec;
}
ul.leo-tree-example li {
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 27px;
}
li.selected {
background-color: lightgrey;
}
li.plus {
list-style-image:
url('https://raw.github.com/leo-editor/leo-editor/master/leo/Icons/plusnode.gif');
}
li.minus {
list-style-image:
url('https://raw.github.com/leo-editor/leo-editor/master/leo/Icons/minusnode.gif');
}
li.leaf {
list-style-type: none;
}
'''
boxcss = [r'''
li.iconbox%02d {
background-image:
url('https://raw.github.com/leo-editor/leo-editor/master/leo/Icons/box%02d.GIF');
}
''' % (n, n) for n in range(16)]
g.es(basecss + "".join(boxcss))
g.es('----')
def escapeHtml(s):
return s.replace('&', '&').replace('<', '<').replace('>', '>')
def headlineToHtml(p):
'''
Returns html representation (unordered list)
of the visible portions of the subtree rooted
at position p. CSS classes corresponding to the
expansion state and icon box are included in
each list item. Combined with the proper CSS, the
result can be made to look similar to leo's tree
pane.
'''
classes = []
if p.isExpanded():
classes += ['minus']
elif p.hasChildren():
classes += ['plus']
else:
classes += ['leaf']
classes += ['iconbox%02d' % p.computeIcon()]
html = "<li class='%s'>\n" % " ".join(classes)
html += escapeHtml(p.h)
html += "\n</li>\n"
if p.isExpanded() and p.hasChildren():
html += "<ul>\n"
for child in p.children():
html += headlineToHtml(child)
html += "\n</ul>\n"
return html
g.es('<ul class="leo-tree-example">')
g.es(headlineToHtml(p))
g.es('</ul>')
Brian
--
You received this message because you are subscribed to the Google Groups
"leo-editor" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/leo-editor.
For more options, visit https://groups.google.com/groups/opt_out.
