@hiloenergie/capacitor-plugin-safe-area 0.0.12 → 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +225 -225
- package/android/build.gradle +9 -9
- package/android/src/main/java/com/getcapacitor/community/plugins/safearea/SafeAreaPlugin.java +2 -2
- package/dist/plugin.cjs.js +0 -2
- package/dist/plugin.cjs.js.map +1 -1
- package/dist/plugin.js +0 -2
- package/dist/plugin.js.map +1 -1
- package/ios/Plugin/SafeAreaPlugin.h +10 -10
- package/ios/Plugin/SafeAreaPlugin.m +9 -9
- package/ios/Plugin/SafeAreaPlugin.swift +93 -93
- package/package.json +75 -75
package/README.md
CHANGED
|
@@ -1,225 +1,225 @@
|
|
|
1
|
-
<p align="center"><br><img src="https://user-images.githubusercontent.com/236501/85893648-1c92e880-b7a8-11ea-926d-95355b8175c7.png" width="128" height="128" /></p>
|
|
2
|
-
<h3 align="center">Safe Area</h3>
|
|
3
|
-
<p align="center"><strong><code>@capacitor-community/safe-area</code></strong></p>
|
|
4
|
-
<p align="center">
|
|
5
|
-
A plugin to expose the safe area insets from the native iOS/Android device to your web project.
|
|
6
|
-
</p>
|
|
7
|
-
|
|
8
|
-
<p align="center">
|
|
9
|
-
<img src="https://img.shields.io/maintenance/yes/2020?style=flat-square" />
|
|
10
|
-
<a href="https://github.com/capacitor-community/safe-area/actions?query=workflow%3A%22CI%22"><img src="https://img.shields.io/github/workflow/status/capacitor-community/safe-area/CI?style=flat-square" /></a>
|
|
11
|
-
<a href="https://www.npmjs.com/package/@capacitor-community/safe-area"><img src="https://img.shields.io/npm/l/@capacitor-community/safe-area?style=flat-square" /></a>
|
|
12
|
-
<br>
|
|
13
|
-
<a href="https://www.npmjs.com/package/@capacitor-community/safe-area"><img src="https://img.shields.io/npm/dw/@capacitor-community/safe-area?style=flat-square" /></a>
|
|
14
|
-
<a href="https://www.npmjs.com/package/@capacitor-community/safe-area"><img src="https://img.shields.io/npm/v/@capacitor-community/safe-area?style=flat-square" /></a>
|
|
15
|
-
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
|
|
16
|
-
<a href="#contributors-"><img src="https://img.shields.io/badge/all%20contributors-0-orange?style=flat-square" /></a>
|
|
17
|
-
<!-- ALL-CONTRIBUTORS-BADGE:END -->
|
|
18
|
-
</p>
|
|
19
|
-
|
|
20
|
-
## Maintainers
|
|
21
|
-
|
|
22
|
-
***This is a fork of [@capacitor-community/safe-area](https://github.com/capacitor-community/safe-area). Please make sure to sync up with the public package through pull requests so that we can eventually switch back to the
|
|
23
|
-
official plugin.***
|
|
24
|
-
|
|
25
|
-
| Maintainer | GitHub | Social |
|
|
26
|
-
| -----------| -------| -------|
|
|
27
|
-
| Kevin Pacheco | [PolymorphiK](https://github.com/PolymorphiK) | [@k_pacheco10](https://twitter.com/k_pacheco10) |
|
|
28
|
-
|
|
29
|
-
## Installation
|
|
30
|
-
|
|
31
|
-
Soon(TM)
|
|
32
|
-
|
|
33
|
-
## Configuration
|
|
34
|
-
|
|
35
|
-
For Android, register plugin in your main activity.
|
|
36
|
-
|
|
37
|
-
```java
|
|
38
|
-
import com.getcapacitor.community.safearea.SafeAreaPlugin;
|
|
39
|
-
|
|
40
|
-
public class MainActivity extends BridgeActivity {
|
|
41
|
-
@Override
|
|
42
|
-
public void onCreate(Bundle savedInstanceState) {
|
|
43
|
-
super.onCreate(savedInstanceState);
|
|
44
|
-
|
|
45
|
-
this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
|
|
46
|
-
add(SafeAreaPlugin.class);
|
|
47
|
-
}});
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
```
|
|
51
|
-
Here is a bonus tip, to get full screen mode use this in your main activity. Requires Android **28+**
|
|
52
|
-
|
|
53
|
-
```java
|
|
54
|
-
@Override
|
|
55
|
-
public void onResume() {
|
|
56
|
-
super.onResume();
|
|
57
|
-
|
|
58
|
-
// Requires API 28+
|
|
59
|
-
this.getWindow().getAttributes().layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;
|
|
60
|
-
|
|
61
|
-
View decorView = this.getWindow().getDecorView();
|
|
62
|
-
|
|
63
|
-
decorView.setSystemUiVisibility(
|
|
64
|
-
View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
|
|
65
|
-
// Set the content to appear under the system bars so that the
|
|
66
|
-
// content doesn't resize when the system bars hide and show.
|
|
67
|
-
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE
|
|
68
|
-
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
|
|
69
|
-
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
|
|
70
|
-
// Hide the nav bar and status bar
|
|
71
|
-
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
|
|
72
|
-
| View.SYSTEM_UI_FLAG_FULLSCREEN);
|
|
73
|
-
}
|
|
74
|
-
```
|
|
75
|
-
To change the Android build version, change the **minSdkVersion** to at least 28 in the **variables.gradle** file. <br />
|
|
76
|
-
For more information please see Android's [immersive](https://developer.android.com/training/system-ui/immersive), and [short edges](https://developer.android.com/reference/android/view/WindowManager.LayoutParams#LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES) documentation.
|
|
77
|
-
|
|
78
|
-
## Usage
|
|
79
|
-
Register the plugin via the entry file of your project.
|
|
80
|
-
|
|
81
|
-
```javascript
|
|
82
|
-
// Register Capacitor Plugin...
|
|
83
|
-
import '@capacitor-community/safe-area';
|
|
84
|
-
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
It is **strongly** recomended that you use the **SafeAreaController** as it makes it super easy to use the plugin :)
|
|
88
|
-
|
|
89
|
-
```javascript
|
|
90
|
-
import { SafeAreaController } from '@capacitor-community/safe-area';
|
|
91
|
-
|
|
92
|
-
// Initialize the controller.
|
|
93
|
-
SafeAreaController.load();
|
|
94
|
-
|
|
95
|
-
// Gets the insets object
|
|
96
|
-
// Shape
|
|
97
|
-
/*
|
|
98
|
-
{
|
|
99
|
-
top: number,
|
|
100
|
-
bottom: number,
|
|
101
|
-
right: number,
|
|
102
|
-
left: number,
|
|
103
|
-
}
|
|
104
|
-
*/
|
|
105
|
-
SafeAreaController.getInsets();
|
|
106
|
-
|
|
107
|
-
// Use this to listen for changes in the insets.
|
|
108
|
-
// i.e. when the device is rotated
|
|
109
|
-
SafeAreaController.addListener((insets) => {
|
|
110
|
-
|
|
111
|
-
});
|
|
112
|
-
|
|
113
|
-
// Use this to force the plugin to invoke the event
|
|
114
|
-
// Example, after you add a listener perhaps you invoke refresh
|
|
115
|
-
// to get the most up-to-date inset values.
|
|
116
|
-
SafeAreaController.refresh();
|
|
117
|
-
|
|
118
|
-
// Uninitialize the controller when you don't need it anymore.
|
|
119
|
-
SafeAreaController.unload();
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
Once the **SafeAreaController** has been loaded, it will inject CSS variables for you to use in your style sheets.
|
|
123
|
-
|
|
124
|
-
```css
|
|
125
|
-
/* styling for every case Web, iOS, and/or Android */
|
|
126
|
-
.myContainer {
|
|
127
|
-
paddingTop: max(1.5rem, val(--safe-area-inset-top));
|
|
128
|
-
paddingLeft: max(1.5rem, val(--safe-area-inset-left));
|
|
129
|
-
paddingRight: max(1.5rem, val(--safe-area-inset-right));
|
|
130
|
-
paddingBottom: val(--safe-area-inset-bottom);
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
/* If you need Android specific stying */
|
|
134
|
-
.myContainerForAndroidOnly {
|
|
135
|
-
paddingTop: max(1.5rem, val(--android-safe-area-inset-top));
|
|
136
|
-
paddingLeft: max(1.5rem, val(--android-safe-area-inset-left));
|
|
137
|
-
paddingRight: max(1.5rem, val(--android-safe-area-inset-right));
|
|
138
|
-
paddingBottom: val(--android-safe-area-inset-bottom);
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
/* If you need iOS specific styling */
|
|
142
|
-
.myContainerForIOSOnly {
|
|
143
|
-
paddingTop: max(1.5rem, val(--ios-safe-area-inset-top));
|
|
144
|
-
paddingLeft: max(1.5rem, val(--ios-safe-area-inset-left));
|
|
145
|
-
paddingRight: max(1.5rem, val(--ios-safe-area-inset-right));
|
|
146
|
-
paddingBottom: val(--ios-safe-area-inset-bottom);
|
|
147
|
-
}
|
|
148
|
-
```
|
|
149
|
-
|
|
150
|
-
This can also be used with the styles attribute in something like React.js for example.
|
|
151
|
-
```jsx
|
|
152
|
-
// This div will grow to cover the area of the cutout
|
|
153
|
-
// this would be at the very top.
|
|
154
|
-
<div
|
|
155
|
-
style={{
|
|
156
|
-
height: "var(--safe-area-inset-top)",
|
|
157
|
-
backgroundColor: "#12005e"
|
|
158
|
-
}}>
|
|
159
|
-
</div>
|
|
160
|
-
```
|
|
161
|
-
|
|
162
|
-
<details>
|
|
163
|
-
<summary>React - SafeAreaInsetsProvider</summary>
|
|
164
|
-
|
|
165
|
-
Here is a component that can be used by React.js developers. This handles everything for you via the SafeAreaController. There is a hook you can use as well called **useSafeAreaInsetsState** which will return a JSON object with top, bottom, right, and left number properties.
|
|
166
|
-
|
|
167
|
-
```javascript
|
|
168
|
-
import * as React from 'react';
|
|
169
|
-
import { SafeAreaController } from '@capacitor-community/safe-area';
|
|
170
|
-
|
|
171
|
-
const StateContext = React.createContext();
|
|
172
|
-
|
|
173
|
-
export const useSafeAreaInsetsState = () => {
|
|
174
|
-
const context = React.useContext(StateContext);
|
|
175
|
-
|
|
176
|
-
if(context === undefined)
|
|
177
|
-
throw new Error("Cannot use 'useSafeAreaInsetsState' outside of a SafeAreaInsetsProvider!");
|
|
178
|
-
|
|
179
|
-
return context;
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
const SafeAreaInsetsProvider = ({children}) => {
|
|
183
|
-
const [state, setState] = React.useState({
|
|
184
|
-
top: 0,
|
|
185
|
-
bottom: 0,
|
|
186
|
-
right: 0,
|
|
187
|
-
left: 0
|
|
188
|
-
});
|
|
189
|
-
|
|
190
|
-
React.useState(() => {
|
|
191
|
-
SafeAreaController.addListener((insets) => {
|
|
192
|
-
setState(insets);
|
|
193
|
-
});
|
|
194
|
-
|
|
195
|
-
SafeAreaController.load();
|
|
196
|
-
|
|
197
|
-
return () => {
|
|
198
|
-
SafeAreaController.removeAllListeners();
|
|
199
|
-
SafeAreaController.unload();
|
|
200
|
-
}
|
|
201
|
-
}, []);
|
|
202
|
-
|
|
203
|
-
return (
|
|
204
|
-
<StateContext.Provider value={state}>
|
|
205
|
-
{children}
|
|
206
|
-
</StateContext.Provider>
|
|
207
|
-
)
|
|
208
|
-
};
|
|
209
|
-
|
|
210
|
-
export default SafeAreaInsetsProvider;
|
|
211
|
-
```
|
|
212
|
-
|
|
213
|
-
You can then use this provider ideally in the **index** file of your project.
|
|
214
|
-
|
|
215
|
-
```javascript
|
|
216
|
-
ReactDOM.render(
|
|
217
|
-
<React.StrictMode>
|
|
218
|
-
<SafeAreaInsetsProvider>
|
|
219
|
-
<App />
|
|
220
|
-
</SafeAreaInsetsProvider>
|
|
221
|
-
</React.StrictMode>,
|
|
222
|
-
document.getElementById('root')
|
|
223
|
-
);
|
|
224
|
-
```
|
|
225
|
-
</details>
|
|
1
|
+
<p align="center"><br><img src="https://user-images.githubusercontent.com/236501/85893648-1c92e880-b7a8-11ea-926d-95355b8175c7.png" width="128" height="128" /></p>
|
|
2
|
+
<h3 align="center">Safe Area</h3>
|
|
3
|
+
<p align="center"><strong><code>@capacitor-community/safe-area</code></strong></p>
|
|
4
|
+
<p align="center">
|
|
5
|
+
A plugin to expose the safe area insets from the native iOS/Android device to your web project.
|
|
6
|
+
</p>
|
|
7
|
+
|
|
8
|
+
<p align="center">
|
|
9
|
+
<img src="https://img.shields.io/maintenance/yes/2020?style=flat-square" />
|
|
10
|
+
<a href="https://github.com/capacitor-community/safe-area/actions?query=workflow%3A%22CI%22"><img src="https://img.shields.io/github/workflow/status/capacitor-community/safe-area/CI?style=flat-square" /></a>
|
|
11
|
+
<a href="https://www.npmjs.com/package/@capacitor-community/safe-area"><img src="https://img.shields.io/npm/l/@capacitor-community/safe-area?style=flat-square" /></a>
|
|
12
|
+
<br>
|
|
13
|
+
<a href="https://www.npmjs.com/package/@capacitor-community/safe-area"><img src="https://img.shields.io/npm/dw/@capacitor-community/safe-area?style=flat-square" /></a>
|
|
14
|
+
<a href="https://www.npmjs.com/package/@capacitor-community/safe-area"><img src="https://img.shields.io/npm/v/@capacitor-community/safe-area?style=flat-square" /></a>
|
|
15
|
+
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
|
|
16
|
+
<a href="#contributors-"><img src="https://img.shields.io/badge/all%20contributors-0-orange?style=flat-square" /></a>
|
|
17
|
+
<!-- ALL-CONTRIBUTORS-BADGE:END -->
|
|
18
|
+
</p>
|
|
19
|
+
|
|
20
|
+
## Maintainers
|
|
21
|
+
|
|
22
|
+
***This is a fork of [@capacitor-community/safe-area](https://github.com/capacitor-community/safe-area). Please make sure to sync up with the public package through pull requests so that we can eventually switch back to the
|
|
23
|
+
official plugin.***
|
|
24
|
+
|
|
25
|
+
| Maintainer | GitHub | Social |
|
|
26
|
+
| -----------| -------| -------|
|
|
27
|
+
| Kevin Pacheco | [PolymorphiK](https://github.com/PolymorphiK) | [@k_pacheco10](https://twitter.com/k_pacheco10) |
|
|
28
|
+
|
|
29
|
+
## Installation
|
|
30
|
+
|
|
31
|
+
Soon(TM)
|
|
32
|
+
|
|
33
|
+
## Configuration
|
|
34
|
+
|
|
35
|
+
For Android, register plugin in your main activity.
|
|
36
|
+
|
|
37
|
+
```java
|
|
38
|
+
import com.getcapacitor.community.safearea.SafeAreaPlugin;
|
|
39
|
+
|
|
40
|
+
public class MainActivity extends BridgeActivity {
|
|
41
|
+
@Override
|
|
42
|
+
public void onCreate(Bundle savedInstanceState) {
|
|
43
|
+
super.onCreate(savedInstanceState);
|
|
44
|
+
|
|
45
|
+
this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
|
|
46
|
+
add(SafeAreaPlugin.class);
|
|
47
|
+
}});
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
Here is a bonus tip, to get full screen mode use this in your main activity. Requires Android **28+**
|
|
52
|
+
|
|
53
|
+
```java
|
|
54
|
+
@Override
|
|
55
|
+
public void onResume() {
|
|
56
|
+
super.onResume();
|
|
57
|
+
|
|
58
|
+
// Requires API 28+
|
|
59
|
+
this.getWindow().getAttributes().layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;
|
|
60
|
+
|
|
61
|
+
View decorView = this.getWindow().getDecorView();
|
|
62
|
+
|
|
63
|
+
decorView.setSystemUiVisibility(
|
|
64
|
+
View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
|
|
65
|
+
// Set the content to appear under the system bars so that the
|
|
66
|
+
// content doesn't resize when the system bars hide and show.
|
|
67
|
+
| View.SYSTEM_UI_FLAG_LAYOUT_STABLE
|
|
68
|
+
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
|
|
69
|
+
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
|
|
70
|
+
// Hide the nav bar and status bar
|
|
71
|
+
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
|
|
72
|
+
| View.SYSTEM_UI_FLAG_FULLSCREEN);
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
To change the Android build version, change the **minSdkVersion** to at least 28 in the **variables.gradle** file. <br />
|
|
76
|
+
For more information please see Android's [immersive](https://developer.android.com/training/system-ui/immersive), and [short edges](https://developer.android.com/reference/android/view/WindowManager.LayoutParams#LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES) documentation.
|
|
77
|
+
|
|
78
|
+
## Usage
|
|
79
|
+
Register the plugin via the entry file of your project.
|
|
80
|
+
|
|
81
|
+
```javascript
|
|
82
|
+
// Register Capacitor Plugin...
|
|
83
|
+
import '@capacitor-community/safe-area';
|
|
84
|
+
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
It is **strongly** recomended that you use the **SafeAreaController** as it makes it super easy to use the plugin :)
|
|
88
|
+
|
|
89
|
+
```javascript
|
|
90
|
+
import { SafeAreaController } from '@capacitor-community/safe-area';
|
|
91
|
+
|
|
92
|
+
// Initialize the controller.
|
|
93
|
+
SafeAreaController.load();
|
|
94
|
+
|
|
95
|
+
// Gets the insets object
|
|
96
|
+
// Shape
|
|
97
|
+
/*
|
|
98
|
+
{
|
|
99
|
+
top: number,
|
|
100
|
+
bottom: number,
|
|
101
|
+
right: number,
|
|
102
|
+
left: number,
|
|
103
|
+
}
|
|
104
|
+
*/
|
|
105
|
+
SafeAreaController.getInsets();
|
|
106
|
+
|
|
107
|
+
// Use this to listen for changes in the insets.
|
|
108
|
+
// i.e. when the device is rotated
|
|
109
|
+
SafeAreaController.addListener((insets) => {
|
|
110
|
+
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
// Use this to force the plugin to invoke the event
|
|
114
|
+
// Example, after you add a listener perhaps you invoke refresh
|
|
115
|
+
// to get the most up-to-date inset values.
|
|
116
|
+
SafeAreaController.refresh();
|
|
117
|
+
|
|
118
|
+
// Uninitialize the controller when you don't need it anymore.
|
|
119
|
+
SafeAreaController.unload();
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
Once the **SafeAreaController** has been loaded, it will inject CSS variables for you to use in your style sheets.
|
|
123
|
+
|
|
124
|
+
```css
|
|
125
|
+
/* styling for every case Web, iOS, and/or Android */
|
|
126
|
+
.myContainer {
|
|
127
|
+
paddingTop: max(1.5rem, val(--safe-area-inset-top));
|
|
128
|
+
paddingLeft: max(1.5rem, val(--safe-area-inset-left));
|
|
129
|
+
paddingRight: max(1.5rem, val(--safe-area-inset-right));
|
|
130
|
+
paddingBottom: val(--safe-area-inset-bottom);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/* If you need Android specific stying */
|
|
134
|
+
.myContainerForAndroidOnly {
|
|
135
|
+
paddingTop: max(1.5rem, val(--android-safe-area-inset-top));
|
|
136
|
+
paddingLeft: max(1.5rem, val(--android-safe-area-inset-left));
|
|
137
|
+
paddingRight: max(1.5rem, val(--android-safe-area-inset-right));
|
|
138
|
+
paddingBottom: val(--android-safe-area-inset-bottom);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/* If you need iOS specific styling */
|
|
142
|
+
.myContainerForIOSOnly {
|
|
143
|
+
paddingTop: max(1.5rem, val(--ios-safe-area-inset-top));
|
|
144
|
+
paddingLeft: max(1.5rem, val(--ios-safe-area-inset-left));
|
|
145
|
+
paddingRight: max(1.5rem, val(--ios-safe-area-inset-right));
|
|
146
|
+
paddingBottom: val(--ios-safe-area-inset-bottom);
|
|
147
|
+
}
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
This can also be used with the styles attribute in something like React.js for example.
|
|
151
|
+
```jsx
|
|
152
|
+
// This div will grow to cover the area of the cutout
|
|
153
|
+
// this would be at the very top.
|
|
154
|
+
<div
|
|
155
|
+
style={{
|
|
156
|
+
height: "var(--safe-area-inset-top)",
|
|
157
|
+
backgroundColor: "#12005e"
|
|
158
|
+
}}>
|
|
159
|
+
</div>
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
<details>
|
|
163
|
+
<summary>React - SafeAreaInsetsProvider</summary>
|
|
164
|
+
|
|
165
|
+
Here is a component that can be used by React.js developers. This handles everything for you via the SafeAreaController. There is a hook you can use as well called **useSafeAreaInsetsState** which will return a JSON object with top, bottom, right, and left number properties.
|
|
166
|
+
|
|
167
|
+
```javascript
|
|
168
|
+
import * as React from 'react';
|
|
169
|
+
import { SafeAreaController } from '@capacitor-community/safe-area';
|
|
170
|
+
|
|
171
|
+
const StateContext = React.createContext();
|
|
172
|
+
|
|
173
|
+
export const useSafeAreaInsetsState = () => {
|
|
174
|
+
const context = React.useContext(StateContext);
|
|
175
|
+
|
|
176
|
+
if(context === undefined)
|
|
177
|
+
throw new Error("Cannot use 'useSafeAreaInsetsState' outside of a SafeAreaInsetsProvider!");
|
|
178
|
+
|
|
179
|
+
return context;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
const SafeAreaInsetsProvider = ({children}) => {
|
|
183
|
+
const [state, setState] = React.useState({
|
|
184
|
+
top: 0,
|
|
185
|
+
bottom: 0,
|
|
186
|
+
right: 0,
|
|
187
|
+
left: 0
|
|
188
|
+
});
|
|
189
|
+
|
|
190
|
+
React.useState(() => {
|
|
191
|
+
SafeAreaController.addListener((insets) => {
|
|
192
|
+
setState(insets);
|
|
193
|
+
});
|
|
194
|
+
|
|
195
|
+
SafeAreaController.load();
|
|
196
|
+
|
|
197
|
+
return () => {
|
|
198
|
+
SafeAreaController.removeAllListeners();
|
|
199
|
+
SafeAreaController.unload();
|
|
200
|
+
}
|
|
201
|
+
}, []);
|
|
202
|
+
|
|
203
|
+
return (
|
|
204
|
+
<StateContext.Provider value={state}>
|
|
205
|
+
{children}
|
|
206
|
+
</StateContext.Provider>
|
|
207
|
+
)
|
|
208
|
+
};
|
|
209
|
+
|
|
210
|
+
export default SafeAreaInsetsProvider;
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
You can then use this provider ideally in the **index** file of your project.
|
|
214
|
+
|
|
215
|
+
```javascript
|
|
216
|
+
ReactDOM.render(
|
|
217
|
+
<React.StrictMode>
|
|
218
|
+
<SafeAreaInsetsProvider>
|
|
219
|
+
<App />
|
|
220
|
+
</SafeAreaInsetsProvider>
|
|
221
|
+
</React.StrictMode>,
|
|
222
|
+
document.getElementById('root')
|
|
223
|
+
);
|
|
224
|
+
```
|
|
225
|
+
</details>
|
package/android/build.gradle
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
ext {
|
|
2
2
|
junitVersion = project.hasProperty('junitVersion') ? rootProject.ext.junitVersion : '4.13.2'
|
|
3
|
-
androidxAppCompatVersion = project.hasProperty('androidxAppCompatVersion') ? rootProject.ext.androidxAppCompatVersion : '1.
|
|
4
|
-
androidxJunitVersion = project.hasProperty('androidxJunitVersion') ? rootProject.ext.androidxJunitVersion : '1.1
|
|
5
|
-
androidxEspressoCoreVersion = project.hasProperty('androidxEspressoCoreVersion') ? rootProject.ext.androidxEspressoCoreVersion : '3.
|
|
3
|
+
androidxAppCompatVersion = project.hasProperty('androidxAppCompatVersion') ? rootProject.ext.androidxAppCompatVersion : '1.7.0'
|
|
4
|
+
androidxJunitVersion = project.hasProperty('androidxJunitVersion') ? rootProject.ext.androidxJunitVersion : '1.2.1'
|
|
5
|
+
androidxEspressoCoreVersion = project.hasProperty('androidxEspressoCoreVersion') ? rootProject.ext.androidxEspressoCoreVersion : '3.6.1'
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
buildscript {
|
|
@@ -11,7 +11,7 @@ buildscript {
|
|
|
11
11
|
mavenCentral()
|
|
12
12
|
}
|
|
13
13
|
dependencies {
|
|
14
|
-
classpath 'com.android.tools.build:gradle:8.2
|
|
14
|
+
classpath 'com.android.tools.build:gradle:8.7.2'
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
|
|
@@ -19,10 +19,10 @@ apply plugin: 'com.android.library'
|
|
|
19
19
|
|
|
20
20
|
android {
|
|
21
21
|
namespace "com.getcapacitor.community.plugins.safearea"
|
|
22
|
-
compileSdk project.hasProperty('compileSdkVersion') ? rootProject.ext.compileSdkVersion :
|
|
22
|
+
compileSdk project.hasProperty('compileSdkVersion') ? rootProject.ext.compileSdkVersion : 35
|
|
23
23
|
defaultConfig {
|
|
24
|
-
minSdkVersion project.hasProperty('minSdkVersion') ? rootProject.ext.minSdkVersion :
|
|
25
|
-
targetSdkVersion project.hasProperty('targetSdkVersion') ? rootProject.ext.targetSdkVersion :
|
|
24
|
+
minSdkVersion project.hasProperty('minSdkVersion') ? rootProject.ext.minSdkVersion : 23
|
|
25
|
+
targetSdkVersion project.hasProperty('targetSdkVersion') ? rootProject.ext.targetSdkVersion : 35
|
|
26
26
|
versionCode 1
|
|
27
27
|
versionName "1.0"
|
|
28
28
|
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
|
|
@@ -37,8 +37,8 @@ android {
|
|
|
37
37
|
abortOnError false
|
|
38
38
|
}
|
|
39
39
|
compileOptions {
|
|
40
|
-
sourceCompatibility JavaVersion.
|
|
41
|
-
targetCompatibility JavaVersion.
|
|
40
|
+
sourceCompatibility JavaVersion.VERSION_21
|
|
41
|
+
targetCompatibility JavaVersion.VERSION_21
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
|
package/android/src/main/java/com/getcapacitor/community/plugins/safearea/SafeAreaPlugin.java
CHANGED
|
@@ -46,7 +46,7 @@ public class SafeAreaPlugin extends Plugin {
|
|
|
46
46
|
@PluginMethod
|
|
47
47
|
public void refresh(PluginCall call) {
|
|
48
48
|
this.doNotify();
|
|
49
|
-
call.
|
|
49
|
+
call.resolve();
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
@PluginMethod
|
|
@@ -55,7 +55,7 @@ public class SafeAreaPlugin extends Plugin {
|
|
|
55
55
|
|
|
56
56
|
ret.put(SafeAreaPlugin.KEY_INSET, this.safeAreaInsets.toJSON());
|
|
57
57
|
|
|
58
|
-
call.
|
|
58
|
+
call.resolve(ret);
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
protected void getSafeArea(WindowInsets windowInsets) {
|
package/dist/plugin.cjs.js
CHANGED
package/dist/plugin.cjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plugin.cjs.js","sources":["esm/controller.js","esm/definitions.js","esm/web.js","esm/index.js"],"sourcesContent":["import { Capacitor } from '@capacitor/core';\nexport class SafeAreaController {\n constructor(safeAreaPlugin) {\n this.safeAreaPlugin = safeAreaPlugin;\n this.insets = {\n top: 0,\n bottom: 0,\n right: 0,\n left: 0\n };\n this.callback = undefined;\n this.listeners = [];\n }\n async load() {\n var _a;\n await ((_a = this.callback) === null || _a === void 0 ? void 0 : _a.remove());\n this.callback = await this.safeAreaPlugin.addListener(\"safeAreaPluginsInsetChange\", (result) => {\n this.updateInsets(result.insets);\n this.injectCSSVariables();\n this.notifyListeners();\n });\n await this.refresh();\n }\n addListener(listener) {\n this.listeners.push(listener);\n }\n removeListener(listener) {\n const index = this.listeners.indexOf(listener);\n if (index >= 0)\n delete this.listeners[index];\n }\n removeAllListeners() {\n this.listeners.length = 0;\n }\n injectCSSVariables() {\n for (const inset in this.insets) {\n switch (Capacitor.getPlatform()) {\n case \"android\":\n case \"ios\":\n {\n document.documentElement.style.setProperty(`--${Capacitor.getPlatform()}-safe-area-inset-${inset}`, `${this.insets[inset]}px`);\n document.documentElement.style.setProperty(`--safe-area-inset-${inset}`, `var(--${Capacitor.getPlatform()}-safe-area-inset-${inset}, env(safe-area-inset-${inset}))`);\n }\n break;\n default:\n {\n document.documentElement.style.setProperty(`--safe-area-inset-${inset}`, \"0px\");\n }\n break;\n }\n }\n }\n async refresh() {\n const result = await this.safeAreaPlugin.getSafeAreaInsets();\n this.updateInsets(result.insets);\n this.injectCSSVariables();\n this.notifyListeners();\n }\n getInsets() {\n return this.insets;\n }\n unload() {\n var _a;\n (_a = this.callback) === null || _a === void 0 ? void 0 : _a.remove();\n }\n notifyListeners() {\n this.listeners.forEach((listener) => listener({ insets: this.insets }));\n }\n updateInsets(insets) {\n this.insets = insets;\n }\n}\n;\n//# sourceMappingURL=controller.js.map",";\nexport const SafeAreaInsetsChangeEventName = \"safeAreaPluginsInsetChange\";\n//# sourceMappingURL=definitions.js.map","import { WebPlugin } from '@capacitor/core';\nimport { SafeAreaInsetsChangeEventName } from './definitions';\nexport class SafeAreaWeb extends WebPlugin {\n /**\n * Call this whenever you want the EventOnInsetsChanged to be fired manually.\n */\n async refresh() {\n const dummy = {\n top: 0,\n bottom: 0,\n right: 0,\n left: 0\n };\n this.notifyListeners(SafeAreaInsetsChangeEventName, {\n insets: dummy\n });\n }\n /**\n * Gets the current SafeAreaInsets.\n */\n getSafeAreaInsets() {\n const dummy = {\n top: 0,\n bottom: 0,\n right: 0,\n left: 0,\n };\n return new Promise((resolve) => {\n resolve({ insets: dummy });\n });\n }\n}\n//# sourceMappingURL=web.js.map","import { registerPlugin } from '@capacitor/core';\nimport { SafeAreaController } from './controller';\nconst SafeArea = registerPlugin('SafeArea', {\n web: () => import('./web').then(m => new m.SafeAreaWeb()),\n});\nexport * from './definitions';\nexport * from './web';\nconst controller = new SafeAreaController(SafeArea);\nexport { controller as SafeAreaController };\n//# sourceMappingURL=index.js.map"],"names":["Capacitor","WebPlugin","registerPlugin"],"mappings":"
|
|
1
|
+
{"version":3,"file":"plugin.cjs.js","sources":["esm/controller.js","esm/definitions.js","esm/web.js","esm/index.js"],"sourcesContent":["import { Capacitor } from '@capacitor/core';\nexport class SafeAreaController {\n constructor(safeAreaPlugin) {\n this.safeAreaPlugin = safeAreaPlugin;\n this.insets = {\n top: 0,\n bottom: 0,\n right: 0,\n left: 0\n };\n this.callback = undefined;\n this.listeners = [];\n }\n async load() {\n var _a;\n await ((_a = this.callback) === null || _a === void 0 ? void 0 : _a.remove());\n this.callback = await this.safeAreaPlugin.addListener(\"safeAreaPluginsInsetChange\", (result) => {\n this.updateInsets(result.insets);\n this.injectCSSVariables();\n this.notifyListeners();\n });\n await this.refresh();\n }\n addListener(listener) {\n this.listeners.push(listener);\n }\n removeListener(listener) {\n const index = this.listeners.indexOf(listener);\n if (index >= 0)\n delete this.listeners[index];\n }\n removeAllListeners() {\n this.listeners.length = 0;\n }\n injectCSSVariables() {\n for (const inset in this.insets) {\n switch (Capacitor.getPlatform()) {\n case \"android\":\n case \"ios\":\n {\n document.documentElement.style.setProperty(`--${Capacitor.getPlatform()}-safe-area-inset-${inset}`, `${this.insets[inset]}px`);\n document.documentElement.style.setProperty(`--safe-area-inset-${inset}`, `var(--${Capacitor.getPlatform()}-safe-area-inset-${inset}, env(safe-area-inset-${inset}))`);\n }\n break;\n default:\n {\n document.documentElement.style.setProperty(`--safe-area-inset-${inset}`, \"0px\");\n }\n break;\n }\n }\n }\n async refresh() {\n const result = await this.safeAreaPlugin.getSafeAreaInsets();\n this.updateInsets(result.insets);\n this.injectCSSVariables();\n this.notifyListeners();\n }\n getInsets() {\n return this.insets;\n }\n unload() {\n var _a;\n (_a = this.callback) === null || _a === void 0 ? void 0 : _a.remove();\n }\n notifyListeners() {\n this.listeners.forEach((listener) => listener({ insets: this.insets }));\n }\n updateInsets(insets) {\n this.insets = insets;\n }\n}\n;\n//# sourceMappingURL=controller.js.map",";\nexport const SafeAreaInsetsChangeEventName = \"safeAreaPluginsInsetChange\";\n//# sourceMappingURL=definitions.js.map","import { WebPlugin } from '@capacitor/core';\nimport { SafeAreaInsetsChangeEventName } from './definitions';\nexport class SafeAreaWeb extends WebPlugin {\n /**\n * Call this whenever you want the EventOnInsetsChanged to be fired manually.\n */\n async refresh() {\n const dummy = {\n top: 0,\n bottom: 0,\n right: 0,\n left: 0\n };\n this.notifyListeners(SafeAreaInsetsChangeEventName, {\n insets: dummy\n });\n }\n /**\n * Gets the current SafeAreaInsets.\n */\n getSafeAreaInsets() {\n const dummy = {\n top: 0,\n bottom: 0,\n right: 0,\n left: 0,\n };\n return new Promise((resolve) => {\n resolve({ insets: dummy });\n });\n }\n}\n//# sourceMappingURL=web.js.map","import { registerPlugin } from '@capacitor/core';\nimport { SafeAreaController } from './controller';\nconst SafeArea = registerPlugin('SafeArea', {\n web: () => import('./web').then(m => new m.SafeAreaWeb()),\n});\nexport * from './definitions';\nexport * from './web';\nconst controller = new SafeAreaController(SafeArea);\nexport { controller as SafeAreaController };\n//# sourceMappingURL=index.js.map"],"names":["Capacitor","WebPlugin","registerPlugin"],"mappings":"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"}
|
package/dist/plugin.js
CHANGED
|
@@ -120,8 +120,6 @@ var capacitorSafeArea = (function (exports, core) {
|
|
|
120
120
|
exports.SafeAreaInsetsChangeEventName = SafeAreaInsetsChangeEventName;
|
|
121
121
|
exports.SafeAreaWeb = SafeAreaWeb;
|
|
122
122
|
|
|
123
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
124
|
-
|
|
125
123
|
return exports;
|
|
126
124
|
|
|
127
125
|
})({}, capacitorExports);
|
package/dist/plugin.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plugin.js","sources":["esm/controller.js","esm/definitions.js","esm/web.js","esm/index.js"],"sourcesContent":["import { Capacitor } from '@capacitor/core';\nexport class SafeAreaController {\n constructor(safeAreaPlugin) {\n this.safeAreaPlugin = safeAreaPlugin;\n this.insets = {\n top: 0,\n bottom: 0,\n right: 0,\n left: 0\n };\n this.callback = undefined;\n this.listeners = [];\n }\n async load() {\n var _a;\n await ((_a = this.callback) === null || _a === void 0 ? void 0 : _a.remove());\n this.callback = await this.safeAreaPlugin.addListener(\"safeAreaPluginsInsetChange\", (result) => {\n this.updateInsets(result.insets);\n this.injectCSSVariables();\n this.notifyListeners();\n });\n await this.refresh();\n }\n addListener(listener) {\n this.listeners.push(listener);\n }\n removeListener(listener) {\n const index = this.listeners.indexOf(listener);\n if (index >= 0)\n delete this.listeners[index];\n }\n removeAllListeners() {\n this.listeners.length = 0;\n }\n injectCSSVariables() {\n for (const inset in this.insets) {\n switch (Capacitor.getPlatform()) {\n case \"android\":\n case \"ios\":\n {\n document.documentElement.style.setProperty(`--${Capacitor.getPlatform()}-safe-area-inset-${inset}`, `${this.insets[inset]}px`);\n document.documentElement.style.setProperty(`--safe-area-inset-${inset}`, `var(--${Capacitor.getPlatform()}-safe-area-inset-${inset}, env(safe-area-inset-${inset}))`);\n }\n break;\n default:\n {\n document.documentElement.style.setProperty(`--safe-area-inset-${inset}`, \"0px\");\n }\n break;\n }\n }\n }\n async refresh() {\n const result = await this.safeAreaPlugin.getSafeAreaInsets();\n this.updateInsets(result.insets);\n this.injectCSSVariables();\n this.notifyListeners();\n }\n getInsets() {\n return this.insets;\n }\n unload() {\n var _a;\n (_a = this.callback) === null || _a === void 0 ? void 0 : _a.remove();\n }\n notifyListeners() {\n this.listeners.forEach((listener) => listener({ insets: this.insets }));\n }\n updateInsets(insets) {\n this.insets = insets;\n }\n}\n;\n//# sourceMappingURL=controller.js.map",";\nexport const SafeAreaInsetsChangeEventName = \"safeAreaPluginsInsetChange\";\n//# sourceMappingURL=definitions.js.map","import { WebPlugin } from '@capacitor/core';\nimport { SafeAreaInsetsChangeEventName } from './definitions';\nexport class SafeAreaWeb extends WebPlugin {\n /**\n * Call this whenever you want the EventOnInsetsChanged to be fired manually.\n */\n async refresh() {\n const dummy = {\n top: 0,\n bottom: 0,\n right: 0,\n left: 0\n };\n this.notifyListeners(SafeAreaInsetsChangeEventName, {\n insets: dummy\n });\n }\n /**\n * Gets the current SafeAreaInsets.\n */\n getSafeAreaInsets() {\n const dummy = {\n top: 0,\n bottom: 0,\n right: 0,\n left: 0,\n };\n return new Promise((resolve) => {\n resolve({ insets: dummy });\n });\n }\n}\n//# sourceMappingURL=web.js.map","import { registerPlugin } from '@capacitor/core';\nimport { SafeAreaController } from './controller';\nconst SafeArea = registerPlugin('SafeArea', {\n web: () => import('./web').then(m => new m.SafeAreaWeb()),\n});\nexport * from './definitions';\nexport * from './web';\nconst controller = new SafeAreaController(SafeArea);\nexport { controller as SafeAreaController };\n//# sourceMappingURL=index.js.map"],"names":["Capacitor","WebPlugin","registerPlugin"],"mappings":";;;IACO,MAAM,kBAAkB,CAAC;IAChC,IAAI,WAAW,CAAC,cAAc,EAAE;IAChC,QAAQ,IAAI,CAAC,cAAc,GAAG,cAAc
|
|
1
|
+
{"version":3,"file":"plugin.js","sources":["esm/controller.js","esm/definitions.js","esm/web.js","esm/index.js"],"sourcesContent":["import { Capacitor } from '@capacitor/core';\nexport class SafeAreaController {\n constructor(safeAreaPlugin) {\n this.safeAreaPlugin = safeAreaPlugin;\n this.insets = {\n top: 0,\n bottom: 0,\n right: 0,\n left: 0\n };\n this.callback = undefined;\n this.listeners = [];\n }\n async load() {\n var _a;\n await ((_a = this.callback) === null || _a === void 0 ? void 0 : _a.remove());\n this.callback = await this.safeAreaPlugin.addListener(\"safeAreaPluginsInsetChange\", (result) => {\n this.updateInsets(result.insets);\n this.injectCSSVariables();\n this.notifyListeners();\n });\n await this.refresh();\n }\n addListener(listener) {\n this.listeners.push(listener);\n }\n removeListener(listener) {\n const index = this.listeners.indexOf(listener);\n if (index >= 0)\n delete this.listeners[index];\n }\n removeAllListeners() {\n this.listeners.length = 0;\n }\n injectCSSVariables() {\n for (const inset in this.insets) {\n switch (Capacitor.getPlatform()) {\n case \"android\":\n case \"ios\":\n {\n document.documentElement.style.setProperty(`--${Capacitor.getPlatform()}-safe-area-inset-${inset}`, `${this.insets[inset]}px`);\n document.documentElement.style.setProperty(`--safe-area-inset-${inset}`, `var(--${Capacitor.getPlatform()}-safe-area-inset-${inset}, env(safe-area-inset-${inset}))`);\n }\n break;\n default:\n {\n document.documentElement.style.setProperty(`--safe-area-inset-${inset}`, \"0px\");\n }\n break;\n }\n }\n }\n async refresh() {\n const result = await this.safeAreaPlugin.getSafeAreaInsets();\n this.updateInsets(result.insets);\n this.injectCSSVariables();\n this.notifyListeners();\n }\n getInsets() {\n return this.insets;\n }\n unload() {\n var _a;\n (_a = this.callback) === null || _a === void 0 ? void 0 : _a.remove();\n }\n notifyListeners() {\n this.listeners.forEach((listener) => listener({ insets: this.insets }));\n }\n updateInsets(insets) {\n this.insets = insets;\n }\n}\n;\n//# sourceMappingURL=controller.js.map",";\nexport const SafeAreaInsetsChangeEventName = \"safeAreaPluginsInsetChange\";\n//# sourceMappingURL=definitions.js.map","import { WebPlugin } from '@capacitor/core';\nimport { SafeAreaInsetsChangeEventName } from './definitions';\nexport class SafeAreaWeb extends WebPlugin {\n /**\n * Call this whenever you want the EventOnInsetsChanged to be fired manually.\n */\n async refresh() {\n const dummy = {\n top: 0,\n bottom: 0,\n right: 0,\n left: 0\n };\n this.notifyListeners(SafeAreaInsetsChangeEventName, {\n insets: dummy\n });\n }\n /**\n * Gets the current SafeAreaInsets.\n */\n getSafeAreaInsets() {\n const dummy = {\n top: 0,\n bottom: 0,\n right: 0,\n left: 0,\n };\n return new Promise((resolve) => {\n resolve({ insets: dummy });\n });\n }\n}\n//# sourceMappingURL=web.js.map","import { registerPlugin } from '@capacitor/core';\nimport { SafeAreaController } from './controller';\nconst SafeArea = registerPlugin('SafeArea', {\n web: () => import('./web').then(m => new m.SafeAreaWeb()),\n});\nexport * from './definitions';\nexport * from './web';\nconst controller = new SafeAreaController(SafeArea);\nexport { controller as SafeAreaController };\n//# sourceMappingURL=index.js.map"],"names":["Capacitor","WebPlugin","registerPlugin"],"mappings":"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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
#import <UIKit/UIKit.h>
|
|
2
|
-
|
|
3
|
-
//! Project version number for Plugin.
|
|
4
|
-
FOUNDATION_EXPORT double PluginVersionNumber;
|
|
5
|
-
|
|
6
|
-
//! Project version string for Plugin.
|
|
7
|
-
FOUNDATION_EXPORT const unsigned char PluginVersionString[];
|
|
8
|
-
|
|
9
|
-
// In this header, you should import all the public headers of your framework using statements like #import <Plugin/PublicHeader.h>
|
|
10
|
-
|
|
1
|
+
#import <UIKit/UIKit.h>
|
|
2
|
+
|
|
3
|
+
//! Project version number for Plugin.
|
|
4
|
+
FOUNDATION_EXPORT double PluginVersionNumber;
|
|
5
|
+
|
|
6
|
+
//! Project version string for Plugin.
|
|
7
|
+
FOUNDATION_EXPORT const unsigned char PluginVersionString[];
|
|
8
|
+
|
|
9
|
+
// In this header, you should import all the public headers of your framework using statements like #import <Plugin/PublicHeader.h>
|
|
10
|
+
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
#import <Foundation/Foundation.h>
|
|
2
|
-
#import <Capacitor/Capacitor.h>
|
|
3
|
-
|
|
4
|
-
// Define the plugin using the CAP_PLUGIN Macro, and
|
|
5
|
-
// each method the plugin supports using the CAP_PLUGIN_METHOD macro.
|
|
6
|
-
CAP_PLUGIN(SafeAreaPlugin, "SafeArea",
|
|
7
|
-
CAP_PLUGIN_METHOD(refresh, CAPPluginReturnPromise);
|
|
8
|
-
CAP_PLUGIN_METHOD(getSafeAreaInsets, CAPPluginReturnPromise);
|
|
9
|
-
)
|
|
1
|
+
#import <Foundation/Foundation.h>
|
|
2
|
+
#import <Capacitor/Capacitor.h>
|
|
3
|
+
|
|
4
|
+
// Define the plugin using the CAP_PLUGIN Macro, and
|
|
5
|
+
// each method the plugin supports using the CAP_PLUGIN_METHOD macro.
|
|
6
|
+
CAP_PLUGIN(SafeAreaPlugin, "SafeArea",
|
|
7
|
+
CAP_PLUGIN_METHOD(refresh, CAPPluginReturnPromise);
|
|
8
|
+
CAP_PLUGIN_METHOD(getSafeAreaInsets, CAPPluginReturnPromise);
|
|
9
|
+
)
|
|
@@ -1,93 +1,93 @@
|
|
|
1
|
-
import Foundation
|
|
2
|
-
import Capacitor
|
|
3
|
-
|
|
4
|
-
func makeSafeArea(_ insets: UIEdgeInsets) -> [String :[String: Int]] {
|
|
5
|
-
return [
|
|
6
|
-
"insets": [
|
|
7
|
-
"top": Int(insets.top),
|
|
8
|
-
"bottom": Int(insets.bottom),
|
|
9
|
-
"right": Int(insets.right),
|
|
10
|
-
"left": Int(insets.left)
|
|
11
|
-
]
|
|
12
|
-
];
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
func getInsets(controller: UIViewController) -> UIEdgeInsets {
|
|
16
|
-
let keyWindow = UIApplication.shared.windows
|
|
17
|
-
.filter { window in window.rootViewController == controller }
|
|
18
|
-
.first
|
|
19
|
-
|
|
20
|
-
if (keyWindow == nil) {
|
|
21
|
-
return UIEdgeInsets.zero
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
return keyWindow!.safeAreaInsets
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
let EVENT_ON_INSETS_CHANGED = "safeAreaPluginsInsetChange"
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
* Please read the Capacitor iOS Plugin Development Guide
|
|
31
|
-
* here: https://capacitorjs.com/docs/plugins/ios
|
|
32
|
-
*/
|
|
33
|
-
@objc(SafeAreaPlugin)
|
|
34
|
-
public class SafeAreaPlugin: CAPPlugin {
|
|
35
|
-
public static let ViewSafeAreaInsetsDidChange = NSNotification.Name(rawValue: "SafeAreaPlugin.ViewSafeAreaInsetsDidChange");
|
|
36
|
-
|
|
37
|
-
private var safeArea = makeSafeArea(UIEdgeInsets.zero)
|
|
38
|
-
|
|
39
|
-
override public func load() {
|
|
40
|
-
NotificationCenter.default.addObserver(
|
|
41
|
-
self,
|
|
42
|
-
selector: #selector(self.onDidBecomeActive),
|
|
43
|
-
name: UIApplication.didBecomeActiveNotification,
|
|
44
|
-
object: nil
|
|
45
|
-
)
|
|
46
|
-
|
|
47
|
-
NotificationCenter.default.addObserver(
|
|
48
|
-
self,
|
|
49
|
-
selector: #selector(self.onViewSafeAreaInsetsDidChange),
|
|
50
|
-
name: SafeAreaPlugin.ViewSafeAreaInsetsDidChange,
|
|
51
|
-
object: nil
|
|
52
|
-
)
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
deinit {
|
|
56
|
-
NotificationCenter.default.removeObserver(self)
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
@objc func refresh(_ call: CAPPluginCall) {
|
|
60
|
-
let insets = getInsets(controller: (self.bridge?.viewController)!)
|
|
61
|
-
self.changeSafeArea(insets);
|
|
62
|
-
call.resolve()
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
@objc func getSafeAreaInsets(_ call: CAPPluginCall) {
|
|
66
|
-
call.resolve(self.safeArea)
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
@objc func onDidBecomeActive() {
|
|
70
|
-
let insets = getInsets(controller: (self.bridge?.viewController)!)
|
|
71
|
-
self.changeSafeArea(insets)
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
@objc func onViewSafeAreaInsetsDidChange() {
|
|
75
|
-
let insets = getInsets(controller: (self.bridge?.viewController)!)
|
|
76
|
-
self.changeSafeArea(insets)
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
func changeSafeArea(_ insets: UIEdgeInsets) {
|
|
80
|
-
self.safeArea = makeSafeArea(insets)
|
|
81
|
-
self.notifyListeners(EVENT_ON_INSETS_CHANGED, data: self.safeArea)
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
extension CAPBridgeViewController {
|
|
86
|
-
public override func viewSafeAreaInsetsDidChange() {
|
|
87
|
-
super.viewSafeAreaInsetsDidChange()
|
|
88
|
-
NotificationCenter.default.post(
|
|
89
|
-
name: SafeAreaPlugin.ViewSafeAreaInsetsDidChange,
|
|
90
|
-
object: nil
|
|
91
|
-
)
|
|
92
|
-
}
|
|
93
|
-
}
|
|
1
|
+
import Foundation
|
|
2
|
+
import Capacitor
|
|
3
|
+
|
|
4
|
+
func makeSafeArea(_ insets: UIEdgeInsets) -> [String :[String: Int]] {
|
|
5
|
+
return [
|
|
6
|
+
"insets": [
|
|
7
|
+
"top": Int(insets.top),
|
|
8
|
+
"bottom": Int(insets.bottom),
|
|
9
|
+
"right": Int(insets.right),
|
|
10
|
+
"left": Int(insets.left)
|
|
11
|
+
]
|
|
12
|
+
];
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
func getInsets(controller: UIViewController) -> UIEdgeInsets {
|
|
16
|
+
let keyWindow = UIApplication.shared.windows
|
|
17
|
+
.filter { window in window.rootViewController == controller }
|
|
18
|
+
.first
|
|
19
|
+
|
|
20
|
+
if (keyWindow == nil) {
|
|
21
|
+
return UIEdgeInsets.zero
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
return keyWindow!.safeAreaInsets
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
let EVENT_ON_INSETS_CHANGED = "safeAreaPluginsInsetChange"
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Please read the Capacitor iOS Plugin Development Guide
|
|
31
|
+
* here: https://capacitorjs.com/docs/plugins/ios
|
|
32
|
+
*/
|
|
33
|
+
@objc(SafeAreaPlugin)
|
|
34
|
+
public class SafeAreaPlugin: CAPPlugin {
|
|
35
|
+
public static let ViewSafeAreaInsetsDidChange = NSNotification.Name(rawValue: "SafeAreaPlugin.ViewSafeAreaInsetsDidChange");
|
|
36
|
+
|
|
37
|
+
private var safeArea = makeSafeArea(UIEdgeInsets.zero)
|
|
38
|
+
|
|
39
|
+
override public func load() {
|
|
40
|
+
NotificationCenter.default.addObserver(
|
|
41
|
+
self,
|
|
42
|
+
selector: #selector(self.onDidBecomeActive),
|
|
43
|
+
name: UIApplication.didBecomeActiveNotification,
|
|
44
|
+
object: nil
|
|
45
|
+
)
|
|
46
|
+
|
|
47
|
+
NotificationCenter.default.addObserver(
|
|
48
|
+
self,
|
|
49
|
+
selector: #selector(self.onViewSafeAreaInsetsDidChange),
|
|
50
|
+
name: SafeAreaPlugin.ViewSafeAreaInsetsDidChange,
|
|
51
|
+
object: nil
|
|
52
|
+
)
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
deinit {
|
|
56
|
+
NotificationCenter.default.removeObserver(self)
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
@objc func refresh(_ call: CAPPluginCall) {
|
|
60
|
+
let insets = getInsets(controller: (self.bridge?.viewController)!)
|
|
61
|
+
self.changeSafeArea(insets);
|
|
62
|
+
call.resolve()
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@objc func getSafeAreaInsets(_ call: CAPPluginCall) {
|
|
66
|
+
call.resolve(self.safeArea)
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@objc func onDidBecomeActive() {
|
|
70
|
+
let insets = getInsets(controller: (self.bridge?.viewController)!)
|
|
71
|
+
self.changeSafeArea(insets)
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
@objc func onViewSafeAreaInsetsDidChange() {
|
|
75
|
+
let insets = getInsets(controller: (self.bridge?.viewController)!)
|
|
76
|
+
self.changeSafeArea(insets)
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
func changeSafeArea(_ insets: UIEdgeInsets) {
|
|
80
|
+
self.safeArea = makeSafeArea(insets)
|
|
81
|
+
self.notifyListeners(EVENT_ON_INSETS_CHANGED, data: self.safeArea)
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
extension CAPBridgeViewController {
|
|
86
|
+
public override func viewSafeAreaInsetsDidChange() {
|
|
87
|
+
super.viewSafeAreaInsetsDidChange()
|
|
88
|
+
NotificationCenter.default.post(
|
|
89
|
+
name: SafeAreaPlugin.ViewSafeAreaInsetsDidChange,
|
|
90
|
+
object: nil
|
|
91
|
+
)
|
|
92
|
+
}
|
|
93
|
+
}
|
package/package.json
CHANGED
|
@@ -1,75 +1,75 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@hiloenergie/capacitor-plugin-safe-area",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "A plugin to expose the safe area insets from the native iOS/Android device to your web project.",
|
|
5
|
-
"author": "Kevin Pacheco",
|
|
6
|
-
"license": "MIT",
|
|
7
|
-
"repository": {
|
|
8
|
-
"type": "git",
|
|
9
|
-
"url": "https://dev.azure.com/HQCdevops/HQC/_git/capacitor-community-safe-area"
|
|
10
|
-
},
|
|
11
|
-
"bugs": {
|
|
12
|
-
"url": "https://dev.azure.com/HQCdevops/HQC/_git/capacitor-community-safe-area"
|
|
13
|
-
},
|
|
14
|
-
"main": "dist/plugin.cjs.js",
|
|
15
|
-
"module": "dist/esm/index.js",
|
|
16
|
-
"types": "dist/esm/index.d.ts",
|
|
17
|
-
"unpkg": "dist/plugin.js",
|
|
18
|
-
"files": [
|
|
19
|
-
"android/src/main/",
|
|
20
|
-
"android/build.gradle",
|
|
21
|
-
"dist/",
|
|
22
|
-
"ios/Plugin/",
|
|
23
|
-
"HiloenergieCapacitorPluginSafeArea.podspec"
|
|
24
|
-
],
|
|
25
|
-
"keywords": [
|
|
26
|
-
"capacitor",
|
|
27
|
-
"plugin",
|
|
28
|
-
"native"
|
|
29
|
-
],
|
|
30
|
-
"scripts": {
|
|
31
|
-
"verify": "npm run verify:ios && npm run verify:android && npm run verify:web",
|
|
32
|
-
"verify:ios": "cd ios && pod install && xcodebuild -workspace Plugin.xcworkspace -scheme Plugin && cd ..",
|
|
33
|
-
"verify:android": "cd android && ./gradlew clean build test && cd ..",
|
|
34
|
-
"verify:web": "npm run build",
|
|
35
|
-
"lint": "npm run eslint && npm run prettier -- --check && npm run swiftlint -- lint",
|
|
36
|
-
"fmt": "npm run eslint -- --fix && npm run prettier -- --write && npm run swiftlint -- autocorrect --format",
|
|
37
|
-
"eslint": "eslint . --ext ts",
|
|
38
|
-
"prettier": "prettier \"**/*.{css,html,ts,js,java}\"",
|
|
39
|
-
"swiftlint": "node-swiftlint",
|
|
40
|
-
"docgen": "docgen --api SafeAreaPlugin --output-readme README.md --output-json dist/docs.json",
|
|
41
|
-
"build": "npm run clean && npm run docgen && tsc && rollup -c rollup.config.
|
|
42
|
-
"clean": "rimraf ./dist",
|
|
43
|
-
"watch": "tsc --watch",
|
|
44
|
-
"prepublishOnly": "npm run build"
|
|
45
|
-
},
|
|
46
|
-
"devDependencies": {
|
|
47
|
-
"@capacitor/android": "^
|
|
48
|
-
"@capacitor/core": "^
|
|
49
|
-
"@capacitor/docgen": "^0.
|
|
50
|
-
"@capacitor/ios": "^
|
|
51
|
-
"@ionic/eslint-config": "^0.4.0",
|
|
52
|
-
"@ionic/prettier-config": "^
|
|
53
|
-
"@ionic/swiftlint-config": "^
|
|
54
|
-
"eslint": "^8.57.0",
|
|
55
|
-
"prettier": "
|
|
56
|
-
"prettier-plugin-java": "
|
|
57
|
-
"rimraf": "^
|
|
58
|
-
"rollup": "^
|
|
59
|
-
"swiftlint": "^
|
|
60
|
-
"typescript": "~5.0.2"
|
|
61
|
-
},
|
|
62
|
-
"peerDependencies": {
|
|
63
|
-
"@capacitor/core": "
|
|
64
|
-
},
|
|
65
|
-
"prettier": "@ionic/prettier-config",
|
|
66
|
-
"swiftlint": "@ionic/swiftlint-config",
|
|
67
|
-
"capacitor": {
|
|
68
|
-
"ios": {
|
|
69
|
-
"src": "ios"
|
|
70
|
-
},
|
|
71
|
-
"android": {
|
|
72
|
-
"src": "android"
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@hiloenergie/capacitor-plugin-safe-area",
|
|
3
|
+
"version": "0.0.13",
|
|
4
|
+
"description": "A plugin to expose the safe area insets from the native iOS/Android device to your web project.",
|
|
5
|
+
"author": "Kevin Pacheco",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://dev.azure.com/HQCdevops/HQC/_git/capacitor-community-safe-area"
|
|
10
|
+
},
|
|
11
|
+
"bugs": {
|
|
12
|
+
"url": "https://dev.azure.com/HQCdevops/HQC/_git/capacitor-community-safe-area"
|
|
13
|
+
},
|
|
14
|
+
"main": "dist/plugin.cjs.js",
|
|
15
|
+
"module": "dist/esm/index.js",
|
|
16
|
+
"types": "dist/esm/index.d.ts",
|
|
17
|
+
"unpkg": "dist/plugin.js",
|
|
18
|
+
"files": [
|
|
19
|
+
"android/src/main/",
|
|
20
|
+
"android/build.gradle",
|
|
21
|
+
"dist/",
|
|
22
|
+
"ios/Plugin/",
|
|
23
|
+
"HiloenergieCapacitorPluginSafeArea.podspec"
|
|
24
|
+
],
|
|
25
|
+
"keywords": [
|
|
26
|
+
"capacitor",
|
|
27
|
+
"plugin",
|
|
28
|
+
"native"
|
|
29
|
+
],
|
|
30
|
+
"scripts": {
|
|
31
|
+
"verify": "npm run verify:ios && npm run verify:android && npm run verify:web",
|
|
32
|
+
"verify:ios": "cd ios && pod install && xcodebuild -workspace Plugin.xcworkspace -scheme Plugin && cd ..",
|
|
33
|
+
"verify:android": "cd android && ./gradlew clean build test && cd ..",
|
|
34
|
+
"verify:web": "npm run build",
|
|
35
|
+
"lint": "npm run eslint && npm run prettier -- --check && npm run swiftlint -- lint",
|
|
36
|
+
"fmt": "npm run eslint -- --fix && npm run prettier -- --write && npm run swiftlint -- autocorrect --format",
|
|
37
|
+
"eslint": "eslint . --ext ts",
|
|
38
|
+
"prettier": "prettier \"**/*.{css,html,ts,js,java}\" --plugin=prettier-plugin-java",
|
|
39
|
+
"swiftlint": "node-swiftlint",
|
|
40
|
+
"docgen": "docgen --api SafeAreaPlugin --output-readme README.md --output-json dist/docs.json",
|
|
41
|
+
"build": "npm run clean && npm run docgen && tsc && rollup -c rollup.config.mjs",
|
|
42
|
+
"clean": "rimraf ./dist",
|
|
43
|
+
"watch": "tsc --watch",
|
|
44
|
+
"prepublishOnly": "npm run build"
|
|
45
|
+
},
|
|
46
|
+
"devDependencies": {
|
|
47
|
+
"@capacitor/android": "^7.4.2",
|
|
48
|
+
"@capacitor/core": "^7.4.2",
|
|
49
|
+
"@capacitor/docgen": "^0.3.0",
|
|
50
|
+
"@capacitor/ios": "^7.4.2",
|
|
51
|
+
"@ionic/eslint-config": "^0.4.0",
|
|
52
|
+
"@ionic/prettier-config": "^4.0.0",
|
|
53
|
+
"@ionic/swiftlint-config": "^2.0.0",
|
|
54
|
+
"eslint": "^8.57.0",
|
|
55
|
+
"prettier": "^3.4.2",
|
|
56
|
+
"prettier-plugin-java": "^2.6.6",
|
|
57
|
+
"rimraf": "^6.0.1",
|
|
58
|
+
"rollup": "^4.30.1",
|
|
59
|
+
"swiftlint": "^2.0.0",
|
|
60
|
+
"typescript": "~5.0.2"
|
|
61
|
+
},
|
|
62
|
+
"peerDependencies": {
|
|
63
|
+
"@capacitor/core": ">=7.0.0"
|
|
64
|
+
},
|
|
65
|
+
"prettier": "@ionic/prettier-config",
|
|
66
|
+
"swiftlint": "@ionic/swiftlint-config",
|
|
67
|
+
"capacitor": {
|
|
68
|
+
"ios": {
|
|
69
|
+
"src": "ios"
|
|
70
|
+
},
|
|
71
|
+
"android": {
|
|
72
|
+
"src": "android"
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|