flamingo-carotene-dev-server
Version:
Provide the functionality to add file watchers for developing projects with the Flamingo Carotene tooling
504 lines (494 loc) • 24.2 kB
JavaScript
(function () {
'use strict';
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
Object.defineProperty(Constructor, "prototype", {
writable: false
});
return Constructor;
}
function _defineProperty(obj, key, value) {
key = _toPropertyKey(key);
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _toPrimitive(input, hint) {
if (typeof input !== "object" || input === null) return input;
var prim = input[Symbol.toPrimitive];
if (prim !== undefined) {
var res = prim.call(input, hint || "default");
if (typeof res !== "object") return res;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (hint === "string" ? String : Number)(input);
}
function _toPropertyKey(arg) {
var key = _toPrimitive(arg, "string");
return typeof key === "symbol" ? key : String(key);
}
require('./socketClient.css');
var CaroteneDisplay = /*#__PURE__*/function () {
function CaroteneDisplay(displayPosition) {
_classCallCheck(this, CaroteneDisplay);
this.domElement = null;
this.domElementMessage = null;
this.domElementMessageIcon = null;
this.bigCarrotIconWrapper = null;
this.fullScreenCloseButton = null;
this.message = null;
this.messageTimeout = null;
this.fullscreenState = false;
this.displayPosition = displayPosition || 'bottom';
this.buildProgressData = {
finished: 0,
total: 0,
openJobs: []
};
this.createDomElement();
window.caroteneDisplay = this;
this.onDocumentReady(function () {
document.body.appendChild(this.domElement);
document.body.appendChild(this.domElementCaroteneButton);
}.bind(this));
this.displayedMessage = null;
this.updateInterval = window.setInterval(function () {
this.displayMessage();
}.bind(this), 500);
}
_createClass(CaroteneDisplay, [{
key: "isFullscreen",
value: function isFullscreen() {
return this.fullscreenState;
}
}, {
key: "setFullscreen",
value: function setFullscreen(state) {
var _this = this;
var showBigCarrot = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
clearTimeout(this.messageTimeout);
clearTimeout(this.fullScreenTimeout);
this.fullscreenState = state;
if (state) {
this.fullScreenStartTime = Date.now();
this._showFullscreen(showBigCarrot);
} else {
var startTime = this.fullScreenStartTime || 0;
var timeout = 1000;
if (Date.now() - startTime > timeout) {
timeout = 0;
}
this.fullScreenTimeout = setTimeout(function (_) {
_this._hideFullscreen();
_this.showMessage(2000);
}, timeout);
}
}
}, {
key: "_showFullscreen",
value: function _showFullscreen(showBigCarrot) {
if (this.domElement) {
this.domElement.classList.add(CaroteneDisplay.CLASSES.fullscreen);
}
this.bigCarrotIconWrapper.classList.toggle(CaroteneDisplay.CLASSES.bigCarrotIconWrapperShow, showBigCarrot);
}
}, {
key: "_hideFullscreen",
value: function _hideFullscreen() {
if (this.domElement) {
this.domElement.classList.remove(CaroteneDisplay.CLASSES.fullscreen);
}
this.bigCarrotIconWrapper.classList.remove(CaroteneDisplay.CLASSES.bigCarrotIconWrapperShow);
}
}, {
key: "setReport",
value: function setReport(reportData) {
this.buildProgressData = reportData;
}
}, {
key: "setMessage",
value: function setMessage(message) {
this.message = message;
}
}, {
key: "displayMessage",
value: function displayMessage() {
var message = this.message;
var iconAnimation = false;
if (this.buildProgressData.finished < this.buildProgressData.total) {
var percent = Math.round(100 / this.buildProgressData.total * this.buildProgressData.finished);
message = "Build in progress... ".concat(percent, "% (").concat(this.buildProgressData.finished, "/").concat(this.buildProgressData.total, ") ").concat(this.buildProgressData.openJobs.join(', '));
iconAnimation = true;
}
if (this.domElementMessage && this.displayedMessage !== message) {
this.domElementMessageIcon.classList.toggle(CaroteneDisplay.CLASSES.messageIconAnimated, iconAnimation);
this.domElementMessage.innerHTML = message;
this.displayedMessage = message;
}
}
}, {
key: "showMessage",
value: function showMessage() {
var _this2 = this;
var milliseconds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
if (this.domElement) {
this.domElement.classList.add(CaroteneDisplay.CLASSES.showMessage);
clearTimeout(this.messageTimeout);
if (milliseconds > 0) {
this.messageTimeout = setTimeout(function (_) {
_this2.domElement.classList.remove(CaroteneDisplay.CLASSES.showMessage);
}, milliseconds);
}
}
}
}, {
key: "createDomElement",
value: function createDomElement() {
var _this3 = this;
// carrot button
this.domElementCaroteneButton = document.createElement('div');
this.domElementCaroteneButton.classList.add(CaroteneDisplay.CLASSES.button);
this.domElementCaroteneButton.innerHTML = this.getSVGCarrotIcon();
this.domElementCaroteneButton.addEventListener('mouseover', function (_) {
if (!_this3.isFullscreen()) {
_this3.showMessage(0);
}
});
// Container
this.domElement = document.createElement('div');
this.domElement.classList.add(CaroteneDisplay.CLASSES.main);
this.domElement.classList.add(this.displayPosition === 'bottom' ? CaroteneDisplay.CLASSES.bottom : CaroteneDisplay.CLASSES.top);
this.domElement.setAttribute('id', 'caroteneDisplay');
this.domElement.addEventListener('mouseover', function (_) {
if (!_this3.isFullscreen()) {
_this3.showMessage(0);
}
});
this.domElement.addEventListener('mouseout', function (_) {
if (!_this3.isFullscreen()) {
_this3.showMessage(2000);
}
});
// Icon
this.domElementIcon = document.createElement('div');
this.domElementIcon.classList.add(CaroteneDisplay.CLASSES.icon);
this.bigCarrotIconWrapper = document.createElement('div');
this.bigCarrotIconWrapper.classList.add(CaroteneDisplay.CLASSES.bigCarrotIconWrapper);
this.bigCarrotIconWrapper.innerHTML = this.getSVGCarrotIcon();
this.domElementIcon.appendChild(this.bigCarrotIconWrapper);
this.fullScreenCloseButton = document.createElement('a');
this.fullScreenCloseButton.classList.add(CaroteneDisplay.CLASSES.fullScreenCloseButton);
this.fullScreenCloseButton.href = '';
this.fullScreenCloseButton.innerHTML = '×';
this.fullScreenCloseButton.addEventListener('click', function (event) {
event.preventDefault();
_this3.setFullscreen(false);
_this3.showMessage(1);
});
// Message
this.domElementMessageContainer = document.createElement('div');
this.domElementMessageContainer.classList.add(CaroteneDisplay.CLASSES.messageContainer);
this.domElementMessageIcon = document.createElement('div');
this.domElementMessageIcon.classList.add(CaroteneDisplay.CLASSES.messageIcon);
this.domElementMessageIcon.innerHTML = this.getSVGCarrotIcon();
this.domElementMessageContainer.appendChild(this.domElementMessageIcon);
this.domElementMessage = document.createElement('pre');
this.domElementMessage.classList.add(CaroteneDisplay.CLASSES.message);
this.domElementMessageContainer.appendChild(this.domElementMessage);
// Append everything
this.domElement.appendChild(this.domElementIcon);
this.domElement.appendChild(this.domElementMessageContainer);
this.domElement.appendChild(this.fullScreenCloseButton);
this.setFullscreen(false);
}
}, {
key: "ucFirst",
value: function ucFirst(input) {
return input.charAt(0).toUpperCase() + input.slice(1);
}
}, {
key: "onDocumentReady",
value: function onDocumentReady(callback) {
if (document.readyState !== 'loading') {
// in case the document is already rendered
callback();
} else if (document.addEventListener) {
// modern browsers
document.addEventListener('DOMContentLoaded', callback);
} else {
// IE <= 8
document.attachEvent('onreadystatechange', function () {
if (document.readyState === 'complete') callback();
});
}
}
}, {
key: "getSVGCarrotIcon",
value: function getSVGCarrotIcon() {
return "\n xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n