Merge pull request #27 from criar-art/drawer

Add Drawer Input Option to up-window-angular
criar-art · Oct 17, 2024 · 30afab2 · 30afab2
2 parents f15bccb + 4665007
commit 30afab2
Show file tree

Hide file tree

Showing 7 changed files with 206 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # up-window-angular
 
-An Angular library designed to create dynamic, customizable windows and window-based components for web applications. With a simple and intuitive API, UpWindow enables developers to easily integrate responsive windows, popups, and floating windows into their projects. It provides full control over window size, position, animations, and behavior, offering a flexible solution for creating engaging user interfaces.
+An Angular library designed to create dynamic, customizable windows and window-based components for web applications. With a simple and intuitive API, UpWindow enables developers to easily integrate responsive windows, popups, floating windows, and drawers into their projects. It provides full control over window size, position, animations, and behavior, offering a flexible solution for creating engaging user interfaces.
 
 ## Install
 
@@ -93,6 +93,12 @@ export class WindowExampleComponent {
    <up-window-angular [fullScreen]="true" />
    ```
 
+- **`@Input() drawer: 'left' | 'right' | 'top' | 'bottom' = 'left';`**
+   - Example: Set the position of the drawer when in drawer mode.
+   ```html
+   <up-window-angular drawer="right" />
+   ```
+
 - **`@Input() confirmText: string = 'Confirm';`**
    - Example: Customize the confirm button text.
    ```html

diff --git a/projects/up-window-angular/README.md b/projects/up-window-angular/README.md
@@ -1,6 +1,6 @@
 # up-window-angular
 
-An Angular library designed to create dynamic, customizable windows and window-based components for web applications. With a simple and intuitive API, UpWindow enables developers to easily integrate responsive windows, popups, and floating windows into their projects. It provides full control over window size, position, animations, and behavior, offering a flexible solution for creating engaging user interfaces.
+An Angular library designed to create dynamic, customizable windows and window-based components for web applications. With a simple and intuitive API, UpWindow enables developers to easily integrate responsive windows, popups, floating windows, and drawers into their projects. It provides full control over window size, position, animations, and behavior, offering a flexible solution for creating engaging user interfaces.
 
 ## Install
 
@@ -93,6 +93,12 @@ export class WindowExampleComponent {
    <up-window-angular [fullScreen]="true" />
    ```
 
+- **`@Input() drawer: 'left' | 'right' | 'top' | 'bottom' = 'left';`**
+   - Example: Set the position of the drawer when in drawer mode.
+   ```html
+   <up-window-angular drawer="right" />
+   ```
+
 - **`@Input() confirmText: string = 'Confirm';`**
    - Example: Customize the confirm button text.
    ```html

diff --git a/projects/up-window-angular/src/lib/tests/mode.spec.ts b/projects/up-window-angular/src/lib/tests/mode.spec.ts
@@ -97,4 +97,57 @@ describe('UpWindowAngularComponent', () => {
     const overlayElement = fixture.debugElement.query(By.css('.overlay'));
     expect(overlayElement.classes['grayscale']).toBeFalsy();
   });
+
+  it('should open drawer from the left', () => {
+    component.drawer = 'left';
+    component.isOpen.set(true);
+    fixture.detectChanges();
+
+    const windowElement = fixture.debugElement.query(By.css('.up-window'));
+    expect(windowElement.classes['drawer-left']).toBeTrue();
+    expect(component.isOpen()).toBeTrue();
+  });
+
+  it('should open drawer from the right', () => {
+    component.drawer = 'right';
+    component.isOpen.set(true);
+    fixture.detectChanges();
+
+    const windowElement = fixture.debugElement.query(By.css('.up-window'));
+    expect(windowElement.classes['drawer-right']).toBeTrue();
+    expect(component.isOpen()).toBeTrue();
+  });
+
+  it('should open drawer from the top', () => {
+    component.drawer = 'top';
+    component.isOpen.set(true);
+    fixture.detectChanges();
+
+    const windowElement = fixture.debugElement.query(By.css('.up-window'));
+    expect(windowElement.classes['drawer-top']).toBeTrue();
+    expect(component.isOpen()).toBeTrue();
+  });
+
+  it('should open drawer from the bottom', () => {
+    component.drawer = 'bottom';
+    component.isOpen.set(true);
+    fixture.detectChanges();
+
+    const windowElement = fixture.debugElement.query(By.css('.up-window'));
+    expect(windowElement.classes['drawer-bottom']).toBeTrue();
+    expect(component.isOpen()).toBeTrue();
+  });
+
+  it('should close drawer when isOpenDrawerLeft is set to false', fakeAsync(() => {
+    component.drawer = 'left';
+    component.isOpen.set(true);
+    fixture.detectChanges();
+    expect(component.isOpen()).toBeTrue();
+
+    component.isOpen.set(false);
+    tick(600);
+    fixture.detectChanges();
+
+    expect(component.isOpen()).toBeFalse();
+  }));
 });
diff --git a/projects/up-window-angular/src/lib/up-window-angular.component.scss b/projects/up-window-angular/src/lib/up-window-angular.component.scss
@@ -82,6 +82,35 @@
       margin-top: auto;
     }
   }
+
+  &.drawer {
+    position: fixed;
+    z-index: 1000;
+  }
+
+  &.drawer-bottom {
+    bottom: 0;
+    border-radius: 1rem 1rem 0 0;
+    margin: 1rem 1rem 0 0;
+  }
+
+  &.drawer-top {
+    top: 0;
+    border-radius: 0 0 1rem 1rem;
+    margin: 0 1rem;
+  }
+
+  &.drawer-left {
+    left: 0;
+    border-radius: 0 1rem 1rem 0;
+    margin: 1rem 1rem 1rem 0;
+  }
+
+  &.drawer-right {
+    right: 0;
+    border-radius: 1rem 0 0 1rem;
+    margin: 1rem 0 1rem 1rem;
+  }
 }
 
 .up-window-header {

diff --git a/projects/up-window-angular/src/lib/up-window-angular.component.ts b/projects/up-window-angular/src/lib/up-window-angular.component.ts
@@ -30,7 +30,8 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
   @Input() subtitle?: string;
   @Input() class: string | undefined;
   @Input() isOpen: WritableSignal<boolean> = signal(false);
-  @Input() animation: string = 'fade';
+  @Input() drawer: 'bottom' | 'top' | 'left' | 'right' | '' = '';
+  @Input() animation: string = this.drawer ? this.drawer : 'fade';
   @Input() restrictMode: boolean = false;
   @Input() fullScreen: boolean = false;
   @Input() blur: boolean = false;
@@ -176,6 +177,7 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
       ...(this.class ? { [this.class]: true } : {}),
       [this.animation]: this.openingAnimation && !this.closingAnimation,
       [`${this.animation}-out`]: this.closingAnimation,
+      [`drawer drawer-${this.drawer}`]: !!this.drawer,
       shake: this.shakeAnimation,
       fullscreen: this.fullScreen,
       blur: this.blur,

diff --git a/src/app/examples/mode/mode.component.html b/src/app/examples/mode/mode.component.html
@@ -162,3 +162,84 @@ <h2 class="fullscreen-subtitle">Additional Tips for Fullscreen Mode</h2>
     </up-window-angular>
   </div>
 </div>
+
+<div class="content">
+  <h2 class="content-title">Drawer</h2>
+  <div class="examples">
+    <button
+      class="button-modal-example"
+      type="button"
+      (click)="openWindowExample('drawer-left')"
+    >
+      <span class="material-symbols-outlined"> &#xe72d; </span>
+      <span class="material-symbols-outlined"> &#xe5c4; </span> Left
+    </button>
+
+    <button
+      class="button-modal-example"
+      type="button"
+      (click)="openWindowExample('drawer-right')"
+    >
+      <span class="material-symbols-outlined"> &#xe72d; </span>
+      <span class="material-symbols-outlined"> &#xe5c8; </span> Right
+    </button>
+
+    <button
+      class="button-modal-example"
+      type="button"
+      (click)="openWindowExample('drawer-top')"
+    >
+      <span class="material-symbols-outlined"> &#xe72d; </span>
+      <span class="material-symbols-outlined"> &#xe5d8; </span> Top
+    </button>
+
+    <button
+      class="button-modal-example"
+      type="button"
+      (click)="openWindowExample('drawer-bottom')"
+    >
+      <span class="material-symbols-outlined"> &#xe72d; </span>
+      <span class="material-symbols-outlined"> &#xe5db; </span> Bottom
+    </button>
+
+    <up-window-angular
+      [isOpen]="isWindowOpenDrawerTop"
+      title="Top Drawer"
+      subtitle="This is a top drawer."
+      [drawer]="drawerPosition"
+      animation="slide-down"
+    >
+      Content for top drawer!
+    </up-window-angular>
+
+    <up-window-angular
+      [isOpen]="isWindowOpenDrawerBottom"
+      title="Bottom Drawer"
+      subtitle="This is a bottom drawer."
+      [drawer]="drawerPosition"
+      animation="slide-up"
+    >
+      Content for bottom drawer!
+    </up-window-angular>
+
+    <up-window-angular
+      [isOpen]="isWindowOpenDrawerLeft"
+      title="Left Drawer"
+      subtitle="This is a left drawer."
+      [drawer]="drawerPosition"
+      animation="slide-left"
+    >
+      Content for left drawer!
+    </up-window-angular>
+
+    <up-window-angular
+      [isOpen]="isWindowOpenDrawerRight"
+      title="Right Drawer"
+      subtitle="This is a right drawer."
+      [drawer]="drawerPosition"
+      animation="slide-right"
+    >
+      Content for right drawer!
+    </up-window-angular>
+  </div>
+</div>
diff --git a/src/app/examples/mode/mode.component.ts b/src/app/examples/mode/mode.component.ts
@@ -14,13 +14,23 @@ export class ModeComponent {
   isWindowOpenBlur: WritableSignal<boolean> = signal(false);
   isWindowOpenGrayscale: WritableSignal<boolean> = signal(false);
   isWindowOpenBlurGrayscale: WritableSignal<boolean> = signal(false);
+  isWindowOpenDrawerBottom: WritableSignal<boolean> = signal(false);
+  isWindowOpenDrawerTop: WritableSignal<boolean> = signal(false);
+  isWindowOpenDrawerLeft: WritableSignal<boolean> = signal(false);
+  isWindowOpenDrawerRight: WritableSignal<boolean> = signal(false);
+  drawerPosition: 'bottom' | 'top' | 'left' | 'right' = 'bottom';
+
 
   openWindowExample(type: string) {
     this.isWindowOpenRestrict.set(false);
     this.isWindowOpenFullScreen.set(false);
     this.isWindowOpenBlur.set(false);
     this.isWindowOpenGrayscale.set(false);
     this.isWindowOpenBlurGrayscale.set(false);
+    this.isWindowOpenDrawerBottom.set(false);
+    this.isWindowOpenDrawerTop.set(false);
+    this.isWindowOpenDrawerLeft.set(false);
+    this.isWindowOpenDrawerRight.set(false);
 
     switch (type) {
       case 'restrict':
@@ -38,6 +48,22 @@ export class ModeComponent {
       case 'blurGrayscale':
         this.isWindowOpenBlurGrayscale.set(true);
         break;
+      case 'drawer-left':
+        this.drawerPosition = 'left';
+        this.isWindowOpenDrawerLeft.set(true);
+        break;
+      case 'drawer-right':
+        this.drawerPosition = 'right';
+        this.isWindowOpenDrawerRight.set(true);
+        break;
+      case 'drawer-top':
+        this.drawerPosition = 'top';
+        this.isWindowOpenDrawerTop.set(true);
+        break;
+      case 'drawer-bottom':
+        this.drawerPosition = 'bottom';
+        this.isWindowOpenDrawerBottom.set(true);
+        break;
     }
   }
 }