Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Define new attributes #56

Open
andreyvolokitin opened this issue Jan 13, 2018 · 4 comments
Open

Define new attributes #56

andreyvolokitin opened this issue Jan 13, 2018 · 4 comments

Comments

@andreyvolokitin
Copy link

andreyvolokitin commented Jan 13, 2018

Currently it is possible to use variables as values of existing attributes, but there is no ability to add new attributes. What if we check here for variables defined as attributes themselves:

<button {{{btnAttrs}}} type="{{ type }}"></button>

and do something like

for (let key in node.attrs) {
  if (key.indexOf('{{') === 0) { //just a hack
    let newAttrs = placeholders(key, ctx, delimitersSettings); // attributes string
   // merge newAttrs with node.attrs and delete node.attrs[key]
  } else {
    node.attrs[key] = placeholders(node.attrs[key], ctx, delimitersSettings)
  }
}

having locals:

locals: {
  type: 'submit',
  btnAttrs: 'data-num="1" data-txt="txt" data-attr="attr"',
},

What would be even more powerful is the ability to merge existing attributes with new ones, so we can redefine existing attributes along with adding new ones:

<merger MERGE_ME_WITHIN_INCLUDE="data-num='1' data-txt='txt' data-attr='attr'">
  <include src="include.html"></include>
</merger>

But I yet can not see how this instruction can be implemented with html syntax (considering that data will be defined in HTML)... Maybe some JS instruction/code within a <script> would fit (though this would be pretty strange thing as a whole), but then it is in conflict with the actual html content, which also may include <script> tags

@andreyvolokitin
Copy link
Author

Probably will be problematic because of whitespace issue: posthtml parser can't recognize such expressions if there is whitespace in them. So {{{btnAttrs}}} is one attribute, but {{{ btnAttrs }}} is multiple attributes. Same goes with tags. It could be an edge case where you not allowed to use whitespace, but this is controversial

andreyvolokitin added a commit to andreyvolokitin/posthtml-expressions that referenced this issue Feb 4, 2018
@andreyvolokitin
Copy link
Author

Attributes merging turned out to be pretty easy: andreyvolokitin@7be91c5#diff-6d186b954a58d5bb740f73d84fe39073R170

@thewebartisan7
Copy link

@andreyvolokitin was this merged? How it works?

@andreyvolokitin
Copy link
Author

I used it as a fork, worked fine, shouldn't be hard to make an updated PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants