Allow hide-images.js, toggle-images.js and inline-expanding.js to work together

js/hide-images.js

@@ -53,7 +53,7 @@ $(document).ready(function(){
 			hidden_data[board][id] = Math.round(Date.now() / 1000);
 			store_data();
 			
-			var show_link = $('<a href="javascript:void(0)">show</a>').click(function() {
+			var show_link = $('<a class="show-image-link" href="javascript:void(0)">show</a>').click(function() {
 				delete hidden_data[board][id];
 				store_data();
 				
@@ -66,6 +66,9 @@ $(document).ready(function(){
 			
 			$(this).hide().after(show_link);
 			
+			if ($(img).parent()[0].dataset.expanded == 'true') {
+				$(img).parent().click();
+			}
 			$(img)
 				.data('orig', img.src)
 				.attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==')

js/inline-expanding.js

@@ -3,7 +3,7 @@
  * https://github.com/savetheinternet/Tinyboard/blob/master/js/inline-expanding.js
  *
  * Released under the MIT license
- * Copyright (c) 2012 Michael Save <savetheinternet@tinyboard.org>
+ * Copyright (c) 2012-2013 Michael Save <savetheinternet@tinyboard.org>
  *
  * Usage:
  *   $config['additional_javascript'][] = 'js/inline-expanding.js';
@@ -13,30 +13,37 @@
 onready(function(){
 	var link = document.getElementsByTagName('a');
 	
-	for(var i = 0; i < link.length; i++) {
-		if(typeof link[i] == "object" && link[i].childNodes[0].src && link[i].className != 'file') {
+	for (var i = 0; i < link.length; i++) {
+		if (typeof link[i] == "object" && link[i].childNodes && link[i].childNodes[0].src && link[i].className != 'file') {
 			link[i].childNodes[0].style.maxWidth = '95%';
 			link[i].childNodes[0].style.maxHeight = '95%';
 			link[i].onclick = function(e) {
-				if(e.which == 2) {
+				if (this.childNodes[0].className == 'hidden')
+					return false;
+				if (e.which == 2)
 					return true;
-				}
-				if(!this.tag) {
-					this.tag = this.childNodes[0].src;
+				if (!this.dataset.src) {
+					this.dataset.expanded = 'true';
+					this.dataset.src= this.childNodes[0].src;
+					this.dataset.width = this.childNodes[0].style.width;
+					this.dataset.height = this.childNodes[0].style.height;
 					this.childNodes[0].src = this.href;
 					this.childNodes[0].style.width = 'auto';
 					this.childNodes[0].style.height = 'auto';
 					this.childNodes[0].style.opacity = '0.4';
 					this.childNodes[0].style.filter = 'alpha(opacity=40)';
 					this.childNodes[0].onload = function() {
-						this.style.opacity = '1';
-						this.style.filter = '';
+						this.style.opacity = '';
+						delete this.style.filter;
 					}
 				} else {
-					this.childNodes[0].src = this.tag;
-					this.childNodes[0].style.width = 'auto';
-					this.childNodes[0].style.height = 'auto';
-					this.tag = '';
+					this.childNodes[0].src = this.dataset.src;
+					this.childNodes[0].style.width = this.dataset.width;
+					this.childNodes[0].style.height = this.dataset.height;
+					delete this.dataset.expanded;
+					delete this.dataset.src;
+					delete this.childNodes[0].style.opacity;
+					delete this.childNodes[0].style.filter;
 				}
 				return false;
 			}

js/toggle-images.js

@@ -16,6 +16,9 @@ $(document).ready(function(){
 	$('<style type="text/css"> img.hidden{ opacity: 0.1; background: grey; border: 1px solid #000; } </style>').appendTo($('head'));
 
 	var hideImage = function() {
+		if ($(this).parent()[0].dataset.expanded == 'true') {
+			$(this).parent().click();
+		}
 		$(this)
 			.attr('data-orig', this.src)
 			.attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==')
@@ -28,6 +31,27 @@ $(document).ready(function(){
 			.removeClass('hidden');
 	};
 
+	// Fix for hide-images.js
+	var show_hide_hide_images_buttons = function() {
+		if (hide_images) {
+			$('a.hide-image-link').each(function() {
+				if ($(this).next().hasClass('show-image-link')) {
+					$(this).next().hide();
+				}
+				$(this).hide().after('<span class="toggle-images-placeholder">hidden</span>');
+			});
+		} else {
+			$('span.toggle-images-placeholder').remove();
+			$('a.hide-image-link').each(function() {
+				if ($(this).next().hasClass('show-image-link')) {
+					$(this).next().show();
+				} else {
+					$(this).show();
+				}
+			});
+		}
+	};
+
 	$('hr:first').before('<div id="toggle-images" style="text-align:right"><a class="unimportant" href="javascript:void(0)">-</a></div>');
 	$('div#toggle-images a')
 		.text((hide_images ? 'Show' : 'Hide') + ' images')
@@ -40,11 +64,14 @@ $(document).ready(function(){
 				$('div > a > img').each(restoreImage);
 				delete localStorage.hideimages;
 			}
-
+			
+			show_hide_hide_images_buttons();
+			
 			$(this).text((hide_images ? 'Show' : 'Hide') + ' images')
 		});
 
 	if (hide_images) {
 		$('div > a > img').each(hideImage);
+		show_hide_hide_images_buttons();
 	}
 });