Mercurial > projects > booket

comparison booket.js @ 24:6cf1ec2e8955

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Use expanders for action forms
author Guido Berhoerster <guido+booket@berhoerster.name>
date Sun, 05 Oct 2014 20:25:51 +0200
parents 69552aee9993
children b2c9c4fb8d4c
comparison
equal deleted inserted replaced
23:69552aee9993 24:6cf1ec2e8955
1096 }; 1096 };
1097 1097
1098 1098
1099 var ActionsView = function () { 1099 var ActionsView = function () {
1100 var saveFormElement; 1100 var saveFormElement;
1101 var loadFormElement;
1102 var importFormElement;
1103 var exportFormElement;
1104 var newNode; 1101 var newNode;
1102 var fieldsetElement;
1103 var legendElement;
1105 var i; 1104 var i;
1106 1105
1107 ObservableMixin.call(this); 1106 ObservableMixin.call(this);
1107
1108 this.actionsElement = document.querySelector('#actions');
1108 1109
1109 this.tagInputTemplate = document.querySelector('#tag-input-template'); 1110 this.tagInputTemplate = document.querySelector('#tag-input-template');
1110 saveFormElement = document.querySelector('form#save-form'); 1111 saveFormElement = document.querySelector('form#save-form');
1111 saveFormElement.addEventListener('submit', this);
1112 1112
1113 this.unsavedChangesElement = 1113 this.unsavedChangesElement =
1114 saveFormElement.querySelector('.unsaved-changes-message'); 1114 saveFormElement.querySelector('.unsaved-changes-message');
1115 1115
1116 this.saveLinkElement = saveFormElement.querySelector('a#save-link'); 1116 this.saveLinkElement = saveFormElement.querySelector('a#save-link');
1117
1118 loadFormElement = document.querySelector('form#load-form');
1119 loadFormElement.addEventListener('submit', this);
1120
1121 importFormElement = document.querySelector('form#import-form');
1122 importFormElement.addEventListener('submit', this);
1123
1124 exportFormElement = document.querySelector('form#export-form');
1125 exportFormElement.addEventListener('submit', this);
1126 1117
1127 // create new editor form from template 1118 // create new editor form from template
1128 newNode = document.importNode( 1119 newNode = document.importNode(
1129 document.querySelector('#bookmark-editor-template').content, true); 1120 document.querySelector('#bookmark-editor-template').content, true);
1130 1121
1131 this.editorFormElement = newNode.querySelector('form.bookmark-editor-form'); 1122 this.editorFormElement = newNode.querySelector('form.bookmark-editor-form');
1132 this.editorFormElement.querySelector('legend').textContent = 'Add Bookmark';
1133 this.editorFormElement.querySelector('label').accessKey = 'a'; 1123 this.editorFormElement.querySelector('label').accessKey = 'a';
1134 this.editorFormElement.addEventListener('input', this); 1124
1135 this.editorFormElement.addEventListener('click', this); 1125 fieldsetElement = this.editorFormElement.querySelector('fieldset');
1136 this.editorFormElement.addEventListener('submit', this); 1126 fieldsetElement.classList.add('expander');
1137 this.editorFormElement.addEventListener('reset', this); 1127
1128 legendElement = fieldsetElement.querySelector('legend');
1129 legendElement.textContent = 'Add Bookmark';
1130 legendElement.tabIndex = 0;
1131 legendElement.classList.add('expander-label');
1138 1132
1139 this.faviconImageElement = 1133 this.faviconImageElement =
1140 this.editorFormElement.querySelector('img.bookmark-favicon'); 1134 this.editorFormElement.querySelector('img.bookmark-favicon');
1141 this.faviconImageElement.addEventListener('load', this); 1135 this.faviconImageElement.addEventListener('load', this);
1142 this.faviconImageElement.addEventListener('error', this); 1136 this.faviconImageElement.addEventListener('error', this);
1150 this.editTagListElement.appendChild(this.createTagInputElement('')); 1144 this.editTagListElement.appendChild(this.createTagInputElement(''));
1151 } 1145 }
1152 1146
1153 saveFormElement.parentNode.insertBefore(newNode, 1147 saveFormElement.parentNode.insertBefore(newNode,
1154 saveFormElement.nextSibling); 1148 saveFormElement.nextSibling);
1149
1150 this.actionsElement.addEventListener('click', this);
1151 this.actionsElement.addEventListener('keydown', this);
1152 this.actionsElement.addEventListener('submit', this);
1153 this.actionsElement.addEventListener('reset', this);
1155 1154
1156 document.querySelector('a#bookmarklet-link').href = BOOKMARKLET_URI; 1155 document.querySelector('a#bookmarklet-link').href = BOOKMARKLET_URI;
1157 }; 1156 };
1158 1157
1159 extend(ActionsView, ObservableMixin); 1158 extend(ActionsView, ObservableMixin);
1215 if (e.target.name === 'more-tags') { 1214 if (e.target.name === 'more-tags') {
1216 e.preventDefault(); 1215 e.preventDefault();
1217 e.target.blur(); 1216 e.target.blur();
1218 1217
1219 this.editTagListElement.appendChild(this.createTagInputElement('')); 1218 this.editTagListElement.appendChild(this.createTagInputElement(''));
1219 } else if (e.target.classList.contains('expander-label')) {
1220 if (e.target.parentNode.dataset.expanderOpen !== undefined) {
1221 delete e.target.parentNode.dataset.expanderOpen;
1222 } else {
1223 e.target.parentNode.dataset.expanderOpen = '';
1224 }
1225 }
1226 break;
1227 case 'keydown':
1228 if (e.keyCode === 32 && e.target.classList.contains('expander-label')) {
1229 if (e.target.parentNode.dataset.expanderOpen !== undefined) {
1230 delete e.target.parentNode.dataset.expanderOpen;
1231 } else {
1232 e.target.parentNode.dataset.expanderOpen = '';
1233 }
1220 } 1234 }
1221 break; 1235 break;
1222 case 'submit': 1236 case 'submit':
1223 if (e.target.id === 'save-form') { 1237 if (e.target.id === 'save-form') {
1224 e.preventDefault(); 1238 e.preventDefault();