rastographics

Markup Regions...Idea for another Placement Attribute

Recommended Posts

I've been switching a site from using the Twig Template module to using the new Markup Regions and it's been fantastic!

@ryan have you considered a placement attribute that will append/prepend/replace just the content of the attributed element, rather then the element itself?

For example, my head tag is

<head pw-id="head">

On one of my templates, I have some scripts and styles I need to append to the <head>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.markercluster@1.0.0/dist/leaflet.markercluster.js"></script>
<script src="https://unpkg.com/esri-leaflet@2.0.7"></script>

As it stands I need to add pw-append="head" to every element:

<link pw-append="head" rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<link pw-append="head" rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.css" />
<link pw-append="head" rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.Default.css" />
<script pw-append="head" src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script pw-append="head" src="https://unpkg.com/leaflet.markercluster@1.0.0/dist/leaflet.markercluster.js"></script>
<script pw-append="head" src="https://unpkg.com/esri-leaflet@2.0.7"></script>

It would be great if I could wrap these with a <div> or similar, and use a placement attribute that would add all the children of the div, without adding the div itself.

<div pw-append-contents="head">
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
	<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.css" />
	<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.Default.css" />
	<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
	<script src="https://unpkg.com/leaflet.markercluster@1.0.0/dist/leaflet.markercluster.js"></script>
	<script src="https://unpkg.com/esri-leaflet@2.0.7"></script>
</div>

 

Or maybe this is already possible with some other technique I'm not aware of?

 

  • Like 3

Share this post


Link to post
Share on other sites

I found a way to do it:

<head pw-id="head" class="pw-append">
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
	<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.css" />
	<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.Default.css" />
	<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
	<script src="https://unpkg.com/leaflet.markercluster@1.0.0/dist/leaflet.markercluster.js"></script>
	<script src="https://unpkg.com/esri-leaflet@2.0.7"></script>
</head>

However, it would be nice for uniformity of style for those of us using the pw-* attributes to also allow the pw-append-contents attribute.

 

Share this post


Link to post
Share on other sites
3 hours ago, rastographics said:

I found a way to do it:


<head pw-id="head" class="pw-append">
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
	<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.css" />
	<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.Default.css" />
	<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
	<script src="https://unpkg.com/leaflet.markercluster@1.0.0/dist/leaflet.markercluster.js"></script>
	<script src="https://unpkg.com/esri-leaflet@2.0.7"></script>
</head>

However, it would be nice for uniformity of style for those of us using the pw-* attributes to also allow the pw-append-contents attribute.

 

I think another way to do it is using

<head pw-append="head">
  ...
</head>

I don´t know for sure, :) . may be it works too.

Share this post


Link to post
Share on other sites
On 17/02/2017 at 7:50 AM, rastographics said:

It would be great if I could wrap these with a <div> or similar, and use a placement attribute that would add all the children of the div, without adding the div itself.

I agree. It's particularly a problem when using pw-after with multiple elements.

To take a simplified example, if you have these elements...

<p pw-after="header">First paragraph</p>
<p pw-after="header">Second paragraph</p>

...you end up with your elements in reverse order...

<header>
    <h1>My header</h1>
</header>
<p>Second paragraph</p>
<p>First paragraph</p>

You can't do...

<header pw-id="header" class="pw-after">
    <p>First paragraph</p>
    <p>Second paragraph</p>
</header>

...or you end up with two headers.

The workaround is to add your elements using pw-before on some other element.

What would be helpful is some way to wrap all the elements you want to insert after without actually getting the wrapping element in the compiled markup.

  • Like 1

Share this post


Link to post
Share on other sites
On 2/16/2017 at 7:50 PM, rastographics said:

append/prepend/replace just the content of the attributed element

+1

Example of replacing just the "content / innerHTML":

<header id=my-header class=pw-replace-innerHTML>
 <p>First paragraph</p>
 <p>Second paragraph</p>
</header>

As and added bonus, this way any additional attributes the original ("to be replaced") <header id=my-header... has would be kept, so there is no need to repeat attributes all over the codebase which is hard to track and modify later on.

Share this post


Link to post
Share on other sites

Another alternative could be having a "<parent />" element inside the "header", just like in template engines. This would be replaced with the header contents you have set earlier. You could use this element as the first or last one inside the header, or anywhere else.

Because of such issues wrote I earlier that I find this approach similar to blocks in template engines. But if it's so, PW should borrow existing solutions from those.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Pixrael
      The recent introduction of the Markup Regions has caused some excitement in our community, mainly for the simplicity of the proposal to output our markup, but for the various opinions about how to select and modify the regions, maybe it should not be the definitive solution. Perhaps the most correct option is to think this output strategy in the "Processwire style". Something open and versatile.
      The solution could be: Have the layouts files (main.php) as our "Markup Database" and then with the templates files (home.php) we can do "CRUD operations" on it before the output, using for that a jquery/processwire like API. This could be a powerful way like the current excellent API solution to manipulate the data.
      Where $markup come from the layout file "_main.php", in our templates files we'll can do:
      <?php $markup->find('#sidebar').prepend(' ?> <div class="foobarcontainer"> <h3>Hello <?php echo $page->foo ?></h3> <p><?php echo $page->bar ?></p> </div> <?php '); ?> <?php if ($hidecomments) $markup->find('.comment').addclass('close'); ?> <?php $markup->find('#sidebar .contact ul').remove(); ?> Etc. Think about the possibilities, it will no longer be necessary to define regions, the regions are any part of the document
      It's just an idea, maybe is a really hard to-do solution, but will be perfect for the Processwire ecosystem as the direct-delayed output workflow. In GitHub already are several php libraries for select DOM elements using any css selector in a jquery like style. 
    • By Pixrael
      As a graphic designer I like the new options to output markup with the templates (region function and regions markup strategy) but testing them I think they could adapt a little more for ease of use. In this proposal I modify the syntax and the way of assigning the values, while I try to maintain the concept.
      Next the common example, in "_main.php"
      <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--[pw headseo]--> <!--[/pw]--> <!--[pw headstyles]--> <link rel="stylesheet" href="css/normalize.min.css"> <link rel="stylesheet" href="css/main.css"> <!--[/pw]--> <script src="js/vendor/modernizr-2.8.3.min.js"></script> <!--[pw headscripts]--> <!--[/pw]--> </head> <body> <!--[pw header]--> <h1><?php echo $page->title(); ?></h1> <!--[/pw]--> <!--[pw body]--> <?php echo $page->body(); ?> <!--[/pw]--> <!--[pw footer]--> <!--[/pw]--> <!--[pw footerscripts]--> <script src="js/jquery.min.js"></script> <!--[/pw]--> </body> </html> then in the template file "home.php"
      <!--[pw headstyles+]--> <link rel="stylesheet" href="css/home.css"> <style> body { padding-top: 50px; padding-bottom: 20px; } </style> <!--[/pw]--> <!--[pw head+]--> <h2><?php echo $page->headline(); ?></h2> <!--[/pw]--> <!--[pw footer]--> <h3>About Homepage</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur dignissim nisi nec consequat.</p> <!--[/pw]--> Well I'm not a programmer, I hope you understand the above. But the idea is:
      Using html comments for regions definition, this is a standard in html, and not interfere with the DOM or with the page structure, allowing using it in document areas that are not visual. The current option basically is to use DIV but this is not correct in areas like the head tag. Using the open/close tag system allow the use of IDE features for html as auto-completion, code coloring, code validation, visual previews and more. Allowing populate the initial values for regions without variables concatenation and with the previous advantage (auto-completion, code coloring, etc) The pages can be render without additional Ids and class, maybe useful for debugging and can be cleaned in production with something like $config->cleanRegions = true; It can support the current prepend, append, before, after etc regions strategy, I think its a mix of the current Region Markup. As I said I am not programmer but I think it can be implemented using Output Buffering ob_start (); ob_end_clean (); capturing the code between open/close comments tag and assigning them to the corresponding region ... If someone likes and have time to analyze and improve this idea, are welcome because I don't know how to implementing it .. sorry