Git Product home page Git Product logo

Comments (3)

zachmandeville avatar zachmandeville commented on June 23, 2024

alternately: is there a recommended way to write a fieldset tag function so it's not wrapping things in <p> tags? If I could do it with a tag function, I'd want a fieldset structured like so:

 ◊fieldset[#:legend "About You"]{
 ◊text-input[#:for "Name"]{}
 ◊text-input[#:for "Email"]{}
 ◊text-input[#:for "Emergency Contact"]{Who should we call (name and number)? }}

Currently, I have my functions defined as so:

(define  (get-attr attributes keyword)
  ;; given a list of attributes, and a keyword of specific attribute
  ;; return the value of this attribute.
  (define attribute (car (filter (λ (x) (eq? (car x) keyword)) attributes)))
  (list-ref attribute 1))

(define-tag-function (text-input attrs note)
;; create three sibling elements: label, p.form-note, input[type=text].
;; keyword for is used for the label text and input id.
;; all other keywords fed as attributes to input.
;; If note given, it is used for a <p> tag, otherwise <p> is not created.
  (define label (get-attr attrs 'for))
  (define id (string-downcase(string-replace label " " "-")))
  (define attributes (filter (λ (x) (not(eq? (car x) 'for))) attrs))
  `(@
    (label ((for ,id)) ,label)
    ,(when (not (null? note)) `(p ((class "form-note")),@note))
    (input ((type "text") (id ,id) ,@attributes))))

(define-tag-function (fieldset attrs elems)
;; creates fieldset element, with label keyword used to generate label element.
;; should be able to handle any input tags included in the elems.
  (define legend (get-attr attrs 'legend))
  `(fieldset (legend ,legend) ,@elems))

For the fieldset, if I don't include the @elems it generates the proper html:

<fieldset>
  <label>about me</label>
</fieldset>

if I do include ,@elems it wraps everything in fieldset in a p tag, including that explicitly defined legend:

<fieldset>
  <p>
     <legend>about me</legend>
     <label for="name">name</label>
     <input type='text' id='name'>
  </p>
</fieldset>

There must be something I'm doing wrong, but I'm baffled.

Thank you!

from pollen-users.

mbutterick avatar mbutterick commented on June 23, 2024

Is it possible to have it pass over elements like fieldset, so I can get both the pollen file and html output I want?

Try the #:exclude-tags option of decode-elements.

Also keep in mind that by default, Pollen treats fieldset as a block tag, so it gets some extra semantics that an ordinary tag function would not.

from pollen-users.

zachmandeville avatar zachmandeville commented on June 23, 2024

Ah, this worked perfectly. Thank you!

from pollen-users.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.