display title texts for images on mobile (fix #585)

src/main/webapp/js/controllers.js

@@ -682,8 +682,9 @@ module.controller('FeedListCtrl', [
 		'FeedService',
 		'CategoryService',
 		'AnalyticsService',
+		'MobileService',
 		function($scope, $stateParams, $http, $route, $state, $window, $timeout, $location, EntryService, SettingsService, FeedService,
-				CategoryService, AnalyticsService) {
+				CategoryService, AnalyticsService, MobileService) {
 
 			$window = angular.element($window);
 			AnalyticsService.track();
@@ -702,6 +703,7 @@ module.controller('FeedListCtrl', [
 			$scope.font_size = 0;
 
 			$scope.settingsService = SettingsService;
+			$scope.MobileService = MobileService;
 			$scope.$watch('settingsService.settings.readingMode', function(newValue, oldValue) {
 				if (newValue && oldValue && newValue != oldValue) {
 					$scope.$emit('emitReload');

src/main/webapp/js/filters.js

@@ -39,6 +39,26 @@ module.filter('iframeHttpsRewrite', function() {
 	};
 });
 
+/**
+ * inserts title or alt-text after images, if any
+ */
+module.filter('appendImageTitles', function() {
+	return function(html) {
+		var result = html;
+		var wrapper = $('<div></div>').html(html);
+		$('img', wrapper).each(function(i, elem) {
+			var e = $(elem);
+			var title = e.attr('title') || e.attr('alt');
+			if (title) {
+				var text = $('<span style="font-style: italic;"></span>').text(title);
+				e.after(text);
+			}
+		});
+		result = wrapper.html();
+		return result;
+	};
+});
+
 /**
  * escapes the url
  */

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

@@ -56,7 +56,9 @@
 				</div>
 
 				<div class="entry-body-content">
-					<div ng-bind-html="entry.content | iframeHttpsRewrite| highlight:keywords | trustHtml"></div>
+					<div ng-if="!MobileService.mobile" ng-bind-html="entry.content | iframeHttpsRewrite| highlight:keywords | trustHtml"></div>
+					<div ng-if="MobileService.mobile" ng-bind-html="entry.content | iframeHttpsRewrite| highlight:keywords | appendImageTitles | trustHtml"></div>
+					
 					<div class="entry-enclosure" ng-if="entry.enclosureType">
 						<video controls ng-if="entry.enclosureType && entry.enclosureType.indexOf('video') == 0">
 							<source ng-src="{{entry.enclosureUrl | trustUrl}}" type="{{entry.enclosureType}}" />
@@ -92,25 +94,31 @@
 						<a href="http://www.facebook.com/sharer.php?u=={{entry.url|escape}}" title="Facebook" popup ng-if="settingsService.settings.facebook">
 							<i class="icon-facebook"></i>
 						</a>
-						<a href="http://twitter.com/share?text={{entry.title|escape}}&url={{entry.url|escape}}" title="Twitter" popup ng-if="settingsService.settings.twitter">
+						<a href="http://twitter.com/share?text={{entry.title|escape}}&url={{entry.url|escape}}" title="Twitter" popup
+							ng-if="settingsService.settings.twitter">
 							<i class="icon-twitter"></i>
 						</a>
 						<a href="https://plus.google.com/share?url={{entry.url|escape}}" title="Google+" popup ng-if="settingsService.settings.googleplus">
 							<i class="icon-google-plus"></i>
 						</a>
-						<a href="http://www.tumblr.com/share/link?url={{entry.url|escape}}&name={{entry.title|escape}}" title="Tumblr" popup ng-if="settingsService.settings.tumblr">
+						<a href="http://www.tumblr.com/share/link?url={{entry.url|escape}}&name={{entry.title|escape}}" title="Tumblr" popup
+							ng-if="settingsService.settings.tumblr">
 							<i class="icon-tumblr"></i>
 						</a>
-						<a href="https://getpocket.com/save?url={{entry.url|escape}}&title={{entry.title|escape}}" title="Pocket" popup ng-if="settingsService.settings.pocket">
+						<a href="https://getpocket.com/save?url={{entry.url|escape}}&title={{entry.title|escape}}" title="Pocket" popup
+							ng-if="settingsService.settings.pocket">
 							<i class="icon-pocket"></i>
 						</a>
-						<a href="https://www.instapaper.com/hello2?url={{entry.url|escape}}&title={{entry.title|escape}}" title="Instapaper" popup ng-if="settingsService.settings.instapaper">
+						<a href="https://www.instapaper.com/hello2?url={{entry.url|escape}}&title={{entry.title|escape}}" title="Instapaper" popup
+							ng-if="settingsService.settings.instapaper">
 							<i class="icon-instapaper"></i>
 						</a>
-						<a href="https://bufferapp.com/add?url={{entry.url|escape}}&text={{entry.title|escape}}" title="Buffer" popup ng-if="settingsService.settings.buffer">
+						<a href="https://bufferapp.com/add?url={{entry.url|escape}}&text={{entry.title|escape}}" title="Buffer" popup
+							ng-if="settingsService.settings.buffer">
 							<i class="icon-buffer"></i>
 						</a>
-						<a href="http://www.readability.com/save?url={{entry.url|escape}}" title="Readability" popup ng-if="settingsService.settings.readability">
+						<a href="http://www.readability.com/save?url={{entry.url|escape}}" title="Readability" popup
+							ng-if="settingsService.settings.readability">
 							<i class="icon-couch"></i>
 						</a>
 					</span>