Re: [css-regions] Reworking getNamedFlows()

On 8/1/13 8:48 PM, "François REMY" <francois.remy.dev@outlook.com> wrote:

>>>>>You may want to add listeners to a named flow before the page actually
>>>>>finished loading, and there's no good way to know when all the
>>>>>stylesheets have been downloaded and applied (you don't want to use
>>>>>the
>>>>>"load" event because it waits on images).
>>>>>
>>>>>Also, you may just want to listen to events on a flow that do not
>>>>>exist
>>>>>yet but you suspect some script or media query could make alive
>>>>>depending
>>>>>on conditions you don't want to know about (you just want to know when
>>>>>you should start acting on the flow).
>>>>>
>>>>
>>>> This is one way to do it, for the case where you know the name of the
>>>> named flow in advance.
>>>>
>>>> While this solves the theoretical problem, I don't know a real life
>>>>use
>>>> case where this would be needed.
>>>> What would you do anyway with the NamedFlow object before the images
>>>>are
>>>> loaded and the layout completed?
>>>
>>>Huh... maybe make sure that the website looks good even when the user is
>>>on 3G connection and that loading images takes a while? A good website
>>>does not rely on the images themselves to size the image exclusion
>>>areas,
>>>so there's no point waiting for them anyway.
>> Web programmers and designers achieve this by setting the width and
>>height
>> attributes of the <img> tag. The browser knows how to layout the page so
>> the "exclusion" area doesn't change once the image is loaded.
>
>This is exactly what I said: you don't need to wait for images to be
>downloaded (wait onload) to start using the named flow events and adapt
>the region layout to the content.
>
>The issue here is not the images but the fact that when the stylesheet is
>still downloading, there's no way to get a reference to the named flow
>and attach events to it, and there's no way to know when all stylesheets
>have been downloaded so that you can attach to the named flow in a
>bug-proof way (ie: your flow may not exist when DOMContentReady fires
>because the stylesheets are still being loaded).
>
>If you've getNamedFlow that returns you an instance even if the flow
>isn't currently active, you can register to events even before the flow
>has been created by the downloaded stylesheets and you're fine. 		 	   		
> 

The html file below displays these results:

inline: 0 flow(s)
inline at the end: 2 flow(s)
flow1
flow2 

DOMContentLoaded: 2 flow(s)
flow1
flow2
load: 2 flow(s)
flow1
flow2 

Which means you get access to all named flows on the DOMContentLoaded
event, you don't need to wait for the unload event.
More than that, you don't even need the DOMContentLoaded, you can have
your script added at the end of the <body>.



<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="external.css"/> <!-- .region1 {
-webkit-flow-into: flow1; } -->
        <style>.region2{ -webkit-flow-into:flow2; }</style>
        <script>
            function displayFlows( description ) {
                var flows = document.webkitGetNamedFlows();
                console.log( description + ": " + flows.length + "
flow(s)" );
                for ( var i = 0 ; i < flows.length ; ++ i )
                    console.log( flows[i].name );
            }

            displayFlows( "inline" );

            document.addEventListener( "DOMContentLoaded", function() {
displayFlows("DOMContentLoaded"); } );

            window.addEventListener( "load", function() {
displayFlows("load"); } );
        </script>
    </head>
    <body>
        <div class="region1"></div>
        <div class="region2"></div>

        <script> displayFlows("inline at the end"); </script>
    </body>
</html>



Mihai Maerean

Received on Thursday, 1 August 2013 18:51:56 UTC