index.html

<!DOCTYPE html>

<html lang="en" ng-app id="top">
  <head ng-controller="head-ctrl">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>AngularDart directives for Twitter's Bootstrap</title>
    <meta name="description" content="AngularDart (Angular) native directives for Twitter Bootstrap. Small footprint, no 3rd party JS dependencies (jQuery, bootstrap JS) required! Widgets: {{ctrl.allModules}}">
    <!-- <meta name="google-site-verification" content="7lc5HyceLDqpV_6oNHteYFfxDJH7-S3DwnJKtNUKcRg" /> -->

    <script src="http://cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.7/fastclick.min.js"></script>
<!--     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/<%= ngVersion %>/angular.min.js"></script> -->
<!--     <script src="ui-bootstrap-tpls-<%= pkg.version%>.js"></script> -->
<!--     <script src="assets/plunker.js"></script> -->
<!--     <script src="assets/app.js"></script> -->
<!--     <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet"/> -->
<!--     <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/> -->
    <link href="assets/css/bootstrap.css" rel="stylesheet"/>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<!--     <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"> -->
    <link rel="stylesheet" href="assets/rainbow.css"/>
    <link rel="stylesheet" href="assets/demo.css"/>
    <link rel="author" href="https://github.com/bwu-dart/angular_ui_bootstrap/graphs/contributors">
    <style>
      .ng-hide {

        display:none!important;

        //this is just another form of hiding an element
        position:absolute;
        top:-9999px;
        left:-9999px;
      }
    </style>
  </head>

  <body class="ng-cloak" ng-controller="main-ctrl">
    <header class="navbar navbar-default navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3" ng-click="ctrl.isCollapsed = !ctrl.isCollapsed">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand visible-xs" href="#">UI Bootstrap</a>
          </div>
          <nav class="hidden-xs">
            <ul class="nav navbar-nav">
              <a href="#" role="button" class="navbar-brand">
                UI Bootstrap
              </a>
              <li class="dropdown">
                <a href="#" role="button" class="dropdown-toggle" ng-controller="dropdown-ctrl">
                    Directives <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                  <li ng-repeat='module in ctrl.modules'><a href="#{{module.name}}">{{module.displayName}}</a></li>
                </ul>
              </li>
              <li><a href="#getting_started">Getting started</a></li>
            </ul>
          </nav>
          <nav class="visible-xs" collapse="!ctrl.isCollapsed">
            <ul class="nav navbar-nav">
              <li><a href="#getting_started" ng-click="ctrl.isCollapsed = !ctrl.isCollapsed">Getting started</a></li>
              <li><a href="#directives_small" ng-click="ctrl.isCollapsed = !ctrl.isCollapsed">Directives</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </header>

    <div class="header-placeholder"></div>
    <div role="main">
      <header class="bs-header text-center" id="overview">
        <div class="container">
          <h1>
            UI Bootstrap
          </h1>

          <p>Bootstrap components written in pure <a href="https://github.com/angular/angular.dart">AngularDart</a> by <a
                  href="http://zoechi.github.io">Günter Zöchbauer and contributors</a></p>

          <p>a Dart port of <a href="http://angular-ui.github.io/bootstrap/">AngularJS UI Bootstrap</a></p>

          <p>
              <a class="btn btn-outline-inverse btn-lg" href="https://github.com/bwu-dart/angular_ui_bootstrap"><i class="icon-github"></i>Code on Github</a>
<!--               <a class="btn btn-outline-inverse btn-lg" href="https://github.com/bwu-dart/angular_ui_bootstrap/tree/gh-pages"> -->
<!--                   <i class="glyphicon glyphicon-download-alt"></i> Download <small>({{ctrl.pkgVersion}})</small> -->
<!--               </a> -->
<!--               <a class="btn btn-outline-inverse btn-lg" ng-click="showBuildModal()"><i class="glyphicon glyphicon-wrench"></i> Create a Build</a> -->
          </p>
        </div>

        <div class="bs-social container">
          <ul class="bs-social-buttons">
            <li>
               <iframe src="http://ghbtns.com/github-btn.html?user=bwu-dart&repo=angular_ui_bootstrap&type=watch&count=true"
                  allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
            </li>
            <li>
              <iframe src="http://ghbtns.com/github-btn.html?user=bwu-dart&repo=angular_ui_bootstrap&type=fork&count=true"
                      allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
            </li>
            <li>
              <a href="https://twitter.com/share" class="twitter-share-button"
                data-hashtags="angulardart">Tweet</a>
                <script>!function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//platform.twitter.com/widgets.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, "script", "twitter-wjs");</script>
            </li>
            <li>
              <!-- Place this tag where you want the +1 button to render. -->
              <div class="g-plusone" data-size="medium"></div>

              <!-- Place this tag after the last +1 button tag. -->
              <script type="text/javascript">
                  (function () {
                      var po = document.createElement('script');
                      po.type = 'text/javascript';
                      po.async = true;
                      po.src = 'https://apis.google.com/js/plusone.js';
                      var s = document.getElementsByTagName('script')[0];
                      s.parentNode.insertBefore(po, s);
                  })();
              </script>
            </li>
          </ul>
        </div>
      </header>

      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <section class="bs-sidebar visible-xs" id="directives_small">
              <ul class="nav bs-sidenav">
                <li><a href="#"><strong>Directives</strong></a></li>
                <!-- <% demoModules.forEach(function(module) {  %> -->
                    <li ng-repeat="module in ctrl.modules"><a href="#{{ module.name }}">{{ module.displayName }}</a></li>
                <!-- <% }); %> -->
              </ul>
            </section>

            <section class="getting_started" id="getting_started">
              <div class="page-header">
                <h1>Getting started</h1>
              </div>
              <h3>Dependencies</h3>
              <p>
                  This repository contains a set of <strong>native AngularDart directives</strong> based on
                  Twitter Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's
                  JavaScript is required. The <strong>only required dependencies</strong> are:
              </p>
              <ul>
    <!--                 <li><a href="http://angularjs.org" target="_blank">AngularJS</a> (minimal version 1.0.8 or 1.1.5)</li> --> <!-- TODO dependency agular-ui-bootstrap Dart package -->
                  <li><a href="http://getbootstrap.com" target="_blank">Bootstrap CSS</a> (version 3.0.3)</li>
              </ul>
    <!--             <h3>Files to download</h3> -->
    <!--             <p> -->
    <!--                 Build files for all directives are distributed in several flavours: minified for production usage, un-minified -->
    <!--                 for development, with or without templates. All the options are described and can be -->
    <!--                 <a href="https://github.com/angular-ui/bootstrap/tree/gh-pages">downloaded from here</a>. -->
    <!--             </p> -->
    <!--             <p>Alternativelly, if you are only interested in a subset of directives, you can -->
    <!--                 <a ng-click="showBuildModal()">create your own build</a>. -->
    <!--             </p> -->
    <!--             <p>Whichever method you choose the good news that the overall size of a download is very small: -->
    <!--                &lt;20kB for all directives (~5kB with gzip compression!)</p> -->
              <h3>Installation</h3>
    <!--             <p>As soon as you've got all the files downloaded and included in your page you just need to declare -->
    <!--                a dependency on the <code>ui.bootstrap</code> <a href="http://docs.angularjs.org/guide/module">module</a>:<br> -->
    <!--                <code>angular.module('myModule', ['ui.bootstrap']);</code> -->
    <!--             </p> -->
              <p>You can fork one of the plunkers from this page to see a working example of what is described here.</p>
              <h3>CSS</h3>
              <p>Original Bootstrap's CSS depends on empty <code>href</code> attributes to style cursors for several components (pagination, tabs etc.).
                 But in AngularDart adding empty <code>href</code> attributes to link tags will cause unwanted route changes.
                 This is why we need to remove empty <code>href</code> attributes from directive templates and as a result
                 styling is not applied correctly. The remedy is simple, just add the following styling to your application:
                 <code>
                     .nav, .pagination, .carousel, .panel-title a {
                          cursor: pointer;
                     }
                 </code>
              </p>
            </section>

            <section id='{{module.name}}' ng-repeat='module in ctrl.modules'>
      <!--       <section id="<%= module.name %>" class="row"> -->
              <div class="page-header">
                <h1>{{module.displayName}}<small>
                    (<a target="_blank" href="https://github.com/bwu-dart/angular_ui_bootstrap/tree/master/src/{{module.name}}">Angular UI Bootstrap {{module.name}}</a>)
                </small></h1>
              </div>
              <div class="row">
<!--                 <div class="col-md-6" ba-bind-html='module.docs.html'> -->
                <div class="col-md-6" ng-include='src/{{module.name}}/demo.html'>
                </div>
                <div class="col-md-6" ba-bind-html='module.docs.md'>
                </div>
              </div>
              <hr>
              <div class="row code">
                <div class="col-md-12" ng-controller="plunker-ctrl">
                  <div class="pull-right">
                    <button class="btn btn-info" id="plunk-btn" ng-click="edit('{{ctrl.ngVersion}}', '{{ctrl.bsVersion}}', '{{ctrl.pkgVersion}}', '{{module.name}}')"><i class='glyphicon glyphicon-edit'></i> Edit in plunker</button>
                  </div>
                  <tabset>
                    <tab heading="Markup">
                      <div plunker-content='markup'>
                        <pre><code data-language='html' ng-bind='module.docs.html' ng-non-bindable></code></pre>
                      </div>
                    </tab>
                    <tab heading="JavaScript">
                      <div plunker-content='dart'>
                        <pre><code data-language="javascript" ng-bind='module.docs.dart' ng-non-bindable ></code></pre>
                      </div>
                    </tab>
                  </tabset>
                </div>
              </div>
            </section>
          </div>
        </div>
        <!-- <script>{{module.docs.js}}</script> --> <!-- TODO javascript -->
  <!--       <% }); %> -->
      </div><!-- /.container -->
    </div><!-- /.main -->

<!--       <input type='number' ng-model='ctrl.i'>  -->

    <footer class="footer">
      <div class="container">
        <p>Designed and built by <a href="https://github.com/zoechi?tab=members" target="_blank">Günter Zöchbauer</a> and <a href="https://github.com/bwu-dart/angular_ui_bootstrap/graphs/contributors" target="_blank">contributors</a>.</p>
        <p>Code licensed under <a href="https://github.com/bwu-dart/angular_ui_bootstrap/blob/master/LICENSE">MIT License</a>.</p>
        <p><a href="https://github.com/bwu-dart/angular_ui_bootstrap/issues?state=open">Issues</a></p>
      </div>
    </footer>

    <!-- code highlightning -->
    <script src="assets/rainbow.js"></script>
    <script src="assets/rainbow-generic.js"></script>
    <script src="assets/rainbow-javascript.js"></script>
    <script src="assets/rainbow-html.js"></script>

    <script type="text/ng-template" id="buildModal.html">
      <div class="modal-header">
        <h4>
          Create a Custom Build
          <br>
          <small>Select the modules you wish to download</small>
        </h4>
      </div>
      <div class="modal-body">
        <div ng-show="buildErrorText">
          <h4 style="text-align: center;">{{buildErrorText}}</h3>
        </div>
        <div ng-hide="buildErrorText">
<!--       <% modules.forEach(function(module) { %> -->
          <span ng-repeat='module in ctrl.allModules'> <!-- TODO if(i % 3 == 0) -->
            <button type="button" class="btn btn-default"
              ng-class="{'btn-primary': module.{{module.name}} }"
              style="width: 33%; border-radius: 0;"
              ng-model="module.{{module.name}}"
              btn-checkbox
              ng-change="selectedChanged('{{ module.name }}', module.{{ module.name }})">{{ module.displayName }}
            </button>
          </span>
<!--       <% }); %> -->
        </div>
      </div>
      <div class="modal-footer">
        <a class="btn btn-primary" ng-disabled="selectedModules.length == 0" ng-click="selectedModules.length > 0 && downloadBuild()"> <!-- TODO dartify expression -->
          <i class="glyphicon glyphicon-download-alt"></i> Download {{selectedModules.length}} Modules
        </a>
        <a class="btn" ng-click="cancel()">Cancel</a>
      </div>
    </script>

    <!-- TODO tracking code-->
    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-2889730-8']);
      _gaq.push(['_trackPageview']);

      (function() {
          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

  	</script>

    <script type='application/dart' src='index.dart'></script>
    <script type='text/javascript' src='packages/browser/dart.js'></script>

  </body>
</html>