diff options
author | Chocobozzz <me@florianbigard.com> | 2021-11-26 17:36:44 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-11-26 17:36:55 +0100 |
commit | 8afade2607e072221a8ff8c108bd1787a3501a2d (patch) | |
tree | cb4b3724cf38076cfd5850be727535a92e85fab3 | |
parent | 7137377d097a74087ed062c8071c1aa5c717c7f7 (diff) | |
download | PeerTube-8afade2607e072221a8ff8c108bd1787a3501a2d.tar.gz PeerTube-8afade2607e072221a8ff8c108bd1787a3501a2d.tar.zst PeerTube-8afade2607e072221a8ff8c108bd1787a3501a2d.zip |
Introduce plugin id selectors
7 files changed, 38 insertions, 5 deletions
diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html index 0be67368e..90eea1505 100644 --- a/client/src/app/+login/login.component.html +++ b/client/src/app/+login/login.component.html | |||
@@ -15,7 +15,7 @@ | |||
15 | <div class="wrapper"> | 15 | <div class="wrapper"> |
16 | <div class="login-form-and-externals"> | 16 | <div class="login-form-and-externals"> |
17 | 17 | ||
18 | <form role="form" (ngSubmit)="login()" [formGroup]="form"> | 18 | <form myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form"> |
19 | <div class="form-group"> | 19 | <div class="form-group"> |
20 | <div> | 20 | <div> |
21 | <label i18n for="username">User</label> | 21 | <label i18n for="username">User</label> |
diff --git a/client/src/app/shared/shared-main/plugins/index.ts b/client/src/app/shared/shared-main/plugins/index.ts index f36dab624..f45ed9b73 100644 --- a/client/src/app/shared/shared-main/plugins/index.ts +++ b/client/src/app/shared/shared-main/plugins/index.ts | |||
@@ -1 +1,2 @@ | |||
1 | export * from './plugin-placeholder.component' | 1 | export * from './plugin-placeholder.component' |
2 | export * from './plugin-selector.directive' | ||
diff --git a/client/src/app/shared/shared-main/plugins/plugin-selector.directive.ts b/client/src/app/shared/shared-main/plugins/plugin-selector.directive.ts new file mode 100644 index 000000000..576569f19 --- /dev/null +++ b/client/src/app/shared/shared-main/plugins/plugin-selector.directive.ts | |||
@@ -0,0 +1,21 @@ | |||
1 | import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core' | ||
2 | import { PluginSelectorId } from '@shared/models' | ||
3 | |||
4 | @Directive({ selector: '[myPluginSelector]' }) | ||
5 | export class PluginSelectorDirective implements OnInit { | ||
6 | @Input() pluginSelectorId: PluginSelectorId | ||
7 | |||
8 | constructor ( | ||
9 | private renderer: Renderer2, | ||
10 | private hostElement: ElementRef<HTMLElement> | ||
11 | ) { | ||
12 | |||
13 | } | ||
14 | |||
15 | ngOnInit () { | ||
16 | const id = this.hostElement.nativeElement.getAttribute('id') | ||
17 | if (id) throw new Error('Cannot set id on element that already has an id') | ||
18 | |||
19 | this.renderer.setAttribute(this.hostElement.nativeElement, 'id', `plugin-selector-${this.pluginSelectorId}`) | ||
20 | } | ||
21 | } | ||
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts index a90b59e41..10fc364b3 100644 --- a/client/src/app/shared/shared-main/shared-main.module.ts +++ b/client/src/app/shared/shared-main/shared-main.module.ts | |||
@@ -41,7 +41,7 @@ import { | |||
41 | SimpleSearchInputComponent, | 41 | SimpleSearchInputComponent, |
42 | TopMenuDropdownComponent | 42 | TopMenuDropdownComponent |
43 | } from './misc' | 43 | } from './misc' |
44 | import { PluginPlaceholderComponent } from './plugins' | 44 | import { PluginPlaceholderComponent, PluginSelectorDirective } from './plugins' |
45 | import { ActorRedirectGuard } from './router' | 45 | import { ActorRedirectGuard } from './router' |
46 | import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users' | 46 | import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users' |
47 | import { EmbedComponent, RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video' | 47 | import { EmbedComponent, RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video' |
@@ -108,7 +108,8 @@ import { VideoChannelService } from './video-channel' | |||
108 | 108 | ||
109 | EmbedComponent, | 109 | EmbedComponent, |
110 | 110 | ||
111 | PluginPlaceholderComponent | 111 | PluginPlaceholderComponent, |
112 | PluginSelectorDirective | ||
112 | ], | 113 | ], |
113 | 114 | ||
114 | exports: [ | 115 | exports: [ |
@@ -166,7 +167,8 @@ import { VideoChannelService } from './video-channel' | |||
166 | 167 | ||
167 | EmbedComponent, | 168 | EmbedComponent, |
168 | 169 | ||
169 | PluginPlaceholderComponent | 170 | PluginPlaceholderComponent, |
171 | PluginSelectorDirective | ||
170 | ], | 172 | ], |
171 | 173 | ||
172 | providers: [ | 174 | providers: [ |
diff --git a/shared/models/plugins/client/index.ts b/shared/models/plugins/client/index.ts index 6dfc6351f..c500185c9 100644 --- a/shared/models/plugins/client/index.ts +++ b/shared/models/plugins/client/index.ts | |||
@@ -1,6 +1,7 @@ | |||
1 | export * from './client-hook.model' | 1 | export * from './client-hook.model' |
2 | export * from './plugin-client-scope.type' | 2 | export * from './plugin-client-scope.type' |
3 | export * from './plugin-element-placeholder.type' | 3 | export * from './plugin-element-placeholder.type' |
4 | export * from './plugin-selector-id.type' | ||
4 | export * from './register-client-form-field.model' | 5 | export * from './register-client-form-field.model' |
5 | export * from './register-client-hook.model' | 6 | export * from './register-client-hook.model' |
6 | export * from './register-client-settings-script.model' | 7 | export * from './register-client-settings-script.model' |
diff --git a/shared/models/plugins/client/plugin-selector-id.type.ts b/shared/models/plugins/client/plugin-selector-id.type.ts new file mode 100644 index 000000000..b74dffbef --- /dev/null +++ b/shared/models/plugins/client/plugin-selector-id.type.ts | |||
@@ -0,0 +1 @@ | |||
export type PluginSelectorId = 'login-form' | |||
diff --git a/support/doc/plugins/guide.md b/support/doc/plugins/guide.md index acf4718e4..3785246a7 100644 --- a/support/doc/plugins/guide.md +++ b/support/doc/plugins/guide.md | |||
@@ -3,7 +3,6 @@ | |||
3 | <!-- START doctoc generated TOC please keep comment here to allow auto update --> | 3 | <!-- START doctoc generated TOC please keep comment here to allow auto update --> |
4 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> | 4 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> |
5 | 5 | ||
6 | |||
7 | - [Concepts](#concepts) | 6 | - [Concepts](#concepts) |
8 | - [Hooks](#hooks) | 7 | - [Hooks](#hooks) |
9 | - [Static files](#static-files) | 8 | - [Static files](#static-files) |
@@ -28,6 +27,7 @@ | |||
28 | - [Get server config](#get-server-config) | 27 | - [Get server config](#get-server-config) |
29 | - [Add custom fields to video form](#add-custom-fields-to-video-form) | 28 | - [Add custom fields to video form](#add-custom-fields-to-video-form) |
30 | - [Register settings script](#register-settings-script) | 29 | - [Register settings script](#register-settings-script) |
30 | - [Plugin selector on HTML elements](#plugin-selector-on-html-elements) | ||
31 | - [HTML placeholder elements](#html-placeholder-elements) | 31 | - [HTML placeholder elements](#html-placeholder-elements) |
32 | - [Add/remove left menu links](#addremove-left-menu-links) | 32 | - [Add/remove left menu links](#addremove-left-menu-links) |
33 | - [Publishing](#publishing) | 33 | - [Publishing](#publishing) |
@@ -759,6 +759,13 @@ async function register ({ registerSettingsScript }) { | |||
759 | }) | 759 | }) |
760 | } | 760 | } |
761 | ``` | 761 | ``` |
762 | #### Plugin selector on HTML elements | ||
763 | |||
764 | PeerTube provides some selectors (using `id` HTML attribute) on important blocks so plugins can easily change their style. | ||
765 | |||
766 | For example `#plugin-selector-login-form` could be used to hide the login form. | ||
767 | |||
768 | See the complete list on https://docs.joinpeertube.org/api-plugins | ||
762 | 769 | ||
763 | #### HTML placeholder elements | 770 | #### HTML placeholder elements |
764 | 771 | ||