This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 15938 - Attaching events to content flows
Summary: Attaching events to content flows
Status: RESOLVED FIXED
Alias: None
Product: CSS
Classification: Unclassified
Component: Regions (show other bugs)
Version: unspecified
Hardware: PC All
: P2 normal
Target Milestone: ---
Assignee: Vincent Hardy
QA Contact: public-css-bugzilla
URL:
Whiteboard: cssom
Keywords:
Depends on:
Blocks:
 
Reported: 2012-02-08 22:02 UTC by Vincent Hardy
Modified: 2012-04-11 21:10 UTC (History)
5 users (show)

See Also:


Attachments

Description Vincent Hardy 2012-02-08 22:02:31 UTC
(Some feedback on regions for those interested…)

I've written a little framework for dividing content up into "pages" (regions) using the CSSOM APIs. I'm happy with the way it turned out, but the way I had to go about doing it was more complicate than what I was hoping for. In fact, I tried every other method I could think of for detecting overflow before finally resorting to attaching webkitRegionLayoutUpdate events to regions.

From Christian Cantrell (Adobe):

====
[...] something that should work is attaching the webkitRegionLayoutUpdate event listener to the flow itself rather than individual regions. For instance:

var storyFlow = document.webkitGetFlowByName('story');
storyFlow.addEventListener('webkitRegionLayoutUpdate', function(e) {
	if (storyFlow.overflow) {
		// add another region
	}
});

This would be a great way to know if additional regions were needed, however it wouldn't be enough to tell whether regions needed to be taken away. In that case, the flow would need an additional property like emptyRegions. Something like this would be nice:

var storyFlow = document.webkitGetFlowByName('story');
storyFlow.addEventListener('webkitRegionLayoutUpdate', function(e) {
	if (storyFlow.overflow) {
		// add another region
	} else if (storyFlow. emptyRegions.length > 0) {
		for (var i = 0; i < storyFlow.emptyRegions.length; ++i) {
			document.getElementById('pageContainer').removeChild(storyFlow.emptyRegions[i]);
		}
	}
});
Comment 1 Vincent Hardy 2012-03-13 22:53:04 UTC
So the proposal is:

a. Have NamedFlow implement the EventTarget interface
b. Have NamedFlow dispatch a region layout update event (http://dev.w3.org/csswg/css3-regions/#region-flow-layout-events)
c. Add an emptyRegions member to the NamedFlow interface.
Comment 2 Vincent Hardy 2012-03-22 17:07:54 UTC
(In reply to comment #1)
> So the proposal is:
> 
> a. Have NamedFlow implement the EventTarget interface
> b. Have NamedFlow dispatch a region layout update event
> (http://dev.w3.org/csswg/css3-regions/#region-flow-layout-events)
> c. Add an emptyRegions member to the NamedFlow interface.

- For a. and b., make sure the bubbling is consistent with other EventTargets that are not DOM nodes.
- For c., suggests having a property for the last non empty region index (-1 if empty flow or if no region at all)
Comment 3 Razvan Caliman 2012-03-27 13:52:36 UTC
(In reply to comment #2)
> (In reply to comment #1)
> > So the proposal is:
> > 
> > a. Have NamedFlow implement the EventTarget interface
> > b. Have NamedFlow dispatch a region layout update event
> > (http://dev.w3.org/csswg/css3-regions/#region-flow-layout-events)
> > c. Add an emptyRegions member to the NamedFlow interface.
> 
> - For a. and b., make sure the bubbling is consistent with other EventTargets
> that are not DOM nodes.
> - For c., suggests having a property for the last non empty region index (-1 if
> empty flow or if no region at all)

For c., if you're suggesting collecting empty regions, why not collect all regions for a flow? 
Then, the developer could iterate through them and check the regionOverflow property.
Comment 4 Vincent Hardy 2012-03-27 14:12:25 UTC
(In reply to comment #3)
> (In reply to comment #2)
> > (In reply to comment #1)
> > > So the proposal is:
> > > 
> > > a. Have NamedFlow implement the EventTarget interface
> > > b. Have NamedFlow dispatch a region layout update event
> > > (http://dev.w3.org/csswg/css3-regions/#region-flow-layout-events)
> > > c. Add an emptyRegions member to the NamedFlow interface.
> > 
> > - For a. and b., make sure the bubbling is consistent with other EventTargets
> > that are not DOM nodes.
> > - For c., suggests having a property for the last non empty region index (-1 if
> > empty flow or if no region at all)
> 
> For c., if you're suggesting collecting empty regions, why not collect all
> regions for a flow? 
> Then, the developer could iterate through them and check the regionOverflow
> property.

Here, the goal is to help the developer get to the index of the last empty region easily. There is already a proposal (on NamedFlow), to help the developers iterate, see:

http://wiki.csswg.org/spec/css3-regions/css-om
Comment 5 Razvan Caliman 2012-03-27 14:18:20 UTC
(In reply to comment #4)
> (In reply to comment #3)
> > (In reply to comment #2)
> > > (In reply to comment #1)
> > > > So the proposal is:
> > > > 
> > > > a. Have NamedFlow implement the EventTarget interface
> > > > b. Have NamedFlow dispatch a region layout update event
> > > > (http://dev.w3.org/csswg/css3-regions/#region-flow-layout-events)
> > > > c. Add an emptyRegions member to the NamedFlow interface.
> > > 
> > > - For a. and b., make sure the bubbling is consistent with other EventTargets
> > > that are not DOM nodes.
> > > - For c., suggests having a property for the last non empty region index (-1 if
> > > empty flow or if no region at all)
> > 
> > For c., if you're suggesting collecting empty regions, why not collect all
> > regions for a flow? 
> > Then, the developer could iterate through them and check the regionOverflow
> > property.
> 
> Here, the goal is to help the developer get to the index of the last empty
> region easily. There is already a proposal (on NamedFlow), to help the
> developers iterate, see:
> 
> http://wiki.csswg.org/spec/css3-regions/css-om

Noted. Thanks for the clarification!
I missed the getRegions method.
Comment 6 Vincent Hardy 2012-03-27 20:52:08 UTC
https://dvcs.w3.org/hg/csswg/rev/614c5fe1f9ad