highlight search results

src/main/webapp/js/directives.js

@@ -424,4 +424,26 @@ module.directive('droppable', [ 'CategoryService', 'FeedService',
 					});
 				}
 			};
-		} ]);
+		} ]);
+
+
+module.filter('highlight', function() {
+	return function(html, keywords) {
+		if (keywords) {
+			var tokens = keywords.split(' ');
+			for (var i = 0; i < tokens.length; i++) {
+			    var expr = new RegExp(tokens[i], 'gi');
+			    var container = $('<span>').html(html);
+			    var elements = container.find('*').addBack();
+			    var textNodes = elements.not('iframe').contents().not(elements);
+			    textNodes.each(function() {
+			    	var replaced = this.nodeValue.replace(expr, '<span class="highlight-search">$&</span>');
+			    	$('<span>').html(replaced).insertBefore(this);
+			    	$(this).remove();
+			    });
+			    return container.html();
+			}
+		}
+		return html;
+	};
+});

src/main/webapp/sass/components/_entry-list.scss

@@ -234,4 +234,9 @@
 
 #feed-accordion .current.entry-font-size-5 {
 	font-size: 19px;
+}
+
+#feed-accordion .highlight-search {
+	background-color: rgba(255, 255, 140, 0.5);
+	color: #333;
 }

src/main/webapp/templates/feeds.view.html

@@ -32,7 +32,7 @@
 						{{entry.feedName}}
 					</span>
 					<span class="entry-date">{{entry.date | entryDate}}</span>
-					<span class="entry-name" ng-class="{shrink: true, rtl: entry.rtl}" ng-bind-html-unsafe="entry.title"></span>
+					<span class="entry-name" ng-class="{shrink: true, rtl: entry.rtl}" ng-bind-html-unsafe="entry.title | highlight:keywords"></span>
 				</a>
 				<a href="{{entry.url}}" target="_blank" class="entry-external-link" ng-click="mark(entry, true)">
 					<i class="icon-external-link"></i>
@@ -42,7 +42,7 @@
 				ng-class="{rtl: entry.rtl}">
 				<div class="entry-header">
 					<div class="entry-title">
-						<a href="{{entry.url}}" target="_blank" ng-bind-html-unsafe="entry.title"></a>
+						<a href="{{entry.url}}" target="_blank" ng-bind-html-unsafe="entry.title | highlight:keywords"></a>
 						<div class="entry-subtitle">
 							<span class="entry-source" ui-if="selectedType == 'category'">
 								<span class="entry-source-prefix">${view.entry_source}</span>
@@ -57,7 +57,7 @@
 				</div>
 
 				<div class="entry-body-content">
-					<div ng-bind-html-unsafe="entry.content"></div>
+					<div ng-bind-html-unsafe="entry.content | highlight:keywords"></div>
 					<div class="entry-enclosure" ui-if="entry.enclosureType">
 						<video controls ui-if="entry.enclosureType && entry.enclosureType.indexOf('video') == 0">
 							<source src="{{entry.enclosureUrl}}" type="{{entry.enclosureType}}" />