Mercurial > projects > booket
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 |