-
Notifications
You must be signed in to change notification settings - Fork 1
/
sidebar.html
112 lines (95 loc) · 4.69 KB
/
sidebar.html
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
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<!-- The CSS package above applies Google styling to buttons and other elements. -->
</head>
<body>
<div>
<div id="checklist" style="margin-left:10px;margin-right:10px;"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function(){
var selectedCheckboxesObj = {}; // global object used to store info about selected checkboxes
/* logic to send payload when user is idle [START] */
var timeoutID; // timeout ID returned by setTimeout, needed by clearTimeout
window.addEventListener("mousedown", resetTimer, false);
function resetTimer(e) {
window.clearTimeout(timeoutID);
timeoutID = window.setTimeout(goIdle, 1500);// start timer to wait 1500 ms before going idle
}
function goIdle() {
google.script.run.withSuccessHandler().withFailureHandler(showError).withUserObject(this).updateItemsInDoc(selectedCheckboxesObj); // send selection payload and update doc
selectedCheckboxesObj = {}; //reset payload obj
}
/* logic to send payload when user is idle [END] */
// on document load
window.addEventListener('load', function() {
getItemsFromDoc();
});
// on document unload
window.addEventListener('unload', function() {
sessionStorage.removeItem('savedItemsResponsiveInfo');
});
function updateChecklist(listItemsObject) {
var itemsResponsiveInfo = JSON.stringify(listItemsObject.listItemsResponsiveInfo);
var savedItemsResponsiveInfo = sessionStorage.getItem('savedItemsResponsiveInfo');
if(itemsResponsiveInfo !== savedItemsResponsiveInfo) { // update sidebar checklist only if something has changed in doc since last update
sessionStorage.setItem('savedItemsResponsiveInfo', itemsResponsiveInfo);
$('#checklist').empty();
if(itemsResponsiveInfo && itemsResponsiveInfo.length) {
populateChecklist(listItemsObject);
}
}
getItemsFromDoc();
}
function populateChecklist(listItemsObject) {
var listItemsInfo = listItemsObject.listItemsInfo;
var listItemsResponsiveInfo = listItemsObject.listItemsResponsiveInfo;
var listItem, isChecked, isDisabled, listItemMarginLeft, listItemMarginTop, labelColor, labelText, stamp;
for (var i = 0; i < listItemsInfo.length; i++ ){
labelText = listItemsResponsiveInfo[i].text;
isChecked = listItemsResponsiveInfo[i].checked ? ' checked' : '';
labelColor = listItemsResponsiveInfo[i].checked ? 'style="color: #A9A9A9;"' : '';
listItemMarginLeft = 20 * listItemsResponsiveInfo[i].nestingLevel;
listItemMarginTop = listItemMarginLeft === 0 ? ';margin-top: 10px;' : '';
isDisabled = labelText ? '' : 'disabled';
stamp = listItemsInfo[i].stamp ? listItemsInfo[i].stamp : '';
listItem = $('<div title="' + stamp + '" style="margin-left:' + listItemMarginLeft + 'px' + listItemMarginTop + '"><input type="checkbox" name="' + listItemsInfo[i].listId + '" id="item-' + i + '" value="" ' + isChecked + ' ' + isDisabled + '><label for="item-' + i + '" ' + labelColor + '>' + labelText + '</label></div>');
$('#checklist').append(listItem);
}
$('#checklist input').click(itemClickHandler);
}
function itemClickHandler(e) {
var item = $(e.currentTarget);
var index = parseInt(item.attr('id').split('-')[1]);
var isChecked;
if(item.attr('checked')) {
item.removeAttr('checked');
item.context.labels[0].setAttribute('style', '');
isChecked = false;
} else {
item.attr('checked', '');
item.context.labels[0].setAttribute('style', 'color: #A9A9A9;');
isChecked = true;
}
//add item to global payload object
selectedCheckboxesObj['c' + index] = isChecked;
if(!selectedCheckboxesObj.listId) {
selectedCheckboxesObj.listId = item.attr('name');
}
}
function getItemsFromDoc() {
google.script.run.withSuccessHandler(updateChecklist).withFailureHandler(showError).withUserObject(this).getItemsFromDoc();
}
// inserts a div that contains an error message after a given element.
function showError(msg, element) {
var div = $('<div id="error" class="error">' + msg + '</div>');
$(element).after(div);
}
})();
</script>
</body>
</html>