module.exports = function ( graph ){
/** variable defs **/
var warningModule = {};
var superContainer = d3.select("#WarningErrorMessages");
var _messageContainers = [];
var _messageContext = [];
var _visibleStatus = [];
var _filterHintId;
var _editorHintId;
var _messageId = -1;
superContainer.style("display", "inline-block");
var cssStyleIndex = 0;
var styleSelectorIndex = 2;
// helper for standalone webvowl in chrome
function createCSSSelector( name, rules ){
var style = document.createElement('style');
style.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(style);
if ( !(style.sheet || {}).insertRule )
(style.styleSheet || style.sheet).addRule(name, rules);
else
style.sheet.insertRule(name + "{" + rules + "}", 0);
}
function findCSS_Index(){
createCSSSelector("@keyframes msg_CollapseAnimation", " 0% { top: 0; } 100% { top: -400px;}");
console.log(document.styleSheets );
}
findCSS_Index();
warningModule.addMessageBox = function (){
// add a container;
_messageId++;
var messageContainer = d3.select("#WarningErrorMessages").append("div");
messageContainer.node().id = "messageContainerId_" + _messageId;
var messageContext = messageContainer.append("div");
messageContext.node().id = "messageContextId_" + _messageId;
messageContext.style("top", "0");
messageContainer.style("position", "relative");
messageContainer.style("width", "100%");
//save in array
_messageContainers.push(messageContainer);
_messageContext.push(messageContext);
// add animation to the container
messageContainer.node().addEventListener("animationend", _msgContainer_animationEnd);
// set visible flag that is used in end of animation
_visibleStatus[_messageId] = true;
return _messageId;
};
function _msgContainer_animationEnd(){
var containerId = this.id;
var tokens = containerId.split("_")[1];
var mContainer = d3.select("#" + containerId);
// get number of children
mContainer.classed("hidden", !_visibleStatus[tokens]);
// clean up DOM
if ( !_visibleStatus[tokens] ) {
mContainer.remove();
_messageContext[tokens] = null;
_messageContainers[tokens] = null;
}
// remove event listener
var c = d3.select(this);
// c.node().removeEventListener("animationend",_msgContainer_animationEnd);
}
warningModule.createMessageContext = function ( id ){
var warningContainer = _messageContext[id];
var moduleContainer = _messageContainers[id];
var generalHint = warningContainer.append('div');
generalHint.node().innerHTML = "";
_editorHintId = id;
/** Editing mode activated. You can now modify an existing ontology or create a new one via the <em>ontology</em> menu. You can save any ontology using the <em>export</em> menu (and exporting it as TTL file).**/
generalHint.node().innerHTML += "Editing mode activated.<br>" +
"You can now modify an existing ontology or create a new one via the <em>ontology</em> menu.<br>" +
"You can save any ontology using the <em>export</em> menu (and exporting it as TTL file).";
generalHint.style("padding", "5px");
generalHint.style("line-height", "1.2em");
generalHint.style("font-size", "1.2em");
var ul = warningContainer.append('ul');
ul.append('li').node().innerHTML = "Create a class with <b>double click / tap</b> on empty canvas area.";
ul.append('li').node().innerHTML = "Edit names with <b>double click / tap</b> on element.</li>";
ul.append('li').node().innerHTML = "Selection of default constructors is provided in the left sidebar.";
ul.append('li').node().innerHTML = "Additional editing functionality is provided in the right sidebar.";
var gotItButton = warningContainer.append("label");
gotItButton.node().id = "killWarningErrorMessages_" + id;
gotItButton.node().innerHTML = "Got It";
gotItButton.on("click", warningModule.closeMessage);
moduleContainer.classed("hidden", false);
moduleContainer.style("-webkit-animation-name", "warn_ExpandAnimation");
moduleContainer.style("-webkit-animation-duration", "0.5s");
};
warningModule.showMessage = function ( id ){
var moduleContainer = _messageContainers[id];
moduleContainer.classed("hidden", false);
moduleContainer.style("-webkit-animation-name", "warn_ExpandAnimation");
moduleContainer.style("-webkit-animation-duration", "0.5s");
};
warningModule.closeMessage = function ( id ){
var nId;
if ( id === undefined ) {
var givenId = this.id;
nId = givenId.split("_")[1];
} else {
nId = id;
}
if ( id && id.indexOf("_") !== -1 ) {
nId = id.split("_")[1];
}
_visibleStatus[nId] = false;
// get module;
var moduleContainer = _messageContainers[nId];
moduleContainer.style("-webkit-animation-name", "warn_CollapseAnimation");
moduleContainer.style("-webkit-animation-duration", "0.5s");
var m_height = moduleContainer.node().getBoundingClientRect().height;
// find my id in the children
var pNode = moduleContainer.node().parentNode;
var followingChildren = [];
var pChild = pNode.children;
var pChild_len = pChild.length;
var containerId = moduleContainer.node().id;
var found_me = false;
for ( var i = 0; i < pChild_len; i++ ) {
if ( found_me === true ) {
followingChildren.push(pChild[i].id);
}
if ( containerId === pChild[i].id ) {
found_me = true;
}
}
for ( var fc = 0; fc < followingChildren.length; fc++ ) {
var child = d3.select("#" + followingChildren[fc]);
// get the document style and overwrite it;
var superCss = document.styleSheets[styleSelectorIndex].cssRules[cssStyleIndex];
// remove the existing 0% and 100% rules
superCss.deleteRule("0%");
superCss.deleteRule("100%");
superCss.appendRule("0% {top: 0;}");
superCss.appendRule("100% {top: -" + m_height + "px;");
child.style("-webkit-animation-name", "msg_CollapseAnimation");
child.style("-webkit-animation-duration", "0.5s");
child.node().addEventListener("animationend", _child_animationEnd);
}
};
function _child_animationEnd(){
var c = d3.select(this);
c.style("-webkit-animation-name", "");
c.style("-webkit-animation-duration", "");
c.node().removeEventListener("animationend", _child_animationEnd);
}
warningModule.closeFilterHint = function (){
if ( _messageContainers[_filterHintId] ) {
_messageContainers[_filterHintId].classed("hidden", true);
_messageContainers[_filterHintId].remove();
_messageContainers[_filterHintId] = null;
_messageContext[_filterHintId] = null;
_visibleStatus[_filterHintId] = false;
}
};
warningModule.showEditorHint = function (){
var id = warningModule.addMessageBox();
warningModule.createMessageContext(id);
};
warningModule.showExporterWarning=function (){
warningModule.showWarning("Can not export ontology", "Detected unsupported ontology axioms, (e.g. owl:Union)", "Ontology is not exported", 1, false);
};
warningModule.responseWarning = function ( header, reason, action, callback, parameterArray, forcedWarning ){
var id = warningModule.addMessageBox();
var warningContainer = _messageContext[id];
var moduleContainer = _messageContainers[id];
_visibleStatus[id] = true;
d3.select("#blockGraphInteractions").classed("hidden", false);
var graphWidth = 0.5 * graph.options().width();
if ( header.length > 0 ) {
var head = warningContainer.append("div");
head.style("padding", "5px");
var titleHeader = head.append("div");
// some classes
titleHeader.style("display", "inline-flex");
titleHeader.node().innerHTML = "<b>Warning:</b>";
titleHeader.style("padding-right", "3px");
var msgHeader = head.append("div");
// some classes
msgHeader.style("display", "inline-flex");
msgHeader.style("max-width", graphWidth + "px");
msgHeader.node().innerHTML = header;
}
if ( reason.length > 0 ) {
var reasonContainer = warningContainer.append("div");
reasonContainer.style("padding", "5px");
var reasonHeader = reasonContainer.append("div");
// some classes
reasonHeader.style("display", "inline-flex");
reasonHeader.style("padding-right", "3px");
reasonHeader.node().innerHTML = "<b>Reason:</b>";
var msgReason = reasonContainer.append("div");
// some classes
msgReason.style("display", "inline-flex");
msgReason.style("max-width", graphWidth + "px");
msgReason.node().innerHTML = reason;
}
if ( action.length > 0 ) {
var actionContainer = warningContainer.append("div");
actionContainer.style("padding", "5px");
var actionHeader = actionContainer.append("div");
// some classes
actionHeader.style("display", "inline-flex");
actionHeader.style("padding-right", "8px");
actionHeader.node().innerHTML = "<b>Action:</b>";
var msgAction = actionContainer.append("div");
// some classes
msgAction.style("display", "inline-flex");
msgAction.style("max-width", graphWidth + "px");
msgAction.node().innerHTML = action;
}
var gotItButton = warningContainer.append("label");
gotItButton.node().id = "killWarningErrorMessages_" + id;
gotItButton.node().innerHTML = "Continue";
gotItButton.on("click", function (){
warningModule.closeMessage(this.id);
d3.select("#blockGraphInteractions").classed("hidden", true);
callback(parameterArray[0], parameterArray[1], parameterArray[2], parameterArray[3]);
});
warningContainer.append("span").node().innerHTML = "|";
var cancelButton = warningContainer.append("label");
cancelButton.node().id = "cancelButton_" + id;
cancelButton.node().innerHTML = "Cancel";
cancelButton.on("click", function (){
warningModule.closeMessage(this.id);
d3.select("#blockGraphInteractions").classed("hidden", true);
});
moduleContainer.classed("hidden", false);
moduleContainer.style("-webkit-animation-name", "warn_ExpandAnimation");
moduleContainer.style("-webkit-animation-duration", "0.5s");
};
warningModule.showFilterHint = function (){
var id = warningModule.addMessageBox();
var warningContainer = _messageContext[id];
var moduleContainer = _messageContainers[id];
_visibleStatus[id] = true;
_filterHintId = id;
var generalHint = warningContainer.append('div');
/** Editing mode activated. You can now modify an existing ontology or create a new one via the <em>ontology</em> menu. You can save any ontology using the <em>export</em> menu (and exporting it as TTL file).**/
generalHint.node().innerHTML = "Collapsing filter activated.<br>" +
"The number of visualized elements has been automatically reduced.<br>" +
"Use the degree of collapsing slider in the <em>filter</em> menu to adjust the visualization.<br><br>" +
"<em>Note:</em> A performance decrease could be experienced with a growing amount of visual elements in the graph.";
generalHint.style("padding", "5px");
generalHint.style("line-height", "1.2em");
generalHint.style("font-size", "1.2em");
var gotItButton = warningContainer.append("label");
gotItButton.node().id = "killFilterMessages_" + id;
gotItButton.node().innerHTML = "Got It";
gotItButton.on("click", warningModule.closeMessage);
moduleContainer.classed("hidden", false);
moduleContainer.style("-webkit-animation-name", "warn_ExpandAnimation");
moduleContainer.style("-webkit-animation-duration", "0.5s");
};
warningModule.showMultiFileUploadWarning = function (){
var id = warningModule.addMessageBox();
var warningContainer = _messageContext[id];
var moduleContainer = _messageContainers[id];
_visibleStatus[id] = true;
_filterHintId = id;
var generalHint = warningContainer.append('div');
generalHint.node().innerHTML = "Uploading multiple files is not supported.<br>";
generalHint.style("padding", "5px");
generalHint.style("line-height", "1.2em");
generalHint.style("font-size", "1.2em");
var gotItButton = warningContainer.append("label");
gotItButton.node().id = "killFilterMessages_" + id;
gotItButton.node().innerHTML = "Got It";
gotItButton.on("click", warningModule.closeMessage);
moduleContainer.classed("hidden", false);
moduleContainer.style("-webkit-animation-name", "warn_ExpandAnimation");
moduleContainer.style("-webkit-animation-duration", "0.5s");
};
warningModule.showWarning = function ( header, reason, action, type, forcedWarning, additionalOpts ){
var id = warningModule.addMessageBox();
var warningContainer = _messageContext[id];
var moduleContainer = _messageContainers[id];
_visibleStatus[id] = true;
// add new one;
var graphWidth = 0.5 * graph.options().width();
if ( header.length > 0 ) {
var head = warningContainer.append("div");
head.style("padding", "5px");
var titleHeader = head.append("div");
// some classes
titleHeader.style("display", "inline-flex");
titleHeader.node().innerHTML = "<b>Warning:</b>";
titleHeader.style("padding-right", "3px");
var msgHeader = head.append("div");
// some classes
msgHeader.style("display", "inline-flex");
msgHeader.style("max-width", graphWidth + "px");
msgHeader.node().innerHTML = header;
}
if ( reason.length > 0 ) {
var reasonContainer = warningContainer.append("div");
reasonContainer.style("padding", "5px");
var reasonHeader = reasonContainer.append("div");
// some classes
reasonHeader.style("display", "inline-flex");
reasonHeader.style("padding-right", "3px");
reasonHeader.node().innerHTML = "<b>Reason:</b>";
var msgReason = reasonContainer.append("div");
// some classes
msgReason.style("display", "inline-flex");
msgReason.style("max-width", graphWidth + "px");
msgReason.node().innerHTML = reason;
}
if ( action.length > 0 ) {
var actionContainer = warningContainer.append("div");
actionContainer.style("padding", "5px");
var actionHeader = actionContainer.append("div");
// some classes
actionHeader.style("display", "inline-flex");
actionHeader.style("padding-right", "8px");
actionHeader.node().innerHTML = "<b>Action:</b>";
var msgAction = actionContainer.append("div");
// some classes
msgAction.style("display", "inline-flex");
msgAction.style("max-width", graphWidth + "px");
msgAction.node().innerHTML = action;
}
var gotItButton;
if ( type === 1 ) {
gotItButton = warningContainer.append("label");
gotItButton.node().id = "killWarningErrorMessages_" + id;
gotItButton.node().innerHTML = "Got It";
gotItButton.on("click", warningModule.closeMessage);
}
if ( type === 2 ) {
gotItButton = warningContainer.append("label");
gotItButton.node().id = "killWarningErrorMessages_" + id;
gotItButton.node().innerHTML = "Got It";
gotItButton.on("click", warningModule.closeMessage);
warningContainer.append("span").node().innerHTML = "|";
var zoomToElementButton = warningContainer.append("label");
zoomToElementButton.node().id = "zoomElementThing_" + id;
zoomToElementButton.node().innerHTML = "Zoom to element ";
zoomToElementButton.on("click", function (){
// assume the additional Element is for halo;
graph.zoomToElementInGraph(additionalOpts);
});
warningContainer.append("span").node().innerHTML = "|";
var ShowElementButton = warningContainer.append("label");
ShowElementButton.node().id = "showElementThing_" + id;
ShowElementButton.node().innerHTML = "Indicate element";
ShowElementButton.on("click", function (){
// assume the additional Element is for halo;
if ( additionalOpts.halo() === false ) {
additionalOpts.drawHalo();
graph.updatePulseIds([additionalOpts.id()]);
} else {
additionalOpts.removeHalo();
additionalOpts.drawHalo();
graph.updatePulseIds([additionalOpts.id()]);
}
});
}
moduleContainer.classed("hidden", false);
moduleContainer.style("-webkit-animation-name", "warn_ExpandAnimation");
moduleContainer.style("-webkit-animation-duration", "0.5s");
moduleContainer.classed("hidden", false);
};
return warningModule;
};