Merge pull request #350 from yagajs/tooltip-inline-doc

Write inline documentation for the tooltip directive

ts/tooltip.directive.ts

@@ -20,18 +20,95 @@ import {
 } from 'leaflet';
 import { LayerProvider } from './layer.provider';
 
+/**
+ * Angular2 directive for Leaflet tooltips.
+ *
+ * *You can use this directive in an Angular2 template after importing `YagaModule`.*
+ *
+ * How to use in a template:
+ * ```html
+ * <yaga-map>
+ *     <yaga-marker>
+ *         <yaga-tooltip
+ *             [(content)]="..."
+ *             [(opened)]="..."
+ *             [(lat)]="..."
+ *             [(lng)]="..."
+ *             [(position)]="..."
+ *             [(opacity)]="..."
+ *
+ *             (open)="..."
+ *             (close)="..."
+ *
+ *             [className]="..."
+ *             [pane]="..."
+ *             [interactive]="..."
+ *             [sticky]="..."
+ *             [direction]="..."
+ *             [permanent]="..."
+ *             [offset]="..."
+ *             >
+ *             <p>You can pass your content right here!</p>
+ *         </yaga-tooltip>
+ *     </yaga-marker>
+ * </yaga-map>
+ */
 @Directive({
     selector: 'yaga-tooltip',
 })
 export class TooltipDirective extends Tooltip implements OnDestroy {
+    /**
+     * Two-Way bound property for the content of a tooltip.
+     * Use it with `<yaga-tooltip [(content)]="someValue">` or `<yaga-tooltip (contentChange)="processEvent($event)">`
+     *
+     * You can also pass the content directly within the web-component as view-content
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-setcontent Original Leaflet documentation
+     */
     @Output() public contentChange: EventEmitter<Content> = new EventEmitter();
+    /**
+     * Two-Way bound property for the state of being opened.
+     * Use it with `<yaga-tooltip [(opened)]="someValue">` or `<yaga-tooltip (openedChange)="processEvent($event)">`
+     *
+     * You can also use the `tooltipOpened` property in the parent directives
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-openon Original Leaflet documentation
+     */
     @Output() public openedChange: EventEmitter<boolean> = new EventEmitter();
+    /**
+     * Two-Way bound property for the latitude position of the tooltip.
+     * Use it with `<yaga-tooltip [(lat)]="someValue">` or `<yaga-tooltip (latChange)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-setlatlng Original Leaflet documentation
+     */
     @Output() public latChange: EventEmitter<number> = new EventEmitter();
+    /**
+     * Two-Way bound property for the longitude position of the tooltip.
+     * Use it with `<yaga-tooltip [(lng)]="someValue">` or `<yaga-tooltip (lngChange)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-setlatlng Original Leaflet documentation
+     */
     @Output() public lngChange: EventEmitter<number> = new EventEmitter();
+    /**
+     * Two-Way bound property for the position (LatLng) of the tooltip.
+     * Use it with `<yaga-tooltip [(position)]="someValue">` or `<yaga-tooltip (positionChange)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-setlatlng Original Leaflet documentation
+     */
     @Output() public positionChange: EventEmitter<LatLng> = new EventEmitter();
+    /**
+     * Two-Way bound property for the opacity of the tooltip.
+     * Use it with `<yaga-tooltip [(opacity)]="someValue">` or `<yaga-tooltip (opacityChange)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-setlatlng Original Leaflet documentation
+     */
     @Output() public opacityChange: EventEmitter<number> = new EventEmitter();
 
+    /**
+     * From leaflet fired open event.
+     * Use it with `<yaga-tooltip (open)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-tooltipopen Original Leaflet documentation
+     */
     @Output('open') public openEvent: EventEmitter<LeafletEvent> = new EventEmitter();
+    /**
+     * From leaflet fired close event.
+     * Use it with `<yaga-tooltip (close)="processEvent($event)">`
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-tooltipclose Original Leaflet documentation
+     */
     @Output('close') public closeEvent: EventEmitter<LeafletEvent> = new EventEmitter();
 
     constructor(
@@ -52,23 +129,41 @@ export class TooltipDirective extends Tooltip implements OnDestroy {
         this.layerProvider.ref.bindTooltip(this);
     }
 
+    /**
+     * This function gets called from Angular on destroy of the html-component.
+     * @link https://angular.io/docs/ts/latest/api/core/index/OnDestroy-class.html
+     */
     public ngOnDestroy(): void {
         if ((this as any)._source) {
             (this as any)._source.unbindTooltip();
         }
     }
 
+    /**
+     * Derived method of the original setContent method.
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-setcontent Original Leaflet documentation
+     */
     public setContent(content: any): this { // Content
         this.contentChange.emit((content));
         return super.setContent((content as HTMLElement));
     }
+    /**
+     * Two-Way bound property for the content.
+     * Use it with `<yaga-tooltip [(content)]="someValue">` or `<yaga-tooltip [content]="someValue">`
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-setcontent Original Leaflet documentation
+     */
     @Input() public set content(val: Content) {
         this.setContent(val);
     }
     public get content(): Content {
         return this.getContent();
     }
 
+    /**
+     * Two-Way bound property for the opened state.
+     * Use it with `<yaga-tooltip [(opened)]="someValue">` or `<yaga-tooltip [opened]="someValue">`
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-openon Original Leaflet documentation
+     */
     @Input() public set opened(val: boolean) {
         if (val) {
             this.layerProvider.ref.openTooltip();
@@ -80,52 +175,90 @@ export class TooltipDirective extends Tooltip implements OnDestroy {
         return !!(this as any)._map;
     }
 
+    /**
+     * Derived method of the original setLatLng method.
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-setlatlng Original Leaflet documentation
+     */
     public setLatLng(latlng: LatLngExpression): this {
         super.setLatLng(latlng);
         this.latChange.emit(this.lat);
         this.lngChange.emit(this.lng);
         this.positionChange.emit(latLng(this.lat, this.lng));
         return this;
     }
+    /**
+     * Two-Way bound property for the latitude position of the tooltip.
+     * Use it with `<yaga-tooltip [(lat)]="someValue">` or `<yaga-tooltip [lat]="someValue">`
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-setlatlng Original Leaflet documentation
+     */
     @Input() public set lat(val: number) {
         this.setLatLng([val, this.lng]);
     }
     public get lat(): number {
         return this.getLatLng().lat;
     }
 
+    /**
+     * Two-Way bound property for the longitude position of the tooltip.
+     * Use it with `<yaga-tooltip [(lng)]="someValue">` or `<yaga-tooltip [lng]="someValue">`
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-setlatlng Original Leaflet documentation
+     */
     @Input() public set lng(val: number) {
         this.setLatLng([this.lat, val]);
     }
     public get lng(): number {
         return this.getLatLng().lng;
     }
 
+    /**
+     * Two-Way bound property for the position of the tooltip.
+     * Use it with `<yaga-tooltip [(position)]="someValue">` or `<yaga-tooltip [position]="someValue">`
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-setlatlng Original Leaflet documentation
+     */
     @Input() public set position(val: LatLng) {
         this.setLatLng(val);
     }
     public get position(): LatLng {
         return this.getLatLng();
     }
 
+    /**
+     * Derived method of the original setContent method.
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-setcontent Original Leaflet documentation
+     */
     public setOpacity(val: number): void {
         super.setOpacity(val);
         this.opacityChange.emit(val);
     }
+    /**
+     * Two-Way bound property for the opacity of the tooltip.
+     * Use it with `<yaga-tooltip [(opacity)]="someValue">` or `<yaga-tooltip [opacity]="someValue">`
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-opacity Original Leaflet documentation
+     */
     @Input() public set opacity(val: number) {
         this.setOpacity(val);
     }
     public get opacity(): number {
         return this.options.opacity;
     }
 
+    /**
+     * Input for the CSS class name.
+     * Use it with `<yaga-tooltip [autoClose]="className">`
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-classname Original Leaflet documentation
+     */
     @Input() public set className(val: string) {
         this.options.className = val;
         (this as any)._updateLayout();
     }
     public get className(): string {
         return this.options.className;
     }
+    /**
+     * Input for the pane.
+     * Use it with `<yaga-tooltip [pane]="someValue">`
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-pane Original Leaflet documentation
+     */
     @Input() public set pane(val: string) {
         this.options.pane = val;
         (this as any)._updateLayout();
@@ -134,6 +267,11 @@ export class TooltipDirective extends Tooltip implements OnDestroy {
         return this.options.pane;
     }
 
+    /**
+     * Input for the interactive state.
+     * Use it with `<yaga-tooltip [interactive]="someValue">`
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-interactive Original Leaflet documentation
+     */
     @Input() public set interactive(val: boolean) {
         this.options.interactive = val;
         (this as any)._updateLayout();
@@ -142,27 +280,47 @@ export class TooltipDirective extends Tooltip implements OnDestroy {
         return this.options.interactive;
     }
 
+    /**
+     * Input for the sticky.
+     * Use it with `<yaga-tooltip [sticky]="someValue">`
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-sticky Original Leaflet documentation
+     */
     @Input() public set sticky(val: boolean) {
         this.options.sticky = val;
     }
     public get sticky(): boolean {
         return this.options.sticky;
     }
 
+    /**
+     * Input for the direction.
+     * Use it with `<yaga-tooltip [direction]="someValue">`
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-direction Original Leaflet documentation
+     */
     @Input() public set direction(val: Direction) {
         this.options.direction = val;
     }
     public get direction(): Direction {
         return this.options.direction;
     }
 
+    /**
+     * Input for the permanent state.
+     * Use it with `<yaga-tooltip [permanent]="someValue">`
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-permanent Original Leaflet documentation
+     */
     @Input() public set permanent(val: boolean) {
         this.options.permanent = val;
     }
     public get permanent(): boolean {
         return this.options.permanent;
     }
 
+    /**
+     * Input for the offset.
+     * Use it with `<yaga-tooltip [offset]="someValue">`
+     * @link http://leafletjs.com/reference-1.2.0.html#tooltip-offset Original Leaflet documentation
+     */
     @Input() public set offset(val: Point) {
         this.options.offset = val;
     }