From 0b3e0e7c659e86a906bd9245bf98ac469ebb60b9 Mon Sep 17 00:00:00 2001 From: perry Date: Fri, 4 Dec 2015 13:27:09 -0600 Subject: [PATCH 1/5] docs(dgeni): setting API demo URL to be part of the meta data to be handled by jekyll --- scripts/docs/templates/common.template.html | 21 ++------------------- 1 file changed, 2 insertions(+), 19 deletions(-) diff --git a/scripts/docs/templates/common.template.html b/scripts/docs/templates/common.template.html index ed4cf04820..35d6cb5476 100644 --- a/scripts/docs/templates/common.template.html +++ b/scripts/docs/templates/common.template.html @@ -9,6 +9,8 @@ title: "<@ if doc.docType == "directive" @><$ doc.name | dashCase $><@ else @><$ header_sub_title: "<$ doc.docType | capital $> in module <$ doc.module $>" doc: "<$ doc.name $>" docType: "<$ doc.docType $>" +<@- if doc.demo and false -@>show_preview_device: true +preview_device_url= "<$ doc.demo $>"<@- endif -@> --- @@ -84,24 +86,6 @@ docType: "<$ doc.docType $>" Improve this doc - - <@- if doc.demo and false -@> - - <@ endif @> - <@ block content @> @@ -252,4 +236,3 @@ Delegate: <$ doc.delegate $> <@ endblock @> - From 28bb668d43dd7e08b24c8183ff7932b690fbb60d Mon Sep 17 00:00:00 2001 From: Drew Rygh Date: Fri, 4 Dec 2015 13:55:26 -0600 Subject: [PATCH 2/5] docs(api): add links to component sections --- ionic/components/action-sheet/action-sheet.ts | 2 ++ ionic/components/button/button.ts | 2 ++ ionic/components/checkbox/checkbox.ts | 1 + ionic/components/icon/icon.ts | 1 + ionic/components/item/item.ts | 2 ++ ionic/components/list/list.ts | 1 + ionic/components/menu/menu-close.ts | 2 ++ ionic/components/menu/menu-toggle.ts | 2 ++ ionic/components/menu/menu-types.ts | 1 + ionic/components/menu/menu.ts | 4 ++++ ionic/components/modal/modal.ts | 1 + ionic/components/nav/nav-controller.ts | 1 + ionic/components/nav/nav-push.ts | 1 + ionic/components/nav/nav.ts | 1 + ionic/components/popup/popup.ts | 1 + ionic/components/radio/radio.ts | 4 +++- ionic/components/searchbar/searchbar.ts | 1 + ionic/components/segment/segment.ts | 2 ++ ionic/components/slides/slides.ts | 1 + ionic/components/switch/switch.ts | 1 + ionic/components/tabs/tabs.ts | 4 ++-- scripts/docs/templates/common.template.html | 3 +-- 22 files changed, 34 insertions(+), 5 deletions(-) diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts index 06f2152dc9..50203083d7 100644 --- a/ionic/components/action-sheet/action-sheet.ts +++ b/ionic/components/action-sheet/action-sheet.ts @@ -106,6 +106,8 @@ class ActionSheetCmp { * * } * ``` + * + * @see {@link /docs/v2/components#action-sheets ActionSheet Component Docs} */ @Injectable() export class ActionSheet { diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts index b181c992d5..b2022aad2a 100644 --- a/ionic/components/button/button.ts +++ b/ionic/components/button/button.ts @@ -26,6 +26,8 @@ import {Config} from '../../config/config'; * @property [fab-bottom] - position a fab button towards the bottom * @description * Buttons are simple components in Ionic, can consist of text, an icon, or both, and can be enhanced with a wide range of attributes. + * @see {@link /docs/v2/components#buttons Button Component Docs} + */ @Directive({ selector: 'button,[button]' diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts index 38a56394ee..17704a8b86 100644 --- a/ionic/components/checkbox/checkbox.ts +++ b/ionic/components/checkbox/checkbox.ts @@ -17,6 +17,7 @@ import {Form} from '../../util/form'; * HTML5 * * ``` + * @see {@link /docs/v2/components#checkbox Checkbox Component Docs} */ @Component({ selector: 'ion-checkbox', diff --git a/ionic/components/icon/icon.ts b/ionic/components/icon/icon.ts index 0c675bac23..14a9b4b43c 100644 --- a/ionic/components/icon/icon.ts +++ b/ionic/components/icon/icon.ts @@ -13,6 +13,7 @@ import {Config} from '../../config/config'; * If there is not an outlined version for the particular icon, it will use the default (full) version. * @property {string} [ios] - Explicitly set the icon to use on iOS. * @property {string} [md] - Explicitly set the icon to use on Android. + * @see {@link /docs/v2/components#icons Icon Component Docs} * */ @Directive({ diff --git a/ionic/components/item/item.ts b/ionic/components/item/item.ts index 25bbff20ba..d89d9e181d 100644 --- a/ionic/components/item/item.ts +++ b/ionic/components/item/item.ts @@ -37,6 +37,8 @@ import {Component} from 'angular2/angular2'; * * * ``` + * @see {@link /docs/v2/components#lists List Component Docs} + * @see {@link ../../list/List List API Docs} */ @Component({ selector: 'ion-item,[ion-item]', diff --git a/ionic/components/list/list.ts b/ionic/components/list/list.ts index f8cbb9defd..d5e932bac2 100644 --- a/ionic/components/list/list.ts +++ b/ionic/components/list/list.ts @@ -16,6 +16,7 @@ import * as util from 'ionic/util'; * Using the List and Item components make it easy to support various * interaction modes such as swipe to edit, drag to reorder, and removing items. * @demo /docs/v2/demos/list/ + * @see {@link /docs/v2/components#lists List Component Docs} * * */ diff --git a/ionic/components/menu/menu-close.ts b/ionic/components/menu/menu-close.ts index 56ac93df47..ea68257162 100644 --- a/ionic/components/menu/menu-close.ts +++ b/ionic/components/menu/menu-close.ts @@ -6,6 +6,8 @@ import {IonicApp} from '../app/app'; /** * TODO +* @see {@link /docs/v2/components#menus Menu Component Docs} +* @see {@link ../../menu/Menu Menu API Docs} */ @Directive({ selector: '[menu-close]', diff --git a/ionic/components/menu/menu-toggle.ts b/ionic/components/menu/menu-toggle.ts index ea9bff80ad..6f1fdb3e35 100644 --- a/ionic/components/menu/menu-toggle.ts +++ b/ionic/components/menu/menu-toggle.ts @@ -8,6 +8,8 @@ import {Navbar} from '../navbar/navbar'; /** * TODO +* @see {@link /docs/v2/components#menus Menu Component Docs} +* @see {@link ../../menu/Menu Menu API Docs} */ @Directive({ selector: '[menu-toggle]', diff --git a/ionic/components/menu/menu-types.ts b/ionic/components/menu/menu-types.ts index 094cc6c8f9..db1e7614a4 100644 --- a/ionic/components/menu/menu-types.ts +++ b/ionic/components/menu/menu-types.ts @@ -7,6 +7,7 @@ import {Animation} from 'ionic/animations/animation'; * Base class which is extended by the various types. Each * type will provide their own animations for open and close * and registers itself with Menu. + * @private */ export class MenuType { diff --git a/ionic/components/menu/menu.ts b/ionic/components/menu/menu.ts index a00c3e6aea..39fc69c370 100644 --- a/ionic/components/menu/menu.ts +++ b/ionic/components/menu/menu.ts @@ -42,6 +42,10 @@ import * as gestures from './menu-gestures'; * ```html * * ``` + * @see {@link /docs/v2/components#menus Menu Component Docs} + * @see {@link /docs/v2/components#navigation Navigation Component Docs} + * @see {@link ../../nav/Nav Nav API Docs} + * */ @Component({ selector: 'ion-menu', diff --git a/ionic/components/modal/modal.ts b/ionic/components/modal/modal.ts index 8baae9ab48..604966fe81 100644 --- a/ionic/components/modal/modal.ts +++ b/ionic/components/modal/modal.ts @@ -33,6 +33,7 @@ import {extend} from 'ionic/util'; * * } * ``` + * @see {@link /docs/v2/components#modals Modal Component Docs} */ @Injectable() export class Modal { diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts index 50f7caae31..aba79056be 100644 --- a/ionic/components/nav/nav-controller.ts +++ b/ionic/components/nav/nav-controller.ts @@ -97,6 +97,7 @@ import {raf, rafFrames} from '../../util/dom'; * - `onPageWillUnload` - Runs when the page is about to be destroyed and have its elements removed. * - `onPageDidUnload` - Runs after the page has been destroyed and its elements have been removed. * + * @see {@link /docs/v2/components#navigation Navigation Component Docs} */ export class NavController extends Ion { diff --git a/ionic/components/nav/nav-push.ts b/ionic/components/nav/nav-push.ts index c33fd21f35..4f5038d29b 100644 --- a/ionic/components/nav/nav-push.ts +++ b/ionic/components/nav/nav-push.ts @@ -36,6 +36,7 @@ import {NavRegistry} from './nav-registry'; * ```html * * ``` + * @see {@link /docs/v2/components#navigation Navigation Component Docs} */ @Directive({ selector: '[nav-push]', diff --git a/ionic/components/nav/nav.ts b/ionic/components/nav/nav.ts index 757871d8ff..92259c920c 100644 --- a/ionic/components/nav/nav.ts +++ b/ionic/components/nav/nav.ts @@ -96,6 +96,7 @@ import {ViewController} from './view-controller'; * * * + * @see {@link /docs/v2/components#navigation Navigation Component Docs} */ @ConfigComponent({ selector: 'ion-nav', diff --git a/ionic/components/popup/popup.ts b/ionic/components/popup/popup.ts index ae812f5e87..125197776e 100644 --- a/ionic/components/popup/popup.ts +++ b/ionic/components/popup/popup.ts @@ -61,6 +61,7 @@ import {extend} from '../../util/util'; * } * } * ``` + * @see {@link /docs/v2/components#popups Popup Component Docs} */ @Injectable() export class Popup { diff --git a/ionic/components/radio/radio.ts b/ionic/components/radio/radio.ts index 7c674e89c9..b331ff4615 100644 --- a/ionic/components/radio/radio.ts +++ b/ionic/components/radio/radio.ts @@ -40,6 +40,7 @@ import {ListHeader} from '../list/list'; * * * ``` + * @see {@link /docs/v2/components#radio Radio Component Docs} */ @Directive({ selector: '[radio-group]', @@ -161,7 +162,8 @@ export class RadioGroup extends Ion { * Radio Label * * ``` - * + * + * @see {@link /docs/v2/components#radio Radio Component Docs} */ @Component({ selector: 'ion-radio', diff --git a/ionic/components/searchbar/searchbar.ts b/ionic/components/searchbar/searchbar.ts index cdea0b3d9c..cb69280e8a 100644 --- a/ionic/components/searchbar/searchbar.ts +++ b/ionic/components/searchbar/searchbar.ts @@ -20,6 +20,7 @@ import {Icon} from '../icon/icon'; * @property [show-cancel] - shows the cancel button based on boolean value passed in * @property [cancel-text] - sets the cancel button text to the value passed in * @property [cancel-action] - the function that gets called by clicking the cancel button + * @see {@link /docs/v2/components#search Search Component Docs} */ @ConfigComponent({ selector: 'ion-searchbar', diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts index 523e71f4d5..b53c2c4dd3 100644 --- a/ionic/components/segment/segment.ts +++ b/ionic/components/segment/segment.ts @@ -36,6 +36,8 @@ import {Config} from '../../config/config'; * * * ``` + * + * @see {@link /docs/v2/components#segment Segment Component Docs} */ @Directive({ selector: 'ion-segment' diff --git a/ionic/components/slides/slides.ts b/ionic/components/slides/slides.ts index 045352be2f..9b54f15a0e 100644 --- a/ionic/components/slides/slides.ts +++ b/ionic/components/slides/slides.ts @@ -27,6 +27,7 @@ import {Scroll} from '../scroll/scroll'; * * Licensed under MIT * + * @see {@link /docs/v2/components#slides Slides Component Docs} */ @Component({ selector: 'ion-slides', diff --git a/ionic/components/switch/switch.ts b/ionic/components/switch/switch.ts index 6315b0fc09..c4d18729b6 100644 --- a/ionic/components/switch/switch.ts +++ b/ionic/components/switch/switch.ts @@ -64,6 +64,7 @@ class MediaSwitch { * * ``` * + * @see {@link /docs/v2/components#switch Switch Component Docs} */ @Component({ selector: 'ion-switch', diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts index 4c5741fbdb..67aa6f9cc4 100644 --- a/ionic/components/tabs/tabs.ts +++ b/ionic/components/tabs/tabs.ts @@ -31,8 +31,8 @@ import {rafFrames} from '../../util/dom'; * individual Tab components. On iOS, the TabBar is placed on the bottom of * the screen, while on Android it is at the top. * - * See the [Tab API reference](../Tab/) for more details on individual Tab components. - * + * @see {@link /docs/v2/components#tabs Tabs Component Docs} + * @see {@link ../Tab Tab API Docs} */ @ConfigComponent({ selector: 'ion-tabs', diff --git a/scripts/docs/templates/common.template.html b/scripts/docs/templates/common.template.html index 35d6cb5476..0ef2b20331 100644 --- a/scripts/docs/templates/common.template.html +++ b/scripts/docs/templates/common.template.html @@ -222,8 +222,7 @@ Delegate: <$ doc.delegate $> <@- if doc.see @> -

Related

- +

Related

<@ for s in doc.see @> <$ s | safe $> <@- endfor -@> From f1d8d5fc14b7582c0888780571c6fbcdaca2e303 Mon Sep 17 00:00:00 2001 From: mhartington Date: Fri, 4 Dec 2015 15:20:02 -0500 Subject: [PATCH 3/5] docs() --- ionic/components/nav/view-controller.ts | 14 ++- ionic/components/slides/slides.ts | 121 +++++++++++++++++++++++- ionic/components/switch/switch.ts | 7 +- ionic/components/toolbar/toolbar.ts | 3 + ionic/platform/storage/storage.ts | 6 ++ 5 files changed, 143 insertions(+), 8 deletions(-) diff --git a/ionic/components/nav/view-controller.ts b/ionic/components/nav/view-controller.ts index 3fdb9c3578..4f1ecce5cb 100644 --- a/ionic/components/nav/view-controller.ts +++ b/ionic/components/nav/view-controller.ts @@ -2,7 +2,19 @@ import {NavParams} from './nav-controller'; /** - * You can access various features and information about the current view + * @name ViewController + * @description + * Access various features and information about the current view + * @usage + * ```ts + * import {Page, ViewController} from 'ionic/ionic'; + * @Page.... + * export class MyPage{ + * constructor(viewCtrl: ViewController){ + * this.viewCtrl = viewCtrl; + * } + * } + * ``` */ export class ViewController { diff --git a/ionic/components/slides/slides.ts b/ionic/components/slides/slides.ts index 045352be2f..8db03297ad 100644 --- a/ionic/components/slides/slides.ts +++ b/ionic/components/slides/slides.ts @@ -14,6 +14,8 @@ import {Scroll} from '../scroll/scroll'; /** + * @name Slides + * @description * Slides is a slide box implementation based on Swiper.js * * Swiper.js: @@ -27,6 +29,41 @@ import {Scroll} from '../scroll/scroll'; * * Licensed under MIT * + * @usage + * ```ts + * @Page({ + * template: ` + * + * + *

Thank you for choosing the Awesome App!

+ *

+ * The number one app for everything awesome. + *

+ * + * + *

Using Awesome

+ *
+ *
Just three steps:
+ *
    + *
  1. Be awesome
    2. + *
  2. Stay awesome
    3. + *
  3. There is no step 3
    4. + *
+ *
+ * + * + *

Any questions?

+ * + * + * ` + *}) + * + *``` + * @property {Any} [autoplay] - whether or not the slides should automatically change + * @property {Any} [loop] - whether the slides should loop from the last slide back to the first + * @property {Any} [bounce] - whether the slides should bounce + * @property [pager] - add this property to enable the slide pager + * @property {Any} [slideChanged] - expression to evaluate when a slide has been changed */ @Component({ selector: 'ion-slides', @@ -56,7 +93,7 @@ import {Scroll} from '../scroll/scroll'; export class Slides extends Ion { /** - * TODO + * @private * @param {ElementRef} elementRef TODO */ constructor(elementRef: ElementRef, config: Config) { @@ -67,6 +104,10 @@ export class Slides extends Ion { this.slideChanged = new EventEmitter('slideChanged'); } + + /** + * @private + */ onInit() { if(!this.options) { this.options = {}; @@ -133,16 +174,31 @@ export class Slides extends Ion { } + /** + * @private + */ onTap(swiper, e) { } + /** + * @private + */ onClick(swiper, e) { } + /** + * @private + */ onDoubleTap(swiper, e) { this.toggleZoom(swiper, e); } + /** + * @private + */ onLazyImageLoad(swiper, slide, img) { } + /** + * @private + */ onLazyImageReady(swiper, slide, img) { } @@ -155,6 +211,9 @@ export class Slides extends Ion { } */ + /** + * @private + */ initZoom() { this.zoomDuration = this.zoomDuration || 230; this.maxScale = this.zoomMax || 3; @@ -218,6 +277,9 @@ export class Slides extends Ion { }); } + /** + * @private + */ resetZoom() { if(this.zoomElement) { @@ -231,6 +293,9 @@ export class Slides extends Ion { this.zoomLastPosY = 0; } + /** + * @private + */ toggleZoom(swiper, e) { console.log('Try toggle zoom'); if(!this.enableZoom) { return; } @@ -305,11 +370,21 @@ export class Slides extends Ion { this.scale = this.maxScale; } } + + /** + * @private + */ onTransitionStart(swiper) { } + /** + * @private + */ onTransitionEnd(swiper) { } + /** + * @private + */ onTouchStart(e) { console.log('Touch start', e); @@ -335,6 +410,9 @@ export class Slides extends Ion { } + /** + * @private + */ onTouchMove(e) { this.touch.deltaX = e.touches[0].clientX - this.touch.startX; this.touch.deltaY = e.touches[0].clientY - this.touch.startY; @@ -384,6 +462,10 @@ export class Slides extends Ion { } } + + /** + * @private + */ onTouchEnd(e) { console.log('PANEND', e); @@ -412,9 +494,11 @@ export class Slides extends Ion { } /** + * @private * Update the underlying slider implementation. Call this if you've added or removed * child slides. */ + */ update() { setTimeout(() => { this.slider.update(); @@ -426,33 +510,59 @@ export class Slides extends Ion { }); } + /** + * @private + */ next() { this.slider.slideNext(); } + + /** + * @private + */ prev() { this.slider.slidePrev(); } + + /** + * @private + */ getIndex() { return this.slider.activeIndex; } + + /** + * @private + */ getNumSlides() { return this.slider.slides.length; } + + /** + * @private + */ isAtEnd() { return this.slider.isEnd; } + + /** + * @private + */ isAtBeginning() { return this.slider.isBeginning; } + /** + * @private + */ getSliderWidget() { return this.slider; } } -/** - * TODO - */ + /** + * @private + */ @Component({ selector: 'ion-slide', inputs: ['zoom'], @@ -475,6 +585,9 @@ export class Slide { } } + /** + * @priavte + */ @Directive({ selector: 'slide-lazy', }) diff --git a/ionic/components/switch/switch.ts b/ionic/components/switch/switch.ts index 6315b0fc09..ab0ae2291b 100644 --- a/ionic/components/switch/switch.ts +++ b/ionic/components/switch/switch.ts @@ -33,9 +33,10 @@ class MediaSwitch { /** - * A switch technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Ionic prefers to wrap the checkbox input with the