Attempting to lower the opacity of my StackLayout while making an Ajax API call.
The structure of my page is as follows:
<Page loaded="pageLoaded" class="page"
xmlns="http://www.nativescript.org/tns.xsd">
<ActionBar title="Settings" class="action-bar">
</ActionBar>
<ScrollView>
<StackLayout id="layout" >
<Image src="~/images/header-logo.jpg" stretch="fit" />
<GridLayout rows="auto, auto">
<Label
text="Hey Welcome! You need to come up with a username. You only have to do this once." row="0" textWrap="true" class="labelMessage" />
<TextField id="username" text="{{ username }}"
hint="Any username you want"
returnPress="doneTap" autocorrect="false"
autocapitalizationType="none" row="1" />
<ActivityIndicator busy="{{ authenticating }}" />
</GridLayout>
<Button text="Save Username" id="registerButton"
tap="{{ register }}" returnKeyType="done" class="button" />
</StackLayout>
</ScrollView>
</Page>
Snippet from View Model...
register: function () {
if (this.username == null || this.username.length < 4) {
alert("Come on, enter a username with at least 4 letters!");
return;
}
this.authenticating = true;
CSS code for modifying opacity:
.dimPage {
opacity: 0.3;
}
** Unsuccessful Attempts ** Struggling to add and remove a class through JavaScript. Tried the following method:
settings-page.js
var frameModule = require("tns-core-modules/ui/frame");
var SettingsViewModel = require("./settings-view-model");
var settingsViewModel = new SettingsViewModel();
var pgStackLayout;
var txtUsername;
function pageLoaded(args) {
var page = args.object;
var pgStackLayout = null;
pgStackLayout = page.getViewById("layout");
page.bindingContext = settingsViewModel;
}
exports.pageLoaded = pageLoaded;
and my settings-viewmodel.js
(snippet when dimming)
pgStackLayout.className = "dimPage";
(snippet when back to full opacity)
pgStackLayout.className = "";
Error encountered stating pgStackLayout is undefined.
Seeking assistance in adding and removing a class on StackLayout to change opacity during an Ajax call.
Appreciate any guidance provided.