Disable-able animated GIFs in a non-shitty way (unlike wizardchan)

2 files changed, 63 insertions, 0 deletions

diff --git a/js/inline-expanding.js b/js/inline-expanding.js
index 04d9298f..5bbfa0a0 100644
--- a/js/inline-expanding.js
+++ b/js/inline-expanding.js
@@ -27,9 +27,17 @@ onready(function(){
 					if (!this.dataset.src) {
 						this.parentNode.removeAttribute('style');
 						this.dataset.expanded = 'true';
+
+						if (this.childNodes[0].tagName === 'CANVAS') {
+							this.removeChild(this.childNodes[0]);
+							this.childNodes[0].style.display = 'block';
+						}
+
 						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';
@@ -48,6 +56,10 @@ onready(function(){
 						delete this.dataset.src;
 						delete this.childNodes[0].style.opacity;
 						delete this.childNodes[0].style.filter;
+
+						if (localStorage.no_animated_gif === 'true' && typeof unanimate_gif === 'function') {
+							unanimate_gif(this.childNodes[0]);
+						}
 					}
 					return false;
 				}
diff --git a/js/no-animated-gif.js b/js/no-animated-gif.js
new file mode 100644
index 00000000..cfdf757b
--- /dev/null
+++ b/js/no-animated-gif.js
@@ -0,0 +1,51 @@
+/*
+ * no-animated-gif.js - Toggle GIF animated thumbnails when gifsicle is enabled
+ *
+ * Copyright (c) 2014 Fredrick Brennan <admin@8chan.co>
+ *
+ * Usage:
+ *   $config['additional_javascript'][] = 'js/jquery.min.js';
+ *   $config['additional_javascript'][] = 'js/no-animated-gif.js';
+ */
+
+function unanimate_gif(e) {
+	var c = $('<canvas class="post-image"></canvas>');
+	$(e).parent().prepend(c);
+	c.attr('width', $(e).width());
+	c.attr('height',$(e).height());
+	c[0].getContext('2d').drawImage(e, 0, 0, $(e).width(), $(e).height());
+	$(e).hide();
+}
+
+function no_animated_gif() {
+	var anim_gifs = $('img.post-image[src$=".gif"]');
+	localStorage.no_animated_gif = true;
+	$('#no-animated-gif>a').text(_('Animate GIFs'));
+
+	$.each(anim_gifs, function(i, e) {unanimate_gif(e)} );
+}
+
+function animated_gif() {
+	$('canvas.post-image').remove();
+	$('img.post-image').show();
+	localStorage.no_animated_gif = false;
+	$('#no-animated-gif>a').text(_('Unanimate GIFs'));
+	
+}
+
+if (active_page == 'thread' || active_page == 'index' || active_page == 'ukko') {
+	onready(function(){
+		$('hr:first').before('<div id="no-animated-gif" style="text-align:right"><a class="unimportant" href="javascript:void(0)">'+_('Unanimate GIFs')+'</a></div>')
+
+		$('#no-animated-gif').on('click', function() {
+			if (localStorage.no_animated_gif === 'true') {
+				animated_gif();
+			} else {
+				no_animated_gif();
+			}
+		});
+
+		if (localStorage.no_animated_gif === 'true')
+			$(document).ready(no_animated_gif);
+	});
+}