projects-explore.html

---
layout: default
id: projects-explore
permalink: /projects/explore/
title: Explore all Microsoft repos
---

<article>

    <header class="wrapper-full explore-header pb-4 pt-6">
        <div class="wrapper py-6">
            <h1 class="h2">Explore</h1>
            <!--
            <form class="search-form search-form--dark" id="search-projects" role="search" action="/projects/explore" method="GET">
                <label for="project-search-field">
                    <span class="sr-only">Search open source projects on Microsoft.com</span>
                    {% octicon search %}
                </label>
                <input type="text" id="project-search-field" name="q" placeholder="Search" value="" />
                <button type="submit" class="d-none"></button>
            </form>
            -->
        </div>

        <img class="explore-header__img" src="{{ '/assets/images/direction/explore-shapes.svg' | relative_url }}" alt="" />
    </header>


    <div class="explore-projects pt-4 pb-6">
        <div>
            <!--
            <form class="filters" id="filter-projects">
                <div class="filters__hd">
                    <p class="h4">Filters</p>
                </div>

                <div class="filters__filters">
                    <div class="checkbox">
                        <input type="checkbox" name="html" id="html" value="html">
                        <label for="html">HTML</label>
                    </div>

                    <div class="checkbox">
                        <input type="checkbox" name="css" id="css" value="css">
                        <label for="css">CSS</label>
                    </div>

                    <div class="checkbox">
                        <input type="checkbox" name="javascript" id="javascript" value="JavaScript">
                        <label for="javascript">JavaScript</label>
                    </div>

                    <div class="checkbox">
                        <input type="checkbox" name="csharp" id="csharp" value="C#">
                        <label for="csharp">C#</label>
                    </div>

                    <div class="checkbox">
                        <input type="checkbox" name="typescript" id="typescript" value="TypeScript">
                        <label for="typescript">TypeScript</label>
                    </div>

                    <div class="checkbox">
                        <input type="checkbox" name="c++" id="c++" value="C++">
                        <label for="c++">C++</label>
                    </div>
                    <button id="filter-submit" type="submit" class="link-arrow">Filter</button>
                </div>
            </form>
            -->

            <div class="project-wrap">
                <div id="search-for" tabindex="0">
                    <p class="sr-only" id="search-text-field">No projects searched yet</p>
                </div>

                <div id="projectResults"></div>
                <script id="project-template" type="text/x-handlebars-template">
                    <ul class="project-list">
                        {% raw %}{{#each apidata}}{% endraw %}
                            <li>
                                {% include project.html %}
                            </li>
                        {% raw %}{{/each}}{% endraw %}
                    </ul>
                </script>
            </div>

        </div>
    </div>
</article>


<script>
    var $ = jQuery,
        searchForm = $('#search-projects'),
        source = $("#project-template").html(),
        template = Handlebars.compile(source),
        results = $("#projectResults"),
        searchText = $('#search-for');

    function checkFormats() {
        var numbers = $('.format-number');
        function formatNumber(x) {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
        numbers.each(function(){
            let num = parseInt($(this).text());
            nNum = formatNumber(num);
            $(this).html(nNum);
        });
    }

    const urlParams = new URLSearchParams(window.location.search);
    const searchString = urlParams.get('q');
    try {
        document.getElementById('header-search').value = searchString || '';
        document.getElementById('mobile-search').value = searchString || '';
    } catch (ignore) {}
    if(searchString) {
        var searchUrl = '/api/repos?q=' + encodeURIComponent(searchString);
        $.ajax({
            type: 'GET',
            url: searchUrl,
            dataType: 'json',
            success: function(posts){
                results.addClass('is-thinking');
                setTimeout(function(){
                    html = template({apidata: posts.repos});
                    results.html(html);
                    results.removeClass('is-thinking');
                    checkFormats();
                    if( posts.repos.length === 0 ) {
                        results.html('<p></p>');
                        document.title = 'No projects found - Explore Microsoft projects';
                        searchText.html('<p class="h4 mb-5" tabindex>No projects found, sorry.</p>');
                        searchText.focus();
                    } else {
                        var plural = posts.repos.length === 1 ? 'project' : 'projects';
                        searchText.html('<p class="h4 mb-5" tabindex>' + posts.repos.length + ' ' + plural + ' found.</p>');
                        document.title = posts.repos.length + ' ' + plural + ' found - Explore Microsoft projects';
                        searchText.focus();
                    }
                }, 1);
            }
        });
    } else {
        $.ajax({
            type: 'GET',
            url: '/api/repos',
            dataType: 'json',
            success: function(posts){
                results.addClass('is-thinking');
                setTimeout(function(){
                    html = template({apidata: posts.repos});
                    results.html(html);
                    results.removeClass('is-thinking');
                    checkFormats();
                }, 1);
            }
        });
    }

    var filterForm = $('#filter-projects'),
        filterSubmit = $('#filter-submit'),
        checkboxes = $('#filter-projects input[type="checkbox"]');

    filterForm.submit(function(e) {
        e.preventDefault();
        activeFilters = [];
        checkboxes.each(function(){
            if ( $(this).is(':checked') ) {
                activeFilters.push($(this).val());
            }
        });

        if (activeFilters.length != 0) {
            $.ajax({
                type: 'GET',
                url: '/api/repos',
                dataType: 'json',
                success: function(posts){
                    results.addClass('is-thinking');
                    var filteredResults = $.grep( posts.repos, function( n, i ) {
                        return $.inArray(n.language, activeFilters) !== -1;
                    });
                    setTimeout(function(){
                        searchText.empty();
                        html = template({apidata: filteredResults});
                        results.html(html);
                        results.removeClass('is-thinking');
                        checkFormats();

                        if( filteredResults.length === 0 ) {
                            results.html('<p>No results found.</p>');
                        }
                    }, 1000);
                }
            });
        }
    });

</script>