From 932c8981b7a62ec1f2cb8478e2adf13d1c6f8fc6 Mon Sep 17 00:00:00 2001
From: Robin Sonefors <robin.sonefors@op5.com>
Date: Tue, 8 Jul 2014 13:53:44 +0200
Subject: [PATCH] js: Make helptexts easy to render from js

That means a tiny refactoring of some of the common.js code.

While I'm at it, use modern data attributes instead of adding
randomness to an id parameter.

Change-Id: Ie98eff782b90a23984fb3b1a6b7cf29d581d829a
Signed-off-by: Robin Sonefors <robin.sonefors@op5.com>
---
 application/helpers/help.php     |  7 ++---
 application/views/js/common.js   | 56 +++++++++++++++++++---------------------
 modules/lsfilter/media/js/lib.js |  8 ++++++
 3 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/application/helpers/help.php b/application/helpers/help.php
index a9f066708..db0c95f70 100644
--- a/application/helpers/help.php
+++ b/application/helpers/help.php
@@ -27,10 +27,7 @@ class help
 
 		$controller = !empty($controller) ? $controller : Router::$controller;
 
-		# build the element ID with random nr | controller | help key
-		$id = 'help_'.rand(0, 10000).'|'.$controller.'|'.$key;
-
-		return '<a class="helptext_target" style="border:0" id="'.$id.'" href="#">'.
-		'<img src="'.$img_path.'" title="'._('Click for help').'" alt="'._('Click for help').'" style="width: 12px; height: 12px; margin-bottom: -1px" /></a>';
+		return '<a class="helptext_target" style="border:0" data-helptext-controller="'.$controller.'" data-helptext-key="'.$key.'" href="#">'.
+		'<img src="'.$img_path.'" alt="'._('Click for help').'" style="width: 12px; height: 12px; margin-bottom: -1px" /></a>';
 	}
 }
diff --git a/application/views/js/common.js b/application/views/js/common.js
index 100822feb..a1f932cc7 100644
--- a/application/views/js/common.js
+++ b/application/views/js/common.js
@@ -154,38 +154,12 @@ $(document).ready(function() {
 	});
 
 	$(".helptext_target").each(function(){
-
 		// split the id into controller, key
-		var the_id = $(this).attr('id');
-		var part = the_id.split('|');
-		if (!part.length) {
-			return false;
-		}
-		var controller = part[1];
-		var key = part[2];
-		var elem_id = the_id;
-
-		$(this).qtip($.extend(true, {}, qtip_default, {
-			content: {
-				text: function(ev, api) {
-					$.ajax({
-						url: _site_domain + _index_page + "/ajax/get_translation/",
-						data: {controller: controller, key: key},
-						type: 'POST',
-					})
-					.done(function(html) {
-						api.set('content.text', html);
-					})
-					.fail(function(xhr, status, error) {
-						api.set('content.text', status + ': ' + error);
-					});
-
-					return '<img src="' + _site_domain + loading_img + '" alt="' + _loading_str + '" />';
-				}
-			}
-		}));
+		var controller = $(this).data('helptext-controller');
+		var key = $(this).data('helptext-key');
+		bind_helptext($(this), controller, key);
 	});
-	$(".helptext_target").click(function() {return false;});
+	$('body').on('click', ".helptext_target", function() {return false;});
 
 	$('#multi_action_select').bind('change', function() {
 		multi_action_select($(this).find('option:selected').val());
@@ -650,3 +624,25 @@ function trigger_cb_on_nth_call(cb, n) {
 			cb();
 	};
 }
+
+function bind_helptext(element, controller, key) {
+	element.qtip($.extend(true, {}, qtip_default, {
+		content: {
+			text: function(ev, api) {
+				$.ajax({
+					url: _site_domain + _index_page + "/ajax/get_translation/",
+					data: {controller: controller, key: key},
+					type: 'POST',
+				})
+				.done(function(html) {
+					api.set('content.text', html);
+				})
+				.fail(function(xhr, status, error) {
+					api.set('content.text', status + ': ' + error);
+				});
+
+				return '<img src="' + _site_domain + loading_img + '" alt="' + _loading_str + '" />';
+			}
+		}
+	}));
+}
diff --git a/modules/lsfilter/media/js/lib.js b/modules/lsfilter/media/js/lib.js
index 9b479fc41..29d1bd07e 100644
--- a/modules/lsfilter/media/js/lib.js
+++ b/modules/lsfilter/media/js/lib.js
@@ -1,3 +1,11 @@
+function helpicon(controller, key)
+{
+	var link = $('<a class="helptext_target" style="border: 0" href="#"/>');
+	link.append(icon12('help'));
+	bind_helptext(link, controller, key);
+	return link;
+}
+
 function icon12(name, title, link)
 {
 	var img = $('<span />');
-- 
2.11.4.GIT