General notes on pages outside the page tree

Comments

4 comments

  • Avatar
    Steffen Burzlaff (Edited )

    Hi Volker,

    thanks for reaching out.
    In Scroll Viewport it's currently not possible to view pages which are not part of the page tree in Confluence.
    What you can do if you are using the WebHelp theme is to put a "exclude" label on those pages, which you don't want to have in your navigation.
    In your theme you need to navigate to the file jquery.scroll-tree.js in the assets > js folder.

    Here you need to add a if condition to your function insertChildren() to exclude all pages which have the label "exclude".

    Your function should look similar to this one:

    function insertChildren($ul, children) {
       $ul.html('');
       $.each(children, function (idx, child) {
          if(!child.labels.includes('exclude')) {
             var $childLi = $(opts.renderChildLi(child, opts)).appendTo($ul);

             if (child.children) {
                if (child.children.length) {
                   $childLi.addClass(opts.css.expanded);
                   var $childrenEl = $(opts.renderChildrenUl()).appendTo($childLi);
                   insertChildren($childrenEl, child.children);

                } else {
                   $childLi.addClass(opts.css.collapsed);
                }
             } else {
             $childLi.addClass(opts.css.leaf);
          }
        }
      });
    }

    This works because the WebHelp theme is requesting the page tree via a rest call. The object of the response contains the labels of page.

    I don't know you use-case but feel free to also checkout the new Help Center theme which provides this functionality out of the box and doesn't require coding while staying customizable.

    Hope this helps!
    Have a nice day.

    Best regards,
    Steffen

    0
    Comment actions Permalink
  • Avatar
    Volker Weinreich (Edited )

    Hi Steffen,

    yes, that helps, thank you.I did a JavaScript course once, but it would have taken much longer to get it right here.

    I have experimented with the code you provided on your page Output a page tree under Lazy-loading tree > Hide pages, which is actually there to suppress the dot-pages. Didn't work, though. I was surprised that the code is not contained in jquery.scroll-tree.js, but the dot-pages are suppressed anyway.

    The Help center is great, but not flexable enough for our needs. We have build a lot of user macros so far and want have more control over the styles etc.

    Best regards,

    Volker

    0
    Comment actions Permalink
  • Avatar
    Steffen Burzlaff

    Hi Volker,

    could you show me your code you currently have to render your page tree?
    Otherwise it's hard for me to provide a good solution for you.
    Thanks!

    We are also currently working on a feature to introduce custom styles within the Help Center Theme so it might be worth watching upcoming releases.

    Best regards,
    Steffen

    0
    Comment actions Permalink
  • Avatar
    Volker Weinreich

    Hi Steffen,

    it's on now. So the problem is basically solved. Or is this about my question regarding dot pages?

    Either way, here's the code:

     

    (function($) {

    'use strict';

    // http://learn.jquery.com/plugins/basic-plugin-creation/
    // http://learn.jquery.com/plugins/advanced-plugin-concepts/
    $.fn.scrollTree = function (options) {

    var DEFAULT_OPTIONS = {
    'contextPath': '/',
    'css': {
    'ancestor': 'active',
    'current': 'active',
    'normal': '',
    'leaf': 'leaf',
    'loading': 'sp-loading',
    'collapsed': 'sp-collapsed',
    'expanded': 'sp-expanded',
    'error': 'sp-error'
    },
    'renderChildrenUl': function () {
    return '<ul class="nav"></ul>';
    },
    'renderChildLi': function (child, opts) {
    return '<li class="' + opts.css[child.type] + '"><span class="sp-toggle"></span><a href="' + child.link + '">' + SCROLL_WEBHELP.escapeHtml(child.title) + '</a></li>'
    }
    };

    var viewportId = $(this).data('viewportId');
    var rootLink = $(this).data('root');
    var currentLink = $(this).data('current');

    var opts = $.extend(true, DEFAULT_OPTIONS, options);

    return this.each(function () {
    var $rootUl = $(this);

    loadChildren($rootUl, rootLink, currentLink);
    setupEventHandling($rootUl);

    return this;
    });


    function loadChildren($ul, parentLink, currentLink) {
    var $parentLi = $ul.closest('li');
    if ($parentLi) {
    $parentLi.removeClass(opts.css.collapsed)
    .addClass(opts.css.loading);
    }

    $.get(opts.contextPath + '/rest/scroll-viewport/1.0/tree/children', {
    'viewportId': viewportId,
    'root': rootLink,
    'parent': parentLink || $parentLi.find('> a').attr('href'),
    'current': currentLink || ''
    })
    .done(function success(children) {
    insertChildren($ul, children);

    $parentLi.removeClass(opts.css.loading)
    .addClass(opts.css.expanded);
    })
    .fail(function error(jqXHR, textStatus, errorThrown) {
    $parentLi.removeClass(opts.css.loading)
    .addClass(opts.css.error);
    })
    ;
    }

    // Seiten, die "exclude" als label enthalten, werden nicht im Seitenbaum links angezeigt
    function insertChildren($ul, children) {
    $ul.html('');
    $.each(children, function (idx, child) {
    if(!child.labels.includes('exclude')) {
    var $childLi = $(opts.renderChildLi(child, opts)).appendTo($ul);

    if (child.children) {
    if (child.children.length) {
    $childLi.addClass(opts.css.expanded);
    var $childrenEl = $(opts.renderChildrenUl()).appendTo($childLi);
    insertChildren($childrenEl, child.children);

    } else {
    $childLi.addClass(opts.css.collapsed);
    }
    } else {
    $childLi.addClass(opts.css.leaf);
    }
    }
    });
    }



    function setupEventHandling($rootUl) {
    $rootUl.on('click', '.sp-toggle', function () {
    var $li = $(this).parent('li');
    if ($li.is('.' + opts.css.collapsed)) {
    openNode($li);

    } else if ($li.is('.' + opts.css.expanded)) {
    closeNode($li);

    } else {
    // we don't have children -> no-op
    }
    });
    }


    function openNode($li) {
    if ($li.has('ul').length) {
    // children have been loaded, just toggle classes
    $li.removeClass(opts.css.collapsed)
    .addClass(opts.css.expanded);
    } else {
    // children have to be loaded
    var $childrenEl = $(opts.renderChildrenUl()).appendTo($li);
    loadChildren($childrenEl);
    }
    }


    function closeNode($li) {
    $li
    .removeClass(opts.css.expanded)
    .addClass(opts.css.collapsed);
    }
    };

    })($);

     

    Best regards

    Volker

    0
    Comment actions Permalink

Please sign in to leave a comment.

Powered by Zendesk