Merge pull request #8050 from juho-jaakkola/comment_highlight

feature(ui): allows highlighting an element whose id is found from the URL
Elgg · Mar 19, 2015 · 65a7c43 · 65a7c43
2 parents 0091108 + 60eebdc
commit 65a7c43
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 0 deletions.
diff --git a/docs/guides/upgrading.rst b/docs/guides/upgrading.rst
@@ -9,6 +9,29 @@ See the administator guides for :doc:`how to upgrade a live site </admin/upgradi
    :local:
    :depth: 2
 
+From 1.10 to 1.11
+=================
+
+Comment highlighting
+--------------------
+
+If your theme is using the file ``views/default/css/elements/components.php``, you must add the following style definitions in it to enable highlighting for comments and discussion replies:
+
+.. code:: css
+
+	.elgg-comments .elgg-state-highlight {
+		-webkit-animation: comment-highlight 5s;
+		animation: comment-highlight 5s;
+	}
+	@-webkit-keyframes comment-highlight {
+		from {background: #dff2ff;}
+		to {background: white;}
+	}
+	@keyframes comment-highlight {
+		from {background: #dff2ff;}
+		to {background: white;}
+	}
+
 From 1.9 to 1.10
 ================
 

diff --git a/js/lib/ui.js b/js/lib/ui.js
@@ -33,6 +33,10 @@ elgg.ui.init = function () {
 	}
 
 	elgg.ui.initAccessInputs();
+
+	// Allow element to be highlighted using CSS if its id is found from the URL
+	var elementId = elgg.getSelectorFromUrlFragment(document.URL);
+	$(elementId).addClass('elgg-state-highlight');
 };
 
 /**

diff --git a/mod/aalborg_theme/views/default/css/elements/components.php b/mod/aalborg_theme/views/default/css/elements/components.php
@@ -273,6 +273,22 @@
 	margin-top: 15px;
 }
 
+/* Comment highlighting that automatically fades away */
+.elgg-comments .elgg-state-highlight {
+	-webkit-animation: comment-highlight 5s; /* Chrome, Safari, Opera */
+	animation: comment-highlight 5s;
+}
+/* Chrome, Safari, Opera */
+@-webkit-keyframes comment-highlight {
+	from {background: #dff2ff;}
+	to {background: white;}
+}
+/* Standard syntax */
+@keyframes comment-highlight {
+	from {background: #dff2ff;}
+	to {background: white;}
+}
+
 /* **************************************
 	Comments triangle
 ************************************** */

diff --git a/views/default/css/elements/components.php b/views/default/css/elements/components.php
@@ -243,6 +243,22 @@
 	height: auto;
 }
 
+/* Comment highlighting that automatically fades away */
+.elgg-comments .elgg-state-highlight {
+	-webkit-animation: comment-highlight 5s; /* Chrome, Safari, Opera */
+	animation: comment-highlight 5s;
+}
+/* Chrome, Safari, Opera */
+@-webkit-keyframes comment-highlight {
+	from {background: #dff2ff;}
+	to {background: white;}
+}
+/* Standard syntax */
+@keyframes comment-highlight {
+	from {background: #dff2ff;}
+	to {background: white;}
+}
+
 /* ***************************************
 	Image-related
 *************************************** */