h5o / h5o-js Goto Github PK
View Code? Open in Web Editor NEWHTML5 outliner (JavaScript)
License: MIT License
HTML5 outliner (JavaScript)
License: MIT License
From [email protected] on June 16, 2011 15:30:54
As far as I understand h5o is wrong in its interpretation of 'hgroup' elements. For instance the following document:
<body id="body">
<hg id="hg">
<h1 id="h1">h1</h1>
<h2 id="h2">h2</h2>
</hg>
</body>
Is outlined as:
But it should be (AFAIU):
The spec for 'hgroup' [1] says:
"For the purposes of document summaries, outlines, and the like, the text of hgroup elements is defined to be the text of the highest ranked h1–h6 element descendant of the hgroup element, if there are any such elements, and the first such element if there are multiple elements with that rank."
Later in the section, a concrete example is also given and says:
"The point of using hgroup in these examples is to mask the h2 element (which acts as a secondary title) from the outline algorithm."
[1 http://dev.w3.org/html5/spec/sections.html#the-hgroup-element ]
Attachment: doc.html
Original issue: http://code.google.com/p/h5o/issues/detail?id=7
Shouldn't skipToHeader
actually be skipTopHeader
on line 59 of asHTML.js
?
The algorithm has been updated and probably some issues have been fixed.
currentOutlineTarget
with a wrapper around an elementgetSectionHeadingRank
and what happens when entering a heading elementOutline
objectgetSectionHeadingRank
Should elements marked up as role="heading"
also be supported?
heading
(role)A heading for a section of the page.
Often, heading elements will be referenced with the
aria-labelledby
attribute of the section for which they serve as a heading. If headings are organized into a logical outline, thearia-level
attribute can be used to indicate the nesting level.
— Accessible Rich Internet Applications (WAI-ARIA) 1.0
Authors may use the ARIA
role
andaria-*
attributes on HTML elements, in accordance with the requirements described in the ARIA specifications.
— HTML5 Specificiation
As the document outline was never correctly implemented in browsers, pages are now experimenting with adding their own implementations via a re-assigned aria-level
attribute on existing heading elements, or a role
attribute on a new element.
See:
Pages attempting to generate a valid document outline using the techniques outlined in these posts attributes are not currently captured by this plugin.
From [email protected] on March 20, 2012 05:02:52
Hi there! Not a bug. Enhancement.
I recently moved from Chrome to Safari because there is better support for HTML5 in Safari.
I missed your outliner though! Now I'm using your bookmarklet, but I wanted it to look a little closer to what I remembered in Chrome.
This enhancement is attached.
Thanks so much for your work!
Louis
Attachment: outliner.0.5.0.6-louis.html
Original issue: http://code.google.com/p/h5o/issues/detail?id=14
From [email protected] on September 14, 2010 00:48:27
If I want the outline of only part of the document, I should presumably supply something other than document.body in the HTML5Outline() constructor.
I tried supplying the nodes returned by document.getElementById("#myid") but that's clearly wrong.
Is it possible to specify something other than document.body?
Original issue: http://code.google.com/p/h5o/issues/detail?id=4
From [email protected] on June 17, 2013 03:46:50
What steps will reproduce the problem? 1. Create an h1 element (<h1></h1>
)
2. Nest an img element inside the h1 (<h1><img src="foo.gif" alt="bar"></h1>
)
3. Check the outliner, it warns for an empty text node, but instead it should treat the alt attribute as the text for the h1 (which is according to spec) What is the expected output? What do you see instead? Expected: alt attribute's value as the text.
Instead: no text. What version of the product are you using? On what operating system? Latest version on Vista. Please provide any additional information below. No need.
Original issue: http://code.google.com/p/h5o/issues/detail?id=20
From [email protected] on April 29, 2013 00:23:37
Generally inside a document the table of contents will appear below the top-level <h1>
, so showing it again looks bad. This patch switches asHTML from taking a single boolean to taking an options object so that this sort of change is easier in the future.
Attachment: skipTopHeader.patch
Original issue: http://code.google.com/p/h5o/issues/detail?id=18
From [email protected] on August 12, 2011 19:19:18
I would like to suggest that concise instructions for using this tool be posted. There is no indication of what to do, and the only help I have is from a Sitepoint book with cryptic instructions. Documentation for using the bookmark, in particular, would be very helpful.
Thank you!
Original issue: http://code.google.com/p/h5o/issues/detail?id=10
From [email protected] on September 01, 2010 20:31:12
What steps will reproduce the problem? 1. Install the latest FF version 3.6.8
2. Install the latest version of Firebug 1.5.4
3. Try to install the extension
What is the expected output?
Firebug Extension being usable
What do you see instead?
Compatiblity dialog error from Firefox. What version of the product are you using? On what operating system? Latest versions, PC. Please provide any additional information below. Contact me at leopic[at]gmail[dot]com if more details are needed.
Original issue: http://code.google.com/p/h5o/issues/detail?id=3
From [email protected] on May 21, 2012 11:35:38
Add a h1 tag in
of
Check the outline
Demo: http://fiddle.jshell.net/yGq9V/show/ I expect to see "Level 1 title > Level 2 title".
Instead, I see "Level 1 title > Section".
Here is a tool, which does it correctly (I think): http://gsnedders.html5.org/outliner/process.py?url=http%3A%2F%2Ffiddle.jshell.net%2FyGq9V%2Fshow%2F I am using Chrome extension on Linux,
but I don't think that matters.
Original issue: http://code.google.com/p/h5o/issues/detail?id=16
From alg4net on April 12, 2011 19:32:26
The following snippet
<h1><img src=logo.png alt="My Website"></h1>
Results in a "No text content inside H1", but the alt attribute shouldn't be used in that case?
Great tool by the way, helps me a lot!
Original issue: http://code.google.com/p/h5o/issues/detail?id=5
From [email protected] on September 01, 2010 03:24:27
What steps will reproduce the problem? 1. In HTML Source, add a title attribute to a sectioning element such as
, orOriginal issue: http://code.google.com/p/h5o/issues/detail?id=2
From [email protected] on August 16, 2011 08:47:10
In Section.js, you use textContent to get the heading text in _sectionHeadingText, so it transforms HTML & and < to & and <, but these are then returned unescaped by the asHTML function, which creates invalid HTML.
Quick fix: replace asHTML by:
asHTML: function(createLinks)
{
var headingText = _sectionHeadingText(this.heading);
if (createLinks) {
var a = document.createElement('a');
a.href = '#'+_generateId(this.startingNode);
a.textContent = headingText;
}
return a.outerHTML + _sectionListAsHTML(this.sections, createLinks);
}
Nice tool, by the way!
Original issue: http://code.google.com/p/h5o/issues/detail?id=11
The algorithm defines how to associate nodes with a section. This is useful for e.g. highlighting the whole section - not just its heading - during display.
I just haven't fully figured out how to do it without modifying the element objects themselves.
From [email protected] on March 24, 2012 11:11:18
What steps will reproduce the problem? 1. Go to local html file on desktop
2. Observe the lack of outliner icon What is the expected output? What do you see instead? I was hoping to see the outliner icon, instead I did not. What version of the product are you using? On what operating system? 0.5.0.62 on OSX 10.6.8 (Snow Leopard) Please provide any additional information below. I installed this extension so I could test my HTML projects for outline quality before going live with them, but since the extension does not offer the "Allow access to file URLs" option, I had to modify the extension to get this functionality.
The fix is to change the following line in the manifest file from:
"matches": [ "http:/// "https:/// ]
to
"matches": [ "http:/// "https:/// "file:///" ]
I think most people interested in this very useful extension are developers with similar goals as myself, so having the file protocol option is pretty crucial (in my opinion) to this extension's success.
Very nice extension overall.
Original issue: http://code.google.com/p/h5o/issues/detail?id=15
From QRohlf on August 14, 2013 21:03:54
What steps will reproduce the problem? 1. go to https://code.google.com/p/h5o/ 2. click "because this is wrong" link
3. video is private What is the expected output? What do you see instead? Expected: a youtube video about cleaner oceans.
Got: Video is private
Original issue: http://code.google.com/p/h5o/issues/detail?id=21
From [email protected] on July 13, 2011 21:26:22
hi, it is impossible to read a 200 pixel box, please make it 50% large or make titles white-space:nowrap;
in plus would be nice to have the section type:
with the tagname placed before the section title
thank you
Original issue: http://code.google.com/p/h5o/issues/detail?id=8
From [email protected] on October 26, 2011 19:15:38
It would be nice if the top-level div that is inserted had a class name (or ID) on it so that it could be accessed by CSS selectors more easily.
Original issue: http://code.google.com/p/h5o/issues/detail?id=12
From [email protected] on August 02, 2011 15:38:00
What steps will reproduce the problem? 1. Install the bookmarklet
2. Scroll down the page
3. Click the "Close" button in the h5o frame. What is the expected output? What do you see instead? The h5o frame should disappear and leave the page at the current scroll level What version of the product are you using? On what operating system? h5O v.0.5.0.62 on Mac OS X 10.6.7 with Chrome 12.0.742.122, Safari 5.0.5 and Firefox 4.0.1. Please provide any additional information below. Changing the line near the end where
c.href="#"
for
c.href=null
Solves the issue on Chrome and Safari, but not in Firefox.
Original issue: http://code.google.com/p/h5o/issues/detail?id=9
From [email protected] on May 19, 2011 17:50:33
What steps will reproduce the problem? 1. Go to any page served with an XML MIME-type.
2. The bookmarklet fails with an error What version of the product are you using? On what operating system? 0.5.062, Firefox 4
I may have a poke around with the unminified code to see what is going on, but it would be nice to have this fixed.
Original issue: http://code.google.com/p/h5o/issues/detail?id=6
From [email protected] on February 21, 2010 10:48:12
What steps will reproduce the problem? 1. goto page that uses html5 correctly i.e http://jamesm.com.au/ 2. click on outliner.
3. see untitled -?-?-?- What is the expected output? What do you see instead? for the developer to add data-outlinename="Menu Navagation" or without that respond for the first
Original issue: http://code.google.com/p/h5o/issues/detail?id=1
From [email protected] on November 19, 2012 13:35:54
What steps will reproduce the problem? 1. HTML5Outline(document.body)
2. Inspect the returned object What is the expected output? What do you see instead? Currently you only get the heading of a section.
It would be nice to be able to retrieve the content of a section (what is between this heading and the next one). What version of the product are you using? On what operating system? 0.5.0.62 with Firefox 16.0.2
Original issue: http://code.google.com/p/h5o/issues/detail?id=17
From [email protected] on March 01, 2012 13:24:55
What steps will reproduce the problem? 1. Open http://paolo.priotto.de/outlinetest.html 2. Check with h5o
3. Compare source and results with http://paolo.priotto.de/outlinetest2.html What is the expected output? What do you see instead? I expect this outline:
Instead, with example 1 I see this outline:
Original issue: http://code.google.com/p/h5o/issues/detail?id=13
From [email protected] on April 29, 2013 00:38:08
If I have a document like:
<section>
<h1 id="blah">Blah blah</h1>
</section>
h5o currently will generate an ID for the <section>
element instead of re-using the one on the <h1>
. I could move the id to the section, but that changes the effect of the CSS :target selector. Here's a patch to look a bit harder for IDs before generating one.
Attachment: lookHarderForIds.patch
Original issue: http://code.google.com/p/h5o/issues/detail?id=19
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.