browser-extension/src/integrations/asana.js at master · clockify/browser-extension · 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
// Side panel view - Task or Subtask
clockifyButton.render(
	'.TaskPaneToolbarAnimation-row:not(.clockify)',
	{ observe: true },
	sidepanelHeader => {
		$('.clockify-widget-container', sidepanelHeader)?.remove();

		const sidepanel = $('.TaskPaneBody-main');

		const asanaTaskname = () =>
			text('[role="heading"] textarea', sidepanel) ||
			/* text('[aria-label="Task Name"]') || */
			text('.TaskPane-titleRow textarea') ||
			text('.TaskPane-titleRow :first-child');
		const asanaTaskTags = () => textList('.TaskTagTokenPills span');

		const description = asanaTaskname;

		const projectName = () =>
			text('.TaskProjectTokenPill-name') ||
			text('.TaskPaneFields-projectHeader') ||
			text('.TaskAncestry-ancestorProjects a:first-child') ||
			text('.PageHeaderEditableTitle-container');
		const taskName = asanaTaskname;
		const tagNames = asanaTaskTags;

		const entry = { description, projectName, taskName, tagNames };

		const link = clockifyButton.createButton(entry);
		const input = clockifyButton.createInput(entry);

		const container = createTag('div', 'clockify-widget-container');

		container.append(link);
		container.append(input);

		sidepanelHeader.append(container);
	}
);

// Side panel view - Subtask list
clockifyButton.render(
	'.SubtaskGrid .TaskList [data-task-id]:not(.clockify)',
	{ observe: true },
	subtask => {
		const actions = $('.SubtaskTaskRow-rightChildren', subtask);

		const description = () => text('[id*="Task"]', subtask);

		const projectName = () =>
			text('.TaskProjectTokenPill-name') ||
			text('.TaskPaneFields-projectHeader') ||
			text('.TaskAncestry-ancestorProjects a:first-child') ||
			text('.PageHeaderEditableTitle-container');

		const taskName = () => text('[id*="Task"]', subtask);

		const entry = { description, projectName, taskName, small: true };

		const link = clockifyButton.createButton(entry);

		if ($('div.clockifyButton', actions)) return;
		actions.prepend(link);
	}
);

applyStyles(`
	.clockify-widget-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10px 5px;
		height: 34px;
		width: 230px;
	}
	#clockify-manual-input-form input {
		width: 110px;
		box-shadow: none;
		border: 1px solid white;
		padding: 0 8px;
		font-size: 12px;
		border-radius: 5px;
	}
	#clockify-manual-input-form input:hover {
		border-color: #afabac;
		transition: border-color 100ms;
	}
	.TaskPaneToolbarAnimation-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.TaskPane .TaskPane-body .DropTargetRow #clockifySmallButton {
		display: none;
	}
	.TaskPane .TaskPane-body .DropTargetRow:hover #clockifySmallButton,
	.TaskPane .TaskPane-body .DropTargetRow #clockifySmallButton.active {
		display: inline-flex;
	}
`);

initializeBodyObserver();

function initializeBodyObserver() {
	const bodyObserver = new MutationObserver(applyManualInputStyles);

	const observationTarget = document.body;
	const observationConfig = { childList: true };

	bodyObserver.observe(observationTarget, observationConfig);
}

function applyManualInputStyles() {
	const darkThemeClass = 'DesignTokenThemeSelectors-theme--darkMode';
	const isDarkThemeEnabled = document.body.classList.contains(darkThemeClass);

	const darkStyles = `
		#clockify-manual-input-form input { background: #1e1f21 !important; color: #f5f4f3 !important; border: 0.5px solid #1e1f21 !important; }
		#clockify-manual-input-form input:hover { border-color: #6a696a !important; transition: border-color 100ms; }
		.clockify-button-inactive { color: #f5f4f3 !important; }
	`;
	const lightStyles = `
		.clockify-input { background: white !important; color: #1e1f21 !important; border: 1px solid white !important; }
		.clockify-input:hover { border-color: #cfcbcb !important; transition: border-color 100ms; }
		.clockify-button-inactive { color: #444444 !important };
	`;

	const stylesToApply = isDarkThemeEnabled ? darkStyles : lightStyles;

	applyStyles(stylesToApply, 'clockify-theme-dependent-styles');
}