@triniwiz/nativescript-pager/common.js

A Carousel/Pager plugin for NativeScript

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.autoplayDelayProperty = exports.autoPlayProperty = exports.showIndicatorProperty = exports.transformersProperty = exports.perPageProperty = exports.disableSwipeProperty = exports.orientationProperty = exports.canGoLeftProperty = exports.canGoRightProperty = exports.itemTemplatesProperty = exports.itemTemplateProperty = exports.itemsProperty = exports.peakingProperty = exports.spacingProperty = exports.selectedIndexProperty = exports.indicatorProperty = exports.circularModeProperty = exports.indicatorSelectedColorProperty = exports.indicatorColorProperty = exports.PagerItem = exports.PagerBase = exports.Indicator = exports.Transformer = exports.PagerError = exports.PagerLog = exports.pagerTraceCategory = exports.knownCollections = exports.knownMultiTemplates = exports.knownTemplates = exports.LOADMOREITEMS = exports.ITEMDISPOSING = exports.ITEMLOADING = void 0;
const core_1 = require("@nativescript/core");
exports.ITEMLOADING = "itemLoading";
exports.ITEMDISPOSING = "itemDisposing";
exports.LOADMOREITEMS = "loadMoreItems";
var knownTemplates;
(function (knownTemplates) {
    knownTemplates.itemTemplate = "itemTemplate";
})(knownTemplates = exports.knownTemplates || (exports.knownTemplates = {}));
var knownMultiTemplates;
(function (knownMultiTemplates) {
    knownMultiTemplates.itemTemplates = "itemTemplates";
})(knownMultiTemplates = exports.knownMultiTemplates || (exports.knownMultiTemplates = {}));
var knownCollections;
(function (knownCollections) {
    knownCollections.items = "items";
})(knownCollections = exports.knownCollections || (exports.knownCollections = {}));
exports.pagerTraceCategory = "ns-pager";
function PagerLog(message) {
    core_1.Trace.write(message, exports.pagerTraceCategory);
}
exports.PagerLog = PagerLog;
function PagerError(message) {
    core_1.Trace.write(message, exports.pagerTraceCategory, core_1.Trace.messageType.error);
}
exports.PagerError = PagerError;
const autoEffectiveItemHeight = 100;
const autoEffectiveItemWidth = 100;
var Transformer;
(function (Transformer) {
    Transformer["SCALE"] = "scale";
})(Transformer = exports.Transformer || (exports.Transformer = {}));
var Indicator;
(function (Indicator) {
    Indicator["Disabled"] = "disable";
    Indicator["None"] = "none";
    Indicator["Worm"] = "worm";
    Indicator["Fill"] = "fill";
    Indicator["Swap"] = "swap";
    Indicator["THIN_WORM"] = "thin_worm";
    Indicator["Flat"] = "flat";
})(Indicator = exports.Indicator || (exports.Indicator = {}));
const booleanConverter = (v) => {
    return String(v) === "true";
};
let PagerBase = class PagerBase extends core_1.ContainerView {
    constructor() {
        super(...arguments);
        this.canGoRight = true;
        this.canGoLeft = true;
        this._innerWidth = 0;
        this._innerHeight = 0;
        this.loadMoreCount = 1;
        this.disableSwipe = false;
        this._itemTemplateSelectorBindable = new core_1.Label();
        this._defaultTemplate = {
            key: "default",
            createView: () => {
                if (this.itemTemplate) {
                    return core_1.Builder.parse(this.itemTemplate, this);
                }
                return undefined;
            },
        };
        this._itemTemplatesInternal = new Array(this._defaultTemplate);
        this._itemIdGenerator = (_item, index) => index;
    }
    getChildView(index) {
        return this._childrenViews && this._childrenViews.get(index);
    }
    get itemIdGenerator() {
        return this._itemIdGenerator;
    }
    set itemIdGenerator(generatorFn) {
        this._itemIdGenerator = generatorFn;
    }
    get itemTemplateSelector() {
        return this._itemTemplateSelector;
    }
    set itemTemplateSelector(value) {
        if (typeof value === "string") {
            this._itemTemplateSelectorBindable.bind({
                sourceProperty: null,
                targetProperty: "templateKey",
                expression: value,
            });
            this._itemTemplateSelector = (item, index, items) => {
                item["$index"] = index;
                if (this._itemTemplateSelectorBindable.bindingContext === item) {
                    this._itemTemplateSelectorBindable.bindingContext = null;
                }
                this._itemTemplateSelectorBindable.bindingContext = item;
                return this._itemTemplateSelectorBindable.get("templateKey");
            };
        }
        else if (typeof value === "function") {
            this._itemTemplateSelector = value;
        }
    }
    onItemViewLoaderChanged() {
    }
    get itemViewLoader() {
        return this._itemViewLoader;
    }
    set itemViewLoader(value) {
        if (this._itemViewLoader !== value) {
            this._itemViewLoader = value;
            this.onItemViewLoaderChanged();
        }
    }
    _getItemTemplateKey(index) {
        let templateKey = "default";
        if (this.itemTemplateSelector) {
            let dataItem = this._getDataItem(index);
            templateKey = this._itemTemplateSelector(dataItem, index, this.items);
        }
        return templateKey;
    }
    _getItemTemplate(index) {
        let templateKey = this._getItemTemplateKey(index);
        const length = this._itemTemplatesInternal.length;
        for (let i = 0; i < length; i++) {
            if (this._itemTemplatesInternal[i].key === templateKey) {
                return this._itemTemplatesInternal[i];
            }
        }
        // This is the default template
        return this._itemTemplatesInternal[0];
    }
    _prepareItem(item, index) {
        if (this.items && item) {
            item.bindingContext = this._getDataItem(index);
        }
    }
    _getDataItem(index) {
        let thisItems = this.items;
        if (thisItems) {
            return thisItems && thisItems.getItem
                ? thisItems.getItem(index)
                : thisItems[index];
        }
    }
    _getDefaultItemContent(index) {
        let lbl = new core_1.Label();
        lbl.bind({
            targetProperty: "text",
            sourceProperty: "$value",
        });
        return lbl;
    }
    onLayout(left, top, right, bottom) {
        super.onLayout(left, top, right, bottom);
        this._innerWidth =
            right -
                left -
                this.effectivePaddingLeft -
                this.effectivePaddingRight;
        this._innerHeight =
            bottom -
                top -
                this.effectivePaddingTop -
                this.effectivePaddingBottom;
        this._effectiveItemWidth = global.isIOS
            ? core_1.Utils.layout.getMeasureSpecSize(this._currentWidthMeasureSpec)
            : this.getMeasuredWidth();
        this._effectiveItemHeight = global.isIOS
            ? core_1.Utils.layout.getMeasureSpecSize(this._currentHeightMeasureSpec)
            : this.getMeasuredHeight();
    }
    convertToSize(length) {
        let size = 0;
        if (this.orientation === "horizontal") {
            size = global.isIOS
                ? core_1.Utils.layout.getMeasureSpecSize(this._currentWidthMeasureSpec)
                : this.getMeasuredWidth();
        }
        else {
            size = global.isIOS
                ? core_1.Utils.layout.getMeasureSpecSize(this._currentHeightMeasureSpec)
                : this.getMeasuredHeight();
        }
        let converted = 0;
        if (length && length.unit === "px") {
            converted = length.value;
        }
        else if (length && length.unit === "dip") {
            converted = core_1.Utils.layout.toDevicePixels(length.value);
        }
        else if (length && length.unit === "%") {
            converted = size * length.value;
        }
        else if (typeof length === "string") {
            if (length.indexOf("px") > -1) {
                converted = parseInt(length.replace("px", ""));
            }
            else if (length.indexOf("dip") > -1) {
                converted = core_1.Utils.layout.toDevicePixels(parseInt(length.replace("dip", "")));
            }
            else if (length.indexOf("%") > -1) {
                converted = size * (parseInt(length.replace("%", "")) / 100);
            }
            else {
                converted = core_1.Utils.layout.toDevicePixels(parseInt(length));
            }
        }
        else if (typeof length === "number") {
            converted = core_1.Utils.layout.toDevicePixels(length);
        }
        if (isNaN(converted)) {
            return 0;
        }
        return converted;
    }
};
PagerBase.selectedIndexChangedEvent = "selectedIndexChanged";
PagerBase.selectedIndexChangeEvent = "selectedIndexChange";
PagerBase.scrollEvent = "scroll";
PagerBase.swipeEvent = "swipe";
PagerBase.swipeStartEvent = "swipeStart";
PagerBase.swipeOverEvent = "swipeOver";
PagerBase.swipeEndEvent = "swipeEnd";
PagerBase.loadMoreItemsEvent = exports.LOADMOREITEMS;
PagerBase.itemLoadingEvent = exports.ITEMLOADING;
// TODO: get rid of such hacks.
PagerBase.knownFunctions = ["itemTemplateSelector", "itemIdGenerator"]; // See component-builder.ts isKnownFunction
PagerBase = __decorate([
    (0, core_1.CSSType)("Pager")
], PagerBase);
exports.PagerBase = PagerBase;
class PagerItem extends core_1.GridLayout {
    constructor() {
        super();
    }
    onLoaded() {
        super.onLoaded();
    }
}
exports.PagerItem = PagerItem;
function onItemsChanged(pager, oldValue, newValue) {
    if (oldValue instanceof core_1.Observable) {
        (0, core_1.removeWeakEventListener)(oldValue, core_1.ObservableArray.changeEvent, pager.refresh, pager);
    }
    if (newValue instanceof core_1.Observable &&
        !(newValue instanceof core_1.ObservableArray)) {
        (0, core_1.addWeakEventListener)(newValue, core_1.ObservableArray.changeEvent, pager.refresh, pager);
    }
    if (!(newValue instanceof core_1.Observable) ||
        !(newValue instanceof core_1.ObservableArray)) {
        pager.refresh();
    }
    pager._onItemsChanged(oldValue, newValue);
}
function onItemTemplateChanged(pager, oldValue, newValue) {
    pager.itemTemplateUpdated(oldValue, newValue);
}
exports.indicatorColorProperty = new core_1.Property({
    name: "indicatorColor",
});
exports.indicatorColorProperty.register(PagerBase);
exports.indicatorSelectedColorProperty = new core_1.Property({
    name: "indicatorSelectedColor",
});
exports.indicatorSelectedColorProperty.register(PagerBase);
exports.circularModeProperty = new core_1.Property({
    name: "circularMode",
    defaultValue: false,
    valueConverter: booleanConverter,
});
exports.circularModeProperty.register(PagerBase);
exports.indicatorProperty = new core_1.Property({
    name: "indicator",
    defaultValue: Indicator.None,
});
exports.indicatorProperty.register(PagerBase);
exports.selectedIndexProperty = new core_1.CoercibleProperty({
    name: "selectedIndex",
    defaultValue: -1,
    affectsLayout: global.isIOS,
    coerceValue: (target, value) => {
        let items = target._childrenCount;
        if (items) {
            let max = items - 1;
            if (value < 0) {
                value = 0;
            }
            if (value > max) {
                value = max;
            }
        }
        else {
            value = -1;
        }
        return value;
    },
    valueConverter: (v) => parseInt(v, 10),
});
exports.selectedIndexProperty.register(PagerBase);
exports.spacingProperty = new core_1.Property({
    name: "spacing",
    defaultValue: { value: 0, unit: "dip" },
    affectsLayout: true,
});
exports.spacingProperty.register(PagerBase);
exports.peakingProperty = new core_1.Property({
    name: "peaking",
    defaultValue: { value: 0, unit: "dip" },
    affectsLayout: true,
});
exports.peakingProperty.register(PagerBase);
exports.itemsProperty = new core_1.Property({
    name: "items",
    affectsLayout: true,
    valueChanged: onItemsChanged,
});
exports.itemsProperty.register(PagerBase);
exports.itemTemplateProperty = new core_1.Property({
    name: "itemTemplate",
    affectsLayout: true,
    valueChanged: (target) => {
        target.refresh();
    },
});
exports.itemTemplateProperty.register(PagerBase);
exports.itemTemplatesProperty = new core_1.Property({
    name: "itemTemplates",
    affectsLayout: true,
    valueConverter: (value) => {
        if (typeof value === "string") {
            return core_1.Builder.parseMultipleTemplates(value);
        }
        return value;
    },
});
exports.itemTemplatesProperty.register(PagerBase);
exports.canGoRightProperty = new core_1.Property({
    name: "canGoRight",
    defaultValue: false,
    valueConverter: booleanConverter,
});
exports.canGoRightProperty.register(PagerBase);
exports.canGoLeftProperty = new core_1.Property({
    name: "canGoLeft",
    defaultValue: false,
    valueConverter: booleanConverter,
});
exports.canGoLeftProperty.register(PagerBase);
const converter = (0, core_1.makeParser)((0, core_1.makeValidator)("horizontal", "vertical"));
exports.orientationProperty = new core_1.Property({
    name: "orientation",
    defaultValue: "horizontal",
    affectsLayout: true,
    valueChanged: (target, oldValue, newValue) => {
        target.refresh();
    },
    valueConverter: converter,
});
exports.orientationProperty.register(PagerBase);
exports.disableSwipeProperty = new core_1.Property({
    name: "disableSwipe",
    defaultValue: false,
    valueConverter: booleanConverter,
});
exports.disableSwipeProperty.register(PagerBase);
exports.perPageProperty = new core_1.Property({
    name: "perPage",
    defaultValue: 1,
    valueConverter: (value) => {
        return Number(value);
    },
});
exports.perPageProperty.register(PagerBase);
exports.transformersProperty = new core_1.Property({
    name: "transformers",
});
exports.transformersProperty.register(PagerBase);
exports.showIndicatorProperty = new core_1.Property({
    name: "showIndicator",
    defaultValue: false,
    valueConverter: booleanConverter,
});
exports.showIndicatorProperty.register(PagerBase);
exports.autoPlayProperty = new core_1.Property({
    name: "autoPlay",
    defaultValue: false,
    valueConverter: booleanConverter,
});
exports.autoPlayProperty.register(PagerBase);
exports.autoplayDelayProperty = new core_1.Property({
    name: "autoPlayDelay",
    defaultValue: 3000,
});
exports.autoplayDelayProperty.register(PagerBase);