@nstudio/nativescript-coachmarks
Version:
Display user coach marks with a couple of shape cutouts over an existing UI for NativeScript.
226 lines • 9.1 kB
JavaScript
import { Observable, ApplicationSettings, Utils } from '@nativescript/core';
export class CoachMark {
constructor(model) {
if (model) {
for (let key in model) {
this[key] = model[key];
}
}
}
}
CoachMark.SHAPES = {
DEFAULT: 0 /* MaskShape.DEFAULT */,
CIRCLE: 1 /* MaskShape.SHAPE_CIRCLE */,
SQUARE: 2 /* MaskShape.SHAPE_SQUARE */,
};
CoachMark.LABEL_POSITIONS = {
BOTTOM: 0 /* LabelPosition.ABEL_POSITION_BOTTOM */,
LEFT: 1 /* LabelPosition.ABEL_POSITION_LEFT */,
TOP: 2 /* LabelPosition.ABEL_POSITION_TOP */,
RIGHT: 3 /* LabelPosition.ABEL_POSITION_RIGHT */,
RIGHT_BOTTOM: 4 /* LabelPosition.ABEL_POSITION_RIGHT_BOTTOM */,
};
CoachMark.LABEL_ALIGNMENTS = {
CENTER: 0 /* LabelAligment.ABEL_ALIGNMENT_CENTER */,
LEFT: 1 /* LabelAligment.ABEL_ALIGNMENT_LEFT */,
RIGHT: 2 /* LabelAligment.ABEL_ALIGNMENT_RIGHT */,
};
export class CoachMarks {
static start(marks, options, instance) {
if (CoachMarks.DEBUG)
console.log('CoachMarks start...');
// Setup coach marks
let coachMarks = [];
for (let mark of marks) {
if (CoachMarks.DEBUG)
console.log(`Setting up mark --`);
let markObj = {
rect: NSValue.valueWithCGRect(mark.position),
caption: mark.caption,
};
if (mark.shape)
markObj.shape = NSNumber.numberWithInt(mark.shape);
if (mark.labelPosition)
markObj.position = NSNumber.numberWithInt(mark.labelPosition);
if (mark.labelAlignment)
markObj.alignment = NSNumber.numberWithInt(mark.labelAlignment);
if (mark.showArrow)
markObj.showArrow = NSNumber.numberWithBool(mark.showArrow);
if (mark.closeOnCutOutTap)
markObj.closeOnCutOutTap = NSNumber.numberWithBool(mark.closeOnCutOutTap);
let markDictionary = NSDictionary.dictionaryWithDictionary(markObj);
if (CoachMarks.DEBUG)
console.log(`Adding mark with caption: ${markObj.caption}`);
coachMarks.push(markDictionary);
}
if (CoachMarks.DEBUG) {
console.log(`Total marks: ${coachMarks.length}`);
}
const rootVc = Utils.ios.getRootViewController();
const mpCoachMarks = MPCoachMarks.alloc().initWithFrameCoachMarks(rootVc.view.frame, coachMarks);
rootVc.view.addSubview(mpCoachMarks);
// options
if (options) {
if (typeof options.enableContinueLabel !== 'undefined')
mpCoachMarks.enableContinueLabel = options.enableContinueLabel;
if (typeof options.enableSkipButton !== 'undefined')
mpCoachMarks.enableSkipButton = options.enableSkipButton;
if (typeof options.continueLabelText !== 'undefined')
mpCoachMarks.continueLabelText = options.continueLabelText;
if (typeof options.skipButtonText !== 'undefined')
mpCoachMarks.skipButtonText = options.skipButtonText;
if (typeof options.animationDuration !== 'undefined')
mpCoachMarks.animationDuration = options.animationDuration;
if (typeof options.continueLocation !== 'undefined')
mpCoachMarks.continueLocation = options.continueLocation;
if (typeof options.lblSpacing !== 'undefined')
mpCoachMarks.lblSpacing = options.lblSpacing;
if (typeof options.cutoutRadius !== 'undefined')
mpCoachMarks.cutoutRadius = options.cutoutRadius;
if (typeof options.maskColor !== 'undefined')
mpCoachMarks.maskColor = options.maskColor;
if (typeof options.maxLblWidth !== 'undefined')
mpCoachMarks.maxLblWidth = options.maxLblWidth;
if (options.persist)
CoachMarks.PERSIST();
}
if (instance) {
CoachMarks.delegate = CoachMarksDelegateImpl.initWithOwner(new WeakRef(instance));
mpCoachMarks.delegate = CoachMarks.delegate;
}
mpCoachMarks.start();
}
static HAS_SHOWN() {
return ApplicationSettings.getBoolean(CoachMarks.APP_SETTINGS_KEY, false);
}
static PERSIST() {
if (!CoachMarks.HAS_SHOWN()) {
// Don't show again
ApplicationSettings.setBoolean(CoachMarks.APP_SETTINGS_KEY, true);
}
}
static RESET() {
ApplicationSettings.setBoolean(CoachMarks.APP_SETTINGS_KEY, false);
}
initEvents() {
this.events = new Observable();
this.willNavigateEvent = {
eventName: 'willNavigate',
object: this,
data: {},
};
this.navigateEvent = {
eventName: 'navigate',
object: this,
data: {},
};
this.clickEvent = {
eventName: 'click',
object: this,
data: {},
};
this.skipEvent = {
eventName: 'skip',
object: this,
data: {},
};
this.cleanupEvent = {
eventName: 'cleanup',
object: this,
data: {},
};
this.willCleanupEvent = {
eventName: 'willCleanup',
object: this,
data: {},
};
}
}
CoachMarks.APP_SETTINGS_KEY = 'CoachMarks';
CoachMarks.DEBUG = false;
CoachMarks.CONTINUE_LOCATIONS = {
TOP: 0 /* ContinueLocation.LOCATION_TOP */,
CENTER: 1 /* ContinueLocation.LOCATION_CENTER */,
BOTTOM: 2 /* ContinueLocation.LOCATION_BOTTOM */,
};
var CoachMarksDelegateImpl = /** @class */ (function (_super) {
__extends(CoachMarksDelegateImpl, _super);
function CoachMarksDelegateImpl() {
return _super !== null && _super.apply(this, arguments) || this;
}
CoachMarksDelegateImpl.initWithOwner = function (owner) {
var delegate = CoachMarksDelegateImpl.new();
delegate.owner = owner;
return delegate;
};
CoachMarksDelegateImpl.prototype.coachMarksViewDidCleanup = function (coachMarksView) {
if (CoachMarks.DEBUG) {
console.log('coachMarks did cleanup, clear your instances if you have any');
}
var owner = this.owner.deref();
if (owner === null || owner === void 0 ? void 0 : owner.events) {
owner.events.notify(owner.cleanupEvent);
}
CoachMarks.delegate = null;
};
CoachMarksDelegateImpl.prototype.coachMarksViewDidClickedAtIndex = function (coachMarksView, index) {
if (CoachMarks.DEBUG) {
console.log("coachmarks did click item at step index: ".concat(index));
}
var owner = this.owner.deref();
if (owner === null || owner === void 0 ? void 0 : owner.events) {
owner.clickEvent.data = {
instance: coachMarksView,
index: index,
};
owner.events.notify(owner.clickEvent);
}
};
CoachMarksDelegateImpl.prototype.coachMarksViewDidNavigateToIndex = function (coachMarksView, index) {
if (CoachMarks.DEBUG) {
console.log("navigated to index: ".concat(index));
}
var owner = this.owner.deref();
if (owner === null || owner === void 0 ? void 0 : owner.events) {
owner.navigateEvent.data = {
instance: coachMarksView,
index: index,
};
owner.events.notify(owner.navigateEvent);
}
};
CoachMarksDelegateImpl.prototype.coachMarksViewSkipButtonClicked = function (coachMarksView) {
if (CoachMarks.DEBUG) {
console.log('coachMarks skip button clicked.');
}
var owner = this.owner.deref();
if (owner === null || owner === void 0 ? void 0 : owner.events) {
owner.events.notify(owner.skipEvent);
}
};
CoachMarksDelegateImpl.prototype.coachMarksViewWillCleanup = function (coachMarksView) {
if (CoachMarks.DEBUG) {
console.log('coachMarks is about to cleanup, prepare any final adjustments if needed.');
}
var owner = this.owner.deref();
if (owner === null || owner === void 0 ? void 0 : owner.events) {
owner.events.notify(owner.willCleanupEvent);
}
};
CoachMarksDelegateImpl.prototype.coachMarksViewWillNavigateToIndex = function (coachMarksView, index) {
if (CoachMarks.DEBUG) {
console.log("will navigate to index: ".concat(index));
}
var owner = this.owner.deref();
if (owner === null || owner === void 0 ? void 0 : owner.events) {
owner.willNavigateEvent.data = {
instance: coachMarksView,
index: index,
};
owner.events.notify(owner.willNavigateEvent);
}
};
CoachMarksDelegateImpl.ObjCProtocols = [MPCoachMarksViewDelegate];
return CoachMarksDelegateImpl;
}(NSObject));
//# sourceMappingURL=index.ios.js.map