comparison booket.js @ 23:69552aee9993

Use custom expander instead of details element Use a custom expander instead of a details element which is not (yet) universally supported.
author Guido Berhoerster <guido+booket@berhoerster.name>
date Sun, 05 Oct 2014 19:46:32 +0200
parents b19db583b5f8
children 6cf1ec2e8955
comparison
equal deleted inserted replaced
22:b19db583b5f8 23:69552aee9993
1323 this.tagInputTemplate = document.querySelector('#tag-input-template'); 1323 this.tagInputTemplate = document.querySelector('#tag-input-template');
1324 1324
1325 this.bookmarkListElement = document.querySelector('ul#bookmark-list'); 1325 this.bookmarkListElement = document.querySelector('ul#bookmark-list');
1326 this.bookmarkListElement.addEventListener('input', this); 1326 this.bookmarkListElement.addEventListener('input', this);
1327 this.bookmarkListElement.addEventListener('click', this); 1327 this.bookmarkListElement.addEventListener('click', this);
1328 this.bookmarkListElement.addEventListener('keydown', this);
1328 this.bookmarkListElement.addEventListener('submit', this); 1329 this.bookmarkListElement.addEventListener('submit', this);
1329 this.bookmarkListElement.addEventListener('reset', this); 1330 this.bookmarkListElement.addEventListener('reset', this);
1330 1331
1331 searchFormElement = document.querySelector('#search-form'); 1332 searchFormElement = document.querySelector('#search-form');
1332 searchFormElement.addEventListener('submit', this); 1333 searchFormElement.addEventListener('submit', this);
1340 1341
1341 this.updateBookmarkMessage(); 1342 this.updateBookmarkMessage();
1342 }; 1343 };
1343 1344
1344 extend(BookmarkView, ObservableMixin); 1345 extend(BookmarkView, ObservableMixin);
1346
1347 BookmarkView.prototype.getAncestorClass = function (node, className) {
1348 while ((node = node.parentNode) !== null &&
1349 (!node.classList || !node.classList.contains(className)));
1350
1351 return node;
1352 };
1345 1353
1346 BookmarkView.prototype.handleEvent = function (e) { 1354 BookmarkView.prototype.handleEvent = function (e) {
1347 var bookmarkletData; 1355 var bookmarkletData;
1348 var parsedData; 1356 var parsedData;
1349 var i; 1357 var i;
1415 e.target.blur(); 1423 e.target.blur();
1416 1424
1417 this.notify(e.target.name, 1425 this.notify(e.target.name,
1418 getAncestorElementDatasetItem(e.target, 'tag')); 1426 getAncestorElementDatasetItem(e.target, 'tag'));
1419 break; 1427 break;
1428 default:
1429 if ((node = this.getAncestorClass(e.target, 'expander')) !== null) {
1430 if (node.dataset.expanderOpen !== undefined) {
1431 delete node.dataset.expanderOpen;
1432 } else {
1433 node.dataset.expanderOpen = '';
1434 }
1435 }
1436 break;
1437 }
1438 break;
1439 case 'keydown':
1440 if (e.keyCode === 32 &&
1441 (node = this.getAncestorClass(e.target, 'expander')) !== null) {
1442 if (node.dataset.expanderOpen !== undefined) {
1443 delete node.dataset.expanderOpen;
1444 } else {
1445 node.dataset.expanderOpen = '';
1446 }
1420 } 1447 }
1421 break; 1448 break;
1422 case 'submit': 1449 case 'submit':
1423 if (e.target.classList.contains('bookmark-editor-form')) { 1450 if (e.target.classList.contains('bookmark-editor-form')) {
1424 // save bookmark-editor-form form contents 1451 // save bookmark-editor-form form contents