nativescript-carousel-without-page-indicators
Version:
Carousel component for NativeScript (iOS & Android).
341 lines • 14.4 kB
JavaScript
import { parse } from '@nativescript/core/ui/builder';
import { GridLayout, View } from '@nativescript/core';
import { isNullOrUndefined, isNumber } from '@nativescript/core/utils/types';
import { layout } from '@nativescript/core/utils';
import { CarouselCommon, CarouselUtil, indicatorAnimationDurationProperty, indicatorAnimationProperty, indicatorColorProperty, indicatorColorUnselectedProperty, indicatorPaddingProperty, indicatorRadiusProperty, Log, selectedPageProperty } from './carousel.common';
const VIEWS_STATES = '_viewStates';
const PagerNamespace = androidx.viewpager.widget;
const POSITION_UNCHANGED = -1;
const POSITION_NONE = -2;
export * from './carousel.common';
export class Carousel extends CarouselCommon {
constructor() {
super();
this._androidViewId = -1;
this._indicatorViewId = -1;
CarouselUtil.debug = this.debug;
Log.D('Carousel constructor');
this.CarouselPagerAdapterClass = new CarouselPagerAdapterClassInner(new WeakRef(this));
this.CarouselPageChangedListenerClass = new CarouselPageChangedListener(new WeakRef(this));
Log.D(`this.CarouselPagerAdapterClass = ${this.CarouselPagerAdapterClass}`, `this.CarouselPageChangedListenerClass = ${this.CarouselPageChangedListenerClass}`);
}
get android() {
return this.nativeView;
}
get adapter() {
return this.android.getAdapter();
}
set pageIndicatorCount(value) {
if (value) {
this.adapter.notifyDataSetChanged();
this._pageIndicatorView.setCount(value);
}
}
[indicatorColorProperty.setNative](value) {
Log.D(`indicatorColorProperty.setNative value = ${value}`);
if (!value) {
return;
}
this._pageIndicatorView.setSelectedColor(value.android);
}
[indicatorColorUnselectedProperty.setNative](value) {
Log.D(`indicatorColorUnselectedProperty.setNative value = ${value}`);
if (!value) {
return;
}
this._pageIndicatorView.setUnselectedColor(value.android);
}
[selectedPageProperty.setNative](value) {
Log.D(`selectedPageProperty.setNative value = ${value}`);
this.selectedPage = value;
this.nativeView.setCurrentItem(value);
}
[indicatorAnimationProperty.setNative](value) {
Log.D(`indicatorAnimationProperty.setNative value = ${value}`);
if (!value) {
return;
}
let animationType = com.rd.animation.type.AnimationType.NONE;
switch (value.toUpperCase()) {
case 'NONE':
animationType = com.rd.animation.type.AnimationType.NONE;
break;
case 'COLOR':
animationType = com.rd.animation.type.AnimationType.COLOR;
break;
case 'SLIDE':
animationType = com.rd.animation.type.AnimationType.SLIDE;
break;
case 'WORM':
animationType = com.rd.animation.type.AnimationType.WORM;
break;
case 'SCALE':
animationType = com.rd.animation.type.AnimationType.SCALE;
break;
case 'FILL':
animationType = com.rd.animation.type.AnimationType.FILL;
break;
case 'THIN_WORM':
animationType = com.rd.animation.type.AnimationType.THIN_WORM;
break;
case 'DROP':
animationType = com.rd.animation.type.AnimationType.DROP;
break;
case 'SWAP':
animationType = com.rd.animation.type.AnimationType.SWAP;
break;
default:
animationType = com.rd.animation.type.AnimationType.NONE;
break;
}
if (this._pageIndicatorView) {
this._pageIndicatorView.setAnimationType(animationType);
}
}
[indicatorAnimationDurationProperty.setNative](value) {
Log.D(`indicatorAnimationDurationProperty.setNative value = ${value}`);
if (!value) {
return;
}
if (this._pageIndicatorView) {
this._pageIndicatorView.setAnimationDuration(value);
}
}
[indicatorRadiusProperty.setNative](value) {
Log.D(`indicatorRadiusProperty.setNative value = ${value}`);
if (!value) {
return;
}
if (this._pageIndicatorView) {
this._pageIndicatorView.setRadius(value);
}
}
[indicatorPaddingProperty.setNative](value) {
Log.D(`indicatorPaddingProperty.setNative value = ${value}`);
if (!value) {
return;
}
if (this._pageIndicatorView) {
this._pageIndicatorView.setPadding(value);
}
}
createNativeView() {
Log.D(`createNativeView`);
if (this._androidViewId < 0) {
this._androidViewId = android.view.View.generateViewId();
}
if (this._indicatorViewId < 0) {
this._indicatorViewId = android.view.View.generateViewId();
}
this.nativeView = new PagerNamespace.ViewPager(this._context);
this.nativeView.setId(this._androidViewId);
Log.D(`this.nativeView = ${this.nativeView}`);
this._pageIndicatorView = new com.rd.PageIndicatorView(this._context);
this._pageIndicatorView.setId(this._indicatorViewId);
this._pagerIndicatorLayoutParams = new org.nativescript.widgets.CommonLayoutParams();
this.nativeView.setAdapter(this.CarouselPagerAdapterClass);
this.nativeView.setOnPageChangeListener(this.CarouselPageChangedListenerClass);
return this.nativeView;
}
onLoaded() {
super.onLoaded();
Log.D(`onLoaded`);
if (this.showIndicator !== false) {
this._pagerIndicatorLayoutParams.height = -2;
this._pagerIndicatorLayoutParams.width = -1;
const ar = this.indicatorOffset.split(',');
const x = ar[0] ? Number(ar[0]) : 0;
const y = ar[1] ? Number(ar[1]) : 0;
const defaultVerticalMargin = 25;
const verticalOffset = layout.toDevicePixels(defaultVerticalMargin + (y < 0 ? Math.abs(y) : -Math.abs(y)));
const horizontalOffset = layout.toDevicePixels(x);
if (this.indicatorAlignment === 'TOP') {
this._pagerIndicatorLayoutParams.setMargins(horizontalOffset, verticalOffset, 0, 0);
this._pagerIndicatorLayoutParams.gravity = android.view.Gravity.TOP | android.view.Gravity.CENTER;
}
else {
this._pagerIndicatorLayoutParams.setMargins(horizontalOffset, 0, 0, verticalOffset);
this._pagerIndicatorLayoutParams.gravity = android.view.Gravity.BOTTOM | android.view.Gravity.CENTER;
}
if (this._pageIndicatorView.getParent()) {
this.parent.android.removeView(this._pageIndicatorView);
}
if (this.parent instanceof GridLayout) {
this.parent.android.addView(this._pageIndicatorView, this._pagerIndicatorLayoutParams);
}
else {
this.parent.android.addView(this._pageIndicatorView);
}
this._pageIndicatorView.setViewPager(this.nativeView);
this._pageIndicatorView.setCount(this._childrenCount);
this._pageIndicatorView.setSelection(this.selectedPage);
}
}
initNativeView() {
Log.D(`initNativeView`);
this.refresh();
}
getItemCount() {
let itemCount;
if (!isNullOrUndefined(this.items) && isNumber(this.items.length)) {
itemCount = this.items.length;
}
else {
itemCount = this.getChildrenCount();
}
return itemCount;
}
refresh() {
Log.D(`refresh()`);
if (!this.nativeView) {
return;
}
let itemsCount = this.getItemCount();
Log.D(`Items count: `, itemsCount);
if (isNullOrUndefined(itemsCount)) {
return;
}
if (!isNullOrUndefined(this.itemTemplate)) {
Log.D(`Using template mode`);
this.removeChildren();
for (let i = 0; i < itemsCount; i++) {
const viewToAdd = !isNullOrUndefined(this.itemTemplate) ? parse(this.itemTemplate, this) : this._getDefaultItemContent(i);
const dataItem = this._getDataItem(i);
viewToAdd.bindingContext = dataItem;
this.addChild(viewToAdd);
}
}
if (this.adapter) {
Log.D(`notifyDataSetChanged`);
this.adapter.notifyDataSetChanged();
this.nativeView.setCurrentItem(this.selectedPage);
this._pageIndicatorView.setCount(itemsCount);
this._pageIndicatorView.setSelection(this.selectedPage);
}
if (isNullOrUndefined(this.itemTemplate)) {
Log.D(`setOffscreenPageLimit`);
this.nativeView.setOffscreenPageLimit(itemsCount);
}
}
onLayout(left, top, right, bottom) {
View.layoutChild(this, this, 0, 0, right - left, bottom - top);
}
_getDataItem(index) {
return this.items.getItem ? this.items.getItem(index) : this.items[index];
}
onItemsChanged(data) {
Log.D(`_onItemsChanged()`, data);
this.refresh();
}
}
var CarouselPagerAdapterClassInner = /** @class */ (function (_super) {
__extends(CarouselPagerAdapterClassInner, _super);
function CarouselPagerAdapterClassInner(owner) {
var _this = _super.call(this) || this;
_this.owner = owner;
return global.__native(_this);
}
CarouselPagerAdapterClassInner.prototype.getCount = function () {
return this.owner.get().getItemCount();
};
CarouselPagerAdapterClassInner.prototype.getItemPosition = function (item) {
return POSITION_NONE;
};
CarouselPagerAdapterClassInner.prototype.isViewFromObject = function (view, _object) {
return view === _object;
};
CarouselPagerAdapterClassInner.prototype.instantiateItem = function (container, index) {
Log.D("-------> CarouselPagerAdapter instantiateItem()", index);
Log.D("-------> PagerAdapter: Collection count: ", container.getChildCount());
Log.D("-------> PagerAdapter: Carousel count: ", this.owner.get().getChildrenCount());
Log.D("-------> PagerAdapter: Items count: ", this.getCount());
var item = this.owner.get().getChildAt(index);
if (isNullOrUndefined(item)) {
Log.D("-------> PagerAdapter: Could not find Carousel(Grid) child item at index: ", index);
return null;
}
if (item.parent !== this.owner.get()) {
this.owner.get().addChild(item);
}
else {
item.parent.android.removeView(item.android);
}
if (this[VIEWS_STATES]) {
item.nativeView.restoreHierarchyState(this[VIEWS_STATES]);
}
container.addView(item.nativeView, 0, android.view.ViewGroup.LayoutParams.MATCH_PARENT);
return item.nativeView;
};
CarouselPagerAdapterClassInner.prototype.destroyItem = function (container, index, object) {
Log.D("PagerAdapter destroyItem()", index);
container.removeView(object);
};
CarouselPagerAdapterClassInner.prototype.saveState = function () {
Log.D("CarouselPagerAdapterClassInner saveState()");
if (!this[VIEWS_STATES]) {
this[VIEWS_STATES] = new android.util.SparseArray();
}
var mViewStates = this[VIEWS_STATES];
var mViewPager = this.owner.get().android;
var count = mViewPager.getChildCount();
for (var i = 0; i < count; i++) {
var c = mViewPager.getChildAt(i);
if (c.isSaveFromParentEnabled()) {
c.saveHierarchyState(mViewStates);
}
}
var bundle = new android.os.Bundle();
bundle.putSparseParcelableArray(VIEWS_STATES, mViewStates);
return bundle;
};
CarouselPagerAdapterClassInner.prototype.restoreState = function (state, loader) {
Log.D("CarouselPagerAdapterClassInner restoreState()", state, loader);
var bundle = state;
bundle.setClassLoader(loader);
this[VIEWS_STATES] = bundle.getSparseParcelableArray(VIEWS_STATES);
};
return CarouselPagerAdapterClassInner;
}(PagerNamespace.PagerAdapter));
var CarouselPageChangedListener = /** @class */ (function (_super) {
__extends(CarouselPageChangedListener, _super);
function CarouselPageChangedListener(owner) {
var _this = _super.call(this) || this;
_this.owner = owner;
return global.__native(_this);
}
CarouselPageChangedListener.prototype.onPageSelected = function (position) {
Log.D("CarouselPageChangedListener onPageSelected()", position);
this.owner.get().notify({
eventName: CarouselCommon.pageChangedEvent,
object: this.owner.get(),
index: position
});
this.owner.get().selectedPage = position;
};
CarouselPageChangedListener.prototype.onPageScrollStateChanged = function (state) {
//Log.D(`CarouselPageChangedListener onPageScrollStateChanged()`);
this.owner.get().notify({
eventName: CarouselCommon.pageScrollStateChangedEvent,
object: this.owner.get(),
state: state
});
};
CarouselPageChangedListener.prototype.onPageScrolled = function (position, positionOffset, positionOffsetPixels) {
//Log.D(`CarouselPageChangedListener onPageScrolled()`, position, positionOffset, positionOffsetPixels);
var data = {
eventName: CarouselCommon.pageScrollingEvent,
object: this.owner.get(),
state: {
offset: positionOffset,
android: {
position: position,
positionOffset: positionOffset,
positionOffsetPixels: positionOffsetPixels
}
}
};
this.owner.get().notify(data);
};
return CarouselPageChangedListener;
}(PagerNamespace.ViewPager.SimpleOnPageChangeListener));
//# sourceMappingURL=carousel.android.js.map