From 7ab5388f81a5e5228ebae0d76bc62d39fef367cc Mon Sep 17 00:00:00 2001
From: Thomas Steur <tsteur@users.noreply.github.com>
Date: Wed, 17 May 2017 08:11:39 +1200
Subject: [PATCH] On mobile, show row actions on click (#11702)
---
plugins/CoreHome/javascripts/dataTable.js | 131 +++++++++++++---------
1 file changed, 75 insertions(+), 56 deletions(-)
diff --git a/plugins/CoreHome/javascripts/dataTable.js b/plugins/CoreHome/javascripts/dataTable.js
index 433d5b52cc..408c45692f 100644
--- a/plugins/CoreHome/javascripts/dataTable.js
+++ b/plugins/CoreHome/javascripts/dataTable.js
@@ -1569,57 +1569,55 @@ $.extend(DataTable.prototype, UIControl.prototype, {
var self = this;
// higlight all columns on hover
- $('td', domElem).hover(
- function() {
-
- if ($(this).hasClass('label')) {
- return;
- }
+ $('td', domElem).hover(function() {
+ var $this = $(this);
+ if ($this.hasClass('label')) {
+ return;
+ }
- var table = $(this).closest('table');
- var nthChild = $(this).parent('tr').children().index($(this)) + 1;
- var rows = $('> tbody > tr', table);
+ var table = $this.closest('table');
+ var nthChild = $this.parent('tr').children().index($(this)) + 1;
+ var rows = $('> tbody > tr', table);
- if (!maxWidth[nthChild]) {
- maxWidth[nthChild] = 0;
- rows.find("td:nth-child(" + (nthChild) + ").column .value").each(function (index, element) {
- var width = $(element).width();
- if (width > maxWidth[nthChild]) {
- maxWidth[nthChild] = width;
- }
- });
- rows.find("td:nth-child(" + (nthChild) + ").column .value").each(function (index, element) {
- $(element).css({width: maxWidth[nthChild], display: 'inline-block'});
- });
- }
-
- if (currentNthChild === nthChild) {
- return;
- }
+ if (!maxWidth[nthChild]) {
+ maxWidth[nthChild] = 0;
+ rows.find("td:nth-child(" + (nthChild) + ").column .value").each(function (index, element) {
+ var width = $(element).width();
+ if (width > maxWidth[nthChild]) {
+ maxWidth[nthChild] = width;
+ }
+ });
+ rows.find("td:nth-child(" + (nthChild) + ").column .value").each(function (index, element) {
+ $(element).css({width: maxWidth[nthChild], display: 'inline-block'});
+ });
+ }
- currentNthChild = nthChild;
+ if (currentNthChild === nthChild) {
+ return;
+ }
- rows.children("td:nth-child(" + (nthChild) + ")").addClass('highlight');
- self.repositionRowActions($(this).parent('tr'));
- },
- function(event) {
+ currentNthChild = nthChild;
- var table = $(this).closest('table');
- var tr = $(this).parent('tr').children();
- var nthChild = $(this).parent('tr').children().index($(this));
- var targetTd = $(event.relatedTarget).closest('td');
- var nthChildTarget = targetTd.parent('tr').children().index(targetTd);
+ rows.children("td:nth-child(" + (nthChild) + ")").addClass('highlight');
+ self.repositionRowActions($this.parent('tr'));
+ }, function(event) {
+ var $this = $(this);
+ var table = $this.closest('table');
+ var $parentTr = $this.parent('tr');
+ var tr = $parentTr.children();
+ var nthChild = $parentTr.children().index($this);
+ var targetTd = $(event.relatedTarget).closest('td');
+ var nthChildTarget = targetTd.parent('tr').children().index(targetTd);
- if (nthChild == nthChildTarget) {
- return;
- }
+ if (nthChild == nthChildTarget) {
+ return;
+ }
- currentNthChild = null;
+ currentNthChild = null;
- var rows = $('tr', table);
- rows.find("td:nth-child(" + (nthChild + 1) + ")").removeClass('highlight');
- }
- );
+ var rows = $('tr', table);
+ rows.find("td:nth-child(" + (nthChild + 1) + ")").removeClass('highlight');
+ });
},
//behaviour for 'nested DataTable' (DataTable loaded on a click on a row)
@@ -1918,23 +1916,44 @@ $.extend(DataTable.prototype, UIControl.prototype, {
// show actions that are available for the row on hover
var actionsDom = null;
- tr.hover(function () {
- if (actionsDom === null) {
- // create dom nodes on the fly
- actionsDom = self.createRowActions(availableActionsForReport, tr, actionInstances);
- td.prepend(actionsDom);
- }
- // reposition and show the actions
- self.repositionRowActions(tr);
- if ($(window).width() >= 600) {
- actionsDom.show();
- }
- },
- function () {
+ var useTouchEvent = false;
+ var listenEvent = 'mouseenter';
+ var userAgent = String(navigator.userAgent).toLowerCase();
+ if (userAgent.match(/(iPod|iPhone|iPad|Android|IEMobile|Windows Phone)/i)) {
+ useTouchEvent = true;
+ listenEvent = 'click';
+ }
+
+ tr.on(listenEvent, function () {
+ if (useTouchEvent && actionsDom && actionsDom.prop('rowActionsVisible')) {
+ actionsDom.prop('rowActionsVisible', false);
+ actionsDom.hide();
+ return;
+ }
+
+ if (actionsDom === null) {
+ // create dom nodes on the fly
+ actionsDom = self.createRowActions(availableActionsForReport, tr, actionInstances);
+ td.prepend(actionsDom);
+ }
+
+ // reposition and show the actions
+ self.repositionRowActions(tr);
+ if ($(window).width() >= 600 || useTouchEvent) {
+ actionsDom.show();
+ }
+
+ if (useTouchEvent) {
+ actionsDom.prop('rowActionsVisible', true);
+ }
+ });
+ if (!useTouchEvent) {
+ tr.on('mouseleave', function () {
if (actionsDom !== null) {
actionsDom.hide();
}
});
+ }
});
},
--
GitLab