index.html | searchcode

/index.html

https://github.com/sdslabs/cdnjs-website
HTML | 391 lines | 311 code | 75 blank | 5 comment | 0 complexity | 67b89b20ae664d6d7798ea3d0d9da72a MD5 | raw file

<!doctype html>
<html>

    <head>
        <meta charset="utf-8"/>
        <title>cdn js - the missing cdn</title>
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" media="all" href="style.css"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
  <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->

        <script src="https://cdn.sdslabs.co.in/cdnjs/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script src="http://cdn.sdslabs.co.in/cdnjs/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
        <script src="http://cdn.sdslabs.co.in/cdnjs/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
        <script src="http://cdn.sdslabs.co.in/cdnjs/ajax/libs/waypoints/1.0.2/waypoints.min.js"></script>
        <script type="text/javascript">



        $(document).ready( function(){
            Package = Backbone.Model.extend({

            });

            Packages = Backbone.Collection.extend({
                model: Package
            });
            SiteController = Backbone.Controller.extend({
                routes: {
                    "/search/author/:author":    "authorsearch",
                    "/search/:term":    "namesearch",
                    "/search/tag/:tag":    "tagsearch",
                    "/page/:page":    "defaultRoute",
                },
                defaultRoute: function( page ){
                    var $this = $(this);
                    target = page;
                    $target = $("#"+target);
                    $('html, body').stop().animate({
                        'scrollTop': $target.offset().top - 120
                    }, 500, 'swing', function() {
                    if( location.hash == "#/page/search" ) {
                        $("#searchinput").focus();
                    }
                });
                },
                tagsearch: function( tag ){
                    $("#searchinput").val("#" + tag);
                    this.appview.searchPackages();
                    $('#searchinput').focus();
                },
                authorsearch: function( author ){
                    $("#searchinput").val("@" + author);
                    this.appview.searchPackages();
                },
                namesearch: function( term ){
                    $("#searchinput").val( term );
                    this.appview.searchPackages();
                }


            });


            packages = new Packages;



            AppView = Backbone.View.extend({
                el: $("#container"),
                initialize: function(){
                    $("#search_form_container").append( _.template( $("#search_form_template").html(), {} ) );
                    $("#searchinput").focus();
                    controller = new SiteController;
                    controller.appview = this;
                    Backbone.history.start();
                    if( $("#searchinput").val() == ""  ){
                    popular = _.select( packages.models, function( result ) {

                        if( _.any( result.get("keywords"), function(tagname){ if( tagname.indexOf("popular") != -1 ) return true;  } ) ){
                            return result;
                        }

                    })
                    $("#search_results").html( "POPULAR" + _.template( $("#search_results_template").html(), { results: popular } ) );
                }
                },
                events: {
                    "keyup #searchinput": "searchPackages",
                },
                searchPackages: function(e){
                    if( typeof e != "undefined" ){
                    if ( _.any( [37,38,39,40,33,18,34] , function (key){ if( key == e.keyCode ) return true; } ) ) return;
                }
                   // if (e.keyC
                    $('html, body').stop().animate({
                        'scrollTop': "0"
                    }, 500, 'swing', function() {
                       // window.location.hash =  target
                    });
                    var search = $("#searchinput").val();
                    window.location = "#/search/" + search;
                    searches = search.split(" ");
                    searches = _.select( searches, function( search ) { if( search ) return true; } );
                    results = packages.models;
                    for( i = 0; i < searches.length; i ++) {
                            search = searches[i];
                            results = _.select( results, function(jspackage){
                                packagename = jspackage.get("name");
                                tags = jspackage.get("keywords");
                                authors = jspackage.get("maintainers");

                                if(  typeof packagename != "undefined" ){
                                    if( search.indexOf("@") != -1){

                                        author = search.split("@");
                                        author = author[1];
                                        if( author != "" ){
                                            if( _.any( authors, function(authorname){ if( authorname.name.replace(/ /g, "").toLowerCase().indexOf(author.toLowerCase()) != -1 ) return true;  } ) ){
                                                return jspackage;
                                            }
                                        }
                                    } else if( search.indexOf("#") != -1){

                                        tag = search.split("#");
                                        tag = tag[1];
                                        if( tag != "" ){
                                            if( tag == "all" || _.any( tags, function(tagname){ if( tagname.indexOf(tag) != -1 ) return true;  } ) ){
                                                return jspackage;
                                            }
                                        }
                                    } else if(packagename.toLowerCase().indexOf(searches[i].toLowerCase()) != -1 ) {
                                        return jspackage;
                                    }
                                }
                                return false;

                            });

                    }
                    if(  results.length > 0 && searches.length != 0) {
                        $("#search_results").html( _.template( $("#search_results_template").html(), { results: results } ) );
                    } else {
                        $("#search_results").html( "No results found, you can use tags @author and #tag");
                    }
                }

            })
            var appview = {};

            $(function() {

              $("#search_results").html('Loading ...');
              $.getJSON('/help/packages.json', function(data) {
                packages.refresh(data.packages);
                appview = new AppView;
              });
            })

            $(".cdnlink").live("click", function(){
                $(this).select();
            });

// Smooth scrolling for internal links
    smoothscroll = function(event) {
    var $this = $(this);
    targetold = this
    target = this.hash.replace("/page/","");
    $target = $(target);
    //alert($target.offset().top)
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top - 120
    }, 500, 'swing', function() {
        if( window.location.hash == "#/page/search" ) {
        $("#searchinput").focus();
    }
        window.location.hash =  targetold.hash
    });
    event.preventDefault();
    return false;
}
$("#searchinput").live("click", function(){
   appview.searchPackages();
});
$("a[href^='#/page']").click(smoothscroll);


         $('.waypoint').each( function(){
            $(this).waypoint(  function( event, direction ) {
                var $active = $(this);

                if (direction === "up") {
                    $active = $active.prev();
                }
                if (!$active.length) $active.end();

                $(".active").removeClass("active");
                $('a[waypoint='+$active.attr("id")+']').addClass('active');


  },{
      "offset": "50%"
      });
           });


        });


        </script>
    </head>

    <body lang="en">
        <div id="container">
            <div id="header" style="top: 0;position: fixed; left: 50%; width:940px;margin-left: -460px;border: 1px solid #ccc; border-top: none;background: #ebebeb;">
              <div style="float: left;">
              <h1 style="font-size: 3em; font-family: Ubuntu;margin-left: 20px; margin-bottom: 0px">cdnjs.com</h1>
              <h2 style="padding: 0; margin: 0; margin-top: -28px;  font-size: 16px; margin-bottom: 0px; margin-left: 122px;" >the missing cdn</h2>
                <ul class="menu" style="margin-left: 40px; margin-top: -10px; margin-bottom: 5px;">
                <li><a waypoint="search" class="active" href="#/page/search">search</a></li>
                <li><a waypoint="addlibrary" href="#/page/addlibrary">add a library</a></li>
                <li><a waypoint="sponsors" href="#/page/sponsors">sponsors</a></li>
                <li><a waypoint="about" href="#/page/about">about</a></li>
                </ul>
                </div>
        <div id="search_form_container"></div>
            </div> <!-- jeader -->

        <div id="search" class="waypoint">





        <div class="column">
<div class="column_container">
      <p style="text-align: center;"><strong>Update:<a target="_blank" href="https://github.com/sdslabs/cdncss" style="text-decoration: none;"></strong> cdn<strong>css</strong>.com</a> is under-way!</p>
    <h2 style=" text-align: center; padding:0;font-size: 24px;">What is it?</h2>
              <p style="font-size: 14px;	margin-left: 20px;margin-top: 15px; margin-bottom: 15px; width: 90%">
                Everyone loves the <a target="_blank" href="http://code.google.com/apis/libraries/devguide.html">Google CDN</a> right? Even <a href="http://www.asp.net/ajaxlibrary/cdn.ashx" target="_blank">Microsoft runs their own CDN</a>.<br /><br />The problem is, they only host the most popular libraries.

<br /><br />
We host the other stuff.</p>



<br />
<span style="margin-left: 8px;"><a href="http://cloudflare.com"><img src="/images/poweredbycloudflare.png" /></a></span>
<br />
<br />
               <span style="margin-top: 6px; margin-left: 80px;" class="st_twitter_vcount" displayText="Tweet"></span><span class="st_facebook_vcount" displayText="Share"></span><span class="st_email_vcount" displayText="Email"></span><span class="st_sharethis_vcount" displayText="Share"></span><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'bdee6d8c-ed9a-4867-90f6-011704c29ee3'});</script>
               <br />
               <br />
<p style="text-align: center; font-size: 12px;">*https support is enabled</p>
</div> <!-- info column container -->

        </div>
        <div class="column">
            <div class="column_container">
              <div id="search_results">
            </div>
            </div>
        </div>
    </div> <!-- searc -->


        <div id="addlibrary" class="waypoint info">
            <div class="column"><div class="column_container"><h1>add a library</h1>
             <p style="font-size: 14px;">
 Our goal is to operate this CDN in a peer reviewed fashion. <br /><br />This means only the highest quality libraries vetted by the community get added to cdnjs.com<br />
            <br />All CDNJS code is open source and we welcome users fork request to help maintain an up-to-date collection of Javascript libraries.</p>
</p>

<div class="ribbon">
  <a href="https://github.com/cdnjs/cdnjs" rel="me">Fork cdnjs.com</a>
</div>
            </div></div>
            <div class="column"><div class="column_container">       <iframe id="uservoice_dialog_iframe" src="http://cdnjs.uservoice.com/forums/98277/widgets/popin.html?lang=en&amp;referer=http://www.cdnjs.com/" frameborder="0" scrolling="no" allowtransparency="true" style="overflow:hidden; width:390px margin: auto; height: 360px; margin-left: 30px;"  width="350px"></iframe>

 </div></div>
        </div>
         <div id="sponsors" class="waypoint info">
            <div class="column"><div class="column_container"><h1>sponsors</h1>
        <p>CDNJS is a non-profit initiative and relies heavily on support from the community.   Besides our major sponsor <a href="http://cloudflare.com" target="_blank">CloudFlare</a>, we also have <a target="_blank" href="http://pingdom.com">Pingdom</a> and <a href="http://s3stat.com" target="_blank">S3Stat</a> offering their services.</p>

            </div></div>
            <div class="column"><div class="column_container">

                <a href="http://cloudflare.com"><img src="/images/poweredbycloudflare.png" /></a>
             <p style="">
       At CloudFlare, we believe that open source, community-driven projects like CDNJS are the tools upon which the future of the internet will be built. CloudFlare is proud to provide the global CDN infrastructure that will help power that future.
</p>
 </div></div>
        </div>
        <div id="about" class="waypoint info">

            <div class="column"><div class="column_container"><h1>about</h1>
            <p>
            CDNJS was started in January 2011 as an attempt to speed up the web.   It was hosted on Amazon until <a href="http://cloudflare.com" target="_blank">CloudFlare</a> took over hosting using their own CDN in June 2011.
            <br />
            <br />
            At the moment the site itself is managed by two passionate web-developers from Australia.   Feel free to get in contact with us at anytime.
            <br />
            <br />

            Ryan Kirkman - <a href="http://ryankirkman.github.com" target="_blank">http://ryankirkman.github.com</a><br />
            <a href="http://twitter.com/ryan_kirkman" class="twitter-follow-button">Follow @ryan_kirkman</a>
            <br /><br />
             Thomas Davis - <a href="http://thomasdavis.github.com" target="_blank">http://thomasdavis.github.com</a><br />
            <a href="http://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
            <br /><br />Join us on IRC at <a href="http://webchat.freenode.net/?channels=cdnjs" target="_blank">#cdnjs</a>(new window) on freenode.net</p>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

            </div></div>
            <div class="column"><div class="column_container">
           <p style="font-size: 14px;	margin-left: 34px; margin-top: 15px; margin-bottom: 15px; text-align: center;"><strong>Uptime and response times:</strong> <br />



<br /> </div></div>

        </div>

        <div style="clear: both;"></div>
        </div> <!-- container -->


        <div id="templates" style="display: none;">


            <script type="text/template" id="search_form_template">
                  <ul class="menu" style="margin-top: 5px;">
                <li>search</li>
                <li><a href="#/search/tag/popular">popular</a></li>
                <li><a href="#/search/tag/all">all</a></li>
                </ul>
                <input type="text" id="searchinput" />

            </script>
            <script type="text/template" id="search_results_template">
            <ul>
            <% _.each( results, function( result ) {
                name = result.get("name");
                version = result.get("version");
                filename = result.get("filename");
                repositories = result.get("repositories");
                homepage = result.get("homepage");
                tags = result.get("keywords");
                maintainers = result.get("maintainers");

              linka = "http://cdn.sdslabs.co.in/cdnjs/ajax/libs/" + name + "/" + version + "/" + filename;


                %>
            <li>

                <h3>
                    <span><a target="_blank" href="<%= homepage %>"> <%= name %></a> (<%= version %>)</span
                    <span style="float: right;">
                    <% _.each( repositories, function( repo ) { %>
                    <!--<a href="<%= repo.url %>" target="_blank"><img src="images/<%= repo.type %>.png" /></a>-->
                    <% }); %>

                    </span>
                </h3>

            <input class="cdnlink" type="text" value="<%= linka %>" />
            <p>Tags:
            <% _.each( tags, function( tag ) { %>
               <a href="#/search/tag/<%= tag %>"><%= tag %></a>
            <% }); %>
            </p>
            <p>Maintainers:
            <% _.each( maintainers, function( maintainer ) { %>
               <a href="#/search/author/<%= maintainer.name.replace(/ /g, "") %>"><%= maintainer.name %></a>
            <% }); %>
            </p>
            </li>
            <% }); %>
            </ul>
            </script>

        </div>
    </body>

</html>