Factor out click/hover distinction

grapheditorxblock/public/js/grapheditorxblock.js

@@ -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

grapheditorxblock/src/js/interactions-ui.js

@@ -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