Show alternative image text below images when available (#101)

readme.md

@@ -37,6 +37,7 @@ We use Twitter a lot and notice many dumb annoyances we'd like to fix. So here b
 - Keyboard shortcut to toggle Night Mode (<kbd>Alt</kbd><kbd>m</kbd>).
 - Uses your personal color theme on all profiles.
 - Hides the header image on profile pages.
+- [Shows alternative image text below images when available.](https://user-images.githubusercontent.com/170270/40556400-b46c292c-6076-11e8-8241-f5c4e1a7a161.png)
 
 Tip: Twitter has a native [dark mode](https://github.com/sindresorhus/refined-twitter/issues/10) and you can toggle it using <kbd>Alt</kbd><kbd>m</kbd>. And press <kbd>Shift</kbd> <kbd>?</kbd> to see all keyboard shortcuts.
 

source/content.js

@@ -9,6 +9,7 @@ import addLikesButtonNavBar from './features/likes-button-navbar';
 import keyboardShortcuts from './features/keyboard-shortcuts';
 import renderInlineCode from './features/inline-code';
 import disableCustomColors from './features/disable-custom-colors';
+import imageAlternatives from './features/image-alternatives';
 
 function cleanNavbarDropdown() {
 	$('#user-dropdown').find('[data-nav="all_moments"], [data-nav="ads"], [data-nav="promote-mode"], [data-nav="help_center"]').parent().hide();
@@ -60,6 +61,17 @@ function onSingleTweetOpen(cb) {
 	}, {attributes: true});
 }
 
+function onGalleryItemOpen(cb) {
+	observeEl('body', mutations => {
+		for (const mutation of mutations) {
+			if (mutation.target.classList.contains('gallery-enabled')) {
+				observeEl('.Gallery-media', cb, {attributes: true, subtree: true});
+				break;
+			}
+		}
+	}, {attributes: true});
+}
+
 function removeProfileHeader() {
 	$('.ProfileCanopy-header .ProfileCanopy-avatar').appendTo('.ProfileCanopy-inner .AppContainer');
 	$('.ProfileCanopy-header').remove();
@@ -73,7 +85,7 @@ function onDomReady() {
 		safely(autoLoadNewTweets);
 		safely(userChoiceColor);
 		safely(disableCustomColors);
-    safely(removeProfileHeader);
+		safely(removeProfileHeader);
 
 		onNewTweets(() => {
 			safely(codeHighlight);
@@ -82,6 +94,7 @@ function onDomReady() {
 			safely(inlineInstagramPhotos);
 			safely(hidePromotedTweets);
 			safely(renderInlineCode);
+			safely(imageAlternatives);
 		});
 	});
 
@@ -90,6 +103,11 @@ function onDomReady() {
 		safely(mentionHighlight);
 		safely(inlineInstagramPhotos);
 		safely(renderInlineCode);
+		safely(imageAlternatives);
+	});
+
+	onGalleryItemOpen(() => {
+		safely(imageAlternatives);
 	});
 }
 

source/features/image-alternatives.js

@@ -0,0 +1,46 @@
+export default async () => {
+	const imgContainers = document.querySelectorAll('.AdaptiveMedia-photoContainer, .Gallery-media');
+
+	for (const imgContainer of imgContainers) {
+		// Exit if it already exists
+		// Test on content because a same container can be reused (Gallery)
+		if (imgContainer.querySelector('.refined-twitter_image-alt')) {
+			continue;
+		}
+
+		const imgs = imgContainer.querySelectorAll('img');
+		for (const img of imgs) {
+			const imgAlt = img.getAttribute('alt');
+
+			if (!imgAlt) {
+				continue;
+			}
+
+			imgContainer.classList.add('refined-twitter_image-alt_container');
+
+			if (imgContainer.classList.contains('AdaptiveMedia-photoContainer')) {
+				const ancestor1 = imgContainer.parentNode;
+				ancestor1.classList.add('refined-twitter_image-alt_photocontainer');
+				if (ancestor1.parentNode.classList.contains('AdaptiveMedia-container')) {
+					const ancestor2 = ancestor1.parentNode;
+					if (ancestor2.parentNode.classList.contains('is-square')) {
+						ancestor2.parentNode.classList.add('refined-twitter_image-alt_ancestor-not-square');
+					}
+				}
+			}
+
+			const altDiv = document.createElement('div');
+			altDiv.textContent = imgAlt;
+
+			if (imgContainer.classList.contains('Gallery-media')) {
+				altDiv.className = 'refined-twitter_image-alt refined-twitter_image-alt_top';
+				img.parentNode.prepend(altDiv);
+			} else {
+				altDiv.className = 'refined-twitter_image-alt refined-twitter_image-alt_bottom';
+				img.parentNode.append(altDiv);
+			}
+
+			img.classList.add('refined-twitter_image-alt_img');
+		}
+	}
+};

source/style/content.css

@@ -187,3 +187,33 @@ code.refined-twitter_markdown {
 .DashUserDropdown .dropdown-caret {
 	transform: translateX(-145px);
 }
+
+/* Plugin-generated div that display the alternative text of an image */
+.refined-twitter_image-alt {
+	background-color: #fff;
+	color: #14171a;
+	padding: 0.8rem;
+	font-size: 0.9rem;
+	line-height: 1.5;
+}
+.refined-twitter_image-alt_top {
+	border-bottom: 1px solid rgba(0,0,0,0.1);
+}
+.refined-twitter_image-alt_bottom {
+	border-top: 1px solid rgba(0,0,0,0.1);
+}
+.refined-twitter_image-alt_img {
+	top: 0 !important;
+	margin-top: 0 !important;
+	position: relative !important;
+}
+.refined-twitter_image-alt_container {
+	position: relative !important;
+}
+.refined-twitter_image-alt_photocontainer {
+	padding-top: 0 !important;
+}
+.refined-twitter_image-alt_ancestor-not-square {
+	max-height: initial !important;
+}
+