nativescript-parallax
Version:
NativeScript Parallax View Plugin.
254 lines • 11.7 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
exports.__esModule = true;
var app = require("application");
var Platform = require("platform");
var scroll_view_1 = require("ui/scroll-view");
var grid_layout_1 = require("ui/layouts/grid-layout");
var absolute_layout_1 = require("ui/layouts/absolute-layout");
var stack_layout_1 = require("ui/layouts/stack-layout");
var utilities_1 = require("./utilities");
var Header = (function (_super) {
__extends(Header, _super);
function Header() {
return _super !== null && _super.apply(this, arguments) || this;
}
return Header;
}(stack_layout_1.StackLayout));
exports.Header = Header;
var Anchored = (function (_super) {
__extends(Anchored, _super);
function Anchored() {
var _this = _super.call(this) || this;
_this.dropShadow = false;
return _this;
}
Object.defineProperty(Anchored.prototype, "dropShadow", {
get: function () {
return this._dropShadow;
},
set: function (value) {
this._dropShadow = value;
},
enumerable: true,
configurable: true
});
return Anchored;
}(stack_layout_1.StackLayout));
exports.Anchored = Anchored;
var Content = (function (_super) {
__extends(Content, _super);
function Content() {
return _super !== null && _super.apply(this, arguments) || this;
}
return Content;
}(stack_layout_1.StackLayout));
exports.Content = Content;
var ParallaxView = (function (_super) {
__extends(ParallaxView, _super);
function ParallaxView() {
var _this = _super.call(this) || this;
_this._childLayouts = [];
var headerView;
var contentView;
var scrollView = new scroll_view_1.ScrollView();
var viewsToFade;
var maxTopViewHeight;
var controlsToFade;
var anchoredRow = new absolute_layout_1.AbsoluteLayout();
var row = new grid_layout_1.ItemSpec(2, grid_layout_1.GridUnitType.STAR);
var column = new grid_layout_1.ItemSpec(1, grid_layout_1.GridUnitType.STAR);
var invalidSetup = false;
var hasBeenAnchored = false;
_this._isAnchored = false;
_this.bounce = false;
_this._minimumHeights = utilities_1.ParallaxUtilities.getMinimumHeights();
_this.verticalAlignment = 'top';
scrollView.verticalAlignment = 'top';
anchoredRow.verticalAlignment = 'top';
_this._includesAnchored = false;
_this._topOpacity = 1;
_this._loaded = false;
_this.on(grid_layout_1.GridLayout.loadedEvent, function (data) {
if (!_this._loaded) {
_this._loaded = true;
_this._childLayouts = utilities_1.ParallaxUtilities.pluckViews(_this);
_this.addRow(row);
_this.addColumn(column);
_this.addChild(scrollView);
_this.addChild(anchoredRow);
grid_layout_1.GridLayout.setRow(scrollView, 1);
grid_layout_1.GridLayout.setRow(anchoredRow, 0);
grid_layout_1.GridLayout.setColumn(scrollView, 1);
grid_layout_1.GridLayout.setColumn(anchoredRow, 0);
var wrapperStackLayout = new stack_layout_1.StackLayout();
scrollView.content = wrapperStackLayout;
for (var c = 0; c < _this._childLayouts.length; c++) {
var element = _this._childLayouts[c];
if (element instanceof Header || (stack_layout_1.StackLayout && utilities_1.ParallaxUtilities.containsCssClass(element, 'header'))) {
wrapperStackLayout.addChild(element);
headerView = element;
}
else if (element instanceof Content || (stack_layout_1.StackLayout && utilities_1.ParallaxUtilities.containsCssClass(element, 'content'))) {
wrapperStackLayout.addChild(element);
contentView = element;
}
else if (element instanceof Anchored || (stack_layout_1.StackLayout && utilities_1.ParallaxUtilities.containsCssClass(element, 'anchor'))) {
anchoredRow.addChild(element);
if (element.dropShadow || utilities_1.ParallaxUtilities.containsCssClass(element, 'dropShadow')) {
anchoredRow.height = element.height;
anchoredRow.addChild(utilities_1.ParallaxUtilities.addDropShadow(element.height, element.getMeasuredWidth()));
}
else {
anchoredRow.height = element.height;
}
element.verticalAlignment = 'top';
_this._includesAnchored = true;
}
}
;
if (headerView == null || contentView == null) {
utilities_1.ParallaxUtilities.displayDevWarning(_this, 'Parallax ScrollView Setup Invalid. You must have Header and Content tags', headerView, contentView, contentView);
return;
}
if (isNaN(headerView.height)) {
utilities_1.ParallaxUtilities.displayDevWarning(_this, 'Header MUST have a height set.', headerView, anchoredRow, contentView);
return;
}
if (_this._includesAnchored && isNaN(anchoredRow.height)) {
utilities_1.ParallaxUtilities.displayDevWarning(_this, 'Anchor MUST have a height set.', anchoredRow, headerView, contentView);
return;
}
maxTopViewHeight = headerView.height;
if (_this._includesAnchored) {
anchoredRow.translateY = maxTopViewHeight;
if (app.android) {
anchoredRow.translateY = anchoredRow.translateY - 5;
}
contentView.translateY = anchoredRow.height;
}
if (_this._bounce == "false" || _this._bounce === false) {
if (app.ios) {
scrollView.ios.bounces = false;
}
else if (app.android) {
scrollView.android.setOverScrollMode(2);
}
}
viewsToFade = [];
if (_this.controlsToFade == null) {
controlsToFade = [];
}
else {
controlsToFade = _this.controlsToFade.split(',');
}
for (var c = 0; c < controlsToFade.length; c++) {
var newView = headerView.getViewById(controlsToFade[c]);
if (newView != null) {
viewsToFade.push(newView);
}
}
;
var prevOffset_1 = -10;
utilities_1.ParallaxUtilities.setMinimumHeight(contentView, anchoredRow, Platform.screen.mainScreen.heightDIPs, _this._includesAnchored);
app.on(app.orientationChangedEvent, function (args) {
utilities_1.ParallaxUtilities.setMinimumHeight(contentView, anchoredRow, _this._minimumHeights[args.newValue], _this._includesAnchored);
});
scrollView.on(scroll_view_1.ScrollView.scrollEvent, function (args) {
_this.notify({
eventName: ParallaxView.scrollEvent,
object: _this,
data: args,
direction: (prevOffset_1 > args.scrollY) ? "down" : "up"
});
if (_this._includesAnchored) {
anchoredRow.translateY = utilities_1.ParallaxUtilities.getAnchoredTopHeight(maxTopViewHeight, scrollView.verticalOffset);
if (anchoredRow.translateY === 0) {
if (!_this._isAnchored) {
_this._isAnchored = true;
hasBeenAnchored = true;
_this.notify({
eventName: ParallaxView.anchoredEvent,
object: _this,
data: anchoredRow
});
}
}
else if (anchoredRow.translateY > 0) {
if (hasBeenAnchored && _this._isAnchored) {
_this.notify({
eventName: ParallaxView.unanchoredEvent,
object: _this,
data: anchoredRow
});
}
_this._isAnchored = false;
}
}
headerView.height = utilities_1.ParallaxUtilities.getTopViewHeight(maxTopViewHeight, scrollView.verticalOffset);
if (headerView.height > 0) {
utilities_1.ParallaxUtilities.fadeViews(maxTopViewHeight, scrollView.verticalOffset, viewsToFade, _this._topOpacity);
}
prevOffset_1 = scrollView.verticalOffset;
});
}
});
return _this;
}
Object.defineProperty(ParallaxView.prototype, "bounce", {
get: function () {
return this._bounce;
},
set: function (value) {
this._bounce = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ParallaxView.prototype, "controlsToFade", {
get: function () {
return this._controlsToFade;
},
set: function (value) {
this._controlsToFade = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ParallaxView.prototype, "isAnchored", {
get: function () {
return this._isAnchored;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ParallaxView.prototype, "android", {
get: function () {
return;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ParallaxView.prototype, "ios", {
get: function () {
return;
},
enumerable: true,
configurable: true
});
ParallaxView.scrollEvent = "scroll";
ParallaxView.anchoredEvent = "anchored";
ParallaxView.unanchoredEvent = "unanchored";
return ParallaxView;
}(grid_layout_1.GridLayout));
exports.ParallaxView = ParallaxView;
//# sourceMappingURL=nativescript-parallax.js.map