Sync with Kendo UI Professional

Author: Kendo Bot

docs/_assets/javascripts/api.js

@@ -27,10 +27,12 @@ function findApiCategoryIndex(values) {
 }
 
 function capitalize(values) {
-    for (var i = 0; i < 2; i++) {
+    for (var i = 0; i < values.length; i++) {
         var value = values[i];
         values[i] = value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
     }
+
+    return values;
 }
 
 function separatePageParts(values, breadcrumbs) {
@@ -40,24 +42,40 @@ function separatePageParts(values, breadcrumbs) {
         previousLink += previousLink !== "" ? "." + pagePart : pagePart;
         breadcrumbs.push(previousLink);
     });
+
+    return currentPageParts.length;
 }
 
 function getBreadcrumbsInfo(values) {
     var startIndex = findApiCategoryIndex(values).index;
     var breadcrumbs = values.slice(startIndex - 1, values.length - 1);
     capitalize(breadcrumbs);
-    separatePageParts(values, breadcrumbs);
+    var pagePartsCount = separatePageParts(values, breadcrumbs);
     categoryInfo = findApiCategoryIndex(breadcrumbs);
 
     return {
         categoryIndex: categoryInfo.index,
         category: categoryInfo.category,
-        breadcrumbs: breadcrumbs
+        breadcrumbs: breadcrumbs,
+        nestingLevel: pagePartsCount
     };
 }
 
-function shouldBuildBreadCrumbs() {
-    return $('#markdown-toc').length === 0;
+function buildToc() {
+    var tocContainer = $('.api-toc-container');
+    if (tocContainer.length > 0) {
+        var listItems = "";
+        var headersCount = 0;
+        $('h3').each(function () {
+            headersCount++;
+            var text = this.id === 'related-properties' ? 'Related Properties' : this.id;
+            listItems += '<li class="api-toc-item"><a href="#' + this.id + '">' + text + '</a></li>';
+        });
+
+        if (headersCount > 1) {
+            tocContainer.append('<div class="api-toc-title">In this article</div><ul>' + listItems + '</ul>');
+        }
+    }
 }
 
 function repeat(string, count) {
@@ -69,35 +87,98 @@ function repeat(string, count) {
     return result;
 }
 
-function buildApiBreadcrumbs() {
+function buildApiBreadcrumbs(data) {
+    if ($('#markdown-toc').length > 0) {
+        return;
+    }
+
     var path = $(location).attr('pathname').split('/');
     var breadcrumbsInfo = getBreadcrumbsInfo(path);
     var breadcrumbs = breadcrumbsInfo.breadcrumbs;
-    breadcrumbs = breadcrumbs.slice(0, breadcrumbs.length); // Skip the last element
+    breadcrumbs = breadcrumbs.slice(0, breadcrumbs.length);
 
     var href = '';
     var lastHref = '';
-    for (var i = 0; i < breadcrumbs.length - 1; i++) {
+    var links = '';
+    var breadcrumbsContainer = $('.api-breadcrumbs-container');
+    for (var i = 0; i < breadcrumbs.length; i++) {
         var backStepsCount = breadcrumbsInfo.categoryIndex - i + 1;
         var relativePathBackPath = backStepsCount >= 0 ? repeat("../", backStepsCount) : "";
         var breadcrumb = breadcrumbs[i];
         href = breadcrumb === breadcrumbsInfo.category ?
             lastHref + '#' + breadcrumb :
             relativePathBackPath + breadcrumb;
 
-        $('.api-breadcrumbs-container').append('<a href="' + href.toLowerCase() + '">' + breadcrumb + '</a>');
-        if (i < breadcrumbs.length - 2) {
-            $('.api-breadcrumbs-container').append(' / ');
+        links += '<a href="' + href.toLowerCase() + '">' + breadcrumb + '</a>';
+        if (i > 0) {
+            links += getBreadcrumbDropDownContent(data, breadcrumbsInfo, i - 1, lastHref);
         }
         lastHref = href;
     }
+
+    breadcrumbsContainer.append('<div class="links-container">' + links + '</div>');
+}
+
+function getBreadcrumbDropDownContent(data, breadcrumbsInfo, nestingLevel, lastHref) {
+    var dropDownContent = '<ul>';
+    var items = [];
+    var isApiCategory = nestingLevel === 0;
+    if (isApiCategory) {
+        var keys = API_CATEGORIES;
+        $.each(capitalize(keys), function (index, key) {
+            if (data.categories[key]) {
+                items.push(key);
+            }
+        });
+    } else {
+        items = data.categories[breadcrumbsInfo.category];
+    }
+
+    var breadcrumbs = breadcrumbsInfo.breadcrumbs;
+    var scopeFilter = breadcrumbs[nestingLevel] != breadcrumbsInfo.category ? breadcrumbs[nestingLevel] : false;
+    for (var j = 0; j < items.length; j++) {
+        var item = items[j];
+        if (shouldAppendItemToDropDown(item, scopeFilter, nestingLevel, breadcrumbsInfo.nestingLevel)) {
+            var href;
+            if (isApiCategory) {
+                href = lastHref + '#' + item.toLowerCase();
+            } else {
+                href = getPrefix(item, data.group_parents) + item;
+            }
+            var selectedDropDownClassName = breadcrumbs[nestingLevel + 1].toLowerCase() === item.toLowerCase() ? 'selected-dropdown-breadcrumb' : '';
+            dropDownContent += '<li>' + '<a href="' + href.toLowerCase() + '" class="' + selectedDropDownClassName + '">' + item + '</li>';
+        }
+    }
+    dropDownContent += '</ul>';
+    return dropDownContent;
+}
+
+function getPrefix(item, prefixes){
+    var result = '';
+    $.each(prefixes, function (index, prefix) {
+        if (item.indexOf(prefix) > -1) {
+            result = prefix + '#';
+            return false;
+        }
+    });
+
+    return result;
+}
+
+function shouldAppendItemToDropDown(item, scopeFilteringItem, nestingLevel, maxNestingLevel) {
+    var matchNestingLevel = item.split(NESTED_ELEMENT_MARK).length === nestingLevel;
+    var isInContextScope = item.toLowerCase().indexOf(scopeFilteringItem) === 0;
+
+    return nestingLevel === 0 ||
+        (maxNestingLevel > nestingLevel && isInContextScope && matchNestingLevel) ||
+        matchNestingLevel && (!scopeFilteringItem || (scopeFilteringItem && isInContextScope));
 }
 
 function getMinNestingLevel() {
     var minNestingLevel = MAX_NESTING_LEVEL;
     var linksSection = $('#' + API_SUBPAGE_TITLE);
-    if (linksSection.length > 0) {
-        var list = $(linksSection).next('ul');
+    if (linksSection.length) {
+        var list = $(linksSection[linksSection.length - 1]).next('ul');
         list.children().each(function () {
             minNestingLevel = Math.min(minNestingLevel, $(this).text().split(NESTED_ELEMENT_MARK).length - 1);
         });
@@ -112,7 +193,6 @@ function styleItems(listItems, category, mainNestingLevel) {
         var styleClassToAdd = itemText.split(NESTED_ELEMENT_MARK).length - 1 === mainNestingLevel ? 'api-icon ' + category : 'nested-list-item';
         $(this).addClass(styleClassToAdd);
     });
-
 }
 
 function getVisibleChildrenCount(list) {
@@ -163,7 +243,7 @@ function setupColumns() {
         setupColumnsInternal(API_CATEGORIES[i], API_CATEGORIES[i], 0);
     }
 
-    var subCategory = $('#page-article article:first-child').attr('class');
+    var subCategory = $('#page-article > article').attr('class');
     if (subCategory) {
         var mainNestingLevel = getMinNestingLevel();
         setupColumnsInternal(API_SUBPAGE_TITLE, subCategory.toLowerCase(), mainNestingLevel);
@@ -214,32 +294,102 @@ function filter() {
     previousSearch = text;
 }
 
+function getApiSectionIndex(hash) {
+    hash = hash.toLowerCase();
+    var sectionIndex = -1;
+    $.each(API_CATEGORIES, function (index, element) {
+        sectionIndex = hash.indexOf("#" + element);
+        if (sectionIndex > -1) {
+            return false;
+        }
+    });
+
+    return sectionIndex;
+}
+
 function ensureCorrectNavigation() {
     var hash = window.location.hash;
-
-    if (hash !== "") {
-        var hashIndex = hash.indexOf('#');
-        var dashIndex = hash.indexOf('-');
+    var dashIndex = hash.indexOf('-');
+    if (hash !== "" && dashIndex > -1) {
+        var hashIndex = getApiSectionIndex(hash);
         if (hashIndex > -1 && hashIndex < dashIndex) {
-            var newPath = hash.replace('#', '/').replace('-', '/').toLowerCase();
+            var newPath = hash.replace('#', '/').replace('-', '/');
             window.location.replace(window.location.origin + window.location.pathname + newPath);
             return true;
         }
     }
+
     return false;
 }
 
-$(document).ready(function () {
-    if (!ensureCorrectNavigation()) {
-        setupColumns();
+function updateActiveTocItem(headings) {
+    var fixedHeaderHeight = $("#page-header").height();
+    var scrollOffset = $(document).scrollTop() + fixedHeaderHeight;
+    var heading = headings.filter(function () {
+        return $(this).offset().top + this.offsetHeight - scrollOffset > 0;
+    }).first();
+
+    if (heading.length) {
+        $('a').removeClass('active-toc-item');
+        $('[href="#' + heading.attr('id') + '"]').addClass('active-toc-item');
+    }
+}
+
+function attachToApiPageEvents() {
+    filterControl = $('#api-filter input.search');
+    if (filterControl.length) {
+        filterControl.on('keyup', function () { filter(); });
+    }
 
-        if (shouldBuildBreadCrumbs()) {
-            buildApiBreadcrumbs();
+    breadcrumbDropDown = $('.links-container > a');
+    if (breadcrumbDropDown.length && breadcrumbDropDown.next('ul').length) {
+        breadcrumbDropDown.mouseenter(function (e) {
+            e.preventDefault();
+            $('.links-container').children('ul').hide();
+
+            var dropDownContent = $(this).next('ul');
+            dropDownContent.css('left', dropDownContent.position().left + $(this).position().left);
+            if (dropDownContent.is(':hidden')) {
+                dropDownContent.show();
+            } else {
+                dropDownContent.hide();
+            }
+
+            dropDownContent.mouseleave(function () {
+                $(this).hide();
+            });
+        });
+    }
+
+    var headingAnchors = $('h3');
+    var apiContainer = $('.api-toc-container');
+    if (apiContainer.length) {
+        updateActiveTocItem(headingAnchors);
+        $(window).scroll(function () {
+            updateActiveTocItem(headingAnchors);
+        });
+    }
+}
+
+function getDataForCurrentPage(data) {
+    var dataItemForPage;
+    $.each(data, function (index, dataItem) {
+        if (window.location.pathname.indexOf(dataItem.control)) {
+            dataItemForPage = dataItem;
+            return false;
         }
+    });
+
+    return dataItemForPage;
+}
 
-        filterControl = $('#api-filter input.search');
-        if (filterControl.length > 0) {
-            filterControl.on('keyup', function () { filter(); });
+$(document).ready(function () {
+    $.get("/kendo-ui/api.json", function (data) {
+        if (!ensureCorrectNavigation()) {
+            setupColumns();
+            buildApiBreadcrumbs(getDataForCurrentPage(data));
+            buildToc();
+            attachToApiPageEvents();
         }
-    }
+    });
 });