diff --git a/docs/docs.config.js b/docs/docs.config.js index b29e3f3982..b157d6d847 100644 --- a/docs/docs.config.js +++ b/docs/docs.config.js @@ -25,11 +25,16 @@ module.exports = function(config) { config.set('versionData', versionData); config.set('rendering.contentsFolder', path.join('docs', versionData.current.folder)); + config.set('demos.outputFolder', path.join(__dirname, '../tmp/ionic-demo')); + config.set('processing.api-docs', { outputPath: 'api/${docType}/${name}/index.md', path: 'api/${docType}/${name}/', moduleOutputPath: 'api/module/${name}/index.md', - modulePath: 'api/module/${name}/' + modulePath: 'api/module/${name}/', + mergeableTypes: { + demo: 'demos' + } }); config.append('rendering.filters', [ @@ -59,10 +64,10 @@ module.exports = function(config) { config.append('processing.processors', [ require('./processors/latest-version'), require('./processors/keywords'), - require('./processors/pages-data'), require('./processors/index-page'), require('./processors/version-data'), - require('./processors/jekyll') + require('./processors/jekyll'), + require('./processors/demos') ]); return config; diff --git a/docs/processors/demos.js b/docs/processors/demos.js new file mode 100644 index 0000000000..f571e0eafd --- /dev/null +++ b/docs/processors/demos.js @@ -0,0 +1,119 @@ +var path = require('canonical-path'); +var log = require('winston'); +var _ = require('lodash'); + +var currentVersion; +var contentsFolder; +module.exports = { + name: 'demos', + runAfter: ['api-docs'], + runBefore: ['index-page'], + description: 'Create demos', + init: function(config) { + currentVersion = config.get('currentVersion'); + contentsFolder = config.get('rendering.contentsFolder'); + }, + process: function(docs, config, extraData) { + var demoTags = [ + 'javascript', + 'html', + 'css', + 'spec', + 'scenario' + ]; + var extensions = { + javascript: 'js', + html: 'html', + css: 'css', + spec: 'js', + scenario: 'js' + }; + + var demoFolder = path.join(config.get('versionData.current.folder'), + '${docType}/${name}'); + var demoPath = '${name}/${filename}.${extension}'; + var templatePath = 'demo/${filename}.template.${extension}'; + + var allDemos = []; + _(docs) + .filter(function(doc) { return doc.demos; }) + .forEach(function(doc) { + var outputFolder = _.template(demoFolder,doc); + + doc.demos.forEach(function(demo) { + var demoData = {}; + allDemos.push(demoData); + + var outputFolder = _.template(demoFolder, doc); + demoData.module = demo.module; + demoData.name = demo.name; + demoData.docName = doc.name; + demoData.href = '/' + outputFolder + '/' + demo.name; + + demoTags.forEach(function(tagName) { + var data = demo.tags.tagsByName[tagName]; + + if (data && data.length) { + var content = data.map(function(d) { + return d.description; + }).join('\n'); + var filename = tagName; + var ext = extensions[tagName]; + var outputPath = outputFolder + '/' + _.template(demoPath, { + name: demo.name, + filename: filename, + extension: ext + }); + var template = _.template(templatePath, { + filename: filename, + extension: ext + }); + + demoData[tagName] = { + path: outputPath, + content: content + }; + + //Write all the files for this demo (html, css, js) + docs.push({ + docType: 'demo', + id: doc.name + '/' + demo.name, + outputPath: config.get('demos.outputFolder') + '/' + outputPath, + template: template, + contents: content + }); + } + + }); + var outputPath = outputFolder + '/' + _.template(demoPath, { + name: demo.name, + filename: 'index', + extension: 'html' + }); + + //Write this specific demo's index page + docs.push({ + docType: 'demo', + outputPath: path.join(config.get('demos.outputFolder'), outputPath), + template: 'demo_index.template.html', + demoData: demoData, + name: doc.name + }); + }); + }) + .value(); + + //Write the demo page for this whole version (eg at /nightly) + docs.push({ + docType: 'demo', + template: 'demo_index.template.html', + outputPath: path.join( + config.get('demos.outputFolder'), + config.get('versionData.current.folder'), + 'index.html' + ) + }); + + extraData.demos = allDemos; + } +}; diff --git a/docs/processors/pages-data.js b/docs/processors/pages-data.js deleted file mode 100644 index bb24870e68..0000000000 --- a/docs/processors/pages-data.js +++ /dev/null @@ -1,56 +0,0 @@ -var _ = require('lodash'); -var fs = require('fs'); -var path = require('canonical-path'); -var log = require('winston'); - -var outputFolder; -var processorConfig; -var currentVersion; - -module.exports = { - name: 'pages-data', - description: 'This plugin will create a new doc that will be rendered as an angularjs module ' + - 'which will contain meta information about the pages and navigation', - runAfter: ['adding-extra-docs', 'component-groups-generate'], - runBefore: ['extra-docs-added'], - init: function(config) { - outputFolder = config.rendering.outputFolder; - processorConfig = config.get('processing.pages-data', {}); - currentVersion = config.get('currentVersion'); - }, - process: function(docs, config) { - // Generate an object collection of pages that is grouped by section e.g. - // - section "directive" - // - group "Tab Bar" - // - ion-tabs - // - ion-tab - // - group "" - // - ion-toggle - // - ion-checkbox - // - ... - // - var sections = _(docs) - .filter(function(doc) { return doc.area === 'api'; }) - .filter(function(doc) { return doc.module === 'ionic'; }) - .filter(function(doc) { return doc.docType !== 'componentGroup'; }) - .groupBy('docType') - .map(function(pages, docType) { - return { - name: docType, - components: pages.map(function(page) { - return { - href: page.path, - name: page.name, - docType: page.docType, - type: page.docType - }; - }) - }; - }) - .sortBy(function(section) { - //Directives always first - return section.name != 'directive'; - }) - .value(); - } -}; diff --git a/docs/tag-defs/index.js b/docs/tag-defs/index.js index e9f9284bbf..b121a55902 100644 --- a/docs/tag-defs/index.js +++ b/docs/tag-defs/index.js @@ -16,10 +16,11 @@ module.exports = [ }); } }, - { - name: 'codepen' - }, - { - name: 'alias' - } + { name: 'codepen' }, + { name: 'alias' }, + { name: 'demo' }, + { name: 'javascript' }, + { name: 'css' }, + { name: 'html' }, + { name: 'ngModule' } ]; diff --git a/docs/templates/api/directive.template.html b/docs/templates/api/directive.template.html index 475c7d6c42..4609367c1b 100644 --- a/docs/templates/api/directive.template.html +++ b/docs/templates/api/directive.template.html @@ -4,6 +4,7 @@ <@ block additional @> <@ block usage @> +
<$ doc | json $>

Usage

<@ if doc.usage @> <$ doc.usage $> diff --git a/docs/templates/demo/css.template.css b/docs/templates/demo/css.template.css new file mode 100644 index 0000000000..a8340eabca --- /dev/null +++ b/docs/templates/demo/css.template.css @@ -0,0 +1 @@ +<$ doc.contents $> diff --git a/docs/templates/demo/html.template.html b/docs/templates/demo/html.template.html new file mode 100644 index 0000000000..a8340eabca --- /dev/null +++ b/docs/templates/demo/html.template.html @@ -0,0 +1 @@ +<$ doc.contents $> diff --git a/docs/templates/demo/javascript.template.js b/docs/templates/demo/javascript.template.js new file mode 100644 index 0000000000..a8340eabca --- /dev/null +++ b/docs/templates/demo/javascript.template.js @@ -0,0 +1 @@ +<$ doc.contents $> diff --git a/docs/templates/demo/scenario.template.js b/docs/templates/demo/scenario.template.js new file mode 100644 index 0000000000..a8340eabca --- /dev/null +++ b/docs/templates/demo/scenario.template.js @@ -0,0 +1 @@ +<$ doc.contents $> diff --git a/docs/templates/demo/spec.template.js b/docs/templates/demo/spec.template.js new file mode 100644 index 0000000000..a8340eabca --- /dev/null +++ b/docs/templates/demo/spec.template.js @@ -0,0 +1 @@ +<$ doc.contents $> diff --git a/docs/templates/demo_index.template.html b/docs/templates/demo_index.template.html new file mode 100644 index 0000000000..ad859efda6 --- /dev/null +++ b/docs/templates/demo_index.template.html @@ -0,0 +1,168 @@ + + + + + + +<@ if doc.demoData and doc.demoData.css @> + +<@ endif @> + +<@ if doc.demoData and doc.demoData.javascript @> + +<@ endif @> + + + + +<@ if doc.demoData @> + +
+ + <$ doc.demoData.html.content $> + +
+
+
+ +
+

+ <$ doc.name $>: <$ doc.demoData.name | capital $> +

+
+ + + View Source + +
+ +<@ else @> + +
+
+
+
+ +<@ endif @> + + + + + + + + + + + + + diff --git a/js/angular/directive/checkbox.js b/js/angular/directive/checkbox.js index 2492b288b7..6e1b0c1f61 100644 --- a/js/angular/directive/checkbox.js +++ b/js/angular/directive/checkbox.js @@ -15,6 +15,60 @@ * Checkbox Label * ``` */ +/** + * @ngdoc demo + * @name ionCheckbox#simple + * @module checkboxSimple + * @javascript + * var app = angular.module('checkboxSimple', ['ionic']); + * app.controller('CheckboxSimpleCtrl', function($scope) { + * $scope.pizza = { + * pepperoni: true, + * sausage: false, + * anchovies: true, + * jalapenos: false + * }; + * + * $scope.toppings = function() { + * var toppings = Object.keys($scope.pizza).filter(function(flavor) { + * return $scope.pizza[flavor]; + * }); + * if (toppings.length > 1) { + * toppings[toppings.length - 1] = 'and ' + toppings[toppings.length - 1]; + * } + * if (toppings.length > 2) { + * return toppings.join(', '); + * } else if (toppings.length) { + * return toppings.join(' '); + * } else { + * return 'nothing'; + * } + * }; + * }); + * + * @html + * + *

+ * Checkbox: Simple Usage + *

+ * + * + *

Your pizza has {{toppings()}}!

+ * + * Pepperoni? + * + * + * Sausage? + * + * + * Jalapeno? + * + * + * Anchovies? + * + * + */ + IonicModule .directive('ionCheckbox', function() { return { diff --git a/js/angular/directive/itemOptionButton.js b/js/angular/directive/itemOptionButton.js index d88e306b05..23605d1478 100644 --- a/js/angular/directive/itemOptionButton.js +++ b/js/angular/directive/itemOptionButton.js @@ -9,7 +9,7 @@ var ITEM_TPL_OPTION_BUTTONS = * @restrict E * Creates an option button inside a list item, that is visible when the item is swiped * to the left by the user. Swiped open option buttons can be hidden with -* {@link ionic.directive:$ionicListDelegate#closeOptionButtons $ionicListDelegate#closeOptionButtons}. +* {@link ionic.service:$ionicListDelegate#closeOptionButtons $ionicListDelegate#closeOptionButtons}. * * Can be assigned any button class. * diff --git a/js/angular/directive/sideMenu.js b/js/angular/directive/sideMenu.js index 2b6a3a3608..c22bb46a7c 100644 --- a/js/angular/directive/sideMenu.js +++ b/js/angular/directive/sideMenu.js @@ -57,3 +57,4 @@ IonicModule } }; }); + diff --git a/js/angular/directive/sideMenus.js b/js/angular/directive/sideMenus.js index bee5470534..68db8f5485 100644 --- a/js/angular/directive/sideMenus.js +++ b/js/angular/directive/sideMenus.js @@ -50,6 +50,51 @@ IonicModule * with {@link ionic.service:$ionicSideMenuDelegate}. * */ +/** + * @ngdoc demo + * @name ionSideMenus#simple + * @module sideMenusSimple + * @javascript +var app = angular.module('sideMenusSimple', ['ionic']); +app.controller('SideMenusSimpleCtrl', function($scope, $ionicSideMenuDelegate) { + + $scope.toggleLeft = function() { + $ionicSideMenuDelegate.toggleLeft(); + }; + +}); + * + * @html + + + + + +
+
+ +
+
+ + +

Slide the content or press the button on the header to open a side menu.

+ + + + + + + + + Close Menu + + + + + + + */ + .directive('ionSideMenus', [function() { return { restrict: 'ECA', diff --git a/js/angular/service/modal.js b/js/angular/service/modal.js index b95ef007d3..9e760eb73d 100644 --- a/js/angular/service/modal.js +++ b/js/angular/service/modal.js @@ -4,7 +4,7 @@ * @module ionic * @description * The Modal is a content pane that can go over the user's main view - * temporarily. Usually used for making a choice or editing an item. + * temporarily. Usually used for making a choice or editing an item. * Note that you need to put the content of the modal inside a div with the class `modal`. * * @usage diff --git a/test/e2e/viewState/test.js b/test/e2e/viewState/test.js index 37b3e8c799..024d8a1ed0 100644 --- a/test/e2e/viewState/test.js +++ b/test/e2e/viewState/test.js @@ -20,6 +20,10 @@ describe('viewState', function() { expect(navButtons('right').getText()).toEqual(''); expect(navButtons('right').getAttribute('class')).toContain('ion-navicon'); + browser.takeScreenshot().then(function(png) { + console.log(png); + }); + element(by.id('sign-in-button')).click();