Template:JSRef

<%
// Generate quick links for JavaScript reference docs
//
// TODO: Highlight or remove the link for the page you are currently on (?)
// TODO: Ordering of prototype / static methods (bug 948576)
//
// Parameters:
//
//  $0 - JavaScript reference section (e.g Global_Objects)
//  $1 - JavaScript reference object/subject (e.g. Number, Array, Function)
//  $2 - Related objects to display (comma separated)
// 
// Example: {{JSRef("Global_Objects", "Number")}} 
// Includes quicklinks for the Number object including all methods and properties
// and also includes inherited methods/properties from Object and Function


// Helper: Checks if a tag is in a given taglist:
function containsTag(tagList, tag) {
    if (!tagList || typeof tagList == 'undefined') return 0;
    tag = tag.toLowerCase();
    for (var i = 0, len = tagList.length; i < len; i++) {
        if (tagList[i].toLowerCase() == tag) return 1;
    }
    return 0;
}


// Data for inheritance chain
var currentInheritance = ["Object", "Function"];
var inheritance = {
    "Math": ["Object"],
    "Function": ["Object"],
    "Object": ["Function"],
    "JSON": ["Object"],
    "Intl": ["Object"],
};

if (typeof inheritance[$1] != 'undefined') {
    currentInheritance = inheritance[$1];
}


// Strings:
var s_js_ref_href = '/' + env.locale + '/docs/Web/JavaScript/Reference';
var s_js_section = $0;
var s_js_subject = $1;
var s_js_full_href = s_js_ref_href + '/' + s_js_section + '/' + s_js_subject;
var s_js_property_tag = 'Property';
var s_js_method_tag = 'Method';

var s_js_title_methods = mdn.localString({
  "en-US": "Methods",
  "fr"   : "Méthodes",
  "de"   : "Methoden"
});
var s_js_title_properties = mdn.localString({
  "en-US": "Properties",
  "fr"   : "Propriétés",
  "de"   : "Eigenschaften"
});
var s_js_title_inheritance = mdn.localString({
  "en-US": "Inheritance:",
  "de"   : "Vererbung:"
});
var s_js_title_related = mdn.localString({
  "en-US": "Related:",
  "de"   : "Verwandt:"
});


// Collect pages
var source = {};
source[s_js_subject] = page.subpagesExpand(s_js_full_href);
if (containsTag(currentInheritance, "Function")) {
    source["iFunction"] = page.subpagesExpand(s_js_ref_href + '/' + s_js_section + '/Function');
}
if (containsTag(currentInheritance, "Object")) {
    source["iObject"] = page.subpagesExpand(s_js_ref_href + '/' + s_js_section + '/Object');
}

var result = {};
result[s_js_subject] = {
    title: s_js_subject,
    methods: [],
    properties: [],
    defaultOpened: true
};
if (containsTag(currentInheritance, "Function")) {
result['iFunction'] = {
    title: 'Function',
    methods: [],
    properties: [],
    defaultOpened: false
};
}
if (containsTag(currentInheritance, "Object")) {
result['iObject'] = {
    title: 'Object',
    methods: [],
    properties: [],
    defaultOpened: false
};
}

var pageList, isObj, includeme;

for (var object in source) {
    pageList = source[object];
    if (object == "iObject") {
        isObj = true;
    }
    for (aPage in pageList) {
        if (isObj) {
            includeme = containsTag(pageList[aPage].tags, "prototype");
        } else {
            includeme = true;
        }
        if (containsTag(pageList[aPage].tags, result[object].title) && containsTag(pageList[aPage].tags, s_js_property_tag) && includeme) {
            result[object].properties.push(pageList[aPage]);
        }
        if (containsTag(pageList[aPage].tags, result[object].title) && containsTag(pageList[aPage].tags, s_js_method_tag) && includeme) {
            result[object].methods.push(pageList[aPage]);
        } 
    }
}

var resultTitle,
resultProperties,
resultMethods,
resultOpen,
len = 0;

// Output: 
%>

<section class="Quick_links" id="Quick_Links">
    <ol>
        <li><strong><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">Standard built-in objects</a></strong></li>

        <%
        for (object in result) {
            len++;
            resultTitle      = result[object].title || '';
            resultProperties = result[object].properties || '';
            resultMethods    = result[object].methods || '';
            resultOpen       = result[object].defaultOpened || '';
        %>
        <% if (len == 2) { %>
            <li><strong><%=s_js_title_inheritance%></strong></li>
        <% } %>
        <li><strong><a href="<%=s_js_ref_href + '/' + s_js_section + '/' + resultTitle%>"><code><%=resultTitle%></code></a></strong></li>


        <% if (resultProperties.length > 0) { %>
        <li<%if(resultOpen) {%> data-default-state="open"<%}%>><a href="#"><strong><%=s_js_title_properties%></strong></a>
            <ol>
            <% for (aPage in resultProperties) { %>
                <li>
                    <% if (containsTag(resultProperties[aPage].tags, 'Obsolete')) { %>
                        <s class="obsoleteElement">
                    <% } %>
                    <% if (resultProperties[aPage].url != '') { %>
                      <a href="<%-resultProperties[aPage].url%>" title="<%-mdn.escapeQuotes(resultProperties[aPage].summary || '')%>"><code><%-resultProperties[aPage].title%></code></a>
                    <% } %>
                    <% if (containsTag(resultProperties[aPage].tags, 'Obsolete')) { %>
                        </s>
                    <% } %>
                    <% if (containsTag(resultProperties[aPage].tags, 'Experimental')) { %>
                         <span class="sidebar-icon"><%-template("ExperimentalBadge", [1])%></span>
                    <% } %>
                    <% if (containsTag(resultProperties[aPage].tags, 'Non-standard')) { %>
                         <span class="sidebar-icon"><%-template("NonStandardBadge", [1])%></span>
                    <% } %>
                    <% if (containsTag(resultProperties[aPage].tags, 'Deprecated')) { %>
                         <span class="sidebar-icon"><%-template("DeprecatedBadge", [1])%></span>
                    <% } %>
                    <% if (containsTag(resultProperties[aPage].tags, 'Obsolete')) { %>
                        <span class="sidebar-icon"><%-template("ObsoleteBadge", [1])%></span>
                    <% } %>
                </li>
            <% } %>
            </ol>
        </li>
        
        <% } if (resultMethods.length > 0) { %>
        <li<%if(resultOpen) {%> data-default-state="open"<%}%>><a href="#"><strong><%=s_js_title_methods%></strong></a>
            <ol>
            <% for (aPage in resultMethods) { %>
                <li>
                     <% if (containsTag(resultMethods[aPage].tags, 'Obsolete')) { %>
                        <s class="obsoleteElement">
                    <% } %>
                    <% if (resultMethods[aPage].url != '') { %>
                        <a href="<%-resultMethods[aPage].url%>" title="<%-mdn.escapeQuotes(resultMethods[aPage].summary || '')%>"><code><%-resultMethods[aPage].title%></code></a>
                    <% } %>
                    <% if (containsTag(resultMethods[aPage].tags, 'Obsolete')) { %>
                        </s>
                    <% } %>
                    <% if (containsTag(resultMethods[aPage].tags, 'Experimental')) { %>
                        <span class="sidebar-icon"><%-template("ExperimentalBadge", [1])%></span>
                    <% } %>
                    <% if (containsTag(resultMethods[aPage].tags, 'Non-standard')) { %>
                         <span class="sidebar-icon"><%-template("NonStandardBadge", [1])%></span>
                    <% } %>
                    <% if (containsTag(resultMethods[aPage].tags, 'Deprecated')) { %>
                         <span class="sidebar-icon"><%-template("DeprecatedBadge", [1])%></span>
                    <% } %>
                    <% if (containsTag(resultMethods[aPage].tags, 'Obsolete')) { %>
                        <span class="sidebar-icon"><%-template("ObsoleteBadge", [1])%></span>
                    <% } %>
                </li>
            <% } %>
            </ol>
        </li>
        <% } %>
        
        <% if (len == 1 && $2) { %>
            <li><strong><%=s_js_title_related%></strong></li>
            <% var arr = $2.split(","); 
                for (var i = 0; i <  arr.length; i++) { %>
                    <li><strong><a href="<%=s_js_ref_href + '/' + s_js_section + '/' + arr[i]%>"><code><%=arr[i]%></code></a></strong></li>
            <% } %>
        <% } %>
        
        <% } %>

    </ol>
</section>
Search for pages that use Template:JSRef to see example use cases and how many pages use this macro.

Document Tags and Contributors

Contributors to this page: Sheppy, openjck, fscholz, ethertank, Nickolay, Victory
Last updated by: fscholz,