imhven
/
abp
mirror of https://github.com/abpframework/abp
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #10299 from abpframework/feat/10298

Browse Source 
Add ElementOptions to ContentStrategy
pull/10300/head
Mehmet Erim 4 years ago committed by GitHub
parent e2faf69da1 57e9f38564
commit 064d569e79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File

12
docs/en/UI/Angular/Content-Strategy.md
Unescape View File

@ -11,13 +11,15 @@
constructor(
public content: string,
protected domStrategy?: DomStrategy,
protected contentSecurityStrategy?: ContentSecurityStrategy
protected contentSecurityStrategy?: ContentSecurityStrategy,
protected options?: ElementOptions = {},
)
```
- `content` is set to `<script>` and `<style>` elements as `textContent` property.
- `domStrategy` is the `DomStrategy` that will be used when inserting the created element. (_default: AppendToHead_)
- `contentSecurityStrategy` is the `ContentSecurityStrategy` that will be used on the created element before inserting it. (_default: None_)
- `options` can be used to pass any option to the element that will be created. e.g: `{ id: "some-id" }` (_default: empty object_)
Please refer to [DomStrategy](./Dom-Strategy.md) and [ContentSecurityStrategy](./Content-Security-Strategy.md) documentation for their usage.
@ -57,7 +59,7 @@ Predefined content strategies are accessible via `CONTENT_STRATEGY` constant.
### AppendScriptToBody
```js
CONTENT_STRATEGY.AppendScriptToBody(content: string)
CONTENT_STRATEGY.AppendScriptToBody(content: string, options?: ElementOptions<HTMLScriptElement>)
```
Creates a `<script>` element with the given content and places it at the **end** of `<body>` tag in the document.
@ -66,7 +68,7 @@ Creates a `<script>` element with the given content and places it at the **end**
### AppendScriptToHead
```js
CONTENT_STRATEGY.AppendScriptToHead(content: string)
CONTENT_STRATEGY.AppendScriptToHead(content: string, options?: ElementOptions<HTMLScriptElement>)
```
Creates a `<script>` element with the given content and places it at the **end** of `<head>` tag in the document.
@ -75,7 +77,7 @@ Creates a `<script>` element with the given content and places it at the **end**
### AppendStyleToHead
```js
CONTENT_STRATEGY.AppendStyleToHead(content: string)
CONTENT_STRATEGY.AppendStyleToHead(content: string, options?: ElementOptions<HTMLStyleElement>)
```
Creates a `<style>` element with the given content and places it at the **end** of `<head>` tag in the document.
@ -84,7 +86,7 @@ Creates a `<style>` element with the given content and places it at the **end**
### PrependStyleToHead
```js
CONTENT_STRATEGY.PrependStyleToHead(content: string)
CONTENT_STRATEGY.PrependStyleToHead(content: string, options?: ElementOptions<HTMLStyleElement>)
```
Creates a `<style>` element with the given content and places it at the **beginning** of `<head>` tag in the document.

25
npm/ng-packs/packages/core/src/lib/strategies/content.strategy.ts
Unescape View File

@ -1,11 +1,16 @@
import { ContentSecurityStrategy, CONTENT_SECURITY_STRATEGY } from './content-security.strategy';
import { DomStrategy, DOM_STRATEGY } from './dom.strategy';
export type ElementOptions<T extends HTMLScriptElement | HTMLStyleElement = any> = Partial<{
[key in keyof T]: T[key];
}>;
export abstract class ContentStrategy<T extends HTMLScriptElement | HTMLStyleElement = any> {
constructor(
public content: string,
protected domStrategy: DomStrategy = DOM_STRATEGY.AppendToHead(),
protected contentSecurityStrategy: ContentSecurityStrategy = CONTENT_SECURITY_STRATEGY.None(),
protected options: ElementOptions<T> = {},
) {}
abstract createElement(): T;
@ -13,6 +18,10 @@ export abstract class ContentStrategy<T extends HTMLScriptElement | HTMLStyleEle
insertElement(): T {
const element = this.createElement();
if (this.options && Object.keys(this.options).length > 0) {
Object.keys(this.options).forEach(key => (element[key] = this.options[key]));
}
this.contentSecurityStrategy.applyCSP(element);
this.domStrategy.insertElement(element);
@ -39,16 +48,16 @@ export class ScriptContentStrategy extends ContentStrategy<HTMLScriptElement> {
}
export const CONTENT_STRATEGY = {
AppendScriptToBody(content: string) {
return new ScriptContentStrategy(content, DOM_STRATEGY.AppendToBody());
AppendScriptToBody(content: string, options?: ElementOptions<HTMLScriptElement>) {
return new ScriptContentStrategy(content, DOM_STRATEGY.AppendToBody(), undefined, options);
},
AppendScriptToHead(content: string) {
return new ScriptContentStrategy(content, DOM_STRATEGY.AppendToHead());
AppendScriptToHead(content: string, options?: ElementOptions<HTMLScriptElement>) {
return new ScriptContentStrategy(content, DOM_STRATEGY.AppendToHead(), undefined, options);
},
AppendStyleToHead(content: string) {
return new StyleContentStrategy(content, DOM_STRATEGY.AppendToHead());
AppendStyleToHead(content: string, options?: ElementOptions<HTMLStyleElement>) {
return new StyleContentStrategy(content, DOM_STRATEGY.AppendToHead(), undefined, options);
},
PrependStyleToHead(content: string) {
return new StyleContentStrategy(content, DOM_STRATEGY.PrependToHead());
PrependStyleToHead(content: string, options?: ElementOptions<HTMLStyleElement>) {
return new StyleContentStrategy(content, DOM_STRATEGY.PrependToHead(), undefined, options);
},
};

Write Preview
Loading…
Cancel
Save