Mercurial > projects > booket
diff booket.js @ 24:6cf1ec2e8955
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 |
line wrap: on
line diff
--- a/booket.js Sun Oct 05 19:46:32 2014 +0200 +++ b/booket.js Sun Oct 05 20:25:51 2014 +0200 @@ -1098,43 +1098,37 @@ var ActionsView = function () { var saveFormElement; - var loadFormElement; - var importFormElement; - var exportFormElement; var newNode; + var fieldsetElement; + var legendElement; var i; ObservableMixin.call(this); + this.actionsElement = document.querySelector('#actions'); + this.tagInputTemplate = document.querySelector('#tag-input-template'); saveFormElement = document.querySelector('form#save-form'); - saveFormElement.addEventListener('submit', this); this.unsavedChangesElement = saveFormElement.querySelector('.unsaved-changes-message'); this.saveLinkElement = saveFormElement.querySelector('a#save-link'); - loadFormElement = document.querySelector('form#load-form'); - loadFormElement.addEventListener('submit', this); - - importFormElement = document.querySelector('form#import-form'); - importFormElement.addEventListener('submit', this); - - exportFormElement = document.querySelector('form#export-form'); - exportFormElement.addEventListener('submit', this); - // create new editor form from template newNode = document.importNode( document.querySelector('#bookmark-editor-template').content, true); this.editorFormElement = newNode.querySelector('form.bookmark-editor-form'); - this.editorFormElement.querySelector('legend').textContent = 'Add Bookmark'; this.editorFormElement.querySelector('label').accessKey = 'a'; - this.editorFormElement.addEventListener('input', this); - this.editorFormElement.addEventListener('click', this); - this.editorFormElement.addEventListener('submit', this); - this.editorFormElement.addEventListener('reset', this); + + fieldsetElement = this.editorFormElement.querySelector('fieldset'); + fieldsetElement.classList.add('expander'); + + legendElement = fieldsetElement.querySelector('legend'); + legendElement.textContent = 'Add Bookmark'; + legendElement.tabIndex = 0; + legendElement.classList.add('expander-label'); this.faviconImageElement = this.editorFormElement.querySelector('img.bookmark-favicon'); @@ -1153,6 +1147,11 @@ saveFormElement.parentNode.insertBefore(newNode, saveFormElement.nextSibling); + this.actionsElement.addEventListener('click', this); + this.actionsElement.addEventListener('keydown', this); + this.actionsElement.addEventListener('submit', this); + this.actionsElement.addEventListener('reset', this); + document.querySelector('a#bookmarklet-link').href = BOOKMARKLET_URI; }; @@ -1217,6 +1216,21 @@ e.target.blur(); this.editTagListElement.appendChild(this.createTagInputElement('')); + } else if (e.target.classList.contains('expander-label')) { + if (e.target.parentNode.dataset.expanderOpen !== undefined) { + delete e.target.parentNode.dataset.expanderOpen; + } else { + e.target.parentNode.dataset.expanderOpen = ''; + } + } + break; + case 'keydown': + if (e.keyCode === 32 && e.target.classList.contains('expander-label')) { + if (e.target.parentNode.dataset.expanderOpen !== undefined) { + delete e.target.parentNode.dataset.expanderOpen; + } else { + e.target.parentNode.dataset.expanderOpen = ''; + } } break; case 'submit':