Merge branch 'master' into css-refactor

ionic/components/action-sheet/action-sheet.ts

@@ -108,6 +108,8 @@ class ActionSheetCmp {
  *
  * }
  * ```
+ *
+ * @see {@link /docs/v2/components#action-sheets ActionSheet Component Docs}
  */
 @Injectable()
 export class ActionSheet {

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]',

ionic/components/checkbox/checkbox.ts

@@ -17,6 +17,7 @@ import {Form} from '../../util/form';
  *   HTML5
  * </ion-checkbox>
  * ```
+ * @see {@link /docs/v2/components#checkbox Checkbox Component Docs}
  */
 @Component({
   selector: 'ion-checkbox',

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({

ionic/components/item/item.ts

@@ -37,6 +37,8 @@ import {Component} from 'angular2/angular2';
  * </ion-list>
  *
  *  ```
+ * @see {@link /docs/v2/components#lists List Component Docs}
+ * @see {@link ../../list/List List API Docs}
  */
 @Component({
   selector: 'ion-item,[ion-item]',

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}
  *
  *
  */

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]',

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]',

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 {
 

ionic/components/menu/menu.ts

@@ -42,6 +42,10 @@ import * as gestures from  './menu-gestures';
  * ```html
  * <ion-menu [content]="contentRef" type="overlay"></ion-menu>
  * ```
+ * @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',

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 {

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 {
 

ionic/components/nav/nav-push.ts

@@ -36,6 +36,7 @@ import {NavRegistry} from './nav-registry';
  * ```html
  * <button [nav-push]="[pushPage, params]"></button>
  * ```
+ * @see {@link /docs/v2/components#navigation Navigation Component Docs}
  */
 @Directive({
   selector: '[nav-push]',

ionic/components/nav/nav.ts

@@ -96,6 +96,7 @@ import {ViewController} from './view-controller';
  *   </pre>
  * </div>
  *
+ * @see {@link /docs/v2/components#navigation Navigation Component Docs}
  */
 @ConfigComponent({
   selector: 'ion-nav',

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 {
 

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 {

ionic/components/radio/radio.ts

@@ -40,6 +40,7 @@ import {ListHeader} from '../list/list';
  *
  * </ion-list>
  * ```
+ * @see {@link /docs/v2/components#radio Radio Component Docs}
 */
 @Directive({
   selector: '[radio-group]',
@@ -162,6 +163,7 @@ export class RadioGroup extends Ion {
  * </ion-radio>
  * ```
  * 
+ * @see {@link /docs/v2/components#radio Radio Component Docs}
  */
 @Component({
   selector: 'ion-radio',

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',

ionic/components/segment/segment.ts

@@ -36,6 +36,8 @@ import {Config} from '../../config/config';
  *   </ion-segment>
  * </form>
  * ```
+ *
+ * @see {@link /docs/v2/components#segment Segment Component Docs}
  */
 @Directive({
   selector: 'ion-segment'

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,42 @@ import {Scroll} from '../scroll/scroll';
  *
  * Licensed under MIT
  *
+ * @usage
+ * ```ts
+ * @Page({
+ *  template: `
+ *         <ion-slides pager (slide-changed)="onSlideChanged($event)" loop="true" autoplay="true">
+ *          <ion-slide>
+ *            <h3>Thank you for choosing the Awesome App!</h3>
+ *            <p>
+ *              The number one app for everything awesome.
+ *            </p>
+ *          </ion-slide>
+ *          <ion-slide>
+ *            <h3>Using Awesome</h3>
+ *             <div id="list">
+ *               <h5>Just three steps:</h5>
+ *               <ol>
+ *                 <li>Be awesome</li>
+ *                 <li>Stay awesome</li>
+ *                 <li>There is no step 3</li>
+ *               </ol>
+ *             </div>
+ *          </ion-slide>
+ *          <ion-slide>
+ *            <h3>Any questions?</h3>
+ *          </ion-slide>
+ *        </ion-slides>
+ *        `
+ *})
+ *
+ *```
+ * @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
+ * @see {@link /docs/v2/components#slides Slides Component Docs}
  */
 @Component({
   selector: 'ion-slides',
@@ -56,7 +94,7 @@ import {Scroll} from '../scroll/scroll';
 export class Slides extends Ion {
 
   /**
-   * TODO
+   * @private
    * @param {ElementRef} elementRef  TODO
    */
   constructor(elementRef: ElementRef, config: Config) {
@@ -67,6 +105,10 @@ export class Slides extends Ion {
 
     this.slideChanged = new EventEmitter('slideChanged');
   }
+
+  /**
+   * @private
+   */
   onInit() {
     if(!this.options) {
       this.options = {};
@@ -133,16 +175,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 +212,9 @@ export class Slides extends Ion {
   }
   */
 
+  /**
+   * @private
+   */
   initZoom() {
     this.zoomDuration = this.zoomDuration || 230;
     this.maxScale = this.zoomMax || 3;
@@ -218,6 +278,9 @@ export class Slides extends Ion {
     });
   }
 
+  /**
+   * @private
+   */
   resetZoom() {
 
     if(this.zoomElement) {
@@ -231,6 +294,9 @@ export class Slides extends Ion {
     this.zoomLastPosY = 0;
   }
 
+  /**
+   * @private
+   */
   toggleZoom(swiper, e) {
     console.log('Try toggle zoom');
     if(!this.enableZoom) { return; }
@@ -305,11 +371,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 +411,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 +463,10 @@ export class Slides extends Ion {
     }
 
   }
+
+  /**
+   * @private
+   */
   onTouchEnd(e) {
     console.log('PANEND', e);
 
@@ -412,6 +495,7 @@ export class Slides extends Ion {
   }
 
   /**
+   * @private
    * Update the underlying slider implementation. Call this if you've added or removed
    * child slides.
    */
@@ -426,32 +510,58 @@ 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',
@@ -475,6 +585,9 @@ export class Slide {
   }
 }
 
+ /**
+  * @private
+  */
 @Directive({
   selector: 'slide-lazy',
 })

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 <label> in order to make the entire toggle easy to tap or drag.
+ * @name Switch
- *
+ * @description
- * Toggles can also have colors assigned to them, by adding the `toggle-assertive` attribute to assign the assertive color.
+ * 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 `<label>` in order to make the entire toggle easy to tap or drag.
+ * Switches can also have colors assigned to them, by adding any color attribute to them.
  *
  * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
  *
@@ -64,6 +65,7 @@ class MediaSwitch {
  *  </ion-list>
  * ```
  *
+ * @see {@link /docs/v2/components#switch Switch Component Docs}
  */
 @Component({
   selector: 'ion-switch',

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',

ionic/components/toolbar/toolbar.ts

@@ -109,6 +109,9 @@ export class Toolbar extends ToolbarBase {
  * </ion-navbar>
  *
  *<!-- or if you wanted to crate a subheader title-->
+ * <ion-navbar *navbar>
+ *    <ion-title>Tab 1</ion-title>
+ * </ion-navbar>
  * <ion-toolbar>
  *   <ion-title>SubHeader</ion-title>
  * </ion-toolbar>

ionic/platform/storage/storage.ts

@@ -7,6 +7,9 @@
  * for temporary data as it may be "cleaned up" by the operation system
  * during low disk space situations.
  */
+/**
+ * @private
+*/
 export class Storage {
   constructor(strategyCls: StorageEngine, options) {
     this._strategy = new strategyCls(options);
@@ -33,6 +36,9 @@ export class Storage {
   }
 }
 
+/**
+ * @private
+*/
 export class StorageEngine {
   get(key, value) {
     throw Error("get() not implemented for this storage engine");

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
   </a>
 
-  <!-- TODO(drewrygh, perrygovier): render this block in the correct location, markup identical to component docs -->
-  <@- if doc.demo and false -@>
-  <aside id="platform-preview" class="platform-preview">
-    <div class="platform-toggle">
-      <a ng-class="{active: iosActive}"
-         ng-click="setPlatform('ios')">iOS</a>
-      <a ng-class="{active: androidActive}"
-         ng-click="setPlatform('android')">Android</a>
-    </div>
-    <div id="demo-device-ios" ng-class="previewPlatform">
-      <iframe id="demo-ios" src="<$ doc.demo $>" frameborder="0"></iframe>
-    </div>
-    <div id="demo-device-android" ng-class="previewPlatform">
-      <iframe id="demo-ios" src="<$ doc.demo $>" frameborder="0"></iframe>
-    </div>
-  </aside>
-  <@ endif @>
-
 </div>
 
 <@ block content @>
@@ -239,7 +223,6 @@ Delegate: <$ doc.delegate $>
 <@- if doc.see @>
 
 <h2>Related</h2>
-
 <@ for s in doc.see @>
 <$ s | safe $>
 <@- endfor -@>
@@ -252,4 +235,3 @@ Delegate: <$ doc.delegate $>
 
 <!-- end body block -->
 <@ endblock @>
-