@rdlabo/ionic-theme-ios27 0.1.0-beta.pr166.shabba1151da4ea → 0.1.0-beta.pr171.sha1f9944f21de7

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.
Files changed (4) hide show
  1. package/dist/transition/ios.transition.d.ts.map +1 -1
  2. package/dist/transition/ios.transition.js +46 -6
  3. package/package.json +1 -1
  4. package/src/transition/ios.transition.ts +56 -6
package/dist/transition/ios.transition.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ios.transition.d.ts","sourceRoot":"","sources":["../../src/transition/ios.transition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAUjD,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,OAAO,EAAE,IAAI,CAAC,KAAG,UAAU,GAAG,CAE9D,CAAC;AAyGF,eAAO,MAAM,sBAAsB,GAAI,OAAO,WAAW,EAAE,MAAM,iBAAiB,KAAG,SA4WpF,CAAC"}
1
+ {"version":3,"file":"ios.transition.d.ts","sourceRoot":"","sources":["../../src/transition/ios.transition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAUjD,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,OAAO,EAAE,IAAI,CAAC,KAAG,UAAU,GAAG,CAE9D,CAAC;AAyGF,eAAO,MAAM,sBAAsB,GAAI,OAAO,WAAW,EAAE,MAAM,iBAAiB,KAAG,SA8ZpF,CAAC"}
package/dist/transition/ios.transition.js CHANGED
@@ -124,14 +124,52 @@ export const iosTransitionAnimation = (navEl, opts) => {
124
124
  .fill('both')
125
125
  .beforeRemoveClass('ion-page-invisible');
126
126
  const topPage = backDirection ? leavingEl : enteringEl;
127
- if (topPage?.querySelector(':scope > ion-header.header-translucent:not(.ios-theme-disabled, .ios26-disabled)')) {
128
- const shadow = topPage.style.boxShadow;
127
+ const translucentTop = topPage?.querySelector(':scope > ion-header.header-translucent:not(.ios-theme-disabled, .ios26-disabled)');
128
+ if (topPage && translucentTop) {
129
+ const shade = navEl.ownerDocument.createElement('div');
130
+ shade.className = 'ios27-transition-shade';
131
+ shade.setAttribute('aria-hidden', 'true');
132
+ const edge = navEl.ownerDocument.createElement('div');
133
+ edge.setAttribute('aria-hidden', 'true');
134
+ const clipPath = topPage.style.clipPath;
135
+ const [corner, control] = topPage.offsetWidth >= 768 ? [36, 13] : [78, 22];
136
+ Object.assign(shade.style, {
137
+ position: 'absolute',
138
+ inset: '0',
139
+ zIndex: topPage.style.zIndex,
140
+ pointerEvents: 'none',
141
+ background: 'rgba(0, 0, 0, 0.1)',
142
+ });
143
+ Object.assign(edge.style, {
144
+ position: 'absolute',
145
+ top: '0',
146
+ bottom: '0',
147
+ [isRTL ? 'right' : 'left']: '-100%',
148
+ width: '100%',
149
+ zIndex: topPage.style.zIndex,
150
+ pointerEvents: 'none',
151
+ background: `linear-gradient(to ${isRTL ? 'right' : 'left'}, rgba(0, 0, 0, 0.02), transparent 18px)`,
152
+ });
129
153
  rootAnimation.beforeAddWrite(() => {
130
- topPage.style.boxShadow = `${isRTL ? 4 : -4}px 0 24px rgba(0, 0, 0, 0.04)`;
154
+ topPage.before(shade, edge);
155
+ topPage.style.clipPath = `inset(0 round ${corner * 0.82}px)`;
156
+ topPage.style.clipPath = `shape(from 0px ${corner}px,
157
+ curve to ${corner}px 0px with 0px ${control}px / ${control}px 0px, hline to calc(100% - ${corner}px),
158
+ curve to 100% ${corner}px with calc(100% - ${control}px) 0px / 100% ${control}px, vline to calc(100% - ${corner}px),
159
+ curve to calc(100% - ${corner}px) 100% with 100% calc(100% - ${control}px) / calc(100% - ${control}px) 100%, hline to ${corner}px,
160
+ curve to 0px calc(100% - ${corner}px) with ${control}px 100% / 0px calc(100% - ${control}px), close)`;
131
161
  });
132
162
  rootAnimation.afterAddWrite(() => {
133
- topPage.style.boxShadow = shadow;
163
+ shade.remove();
164
+ edge.remove();
165
+ topPage.style.clipPath = clipPath;
134
166
  });
167
+ rootAnimation.addAnimation(createAnimation()
168
+ .addElement(shade)
169
+ .fromTo(OPACITY, backDirection ? 1 : 0, backDirection ? 0 : 1));
170
+ rootAnimation.addAnimation(createAnimation()
171
+ .addElement(edge)
172
+ .fromTo(TRANSFORM, `translateX(${backDirection ? CENTER : OFF_RIGHT})`, `translateX(${backDirection ? (isRTL ? '-100%' : '100%') : CENTER})`));
135
173
  }
136
174
  if (leavingEl && navEl !== null && navEl !== undefined) {
137
175
  const navDecorAnimation = createAnimation();
@@ -153,7 +191,7 @@ export const iosTransitionAnimation = (navEl, opts) => {
153
191
  enteringContentAnimation
154
192
  .beforeClearStyles([OPACITY])
155
193
  .fromTo('transform', `translateX(${OFF_LEFT})`, `translateX(${CENTER})`)
156
- .fromTo(OPACITY, OFF_OPACITY, 1);
194
+ .fromTo(OPACITY, translucentTop ? 1 : OFF_OPACITY, 1);
157
195
  }
158
196
  else {
159
197
  enteringContentAnimation.beforeClearStyles([OPACITY]).fromTo('transform', `translateX(${OFF_RIGHT})`, `translateX(${CENTER})`);
@@ -280,7 +318,9 @@ export const iosTransitionAnimation = (navEl, opts) => {
280
318
  });
281
319
  }
282
320
  else {
283
- leavingContent.fromTo('transform', `translateX(${CENTER})`, `translateX(${OFF_LEFT})`).fromTo(OPACITY, 1, OFF_OPACITY);
321
+ leavingContent
322
+ .fromTo('transform', `translateX(${CENTER})`, `translateX(${OFF_LEFT})`)
323
+ .fromTo(OPACITY, 1, translucentTop ? 1 : OFF_OPACITY);
284
324
  }
285
325
  if (leavingContentEl &&
286
326
  !leavingEl.querySelector(':scope > ion-header.header-translucent:not(.ios-theme-disabled, .ios26-disabled)')) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@rdlabo/ionic-theme-ios27",
3
3
  "private": false,
4
- "version": "0.1.0-beta.pr166.shabba1151da4ea",
4
+ "version": "0.1.0-beta.pr171.sha1f9944f21de7",
5
5
  "description": "iOS27 Theme for Ionic Framework",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",
package/src/transition/ios.transition.ts CHANGED
@@ -148,14 +148,62 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
148
148
  .beforeRemoveClass('ion-page-invisible');
149
149
 
150
150
  const topPage = backDirection ? leavingEl : enteringEl;
151
- if (topPage?.querySelector(':scope > ion-header.header-translucent:not(.ios-theme-disabled, .ios26-disabled)')) {
152
- const shadow = topPage.style.boxShadow;
151
+ const translucentTop = topPage?.querySelector(':scope > ion-header.header-translucent:not(.ios-theme-disabled, .ios26-disabled)');
152
+ if (topPage && translucentTop) {
153
+ // UIKit dims the opaque page underneath, including its header, with 10% black.
154
+ const shade = navEl.ownerDocument.createElement('div');
155
+ shade.className = 'ios27-transition-shade';
156
+ shade.setAttribute('aria-hidden', 'true');
157
+ const edge = navEl.ownerDocument.createElement('div');
158
+ edge.setAttribute('aria-hidden', 'true');
159
+ const clipPath = topPage.style.clipPath;
160
+ // UIKit's continuous page outline is smaller in tablet-sized panes.
161
+ const [corner, control] = topPage.offsetWidth >= 768 ? [36, 13] : [78, 22];
162
+ Object.assign(shade.style, {
163
+ position: 'absolute',
164
+ inset: '0',
165
+ zIndex: topPage.style.zIndex,
166
+ pointerEvents: 'none',
167
+ background: 'rgba(0, 0, 0, 0.1)',
168
+ });
169
+ Object.assign(edge.style, {
170
+ position: 'absolute',
171
+ top: '0',
172
+ bottom: '0',
173
+ [isRTL ? 'right' : 'left']: '-100%',
174
+ width: '100%',
175
+ zIndex: topPage.style.zIndex,
176
+ pointerEvents: 'none',
177
+ background: `linear-gradient(to ${isRTL ? 'right' : 'left'}, rgba(0, 0, 0, 0.02), transparent 18px)`,
178
+ });
153
179
  rootAnimation.beforeAddWrite(() => {
154
- topPage.style.boxShadow = `${isRTL ? 4 : -4}px 0 24px rgba(0, 0, 0, 0.04)`;
180
+ topPage.before(shade, edge);
181
+ topPage.style.clipPath = `inset(0 round ${corner * 0.82}px)`;
182
+ topPage.style.clipPath = `shape(from 0px ${corner}px,
183
+ curve to ${corner}px 0px with 0px ${control}px / ${control}px 0px, hline to calc(100% - ${corner}px),
184
+ curve to 100% ${corner}px with calc(100% - ${control}px) 0px / 100% ${control}px, vline to calc(100% - ${corner}px),
185
+ curve to calc(100% - ${corner}px) 100% with 100% calc(100% - ${control}px) / calc(100% - ${control}px) 100%, hline to ${corner}px,
186
+ curve to 0px calc(100% - ${corner}px) with ${control}px 100% / 0px calc(100% - ${control}px), close)`;
155
187
  });
156
188
  rootAnimation.afterAddWrite(() => {
157
- topPage.style.boxShadow = shadow;
189
+ shade.remove();
190
+ edge.remove();
191
+ topPage.style.clipPath = clipPath;
158
192
  });
193
+ rootAnimation.addAnimation(
194
+ createAnimation()
195
+ .addElement(shade)
196
+ .fromTo(OPACITY, backDirection ? 1 : 0, backDirection ? 0 : 1),
197
+ );
198
+ rootAnimation.addAnimation(
199
+ createAnimation()
200
+ .addElement(edge)
201
+ .fromTo(
202
+ TRANSFORM,
203
+ `translateX(${backDirection ? CENTER : OFF_RIGHT})`,
204
+ `translateX(${backDirection ? (isRTL ? '-100%' : '100%') : CENTER})`,
205
+ ),
206
+ );
159
207
  }
160
208
 
161
209
  // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
@@ -180,7 +228,7 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
180
228
  enteringContentAnimation
181
229
  .beforeClearStyles([OPACITY])
182
230
  .fromTo('transform', `translateX(${OFF_LEFT})`, `translateX(${CENTER})`)
183
- .fromTo(OPACITY, OFF_OPACITY, 1);
231
+ .fromTo(OPACITY, translucentTop ? 1 : OFF_OPACITY, 1);
184
232
  } else {
185
233
  // entering content, forward direction
186
234
  enteringContentAnimation.beforeClearStyles([OPACITY]).fromTo('transform', `translateX(${OFF_RIGHT})`, `translateX(${CENTER})`);
@@ -346,7 +394,9 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
346
394
  });
347
395
  } else {
348
396
  // leaving content, forward direction
349
- leavingContent.fromTo('transform', `translateX(${CENTER})`, `translateX(${OFF_LEFT})`).fromTo(OPACITY, 1, OFF_OPACITY);
397
+ leavingContent
398
+ .fromTo('transform', `translateX(${CENTER})`, `translateX(${OFF_LEFT})`)
399
+ .fromTo(OPACITY, 1, translucentTop ? 1 : OFF_OPACITY);
350
400
  }
351
401
 
352
402
  if (