Commit 47fbf40d authored by Remon Huijts's avatar Remon Huijts
Browse files

Factor out click/hover distinction

parent 5ce9e0c8
......@@ -123394,58 +123394,46 @@ ArrangePanel.prototype.addInteractionPanel = function() {
var title = this.createTitle('Interaction');
div.appendChild(title);
 
// We might have more event types in the future, but currently only click:
this.eventTypes = ['click'];
var events = {};
for (var i = 0; i < this.eventTypes.length; i++) {
events[this.eventTypes[i]] = new EventRules(this.eventTypes[i], this);
div = events[this.eventTypes[i]].render(div);
}
var eventRules = new EventRules(this);
div = eventRules.render(div);
 
this.container.appendChild(div);
};
 
/**
* An event describes something that can happen to the currently selected cell.
* At the moment there are two types of events: "hover" and "click". Both
* events can have several "rules". Rules define actions that happen when the
* event gets fired. Examples of rules are "popup a cell" and "highlight a cell
* in a specific colour".
* For compatibility between desktop and mobile browsing we treat the 'click',
* 'hover' and 'tap' events as one and the same trigger. This class represents
* the UI for the list of interactions that is linked to a single triggering
* cell. Interactions define actions/animations that happen when the event gets
* fired. Example animations are "popup a cell" and "highlight a cell in a
* specific colour".
*
* This `EventRules` class describes the set of rules that are attached to a
* given event.
*
* We parse the rules from a corresponding attribute on an element; this is the
* reason that each interaction can only be defined on one single element/group.
* We parse the rules/interactions from the 'onclick' attribute on an element,
* and for backwards compatibility also from the 'onhover' attribute. This is
* the reason that each interaction can only be defined on one single element or
* group.
*/
EventRules = function(eventName, panel) {
EventRules = function(panel) {
this.rules = [];
this.eventName = eventName;
this.parentPanel = panel;
this.rulesDiv = document.createElement('div');
this.graph = this.parentPanel.editorUi.editor.graph;
this.cell = this.graph.getSelectionCell();
var thisEventRules = this;
var attrs = this.getCellValue().attributes || [];
var match = false;
var oldTrigger = false; // treat existing hover rules as click rules
var attName = '';
 
for (var i = 0; i < attrs.length; i++) {
match = 'on' + this.eventName == attrs[i].nodeName;
oldTrigger = this.eventName == 'click' && attrs[i].nodeName == 'onhover';
if (match || oldTrigger) {
attName = attrs[i].nodeName;
if (attName === 'onclick' || attName === 'onhover') {
rules = JSON.parse(attrs[i].nodeValue);
if (!rules) {
debug('Warning: Could not parse these rules:');
debug(rules);
continue;
}
rules.forEach(function(rule) {
var ruleObj = new Rule(thisEventRules, rule);
thisEventRules.rules.push(ruleObj);
});
for (var j = 0; j < rules.length; j++) {
this.rules.push(new Rule(this, rule));
}
}
}
};
......@@ -123459,13 +123447,6 @@ EventRules = function(eventName, panel) {
* which always re-renders the panels on the right of the screen.
*/
EventRules.prototype.render = function(div) {
/* We no longer have multiple triggers, so there is no need for a title
var title = this.parentPanel.createTitle('On ' + this.eventName);
title.style.paddingTop = '10px';
title.style.paddingBottom = '6px';
div.appendChild(title);
*/
var thisEventRules = this;
 
// Render the rules that are already in place
......@@ -72,58 +72,46 @@ ArrangePanel.prototype.addInteractionPanel = function() {
var title = this.createTitle('Interaction');
div.appendChild(title);
// We might have more event types in the future, but currently only click:
this.eventTypes = ['click'];
var events = {};
for (var i = 0; i < this.eventTypes.length; i++) {
events[this.eventTypes[i]] = new EventRules(this.eventTypes[i], this);
div = events[this.eventTypes[i]].render(div);
}
var eventRules = new EventRules(this);
div = eventRules.render(div);
this.container.appendChild(div);
};
/**
* An event describes something that can happen to the currently selected cell.
* At the moment there are two types of events: "hover" and "click". Both
* events can have several "rules". Rules define actions that happen when the
* event gets fired. Examples of rules are "popup a cell" and "highlight a cell
* in a specific colour".
*
* This `EventRules` class describes the set of rules that are attached to a
* given event.
* For compatibility between desktop and mobile browsing we treat the 'click',
* 'hover' and 'tap' events as one and the same trigger. This class represents
* the UI for the list of interactions that is linked to a single triggering
* cell. Interactions define actions/animations that happen when the event gets
* fired. Example animations are "popup a cell" and "highlight a cell in a
* specific colour".
*
* We parse the rules from a corresponding attribute on an element; this is the
* reason that each interaction can only be defined on one single element/group.
* We parse the rules/interactions from the 'onclick' attribute on an element,
* and for backwards compatibility also from the 'onhover' attribute. This is
* the reason that each interaction can only be defined on one single element or
* group.
*/
EventRules = function(eventName, panel) {
EventRules = function(panel) {
this.rules = [];
this.eventName = eventName;
this.parentPanel = panel;
this.rulesDiv = document.createElement('div');
this.graph = this.parentPanel.editorUi.editor.graph;
this.cell = this.graph.getSelectionCell();
var thisEventRules = this;
var attrs = this.getCellValue().attributes || [];
var match = false;
var oldTrigger = false; // treat existing hover rules as click rules
var attName = '';
for (var i = 0; i < attrs.length; i++) {
match = 'on' + this.eventName == attrs[i].nodeName;
oldTrigger = this.eventName == 'click' && attrs[i].nodeName == 'onhover';
if (match || oldTrigger) {
attName = attrs[i].nodeName;
if (attName === 'onclick' || attName === 'onhover') {
rules = JSON.parse(attrs[i].nodeValue);
if (!rules) {
debug('Warning: Could not parse these rules:');
debug(rules);
continue;
}
rules.forEach(function(rule) {
var ruleObj = new Rule(thisEventRules, rule);
thisEventRules.rules.push(ruleObj);
});
for (var j = 0; j < rules.length; j++) {
this.rules.push(new Rule(this, rule));
}
}
}
};
......@@ -137,13 +125,6 @@ EventRules = function(eventName, panel) {
* which always re-renders the panels on the right of the screen.
*/
EventRules.prototype.render = function(div) {
/* We no longer have multiple triggers, so there is no need for a title
var title = this.parentPanel.createTitle('On ' + this.eventName);
title.style.paddingTop = '10px';
title.style.paddingBottom = '6px';
div.appendChild(title);
*/
var thisEventRules = this;
// Render the rules that are already in place
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment