Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork9.6k
Form Debugger JavaScript improvements#9857
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
Uh oh!
There was an error while loading.Please reload this page.
Changes from1 commit
0e0318960b0764111a404f21dab252b162011bfda607994d5ebf13ed505c5bea0030b858559d35afbaebc763d6553f164f226ac7c406756dFile filter
Filter by extension
Conversations
Uh oh!
There was an error while loading.Please reload this page.
Jump to
Uh oh!
There was an error while loading.Please reload this page.
Diff view
Diff view
- Loading branch information
Uh oh!
There was an error while loading.Please reload this page.
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -45,29 +45,42 @@ | ||
| padding: 0; | ||
| width: 100%; | ||
| } | ||
| .tree .tree-inner { | ||
| width:100%; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. you should add a space aftr the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. yes, will do. Sorry, I'm used to type as less spaces as possible in CSS... There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. Can you fix spaces issues here and below? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. done | ||
| padding: 5px 7px; | ||
| border-radius: 6px; | ||
| color: #313131; | ||
| cursor:pointer; | ||
| -webkit-box-sizing: border-box; | ||
| -moz-box-sizing: border-box; | ||
| box-sizing: border-box; | ||
| } | ||
| .tree a { | ||
| text-decoration: none; | ||
| } | ||
| .tree button { | ||
| width:10px; | ||
| height:10px; | ||
| background: none; | ||
| border: none; | ||
| } | ||
| .tree ul ul.tree-inner { | ||
| padding-left: 22px; | ||
| } | ||
| .tree ul ul ul.tree-inner { | ||
| padding-left: 37px; | ||
| } | ||
| .tree ul ul ul ul.tree-inner { | ||
| padding-left: 52px; | ||
| } | ||
| .tree ul ul ul ul ul.tree-inner { | ||
| padding-left: 67px; | ||
| } | ||
| .tree.tree-inner:hover { | ||
| background: #dfdfdf; | ||
| } | ||
| .tree.tree-inner.active,.tree .tree-inner.active:hover { | ||
| background: #dfdfdf; | ||
| font-weight: bold; | ||
| color: #313131; | ||
| @@ -107,12 +120,63 @@ | ||
| {% endif %} | ||
| <script> | ||
| function TreeView(tree) { | ||
| this.collapseAll = function () { | ||
| var children = tree.querySelectorAll('ul'); | ||
| for (var i = 0, l = children.length; i < l; i++) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. is this There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. yes, in | ||
| if (children[i].style.display != 'none') { | ||
| children[i].style.display = 'none'; | ||
| } else { | ||
| children[i].style.display = 'block'; | ||
| } | ||
| } | ||
| }; | ||
| this.expand = function (element) { | ||
| element.style.display = 'block'; | ||
| }; | ||
| this.collapse = function (element) { | ||
| element.style.display = 'none'; | ||
| }; | ||
| this.toggle = function (element) { | ||
| if (element.style.display !== 'none') { | ||
| this.collapse(element); | ||
| return 'collapse'; | ||
| } | ||
| this.expand(element); | ||
| return 'expand'; | ||
| } | ||
| } | ||
| var tree = document.querySelector('.tree ul'); | ||
| var treeView = new TreeView(tree); | ||
| treeView.collapseAll(); | ||
| treeView.expand(document.querySelector('.tree ul ul')); | ||
| var buttons = tree.querySelectorAll('button'); | ||
| for (var j = 0, l = buttons.length; j < l; j++) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. same question here | ||
| buttons[j].addEventListener('click', function (e) { | ||
| if ('collapse' === treeView.toggle(this.parentElement.parentElement.querySelector('ul'))) { | ||
| this.textContent = '+'; | ||
| } else { | ||
| this.textContent = '-'; | ||
| } | ||
| }, false); | ||
| } | ||
| function TabView() { | ||
| var _activeLink = null, | ||
| _activeView = null; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. @bschussek this change removes including the hash in the URL, it'll be very easy to integrate that again, but I didn't see any advantage over that? (as the script did nothing with the hash) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. No problem. I think the original idea was to link to the details of individual fields, but that didn't work anyway. We can add this later when we actually need it. | ||
| this.init = function () { | ||
| var links = document.querySelectorAll('.tree.tree-inner'), | ||
| views = document.querySelectorAll('.tree-details'), | ||
| i, | ||
| l; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. i see a usage here oh There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. this is another l variable, the one from the TabView scope, not the TreeView scope | ||
| @@ -122,8 +186,7 @@ | ||
| var link = links[i]; | ||
| link.addEventListener('click', function (e) { | ||
| var targetId = 'details_' + link.dataset.targetId, | ||
| view = document.getElementById(targetId); | ||
| if (view) { | ||
| @@ -173,7 +236,12 @@ | ||
| {% macro form_tree_entry(name, data) %} | ||
| <li> | ||
| <div class="tree-inner" data-target-id="{{ data.id }}"> | ||
| {% if data.children is not empty %} | ||
| <button>+</button> | ||
| {% endif %} | ||
| {{ name }} | ||
| </div> | ||
| {% if data.children is not empty %} | ||
| <ul> | ||