refs #4996 on hover display an image in case it starts with https?:// and ends with jpg, gif, png or svg

3 files changed, 58 insertions, 1 deletions

diff --git a/plugins/Contents/Contents.php b/plugins/Contents/Contents.php
index 0fd5993742..d1272dead1 100644
--- a/plugins/Contents/Contents.php
+++ b/plugins/Contents/Contents.php
@@ -16,7 +16,8 @@ class Contents extends \Piwik\Plugin
     public function getListHooksRegistered()
     {
         return array(
-            'Metrics.getDefaultMetricTranslations' => 'addMetricTranslations'
+            'Metrics.getDefaultMetricTranslations' => 'addMetricTranslations',
+            'AssetManager.getJavaScriptFiles' => 'getJsFiles',
         );
     }
 
@@ -27,4 +28,9 @@ class Contents extends \Piwik\Plugin
         $translations['interaction_rate'] = 'Contents_InteractionRate';
     }
 
+    public function getJsFiles(&$jsFiles)
+    {
+        $jsFiles[] = "plugins/Contents/javascripts/contentsDataTable.js";
+    }
+
 }
diff --git a/plugins/Contents/Reports/Base.php b/plugins/Contents/Reports/Base.php
index f73fe6f2ab..537fce049b 100644
--- a/plugins/Contents/Reports/Base.php
+++ b/plugins/Contents/Reports/Base.php
@@ -30,6 +30,8 @@ abstract class Base extends Report
      */
     public function configureView(ViewDataTable $view)
     {
+        $view->config->datatable_js_type = 'ContentsDataTable';
+
         if (!empty($this->dimension)) {
             $view->config->addTranslations(array('label' => $this->dimension->getName()));
         }
diff --git a/plugins/Contents/javascripts/contentsDataTable.js b/plugins/Contents/javascripts/contentsDataTable.js
new file mode 100644
index 0000000000..8f208e1ca8
--- /dev/null
+++ b/plugins/Contents/javascripts/contentsDataTable.js
@@ -0,0 +1,49 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+ (function ($, require) {
+
+    var exports = require('piwik/UI'),
+        DataTable = exports.DataTable,
+        dataTablePrototype = DataTable.prototype;
+
+    /**
+     * UI control that handles extra functionality for Actions datatables.
+     *
+     * @constructor
+     */
+    exports.ContentsDataTable = function (element) {
+        DataTable.call(this, element);
+    };
+
+    $.extend(exports.ContentsDataTable.prototype, dataTablePrototype, {
+
+        //see dataTable::bindEventsAndApplyStyle
+        _init: function (domElem) {
+            domElem.find('table > tbody > tr').each(function (index, tr) {
+                var $tr  = $(tr);
+                var $td  = $tr.find('.label .value');
+                var text = $td.text().trim();
+
+                if (text.search('^https?:\/\/[^\/]+') !== -1) {
+                    if (text.match(/(.jpg|.gif|.png|.svg)$/)) {
+                        $td.tooltip({
+                            track: true,
+                            items: 'span',
+                            content: '<p><img style="max-width: 150px;max-height:150px;" src="' + text + '"/></p>',
+                            tooltipClass: 'rowActionTooltip',
+                            show: true,
+                            hide: false
+                        });
+                    }
+                }
+            });
+
+        }
+    });
+
+})(jQuery, require);
\ No newline at end of file