Skip to content

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.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 16 commits into from
Closed

Form Debugger JavaScript improvements #9857

Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
0e03189
Expand tree
wouterj Dec 24, 2013
60b0764
Improved form tree
wouterj Dec 26, 2013
111a404
Made sections collapsable
wouterj Dec 26, 2013
f21dab2
Added error badge
wouterj Dec 29, 2013
52b1620
Fixed CS
wouterj Dec 29, 2013
11bfda6
[WebProfilerBundle] Vertically centered the icons in the form tree
webmozart Dec 29, 2013
07994d5
[WebProfilerBundle] Improved JavaScript of the form debugger
webmozart Dec 30, 2013
ebf13ed
[WebProfilerBundle] Inverted toggler images and improved button coloring
webmozart Dec 30, 2013
505c5be
[WebProfilerBundle] Added "use strict" statements
webmozart Dec 30, 2013
a0030b8
[WebProfilerBundle] Changed toggle color back to blue and made headli…
webmozart Dec 30, 2013
58559d3
[WebProfilerBundle] Moved toggle icon behind the headlines in the for…
webmozart Dec 30, 2013
5afbaeb
[WebProfilerBundle] Enlarged the clickable area of the toggle button …
webmozart Dec 30, 2013
c763d65
Merge pull request #1 from bschussek/issue9857
wouterj Dec 30, 2013
53f164f
Fixed asset function
wouterj Dec 30, 2013
226ac7c
Reverted new image
wouterj Dec 30, 2013
406756d
Reverted Sfjs.toggle change
wouterj Dec 30, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Expand tree
  • Loading branch information
@wouterj
wouterj committed Dec 29, 2013
commit 0e03189a4f8be315a216db3aeb95c62833f02757
94 changes: 81 additions & 13 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,29 +45,42 @@
padding: 0;
width: 100%;
}
.tree a {
text-decoration: none;
display: block;
.tree .tree-inner {
width:100%;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you should add a space aftr the : everywhere to have consistent coding standards in the CSS

Copy link
Member Author

Choose a reason for hiding this comment

The 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...

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you fix spaces issues here and below?

Copy link
Member Author

Choose a reason for hiding this comment

The 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 a {
.tree ul ul .tree-inner {
padding-left: 22px;
}
.tree ul ul ul a {
.tree ul ul ul .tree-inner {
padding-left: 37px;
}
.tree ul ul ul ul a {
.tree ul ul ul ul .tree-inner {
padding-left: 52px;
}
.tree ul ul ul ul ul a {
.tree ul ul ul ul ul .tree-inner {
padding-left: 67px;
}
.tree a:hover {
.tree .tree-inner:hover {
background: #dfdfdf;
}
.tree a.active, a.active:hover {
.tree .tree-inner.active, .tree .tree-inner.active:hover {
background: #dfdfdf;
font-weight: bold;
color: #313131;
Expand Down Expand Up @@ -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++) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this l ever used elsewhere?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, in i < l for the loop condition

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++) {
Copy link
Contributor

Choose a reason for hiding this comment

The 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;
Copy link
Member Author

Choose a reason for hiding this comment

The 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)

Copy link
Contributor

Choose a reason for hiding this comment

The 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 a'),
var links = document.querySelectorAll('.tree .tree-inner'),
views = document.querySelectorAll('.tree-details'),
i,
l;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i see a usage here oh

Copy link
Member Author

Choose a reason for hiding this comment

The 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

Expand All @@ -122,8 +186,7 @@
var link = links[i];

link.addEventListener('click', function (e) {
var href = link.getAttribute('href'),
targetId = href.substr(href.indexOf('#') + 1),
var targetId = 'details_' + link.dataset.targetId,
view = document.getElementById(targetId);

if (view) {
Expand Down Expand Up @@ -173,7 +236,12 @@

{% macro form_tree_entry(name, data) %}
<li>
<a href="#details_{{ data.id }}">{{ name }}</a>
<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>
Expand Down
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy