Skip to content

Commit c29ede6

Browse files
soundproofbootsoundproofboot
committed
docs(vue): change name of takePhoto method to addNewToGallery to match new Angular docs
1 parent bc40cfb commit c29ede6

File tree

5 files changed

+44
-44
lines changed

5 files changed

+44
-44
lines changed

‎docs/vue/your-first-app/2-taking-photos.md‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import { Preferences } from '@capacitor/preferences';
3434

3535
// CHANGE: Create `usePhotoGallery` function.
3636
export const usePhotoGallery = () => {
37-
const takePhoto = async () => {
37+
const addNewToGallery = async () => {
3838
const photo = await Camera.getPhoto({
3939
resultType: CameraResultType.Uri,
4040
source: CameraSource.Camera,
@@ -43,18 +43,18 @@ export const usePhotoGallery = () => {
4343
};
4444

4545
return {
46-
takePhoto,
46+
addNewToGallery,
4747
};
4848
};
4949
```
5050

51-
Our `usePhotoGallery` function exposes a method called takePhoto, which in turn calls the Capacitor Camera API's `getPhoto` method.
51+
Our `usePhotoGallery` function exposes a method called `addNewToGallery`, which in turn calls the Capacitor Camera API's `getPhoto` method.
5252

5353
Notice the magic here: there's no platform-specific code (web, iOS, or Android)! The Capacitor Camera plugin abstracts that away for us, leaving just one method call - `getPhoto()` - that will open up the device's camera and allow us to take photos.
5454

5555
The last step we need to take is to use the new function in the Tab2 page. Go back to `Tab2Page.vue`.
5656

57-
Import `usePhotoGallery` and destructure the `takePhoto` function so we can use it in our `template`:
57+
Import `usePhotoGallery` and destructure the `addNewToGallery` function so we can use it in our `template`:
5858

5959
```html
6060
<template>
@@ -71,7 +71,7 @@ Import `usePhotoGallery` and destructure the `takePhoto` function so we can use
7171
</ion-toolbar>
7272
</ion-header>
7373
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
74-
<ion-fab-button @click="takePhoto()">
74+
<ion-fab-button @click="addNewToGallery()">
7575
<ion-icon :icon="camera"></ion-icon>
7676
</ion-fab-button>
7777
</ion-fab>
@@ -98,8 +98,8 @@ Import `usePhotoGallery` and destructure the `takePhoto` function so we can use
9898
// CHANGE: Add `usePhotoGallery` import.
9999
import { usePhotoGallery } from '@/composables/usePhotoGallery';
100100
101-
// CHANGE: Destructure `takePhoto` from `usePhotoGallery().
102-
const { takePhoto } = usePhotoGallery();
101+
// CHANGE: Destructure `addNewToGallery` from `usePhotoGallery().
102+
const { addNewToGallery } = usePhotoGallery();
103103
</script>
104104
```
105105

@@ -138,10 +138,10 @@ export const usePhotoGallery = () => {
138138
};
139139
```
140140

141-
When the camera is done taking a picture, the resulting `Photo` returned from Capacitor will be added to the `photos` array. Update the `takePhoto` function with the following:
141+
When the camera is done taking a picture, the resulting `Photo` returned from Capacitor will be added to the `photos` array. Update the `addNewToGallery` function with the following:
142142

143143
```typescript
144-
const takePhoto = async () => {
144+
const addNewToGallery = async () => {
145145
const photo = await Camera.getPhoto({
146146
resultType: CameraResultType.Uri,
147147
source: CameraSource.Camera,
@@ -169,7 +169,7 @@ export const usePhotoGallery = () => {
169169
// CHANGE: Update return statement to include `photos` array.
170170
return {
171171
photos,
172-
takePhoto,
172+
addNewToGallery,
173173
};
174174
};
175175
```
@@ -185,7 +185,7 @@ import { Preferences } from '@capacitor/preferences';
185185
export const usePhotoGallery = () => {
186186
const photos = ref<UserPhoto[]>([]);
187187

188-
const takePhoto = async () => {
188+
const addNewToGallery = async () => {
189189
const photo = await Camera.getPhoto({
190190
resultType: CameraResultType.Uri,
191191
source: CameraSource.Camera,
@@ -202,7 +202,7 @@ export const usePhotoGallery = () => {
202202

203203
return {
204204
photos,
205-
takePhoto,
205+
addNewToGallery,
206206
};
207207
};
208208

@@ -239,7 +239,7 @@ Back in `Tab2Page.vue`, update the import statement to include the `UserPhoto` i
239239
import { usePhotoGallery, UserPhoto } from '@/composables/usePhotoGallery';
240240
241241
// CHANGE: Add `photos` array to destructure from `usePhotoGallery()`.
242-
const { photos, takePhoto } = usePhotoGallery();
242+
const { photos, addNewToGallery } = usePhotoGallery();
243243
</script>
244244
```
245245

@@ -269,7 +269,7 @@ With the photo(s) stored into the main array we can now display the images on th
269269
</ion-row>
270270
</ion-grid>
271271
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
272-
<ion-fab-button @click="takePhoto()">
272+
<ion-fab-button @click="addNewToGallery()">
273273
<ion-icon :icon="camera"></ion-icon>
274274
</ion-fab-button>
275275
</ion-fab>
@@ -295,7 +295,7 @@ With the photo(s) stored into the main array we can now display the images on th
295295
} from '@ionic/vue';
296296
import { usePhotoGallery, UserPhoto } from '@/composables/usePhotoGallery';
297297
298-
const { photos, takePhoto } = usePhotoGallery();
298+
const { photos, addNewToGallery } = usePhotoGallery();
299299
</script>
300300
```
301301

‎docs/vue/your-first-app/3-saving-photos.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import { Preferences } from '@capacitor/preferences';
2121
export const usePhotoGallery = () => {
2222
const photos = ref<UserPhoto[]>([]);
2323

24-
const takePhoto = async () => {
24+
const addNewToGallery = async () => {
2525
// Same old code from before.
2626
};
2727

@@ -38,7 +38,7 @@ export const usePhotoGallery = () => {
3838

3939
return {
4040
photos,
41-
takePhoto,
41+
addNewToGallery,
4242
};
4343
};
4444

@@ -61,7 +61,7 @@ import { Preferences } from '@capacitor/preferences';
6161
export const usePhotoGallery = () => {
6262
const photos = ref<UserPhoto[]>([]);
6363

64-
const takePhoto = async () => {
64+
const addNewToGallery = async () => {
6565
// Same old code from before.
6666
};
6767

@@ -92,7 +92,7 @@ export const usePhotoGallery = () => {
9292

9393
return {
9494
photos,
95-
takePhoto,
95+
addNewToGallery,
9696
};
9797
};
9898

@@ -102,7 +102,7 @@ export interface UserPhoto {
102102
}
103103
```
104104

105-
Last, update the `takePhoto` function to call `savePicture`:
105+
Last, update the `addNewToGallery` function to call `savePicture`:
106106

107107
```typescript
108108
import { ref, onMounted, watch } from 'vue';
@@ -113,8 +113,8 @@ import { Preferences } from '@capacitor/preferences';
113113
export const usePhotoGallery = () => {
114114
const photos = ref<UserPhoto[]>([]);
115115

116-
// CHANGE: Update the `takePhoto` method.
117-
const takePhoto = async () => {
116+
// CHANGE: Update the `addNewToGallery` method.
117+
const addNewToGallery = async () => {
118118
const photo = await Camera.getPhoto({
119119
resultType: CameraResultType.Uri,
120120
source: CameraSource.Camera,
@@ -137,7 +137,7 @@ export const usePhotoGallery = () => {
137137

138138
return {
139139
photos,
140-
takePhoto,
140+
addNewToGallery,
141141
};
142142
};
143143

@@ -160,7 +160,7 @@ import { Preferences } from '@capacitor/preferences';
160160
export const usePhotoGallery = () => {
161161
const photos = ref<UserPhoto[]>([]);
162162

163-
const takePhoto = async () => {
163+
const addNewToGallery = async () => {
164164
const photo = await Camera.getPhoto({
165165
resultType: CameraResultType.Uri,
166166
source: CameraSource.Camera,
@@ -204,7 +204,7 @@ export const usePhotoGallery = () => {
204204

205205
return {
206206
photos,
207-
takePhoto,
207+
addNewToGallery,
208208
};
209209
};
210210

‎docs/vue/your-first-app/4-loading-photos.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const usePhotoGallery = () => {
1818
const PHOTO_STORAGE = 'photos';
1919
const photos = ref<UserPhoto[]>([]);
2020

21-
const takePhoto = async () => {
21+
const addNewToGallery = async () => {
2222
// Same old code from before.
2323
};
2424

@@ -32,7 +32,7 @@ export const usePhotoGallery = () => {
3232

3333
return {
3434
photos,
35-
takePhoto,
35+
addNewToGallery,
3636
};
3737
};
3838
```
@@ -44,7 +44,7 @@ export const usePhotoGallery = () => {
4444
const PHOTO_STORAGE = 'photos';
4545
const photos = ref<UserPhoto[]>([]);
4646

47-
const takePhoto = async () => {
47+
const addNewToGallery = async () => {
4848
// Same old code from before.
4949
};
5050

@@ -66,7 +66,7 @@ export const usePhotoGallery = () => {
6666

6767
return {
6868
photos,
69-
takePhoto,
69+
addNewToGallery,
7070
};
7171
};
7272
```
@@ -80,7 +80,7 @@ export const usePhotoGallery = () => {
8080
const PHOTO_STORAGE = 'photos';
8181
const photos = ref<UserPhoto[]>([]);
8282

83-
const takePhoto = async () => {
83+
const addNewToGallery = async () => {
8484
// Same old code from before.
8585
};
8686

@@ -101,7 +101,7 @@ export const usePhotoGallery = () => {
101101

102102
return {
103103
photos,
104-
takePhoto,
104+
addNewToGallery,
105105
};
106106
};
107107
```
@@ -113,7 +113,7 @@ export const usePhotoGallery = () => {
113113
const PHOTO_STORAGE = 'photos';
114114
const photos = ref<UserPhoto[]>([]);
115115

116-
const takePhoto = async () => {
116+
const addNewToGallery = async () => {
117117
// Same old code from before.
118118
};
119119

@@ -149,7 +149,7 @@ export const usePhotoGallery = () => {
149149

150150
return {
151151
photos,
152-
takePhoto,
152+
addNewToGallery,
153153
};
154154
};
155155
```
@@ -163,7 +163,7 @@ export const usePhotoGallery = () => {
163163
const PHOTO_STORAGE = 'photos';
164164
const photos = ref<UserPhoto[]>([]);
165165

166-
const takePhoto = async () => {
166+
const addNewToGallery = async () => {
167167
// Same old code from before.
168168
};
169169

@@ -189,7 +189,7 @@ export const usePhotoGallery = () => {
189189

190190
return {
191191
photos,
192-
takePhoto,
192+
addNewToGallery,
193193
};
194194
};
195195
```
@@ -206,7 +206,7 @@ export const usePhotoGallery = () => {
206206
const PHOTO_STORAGE = 'photos';
207207
const photos = ref<UserPhoto[]>([]);
208208

209-
const takePhoto = async () => {
209+
const addNewToGallery = async () => {
210210
const photo = await Camera.getPhoto({
211211
resultType: CameraResultType.Uri,
212212
source: CameraSource.Camera,
@@ -275,7 +275,7 @@ export const usePhotoGallery = () => {
275275

276276
return {
277277
photos,
278-
takePhoto,
278+
addNewToGallery,
279279
};
280280
};
281281

‎docs/vue/your-first-app/5-adding-mobile.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export const usePhotoGallery = () => {
103103
const PHOTO_STORAGE = 'photos';
104104
const photos = ref<UserPhoto[]>([]);
105105

106-
const takePhoto = async () => {
106+
const addNewToGallery = async () => {
107107
const photo = await Camera.getPhoto({
108108
resultType: CameraResultType.Uri,
109109
source: CameraSource.Camera,
@@ -194,7 +194,7 @@ export const usePhotoGallery = () => {
194194

195195
return {
196196
photos,
197-
takePhoto,
197+
addNewToGallery,
198198
};
199199
};
200200

‎docs/vue/your-first-app/7-live-reload.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ Open `Tab2Page.vue` and add `actionSheetController` to the imports from `@ionic/
5656
import { usePhotoGallery, UserPhoto } from '@/composables/usePhotoGallery';
5757
5858
// CHANGE: Add reference to the `deletePhoto` method.
59-
const { photos, takePhoto, deletePhoto } = usePhotoGallery();
59+
const { photos, addNewToGallery, deletePhoto } = usePhotoGallery();
6060
</script>
6161
```
6262

@@ -85,7 +85,7 @@ When a user clicks/taps on an image, we will show the action sheet. Add a click
8585
</ion-row>
8686
</ion-grid>
8787
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
88-
<ion-fab-button @click="takePhoto()">
88+
<ion-fab-button @click="addNewToGallery()">
8989
<ion-icon :icon="camera"></ion-icon>
9090
</ion-fab-button>
9191
</ion-fab>
@@ -124,7 +124,7 @@ Next, within `script setup`, create a new function called `showActionSheet`. `sh
124124
} from '@ionic/vue';
125125
import { usePhotoGallery, UserPhoto } from '@/composables/usePhotoGallery';
126126
127-
const { photos, takePhoto, deletePhoto } = usePhotoGallery();
127+
const { photos, addNewToGallery, deletePhoto } = usePhotoGallery();
128128
129129
// CHANGE: Add the `showActionSheet` function.
130130
const showActionSheet = async (photo: UserPhoto) => {
@@ -168,7 +168,7 @@ export const usePhotoGallery = () => {
168168
const PHOTO_STORAGE = 'photos';
169169
const photos = ref<UserPhoto[]>([]);
170170

171-
const takePhoto = async () => {
171+
const addNewToGallery = async () => {
172172
// Same old code from before.
173173
};
174174

@@ -207,7 +207,7 @@ export const usePhotoGallery = () => {
207207
// CHANGE: Add `deletePhoto` to the return statement.
208208
return {
209209
photos,
210-
takePhoto,
210+
addNewToGallery,
211211
deletePhoto,
212212
};
213213
};

0 commit comments

Comments
 (0)