diff --git a/src/diagrams/class/classDb.js b/src/diagrams/class/classDb.js index 32fc832dd..f74aa5720 100644 --- a/src/diagrams/class/classDb.js +++ b/src/diagrams/class/classDb.js @@ -171,19 +171,14 @@ export const setCssClass = function(ids, className) { * Called by parser when a link is found. Adds the URL to the vertex data. * @param ids Comma separated list of ids * @param linkStr URL to create a link for - * @param tooltip Tooltip for the clickable element */ -export const setLink = function(ids, linkStr, tooltip) { +export const setLink = function(ids, linkStr) { const config = configApi.getConfig(); ids.split(',').forEach(function(_id) { let id = _id; if (_id[0].match(/\d/)) id = MERMAID_DOM_ID_PREFIX + id; if (typeof classes[id] !== 'undefined') { classes[id].link = utils.formatUrl(linkStr, config); - - if (tooltip) { - classes[id].tooltip = common.sanitizeText(tooltip, config); - } } }); setCssClass(ids, 'clickable'); @@ -193,17 +188,28 @@ export const setLink = function(ids, linkStr, tooltip) { * Called by parser when a click definition is found. Registers an event handler. * @param ids Comma separated list of ids * @param functionName Function to be called on click - * @param tooltip Tooltip for the clickable element */ -export const setClickEvent = function(ids, functionName, tooltip) { +export const setClickEvent = function(ids, functionName) { ids.split(',').forEach(function(id) { - setClickFunc(id, functionName, tooltip); + setClickFunc(id, functionName); classes[id].haveCallback = true; }); setCssClass(ids, 'clickable'); }; -const setClickFunc = function(domId, functionName, tooltip) { +/** + * Called by parser when a tooltip is found for a click definition + * @param tooltip Tooltip for the clickable element + */ +export const setTooltip = function(ids, tooltip) { + ids.split(',').forEach(function(id) { + if (typeof tooltip !== 'undefined') { + classes[id].tooltip = common.sanitizeText(tooltip, config); + } + }); +}; + +const setClickFunc = function(domId, functionName) { const config = configApi.getConfig(); let id = domId; let elemId = lookUpDomId(id); @@ -215,10 +221,6 @@ const setClickFunc = function(domId, functionName, tooltip) { return; } if (typeof classes[id] !== 'undefined') { - if (tooltip) { - classes[id].tooltip = common.sanitizeText(tooltip, config); - } - funs.push(function() { const elem = document.querySelector(`[id="${elemId}"]`); if (elem !== null) { @@ -314,5 +316,6 @@ export default { setClickEvent, setCssClass, setLink, + setTooltip, lookUpDomId }; diff --git a/src/diagrams/class/classDiagram.spec.js b/src/diagrams/class/classDiagram.spec.js index dd0d29452..ee5eabd36 100644 --- a/src/diagrams/class/classDiagram.spec.js +++ b/src/diagrams/class/classDiagram.spec.js @@ -662,15 +662,17 @@ foo() const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'callback Class1 "functionCall"'; parser.parse(str); - expect(classDb.setClickEvent).toHaveBeenCalledWith('Class1', 'functionCall', undefined); + expect(classDb.setClickEvent).toHaveBeenCalledWith('Class1', 'functionCall'); }); it('should associate callback with tooltip', function () { spyOn(classDb, 'setClickEvent'); + spyOn(classDb, 'setTooltip'); const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'callback Class1 "functionCall" "A tooltip"'; parser.parse(str); - expect(classDb.setClickEvent).toHaveBeenCalledWith('Class1', 'functionCall', 'A tooltip'); + expect(classDb.setClickEvent).toHaveBeenCalledWith('Class1', 'functionCall'); + expect(classDb.setTooltip).toHaveBeenCalledWith('Class1','A tooltip'); }); }); }); diff --git a/src/diagrams/class/parser/classDiagram.jison b/src/diagrams/class/parser/classDiagram.jison index b3affe07a..e5cf1e46c 100644 --- a/src/diagrams/class/parser/classDiagram.jison +++ b/src/diagrams/class/parser/classDiagram.jison @@ -243,10 +243,10 @@ lineType ; clickStatement - : CALLBACK className STR {$$ = $1;yy.setClickEvent($2, $3, undefined);} - | CALLBACK className STR STR {$$ = $1;yy.setClickEvent($2, $3, $4);} - | LINK className STR {$$ = $1;yy.setLink($2, $3, undefined);} - | LINK className STR STR {$$ = $1;yy.setLink($2, $3, $4);} + : CALLBACK className STR {$$ = $1;yy.setClickEvent($2, $3);} + | CALLBACK className STR STR {$$ = $1;yy.setClickEvent($2, $3);yy.setTooltip($2, $4)} + | LINK className STR {$$ = $1;yy.setLink($2, $3);} + | LINK className STR STR {$$ = $1;yy.setLink($2, $3);yy.setTooltip($2, $4)} ; cssClassStatement