chore(docs) docs wip

joaoneto · Nov 16, 2014 · b0cf25e · b0cf25e
1 parent f3fb4e0
commit b0cf25e
Show file tree

Hide file tree

Showing 13 changed files with 364 additions and 123 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,18 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/bower.json b/bower.json
@@ -8,12 +8,14 @@
   "license": "MIT",
   "ignore": [
     "**/.*",
+    "docs",
     "node_modules",
     "bower_components",
     "components",
     "test*",
     "demo*",
     "Gruntfile.js",
+    "gulpfile.js",
     "package.json",
     "CHANGELOG.md"
   ],

diff --git a/demo/index.html b/demo/index.html
@@ -6,43 +6,51 @@
     <meta name="viewport" content="width=device-width">
     <title>Angular bootstrap-select</title>
 
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="../bower_components/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet">
-
-    <script src="../bower_components/jquery/dist/jquery.js"></script>
-    <script src="../bower_components/bootstrap-select/dist/js/bootstrap-select.js"></script>
-    <script src="../bower_components/angular/angular.js"></script>
-
-    <script src="../src/angular-bootstrap-select.js"></script>
 </head>
 <body>
     <div role="main">
         <div class="container">
-            <script>
-            (function () {
-                var selectDemoApp = angular.module('selectDemoApp', [
-                    'angular-bootstrap-select',
-                    'angular-bootstrap-select.extra'
-                ]);
+            <!-- Extras -->
+            <section id="extras" ng-controller="ExtrasCtrl">
+                <h1>Extras</h1>
+                <div>
+                    <h3>Not popup without dropdownToggle directive</h3>
+                    <!-- This extra directive provide dropdown open and close without loading bootstrap.js -->
+                    <select class="selectpicker">
+                        <option value="">Select one</option>
+                        <option>Mustard</option>
+                        <option>Ketchup</option>
+                        <option>Relish</option>
+                    </select>
 
-                selectDemoApp.controller('SimpleUsageCtrl', function ($scope, $timeout) {
-                    $scope.model = '';
-                    $scope.colors = ['Mustard', 'Ketchup', 'Relish'];
-                    $scope.repeater = [
-                      { title: 'one' },
-                      { title: 'two' },
-                      { title: 'three' }
-                    ];
-                    $scope.selectWithOptionsIsVisible = true;
-                });
-            })();
-            </script>
+                    <h3>Popup with dropdownToggle directive</h3>
+                    <dropdown-toggle>
+                      <select class="selectpicker">
+                          <option value="">Select one</option>
+                          <option>Mustard</option>
+                          <option>Ketchup</option>
+                          <option>Relish</option>
+                      </select>
+                    </dropdown-toggle>
+                </div>
+            </section>
 
             <!-- Simple usage -->
-            <section id="simple-usage" ng-controller="SimpleUsageCtrl" dropdown-toggle>
+            <!-- <section id="simple-usage" ng-controller="SimpleUsageCtrl" class="dropdown-toggle">
                 <h1>Simple usage</h1>
 
                 <div>
+                    <h3>Works with simple select</h3>
+                    <div>Model value: <code>{{model || "''"}}</code></div>
+                    <select selectpicker="" ng-model="model">
+                        <option value="">Select one</option>
+                        <option>Mustard</option>
+                        <option>Ketchup</option>
+                        <option>Relish</option>
+                    </select>
+
                     <h3>Works with ngIf</h3>
                     <div>Model value: <code>{{model || "''"}}</code></div>
                     <div>Show/Hide <input type="checkbox" ng-model="selectWithOptionsIsVisible"></div>
@@ -56,15 +64,6 @@ <h3>Works with ngIf</h3>
                         </select>
                     </div>
 
-                    <h3>Works without ngIf</h3>
-                    <div>Model value: <code>{{model || "''"}}</code></div>
-                    <select selectpicker="" ng-model="model">
-                        <option value="">Select one</option>
-                        <option>Mustard</option>
-                        <option>Ketchup</option>
-                        <option>Relish</option>
-                    </select>
-
                     <h3>Works with optgroup</h3>
                     <div>
                         <select selectpicker ng-model="model">
@@ -85,7 +84,7 @@ <h3>Works with ngOptions</h3>
                     <select selectpicker ng-model="model" ng-options="c as c for c in colors">
                         <option value="">Select one</option>
                     </select>
-                  
+
                     <h3>Works with ngRepeat</h3>
                     <div ng-repeat="select in repeater">
                         <label>{{select.title}} {{model}}</label>
@@ -94,9 +93,15 @@ <h3>Works with ngRepeat</h3>
                         </select>
                     </div>
                 </div>
-            </section>
+            </section> -->
         </div>
     </div>
 
+    <script src="../bower_components/jquery/dist/jquery.js"></script>
+    <script src="../bower_components/bootstrap-select/dist/js/bootstrap-select.js"></script>
+    <script src="../bower_components/angular/angular.js"></script>
+
+    <script src="../src/angular-bootstrap-select.js"></script>
+    <script src="select-demo-app.js"></script>
 </body>
 </html>
diff --git a/demo/select-demo-app.js b/demo/select-demo-app.js
@@ -0,0 +1,19 @@
+angular.module('selectDemoApp', [
+  'angular-bootstrap-select',
+  'angular-bootstrap-select.extra'
+])
+
+.controller('ExtrasCtrl', function ($scope, $timeout) {
+  $scope.model = 'Mustard';
+})
+
+.controller('SimpleUsageCtrl', function ($scope, $timeout) {
+  $scope.model = '';
+  $scope.colors = ['Mustard', 'Ketchup', 'Relish'];
+  $scope.repeater = [
+    { title: 'one' },
+    { title: 'two' },
+    { title: 'three' }
+  ];
+  $scope.selectWithOptionsIsVisible = true;
+})
diff --git a/demo/selectDemo.js b/demo/selectDemo.js
diff --git a/docs/config/index.js b/docs/config/index.js
@@ -0,0 +1,45 @@
+var path = require('canonical-path');
+var Package = require('dgeni').Package;
+
+var paths = {
+  src: path.resolve(__dirname, '../../src'),
+  docs: path.resolve(__dirname, '..'),
+};
+
+var files = {
+  scripts: path.join(paths.src, '**', '*.js'),
+  exclude_scripts: '',
+};
+
+module.exports = new Package('angular-bootstrap-select', [
+  require('dgeni-packages/ngdoc'),
+  require('dgeni-packages/nunjucks'),
+])
+
+.factory(function gitData() {
+  return {
+    version: {
+      isSnapshot: true,
+      branch: 'master',
+      raw: 'v0.0.4',
+    },
+    versions: ['v0.0.2', 'v0.0.3', 'v0.0.4'],
+    info: {
+      owner: 'joaoneto',
+      repo: 'angular-bootstrap-select',
+    }
+  };
+})
+.config(function (templateFinder, renderDocsProcessor, gitData) {
+  renderDocsProcessor.extraData.git = gitData;
+})
+
+.config(function (templateFinder, readFilesProcessor, writeFilesProcessor) {
+  readFilesProcessor.basePath = path.resolve(__dirname, '../..');
+  readFilesProcessor.sourceFiles = [{
+    include: files.scripts,
+    basePath: paths.src
+  }];
+  templateFinder.templateFolders.unshift(path.resolve(__dirname, 'templates'));
+  writeFilesProcessor.outputFolder = paths.docs;
+});
diff --git a/docs/config/templates/api/module.template.html b/docs/config/templates/api/module.template.html
@@ -0,0 +1,66 @@
+{% extends "base.template.html" %}
+
+{% block content %}
+<h1>
+  {% if doc.title %}{$ doc.title | marked $}{% else %}{$ doc.name | code $}{% endif %}
+</h1>
+
+{$ doc.description | marked $}
+
+{% if doc.name != 'ng' and doc.name != 'auto' %}
+  <h2>Installation</h2>
+
+  <p>First include <code>angular-bootstrap-select</code> in your HTML:</p>
+
+  {% code %}
+      <script src="angular.js">
+      <script src="angular-bootstrap-select.js">
+  {% endcode %}
+
+  <p>You can download this file from the following places:</p>
+  <ul>
+    <li>
+      <a href="https://github.com/joaoneto/angular-bootstrap-select/releases">Github</a><br>
+      e.g. {$ ("https://github.com/joaoneto/angular-bootstrap-select/archive/vX.Y.Z.zip") | code $}
+    </li>
+    <li>
+      <a href="http://bower.io">Bower</a><br>
+      e.g. <code>bower install angular-bootstrap-select@X.Y.Z</code>
+    </li>
+  </ul>
+  <p>where X.Y.Z is the angular-bootstrap-select.js version you are running.</p>
+  <p>Then load the module in your application by adding it as a dependent module:</p>
+  {% code %}
+    angular.module('app', ['{$ doc.name $}']);
+  {% endcode %}
+
+  <p>With that you&apos;re ready to get started!</p>
+{% endif %}
+
+<div class="component-breakdown">
+  <h2>Module Components</h2>
+  {% for componentGroup in doc.componentGroups %}
+  <div>
+    <h3 class="component-heading" id="{$ componentGroup.groupType | dashCase $}">{$ componentGroup.groupType | title $}</h3>
+    <table class="definition-table">
+      <tr>
+        <th>Name</th>
+        <th>Description</th>
+      </tr>
+      {% for component in componentGroup.components %}
+      <tr>
+        <td>{$ component.id | link(component.name, component) $}</td>
+        <td>{$ component.description | firstParagraph | marked $}</td>
+      </tr>
+      {% endfor %}
+    </table>
+  </div>
+  {% endfor %}
+</div>
+
+{% if doc.usage %}
+  <h2>Usage</h2>
+  {$ doc.usage | marked $}
+{% endif %}
+
+{% endblock %}
diff --git a/docs/config/templates/base.template.html b/docs/config/templates/base.template.html
@@ -0,0 +1,4 @@
+<a href='https://github.com/joaoneto/angular-bootstrap-select/edit/{$ git.version.branch $}/{$ doc.fileInfo.projectRelativePath $}?message=docs({$ (doc.area != "api") and (doc.area + "%2F") or "" $}{$ doc.name $})%3A%20describe%20your%20change...{$ (doc.area == "api") and ("#L" + doc.startingLine) or "" $}' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>
+
+{% block content %}
+{% endblock %}
diff --git a/docs/config/templates/common.template.html b/docs/config/templates/common.template.html
@@ -0,0 +1,20 @@
+<h1>{{ doc.codeName }} ({{ doc.outputPath }})</h1>
+<p>{{ doc.description }}</p>
+
+{% if doc.params %}
+<h2>Params</h2>
+<ul>
+{% for param in doc.params %}
+<li>
+  <strong>{{ param.name }}</strong> { {{ param.typeList }} } - {{ param.description }}
+</li>
+{% endfor %}
+</ul>
+{% endif %}
+
+{% if doc.returns %}
+<h2>Returns</h2>
+<p>
+  { {{ doc.returns.typeList }} } - {{ doc.returns.description }}
+</p>
+{% endif %}
diff --git a/docs/gulpfile.js b/docs/gulpfile.js
@@ -0,0 +1,8 @@
+var path = require('canonical-path');
+var Dgeni = require('dgeni');
+var gulp = require('gulp');
+
+gulp.task('docs', function () {
+  var dgeni = new Dgeni([require('./config')]);
+  return dgeni.generate();
+});
diff --git a/gulpfile.js b/gulpfile.js
@@ -7,10 +7,10 @@ var paths = {
   dist: 'dist',
   demo: 'demo',
   test: 'test',
-  scripts: path.join('src', '**', '*.js'),
 };
 
 var files = {
+  scripts: path.join(paths.src, '**', '*.js'),
   demo: path.join(paths.demo, '**', '*'),
 };
 
@@ -23,4 +23,3 @@ gulp.task('watch:demo', function () {
 gulp.task('serve', ['watch:demo'], function () {
   connect.server({ livereload: true });
 });
-
diff --git a/package.json b/package.json
@@ -3,7 +3,10 @@
   "version": "0.0.4",
   "description": "Directive to wrap bootstrap-select",
   "devDependencies": {
+    "canonical-path": "0.0.2",
     "dgeni": "^0.4.1",
+    "dgeni-markdown": "0.0.3",
+    "dgeni-packages": "^0.10.6",
     "grunt-contrib-clean": "~0.5.0",
     "grunt-contrib-copy": "~0.4.1",
     "grunt-contrib-uglify": "~0.2.2",