1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | import {
|
8 | assignStyle,
|
9 | domify,
|
10 | delegate as domDelegate,
|
11 | query as domQuery
|
12 | } from 'min-dom';
|
13 |
|
14 |
|
15 |
|
16 | var BPMNIO_LOGO_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.02 5.57" width="53" height="21"><path fill="currentColor" d="M1.88.92v.14c0 .41-.13.68-.4.8.33.14.46.44.46.86v.33c0 .61-.33.95-.95.95H0V0h.95c.65 0 .93.3.93.92zM.63.57v1.06h.24c.24 0 .38-.1.38-.43V.98c0-.28-.1-.4-.32-.4zm0 1.63v1.22h.36c.2 0 .32-.1.32-.39v-.35c0-.37-.12-.48-.4-.48H.63zM4.18.99v.52c0 .64-.31.98-.94.98h-.3V4h-.62V0h.92c.63 0 .94.35.94.99zM2.94.57v1.35h.3c.2 0 .3-.09.3-.37v-.6c0-.29-.1-.38-.3-.38h-.3zm2.89 2.27L6.25 0h.88v4h-.6V1.12L6.1 3.99h-.6l-.46-2.82v2.82h-.55V0h.87zM8.14 1.1V4h-.56V0h.79L9 2.4V0h.56v4h-.64zm2.49 2.29v.6h-.6v-.6zM12.12 1c0-.63.33-1 .95-1 .61 0 .95.37.95 1v2.04c0 .64-.34 1-.95 1-.62 0-.95-.37-.95-1zm.62 2.08c0 .28.13.39.33.39s.32-.1.32-.4V.98c0-.29-.12-.4-.32-.4s-.33.11-.33.4z"/><path fill="currentColor" d="M0 4.53h14.02v1.04H0zM11.08 0h.63v.62h-.63zm.63 4V1h-.63v2.98z"/></svg>';
|
17 |
|
18 | export var BPMNIO_IMG = BPMNIO_LOGO_SVG;
|
19 |
|
20 | export var LOGO_STYLES = {
|
21 | verticalAlign: 'middle'
|
22 | };
|
23 |
|
24 | export var LINK_STYLES = {
|
25 | 'color': '#404040'
|
26 | };
|
27 |
|
28 | var LIGHTBOX_STYLES = {
|
29 | 'zIndex': '1001',
|
30 | 'position': 'fixed',
|
31 | 'top': '0',
|
32 | 'left': '0',
|
33 | 'right': '0',
|
34 | 'bottom': '0'
|
35 | };
|
36 |
|
37 | var BACKDROP_STYLES = {
|
38 | 'width': '100%',
|
39 | 'height': '100%',
|
40 | 'background': 'rgba(40,40,40,0.2)'
|
41 | };
|
42 |
|
43 | var NOTICE_STYLES = {
|
44 | 'position': 'absolute',
|
45 | 'left': '50%',
|
46 | 'top': '40%',
|
47 | 'transform': 'translate(-50%)',
|
48 | 'width': '260px',
|
49 | 'padding': '10px',
|
50 | 'background': 'white',
|
51 | 'boxShadow': '0 1px 4px rgba(0,0,0,0.3)',
|
52 | 'fontFamily': 'Helvetica, Arial, sans-serif',
|
53 | 'fontSize': '14px',
|
54 | 'display': 'flex',
|
55 | 'lineHeight': '1.3'
|
56 | };
|
57 |
|
58 | var LIGHTBOX_MARKUP =
|
59 | '<div class="bjs-powered-by-lightbox">' +
|
60 | '<div class="backdrop"></div>' +
|
61 | '<div class="notice">' +
|
62 | '<a href="https://bpmn.io" target="_blank" rel="noopener" class="link">' +
|
63 | BPMNIO_IMG +
|
64 | '</a>' +
|
65 | '<span>' +
|
66 | 'Web-based tooling for BPMN, DMN and CMMN diagrams ' +
|
67 | 'powered by <a href="https://bpmn.io" target="_blank" rel="noopener">bpmn.io</a>.' +
|
68 | '</span>' +
|
69 | '</div>' +
|
70 | '</div>';
|
71 |
|
72 |
|
73 | var lightbox;
|
74 |
|
75 | function createLightbox() {
|
76 | lightbox = domify(LIGHTBOX_MARKUP);
|
77 |
|
78 | assignStyle(lightbox, LIGHTBOX_STYLES);
|
79 | assignStyle(domQuery('svg', lightbox), LOGO_STYLES);
|
80 | assignStyle(domQuery('.backdrop', lightbox), BACKDROP_STYLES);
|
81 | assignStyle(domQuery('.notice', lightbox), NOTICE_STYLES);
|
82 | assignStyle(domQuery('.link', lightbox), LINK_STYLES, {
|
83 | 'margin': '15px 20px 15px 10px',
|
84 | 'alignSelf': 'center'
|
85 | });
|
86 | }
|
87 |
|
88 | export function open() {
|
89 |
|
90 | if (!lightbox) {
|
91 | createLightbox();
|
92 |
|
93 | domDelegate.bind(lightbox, '.backdrop', 'click', function(event) {
|
94 | document.body.removeChild(lightbox);
|
95 | });
|
96 | }
|
97 |
|
98 | document.body.appendChild(lightbox);
|
99 | }
|