From 60253353b2c466a559d44b687d1ea60a3590d825 Mon Sep 17 00:00:00 2001
From: 8chan <admin@8chan.co>
Date: Tue, 10 Jun 2014 18:00:49 +0000
Subject: [PATCH] Disable-able animated GIFs in a non-shitty way (unlike
 wizardchan)

---
 js/inline-expanding.js | 12 ++++++++++
 js/no-animated-gif.js  | 51 ++++++++++++++++++++++++++++++++++++++++++
 stylesheets/style.css  | 11 ++-------
 3 files changed, 65 insertions(+), 9 deletions(-)
 create mode 100644 js/no-animated-gif.js

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);
+	});
+}
diff --git a/stylesheets/style.css b/stylesheets/style.css
index 1b6d0e06..15b21455 100644
--- a/stylesheets/style.css
+++ b/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;
 }
@@ -626,16 +626,9 @@ pre {
 .compact-boardlist #watch-pinned {
         display: inline-block;
 	vertical-align: middle;
->>>>>>> 1988dd84a041a15da3a59819e97b40c2e4605a78
 }
 
 /* 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;