js/hide-images.js: Hide individual images

js/hide-images.js

@@ -0,0 +1,81 @@
+/*
+ * hide-images.js
+ * https://github.com/savetheinternet/Tinyboard/blob/master/js/hide-images.js
+ *
+ * Hide individual images.
+ *
+ * Released under the MIT license
+ * Copyright (c) 2013 Michael Save <savetheinternet@tinyboard.org>
+ *
+ * Usage:
+ *   $config['additional_javascript'][] = 'js/jquery.min.js';
+ *   $config['additional_javascript'][] = 'js/hide-images.js';
+ *
+ */
+
+$(document).ready(function(){
+	$('<style type="text/css"> img.hidden{ opacity: 0.1; background: grey; border: 1px solid #000; } </style>').appendTo($('head'));
+	
+	var board = $('form input[name="board"]').val().toString();
+
+	if (!localStorage.hiddenimages)
+		localStorage.hiddenimages = '{}';
+
+	// Load data from HTML5 localStorage
+	var hidden_data = JSON.parse(localStorage.hiddenimages);
+
+	var store_data = function() {
+		localStorage.hiddenimages = JSON.stringify(hidden_data);
+	};
+
+	// Delete old hidden images (30+ days old)
+	for (var key in hidden_data) {
+		for (var id in hidden_data[key]) {
+			if (hidden_data[key][id] < Math.round(Date.now() / 1000) - 60 * 60 * 24 * 30) {
+				delete hidden_data[key][id];
+				store_data();
+			}
+		}
+	}
+
+	if (!hidden_data[board]) {
+		hidden_data[board] = {}; // id : timestamp
+	}
+
+	$('div.post > a > img, div > a > img').each(function() {
+		var img = this;
+		var fileinfo = $(this).parent().prev();
+		var id = $(this).parent().parent().find('>p.intro>a.post_no:eq(1),>div.post.op>p.intro>a.post_no:eq(1)').text();
+		
+		var replacement = $('<span>File <small>(<a class="hide-image-link" href="javascript:void(0)">hide</a>)</small>: </span>');
+				
+		replacement.find('a').click(function() {
+			hidden_data[board][id] = Math.round(Date.now() / 1000);
+			store_data();
+			
+			var show_link = $('<a href="javascript:void(0)">show</a>').click(function() {
+				delete hidden_data[board][id];
+				store_data();
+				
+				$(img)
+					.removeClass('hidden')
+					.attr('src', $(img).data('orig'));
+				$(this).prev().show();
+				$(this).remove();
+			});
+			
+			$(this).hide().after(show_link);
+			
+			$(img)
+				.data('orig', img.src)
+				.attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==')
+				.addClass('hidden');
+		});
+		
+		$(this).parent().prev().contents().first().replaceWith(replacement);
+		
+		if (hidden_data[board][id])
+			$(this).parent().prev().find('.hide-image-link').click();
+		
+	});
+});