Skip to content

Commit 140f9e3

Browse files
vedansh-5vedansh-5
committed
better enable/disable sense
Signed-off-by: Vedansh Saini <[email protected]>
1 parent 2ef57bd commit 140f9e3

File tree

2 files changed

+240
-100
lines changed

2 files changed

+240
-100
lines changed

‎src/index.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,3 +148,20 @@ body,input,div,h3,h4,p,label,hr, #scrumReport{
148148
from { transform: rotate(0deg); }
149149
to { transform: rotate(360deg); }
150150
}
151+
/* Disabled state styling */
152+
.disabled-content {
153+
opacity: 0.5 !important;
154+
pointer-events: none !important;
155+
user-select: none !important;
156+
}
157+
158+
.disabled-content input,
159+
.disabled-content button,
160+
.disabled-content [contenteditable] {
161+
cursor: not-allowed !important;
162+
}
163+
164+
/* Dark mode disabled state */
165+
.dark-mode .disabled-content {
166+
opacity: 0.4 !important;
167+
}

‎src/scripts/popup.js

Lines changed: 223 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -61,129 +61,252 @@ document.addEventListener('DOMContentLoaded', function() {
6161
this.src = isDarkMode ? 'icons/light-mode.png' : 'icons/night-mode.png';
6262
});
6363

64-
// Button setup
65-
const generateBtn = document.getElementById('generateReport');
66-
const copyBtn = document.getElementById('copyReport');
67-
68-
generateBtn.addEventListener('click', function() {
69-
this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Generating...';
70-
this.disabled = true;
71-
window.generateScrumReport();
72-
});
73-
74-
copyBtn.addEventListener('click', function() {
64+
function updateContentState(enableToggle) {
65+
const elementsToToggle = [
66+
'startingDate',
67+
'endingDate',
68+
'userReason',
69+
'generateReport',
70+
'copyReport',
71+
'refreshCache',
72+
'showOpenLabel',
73+
'scrumReport',
74+
'githubUsername',
75+
'projectName',
76+
];
77+
78+
const radios = document.querySelectorAll('input[name="timeframe"]');
79+
const customDateContainer = document.getElementById('customDateContainer');
80+
81+
elementsToToggle.forEach(id => {
82+
const element = document.getElementById(id);
83+
if(element) {
84+
element.disabled = !enableToggle;
85+
if(!enableToggle) {
86+
element.style.opacity = '0.5';
87+
element.style.pointerEvents = 'none';
88+
} else {
89+
element.style.opacity = '1';
90+
element.style.pointerEvents = 'auto';
91+
}
92+
}
93+
});
94+
95+
radios.forEach(radio => {
96+
radio.disabled = !enableToggle;
97+
const label = document.querySelector(`label[for="${radio.id}"]`);
98+
if(label){
99+
if(!enableToggle) {
100+
label.style.opacity = '0.5';
101+
label.style.pointerEvents = 'none';
102+
} else {
103+
label.style.opacity = '1';
104+
label.style.pointerEvents = 'auto';
105+
}
106+
}
107+
});
108+
109+
110+
if(customDateContainer){
111+
if (!enableToggle) {
112+
customDateContainer.style.opacity = '0.5';
113+
customDateContainer.style.pointerEvents = 'none';
114+
} else {
115+
customDateContainer.style.opacity = '1';
116+
customDateContainer.style.pointerEvents = 'auto';
117+
}
118+
}
119+
75120
const scrumReport = document.getElementById('scrumReport');
76-
const tempDiv = document.createElement('div');
77-
tempDiv.innerHTML = scrumReport.innerHTML;
78-
document.body.appendChild(tempDiv);
79-
tempDiv.style.position = 'absolute';
80-
tempDiv.style.left = '-9999px';
81-
82-
const range = document.createRange();
83-
range.selectNode(tempDiv);
84-
const selection = window.getSelection();
85-
selection.removeAllRanges();
86-
selection.addRange(range);
121+
if(scrumReport){
122+
scrumReport.contentEditable = enableToggle;
123+
if(!enableToggle){
124+
scrumReport.innerHTML = '<p style="text-align: center; color: #999; padding: 20px;">Extension is disabled. Enable it from the options to generate scrum reports.</p>';
125+
} else{
126+
const disabledMessage = '<p style="text-align: center; color: #999; padding: 20px;">Extension is disabled. Enable it from the options to generate scrum reports.</p>';
127+
if(scrumReport.innerHTML === disabledMessage) {
128+
scrumReport.innerHTML = '';
129+
}
130+
}
131+
}
132+
}
133+
134+
chrome.storage.local.get(['enableToggle'], (items) => {
135+
const enableToggle = items.enableToggle !== false;
136+
updateContentState(enableToggle);
137+
if(!enableToggle){
138+
return;
139+
}
87140

88-
try {
89-
document.execCommand('copy');
90-
this.innerHTML = '<i class="fa fa-check"></i> Copied!';
91-
setTimeout(() => {
92-
this.innerHTML = '<i class="fa fa-copy"></i> Copy Report';
93-
}, 2000);
94-
} catch (err) {
95-
console.error('Failed to copy: ', err);
96-
} finally {
97-
selection.removeAllRanges();
98-
document.body.removeChild(tempDiv);
141+
initializePopup();
142+
})
143+
144+
chrome.storage.onChanged.addListener((changes, namespace) => {
145+
if (namespace === 'local' && changes.enableToggle) {
146+
updateContentState(changes.enableToggle.newValue);
147+
if (changes.enableToggle.newValue) {
148+
// re-initialize if enabled
149+
initializePopup();
150+
}
99151
}
100152
});
101153

102-
// Custom date container click handler
103-
document.getElementById('customDateContainer').addEventListener('click', () => {
104-
document.querySelectorAll('input[name="timeframe"]').forEach(radio => {
105-
radio.checked = false
106-
radio.dataset.wasChecked = 'false'
107-
});
108-
109-
const startDateInput = document.getElementById('startingDate');
110-
const endDateInput = document.getElementById('endingDate');
111-
startDateInput.disabled = false;
112-
endDateInput.disabled = false;
154+
function initializePopup() {
155+
156+
// Button setup
157+
const generateBtn = document.getElementById('generateReport');
158+
const copyBtn = document.getElementById('copyReport');
113159

114-
chrome.storage.local.set({
115-
lastWeekContribution: false,
116-
yesterdayContribution: false,
117-
selectedTimeframe: null
160+
generateBtn.addEventListener('click', function() {
161+
this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Generating...';
162+
this.disabled = true;
163+
window.generateScrumReport();
118164
});
119-
});
120165

121-
chrome.storage.local.get([
122-
'selectedTimeframe',
123-
'lastWeekContribution',
124-
'yesterdayContribution'
125-
], (items) => {
126-
console.log('Restoring state:', items);
166+
copyBtn.addEventListener('click', function() {
167+
const scrumReport = document.getElementById('scrumReport');
168+
const tempDiv = document.createElement('div');
169+
tempDiv.innerHTML = scrumReport.innerHTML;
170+
document.body.appendChild(tempDiv);
171+
tempDiv.style.position = 'absolute';
172+
tempDiv.style.left = '-9999px';
173+
174+
const range = document.createRange();
175+
range.selectNode(tempDiv);
176+
const selection = window.getSelection();
177+
selection.removeAllRanges();
178+
selection.addRange(range);
179+
180+
try {
181+
document.execCommand('copy');
182+
this.innerHTML = '<i class="fa fa-check"></i> Copied!';
183+
setTimeout(() => {
184+
this.innerHTML = '<i class="fa fa-copy"></i> Copy Report';
185+
}, 2000);
186+
} catch (err) {
187+
console.error('Failed to copy: ', err);
188+
} finally {
189+
selection.removeAllRanges();
190+
document.body.removeChild(tempDiv);
191+
}
192+
});
127193

128-
if (!items.selectedTimeframe) {
129-
items.selectedTimeframe = 'yesterdayContribution';
130-
items.lastWeekContribution = false;
131-
items.yesterdayContribution = true;
132-
}
194+
// refresh cache button
195+
document.getElementById('refreshCache').addEventListener('click', async function () {
196+
const button = this;
197+
const originalText = button.innerHTML;
133198

134-
const radio = document.getElementById(items.selectedTimeframe);
135-
if (radio) {
136-
radio.checked = true;
137-
radio.dataset.wasChecked = 'true';
138-
139-
const startDateInput = document.getElementById('startingDate');
140-
const endDateInput = document.getElementById('endingDate');
199+
button.classList.add('loading');
200+
button.innerHTML = '<i class="fa fa-refresh fa-spin"></i><span>Refreshing...</span>';
201+
button.disabled = true;
141202

142-
if (items.selectedTimeframe === 'lastWeekContribution') {
143-
startDateInput.value = getLastWeek();
144-
endDateInput.value = getToday();
145-
} else {
146-
startDateInput.value = getYesterday();
147-
endDateInput.value = getToday();
148-
}
203+
try{
204+
await chrome.runtime.sendMessage({action: 'forceRefresh'});
205+
button.innerHTML = '<i class="fa fa-check"></i><span>Refreshed!</span>';
206+
button.classList.remove('loading');
149207

150-
startDateInput.disabled = endDateInput.disabled = true;
208+
setTimeout(() => {
209+
button.innerHTML = originalText;
210+
button.disabled = false;
211+
}, 2000);
212+
} catch (error) {
213+
console.error('Refresh failed', error);
214+
button.innerHTML = '<i class="fa fa-exclamation-triangle"></i><span>Failed to refresh</span>';
215+
button.classList.remove('loading');
151216

217+
setTimeout(() =>{
218+
button.innerHTML = originalText;
219+
button.disabled = false;
220+
}, 2000);
221+
}
222+
})
223+
224+
// Custom date container click handler
225+
document.getElementById('customDateContainer').addEventListener('click', () => {
226+
document.querySelectorAll('input[name="timeframe"]').forEach(radio => {
227+
radio.checked = false
228+
radio.dataset.wasChecked = 'false'
229+
});
230+
231+
const startDateInput = document.getElementById('startingDate');
232+
const endDateInput = document.getElementById('endingDate');
233+
startDateInput.disabled = false;
234+
endDateInput.disabled = false;
235+
152236
chrome.storage.local.set({
153-
startingDate: startDateInput.value,
154-
endingDate: endDateInput.value,
155-
lastWeekContribution: items.selectedTimeframe === 'lastWeekContribution',
156-
yesterdayContribution: items.selectedTimeframe === 'yesterdayContribution',
157-
selectedTimeframe: items.selectedTimeframe
237+
lastWeekContribution: false,
238+
yesterdayContribution: false,
239+
selectedTimeframe: null
158240
});
159-
}
160-
});
241+
});
161242

162-
// Radio button click handlers with toggle functionality
163-
document.querySelectorAll('input[name="timeframe"]').forEach(radio => {
164-
radio.addEventListener('click', function() {
165-
if (this.dataset.wasChecked === 'true') {
166-
this.checked = false;
167-
this.dataset.wasChecked = 'false';
243+
chrome.storage.local.get([
244+
'selectedTimeframe',
245+
'lastWeekContribution',
246+
'yesterdayContribution'
247+
], (items) => {
248+
console.log('Restoring state:', items);
249+
250+
if (!items.selectedTimeframe) {
251+
items.selectedTimeframe = 'yesterdayContribution';
252+
items.lastWeekContribution = false;
253+
items.yesterdayContribution = true;
254+
}
255+
256+
const radio = document.getElementById(items.selectedTimeframe);
257+
if (radio) {
258+
radio.checked = true;
259+
radio.dataset.wasChecked = 'true';
168260

169261
const startDateInput = document.getElementById('startingDate');
170262
const endDateInput = document.getElementById('endingDate');
171-
startDateInput.disabled = false;
172-
endDateInput.disabled = false;
173-
263+
264+
if (items.selectedTimeframe === 'lastWeekContribution') {
265+
startDateInput.value = getLastWeek();
266+
endDateInput.value = getToday();
267+
} else {
268+
startDateInput.value = getYesterday();
269+
endDateInput.value = getToday();
270+
}
271+
272+
startDateInput.disabled = endDateInput.disabled = true;
273+
174274
chrome.storage.local.set({
175-
lastWeekContribution: false,
176-
yesterdayContribution: false,
177-
selectedTimeframe: null
275+
startingDate: startDateInput.value,
276+
endingDate: endDateInput.value,
277+
lastWeekContribution: items.selectedTimeframe === 'lastWeekContribution',
278+
yesterdayContribution: items.selectedTimeframe === 'yesterdayContribution',
279+
selectedTimeframe: items.selectedTimeframe
178280
});
179-
} else {
180-
document.querySelectorAll('input[name="timeframe"]').forEach(r => {
181-
r.dataset.wasChecked = 'false';
182-
});
183-
this.dataset.wasChecked = 'true';
184-
toggleRadio(this);
185281
}
186282
});
283+
}
284+
});
285+
286+
// Radio button click handlers with toggle functionality
287+
document.querySelectorAll('input[name="timeframe"]').forEach(radio => {
288+
radio.addEventListener('click', function() {
289+
if (this.dataset.wasChecked === 'true') {
290+
this.checked = false;
291+
this.dataset.wasChecked = 'false';
292+
293+
const startDateInput = document.getElementById('startingDate');
294+
const endDateInput = document.getElementById('endingDate');
295+
startDateInput.disabled = false;
296+
endDateInput.disabled = false;
297+
298+
chrome.storage.local.set({
299+
lastWeekContribution: false,
300+
yesterdayContribution: false,
301+
selectedTimeframe: null
302+
});
303+
} else {
304+
document.querySelectorAll('input[name="timeframe"]').forEach(r => {
305+
r.dataset.wasChecked = 'false';
306+
});
307+
this.dataset.wasChecked = 'true';
308+
toggleRadio(this);
309+
}
187310
});
188311
});
189312

0 commit comments

Comments
 (0)