diff --git a/lib/BaseViewer.js b/lib/BaseViewer.js
index d727c31e..d5608472 100644
--- a/lib/BaseViewer.js
+++ b/lib/BaseViewer.js
@@ -13,6 +13,7 @@ import {
import {
domify,
+ assignStyle,
query as domQuery,
remove as domRemove
} from 'min-dom';
@@ -655,7 +656,7 @@ BaseViewer.prototype._createContainer = function(options) {
var container = domify('');
- assign(container.style, {
+ assignStyle(container, {
width: ensureUnit(options.width),
height: ensureUnit(options.height),
position: options.position
@@ -735,7 +736,8 @@ function findBPMNDiagram(definitions, diagramId) {
import {
open as openPoweredBy,
BPMNIO_IMG,
- LINK_STYLES as BPMNIO_LINK_STYLES
+ LOGO_STYLES,
+ LINK_STYLES
} from './util/PoweredByUtil';
import {
@@ -758,12 +760,20 @@ function addProjectLogo(container) {
'target="_blank" ' +
'class="bjs-powered-by" ' +
'title="Powered by bpmn.io" ' +
- 'style="position: absolute; bottom: 15px; right: 15px; z-index: 100; ' + BPMNIO_LINK_STYLES + '">' +
+ '>' +
img +
'';
var linkElement = domify(linkMarkup);
+ assignStyle(domQuery('svg', linkElement), LOGO_STYLES);
+ assignStyle(linkElement, LINK_STYLES, {
+ position: 'absolute',
+ bottom: '15px',
+ right: '15px',
+ zIndex: '100'
+ });
+
container.appendChild(linkElement);
domEvent.bind(linkElement, 'click', function(event) {
diff --git a/lib/util/PoweredByUtil.js b/lib/util/PoweredByUtil.js
index f1d1994d..5a541a80 100644
--- a/lib/util/PoweredByUtil.js
+++ b/lib/util/PoweredByUtil.js
@@ -5,59 +5,61 @@
*/
import {
+ assignStyle,
domify,
- delegate as domDelegate
+ delegate as domDelegate,
+ query as domQuery
} from 'min-dom';
// inlined ../../resources/logo.svg
-var BPMNIO_LOGO_SVG = '';
+var BPMNIO_LOGO_SVG = '';
export var BPMNIO_IMG = BPMNIO_LOGO_SVG;
-function css(attrs) {
- return attrs.join(';');
-}
+export var LOGO_STYLES = {
+ verticalAlign: 'middle'
+};
-export var LINK_STYLES = css([
- 'color: #404040'
-]);
+export var LINK_STYLES = {
+ 'color': '#404040'
+};
-var LIGHTBOX_STYLES = css([
- 'z-index: 1001',
- 'position: fixed',
- 'top: 0',
- 'left: 0',
- 'right: 0',
- 'bottom: 0'
-]);
+var LIGHTBOX_STYLES = {
+ 'zIndex': '1001',
+ 'position': 'fixed',
+ 'top': '0',
+ 'left': '0',
+ 'right': '0',
+ 'bottom': '0'
+};
-var BACKDROP_STYLES = css([
- 'width: 100%',
- 'height: 100%',
- 'background: rgba(40,40,40,0.2)'
-]);
+var BACKDROP_STYLES = {
+ 'width': '100%',
+ 'height': '100%',
+ 'background': 'rgba(40,40,40,0.2)'
+};
-var NOTICE_STYLES = css([
- 'position: absolute',
- 'left: 50%',
- 'top: 40%',
- 'transform: translate(-50%)',
- 'width: 260px',
- 'padding: 10px',
- 'background: white',
- 'box-shadow: 0 1px 4px rgba(0,0,0,0.3)',
- 'font-family: Helvetica, Arial, sans-serif',
- 'font-size: 14px',
- 'display: flex',
- 'line-height: 1.3'
-]);
+var NOTICE_STYLES = {
+ 'position': 'absolute',
+ 'left': '50%',
+ 'top': '40%',
+ 'transform': 'translate(-50%)',
+ 'width': '260px',
+ 'padding': '10px',
+ 'background': 'white',
+ 'boxShadow': '0 1px 4px rgba(0,0,0,0.3)',
+ 'fontFamily': 'Helvetica, Arial, sans-serif',
+ 'fontSize': '14px',
+ 'display': 'flex',
+ 'lineHeight': '1.3'
+};
var LIGHTBOX_MARKUP =
- '' +
- '
' +
- '
' +
- '
' +
+ '' +
+ '
' +
+ '
' +
+ '
' +
BPMNIO_IMG +
'' +
'
' +
@@ -70,10 +72,23 @@ var LIGHTBOX_MARKUP =
var lightbox;
+function createLightbox() {
+ lightbox = domify(LIGHTBOX_MARKUP);
+
+ assignStyle(lightbox, LIGHTBOX_STYLES);
+ assignStyle(domQuery('svg', lightbox), LOGO_STYLES);
+ assignStyle(domQuery('.backdrop', lightbox), BACKDROP_STYLES);
+ assignStyle(domQuery('.notice', lightbox), NOTICE_STYLES);
+ assignStyle(domQuery('.link', lightbox), LINK_STYLES, {
+ 'margin': '15px 20px 15px 10px',
+ 'alignSelf': 'center'
+ });
+}
+
export function open() {
if (!lightbox) {
- lightbox = domify(LIGHTBOX_MARKUP);
+ createLightbox();
domDelegate.bind(lightbox, '.backdrop', 'click', function(event) {
document.body.removeChild(lightbox);