Modify

Opened 9 years ago

Closed 4 years ago

#3162 closed enhancement (wontfix)

The code sucks; rewrite suggested

Reported by: Kyle Alan Hale Owned by: Pavel
Priority: normal Component: BreadcrumbTrailsScript
Severity: normal Keywords:
Cc: Trac Release: 0.10

Description

I just think the code sucks. Why not do it like this?

$(document).ready(function () {
    var breadcrumb = document.createElement('div');
    breadcrumb.setAttribute('id', 'pathnav');
    breadcrumb.setAttribute('class', 'nav');

    var links = document.location.pathname.split("/");
    var editing = !!document.location.toString().match(/action=edit/);
    var first, last;

    var url = "";
    var crumbs = '<ul>';

    for (i = 1; i < links.length; i++) {
        if (links[i] == "") continue;

        first = i == 1;
        last = i == links.length - 1;

        item = links[i];
        url += item;

        crumbs += '<li' + ( (first) ? ' class="first"' : ( (last && !editing) ? ' class="last"': '' ) ) + '>';
        crumbs += ( (last && !editing) ? '<b>' : '<a href="/' + ( (i == 1) ? '' : url ) + '">' );
        crumbs += ( (first) ? 'Home' : item );
        crumbs += ( (last && !editing) ? '</b>' : '</a>' );
        crumbs += '</li>';

        if (editing && last) crumbs += '<li class="last"><b>(editing)</b></li>';

        url += "/";
    }

    crumbs += '</ul>';

    breadcrumb.innerHTML = crumbs;



    var main = document.getElementById('main');
    main.insertBefore(breadcrumb, main.firstChild);
});

The CSS would look like this:

#pathnav {
    float: left;
    margin-left: -40px;
}
#content {
    padding-top: 2em;
}

These changes effect the following:

  • Waits until the page is loaded before appending the new element.
  • Uses a DOM insertion rather than document.write
  • The breadcrumb is placed on the same level as the other wiki historical links (Index, History, etc.), and pushes down the content a bit to make room
  • Makes the final item in the breadcrumb (the current page) bold instead of a link. It also looks for the 'edit' parameter in the query string and appends a crumb if present.
  • Uses the "first" and "last" CSS classes to better the styling

My probs with my approach:

  • It does use a mixture of DOM functions and innerHTML, which I'm usually against, but it seemed easiest in this case. At least, it was faster to code. Someone who knows dojo better could perhaps clean it up.
  • Unfortunately, previews are done via POST, so the (editing) flag goes away after a preview.

Anyway, this is how I'm using it, and it's fantastic.

Thought others might like this change, even if you don't incorporate it.

Attachments (0)

Change History (2)

comment:1 Changed 9 years ago by Kyle Alan Hale

Forgot to mention though: great idea! I'm glad to have found this to begin with. I just think it could be even grander with some work.

comment:2 Changed 4 years ago by Ryan J Ollos

Resolution: wontfix
Status: newclosed

Plugin is deprecated. See the BreadCrumbsNavPlugin.

Modify Ticket

Change Properties
Set your email in Preferences
Action
as closed The owner will remain Pavel.
The resolution will be deleted. Next status will be 'reopened'.

Add Comment


E-mail address and name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.