@dosgato/templating 1.1.16 → 1.1.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/component.js +0 -83
- package/package.json +1 -1
package/dist/component.js
CHANGED
|
@@ -13,40 +13,6 @@ export class Component extends ResourceProvider {
|
|
|
13
13
|
* Provide this when you create a template to identify what you are defining.
|
|
14
14
|
*/
|
|
15
15
|
static templateKey;
|
|
16
|
-
/**
|
|
17
|
-
* The rendering server will provide an instance of the APIClient interface so that
|
|
18
|
-
* you can run any API GraphQL query you like in your `fetch` function. There are also
|
|
19
|
-
* some useful methods there like processRich to help you convert links in rich text
|
|
20
|
-
* strings.
|
|
21
|
-
*
|
|
22
|
-
* Do NOT mutate data received from the API as it may be cached and given to other
|
|
23
|
-
* Component instances that run the same type of query.
|
|
24
|
-
*/
|
|
25
|
-
api;
|
|
26
|
-
/**
|
|
27
|
-
* This property will be set during page render and you may refer to it at any time to
|
|
28
|
-
* determine whether you are doing your work in edit mode or regular rendering mode.
|
|
29
|
-
* The editBar and newBar methods will automatically use it to blank out the editing UI.
|
|
30
|
-
*/
|
|
31
|
-
editMode;
|
|
32
|
-
/**
|
|
33
|
-
* The extension of the variation currently being rendered.
|
|
34
|
-
*
|
|
35
|
-
* See 'renderVariation' and 'variationsToFetch' for more discussion of variations.
|
|
36
|
-
*/
|
|
37
|
-
extension;
|
|
38
|
-
/**
|
|
39
|
-
* When hydrating an inherited component, the renderer will set this to the id of the page it
|
|
40
|
-
* came from. You may use this information in any of the phases to alter your behavior if needed.
|
|
41
|
-
*
|
|
42
|
-
* For instance, you may decide that your fetch function needs some extra information from the
|
|
43
|
-
* originating page instead of the page you're being inherited into (your `this.page` will
|
|
44
|
-
* be the page currently being rendered, NOT the page the inheritable component came from).
|
|
45
|
-
*
|
|
46
|
-
* This property is also used to alter the edit bar. Inherited components may never be edited
|
|
47
|
-
* except on their original page, so the edit bar will render with a link to the original page.
|
|
48
|
-
*/
|
|
49
|
-
inheritedFrom;
|
|
50
16
|
/**
|
|
51
17
|
* The first phase of rendering a component is the fetch phase. Each component may
|
|
52
18
|
* provide a fetch method that looks up data it needs from external sources. This step
|
|
@@ -89,17 +55,6 @@ export class Component extends ResourceProvider {
|
|
|
89
55
|
* '.js.map', you should receive 'js.map'.
|
|
90
56
|
*/
|
|
91
57
|
shouldFetchVariation(extension) { return extension === 'html'; }
|
|
92
|
-
/**
|
|
93
|
-
* Some components may be inheritable to subpages within the same site. For instance, a site's
|
|
94
|
-
* social media links may appear on every page's footer. To accomplish this in your template,
|
|
95
|
-
* you need to fetch ancestor page data in your fetch phase, identify the component data you want
|
|
96
|
-
* to inherit, and then call this function within your fetch to let the renderer know it needs to
|
|
97
|
-
* process those components (hydrate them, call their fetch functions, and include them in the render).
|
|
98
|
-
*
|
|
99
|
-
* The inherited components will be added to the appropriate area's array in the renderedAreas
|
|
100
|
-
* parameter of your render function.
|
|
101
|
-
*/
|
|
102
|
-
registerInherited;
|
|
103
58
|
/**
|
|
104
59
|
* Inherit components from another page with matching area
|
|
105
60
|
*
|
|
@@ -134,44 +89,6 @@ export class Component extends ResourceProvider {
|
|
|
134
89
|
setContext(renderCtxFromParent, areaName) {
|
|
135
90
|
return renderCtxFromParent;
|
|
136
91
|
}
|
|
137
|
-
/**
|
|
138
|
-
* This function will be provided by the rendering server and should be used inside your fetch
|
|
139
|
-
* method to prepare editor-provided HTML for later rendering. It will do things like find and
|
|
140
|
-
* resolve link definitions in the internal dosgato format.
|
|
141
|
-
*/
|
|
142
|
-
fetchRichText;
|
|
143
|
-
/**
|
|
144
|
-
* This function will be provided by the rendering server and should be used during the render
|
|
145
|
-
* phase to clean up editor-provided HTML. It will do things like clean up tags that were accidentally
|
|
146
|
-
* left open to protect overall page integrity, and fix header levels for accessibility.
|
|
147
|
-
*
|
|
148
|
-
* For instance, an editor supplies a title to be placed above some rich editor content. The
|
|
149
|
-
* title uses an <h2>, so the headers inside the rich editor content should start at <h3> and
|
|
150
|
-
* should not use <h1> or <h2>.
|
|
151
|
-
*
|
|
152
|
-
* Setting headerLevel: 3 instructs the renderRichText function to analyze and rebalance the header
|
|
153
|
-
* structure of the content so that if it had an h2, it woud be replaced with an h3. Additionally,
|
|
154
|
-
* if the user skipped a header level (a WCAG violation) that situation will be repaired as well
|
|
155
|
-
* as possible.
|
|
156
|
-
*
|
|
157
|
-
* If you do not provide a headerLevel, the one from `this.renderCtx` will be used. However, if you
|
|
158
|
-
* provide a non-blank value for `advanceHeader`, the headerLevel from `this.renderCtx` + 1 will be used.
|
|
159
|
-
*
|
|
160
|
-
* This way you can easily render a piece of rich text in a component that has an optional title:
|
|
161
|
-
*
|
|
162
|
-
* this.renderRichText(this.data.richtext, { advanceHeader: this.data.title })
|
|
163
|
-
*
|
|
164
|
-
* If this.data.title is non-blank, the rich text will be balanced below it, but if it is blank,
|
|
165
|
-
* it will be balanced at the level the title would have had.
|
|
166
|
-
*/
|
|
167
|
-
renderRichText;
|
|
168
|
-
/**
|
|
169
|
-
* When we give editors the ability to enter raw HTML, we still need to minimally process it to
|
|
170
|
-
* protect the rest of the page from unclosed tags and other syntax problems, but we don't want
|
|
171
|
-
* to muck around with headers or links, so this function will be provided by the render server
|
|
172
|
-
* and will only do the parsing and reconstruction part
|
|
173
|
-
*/
|
|
174
|
-
renderRawHTML;
|
|
175
92
|
/**
|
|
176
93
|
* If you are rendering a variation for a component that has areas and children,
|
|
177
94
|
* you can call Component.renderVariation(extension, this.renderedAreas) to help you easily
|