nativescript-coaches

coach.android.ts

// 

import * as application from 'application'
import { Color } from 'color'
import { ad } from 'utils/utils'
import * as Utils from '../utils/utils'
import { CoachItem, CoachOpts } from './coach'
import { CoachShape, CoachLabelPosition, CoachLabelAlignment } from './coach.common'



export function buildCoaches(items: Array<CoachItem>, opts: CoachOpts = {}): Promise<boolean> {

	return new Promise(function(resolve, reject) {
		let cancelable = (opts.cantSkip == true) ? false : true
		let transparentTarget = true

		/*=====  TEMPORARY  ======*/
		// the latest update as of yesterday they added ability to set these as dynamic colors
		let outerCircleColor = 17170458
		let targetCircleColor = 17170454
		let titleTextColor = 17170443
		let descriptionTextColor = 17170443

		let coaches: native.Array<com.getkeepsafe.taptargetview.TapTarget> = Array.create(com.getkeepsafe.taptargetview.TapTarget, items.length)
		let i: number, len: number = items.length
		for (i = 0; i < len; i++) {
			let item = items[i]
			let target = item.target
			let coach = com.getkeepsafe.taptargetview.TapTarget.forView(target.android, item.title, item.subtitle)
				.outerCircleColor(outerCircleColor)
				.targetCircleColor(targetCircleColor)
				.transparentTarget(transparentTarget)
				.titleTextColor(titleTextColor)
				.descriptionTextColor(descriptionTextColor)
				.cancelable(cancelable)
			coaches[i] = coach
		}

		new com.getkeepsafe.taptargetview.TapTargetSequence(application.android.foregroundActivity)
			.targets(coaches)
			.listener(new com.getkeepsafe.taptargetview.TapTargetSequence.Listener({
				onSequenceCanceled: function(target) {
					resolve(false)
				},
				onSequenceFinish: function() {
					resolve(true)
				},
			}))
			.start()

	})

}

coach.common.ts

// 



export enum CoachShape {
	DEFAULT,
	CIRCLE,
	SQUARE,
}

export enum CoachLabelPosition {
	TOP,
	RIGHT,
	BOTTOM,
	LEFT,
}

export enum CoachLabelAlignment {
	CENTER,
	LEFT,
	RIGHT,
}

coach.ios.ts

// 

import * as application from 'application'
import { Color } from 'color'
import { Page } from 'ui/page'
import { topmost } from 'ui/frame'
import * as Utils from '../utils/utils'
import { CoachItem, CoachOpts } from './coach'
import { CoachShape, CoachLabelPosition, CoachLabelAlignment } from './coach.common'



type MPCoachMarksViewDelegateImplCallback = (skipped: boolean) => void
class MPCoachMarksViewDelegateImpl extends NSObject implements MPCoachMarksViewDelegate {

	public static ObjCProtocols = [MPCoachMarksViewDelegate]
	static new(): MPCoachMarksViewDelegateImpl {
		return <MPCoachMarksViewDelegateImpl>super.new()
	}

	private _callback: MPCoachMarksViewDelegateImplCallback
	public initWithCallback(callback: MPCoachMarksViewDelegateImplCallback): MPCoachMarksViewDelegateImpl {
		this._callback = callback
		return this
	}

	coachMarksViewSkipButtonClicked(coachMarksView: MPCoachMarks) {
		this._callback(false)
	}

	coachMarksViewDidCleanup(coachMarksView: MPCoachMarks) {
		this._callback(true)
	}

}



export function buildCoaches(items: Array<CoachItem>, opts: CoachOpts = {}): Promise<any> {

	return new Promise(function(resolve, reject) {
		let delegate = MPCoachMarksViewDelegateImpl.new().initWithCallback(function(skipped) {
			delegate = null
			resolve(skipped)
		})

		let coaches: Array<any> = []
		let i: number, len: number = items.length
		for (i = 0; i < len; i++) {
			let item = items[i]
			let target = item.target
			let origin = target.getLocationOnScreen()
			let size = target.getActualSize()
			let rect = CGRectMake(origin.x, origin.y, size.width, size.height)
			let caption = item.title

			let shape = MaskShape.DEFAULT
			if (item.shape) {
				let ishape = item.shape
				if (ishape == <number>CoachShape.CIRCLE) {
					shape = MaskShape.SHAPE_CIRCLE
				} else if (ishape == <number>CoachShape.SQUARE) {
					shape = MaskShape.SHAPE_SQUARE
				}
			}

			let position = LabelPosition.LABEL_POSITION_BOTTOM
			if (item.position) {
				let iposition = item.position
				if (iposition == <number>CoachLabelPosition.TOP) {
					position = LabelPosition.LABEL_POSITION_TOP
				} else if (iposition == <number>CoachLabelPosition.RIGHT) {
					position = LabelPosition.LABEL_POSITION_RIGHT
				} else if (iposition == <number>CoachLabelPosition.LEFT) {
					position = LabelPosition.LABEL_POSITION_LEFT
				}
			}

			let align = LabelAligment.LABEL_ALIGNMENT_CENTER
			if (item.align) {
				let ialign = item.align
				if (ialign == <number>CoachLabelAlignment.LEFT) {
					align = LabelAligment.LABEL_ALIGNMENT_LEFT
				} else if (ialign == <number>CoachLabelAlignment.RIGHT) {
					align = LabelAligment.LABEL_ALIGNMENT_RIGHT
				}
			}

			coaches.push({
				rect: NSValue.valueWithCGRect(rect),
				caption: item.title,
				shape: NSNumber.numberWithInteger(shape),
				position: NSNumber.numberWithInteger(position),
				alignment: NSNumber.numberWithInteger(align),
			})
		}

		let root: UINavigationController = topmost().ios.controller
		let marks = MPCoachMarks.alloc().initWithFrameCoachMarks(root.view.bounds, <any>coaches)
		marks.delegate = delegate
		marks.enableSkipButton = (opts.cantSkip == true) ? false : true
		marks.continueLabelText = 'TAP anywhere to continue'
		root.view.addSubview(marks)
		marks.start()
	})

}

coach.ts

// 

import { View } from 'ui/core/view'
import { CoachShape, CoachLabelPosition, CoachLabelAlignment } from './coach.common'



export declare interface CoachItem {
	title: string
	subtitle: string
	target: View
	shape?: CoachShape
	position?: CoachLabelPosition
	align?: CoachLabelAlignment
}

export declare interface CoachOpts {
	cantSkip?: boolean
}

export declare function buildCoaches(coaches: Array<CoachItem>, opts?: CoachOpts): Promise<boolean>;