Skip to content

Commit 440d2f6

Browse files
Pablo GamitoPablo Gamito
Pablo Gamito
authored and
Pablo Gamito
committed
Update menu items functionality
1 parent a94488b commit 440d2f6

File tree

2 files changed

+190
-51
lines changed

2 files changed

+190
-51
lines changed

‎js/linenumbering.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,6 @@ chrome.storage.local.get( [ "enabled" ], function( result ) {
5151
} );
5252
if (timesUsed == 88) {
5353
// TODO: Run popup asking to rate the extension
54-
var popupHTML =
55-
$('body').append(popupHTML);
5654
}
5755
} );
5856

‎js/menu.js‎

Lines changed: 190 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,36 @@
1-
var inserted = false;
2-
var $subMenus = $('.goog-menuitem.apps-menuitem.goog-submenu');
3-
41
// var letters = [];
2+
// TODO: Move local storage variable names to global variables
3+
chrome.storage.local.get( ["enabled", "everyXLine", "numberBlankLines", "numberHeaderFooter", "numberParagraphsOnly", "newPageCountReset", "lineBorder"], function( results ) {
4+
5+
console.log(results);
6+
7+
var inserted = false;
8+
var $subMenus = $('.goog-menuitem.apps-menuitem.goog-submenu');
59

6-
$subMenus.waitUntilExists(function() {
10+
$subMenus.waitUntilExists(function() {
711

8-
// var letter = $(this).find(".goog-menuitem-label").attr("aria-label").split(' ').slice(-1)[0];
9-
// letters.push(letter);
10-
// letters.sort();
11-
// console.log(letters);
12+
// var letter = $(this).find(".goog-menuitem-label").attr("aria-label").split(' ').slice(-1)[0];
13+
// letters.push(letter);
14+
// letters.sort();
15+
// console.log(letters);
1216

13-
if (!inserted) {
14-
var label = $(this).find(".goog-menuitem-label").attr("aria-label");
17+
if (!inserted) {
18+
var label = $(this).find(".goog-menuitem-label").attr("aria-label");
1519

16-
if (label == "Bullets & numbering t") {
20+
if (label == "Bullets & numbering t") {
1721

18-
const $lineNumberingVerticalMenu = generateLineNumberingVerticalMenu();
22+
const $lineNumberingVerticalMenu = generateLineNumberingVerticalMenu(results);
1923

20-
$('body').append($lineNumberingVerticalMenu);
24+
$('body').append($lineNumberingVerticalMenu);
2125

22-
$(this).after(generateLineNumberingSubMenu(
23-
$lineNumberingVerticalMenu, $(this).parent()));
26+
$(this).after(generateLineNumberingSubMenu(
27+
$lineNumberingVerticalMenu, $(this).parent()));
2428

25-
inserted = true;
29+
inserted = true;
30+
}
2631
}
27-
}
2832

33+
});
2934
});
3035

3136
/**
@@ -162,7 +167,7 @@ function generateMenuItem(label) {
162167
* @param {boolean} checked is set to true is option is/has been selected
163168
*/
164169
function generateCheckboxMenuItem(label, checked) {
165-
const $checkboxMenuItem = $(
170+
var $checkboxMenuItem = $(
166171
'<div class="goog-menuitem apps-menuitem goog-option" role="menuitemcheckbox" aria-checked="' + checked + '" style="user-select: none;">' +
167172
'<div class="goog-menuitem-content" style="user-select: none;">' +
168173
'<div class="goog-menuitem-checkbox" style="user-select: none;"></div>' +
@@ -181,11 +186,49 @@ function generateCheckboxMenuItem(label, checked) {
181186
$(this).removeClass("goog-menuitem-highlight");
182187
});
183188

189+
$checkboxMenuItem.click(function() {
190+
var isChecked = $(this).hasClass("goog-option-selected");
191+
if (isChecked) {
192+
$(this).removeClass("goog-option-selected");
193+
$(this).attr('aria-checked', false);
194+
$(this).uncheckCallback();
195+
} else {
196+
$(this).addClass("goog-option-selected");
197+
$(this).attr('aria-checked', true);
198+
$(this).checkCallback();
199+
}
200+
});
201+
184202
return $checkboxMenuItem;
185203
}
186204

205+
$.fn.uncheck = function(callback) {
206+
// data is the argument passed to doSomething
207+
return this.each(function() {
208+
this.uncheckCallback = callback;
209+
});
210+
};
211+
212+
$.fn.uncheckCallback = function() {
213+
this.each(function() {
214+
this.uncheckCallback();
215+
});
216+
};
217+
218+
$.fn.check = function(callback) {
219+
return this.each(function() {
220+
this.checkCallback = callback;
221+
});
222+
};
223+
224+
$.fn.checkCallback = function() {
225+
this.each(function() {
226+
this.checkCallback();
227+
});
228+
};
229+
187230
function generateMenuSeparator() {
188-
$('<div class="goog-menuseparator" aria-disabled="true" role="separator" style="user-select: none;"></div>');
231+
return $('<div class="goog-menuseparator" aria-disabled="true" role="separator" style="user-select: none;"></div>');
189232
}
190233

191234
function generateVerticalMenu() {
@@ -199,12 +242,10 @@ function generateDialogBackground() {
199242
/**
200243
* @function
201244
* @param {string} title the title of the dialog
202-
* @param {DOMElement} dialogBackground background to apply to body (such as a
203-
* blur background)
204245
* @param {function} applyCallback the function will run when apply button is
205246
* clicked
206247
*/
207-
function generateDialog(title, $dialogBackground, applyCallback) {
248+
function generateDialog(title, applyCallback) {
208249
const $dialog = $(
209250
'<div class="modal-dialog docs-dialog" tabindex="0" role="dialog" style="position: fixed; top: 50%; left: 50%;transform: translate(-50%, -50%); opacity: 1;">' +
210251
'<div class="modal-dialog-title modal-dialog-title-draggable">' +
@@ -214,14 +255,7 @@ function generateDialog(title, $dialogBackground, applyCallback) {
214255
'<div class="modal-dialog-content">' +
215256
'<div class="kix-columnoptionsdialog-content">' +
216257
'<div class="kix-columnoptionsdialog-content-left-side goog-inline-block">' +
217-
'<div class="kix-columnoptionsdialog-section">' +
218-
'<div class="kix-columnoptionsdialog-title goog-inline-block">' +
219-
// Options labels will be inserted here +
220-
'</div>' +
221-
'<div class="kix-columnoptionsdialog-control goog-inline-block">' +
222-
// Options control items will be inserted here
223-
'</div>' +
224-
'</div>' +
258+
// Options will be inserted here
225259
'</div>' +
226260
'</div>' +
227261
'</div>' +
@@ -230,52 +264,142 @@ function generateDialog(title, $dialogBackground, applyCallback) {
230264
'<button name="cancel">Cancel</button>' +
231265
'</div>' +
232266
'</div>'
233-
);
267+
).add(generateDialogBackground());
234268

235269
$dialog.find(".modal-dialog-title-close").click(function() {
236-
closeDialog($dialog, $dialogBackground);
270+
$dialog.remove();
237271
});
238272

239273
$dialog.find("button[name='apply']").click(function() {
240-
closeDialog($dialog, $dialogBackground);
241-
applyCallback();
274+
$dialog.remove();
242275
});
243276

244277
$dialog.find("button[name='cancel']").click(function() {
245-
closeDialog($dialog, $dialogBackground);
278+
$dialog.remove();
246279
})
247280

248281
return $dialog;
249282
}
250283

251-
function closeDialog($dialog, $dialogBackground) {
252-
$dialog.remove();
253-
$dialogBackground.remove();
284+
jQuery.fn.outerHTML = function() {
285+
return jQuery('<div />').append(this.eq(0).clone()).html();
286+
};
287+
288+
function generateCheckboxControl(checked) {
289+
const $checkBox = $(
290+
'<div class="kix-columnoptionsdialog-control goog-inline-block kix-columnoptionsdialog-line-between">' +
291+
'<div class="jfk-checkbox goog-inline-block" role="checkbox" dir="ltr" tabindex="0" aria-labelledby="kix-columnoptionsdialog-line-between-label" style="user-select: none;">' +
292+
'<div class="jfk-checkbox-checkmark" role="presentation"></div>' +
293+
'</div>' +
294+
'</div>'
295+
);
296+
297+
const $checkBoxInner = $checkBox.find(".jfk-checkbox");
298+
const uncheckedClass = "jfk-checkbox-unchecked";
299+
const checkedClass = "jfk-checkbox-checked";
300+
301+
if (checked) {
302+
$checkBoxInner.addClass(checkedClass);
303+
} else {
304+
$checkBoxInner.addClass(uncheckedClass);
305+
}
306+
307+
$checkBox.click(function() {
308+
if ($checkBoxInner.hasClass(checkedClass)) {
309+
$checkBoxInner.removeClass(checkedClass);
310+
$checkBoxInner.addClass(uncheckedClass);
311+
} else {
312+
$checkBoxInner.removeClass(uncheckedClass);
313+
$checkBoxInner.addClass(checkedClass);
314+
}
315+
});
316+
317+
return $checkBox;
318+
}
319+
320+
function generateTextInput(value) {
321+
const $input = $(
322+
'<div class="kix-columnoptionsdialog-control goog-inline-block">' +
323+
'<input type="text" class="kix-columnoptionsdialog-column-spacing jfk-textinput" id="kix-columnoptionsdialog-column-spacing">' +
324+
'</div>'
325+
);
326+
327+
$input.find(".jfk-textinput").val(value);
328+
329+
return $input;
330+
}
331+
332+
function addOptionToDialog($dialog, optionLabel, $optionControl) {
333+
const $option = $(
334+
'<div class="kix-columnoptionsdialog-section">' +
335+
'<div class="kix-columnoptionsdialog-title goog-inline-block">' +
336+
'<label for="kix-columnoptionsdialog-number-of-columns">' + optionLabel + '</label>' +
337+
'</div>' +
338+
// $optionControl will be added here
339+
'</div>'
340+
);
341+
342+
$option.append($optionControl);
343+
344+
$dialog.find(".kix-columnoptionsdialog-content-left-side.goog-inline-block")
345+
.append($option);
346+
347+
return $dialog;
254348
}
255349

256350
/**
257351
* Line Numbering Menu Generation Functions
258352
*/
259353

260-
function generateLineNumberingVerticalMenu() {
354+
function generateLineNumberingVerticalMenu(results) {
261355
const $verticalMenu = generateVerticalMenu();
262356

263-
$verticalMenu.append(generateCheckboxMenuItem("Number entire document", false));
264-
$verticalMenu.append(generateMenuItem("Number selection"));
357+
console.log(results);
358+
359+
const enabled = results["enabled"] == null ? false : results["enabled"];
360+
const newPageCountReset = results["newPageCountReset"] == null ? false : results["newPageCountRests"];
361+
362+
const $noNumbersMenuItem = generateCheckboxMenuItem("None", !enabled);
363+
const $entireDocNumbersMenuItem = generateCheckboxMenuItem("Number entire document", enabled);
364+
365+
$noNumbersMenuItem.uncheck(function() {
366+
chrome.storage.local.set({"enabled": false});
367+
// TODO: $entireDocNumbersMenuItem visually check
368+
});
369+
$noNumbersMenuItem.check(function() {
370+
chrome.storage.local.set({"enabled": true});
371+
// TODO: $entireDocNumbersMenuItem visually uncheck
372+
});
373+
374+
$entireDocNumbersMenuItem.uncheck(function() {
375+
chrome.storage.local.set({"enabled": true});
376+
// TODO: $noNumbersMenuItem visually uncheck
377+
});
378+
$entireDocNumbersMenuItem.check(function() {
379+
chrome.storage.local.set({"enabled": false});
380+
// TODO: $noNumbersMenuItem visually check
381+
});
382+
383+
$verticalMenu.append($noNumbersMenuItem);
384+
$verticalMenu.append($entireDocNumbersMenuItem);
385+
// $verticalMenu.append(generateMenuItem("Number selection"));
386+
387+
$verticalMenu.append(generateMenuSeparator());
388+
389+
$verticalMenu.append(generateCheckboxMenuItem("Continuous", !newPageCountReset));
390+
$verticalMenu.append(generateCheckboxMenuItem("Restart Each Page", newPageCountReset));
391+
// $verticalMenu.append(generateCheckboxMenuItem("Restart Each Section", false));
265392

266393
$verticalMenu.append(generateMenuSeparator());
267394

268-
$verticalMenu.append(generateCheckboxMenuItem("Number blank lines", false));
269-
$verticalMenu.append(generateCheckboxMenuItem("Restart line numbering on each page", false));
270-
$verticalMenu.append(generateMenuItem("Add number/content divider"));
395+
$verticalMenu.append(generateCheckboxMenuItem("Suppress for current paragraph", false));
396+
$verticalMenu.append(generateCheckboxMenuItem("Suppress for current selection", false));
397+
398+
$verticalMenu.append(generateMenuSeparator());
271399

272400
const $moreOptionsMenuItem = generateMenuItem("More options...");
273401
$moreOptionsMenuItem.click(function() {
274-
const $dialogBackground = generateDialogBackground()
275-
$('body').append(generateDialog("Line numbering options", $dialogBackground, function() {
276-
277-
}));
278-
$('body').append($dialogBackground);
402+
$('body').append(generateLineNumberingOptionsDialog());
279403
});
280404
$verticalMenu.append($moreOptionsMenuItem);
281405

@@ -286,3 +410,20 @@ function generateLineNumberingSubMenu($verticalMenu, $mainMenuContainer) {
286410
return generateSubMenu(
287411
["", "L", "ine numbering"], $verticalMenu, $mainMenuContainer);
288412
}
413+
414+
function generateLineNumberingOptionsDialog() {
415+
const $dialog = generateDialog(
416+
"Line numbering options",
417+
lineNumberingOptionsApplyCallback()
418+
);
419+
420+
addOptionToDialog($dialog, "Count by", generateTextInput(1));
421+
addOptionToDialog($dialog, "Number blank lines", generateCheckboxControl(true));
422+
addOptionToDialog($dialog, "Add number/content divider", generateCheckboxControl(false));
423+
424+
return $dialog;
425+
}
426+
427+
function lineNumberingOptionsApplyCallback() {
428+
// TODO: Implement
429+
}

0 commit comments

Comments
 (0)