GuideContent

/***
    USAGE:

    GuideContent(description, pages, toc, hierarchy)
        Show the guide content for the list of topic pages

    PARAMETERS:

    description : string
        Description to use at the start of the guide.

    pages : list
        List of topic pages the guide covers. Expected to be tagged with tutorial, 
        reference, troubleshooting or topic.

    toc : bool (optional)
        Show the table of contents (default: true).
        
    hierarchy : map (optional)
        Map listing all child pages by parent id.
***/

// Redirect to custom page, if any
var template_custom = __page.path .. 'Custom';
if(wiki.pageexists(template_custom)) {
    return template(template_custom, $);
}

var description = $description ?? $0;
var pages = $pages ?? $1;
var toc = $toc ?? $2 ?? true;
var hierarchy = $3 ?? $hierarchy;

// assumes pages has already been decorated with category
var topics = list.sort([ p foreach var p in pages where p.topic ], "path");

// direct children of this page
var page_id = page.id;
var child_topics = hierarchy ? [ p foreach var p in hierarchy[page_id] where p.topic ] : [ p foreach var p in topics where p.parent_id == page_id ];

// show the guide description
if(description) {
    <div class="mt-control-guide-description">
        if(description is xml) {
            xml.html(description["//*[@id='guide-description']"]);
        } else {
            description;
        }
    </div>
}

// show the navigation inside a non-indexable <div>
<div class="noindex">
    if(toc) {
        <div class="mt-idf-guide-toc">
      
            // show topic tree
            if(#topics > 0) {
                <div class="">
                    <div class="mt-control-page-subtitle">
                        wiki.localize("MindTouch.IDF.topic.tree")
                    </div>
                    <div class="mt-control-page-listcontent">
                        foreach(var p in topics) {
                            <div style=("margin-left: " .. web.size(30 * (#p.parents - 1)))>
                                web.link(p.uri, p.title);
                            </div>
                         }
                    </div>
                 </div>
             }
        </div>
        if(user.admin) {
            <div class="mt-idf-guide-reports">
                <div class="mt-control-page-subtitle">wiki.localize("MindTouch.IDF.guide.reports.title");</div>
                <div class="mt-control-page-listcontent">
                    var query = 'path:' .. page.path .. ' OR path:' .. page.path .. '/*';
                    <div>
                        web.link(site.uri & 'Special:Reports' & { tab: 'quality', query: query }, wiki.localize("MindTouch.IDF.guide.reports.quality"));
                    </div>
                    <div>
                        web.link(site.uri & 'Special:Reports' & { tab: 'aging', query: query }, wiki.localize("MindTouch.IDF.guide.reports.aging"));
                    </div>
                </div>
            </div>
        }
    }
    <div class="mt-idf-guide-overview">
        if(#topics > 0) {
            <div class="mt-control-page-subtitle">
                wiki.localize("MindTouch.IDF.topics");
            </div>
            <ul class="mt-idf-topic-list">
                var primary_categories = [ { category: 'tutorial' }, { category: 'troubleshooting' }, { category: 'reference' } ];
                var itemCount = 0;
                foreach(var topic_page in child_topics) {
                    var li_class = (itemCount % 2 == 0) ? 'mt-idf-topic-listitem' : 'mt-idf-topic-listitem-alt';
                    let itemCount += 1;
                    <li class=(li_class)>
                    
                        // sub-topic title
                        <div class="mt-idf-topic">
                            web.link(topic_page.uri, topic_page.title);
                        </div>
                        
                        // sub-topic child pages
                        <div class="mt-idf-topic-details">
                            var topic_subpages;
                            if(hierarchy) {
                                var subpages = [ p foreach var p in hierarchy[topic_page.id] where p.tutorial || p.troubleshooting || p.reference ];
                                if(#subpages) {
                                    let topic_subpages = template("MindTouch/IDF/Controls/ListTopicSubpages", {
                                        topic_page: topic_page,
                                        pages: pages,
                                        subpages: subpages
                                    });
                                }
                            } else {
                                let topic_subpages = template("MindTouch/IDF/Controls/ListTopicSubpages", {
                                    topic_page: topic_page, 
                                    pages: pages, 
                                    categories: primary_categories 
                                });
                            }
                            var icon_state = #topic_subpages['//div'] ? 'collapsed' : 'empty';
                            <div class=('mt-idf-topic-item ' .. icon_state) id=('mt-idf-topic-' .. topic_page.id)>
                                topic_page.overview ?? wiki.text(topic_page.path, 'Overview');
                            </div>
                            <div id=('mt-idf-topic-' .. topic_page.id .. '-details') class="mt-idf-topic-subpages">
                                topic_subpages;
                            </div>
                   
                            // render topic page children
                            var child_subtopics = hierarchy ? [ p foreach var p in hierarchy[topic_page.id] where p.topic ] : [ p foreach var p in topics where p.parent_id == topic_page.id ];
                            foreach(var subtopic_page in child_subtopics) {
                                var subtopic_subpages;
                                if(hierarchy) {
                                    var subpages = [ p foreach var p in hierarchy[subtopic_page.id] where p.topic || p.tutorial || p.troubleshooting || p.reference ];
                                    if(#subpages) {
                                        let subtopic_subpages = template("MindTouch/IDF/Controls/ListTopicSubpages", {
                                            topic_page: subtopic_page,
                                            pages: pages,
                                            subpages: subpages
                                        });
                                    }
                                } else {
                                    let subtopic_subpages = template("MindTouch/IDF/Controls/ListTopicSubpages", {
                                        topic_page: subtopic_page,
                                        pages: pages
                                    });                                
                                }
                                <div class="mt-idf-subtopic">
                                    var icon_state = #subtopic_subpages['//div'] ? 'collapsed' : 'empty';
                                    <div class=('mt-idf-topic-item ' .. icon_state) id=('mt-idf-topic-' .. subtopic_page.id)>
                                        web.link(subtopic_page.uri, subtopic_page.title);
                                    </div>
                                    <div id=('mt-idf-topic-' .. subtopic_page.id .. '-details') class="mt-idf-topic-subpages">
                                        subtopic_subpages;
                                    </div>
                                </div>
                            }
                        </div> // end topic details
                    </li>
                }
            </ul>
        } else {
            <div class="mt-control-nocontent">
                <p class="nocontent-title">wiki.localize("MindTouch.IDF.topic.empty");</p>
                <p>wiki.localize("MindTouch.IDF.topic.text");</p>
                <div class="action">
                    wiki.create{template: "MindTouch/IDF/Pages/Feature_Page", label: wiki.localize("MindTouch.IDF.topic.action")};
                </div>
            </div>
        }   
    </div>
</div>

.mt-idf-guide-toc,
.mt-idf-guide-reports {
   background: #fff;
   float: right;
   width: 200px;
   padding: 0px 5px 0px 5px;
}

.mt-idf-guide-reports {
   clear: right;
}

.mt-idf-topic {
  float: left;
  clear: left;
  width: 150px;
  padding: 0px 0px 0px 5px;
  text-align: left;
}

.mt-idf-topic-subpages {
  display: none;
}

ul li.mt-idf-topic-listitem,
ul li.mt-idf-topic-listitem-alt {
  padding: 10px 0px 10px 0px;
}

.mt-idf-topic-listitem-alt {
  background: #eeeeee;
}

.mt-idf-topic-details {
  float: left;
  width: 380px;
}

.mt-idf-guide-overview {
  overflow: auto;
}

.mt-idf-guide-overview ul,
.mt-idf-guide-overview li {
   overflow: auto;
   padding-left: 15px;
}

.mt-idf-subtopic {
  margin: 5px 0px 5px 0px;
}

.mt-idf-category {
  color: #808080;
  font-size: 10px;
  margin-left: 5px;
}

.mt-idf-subtopic-container {
  margin: 0px 0px 15px 15px;
}

.mt-idf-topic-item {
  padding-left: 15px;
}

.mt-idf-topic-item.collapsed {
  background: url(/skins/common/images/nav-parent-closed.gif) 0px 5px no-repeat;
}

.mt-idf-topic-item.expanded {
  background: url(/skins/common/images/nav-parent-open.gif) 0px 5px no-repeat;
}

/* Hide subtopic expand/collapse from IE6 */
* html body .mt-idf-topic-item {
  background: none;
}

* html body .mt-idf-subtopic-container {
  display: none;
}

* html body .mt-idf-topic-listitem-alt {
  border-top: 1px solid #ccc;
  background: #fff;
}

$(function(){
   $('.mt-idf-topic-item').click(function(e){
        if($(this).attr('id') == $(e.target).attr('id') && !$(this).hasClass('empty')) {
            $('#' + $(this).attr('id') + '-details').toggle();
            $(this).toggleClass('expanded collapsed');
        }
   });
});