[TYPO3-dev] 4.3 PageIncludes

[Thomas "Thasmo" Deinhamer]

Clever idea! For easy understanding, I would
call 'order' 'priority' and therefore skip the
'asset' or 'base' property.

Example:

page.references {
	jquery = fileadmin/holds/jquery.js
	jquery {
		compression = 1
		position = bottom
		priority = 1
	}
}

The priority will declare the order relevance of
the item, as 'position' and 'order' are nearly the
same in their meaning, which is a bit confusing.
(Skipping 'asset' or 'base' means, that priority = 1
declares a file as mandatory and therefore will be
included first - you may declare more files which
priority 1, thex will come in their definition order.)

Next thing to think about, is the include order
of CSS and JS files related to each other. In most
cases, JS code or JS libraries only work correct, if
CSS is included BEFORE them.

And based on this fact, also considering elements like
<link rel="favicon" /> etc. it may be a bit confusing
and complicated, to define an order value for each
reference entry, especially if all those definitions
are spread over several pages inside the pagetree.

Here's my full proposal:

page.references {
	styles {
		reset = fileadmin/holds/reset.css
		reset {
			implementation = external
			compression = 1
			priority = 1
			position = top
			
			media = all
		}
		
		base = fileadmin/holds/base.css
		base {
			implementation = external
			compression = 1
			position = top
			
			media = screen
		}
	}
	
	scripts {
		library = fileadmin/holds/library.js
		library {
			implementation = external
			compression = 1
			priority = 1
			position = bottom
		}
		
		base = fileadmin/holds/base.js
		base {
			implementation = external
			compression = 1
			position = bottom
		}
	}
}

I think it's still better to split CSS and JS, as it's
imho more flexible to extend/modify/read used inside
frontend extensions or plugins. And I guess the usage
needs it. For example I want to delete all JS files -
for the print view:
	page.references.scripts >

Otherwise I would need to KILL all files seperatly:
	page.references.library >
	page.references.base >

What is still open are those kinda references:
	<link rel="top" title="" href="" />
	<link rel="start" title="" href="" />
	<link rel="up" title="" href="" />
	<link rel="last" title="" href="" />
	<link rel="help" title="" href="" />
	<link rel="copyright" title="" href="" />
	<link rel="author" title="" href="" />
	<link rel="bookmark" title="" href="" />
	<link rel="chapter" title="" href="" />
	<link rel="alternate" title="" href="" />
	<link rel="canonical" title="" href="" />

Keep it going, gimme your oppinions! =o)

Thanks a lot!


Sebastian Gebhard schrieb:
> Thomas "Thasmo" Deinhamer schrieb:
>> What about something like this:
>>
>> page.includeJS {
>>     <name> = fileadmin/holds/the/script.js
>>     <name> {
>>         implementation = external|inline
>>         compression = 0|1
>>         position = top|bottom
>>         asset/base = 0|1
>>     }
>> }
>>
>> Legend:
>> integration....    type of include, external or inline
>> compression....    compression for smaller filesize
>> position.......    position in the document
>> asset or base..    will substitute the file as mandatory (library etc.)
> 
> First: I like your idea.
> 
> Second: The majority here will want to drop it because we just reworked 
> the includes.
> 
> Third: I like your idea. And I think it's still possible to implement.
> 
> Fourth: I miss a .order property to define in which order scripts are 
> implemented. If
> two scripts have the same .order (or noth none) they should not 
> overwrite each other
> (like in page.headerData) but get displayed both in the order they were 
> defined.
> 
> Fifth: I don't like the separation between CSS and JS. Why not just 
> implementing
> page.references for all references.
> 
> Sixth (My proposal, based on Thomas):
> 
> page.references{
> 
>   styles = fileadmin/css/style.css
>   styles.compress = 1
> 
>   jQuery = fileadmin/js/jquery-min.js
>   jQuery{
>     position = bottom
>     order = 10
>   }
> 
>   lightbox = typo3conf/ext/mylightboxext/res/js/lightbox.js
>   lightbox{
>     compress = 1
>     position = bottom
>     order = 20
>   }
> 
>   stats = fileadmin/js/stats.js
>   stats.position = bottom
> 
> }
> 
> Results in:
> <head>
>   <link href="typo3temp/stylesheet_3a4694af60.css" rel="stylesheet" 
> type="text/css" />
> </head>
> <body>
>   ###CONTENT###
>   <script type="text/javascript" src="fileadmin/js/jquery-min.js"></script>
>   <script type="text/javascript" 
> src="typo3temp/javascript_0b12553063.js"></script>
>   <script type="text/javascript" src="fileadmin/js/stats.js"></script>
> </body>
> 
> Explanation:
> [styles] will get recognized as CSS-File and is rendered with a 
> <link>-Tag. No position
> was given so it's in the top (default). Compression was activated, so a 
> temporary
> CSS-File is created.
> [jQuery] and the other JS-Scripts will be recognized as such and 
> rendered with <script>-
> Tags. [stats] has no .order and therefore appears at the very end.
> 
> I think for JS and CSS automatic recognition of the type and how to 
> render is quite easy.
> If you want to implement other references like favicon, canonicals, 
> feeds etc maybe you
> need an additional property .rel.
> 
> Let's implement this and mark all the other stuff as deprecated. I think 
> it's a much cleaner
> and more intuitive way.