feat(Viewer+Modeler): add powered by lightbox
Instead of directly redirecting to the project website the project logo will now open a lightbox, stating the powered by and allowing the user visit the project site as part of an informed decision. Closes #445
This commit is contained in:
Nico Rehwaldt
parent
22686f7614
commit
a1479669d4
|
|
@ -1,3 +1,9 @@
|
|||
/**
|
||||
* The code in the <project-logo></project-logo> area
|
||||
* must not be changed.
|
||||
*
|
||||
* @see http://bpmn.io/license for more information.
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var assign = require('lodash/object/assign'),
|
||||
|
|
@ -128,34 +134,16 @@ function Viewer(options) {
|
|||
position: options.position
|
||||
});
|
||||
|
||||
/**
|
||||
* The code in the <project-logo></project-logo> area
|
||||
* must not be changed, see http://bpmn.io/license for more information
|
||||
*
|
||||
* <project-logo>
|
||||
*/
|
||||
/* <project-logo> */
|
||||
|
||||
/* jshint -W101 */
|
||||
|
||||
// inlined ../resources/bpmnjs.png
|
||||
var logoData = 'iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAMAAADypuvZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRFiMte9PrwldFwfcZPqtqN0+zEyOe1XLgjvuKncsJAZ70y6fXh3vDT////UrQV////G2zN+AAAABB0Uk5T////////////////////AOAjXRkAAAHDSURBVHjavJZJkoUgDEBJmAX8979tM8u3E6x20VlYJfFFMoL4vBDxATxZcakIOJTWSmxvKWVIkJ8jHvlRv1F2LFrVISCZI+tCtQx+XfewgVTfyY3plPiQEAzI3zWy+kR6NBhFBYeBuscJLOUuA2WVLpCjVIaFzrNQZArxAZKUQm6gsj37L9Cb7dnIBUKxENaaMJQqMpDXvSL+ktxdGRm2IsKgJGGPg7atwUG5CcFUEuSv+CwQqizTrvDTNXdMU2bMiDWZd8d7QIySWVRsb2vBBioxOFt4OinPBapL+neAb5KL5IJ8szOza2/DYoipUCx+CjO0Bpsv0V6mktNZ+k8rlABlWG0FrOpKYVo8DT3dBeLEjUBAj7moDogVii7nSS9QzZnFcOVBp1g2PyBQ3Vr5aIapN91VJy33HTJLC1iX2FY6F8gRdaAeIEfVONgtFCzZTmoLEdOjBDfsIOA6128gw3eu1shAajdZNAORxuQDJN5A5PbEG6gNIu24QJD5iNyRMZIr6bsHbCtCU/OaOaSvgkUyDMdDa1BXGf5HJ1To+/Ym6mCKT02Y+/Sa126ZKyd3jxhzpc1r8zVL6YM1Qy/kR4ABAFJ6iQUnivhAAAAAAElFTkSuQmCC';
|
||||
|
||||
/* jshint +W101 */
|
||||
|
||||
var linkMarkup =
|
||||
'<a href="http://bpmn.io" ' +
|
||||
'target="_blank" ' +
|
||||
'class="bjs-powered-by" ' +
|
||||
'title="Powered by bpmn.io" ' +
|
||||
'style="position: absolute; bottom: 15px; right: 15px; z-index: 100">' +
|
||||
'<img src="data:image/png;base64,' + logoData + '">' +
|
||||
'</a>';
|
||||
|
||||
container.appendChild(domify(linkMarkup));
|
||||
addProjectLogo(container);
|
||||
|
||||
/* </project-logo> */
|
||||
}
|
||||
|
||||
module.exports = Viewer;
|
||||
|
||||
|
||||
Viewer.prototype.importXML = function(xml, done) {
|
||||
|
||||
var self = this;
|
||||
|
|
@ -347,4 +335,41 @@ Viewer.prototype._modules = [
|
|||
require('diagram-js/lib/features/overlays')
|
||||
];
|
||||
|
||||
module.exports = Viewer;
|
||||
|
||||
/* <project-logo> */
|
||||
|
||||
var PoweredBy = require('./util/PoweredByUtil'),
|
||||
domEvent = require('min-dom/lib/event');
|
||||
|
||||
/**
|
||||
* Adds the project logo to the diagram container as
|
||||
* required by the bpmn.io license.
|
||||
*
|
||||
* @see http://bpmn.io/license
|
||||
*
|
||||
* @param {Element} container
|
||||
*/
|
||||
function addProjectLogo(container) {
|
||||
var logoData = PoweredBy.BPMNIO_LOGO;
|
||||
|
||||
var linkMarkup =
|
||||
'<a href="http://bpmn.io" ' +
|
||||
'target="_blank" ' +
|
||||
'class="bjs-powered-by" ' +
|
||||
'title="Powered by bpmn.io" ' +
|
||||
'style="position: absolute; bottom: 15px; right: 15px; z-index: 100">' +
|
||||
'<img src="data:image/png;base64,' + logoData + '">' +
|
||||
'</a>';
|
||||
|
||||
var linkElement = domify(linkMarkup);
|
||||
|
||||
container.appendChild(linkElement);
|
||||
|
||||
domEvent.bind(linkElement, 'click', function(event) {
|
||||
PoweredBy.open();
|
||||
|
||||
event.preventDefault();
|
||||
});
|
||||
}
|
||||
|
||||
/* </project-logo> */
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
/**
|
||||
* This file must not be changed or exchanged.
|
||||
*
|
||||
* @see http://bpmn.io/license for more information.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var domify = require('min-dom/lib/domify');
|
||||
|
||||
var domDelegate = require('min-dom/lib/delegate');
|
||||
|
||||
/* jshint -W101 */
|
||||
|
||||
// inlined ../resources/bpmnjs.png
|
||||
var logoData = module.exports.BPMNIO_LOGO = 'iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAMAAADypuvZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRFiMte9PrwldFwfcZPqtqN0+zEyOe1XLgjvuKncsJAZ70y6fXh3vDT////UrQV////G2zN+AAAABB0Uk5T////////////////////AOAjXRkAAAHDSURBVHjavJZJkoUgDEBJmAX8979tM8u3E6x20VlYJfFFMoL4vBDxATxZcakIOJTWSmxvKWVIkJ8jHvlRv1F2LFrVISCZI+tCtQx+XfewgVTfyY3plPiQEAzI3zWy+kR6NBhFBYeBuscJLOUuA2WVLpCjVIaFzrNQZArxAZKUQm6gsj37L9Cb7dnIBUKxENaaMJQqMpDXvSL+ktxdGRm2IsKgJGGPg7atwUG5CcFUEuSv+CwQqizTrvDTNXdMU2bMiDWZd8d7QIySWVRsb2vBBioxOFt4OinPBapL+neAb5KL5IJ8szOza2/DYoipUCx+CjO0Bpsv0V6mktNZ+k8rlABlWG0FrOpKYVo8DT3dBeLEjUBAj7moDogVii7nSS9QzZnFcOVBp1g2PyBQ3Vr5aIapN91VJy33HTJLC1iX2FY6F8gRdaAeIEfVONgtFCzZTmoLEdOjBDfsIOA6128gw3eu1shAajdZNAORxuQDJN5A5PbEG6gNIu24QJD5iNyRMZIr6bsHbCtCU/OaOaSvgkUyDMdDa1BXGf5HJ1To+/Ym6mCKT02Y+/Sa126ZKyd3jxhzpc1r8zVL6YM1Qy/kR4ABAFJ6iQUnivhAAAAAAElFTkSuQmCC';
|
||||
|
||||
/* jshint +W101 */
|
||||
|
||||
|
||||
function css(attrs) {
|
||||
return attrs.join(';');
|
||||
}
|
||||
|
||||
var LIGHTBOX_STYLES = css([
|
||||
'z-index: 1001',
|
||||
'position: fixed',
|
||||
'top: 0',
|
||||
'left: 0',
|
||||
'right: 0',
|
||||
'bottom: 0'
|
||||
]);
|
||||
|
||||
var BACKDROP_STYLES = css([
|
||||
'width: 100%',
|
||||
'height: 100%',
|
||||
'background: rgba(0,0,0,0.2)'
|
||||
]);
|
||||
|
||||
var NOTICE_STYLES = css([
|
||||
'position: absolute',
|
||||
'left: 50%',
|
||||
'top: 40%',
|
||||
'margin: 0 -130px',
|
||||
'width: 260px',
|
||||
'padding: 10px',
|
||||
'background: white',
|
||||
'border: solid 1px #AAA',
|
||||
'border-radius: 3px',
|
||||
'font-family: Helvetica, Arial, sans-serif',
|
||||
'font-size: 14px',
|
||||
'line-height: 1.2em'
|
||||
]);
|
||||
|
||||
var LIGHTBOX_MARKUP =
|
||||
'<div class="bjs-powered-by-lightbox" style="' + LIGHTBOX_STYLES + '">' +
|
||||
'<div class="backdrop" style="' + BACKDROP_STYLES + '"></div>' +
|
||||
'<div class="notice" style="' + NOTICE_STYLES + '">' +
|
||||
'<a href="http://bpmn.io" target="_blank" style="float: left; margin-right: 10px">' +
|
||||
'<img src="data:image/png;base64,'+ logoData +'">' +
|
||||
'</a>' +
|
||||
'Web-based tooling for BPMN, DMN and CMMN diagrams ' +
|
||||
'powered by <a href="http://bpmn.io" target="_blank">bpmn.io</a>.' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
|
||||
|
||||
var lightbox;
|
||||
|
||||
function open() {
|
||||
|
||||
if (!lightbox) {
|
||||
lightbox = domify(LIGHTBOX_MARKUP);
|
||||
|
||||
domDelegate.bind(lightbox, '.backdrop', 'click', function(event) {
|
||||
document.body.removeChild(lightbox);
|
||||
});
|
||||
}
|
||||
|
||||
document.body.appendChild(lightbox);
|
||||
}
|
||||
|
||||
module.exports.open = open;
|
||||
Loading…
Reference in New Issue