initial
This commit is contained in:
@@ -0,0 +1,85 @@
|
||||
import { html } from '@design.estate/dees-element';
|
||||
import { injectCssVariables } from '../../00variables.js';
|
||||
|
||||
export const demoFunc = () => {
|
||||
injectCssVariables();
|
||||
return html`
|
||||
<style>
|
||||
.demo-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.demo-section h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--dees-muted-foreground);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.layout-container {
|
||||
border: 1px solid var(--dees-border);
|
||||
border-radius: var(--dees-radius);
|
||||
overflow: hidden;
|
||||
height: 400px;
|
||||
}
|
||||
.demo-content {
|
||||
padding: 1rem;
|
||||
}
|
||||
.demo-card {
|
||||
background: var(--dees-card);
|
||||
border: 1px solid var(--dees-border);
|
||||
border-radius: var(--dees-radius);
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.demo-note {
|
||||
font-size: 0.875rem;
|
||||
color: var(--dees-muted-foreground);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="demo-section">
|
||||
<h3>App Layout with Navigation</h3>
|
||||
<div class="layout-container">
|
||||
<dees-mobile-applayout>
|
||||
<dees-mobile-header title="My App">
|
||||
<dees-mobile-button slot="actions" icon variant="ghost">
|
||||
<dees-mobile-icon icon="bell" size="20"></dees-mobile-icon>
|
||||
</dees-mobile-button>
|
||||
</dees-mobile-header>
|
||||
|
||||
<div class="demo-content">
|
||||
<div class="demo-card">
|
||||
<h4 style="margin: 0 0 0.5rem 0;">Welcome</h4>
|
||||
<p style="margin: 0; color: var(--dees-muted-foreground);">
|
||||
This is a demo of the app layout component with header and bottom navigation.
|
||||
</p>
|
||||
</div>
|
||||
<div class="demo-card">
|
||||
<h4 style="margin: 0 0 0.5rem 0;">Features</h4>
|
||||
<ul style="margin: 0; padding-left: 1.25rem; color: var(--dees-muted-foreground);">
|
||||
<li>iOS keyboard handling</li>
|
||||
<li>View transitions</li>
|
||||
<li>Safe area support</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dees-mobile-navigation
|
||||
slot="navigation"
|
||||
activeTab="home"
|
||||
.tabs=${[
|
||||
{ id: 'home', icon: 'home', label: 'Home' },
|
||||
{ id: 'explore', icon: 'compass', label: 'Explore' },
|
||||
{ id: 'settings', icon: 'settings', label: 'Settings' }
|
||||
]}
|
||||
></dees-mobile-navigation>
|
||||
</dees-mobile-applayout>
|
||||
</div>
|
||||
<p class="demo-note">
|
||||
The app layout provides a grid structure with content area and bottom navigation.
|
||||
It automatically hides navigation when keyboard is visible on mobile.
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
@@ -0,0 +1,351 @@
|
||||
import {
|
||||
DeesElement,
|
||||
css,
|
||||
cssManager,
|
||||
customElement,
|
||||
html,
|
||||
property,
|
||||
state,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import { mobileComponentStyles } from '../../00componentstyles.js';
|
||||
import { demoFunc } from './dees-mobile-applayout.demo.js';
|
||||
|
||||
export type TNavigationDirection = 'forward' | 'back' | 'none';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-mobile-applayout': DeesMobileApplayout;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('dees-mobile-applayout')
|
||||
export class DeesMobileApplayout extends DeesElement {
|
||||
public static demo = demoFunc;
|
||||
|
||||
@property({ type: Boolean, reflect: true, attribute: 'keyboard-visible' })
|
||||
accessor keyboardVisible: boolean = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor showNavigation: boolean = true;
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor isIOS: boolean = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
accessor isPWA: boolean = false;
|
||||
|
||||
@state()
|
||||
accessor navigationDirection: TNavigationDirection = 'none';
|
||||
|
||||
@state()
|
||||
accessor isTransitioning: boolean = false;
|
||||
|
||||
private keyboardBlurTimeout?: number;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
mobileComponentStyles,
|
||||
css`
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background: var(--dees-background);
|
||||
}
|
||||
|
||||
.app-layout {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-areas:
|
||||
"spacer"
|
||||
"content"
|
||||
"navigation";
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ios-keyboard-spacer {
|
||||
grid-area: spacer;
|
||||
height: 0;
|
||||
transition: height 300ms ease-out;
|
||||
background: var(--dees-background);
|
||||
}
|
||||
|
||||
.ios-keyboard-spacer.active {
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
/* Mobile-first: smooth scrolling behavior for keyboard visibility */
|
||||
:host([keyboard-visible]) .main-content {
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
/* Main content area */
|
||||
.main-content {
|
||||
grid-area: content;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* View transition container */
|
||||
.view-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.view-wrapper {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
/* Forward navigation: entering view slides from right */
|
||||
.view-wrapper.entering.forward {
|
||||
animation: slideInFromRight 300ms ease-out forwards;
|
||||
}
|
||||
|
||||
/* Forward navigation: exiting view slides to left with fade */
|
||||
.view-wrapper.exiting.forward {
|
||||
animation: slideOutToLeft 300ms ease-out forwards;
|
||||
}
|
||||
|
||||
/* Back navigation: entering view slides from left */
|
||||
.view-wrapper.entering.back {
|
||||
animation: slideInFromLeft 300ms ease-out forwards;
|
||||
}
|
||||
|
||||
/* Back navigation: exiting view slides to right */
|
||||
.view-wrapper.exiting.back {
|
||||
animation: slideOutToRight 300ms ease-out forwards;
|
||||
}
|
||||
|
||||
/* No animation */
|
||||
.view-wrapper.entering.none {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
@keyframes slideInFromRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutToLeft {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: translateX(-30%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInFromLeft {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutToRight {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Bottom navigation */
|
||||
.navigation-slot {
|
||||
grid-area: navigation;
|
||||
z-index: var(--dees-z-sticky, 200);
|
||||
}
|
||||
|
||||
/* Mobile-first: hide bottom navigation when keyboard is visible */
|
||||
:host([keyboard-visible]) .navigation-slot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Desktop: show navigation even with keyboard */
|
||||
@media (min-width: 641px) {
|
||||
:host([keyboard-visible]) .navigation-slot {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile-first: allow overflow during drag */
|
||||
:host-context(body.dragging) .app-layout {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
:host-context(body.dragging) .main-content {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* Desktop: maintain normal overflow behavior during drag */
|
||||
@media (min-width: 641px) {
|
||||
:host-context(body.dragging) .app-layout {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:host-context(body.dragging) .main-content {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 300px;
|
||||
color: var(--dees-muted-foreground);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border: 3px solid var(--dees-border);
|
||||
border-top-color: var(--dees-primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
async connectedCallback() {
|
||||
await super.connectedCallback();
|
||||
|
||||
// Listen for keyboard events
|
||||
this.addEventListener('input-focus', this.handleInputFocus as EventListener);
|
||||
this.addEventListener('input-blur', this.handleInputBlur as EventListener);
|
||||
|
||||
// Detect iOS PWA
|
||||
this.detectEnvironment();
|
||||
|
||||
// Listen for viewport changes to detect keyboard (iOS PWA only)
|
||||
if (this.isIOS && this.isPWA && 'visualViewport' in window) {
|
||||
window.visualViewport?.addEventListener('resize', this.handleViewportResize);
|
||||
this.handleViewportResize();
|
||||
}
|
||||
}
|
||||
|
||||
async disconnectedCallback() {
|
||||
await super.disconnectedCallback();
|
||||
this.removeEventListener('input-focus', this.handleInputFocus as EventListener);
|
||||
this.removeEventListener('input-blur', this.handleInputBlur as EventListener);
|
||||
|
||||
if (this.isIOS && this.isPWA && 'visualViewport' in window) {
|
||||
window.visualViewport?.removeEventListener('resize', this.handleViewportResize);
|
||||
}
|
||||
}
|
||||
|
||||
private detectEnvironment() {
|
||||
// Detect iOS
|
||||
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
|
||||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
|
||||
|
||||
// Detect PWA mode
|
||||
const isPWA = window.matchMedia('(display-mode: standalone)').matches ||
|
||||
(window.navigator as any).standalone === true;
|
||||
|
||||
this.isIOS = isIOS;
|
||||
this.isPWA = isPWA;
|
||||
}
|
||||
|
||||
private handleInputFocus = () => {
|
||||
if (this.keyboardBlurTimeout) {
|
||||
clearTimeout(this.keyboardBlurTimeout);
|
||||
this.keyboardBlurTimeout = undefined;
|
||||
}
|
||||
|
||||
if (window.innerWidth <= 640) {
|
||||
this.keyboardVisible = true;
|
||||
}
|
||||
};
|
||||
|
||||
private handleInputBlur = () => {
|
||||
if (this.keyboardBlurTimeout) {
|
||||
clearTimeout(this.keyboardBlurTimeout);
|
||||
}
|
||||
|
||||
if (window.innerWidth <= 640) {
|
||||
this.keyboardBlurTimeout = window.setTimeout(() => {
|
||||
this.keyboardVisible = false;
|
||||
this.keyboardBlurTimeout = undefined;
|
||||
}, 150);
|
||||
}
|
||||
};
|
||||
|
||||
private handleViewportResize = () => {
|
||||
if (window.visualViewport) {
|
||||
const viewport = window.visualViewport;
|
||||
const keyboardHeight = window.innerHeight - viewport.height;
|
||||
|
||||
if (keyboardHeight > 50) {
|
||||
this.keyboardVisible = true;
|
||||
} else {
|
||||
this.keyboardVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Navigate with animation transition
|
||||
* Call this method when changing views
|
||||
*/
|
||||
public navigateWithTransition(direction: TNavigationDirection) {
|
||||
if (this.isTransitioning) return;
|
||||
|
||||
this.navigationDirection = direction;
|
||||
this.isTransitioning = true;
|
||||
|
||||
// Clear transition state after animation
|
||||
setTimeout(() => {
|
||||
this.isTransitioning = false;
|
||||
this.navigationDirection = 'none';
|
||||
}, 300);
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
const showKeyboardSpacer = this.keyboardVisible && this.isIOS && this.isPWA;
|
||||
|
||||
return html`
|
||||
<div class="app-layout">
|
||||
<div class="ios-keyboard-spacer ${showKeyboardSpacer ? 'active' : ''}"></div>
|
||||
|
||||
<main class="main-content">
|
||||
<div class="view-container">
|
||||
<div class="view-wrapper entering ${this.navigationDirection}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
${this.showNavigation ? html`
|
||||
<div class="navigation-slot">
|
||||
<slot name="navigation"></slot>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export * from './dees-mobile-applayout.js';
|
||||
Reference in New Issue
Block a user