Introduce plugin id selectors
This commit is contained in:
parent
7137377d09
commit
8afade2607
|
@ -15,7 +15,7 @@
|
|||
<div class="wrapper">
|
||||
<div class="login-form-and-externals">
|
||||
|
||||
<form role="form" (ngSubmit)="login()" [formGroup]="form">
|
||||
<form myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form">
|
||||
<div class="form-group">
|
||||
<div>
|
||||
<label i18n for="username">User</label>
|
||||
|
|
|
@ -1 +1,2 @@
|
|||
export * from './plugin-placeholder.component'
|
||||
export * from './plugin-selector.directive'
|
||||
|
|
|
@ -0,0 +1,21 @@
|
|||
import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core'
|
||||
import { PluginSelectorId } from '@shared/models'
|
||||
|
||||
@Directive({ selector: '[myPluginSelector]' })
|
||||
export class PluginSelectorDirective implements OnInit {
|
||||
@Input() pluginSelectorId: PluginSelectorId
|
||||
|
||||
constructor (
|
||||
private renderer: Renderer2,
|
||||
private hostElement: ElementRef<HTMLElement>
|
||||
) {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit () {
|
||||
const id = this.hostElement.nativeElement.getAttribute('id')
|
||||
if (id) throw new Error('Cannot set id on element that already has an id')
|
||||
|
||||
this.renderer.setAttribute(this.hostElement.nativeElement, 'id', `plugin-selector-${this.pluginSelectorId}`)
|
||||
}
|
||||
}
|
|
@ -41,7 +41,7 @@ import {
|
|||
SimpleSearchInputComponent,
|
||||
TopMenuDropdownComponent
|
||||
} from './misc'
|
||||
import { PluginPlaceholderComponent } from './plugins'
|
||||
import { PluginPlaceholderComponent, PluginSelectorDirective } from './plugins'
|
||||
import { ActorRedirectGuard } from './router'
|
||||
import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users'
|
||||
import { EmbedComponent, RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video'
|
||||
|
@ -108,7 +108,8 @@ import { VideoChannelService } from './video-channel'
|
|||
|
||||
EmbedComponent,
|
||||
|
||||
PluginPlaceholderComponent
|
||||
PluginPlaceholderComponent,
|
||||
PluginSelectorDirective
|
||||
],
|
||||
|
||||
exports: [
|
||||
|
@ -166,7 +167,8 @@ import { VideoChannelService } from './video-channel'
|
|||
|
||||
EmbedComponent,
|
||||
|
||||
PluginPlaceholderComponent
|
||||
PluginPlaceholderComponent,
|
||||
PluginSelectorDirective
|
||||
],
|
||||
|
||||
providers: [
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
export * from './client-hook.model'
|
||||
export * from './plugin-client-scope.type'
|
||||
export * from './plugin-element-placeholder.type'
|
||||
export * from './plugin-selector-id.type'
|
||||
export * from './register-client-form-field.model'
|
||||
export * from './register-client-hook.model'
|
||||
export * from './register-client-settings-script.model'
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
export type PluginSelectorId = 'login-form'
|
|
@ -3,7 +3,6 @@
|
|||
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
|
||||
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
|
||||
|
||||
|
||||
- [Concepts](#concepts)
|
||||
- [Hooks](#hooks)
|
||||
- [Static files](#static-files)
|
||||
|
@ -28,6 +27,7 @@
|
|||
- [Get server config](#get-server-config)
|
||||
- [Add custom fields to video form](#add-custom-fields-to-video-form)
|
||||
- [Register settings script](#register-settings-script)
|
||||
- [Plugin selector on HTML elements](#plugin-selector-on-html-elements)
|
||||
- [HTML placeholder elements](#html-placeholder-elements)
|
||||
- [Add/remove left menu links](#addremove-left-menu-links)
|
||||
- [Publishing](#publishing)
|
||||
|
@ -759,6 +759,13 @@ async function register ({ registerSettingsScript }) {
|
|||
})
|
||||
}
|
||||
```
|
||||
#### Plugin selector on HTML elements
|
||||
|
||||
PeerTube provides some selectors (using `id` HTML attribute) on important blocks so plugins can easily change their style.
|
||||
|
||||
For example `#plugin-selector-login-form` could be used to hide the login form.
|
||||
|
||||
See the complete list on https://docs.joinpeertube.org/api-plugins
|
||||
|
||||
#### HTML placeholder elements
|
||||
|
||||
|
|
Loading…
Reference in New Issue