class Inkcite::Renderer::Button

Public Instance Methods

render(tag, opt, ctx) click to toggle source
# File lib/inkcite/renderer/button.rb, line 121
def render tag, opt, ctx

  html = ''

  if tag == 'button'

    id = opt[:id]
    href = opt[:href]

    cfg = Config.new(ctx, opt)

    no_tag = opt[:'no-tag'] == true

    # Wrap the table in a link to make the whole thing clickable.  This works
    # in most email clients but doesn't work in Outlook (for a change).
    html << %Q({a id="#{id}" href="#{href}" color="none")
    html << ' no-tag' if no_tag
    html << '}'

    # Responsive button is just a highly styled table/td combination with optional
    # curved corners and a lower bevel (border).
    bgcolor = cfg.bgcolor
    html << '{table'
    html << %Q( bgcolor="#{bgcolor}") unless bgcolor.blank?
    html << " padding=#{cfg.padding}" if cfg.padding > 0
    html << %Q( border="#{cfg.border}") if cfg.border
    html << " border-radius=#{cfg.border_radius}" if cfg.border_radius > 0
    html << %Q( border-bottom="#{cfg.border_bottom}") if cfg.bevel > 0

    # Need to separate borders that are collapsed by default - otherwise, the bevel
    # renders incorrectly.
    html << ' border-collapse=separate' if cfg.border || cfg.bevel > 0

    html << " margin-top=#{cfg.margin_top}" if cfg.margin_top > 0
    html << " width=#{cfg.width}" if cfg.width > 0
    html << " float=#{cfg.float}" if cfg.float
    html << %Q( mobile="fill"}\n)
    html << '{td align=center'
    html << %Q( height=#{cfg.height} valign=middle) if cfg.height > 0
    html << %Q( font="#{cfg.font}" color="none")
    html << %Q( font-family="#{cfg.font_family}") unless cfg.font_family.blank?
    html << %Q( line-height=#{cfg.line_height}) unless cfg.line_height.blank?
    html << %Q( font-size="#{cfg.font_size}") if cfg.font_size > 0
    html << %Q( font-weight="#{cfg.font_weight}") unless cfg.font_weight.blank?

    # Text on the button gets a shadow automatically unless the shadow
    # color matches the background color of the button.
    shadow = cfg.text_shadow
    html << %Q( shadow="#{shadow}" shadow-offset=-1) if shadow != bgcolor

    html << '}'

    # Second, internal link for Outlook users that makes the inside of the button
    # clickable.
    html << %Q({a id="#{id}" href="#{href}" color="#{cfg.color}")
    html << %Q( letter-spacing="#{cfg.letter_spacing}") unless cfg.letter_spacing.blank?
    html << %q( no-tag) if no_tag
    html << %q(})

  else

    html << "{/a}{/td}\n{/table}{/a}"

  end

  html
end