I search editor/plugin for editor with such html specific features:
remove node
remove only node content
navigation to next/prev node, and also parent/child node
navigation to next/prev node attribute
navigation between opening and closing tags
I love and use Vim and JetBrains IDEs, but I haven't found plugins with similar funcitonality for them. Can anybody suggest such editor/plugin?
Most of this is present by default in WebStorm / PHPStorm:
remove node
Remove a node and all descendants with:
move cursor into node
Expand Selection (Ctrl+W) until the whole node is selected
Del
remove only node content
move cursor into node content
Expand Selection (Ctrl+W) until all content is selected
Del
Remove a specific enclosing parent node with Remove Enclosing Tag (Ctrl+Shift+Del)
navigation to next/prev node, and also parent/child node
Next/previous node is Next method (Alt+↓) / Previous method (Alt+↓)
Jump to the start of the parent node with Move Caret To Code Block Start (Ctrl+[), and to the end with Move Caret To Code Block End (Ctrl+]). May have to press that twice, depending on where the cursor was.
(I don't see a good way to jump directly to child nodes)
navigation to next/prev node attribute
(would like to know one for this too!)
navigation between opening and closing tags
Just like moving to parent node above: Move Caret To Code Block Start (Ctrl+[), and Move Caret To Code Block End (Ctrl+]).
Take a look at https://github.com/mattn/emmet-vim. It seems to be fulfilling most of your requirements.
Related
I'm tinkering around using Chrome DevTools on someone's site to clean up their code and make things look the way they've requested.
So far I've been unable to delete an HTML element without also deleting its child elements (I right click on the <div> I want to delete and click 'delete element' - but this also removes all child element inside it).
However, I only want to remove the outer <div> wrapping because it's redundant and unnecessary (the code is a mess with divs inside of divs inside of divs for no reason). When I double click on the <div> and use the delete key to erase it, I'm unable to remove the outer carrots and when I click back out, the <div> reappears.
I'm almost sure I'm missing a simple step - can someone point me in the right direction?
Right-click on the div you want to remove and choose 'edit as html'. Remove the lines you don't want and then click outside the editable area to close it.
Right-click the element, choose Edit as HTML, delete the start and end tags, and save. That should move the child elements out of it and into its parent automatically. Deleting the element will always also delete its children; double-clicking it only lets you edit its tag name and not its entire markup.
I am able to find elements by class using Watir, but I can't figure out how to do additional processing with them after selection - the elements found are nil (see below).
I would love to see the html text of each element found.
You have instances of Watir::HTMLElement which at time of definition only stores the parent and selector. The #element variable which represents the object in the DOM located by Selenium through a browser driver will only be populated when you take an action on the element.
To see the text of each element, just put puts event.text inside your loop.
I have HTML (simplified) like this:
<ul>
<li><a id="1" onclick="removeItself(1)" href="#">first</a></li>
<li><a id="2" onclick="removeItself(2)" href="#">second</a></li>
</ul>
<input type="text"></input>
If the one of the links is clicked it will be removed. In my case after removing, the whole list will be rendered again.
There are many questions, but the general is where to set focus if element with focus is removed?
Where should be focus set if e.g. the second list element is removed or if all elements are removed?
What solution is web-accessible in this case? Is it acceptable to set focus always on the first item in the list, but if all items are removed to set focus to the next (input) or to a previous element?
In IE the focus will be reset and it will start from the beginning of the page.
The general principle I would apply here is:
if a next element exists, place the focus on the next element,
otherwise, if a previous element exists, place it on the previous element,
otherwise, place it on some element before or after that makes sense, of there is none, then do nothing
Here is the Angular.js TodoMVC application that I have modified to behave this way (although you could argue that I have not done a good enough job on #3 from above)
http://dylanb.github.io/todomvc/index.html#/
Here is a blog post on the process of making the delete work
http://unobfuscated.blogspot.com/2015/02/angularjs-accessibility-deleting-todo.html
This is what I did based on the answer for question Where to put focus after deleting an item in a list
Following the principle of Least Surprise, I would leave the space open with "[deleted]" in it til the cursor moves off the list, at which point the gap can be closed.
Given:
Say there are 3 items in a list and user uses up / down arrow to navigate and focuses on the second one.
User Action:
There is a delete button inside the list item, user tabs onto it and presses enter.
Context Feedback:
After deletion succeeded, focus will be placed on an invisible item at the original place where the second item was, and this invisible item contains text "Deleted" (screen reader will announce "Deleted").
Clean Up:
Then user can still use up / down to move focus to the previous / next item (or what you implemented before), and invisible item would be removed after onblur event triggered.
I have a DefaultTreeModel containing a subclass of DefaultMutableTreeNode. I have only overridden isLeaf() to always return true because I lazily load the children when the node is expanded. Then, when the node is collapsed, I remove the children (firing the proper treeNodesRemoved event) because I have unsubscribed from updates from the server.
The problem is that after the user collapses a node and I remove the children, the stupid little expand circle disappears (but clicking that area still works to expand the node). How can I always show the expand control when the children have been removed?
Related: Add 'expand' button to JTree node that has no children?. Is adding a fake child the only way?
The way I did it is I add a fake child and expansion listener when children are removed. When I get notification that the node with fake child is going to be expanded I replace the fake child with actual lazily loaded children.
This way the node always has children and expand control is always presented
This problem refers to the main (header) nav menu on THIS PAGE.
When any of the items in the "Services" drop-down submenu is clicked, I want the "Services" page to open (in the existing browser window) AND for a specific anchor tag element on the "Services" page to be in focus. I've achieved this OK. BUT, when the targetted anchor tag is in focus, I want it to also behave just like a manual mouse hover had been performed on its parent div, ie there should be a slide-down of text corresponding to the focussed element.
For a manual demo, go HERE and hover on one of the vertical list items - text will slide down to the right of the list.
HTML for the "Services" submenu link:
<li> collaborative law</li>
HTML for the targetted "a" tag and its parent div (ie "a" tag that should be in focus on "Services" page):
<div id="mylist1"><h3>Collaborative Solutions</h3></div>
Script to drive the hover behaviour of the focussed "a" tag and its parent div:
//fades in desired text after fading out whatever text is already displayed:
$(document).ready(function() {
$('#mylist1').mouseover(function() { //note first list item must be called mylist1 to avoid conflict with other code
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});
//capture click events as well:
/* $('#mylist1').click(function() {
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});*/
//capture focus events on <a> as well:
$('#myTag1').focus(function() {
if ( !$('#text1').is(":visible") ) { //prevents re-display if desired text already displayed
$(".shownText").slideUp(100).removeClass('.shownText');
$('#text1').slideDown(300, 'linear');
}
});
});
Note the main nav menu has been created using jquery, via a Dreamweaver extension.
What I have so far:
When the "Services" page opens, the correct target is in focus (as shown by the browser address bar). However, this focus is not triggering the expected text slide-down event. When I hit tab, the next list div goes into focus (as expected) & the appropriate text slide down occurs.
Am I hoping for too much? Have I misunderstood the limitations of 'in focus'" Will Mt Hotham have a killer snow season this year ?
Your sage advice is greatly welcomed!
Kirk
I'm not sure your use of "in focus" is quite what I expect... Having a fragment in the url doesn't necessarily give focus to that element, it just moves the display down to it. I assume the reason it works for tabbing is that tabbing does focus on elements and I assume it starts at the element that has been scrolled to.
What I'd suggest is breaking out your display script into a named function (so it can be used from elsewhere) and then on page load you can pull out the fragment from the url (eg #famLaw). Using that fragment you should be able to find the right element on the page and focus it.
It should be noted also that pulling the display text into a separate function has the advantage of consolidating your code - you are basically duplicating the code in the onfocus and onready events so breaking it out makes for easier maintenance and reuse. :)
P.S. I guess yes for Mt Hotham. I'd never heard of it before but I'm going to be optimistic.