Test page for directives

This commit is contained in:
Knut Sveidqvist
2020-07-17 12:44:42 +02:00
parent da8e75f98a
commit 062126c43d
7 changed files with 346 additions and 78 deletions

View File

@@ -17,66 +17,103 @@
.mermaid2 {
display: none;
}
.someClass > * {
/* fill: red !important; */
}
</style>
</head>
<body>
<h1>info below</h1>
<div class="flex">
<div class="mermaid2" style="width: 50%; height: 20%;">
flowchart BT
subgraph two
b1
end
subgraph three
c1-->c2
end
c1 --apa apa apa--> b1
two --> c2
<div class="flex flex-wrap">
<div class="mermaid" style="width: 50%; height: 20%;">
%%{init: { 'logLevel': 0, 'theme': 'default'} }%%
graph TD
A[Default] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid" style="width: 50%; height: 200px;">
sequenceDiagram
Alice->>Bob:Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
Bob->>Alice: I'm short though
</div>
<div class="mermaid" style="width: 50%; height: 200px;">
%%{init: {'securityLevel': 'loose'}}%%
<div class="mermaid" style="width: 50%; height: 20%;">
%%{init: { 'logLevel': 1, 'theme': 'forest'} }%%
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{{Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?}}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
click A "index.html#link-clicked" "link test"
click B callback "click test"
classDef someclass fill:#f96;
class A someclass;
class C someclass;
A[Forest] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid2" style="width: 50%; height: 200px;">
<div class="mermaid" style="width: 50%; height: 20%;">
%%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
flowchart BT
subgraph a
b1 -- ok --> b2
end
a -- sert --> c
c --> d
b1 --> d
a --asd123 --> d
graph TD
A[Neutral] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
stateDiagram-v2
state A {
B1 --> B2: ok
}
A --> C: sert
C --> D
B1 --> D
A --> D: asd123
</div>
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
<div class="mermaid" style="background: #3f3f3f; width: 50%; height: 20%;">
%%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
graph TD
A[Dark] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid" style="background: #3f3f3f; width: 50%; height: 20%;">
%%{init: { 'logLevel': 1} }%%
graph TD
A[None set] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
</div>
<script src="./mermaid.js"></script>
<script>
@@ -84,17 +121,19 @@ stateDiagram-v2
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
// theme: 'dark',
// theme: 'dark',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { curve: 'cardinal', "htmlLabels": false },
flowchart: { useMaxWidth: true },
graph: { curve: 'cardinal', "htmlLabels": false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif',
curve: 'cardinal',
securityLevel: 'strict'
securityLevel: 'strict',
});
function callback(){alert('It worked');}
</script>

View File

@@ -0,0 +1,141 @@
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
<style>
body {
/* background: rgb(221, 208, 208); */
/* background:#333; */
font-family: 'Arial';
}
h1 { color: grey;}
.mermaid2 {
display: none;
}
.someClass > * {
/* fill: red !important; */
}
</style>
</head>
<body>
<h1>info below</h1>
<div class="flex flex-wrap">
<div class="mermaid" style="width: 50%; height: 20%;">
%%{init: { 'logLevel': 0, 'theme': 'default'} }%%
graph TD
A[Default] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid" style="width: 50%; height: 20%;">
%%{init: { 'logLevel': 1, 'theme': 'forest'} }%%
graph TD
A[Forest] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid" style="width: 50%; height: 20%;">
%%{init: { 'logLevel': 1, 'theme': 'neutral'} }%%
graph TD
A[Neutral] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid" style="background: #3f3f3f; width: 50%; height: 20%;">
%%{init: { 'logLevel': 1, 'theme': 'dark'} }%%
graph TD
A[Dark] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
<div class="mermaid" style="background: #3f3f3f; width: 50%; height: 20%;">
%%{init: { 'logLevel': 1} }%%
graph TD
A[None set] -->|Get money| B(Go shopping)
B --> C{Let me think}
B --> G[/Another/]
C ==>|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div>
</div>
<script src="./mermaid.js"></script>
<script>
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
// theme: 'dark',
// theme: 'dark',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
flowchart: { useMaxWidth: true },
graph: { curve: 'cardinal', "htmlLabels": false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif',
curve: 'cardinal',
securityLevel: 'strict',
});
function callback(){alert('It worked');}
</script>
</body>
</html>

68
dist/mermaid.core.js vendored
View File

@@ -1695,10 +1695,19 @@ var defaultConfig = Object.freeze(config);
var siteConfig = Object(_utils__WEBPACK_IMPORTED_MODULE_0__["assignWithDepth"])({}, defaultConfig);
var currentConfig = Object(_utils__WEBPACK_IMPORTED_MODULE_0__["assignWithDepth"])({}, defaultConfig);
/**
* Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
* the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
* to the defaultConfig
* Note: currentConfig is set in this function
*## setSiteConfig
*| Function | Description | Type | Values |
*| --------- | ------------------- | ------- | ------------------ |
*| setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|
***Notes:**
*Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
*the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
*to the defaultConfig
*Note: currentConfig is set in this function
**Default value: At default, will mirror Global Config**
* @param conf - the base currentConfig to use as siteConfig
* @returns {*} - the siteConfig
*/
@@ -1711,7 +1720,13 @@ var setSiteConfig = function setSiteConfig(conf) {
return getSiteConfig();
};
/**
* Obtains the current siteConfig base configuration
*## getSiteConfig
*| Function | Description | Type | Values |
*| --------- | ------------------- | ------- | ------------------ |
*| setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig|
***Notes**:
*Returns **any** values in siteConfig.
* @returns {*}
*/
@@ -1719,9 +1734,16 @@ var getSiteConfig = function getSiteConfig() {
return Object(_utils__WEBPACK_IMPORTED_MODULE_0__["assignWithDepth"])({}, siteConfig);
};
/**
* Sets the currentConfig. The param conf is sanitized based on the siteConfig.secure keys. Any
* values found in conf with key found in siteConfig.secure will be replaced with the corresponding
* siteConfig value.
*## setConfig
*| Function | Description | Type | Values |
*| --------- | ------------------- | ------- | ------------------ |
*| setSiteConfig|Sets the siteConfig to desired values | Put Request| Any Values, except ones in secure array|
***Notes**:
*Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
*values found in conf with key found in siteConfig.secure will be replaced with the corresponding
*siteConfig value.
* @param conf - the potential currentConfig
* @returns {*} - the currentConfig merged with the sanitized conf
*/
@@ -1732,7 +1754,13 @@ var setConfig = function setConfig(conf) {
return getConfig();
};
/**
* Obtains the currentConfig
* ## getConfig
*| Function | Description | Type | Return Values |
*| --------- | ------------------- | ------- | ------------------ |
*| getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig|
***Notes**:
*Returns **any** the currentConfig
* @returns {*} - the currentConfig
*/
@@ -1740,8 +1768,13 @@ var getConfig = function getConfig() {
return Object(_utils__WEBPACK_IMPORTED_MODULE_0__["assignWithDepth"])({}, currentConfig);
};
/**
* Ensures options parameter does not attempt to override siteConfig secure keys
* Note: modifies options in-place
*## sanitize
*| Function | Description | Type | Values |
*| --------- | ------------------- | ------- | ------------------ |
*| sanitize |Sets the siteConfig to desired values. | Put Request |None|
*Ensures options parameter does not attempt to override siteConfig secure keys
*Note: modifies options in-place
* @param options - the potential setConfig parameter
*/
@@ -1756,7 +1789,18 @@ var sanitize = function sanitize(options) {
});
};
/**
* Resets this currentConfig to conf
*## reset
*| Function | Description | Type | Required | Values |
*| --------- | ------------------- | ------- | -------- | ------------------ |
*| reset|Resets currentConfig to conf| Put Request | Required | None|
*
*| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- |
*| conf| base set of values, which currentConfig coul be **reset** to.| Dictionary | Required | Any Values, with respect to the secure Array|
*
**Notes :
(default: current siteConfig ) (optional, default `getSiteConfig()`)
* @param conf - the base currentConfig to reset to (default: current siteConfig )
*/

File diff suppressed because one or more lines are too long

68
dist/mermaid.js vendored
View File

@@ -47478,10 +47478,19 @@ var defaultConfig = Object.freeze(config);
var siteConfig = Object(_utils__WEBPACK_IMPORTED_MODULE_0__["assignWithDepth"])({}, defaultConfig);
var currentConfig = Object(_utils__WEBPACK_IMPORTED_MODULE_0__["assignWithDepth"])({}, defaultConfig);
/**
* Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
* the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
* to the defaultConfig
* Note: currentConfig is set in this function
*## setSiteConfig
*| Function | Description | Type | Values |
*| --------- | ------------------- | ------- | ------------------ |
*| setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|
***Notes:**
*Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset
*the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig
*to the defaultConfig
*Note: currentConfig is set in this function
**Default value: At default, will mirror Global Config**
* @param conf - the base currentConfig to use as siteConfig
* @returns {*} - the siteConfig
*/
@@ -47494,7 +47503,13 @@ var setSiteConfig = function setSiteConfig(conf) {
return getSiteConfig();
};
/**
* Obtains the current siteConfig base configuration
*## getSiteConfig
*| Function | Description | Type | Values |
*| --------- | ------------------- | ------- | ------------------ |
*| setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig|
***Notes**:
*Returns **any** values in siteConfig.
* @returns {*}
*/
@@ -47502,9 +47517,16 @@ var getSiteConfig = function getSiteConfig() {
return Object(_utils__WEBPACK_IMPORTED_MODULE_0__["assignWithDepth"])({}, siteConfig);
};
/**
* Sets the currentConfig. The param conf is sanitized based on the siteConfig.secure keys. Any
* values found in conf with key found in siteConfig.secure will be replaced with the corresponding
* siteConfig value.
*## setConfig
*| Function | Description | Type | Values |
*| --------- | ------------------- | ------- | ------------------ |
*| setSiteConfig|Sets the siteConfig to desired values | Put Request| Any Values, except ones in secure array|
***Notes**:
*Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any
*values found in conf with key found in siteConfig.secure will be replaced with the corresponding
*siteConfig value.
* @param conf - the potential currentConfig
* @returns {*} - the currentConfig merged with the sanitized conf
*/
@@ -47515,7 +47537,13 @@ var setConfig = function setConfig(conf) {
return getConfig();
};
/**
* Obtains the currentConfig
* ## getConfig
*| Function | Description | Type | Return Values |
*| --------- | ------------------- | ------- | ------------------ |
*| getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig|
***Notes**:
*Returns **any** the currentConfig
* @returns {*} - the currentConfig
*/
@@ -47523,8 +47551,13 @@ var getConfig = function getConfig() {
return Object(_utils__WEBPACK_IMPORTED_MODULE_0__["assignWithDepth"])({}, currentConfig);
};
/**
* Ensures options parameter does not attempt to override siteConfig secure keys
* Note: modifies options in-place
*## sanitize
*| Function | Description | Type | Values |
*| --------- | ------------------- | ------- | ------------------ |
*| sanitize |Sets the siteConfig to desired values. | Put Request |None|
*Ensures options parameter does not attempt to override siteConfig secure keys
*Note: modifies options in-place
* @param options - the potential setConfig parameter
*/
@@ -47539,7 +47572,18 @@ var sanitize = function sanitize(options) {
});
};
/**
* Resets this currentConfig to conf
*## reset
*| Function | Description | Type | Required | Values |
*| --------- | ------------------- | ------- | -------- | ------------------ |
*| reset|Resets currentConfig to conf| Put Request | Required | None|
*
*| Parameter | Description |Type | Required | Values|
*| --- | --- | --- | --- | --- |
*| conf| base set of values, which currentConfig coul be **reset** to.| Dictionary | Required | Any Values, with respect to the secure Array|
*
**Notes :
(default: current siteConfig ) (optional, default `getSiteConfig()`)
* @param conf - the base currentConfig to reset to (default: current siteConfig )
*/

2
dist/mermaid.js.map vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long