1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | import {
|
8 | domify,
|
9 | delegate as domDelegate
|
10 | } from 'min-dom';
|
11 |
|
12 |
|
13 |
|
14 | var BPMNIO_LOGO_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960"><path fill="#fff" d="M960 60v839c0 33-27 61-60 61H60c-33 0-60-27-60-60V60C0 27 27 0 60 0h839c34 0 61 27 61 60z"/><path fill="#52b415" d="M217 548a205 205 0 0 0-144 58 202 202 0 0 0-4 286 202 202 0 0 0 285 3 200 200 0 0 0 48-219 203 203 0 0 0-185-128zM752 6a206 206 0 0 0-192 285 206 206 0 0 0 269 111 207 207 0 0 0 111-260A204 204 0 0 0 752 6zM62 0A62 62 0 0 0 0 62v398l60 46a259 259 0 0 1 89-36c5-28 10-57 14-85l99 2 12 85a246 246 0 0 1 88 38l70-52 69 71-52 68c17 30 29 58 35 90l86 14-2 100-86 12a240 240 0 0 1-38 89l43 58h413c37 0 60-27 60-61V407a220 220 0 0 1-44 40l21 85-93 39-45-76a258 258 0 0 1-98 1l-45 76-94-39 22-85a298 298 0 0 1-70-69l-86 22-38-94 76-45a258 258 0 0 1-1-98l-76-45 40-94 85 22a271 271 0 0 1 41-47z"/></svg>';
|
15 |
|
16 | var BPMNIO_LOGO_URL = 'data:image/svg+xml,' + encodeURIComponent(BPMNIO_LOGO_SVG);
|
17 |
|
18 | export var BPMNIO_IMG = '<img width="52" height="52" src="' + BPMNIO_LOGO_URL + '" />';
|
19 |
|
20 | function css(attrs) {
|
21 | return attrs.join(';');
|
22 | }
|
23 |
|
24 | var LIGHTBOX_STYLES = css([
|
25 | 'z-index: 1001',
|
26 | 'position: fixed',
|
27 | 'top: 0',
|
28 | 'left: 0',
|
29 | 'right: 0',
|
30 | 'bottom: 0'
|
31 | ]);
|
32 |
|
33 | var BACKDROP_STYLES = css([
|
34 | 'width: 100%',
|
35 | 'height: 100%',
|
36 | 'background: rgba(0,0,0,0.2)'
|
37 | ]);
|
38 |
|
39 | var NOTICE_STYLES = css([
|
40 | 'position: absolute',
|
41 | 'left: 50%',
|
42 | 'top: 40%',
|
43 | 'margin: 0 -130px',
|
44 | 'width: 260px',
|
45 | 'padding: 10px',
|
46 | 'background: white',
|
47 | 'border: solid 1px #AAA',
|
48 | 'border-radius: 3px',
|
49 | 'font-family: Helvetica, Arial, sans-serif',
|
50 | 'font-size: 14px',
|
51 | 'line-height: 1.2em'
|
52 | ]);
|
53 |
|
54 | var LIGHTBOX_MARKUP =
|
55 | '<div class="bjs-powered-by-lightbox" style="' + LIGHTBOX_STYLES + '">' +
|
56 | '<div class="backdrop" style="' + BACKDROP_STYLES + '"></div>' +
|
57 | '<div class="notice" style="' + NOTICE_STYLES + '">' +
|
58 | '<a href="http://bpmn.io" target="_blank" style="float: left; margin-right: 10px">' +
|
59 | BPMNIO_IMG +
|
60 | '</a>' +
|
61 | 'Web-based tooling for BPMN, DMN and CMMN diagrams ' +
|
62 | 'powered by <a href="http://bpmn.io" target="_blank">bpmn.io</a>.' +
|
63 | '</div>' +
|
64 | '</div>';
|
65 |
|
66 |
|
67 | var lightbox;
|
68 |
|
69 | export function open() {
|
70 |
|
71 | if (!lightbox) {
|
72 | lightbox = domify(LIGHTBOX_MARKUP);
|
73 |
|
74 | domDelegate.bind(lightbox, '.backdrop', 'click', function(event) {
|
75 | document.body.removeChild(lightbox);
|
76 | });
|
77 | }
|
78 |
|
79 | document.body.appendChild(lightbox);
|
80 | } |
\ | No newline at end of file |