-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #11816 from primefaces/issue-11807
Issue 11807
- Loading branch information
Showing
12 changed files
with
189 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import {NgModule,Directive,ElementRef,Input} from '@angular/core'; | ||
| import {CommonModule} from '@angular/common'; | ||
| import {DomHandler} from 'primeng/dom'; | ||
|
|
||
| @Directive({ | ||
| selector: '[pAutoFocus]', | ||
| host: { | ||
| 'class': 'p-element' | ||
| } | ||
| }) | ||
|
|
||
| export class AutoFocus { | ||
|
|
||
| constructor (private host: ElementRef) {} | ||
|
|
||
| @Input('pAutoFocus') autofocus: boolean; | ||
|
|
||
| focused: boolean = false; | ||
|
|
||
| ngAfterContentChecked () { | ||
| if(!this.focused) { | ||
| if(this.autofocus) { | ||
| const focusableElements = DomHandler.getFocusableElements(this.host.nativeElement); | ||
|
|
||
| if(focusableElements.length === 0) { | ||
| this.host.nativeElement.focus(); | ||
| } | ||
| if(focusableElements.length > 0) { | ||
| focusableElements[0].focus(); | ||
| } | ||
|
|
||
| this.focused = true; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @NgModule({ | ||
| imports: [CommonModule], | ||
| exports: [AutoFocus], | ||
| declarations: [AutoFocus] | ||
| }) | ||
| export class AutoFocusModule { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "$schema": "ng-packagr/ng-package.schema.json", | ||
| "lib": { | ||
| "entryFile": "public_api.ts" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './autofocus'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
src/app/showcase/components/autofocus/autofocusdemo-routing.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { NgModule } from '@angular/core'; | ||
| import { RouterModule, Routes } from '@angular/router'; | ||
| import { AutoFocusDemo } from './autofocusdemo.component'; | ||
|
|
||
| @NgModule({ | ||
| imports: [RouterModule.forChild([ | ||
| { path: '', component: AutoFocusDemo } | ||
| ])], | ||
| exports: [RouterModule] | ||
| }) | ||
| export class AutoFocusDemoRoutingModule { } |
79 changes: 79 additions & 0 deletions
79
src/app/showcase/components/autofocus/autofocusdemo.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| <div class="content-section introduction"> | ||
| <div class="feature-intro"> | ||
| <h1>AutoFocus</h1> | ||
| <p>AutoFocus manages focus on focusable element on load.</p> | ||
| </div> | ||
| <app-demoActions github="autofocus" stackblitz="autofocus-demo"></app-demoActions> | ||
| </div> | ||
|
|
||
| <div class="content-section implementation"> | ||
| <input type="text" pInputText [pAutoFocus]="true" placeholder="Automatically focused" /> | ||
| </div> | ||
|
|
||
| <div class="content-section documentation"> | ||
| <p-tabView> | ||
| <p-tabPanel header="Documentation"> | ||
| <h5>Import</h5> | ||
| <app-code lang="typescript" ngNonBindable ngPreserveWhitespaces> | ||
| import {AutoFocusModule} from 'primeng/autofocus'; | ||
| </app-code> | ||
|
|
||
| <h5>Getting Started</h5> | ||
| <p>AutoFocus is applied to any focusable input element on initial load. It's disabled by default and needs to be enabled manually.</p> | ||
|
|
||
| <app-code lang="markup" ngNonBindable ngPreserveWhitespaces> | ||
| <input [pAutoFocus]="true" > | ||
| </app-code> | ||
|
|
||
| <app-code lang="typescript" ngNonBindable ngPreserveWhitespaces> | ||
| export class AutoFocusDemo { } | ||
| </app-code> | ||
|
|
||
| <h5>Properties</h5> | ||
| <div class="doc-tablewrapper"> | ||
| <table class="doc-table"> | ||
| <thead> | ||
| <tr> | ||
| <th>Name</th> | ||
| <th>Type</th> | ||
| <th>Default</th> | ||
| <th>Description</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>pAutoFocus</td> | ||
| <td>boolean</td> | ||
| <td>null</td> | ||
| <td>When present, it specifies that the component should automatically get focus on load.</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
|
|
||
| <h5>Events</h5> | ||
| <p>Directive has no events.</p> | ||
|
|
||
| <h5>Styling</h5> | ||
| <p>Directive does not apply any styling to host.</p> | ||
|
|
||
| <h5>Dependencies</h5> | ||
| <p>None.</p> | ||
| </p-tabPanel> | ||
|
|
||
| <p-tabPanel header="Source"> | ||
| <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/autofocus" class="btn-viewsource" target="_blank"> | ||
| <span>View on GitHub</span> | ||
| </a> | ||
| <a href="https://stackblitz.com/edit/primeng-autofocus-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank"> | ||
| <span>Edit in StackBlitz</span> | ||
| </a> | ||
|
|
||
| <app-code lang="markup" ngNonBindable ngPreserveWhitespaces> | ||
| <input type="text" pInputText [pAutoFocus]="true" placeholder="Automatically focused" > | ||
| </app-code> | ||
|
|
||
| </p-tabPanel> | ||
| </p-tabView> | ||
| </div> | ||
|
|
7 changes: 7 additions & 0 deletions
7
src/app/showcase/components/autofocus/autofocusdemo.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import { Component, OnInit } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'autofocusdemo', | ||
| templateUrl: './autofocusdemo.component.html' | ||
| }) | ||
| export class AutoFocusDemo {} |
26 changes: 26 additions & 0 deletions
26
src/app/showcase/components/autofocus/autofocusdemo.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { NgModule } from '@angular/core'; | ||
| import { CommonModule } from '@angular/common'; | ||
| import { FormsModule } from '@angular/forms'; | ||
| import { AppCodeModule } from '../../app.code.component'; | ||
| import { TabViewModule } from 'primeng/tabview'; | ||
| import { AutoFocusModule } from 'primeng/autofocus'; | ||
| import { AppDemoActionsModule } from '../../app.demoactions.component'; | ||
| import { AutoFocusDemo } from './autofocusdemo.component'; | ||
| import { AutoFocusDemoRoutingModule } from './autofocusdemo-routing.module'; | ||
| import { InputTextModule } from 'primeng/inputtext'; | ||
|
|
||
|
|
||
| @NgModule({ | ||
| imports: [ | ||
| CommonModule, | ||
| FormsModule, | ||
| AppCodeModule, | ||
| TabViewModule, | ||
| AutoFocusModule, | ||
| InputTextModule, | ||
| AppDemoActionsModule, | ||
| AutoFocusDemoRoutingModule | ||
| ], | ||
| declarations: [AutoFocusDemo], | ||
| }) | ||
| export class AutoFocusDemoModule { } |