Commit 956a7fb0 authored by Dimitri van Heesch's avatar Dimitri van Heesch

Improved performance of rendering large index pages, by replacing images in the tables by spans

parent d5fb6973
......@@ -670,12 +670,12 @@ span.mlabel {
/* @end */
/* these are for tree view when not used as main index */
/* these are for tree view inside a (index) page */
div.directory {
margin: 10px 0px;
border-top: 1px solid #A8B8D9;
border-bottom: 1px solid #A8B8D9;
border-top: 1px solid ##AA;
border-bottom: 1px solid ##AA;
width: 100%;
}
......@@ -734,6 +734,80 @@ div.directory {
color: ##50;
}
.arrow {
color: ##AA;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
font-size: 80%;
display: inline-block;
width: 16px;
height: 22px;
}
.icon {
font-family: Arial, Helvetica;
font-weight: bold;
font-size: 12px;
height: 14px;
width: 16px;
display: inline-block;
background-color: ##88;
color: white;
text-align: center;
border-radius: 4px;
margin-left: 2px;
margin-right: 2px;
}
.icona {
width: 24px;
height: 22px;
display: inline-block;
}
.iconfopen {
width: 24px;
height: 18px;
margin-bottom: 4px;
background-image:url('ftv2folderopen.png');
background-position: 0px -4px;
background-repeat: repeat-y;
vertical-align:top;
display: inline-block;
}
.iconfclosed {
width: 24px;
height: 18px;
margin-bottom: 4px;
background-image:url('ftv2folderclosed.png');
background-position: 0px -4px;
background-repeat: repeat-y;
vertical-align:top;
display: inline-block;
}
.icondoc {
width: 24px;
height: 18px;
margin-bottom: 4px;
background-image:url('ftv2doc.png');
background-position: 0px -4px;
background-repeat: repeat-y;
vertical-align:top;
display: inline-block;
}
table.directory {
font: 400 14px Roboto,sans-serif;
}
/* @end */
div.dynheader {
margin-top: 8px;
-webkit-touch-callout: none;
......
......@@ -24,19 +24,20 @@ function updateStripes()
$('table.directory tr').
removeClass('even').filter(':visible:even').addClass('even');
}
function toggleLevel(level)
{
$('table.directory tr').each(function(){
$('table.directory tr').each(function() {
var l = this.id.split('_').length-1;
var i = $('#img'+this.id.substring(3));
var a = $('#arr'+this.id.substring(3));
if (l<level+1) {
i.attr('src','ftv2folderopen.png');
a.attr('src','ftv2mnode.png');
i.removeClass('iconfopen iconfclosed').addClass('iconfopen');
a.html('&#9660;');
$(this).show();
} else if (l==level+1) {
i.attr('src','ftv2folderclosed.png');
a.attr('src','ftv2pnode.png');
i.removeClass('iconfclosed iconfopen').addClass('iconfclosed');
a.html('&#9658;');
$(this).show();
} else {
$(this).hide();
......@@ -47,34 +48,33 @@ function toggleLevel(level)
function toggleFolder(id)
{
//The clicked row
// the clicked row
var currentRow = $('#row_'+id);
var currentRowImages = currentRow.find("img");
//All rows after the clicked row
// all rows after the clicked row
var rows = currentRow.nextAll("tr");
//Only match elements AFTER this one (can't hide elements before)
var childRows = rows.filter(function() {
var re = new RegExp('^row_'+id+'\\d+_$', "i"); //only one sub
return this.id.match(re);
});
//First row is visible we are HIDING
if (childRows.filter(':first').is(':visible')===true) {
currentRowImages.filter("[id^=arr]").attr('src', 'ftv2pnode.png');
currentRowImages.filter("[id^=img]").attr('src', 'ftv2folderclosed.png');
rows.filter("[id^=row_"+id+"]").hide();
} else { //We are SHOWING
//All sub images
var childImages = childRows.find("img");
var childImg = childImages.filter("[id^=img]");
var childArr = childImages.filter("[id^=arr]");
// only match elements AFTER this one (can't hide elements before)
var childRows = rows.filter(function() { return this.id.match(re); });
currentRow.find("[id^=arr]").attr('src', 'ftv2mnode.png'); //open row
currentRow.find("[id^=img]").attr('src', 'ftv2folderopen.png'); //open row
childImg.attr('src','ftv2folderclosed.png'); //children closed
childArr.attr('src','ftv2pnode.png'); //children closed
// first row is visible we are HIDING
if (childRows.filter(':first').is(':visible')===true) {
// replace down arrow by right arrow for current row
var currentRowSpans = currentRow.find("span");
currentRowSpans.filter(".iconfopen").removeClass("iconfopen").addClass("iconfclosed");
currentRowSpans.filter(".arrow").html('&#9658;');
rows.filter("[id^=row_"+id+"]").hide(); // hide all children
} else { // we are SHOWING
// replace right arrow by down arrow for current row
var currentRowSpans = currentRow.find("span");
currentRowSpans.filter(".iconfclosed").removeClass("iconfclosed").addClass("iconfopen");
currentRowSpans.filter(".arrow").html('&#9660;');
// replace down arrows by right arrows for child rows
var childRowsSpans = childRows.find("span");
childRowsSpans.filter(".iconfopen").removeClass("iconfopen").addClass("iconfclosed");
childRowsSpans.filter(".arrow").html('&#9658;');
childRows.show(); //show all children
}
updateStripes();
......
......@@ -234,6 +234,7 @@ static unsigned char doc_a_png[528] =
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
};
#if 0
static unsigned char module_png[528] =
{
255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,
......@@ -338,6 +339,7 @@ static unsigned char letter_a_png[528] =
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
};
#endif
static unsigned char arrow_right_png[352] =
......@@ -507,6 +509,7 @@ struct FTVImageInfo
//extern FTVImageInfo image_info[];
#if 0
#define FTVIMG_blank 0
#define FTVIMG_doc 1
#define FTVIMG_folderclosed 2
......@@ -553,6 +556,7 @@ static FTVImageInfo image_info[] =
{ "M", "ftv2mo.png", 0 /*ftv2vertline_png*/ /*,352*/,24,22 },
{ 0, 0, 0 /*, 0*/, 0, 0 }
};
#endif
static ColoredImgDataItem ftv_image_data[] =
{
......@@ -560,9 +564,9 @@ static ColoredImgDataItem ftv_image_data[] =
{ "ftv2doc.png", 24, 22, doc_png, doc_a_png },
{ "ftv2folderclosed.png", 24, 22, folderclosed_png, folderclosed_a_png },
{ "ftv2folderopen.png", 24, 22, folderopen_png, folderopen_a_png },
{ "ftv2ns.png", 24, 22, namespace_png, letter_a_png },
{ "ftv2mo.png", 24, 22, module_png, letter_a_png },
{ "ftv2cl.png", 24, 22, class_png, letter_a_png },
// { "ftv2ns.png", 24, 22, namespace_png, letter_a_png },
// { "ftv2mo.png", 24, 22, module_png, letter_a_png },
// { "ftv2cl.png", 24, 22, class_png, letter_a_png },
{ "ftv2lastnode.png", 16, 22, blank_png, blank_png },
{ "ftv2link.png", 24, 22, doc_png, doc_a_png },
{ "ftv2mlastnode.png", 16, 22, arrow_down_png, arrow_down_a_png },
......@@ -784,64 +788,23 @@ QCString FTVHelp::generateIndentLabel(FTVNode *n,int level)
return result;
}
void FTVHelp::generateIndent(FTextStream &t, FTVNode *n,int level, bool opened)
void FTVHelp::generateIndent(FTextStream &t, FTVNode *n,bool opened)
{
if (n->parent)
{
generateIndent(t,n->parent,level+1,opened);
}
// from the root up to node n do...
if (level==0) // item before a dir or document
{
if (n->isLast)
{
if (n->isDir)
{
t << "<img id=\"arr_" << generateIndentLabel(n,0)
<< "\" ";
if (opened)
t << FTV_IMGATTRIBS(mlastnode);
else
t << FTV_IMGATTRIBS(plastnode);
t << "onclick=\"toggleFolder('"
<< generateIndentLabel(n,0)
<< "')\"/>";
}
else
{
t << "<img " << FTV_IMGATTRIBS(lastnode) << "/>";
}
}
else
{
int indent=0;
FTVNode *p = n->parent;
while (p) { indent++; p=p->parent; }
if (n->isDir)
{
t << "<img id=\"arr_" << generateIndentLabel(n,0)
<< "\" ";
if (opened)
t << FTV_IMGATTRIBS(mnode);
else
t << FTV_IMGATTRIBS(pnode);
t << "onclick=\"toggleFolder('"
<< generateIndentLabel(n,0)
<< "')\"/>";
QCString dir = opened ? "&#9660;" : "&#9658;";
t << "<span style=\"width:" << (indent*16) << "px;display:inline-block;\">&#160;</span>"
<< "<span id=\"arr_" << generateIndentLabel(n,0) << "\" class=\"arrow\" ";
t << "onclick=\"toggleFolder('" << generateIndentLabel(n,0) << "')\"";
t << ">" << dir
<< "</span>";
}
else
{
t << "<img " << FTV_IMGATTRIBS(node) << "/>";
}
}
}
else // item at another level
{
if (n->isLast)
{
t << "<img " << FTV_IMGATTRIBS(blank) << "/>";
}
else
{
t << "<img " << FTV_IMGATTRIBS(vertline) << "/>";
}
t << "<span style=\"width:" << ((indent+1)*16) << "px;display:inline-block;\">&#160;</span>";
}
}
......@@ -912,7 +875,7 @@ void FTVHelp::generateTree(FTextStream &t, const QList<FTVNode> &nl,int level,in
index++;
t << "><td class=\"entry\">";
bool nodeOpened = level+1<maxLevel;
generateIndent(t,n,0,nodeOpened);
generateIndent(t,n,nodeOpened);
if (n->isDir)
{
if (n->def && n->def->definitionType()==Definition::TypeGroup)
......@@ -925,29 +888,19 @@ void FTVHelp::generateTree(FTextStream &t, const QList<FTVNode> &nl,int level,in
}
else if (n->def && n->def->definitionType()==Definition::TypeNamespace)
{
t << "<img ";
t << FTV_IMGATTRIBS(ns);
t << "/>";
t << "<span class=\"icona\"><span class=\"icon\">N</span></span>";
}
else if (n->def && n->def->definitionType()==Definition::TypeClass)
{
t << "<img ";
t << FTV_IMGATTRIBS(cl);
t << "/>";
t << "<span class=\"icona\"><span class=\"icon\">C</span></span>";
}
else
{
t << "<img ";
t << "id=\"img_" << generateIndentLabel(n,0)
<< "\" ";
if (nodeOpened)
t << FTV_IMGATTRIBS(folderopen);
else
t << FTV_IMGATTRIBS(folderclosed);
t << "onclick=\"toggleFolder('"
<< generateIndentLabel(n,0)
<< "')\"";
t << "/>";
t << "<span id=\"img_" << generateIndentLabel(n,0)
<< "\" class=\"iconf"
<< (nodeOpened?"open":"closed")
<< "\" onclick=\"toggleFolder('" << generateIndentLabel(n,0)
<< "')\">&#160;</span>";
}
generateLink(t,n);
t << "</td><td class=\"desc\">";
......@@ -983,21 +936,15 @@ void FTVHelp::generateTree(FTextStream &t, const QList<FTVNode> &nl,int level,in
}
else if (n->def && n->def->definitionType()==Definition::TypeNamespace)
{
t << "<img ";
t << FTV_IMGATTRIBS(ns);
t << "/>";
t << "<span class=\"icona\"><span class=\"icon\">N</span></span>";
}
else if (n->def && n->def->definitionType()==Definition::TypeClass)
{
t << "<img ";
t << FTV_IMGATTRIBS(cl);
t << "/>";
t << "<span class=\"icona\"><span class=\"icon\">C</span></span>";
}
else
{
t << "<img ";
t << FTV_IMGATTRIBS(doc);
t << "/>";
t << "<span class=\"icondoc\"></span>";
}
if (srcRef)
{
......
......@@ -64,7 +64,7 @@ class FTVHelp : public IndexIntf
//bool generateJSTree(FTextStream &tidx,FTextStream &t,const QList<FTVNode> &nl,int level,bool &first);
//bool generateJSTreeTopLevel(FTextStream &tidx,FTextStream &t,const QList<FTVNode> &nl,int level,bool &first);
QCString generateIndentLabel(FTVNode *n,int level);
void generateIndent(FTextStream &t,FTVNode *n,int level,bool opened);
void generateIndent(FTextStream &t,FTVNode *n,bool opened);
void generateLink(FTextStream &t,FTVNode *n);
//void generateJSLink(FTextStream &t,FTVNode *n);
QList<FTVNode> *m_indentNodes;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment