Skip to content

Commit

Permalink
Merge pull request #91 from proyecto26/89-add-formsheetpreferredconte…
Browse files Browse the repository at this point in the history
…ntsize-prop-to-allow-for-custom-sized-formsheet-modals

Add custom size option to iOS formSheet Modal
  • Loading branch information
jdnichollsc authored Jul 31, 2022
2 parents 99ed0c4 + a665c55 commit 30d7b1f
Show file tree
Hide file tree
Showing 99 changed files with 6,239 additions and 25,288 deletions.
6 changes: 3 additions & 3 deletions .github/issue_template.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ letter.

### Please, provide the following version numbers that your issue occurs with:

- CLI: (run `tns --version` to fetch it)
- CLI: (run `ns --version` to fetch it)
- Cross-platform modules: (check the 'version' attribute in the
`node_modules/tns-core-modules/package.json` file in your project)
- Runtime(s): (look for the `"tns-android"` and `"tns-ios"` properties in the `package.json` file of your project)
`node_modules/@nativescript/core/package.json` file in your project)
- Runtime(s): (look for the `"@nativescript/android"` and `"@nativescript/ios"` properties in the `package.json` file of your project)
- Plugin(s): (look for the version numbers in the `package.json` file of your
project and paste your dependencies and devDependencies here)

Expand Down
12 changes: 6 additions & 6 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,22 @@ matrix:
language: node_js
node_js: "10"
jdk: oraclejdk8
script: cd src && npm run build && cd ../demo && npm i && tns build ios --bundle --env.uglify
script: cd src && npm run build && cd ../demo && npm i && ns build ios --bundle --env.uglify
- language: android
os: linux
env:
- WebPack="Android"
jdk: oraclejdk8
before_install: nvm install 10
script: cd src && npm run build && cd ../demo && npm i && tns build android --bundle --env.uglify --env.snapshot
script: cd src && npm run build && cd ../demo && npm i && ns build android --bundle --env.uglify --env.snapshot
- language: android
env:
- BuildAndroid="28"
os: linux
jdk: oraclejdk8
before_install: nvm install 10
script:
- cd src && npm i && npm run tsc && cd ../demo && tns build android
- cd src && npm i && npm run tsc && cd ../demo && ns build android
- os: osx
env:
- BuildiOS="12"
Expand All @@ -38,7 +38,7 @@ matrix:
node_js: "10"
jdk: oraclejdk8
script:
- cd src && npm i && npm run tsc && cd ../demo && tns build ios
- cd src && npm i && npm run tsc && cd ../demo && ns build ios

# TODO: Include unit tests...
# - os: linux
Expand Down Expand Up @@ -75,5 +75,5 @@ before_install:

install:
- echo no | npm install -g nativescript
- tns usage-reporting disable
- tns error-reporting disable
- ns usage-reporting disable
- ns error-reporting disable
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,12 @@ in case of vulnerabilities.

## [Unreleased]

### Added
- Add custom size option to iOS formSheet Modal by [@ShaneMckenna23](https://github.com/ShaneMckenna23) ([#91](https://github.com/proyecto26/nativescript-inappbrowser/pull/91)).

### Fixed
- Complete migration to ns8 and fix build issues by [@rigor789](https://github.com/rigor789) ([#92](https://github.com/proyecto26/nativescript-inappbrowser/pull/92)).

## [3.1.2] - 2021-06-28

### Fixed
Expand Down
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ Share your awesome project [here](https://github.com/proyecto26/nativescript-ina
## Getting started

```javascript
tns plugin add nativescript-inappbrowser
ns plugin add nativescript-inappbrowser
```

### Manual installation
Expand Down Expand Up @@ -107,6 +107,7 @@ Property | Description
`modalEnabled` (Boolean) | Present the **SafariViewController** modally or as push instead. [`true`/`false`]
`enableBarCollapsing` (Boolean) | Determines whether the browser's tool bars will collapse or not. [`true`/`false`]
`ephemeralWebSession` (Boolean) | Prevent re-use cookies of previous session (openAuth only) [`true`/`false`]
`formSheetPreferredContentSize` (Object) | Custom size for iPad `formSheet` modals [`{width: 400, height: 500}`]

### Android Options
Property | Description
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
62 changes: 31 additions & 31 deletions demo/app/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,36 +9,36 @@ In many cases you may want to use the NativeScript core theme instead
of writing your own CSS rules. For a full list of class names in the theme
refer to http://docs.nativescript.org/ui/theme.
*/
@import '~nativescript-theme-core/css/core.css';
@import "nativescript-theme-core/css/core.css";

TextField {
border-width: 1;
border-color: gray;
height: 45;
margin-top: 5;
}
.content {
padding-left: 20;
padding-right: 20;
}
.p {
font-size: 14;
color: #333333;
margin: 5;
}
.my-button {
background-color: transparent;
border-radius: 5;
color: blue;
font-family: FontAwesome;
font-size: 18;
vertical-align: middle;
width: 80%;
}
.my-button:active {
color:black;
}
border-width: 1;
border-color: gray;
height: 45;
margin-top: 5;
}

.content {
padding-left: 20;
padding-right: 20;
}

.p {
font-size: 14;
color: #333333;
margin: 5;
}

.my-button {
background-color: transparent;
border-radius: 5;
color: blue;
font-family: FontAwesome;
font-size: 18;
vertical-align: middle;
width: 80%;
}

.my-button:active {
color: black;
}
6 changes: 3 additions & 3 deletions demo/app/home/home-page.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { EventData, Page } from '@nativescript/core';
import {HelloWorldModel} from './home-view-model';
import { EventData, Page } from "@nativescript/core";
import { HelloWorldModel } from "./home-view-model";

// Event handler for Page 'loaded' event attached in main-page.xml
export function pageLoaded(args: EventData) {
// Get the event sender
let page = <Page>args.object;
page.bindingContext = new HelloWorldModel();
}
}
2 changes: 1 addition & 1 deletion demo/app/home/home-page.xml
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,4 @@
<Button text="Open link" class="my-button btn" tap="{{ openLink }}"></Button>
<Button text="Try deep linking" class="my-button btn" tap="{{ tryDeepLinking }}"></Button>
</StackLayout>
</Page>
</Page>
202 changes: 104 additions & 98 deletions demo/app/home/home-view-model.ts
Original file line number Diff line number Diff line change
@@ -1,110 +1,116 @@
import { Observable, Utils, Dialogs } from '@nativescript/core';
import { InAppBrowser } from 'nativescript-inappbrowser';
import { getDeepLink, sleep } from './utilities';
import { Dialogs, Observable, Utils } from "@nativescript/core";
import { Screen } from "@nativescript/core/platform";
import { InAppBrowser } from "nativescript-inappbrowser";
import { getDeepLink, sleep } from "./utilities";

export class HelloWorldModel extends Observable {
private _url: string;
private _url: string;

constructor() {
super();
constructor() {
super();

// Initialize default values.
this._url = 'https://nativescript.org';
}

get url(): string {
return this._url;
}
// Initialize default values.
this._url = "https://nativescript.org";
}

set url(value: string) {
if (this._url !== value) {
this._url = value;
this.notifyPropertyChange('url', value);
get url(): string {
return this._url;
}
}

async openLink() {
try {
const { url } = this;
if (await InAppBrowser.isAvailable()) {
const result = await InAppBrowser.open(url, {
// iOS Properties
dismissButtonStyle: 'cancel',
preferredBarTintColor: '#453AA4',
preferredControlTintColor: 'white',
readerMode: false,
animated: true,
modalPresentationStyle: 'fullScreen',
modalTransitionStyle: 'coverVertical',
modalEnabled: true,
enableBarCollapsing: false,
// Android Properties
showTitle: true,
toolbarColor: '#6200EE',
secondaryToolbarColor: 'black',
navigationBarColor: 'black',
navigationBarDividerColor: 'white',
enableUrlBarHiding: true,
enableDefaultShare: true,
forceCloseOnRedirection: true,
// Specify full animation resource identifier(package:anim/name)
// or only resource name(in case of animation bundled with app).
animations: {
startEnter: 'slide_in_right',
startExit: 'slide_out_left',
endEnter: 'slide_in_left',
endExit: 'slide_out_right'
},
headers: {
'my-custom-header': 'my custom header value'
},
hasBackButton: true,
browserPackage: '',
showInRecents: false
});
await sleep(800);
Dialogs.alert({
title: 'Response',
message: JSON.stringify(result),
okButtonText: 'Ok'
});
}
else {
Utils.openUrl(url);
}
set url(value: string) {
if (this._url !== value) {
this._url = value;
this.notifyPropertyChange("url", value);
}
}
catch (error) {
Dialogs.alert({
title: 'Error',
message: error.message,
okButtonText: 'Ok'
});

async openLink() {
try {
const { url } = this;
if (await InAppBrowser.isAvailable()) {
const { widthDIPs, heightDIPs } = Screen.mainScreen;
const result = await InAppBrowser.open(url, {
// iOS Properties
dismissButtonStyle: "cancel",
preferredBarTintColor: "#453AA4",
preferredControlTintColor: "white",
readerMode: false,
animated: true,
modalPresentationStyle: "formSheet",
modalTransitionStyle: "coverVertical",
modalEnabled: true,
enableBarCollapsing: false,
formSheetPreferredContentSize: {
width: widthDIPs - widthDIPs / 6,
height: heightDIPs - heightDIPs / 6,
},
// Android Properties
showTitle: true,
toolbarColor: "#6200EE",
secondaryToolbarColor: "black",
navigationBarColor: "black",
navigationBarDividerColor: "white",
enableUrlBarHiding: true,
enableDefaultShare: true,
forceCloseOnRedirection: true,
// Specify full animation resource identifier(package:anim/name)
// or only resource name(in case of animation bundled with app).
animations: {
startEnter: "slide_in_right",
startExit: "slide_out_left",
endEnter: "slide_in_left",
endExit: "slide_out_right",
},
headers: {
"my-custom-header": "my custom header value",
},
hasBackButton: true,
browserPackage: "",
showInRecents: false,
});
await sleep(800);
Dialogs.alert({
title: "Response",
message: JSON.stringify(result),
okButtonText: "Ok",
});
} else {
Utils.openUrl(url);
}
} catch (error) {
Dialogs.alert({
title: "Error",
message: error.message,
okButtonText: "Ok",
});
}
}
}

async tryDeepLinking() {
const loginUrl = `https://proyecto26.github.io/react-native-inappbrowser`;
const redirectUrl = getDeepLink('home');
const url = `${loginUrl}?redirect_url=${encodeURIComponent(redirectUrl)}`;
try {
if (await InAppBrowser.isAvailable()) {
const result = await InAppBrowser.openAuth(url, redirectUrl, {
// iOS Properties
ephemeralWebSession: true,
// Android Properties
showTitle: false,
enableUrlBarHiding: true,
enableDefaultShare: true
});
await sleep(800);
Dialogs.alert({
title: 'Response',
message: JSON.stringify(result),
okButtonText: 'Ok'
});
}
} catch {
Dialogs.alert('Something’s wrong with the app :(');
async tryDeepLinking() {
const loginUrl = `https://proyecto26.github.io/react-native-inappbrowser`;
const redirectUrl = getDeepLink("home");
const url = `${loginUrl}?redirect_url=${encodeURIComponent(
redirectUrl
)}`;
try {
if (await InAppBrowser.isAvailable()) {
const result = await InAppBrowser.openAuth(url, redirectUrl, {
// iOS Properties
ephemeralWebSession: true,
// Android Properties
showTitle: false,
enableUrlBarHiding: true,
enableDefaultShare: true,
});
await sleep(800);
Dialogs.alert({
title: "Response",
message: JSON.stringify(result),
okButtonText: "Ok",
});
}
} catch {
Dialogs.alert("Something’s wrong with the app :(");
}
}
}
}
Loading

0 comments on commit 30d7b1f

Please sign in to comment.