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

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;
 				}

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);
+	});
+}

stylesheets/style.css

@@ -145,13 +145,13 @@ img.banner, img.board_image {
 	border: 1px solid #a9a9a9;
 	margin: 12px auto 0 auto;
 }
-img.post-image {
+.post-image {
 	display: block;
 	float: left;
 	margin: 10px 20px;
 	border: none;
 }
-div.post img.post-image {
+div.post .post-image {
 	padding: 5px;
 	margin: 5px 20px 0 0;
 }
@@ -623,12 +623,6 @@ form.ban-appeal textarea {
 }
 
 /* Containerchan */
-    video.post-image {
-        display: block;
-        float: left;
-        margin: 10px 20px;
-        border: none;
-    }
     div.post video.post-image {
         padding: 0px;
         margin: 10px 25px 5px 5px;