trello_scripts/trello_sort.js at master · konjoot/trello_scripts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
// ==UserScript==
// @name			Trello : Sorted cards
// @author			konjoot
// @version			0.5.1
// @include			https://trello.com/*
// @include			http://trello.com/*
// @grant				none
// ==/UserScript==

var TAG_NAME = 'sorted-cards-0.5-css'

//Allowed labels: red, purple, orange, yellow, blue, green, other(for cards without any label)

//for these json you must define css styles (class names in CSS must be same as keys in this json), like that:
var cards_tree = {
	red: {orange: [], yellow: [], blue: [], green: [], other: []},
	purple: {orange: [], yellow: [], blue: [], green: [], other: []},
	other: {orange: [], yellow: [], blue: [], green: [], other: []}
};

var cards_containers = {
	red: [],
	purple: [],
	other: []
};

var CSS_STRING = '\
.red{\
	background: none repeat scroll 0 0 rgba(244, 78, 78, 0.2);\
	float: left;\
	margin-bottom: 10px;\
	padding: 10px 0 0 10px;\
	width: 99%;\
}\
.purple{\
	background: none repeat scroll 0 0 rgba(153, 51, 204, 0.1);\
	float: left;\
	margin-bottom: 10px;\
	padding: 10px 0 0 10px;\
	width: 99%;\
}\
.other{\
	background: none repeat scroll 0 0 rgba(82, 121, 214, 0.2);\
	float: left;\
	margin-bottom: 10px;\
	padding: 10px 0 0 10px;\
	width: 99%;\
}';


function addJavascript(pos, funct) {
	$.get( "https://rawgithub.com/konjoot/trello_scripts/master/libs/mutation_summary_min.js", function( data, callback ) {
		$(pos).append('<script type="text/javascript">' + data + '</script>');
		funct();
	});
}

function sortCards(cards_tree, cards_containers){

	$('.js-cards-content div.float-cards').each(function(){
		var cards_tree_copy = JSON.parse(JSON.stringify(cards_tree));
		var cards_containers_copy = JSON.parse(JSON.stringify(cards_containers));
		var container = $(this);

		$.each(cards_tree_copy, function(key, val){
			$.each(val, function(k, v){
				if(key == 'other'){
					if(k == 'other'){
						v.push($(container).find('div.list-card-container').detach());
					}else{
						v.push($(container).find('.' + k + '-label').parents('div.list-card-container').detach());
					}
				}else{
					if(k == 'other'){
						v.push($(container).find('.' + key + '-label').parents('div.list-card-container').detach());
					}else{
						v.push($(container).find('.' + key + '-label').parents('div.js-card-labels').find('.' + k + '-label').parents('div.list-card-container').detach());
					}
				}
			});
		});

		$.each(cards_tree_copy, function(key, val){
			$.each(val, function(k, v){
				v[0].each(function(){
					cards_containers_copy[key].push($(this));
				});
			});
		});

		$.each(cards_containers_copy, function(key, val){
			if($(val).length > 0){
				if($(container).find('.' + key).length < 1){
					$('<div class="' + key + '"></div>').appendTo($(container));
				}
				$.each(val, function(){
					$(container).find('div.' + key).append($(this));
				});
			}
		});
	});
}

function insertCSS(cssToInsert) {
	var head=document.getElementsByTagName('head')[0];
	if(!head)
			return;
	var style=document.createElement('style');
	style.setAttribute('type', 'text/css');
	style.setAttribute('id', TAG_NAME);
	style.appendChild(document.createTextNode(cssToInsert));
	var old_style = document.getElementById(TAG_NAME);
	if(old_style){
			head.replaceChild(style, old_style);
	}else{
			head.appendChild(style);
	}
}

function initSort(){
	var observer = new MutationSummary({
		callback: function(){sortCards(cards_tree, cards_containers);},
		queries: [{
			element: '.window-module'
		}]
	});
}

$(insertCSS(CSS_STRING));
$(sortCards(cards_tree, cards_containers));
addJavascript('head', initSort);