Jump to content

Markup Regions...Idea for another Placement Attribute

rastographics

By rastographics,
in API & Templates

 Share

Recommended Posts

rastographics Full Member

rastographics

Posted
Posted

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
Link to comment
Share on other sites
rastographics Full Member

rastographics

Posted
  • Author
Posted

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.

 

Link to comment
Share on other sites
clsource Sr. Member

clsource

Posted
Posted
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.

Link to comment
Share on other sites
Robin S Hero Member

Robin S

Posted
Posted
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
Link to comment
Share on other sites
szabesz Hero Member

szabesz

Posted
Posted
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.

Link to comment
Share on other sites
tpr Hero Member

tpr

Posted
Posted

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
Link to comment
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
 Share
Go to topic listing
×
×
  • Create New...