Class: Asciidoctor::Converter::Html5Converter

Inherits:
Base
  • Object
show all
Defined in:
lib/asciidoctor/converter/html5.rb

Overview

consistent with the html5 backend from AsciiDoc.py.

Constant Summary collapse

DropAnchorRx =
%r(<(?:a\b[^>]*|/a)>)
StemBreakRx =
/ *\\\n(?:\\?\n)*|\n\n+/
SvgPreambleRx =

NOTE In JavaScript, ^ matches the start of the string when the m flag is not set

/\A.*?(?=<svg[\s>])/m
SvgStartTagRx =
/\A<svg(?:\s[^>]*)?>/
DimensionAttributeRx =
/\s(?:width|height|style)=(["'])#{CC_ANY}*?\1/

Constants included from DefaultFactory

DefaultFactory::PROVIDED

Instance Attribute Summary

Attributes included from Asciidoctor::Converter

#backend

Instance Method Summary collapse

Methods inherited from Base

#content_only, #handles?, #skip

Methods included from Asciidoctor::Converter

derive_backend_traits, #handles?

Methods included from DefaultFactory

#for, #register, #unregister_all

Methods included from Factory

#converters, #create, create, default, #for, new, #register

Methods included from Logging

#logger, #message_with_context

Constructor Details

#initialize(backend, opts = {}) ⇒ Html5Converter

Returns a new instance of Html5Converter.



36
37
38
39
40
41
42
43
44
45
46
47
48
# File 'lib/asciidoctor/converter/html5.rb', line 36

def initialize backend, opts = {}
  @backend = backend
  if opts[:htmlsyntax] == 'xml'
    syntax = 'xml'
    @xml_mode = true
    @void_element_slash = '/'
  else
    syntax = 'html'
    @xml_mode = nil
    @void_element_slash = ''
  end
  init_backend_traits basebackend: 'html', filetype: 'html', htmlsyntax: syntax, outfilesuffix: '.html', supports_templates: true
end

Dynamic Method Handling

This class handles dynamic methods through the method_missing method

#method_missing(id, *args) ⇒ Object (private)

NOTE adapt to older converters that relied on unprefixed method names



1342
1343
1344
# File 'lib/asciidoctor/converter/html5.rb', line 1342

def method_missing id, *args
  !((name = id.to_s).start_with? 'convert_') && (handles? name) ? (send %(convert_#{name}), *args) : super
end

Instance Method Details

#convert(node, transform = node.node_name, opts = nil) ⇒ Object



50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
# File 'lib/asciidoctor/converter/html5.rb', line 50

def convert node, transform = node.node_name, opts = nil
  case transform
  when 'inline_quoted' then convert_inline_quoted node
  when 'paragraph' then convert_paragraph node
  when 'inline_anchor' then convert_inline_anchor node
  when 'section' then convert_section node
  when 'listing' then convert_listing node
  when 'literal' then convert_literal node
  when 'ulist' then convert_ulist node
  when 'olist' then convert_olist node
  when 'dlist' then convert_dlist node
  when 'admonition' then convert_admonition node
  when 'colist' then convert_colist node
  when 'embedded' then convert_embedded node
  when 'example' then convert_example node
  when 'floating_title' then convert_floating_title node
  when 'image' then convert_image node
  when 'inline_break' then convert_inline_break node
  when 'inline_button' then convert_inline_button node
  when 'inline_callout' then convert_inline_callout node
  when 'inline_footnote' then convert_inline_footnote node
  when 'inline_image' then convert_inline_image node
  when 'inline_indexterm' then convert_inline_indexterm node
  when 'inline_kbd' then convert_inline_kbd node
  when 'inline_menu' then convert_inline_menu node
  when 'open' then convert_open node
  when 'page_break' then convert_page_break node
  when 'preamble' then convert_preamble node
  when 'quote' then convert_quote node
  when 'sidebar' then convert_sidebar node
  when 'stem' then convert_stem node
  when 'table' then convert_table node
  when 'thematic_break' then convert_thematic_break node
  when 'verse' then convert_verse node
  when 'video' then convert_video node
  when 'document' then convert_document node
  when 'toc' then convert_toc node
  when 'pass' then convert_pass node
  when 'audio' then convert_audio node
  else; super
  end
end

#convert_admonition(node) ⇒ Object



431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
# File 'lib/asciidoctor/converter/html5.rb', line 431

def convert_admonition node
  id_attr = node.id ? %( id="#{node.id}") : ''
  name = node.attr 'name'
  title_element = node.title? ? %(<div class="title">#{node.title}</div>\n) : ''
  if node.document.attr? 'icons'
    if (node.document.attr? 'icons', 'font') && !(node.attr? 'icon')
      label = %(<i class="fa icon-#{name}" title="#{node.attr 'textlabel'}"></i>)
    else
      label = %(<img src="#{node.icon_uri name}" alt="#{node.attr 'textlabel'}"#{@void_element_slash}>)
    end
  else
    label = %(<div class="title">#{node.attr 'textlabel'}</div>)
  end
  %(<div#{id_attr} class="admonitionblock #{name}#{(role = node.role) ? " #{role}" : ''}">
<table>
<tr>
<td class="icon">
#{label}
</td>
<td class="content">
#{title_element}#{node.content}
</td>
</tr>
</table>
</div>)
end

#convert_audio(node) ⇒ Object



458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
# File 'lib/asciidoctor/converter/html5.rb', line 458

def convert_audio node
  xml = @xml_mode
  id_attribute = node.id ? %( id="#{node.id}") : ''
  classes = ['audioblock', node.role].compact
  class_attribute = %( class="#{classes.join ' '}")
  title_element = node.title? ? %(<div class="title">#{node.title}</div>\n) : ''
  start_t = node.attr 'start'
  end_t = node.attr 'end'
  time_anchor = (start_t || end_t) ? %(#t=#{start_t || ''}#{end_t ? ",#{end_t}" : ''}) : ''
  %(<div#{id_attribute}#{class_attribute}>
#{title_element}<div class="content">
<audio src="#{node.media_uri(node.attr 'target')}#{time_anchor}"#{(node.option? 'autoplay') ? (append_boolean_attribute 'autoplay', xml) : ''}#{(node.option? 'nocontrols') ? '' : (append_boolean_attribute 'controls', xml)}#{(node.option? 'loop') ? (append_boolean_attribute 'loop', xml) : ''}>
Your browser does not support the audio tag.
</audio>
</div>
</div>)
end

#convert_colist(node) ⇒ Object



476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
# File 'lib/asciidoctor/converter/html5.rb', line 476

def convert_colist node
  result = []
  id_attribute = node.id ? %( id="#{node.id}") : ''
  classes = ['colist', node.style, node.role].compact
  class_attribute = %( class="#{classes.join ' '}")

  result << %(<div#{id_attribute}#{class_attribute}>)
  result << %(<div class="title">#{node.title}</div>) if node.title?

  if node.document.attr? 'icons'
    result << '<table>'
    font_icons, num = (node.document.attr? 'icons', 'font'), 0
    node.items.each do |item|
      num += 1
      if font_icons
        num_label = %(<i class="conum" data-value="#{num}"></i><b>#{num}</b>)
      else
        num_label = %(<img src="#{node.icon_uri "callouts/#{num}"}" alt="#{num}"#{@void_element_slash}>)
      end
      result << %(<tr>
<td>#{num_label}</td>
<td>#{item.text}#{item.blocks? ? LF + item.content : ''}</td>
</tr>)
    end
    result << '</table>'
  else
    result << '<ol>'
    node.items.each do |item|
      result << %(<li>
<p>#{item.text}</p>#{item.blocks? ? LF + item.content : ''}
</li>)
    end
    result << '</ol>'
  end

  result << '</div>'
  result.join LF
end

#convert_dlist(node) ⇒ Object



515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
# File 'lib/asciidoctor/converter/html5.rb', line 515

def convert_dlist node
  result = []
  id_attribute = node.id ? %( id="#{node.id}") : ''

  case node.style
  when 'qanda'
    classes = ['qlist', 'qanda', node.role]
  when 'horizontal'
    classes = ['hdlist', node.role]
  else
    classes = ['dlist', node.style, node.role]
  end

  class_attribute = %( class="#{classes.compact.join ' '}")

  result << %(<div#{id_attribute}#{class_attribute}>)
  result << %(<div class="title">#{node.title}</div>) if node.title?
  case node.style
  when 'qanda'
    result << '<ol>'
    node.items.each do |terms, dd|
      result << '<li>'
      terms.each do |dt|
        result << %(<p><em>#{dt.text}</em></p>)
      end
      if dd
        result << %(<p>#{dd.text}</p>) if dd.text?
        result << dd.content if dd.blocks?
      end
      result << '</li>'
    end
    result << '</ol>'
  when 'horizontal'
    slash = @void_element_slash
    result << '<table>'
    if (node.attr? 'labelwidth') || (node.attr? 'itemwidth')
      result << '<colgroup>'
      col_style_attribute = (node.attr? 'labelwidth') ? %( style="width: #{(node.attr 'labelwidth').chomp '%'}%;") : ''
      result << %(<col#{col_style_attribute}#{slash}>)
      col_style_attribute = (node.attr? 'itemwidth') ? %( style="width: #{(node.attr 'itemwidth').chomp '%'}%;") : ''
      result << %(<col#{col_style_attribute}#{slash}>)
      result << '</colgroup>'
    end
    node.items.each do |terms, dd|
      result << '<tr>'
      result << %(<td class="hdlist1#{(node.option? 'strong') ? ' strong' : ''}">)
      first_term = true
      terms.each do |dt|
        result << %(<br#{slash}>) unless first_term
        result << dt.text
        first_term = nil
      end
      result << '</td>'
      result << '<td class="hdlist2">'
      if dd
        result << %(<p>#{dd.text}</p>) if dd.text?
        result << dd.content if dd.blocks?
      end
      result << '</td>'
      result << '</tr>'
    end
    result << '</table>'
  else
    result << '<dl>'
    dt_style_attribute = node.style ? '' : ' class="hdlist1"'
    node.items.each do |terms, dd|
      terms.each do |dt|
        result << %(<dt#{dt_style_attribute}>#{dt.text}</dt>)
      end
      next unless dd
      result << '<dd>'
      result << %(<p>#{dd.text}</p>) if dd.text?
      result << dd.content if dd.blocks?
      result << '</dd>'
    end
    result << '</dl>'
  end

  result << '</div>'
  result.join LF
end

#convert_document(node) ⇒ Object



93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
# File 'lib/asciidoctor/converter/html5.rb', line 93

def convert_document node
  br = %(<br#{slash = @void_element_slash}>)
  unless (asset_uri_scheme = (node.attr 'asset-uri-scheme', 'https')).empty?
    asset_uri_scheme = %(#{asset_uri_scheme}:)
  end
  cdn_base_url = %(#{asset_uri_scheme}//cdnjs.cloudflare.com/ajax/libs)
  linkcss = node.attr? 'linkcss'
  max_width_attr = (node.attr? 'max-width') ? %( style="max-width: #{node.attr 'max-width'};") : ''
  result = ['<!DOCTYPE html>']
  lang_attribute = (node.attr? 'nolang') ? '' : %( lang="#{node.attr 'lang', 'en'}")
  result << %(<html#{@xml_mode ? ' xmlns="http://www.w3.org/1999/xhtml"' : ''}#{lang_attribute}>)
  result << %(<head>
<meta charset="#{node.attr 'encoding', 'UTF-8'}"#{slash}>
<meta http-equiv="X-UA-Compatible" content="IE=edge"#{slash}>
<meta name="viewport" content="width=device-width, initial-scale=1.0"#{slash}>
<meta name="generator" content="Asciidoctor #{node.attr 'asciidoctor-version'}"#{slash}>)
  result << %(<meta name="application-name" content="#{node.attr 'app-name'}"#{slash}>) if node.attr? 'app-name'
  result << %(<meta name="description" content="#{node.attr 'description'}"#{slash}>) if node.attr? 'description'
  result << %(<meta name="keywords" content="#{node.attr 'keywords'}"#{slash}>) if node.attr? 'keywords'
  result << %(<meta name="author" content="#{((authors = node.sub_replacements node.attr 'authors').include? '<') ? (authors.gsub XmlSanitizeRx, '') : authors}"#{slash}>) if node.attr? 'authors'
  result << %(<meta name="copyright" content="#{node.attr 'copyright'}"#{slash}>) if node.attr? 'copyright'
  if node.attr? 'favicon'
    if (icon_href = node.attr 'favicon').empty?
      icon_href = 'favicon.ico'
      icon_type = 'image/x-icon'
    elsif (icon_ext = Helpers.extname icon_href, nil)
      icon_type = icon_ext == '.ico' ? 'image/x-icon' : %(image/#{icon_ext.slice 1, icon_ext.length})
    else
      icon_type = 'image/x-icon'
    end
    result << %(<link rel="icon" type="#{icon_type}" href="#{icon_href}"#{slash}>)
  end
  result << %(<title>#{node.doctitle sanitize: true, use_fallback: true}</title>)

  if DEFAULT_STYLESHEET_KEYS.include?(node.attr 'stylesheet')
    if (webfonts = node.attr 'webfonts')
      result << %(<link rel="stylesheet" href="#{asset_uri_scheme}//fonts.googleapis.com/css?family=#{webfonts.empty? ? 'Open+Sans:300,300italic,400,400italic,600,600italic%7CNoto+Serif:400,400italic,700,700italic%7CDroid+Sans+Mono:400,700' : webfonts}"#{slash}>)
    end
    if linkcss
      result << %(<link rel="stylesheet" href="#{node.normalize_web_path DEFAULT_STYLESHEET_NAME, (node.attr 'stylesdir', ''), false}"#{slash}>)
    else
      result << %(<style>
#{Stylesheets.instance.primary_stylesheet_data}
</style>)
    end
  elsif node.attr? 'stylesheet'
    if linkcss
      result << %(<link rel="stylesheet" href="#{node.normalize_web_path((node.attr 'stylesheet'), (node.attr 'stylesdir', ''))}"#{slash}>)
    else
      result << %(<style>
#{node.read_contents (node.attr 'stylesheet'), start: (node.attr 'stylesdir'), warn_on_failure: true, label: 'stylesheet'}
</style>)
    end
  end

  if node.attr? 'icons', 'font'
    if node.attr? 'iconfont-remote'
      result << %(<link rel="stylesheet" href="#{node.attr 'iconfont-cdn', %[#{cdn_base_url}/font-awesome/#{FONT_AWESOME_VERSION}/css/font-awesome.min.css]}"#{slash}>)
    else
      iconfont_stylesheet = %(#{node.attr 'iconfont-name', 'font-awesome'}.css)
      result << %(<link rel="stylesheet" href="#{node.normalize_web_path iconfont_stylesheet, (node.attr 'stylesdir', ''), false}"#{slash}>)
    end
  end

  if (syntax_hl = node.syntax_highlighter)
    result << (syntax_hl_docinfo_head_idx = result.size)
  end

  unless (docinfo_content = node.docinfo).empty?
    result << docinfo_content
  end

  result << '</head>'
  id_attr = node.id ? %( id="#{node.id}") : ''
  if (sectioned = node.sections?) && (node.attr? 'toc-class') && (node.attr? 'toc') && (node.attr? 'toc-placement', 'auto')
    classes = [node.doctype, (node.attr 'toc-class'), %(toc-#{node.attr 'toc-position', 'header'})]
  else
    classes = [node.doctype]
  end
  classes << node.role if node.role?
  result << %(<body#{id_attr} class="#{classes.join ' '}">)

  unless (docinfo_content = node.docinfo :header).empty?
    result << docinfo_content
  end

  unless node.noheader
    result << %(<div id="header"#{max_width_attr}>)
    if node.doctype == 'manpage'
      result << %(<h1>#{node.doctitle} Manual Page</h1>)
      if sectioned && (node.attr? 'toc') && (node.attr? 'toc-placement', 'auto')
        result << %(<div id="toc" class="#{node.attr 'toc-class', 'toc'}">
<div id="toctitle">#{node.attr 'toc-title'}</div>
#{node.converter.convert node, 'outline'}
</div>)
      end
      result << (generate_manname_section node) if node.attr? 'manpurpose'
    else
      if node.header?
        result << %(<h1>#{node.header.title}</h1>) unless node.notitle
        details = []
        idx = 1
        node.authors.each do |author|
          details << %(<span id="author#{idx > 1 ? idx : ''}" class="author">#{node.sub_replacements author.name}</span>#{br})
          details << %(<span id="email#{idx > 1 ? idx : ''}" class="email">#{node.sub_macros author.email}</span>#{br}) if author.email
          idx += 1
        end
        if node.attr? 'revnumber'
          details << %(<span id="revnumber">#{((node.attr 'version-label') || '').downcase} #{node.attr 'revnumber'}#{(node.attr? 'revdate') ? ',' : ''}</span>)
        end
        if node.attr? 'revdate'
          details << %(<span id="revdate">#{node.attr 'revdate'}</span>)
        end
        if node.attr? 'revremark'
          details << %(#{br}<span id="revremark">#{node.attr 'revremark'}</span>)
        end
        unless details.empty?
          result << '<div class="details">'
          result.concat details
          result << '</div>'
        end
      end

      if sectioned && (node.attr? 'toc') && (node.attr? 'toc-placement', 'auto')
        result << %(<div id="toc" class="#{node.attr 'toc-class', 'toc'}">
<div id="toctitle">#{node.attr 'toc-title'}</div>
#{node.converter.convert node, 'outline'}
</div>)
      end
    end
    result << '</div>'
  end

  result << %(<div id="content"#{max_width_attr}>
#{node.content}
</div>)

  if node.footnotes? && !(node.attr? 'nofootnotes')
    result << %(<div id="footnotes"#{max_width_attr}>
<hr#{slash}>)
    node.footnotes.each do |footnote|
      result << %(<div class="footnote" id="_footnotedef_#{footnote.index}">
<a href="#_footnoteref_#{footnote.index}">#{footnote.index}</a>. #{footnote.text}
</div>)
    end
    result << '</div>'
  end

  unless node.nofooter
    result << %(<div id="footer"#{max_width_attr}>)
    result << '<div id="footer-text">'
    result << %(#{node.attr 'version-label'} #{node.attr 'revnumber'}#{br}) if node.attr? 'revnumber'
    result << %(#{node.attr 'last-update-label'} #{node.attr 'docdatetime'}) if (node.attr? 'last-update-label') && !(node.attr? 'reproducible')
    result << '</div>'
    result << '</div>'
  end

  # JavaScript (and auxiliary stylesheets) loaded at the end of body for performance reasons
  # See http://www.html5rocks.com/en/tutorials/speed/script-loading/

  if syntax_hl
    if syntax_hl.docinfo? :head
      result[syntax_hl_docinfo_head_idx] = syntax_hl.docinfo :head, node, cdn_base_url: cdn_base_url, linkcss: linkcss, self_closing_tag_slash: slash
    else
      result.delete_at syntax_hl_docinfo_head_idx
    end
    if syntax_hl.docinfo? :footer
      result << (syntax_hl.docinfo :footer, node, cdn_base_url: cdn_base_url, linkcss: linkcss, self_closing_tag_slash: slash)
    end
  end

  if node.attr? 'stem'
    eqnums_val = node.attr 'eqnums', 'none'
    eqnums_val = 'AMS' if eqnums_val.empty?
    eqnums_opt = %( equationNumbers: { autoNumber: "#{eqnums_val}" } )
    # IMPORTANT inspect calls on delimiter arrays are intentional for JavaScript compat (emulates JSON.stringify)
    result << %(<script type="text/x-mathjax-config">
MathJax.Hub.Config({
messageStyle: "none",
tex2jax: {
  inlineMath: [#{INLINE_MATH_DELIMITERS[:latexmath].inspect}],
  displayMath: [#{BLOCK_MATH_DELIMITERS[:latexmath].inspect}],
  ignoreClass: "nostem|nolatexmath"
},
asciimath2jax: {
  delimiters: [#{BLOCK_MATH_DELIMITERS[:asciimath].inspect}],
  ignoreClass: "nostem|noasciimath"
},
TeX: {#{eqnums_opt}}
})
MathJax.Hub.Register.StartupHook("AsciiMath Jax Ready", function () {
MathJax.InputJax.AsciiMath.postfilterHooks.Add(function (data, node) {
  if ((node = data.script.parentNode) && (node = node.parentNode) && node.classList.contains("stemblock")) {
    data.math.root.display = "block"
  }
  return data
})
})
</script>
<script src="#{cdn_base_url}/mathjax/#{MATHJAX_VERSION}/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>)
  end

  unless (docinfo_content = node.docinfo :footer).empty?
    result << docinfo_content
  end

  result << '</body>'
  result << '</html>'
  result.join LF
end

#convert_embedded(node) ⇒ Object



304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
# File 'lib/asciidoctor/converter/html5.rb', line 304

def convert_embedded node
  result = []
  if node.doctype == 'manpage'
    # QUESTION should notitle control the manual page title?
    unless node.notitle
      id_attr = node.id ? %( id="#{node.id}") : ''
      result << %(<h1#{id_attr}>#{node.doctitle} Manual Page</h1>)
    end
    result << (generate_manname_section node) if node.attr? 'manpurpose'
  elsif node.header? && !node.notitle
    id_attr = node.id ? %( id="#{node.id}") : ''
    result << %(<h1#{id_attr}>#{node.header.title}</h1>)
  end

  if node.sections? && (node.attr? 'toc') && (toc_p = node.attr 'toc-placement') != 'macro' && toc_p != 'preamble'
    result << %(<div id="toc" class="toc">
<div id="toctitle">#{node.attr 'toc-title'}</div>
#{node.converter.convert node, 'outline'}
</div>)
  end

  result << node.content

  if node.footnotes? && !(node.attr? 'nofootnotes')
    result << %(<div id="footnotes">
<hr#{@void_element_slash}>)
    node.footnotes.each do |footnote|
      result << %(<div class="footnote" id="_footnotedef_#{footnote.index}">
<a href="#_footnoteref_#{footnote.index}">#{footnote.index}</a>. #{footnote.text}
</div>)
    end
    result << '</div>'
  end

  result.join LF
end

#convert_example(node) ⇒ Object



597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
# File 'lib/asciidoctor/converter/html5.rb', line 597

def convert_example node
  id_attribute = node.id ? %( id="#{node.id}") : ''
  if node.option? 'collapsible'
    class_attribute = node.role ? %( class="#{node.role}") : ''
    summary_element = node.title? ? %(<summary class="title">#{node.title}</summary>) : '<summary class="title">Details</summary>'
    %(<details#{id_attribute}#{class_attribute}#{(node.option? 'open') ? ' open' : ''}>
#{summary_element}
<div class="content">
#{node.content}
</div>
</details>)
  else
    title_element = node.title? ? %(<div class="title">#{node.captioned_title}</div>\n) : ''
    %(<div#{id_attribute} class="exampleblock#{(role = node.role) ? " #{role}" : ''}">
#{title_element}<div class="content">
#{node.content}
</div>
</div>)
  end
end

#convert_floating_title(node) ⇒ Object



618
619
620
621
622
623
# File 'lib/asciidoctor/converter/html5.rb', line 618

def convert_floating_title node
  tag_name = %(h#{node.level + 1})
  id_attribute = node.id ? %( id="#{node.id}") : ''
  classes = [node.style, node.role].compact
  %(<#{tag_name}#{id_attribute} class="#{classes.join ' '}">#{node.title}</#{tag_name}>)
end

#convert_image(node) ⇒ Object



625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
# File 'lib/asciidoctor/converter/html5.rb', line 625

def convert_image node
  target = node.attr 'target'
  width_attr = (node.attr? 'width') ? %( width="#{node.attr 'width'}") : ''
  height_attr = (node.attr? 'height') ? %( height="#{node.attr 'height'}") : ''
  if ((node.attr? 'format', 'svg') || (target.include? '.svg')) && node.document.safe < SafeMode::SECURE
    if node.option? 'inline'
      img = (read_svg_contents node, target) || %(<span class="alt">#{node.alt}</span>)
    elsif node.option? 'interactive'
      fallback = (node.attr? 'fallback') ? %(<img src="#{node.image_uri node.attr 'fallback'}" alt="#{encode_attribute_value node.alt}"#{width_attr}#{height_attr}#{@void_element_slash}>) : %(<span class="alt">#{node.alt}</span>)
      img = %(<object type="image/svg+xml" data="#{node.image_uri target}"#{width_attr}#{height_attr}>#{fallback}</object>)
    else
      img = %(<img src="#{node.image_uri target}" alt="#{encode_attribute_value node.alt}"#{width_attr}#{height_attr}#{@void_element_slash}>)
    end
  else
    img = %(<img src="#{node.image_uri target}" alt="#{encode_attribute_value node.alt}"#{width_attr}#{height_attr}#{@void_element_slash}>)
  end
  img = %(<a class="image" href="#{node.attr 'link'}"#{(append_link_constraint_attrs node).join}>#{img}</a>) if node.attr? 'link'
  id_attr = node.id ? %( id="#{node.id}") : ''
  classes = ['imageblock']
  classes << (node.attr 'float') if node.attr? 'float'
  classes << %(text-#{node.attr 'align'}) if node.attr? 'align'
  classes << node.role if node.role
  class_attr = %( class="#{classes.join ' '}")
  title_el = node.title? ? %(\n<div class="title">#{node.captioned_title}</div>) : ''
  %(<div#{id_attr}#{class_attr}>
<div class="content">
#{img}
</div>#{title_el}
</div>)
end

#convert_inline_anchor(node) ⇒ Object



1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
# File 'lib/asciidoctor/converter/html5.rb', line 1110

def convert_inline_anchor node
  case node.type
  when :xref
    if (path = node.attributes['path'])
      attrs = (append_link_constraint_attrs node, node.role ? [%( class="#{node.role}")] : []).join
      text = node.text || path
    else
      attrs = node.role ? %( class="#{node.role}") : ''
      unless (text = node.text)
        if AbstractNode === (ref = (@refs ||= node.document.catalog[:refs])[refid = node.attributes['refid']] || (refid.nil_or_empty? ? (top = get_root_document node) : nil))
          if (@resolving_xref ||= (outer = true)) && outer
            if (text = ref.xreftext node.attr 'xrefstyle', nil, true)
              text = text.gsub DropAnchorRx, '' if text.include? '<a'
            else
              text = top ? '[^top]' : %([#{refid}])
            end
            @resolving_xref = nil
          else
            text = top ? '[^top]' : %([#{refid}])
          end
        else
          text = %([#{refid}])
        end
      end
    end
    %(<a href="#{node.target}"#{attrs}>#{text}</a>)
  when :ref
    %(<a id="#{node.id}"></a>)
  when :link
    attrs = node.id ? [%( id="#{node.id}")] : []
    attrs << %( class="#{node.role}") if node.role
    attrs << %( title="#{node.attr 'title'}") if node.attr? 'title'
    %(<a href="#{node.target}"#{(append_link_constraint_attrs node, attrs).join}>#{node.text}</a>)
  when :bibref
    %(<a id="#{node.id}"></a>[#{node.reftext || node.id}])
  else
    logger.warn %(unknown anchor type: #{node.type.inspect})
    nil
  end
end

#convert_inline_break(node) ⇒ Object



1151
1152
1153
# File 'lib/asciidoctor/converter/html5.rb', line 1151

def convert_inline_break node
  %(#{node.text}<br#{@void_element_slash}>)
end

#convert_inline_button(node) ⇒ Object



1155
1156
1157
# File 'lib/asciidoctor/converter/html5.rb', line 1155

def convert_inline_button node
  %(<b class="button">#{node.text}</b>)
end

#convert_inline_callout(node) ⇒ Object



1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
# File 'lib/asciidoctor/converter/html5.rb', line 1159

def convert_inline_callout node
  if node.document.attr? 'icons', 'font'
    %(<i class="conum" data-value="#{node.text}"></i><b>(#{node.text})</b>)
  elsif node.document.attr? 'icons'
    src = node.icon_uri("callouts/#{node.text}")
    %(<img src="#{src}" alt="#{node.text}"#{@void_element_slash}>)
  elsif ::Array === (guard = node.attributes['guard'])
    %(&lt;!--<b class="conum">(#{node.text})</b>--&gt;)
  else
    %(#{guard}<b class="conum">(#{node.text})</b>)
  end
end

#convert_inline_footnote(node) ⇒ Object



1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
# File 'lib/asciidoctor/converter/html5.rb', line 1172

def convert_inline_footnote node
  if (index = node.attr 'index')
    if node.type == :xref
      %(<sup class="footnoteref">[<a class="footnote" href="#_footnotedef_#{index}" title="View footnote.">#{index}</a>]</sup>)
    else
      id_attr = node.id ? %( id="_footnote_#{node.id}") : ''
      %(<sup class="footnote"#{id_attr}>[<a id="_footnoteref_#{index}" class="footnote" href="#_footnotedef_#{index}" title="View footnote.">#{index}</a>]</sup>)
    end
  elsif node.type == :xref
    %(<sup class="footnoteref red" title="Unresolved footnote reference.">[#{node.text}]</sup>)
  end
end

#convert_inline_image(node) ⇒ Object



1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
# File 'lib/asciidoctor/converter/html5.rb', line 1185

def convert_inline_image node
  target = node.target
  if (type = node.type || 'image') == 'icon'
    if (icons = node.document.attr 'icons') == 'font'
      i_class_attr_val = %(fa fa-#{target})
      i_class_attr_val = %(#{i_class_attr_val} fa-#{node.attr 'size'}) if node.attr? 'size'
      if node.attr? 'flip'
        i_class_attr_val = %(#{i_class_attr_val} fa-flip-#{node.attr 'flip'})
      elsif node.attr? 'rotate'
        i_class_attr_val = %(#{i_class_attr_val} fa-rotate-#{node.attr 'rotate'})
      end
      attrs = (node.attr? 'title') ? %( title="#{node.attr 'title'}") : ''
      img = %(<i class="#{i_class_attr_val}"#{attrs}></i>)
    elsif icons
      attrs = (node.attr? 'width') ? %( width="#{node.attr 'width'}") : ''
      attrs = %(#{attrs} height="#{node.attr 'height'}") if node.attr? 'height'
      attrs = %(#{attrs} title="#{node.attr 'title'}") if node.attr? 'title'
      img = %(<img src="#{node.icon_uri target}" alt="#{encode_attribute_value node.alt}"#{attrs}#{@void_element_slash}>)
    else
      img = %([#{node.alt}&#93;)
    end
  else
    attrs = (node.attr? 'width') ? %( width="#{node.attr 'width'}") : ''
    attrs = %(#{attrs} height="#{node.attr 'height'}") if node.attr? 'height'
    attrs = %(#{attrs} title="#{node.attr 'title'}") if node.attr? 'title'
    if ((node.attr? 'format', 'svg') || (target.include? '.svg')) && node.document.safe < SafeMode::SECURE
      if node.option? 'inline'
        img = (read_svg_contents node, target) || %(<span class="alt">#{node.alt}</span>)
      elsif node.option? 'interactive'
        fallback = (node.attr? 'fallback') ? %(<img src="#{node.image_uri node.attr 'fallback'}" alt="#{encode_attribute_value node.alt}"#{attrs}#{@void_element_slash}>) : %(<span class="alt">#{node.alt}</span>)
        img = %(<object type="image/svg+xml" data="#{node.image_uri target}"#{attrs}>#{fallback}</object>)
      else
        img = %(<img src="#{node.image_uri target}" alt="#{encode_attribute_value node.alt}"#{attrs}#{@void_element_slash}>)
      end
    else
      img = %(<img src="#{node.image_uri target}" alt="#{encode_attribute_value node.alt}"#{attrs}#{@void_element_slash}>)
    end
  end
  img = %(<a class="image" href="#{node.attr 'link'}"#{(append_link_constraint_attrs node).join}>#{img}</a>) if node.attr? 'link'
  class_attr_val = type
  if (role = node.role)
    class_attr_val = (node.attr? 'float') ? %(#{class_attr_val} #{node.attr 'float'} #{role}) : %(#{class_attr_val} #{role})
  elsif node.attr? 'float'
    class_attr_val = %(#{class_attr_val} #{node.attr 'float'})
  end
  %(<span class="#{class_attr_val}">#{img}</span>)
end

#convert_inline_indexterm(node) ⇒ Object



1233
1234
1235
# File 'lib/asciidoctor/converter/html5.rb', line 1233

def convert_inline_indexterm node
  node.type == :visible ? node.text : ''
end

#convert_inline_kbd(node) ⇒ Object



1237
1238
1239
1240
1241
1242
1243
# File 'lib/asciidoctor/converter/html5.rb', line 1237

def convert_inline_kbd node
  if (keys = node.attr 'keys').size == 1
    %(<kbd>#{keys[0]}</kbd>)
  else
    %(<span class="keyseq"><kbd>#{keys.join '</kbd>+<kbd>'}</kbd></span>)
  end
end

#convert_inline_menu(node) ⇒ Object



1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
# File 'lib/asciidoctor/converter/html5.rb', line 1245

def convert_inline_menu node
  caret = (node.document.attr? 'icons', 'font') ? '&#160;<i class="fa fa-angle-right caret"></i> ' : '&#160;<b class="caret">&#8250;</b> '
  submenu_joiner = %(</b>#{caret}<b class="submenu">)
  menu = node.attr 'menu'
  if (submenus = node.attr 'submenus').empty?
    if (menuitem = node.attr 'menuitem')
      %(<span class="menuseq"><b class="menu">#{menu}</b>#{caret}<b class="menuitem">#{menuitem}</b></span>)
    else
      %(<b class="menuref">#{menu}</b>)
    end
  else
    %(<span class="menuseq"><b class="menu">#{menu}</b>#{caret}<b class="submenu">#{submenus.join submenu_joiner}</b>#{caret}<b class="menuitem">#{node.attr 'menuitem'}</b></span>)
  end
end

#convert_inline_quoted(node) ⇒ Object



1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
# File 'lib/asciidoctor/converter/html5.rb', line 1260

def convert_inline_quoted node
  open, close, tag = QUOTE_TAGS[node.type]
  if node.id
    class_attr = node.role ? %( class="#{node.role}") : ''
    if tag
      %(#{open.chop} id="#{node.id}"#{class_attr}>#{node.text}#{close})
    else
      %(<span id="#{node.id}"#{class_attr}>#{open}#{node.text}#{close}</span>)
    end
  elsif node.role
    if tag
      %(#{open.chop} class="#{node.role}">#{node.text}#{close})
    else
      %(<span class="#{node.role}">#{open}#{node.text}#{close}</span>)
    end
  else
    %(#{open}#{node.text}#{close})
  end
end

#convert_listing(node) ⇒ Object



656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
# File 'lib/asciidoctor/converter/html5.rb', line 656

def convert_listing node
  nowrap = (node.option? 'nowrap') || !(node.document.attr? 'prewrap')
  if node.style == 'source'
    lang = node.attr 'language'
    if (syntax_hl = node.document.syntax_highlighter)
      opts = syntax_hl.highlight? ? {
        css_mode: ((doc_attrs = node.document.attributes)[%(#{syntax_hl.name}-css)] || :class).to_sym,
        style: doc_attrs[%(#{syntax_hl.name}-style)],
      } : {}
      opts[:nowrap] = nowrap
    else
      pre_open = %(<pre class="highlight#{nowrap ? ' nowrap' : ''}"><code#{lang ? %[ class="language-#{lang}" data-lang="#{lang}"] : ''}>)
      pre_close = '</code></pre>'
    end
  else
    pre_open = %(<pre#{nowrap ? ' class="nowrap"' : ''}>)
    pre_close = '</pre>'
  end
  id_attribute = node.id ? %( id="#{node.id}") : ''
  title_element = node.title? ? %(<div class="title">#{node.captioned_title}</div>\n) : ''
  %(<div#{id_attribute} class="listingblock#{(role = node.role) ? " #{role}" : ''}">
#{title_element}<div class="content">
#{syntax_hl ? (syntax_hl.format node, lang, opts) : pre_open + (node.content || '') + pre_close}
</div>
</div>)
end

#convert_literal(node) ⇒ Object



683
684
685
686
687
688
689
690
691
692
# File 'lib/asciidoctor/converter/html5.rb', line 683

def convert_literal node
  id_attribute = node.id ? %( id="#{node.id}") : ''
  title_element = node.title? ? %(<div class="title">#{node.title}</div>\n) : ''
  nowrap = !(node.document.attr? 'prewrap') || (node.option? 'nowrap')
  %(<div#{id_attribute} class="literalblock#{(role = node.role) ? " #{role}" : ''}">
#{title_element}<div class="content">
<pre#{nowrap ? ' class="nowrap"' : ''}>#{node.content}</pre>
</div>
</div>)
end

#convert_olist(node) ⇒ Object



716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
# File 'lib/asciidoctor/converter/html5.rb', line 716

def convert_olist node
  result = []
  id_attribute = node.id ? %( id="#{node.id}") : ''
  classes = ['olist', node.style, node.role].compact
  class_attribute = %( class="#{classes.join ' '}")

  result << %(<div#{id_attribute}#{class_attribute}>)
  result << %(<div class="title">#{node.title}</div>) if node.title?

  type_attribute = (keyword = node.list_marker_keyword) ? %( type="#{keyword}") : ''
  start_attribute = (node.attr? 'start') ? %( start="#{node.attr 'start'}") : ''
  reversed_attribute = (node.option? 'reversed') ? (append_boolean_attribute 'reversed', @xml_mode) : ''
  result << %(<ol class="#{node.style}"#{type_attribute}#{start_attribute}#{reversed_attribute}>)

  node.items.each do |item|
    if item.id
      result << %(<li id="#{item.id}"#{item.role ? %[ class="#{item.role}"] : ''}>)
    elsif item.role
      result << %(<li class="#{item.role}">)
    else
      result << '<li>'
    end
    result << %(<p>#{item.text}</p>)
    result << item.content if item.blocks?
    result << '</li>'
  end

  result << '</ol>'
  result << '</div>'
  result.join LF
end

#convert_open(node) ⇒ Object



748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
# File 'lib/asciidoctor/converter/html5.rb', line 748

def convert_open node
  if (style = node.style) == 'abstract'
    if node.parent == node.document && node.document.doctype == 'book'
      logger.warn 'abstract block cannot be used in a document without a title when doctype is book. Excluding block content.'
      ''
    else
      id_attr = node.id ? %( id="#{node.id}") : ''
      title_el = node.title? ? %(<div class="title">#{node.title}</div>\n) : ''
      %(<div#{id_attr} class="quoteblock abstract#{(role = node.role) ? " #{role}" : ''}">
#{title_el}<blockquote>
#{node.content}
</blockquote>
</div>)
    end
  elsif style == 'partintro' && (node.level > 0 || node.parent.context != :section || node.document.doctype != 'book')
    logger.error 'partintro block can only be used when doctype is book and must be a child of a book part. Excluding block content.'
    ''
  else
    id_attr = node.id ? %( id="#{node.id}") : ''
    title_el = node.title? ? %(<div class="title">#{node.title}</div>\n) : ''
    %(<div#{id_attr} class="openblock#{style && style != 'open' ? " #{style}" : ''}#{(role = node.role) ? " #{role}" : ''}">
#{title_el}<div class="content">
#{node.content}
</div>
</div>)
  end
end

#convert_outline(node, opts = {}) ⇒ Object



341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
# File 'lib/asciidoctor/converter/html5.rb', line 341

def convert_outline node, opts = {}
  return unless node.sections?
  sectnumlevels = opts[:sectnumlevels] || (node.document.attributes['sectnumlevels'] || 3).to_i
  toclevels = opts[:toclevels] || (node.document.attributes['toclevels'] || 2).to_i
  sections = node.sections
  # FIXME top level is incorrect if a multipart book starts with a special section defined at level 0
  result = [%(<ul class="sectlevel#{sections[0].level}">)]
  sections.each do |section|
    slevel = section.level
    if section.caption
      stitle = section.captioned_title
    elsif section.numbered && slevel <= sectnumlevels
      if slevel < 2 && node.document.doctype == 'book'
        case section.sectname
        when 'chapter'
          stitle =  %(#{(signifier = node.document.attributes['chapter-signifier']) ? "#{signifier} " : ''}#{section.sectnum} #{section.title})
        when 'part'
          stitle =  %(#{(signifier = node.document.attributes['part-signifier']) ? "#{signifier} " : ''}#{section.sectnum nil, ':'} #{section.title})
        else
          stitle = %(#{section.sectnum} #{section.title})
        end
      else
        stitle = %(#{section.sectnum} #{section.title})
      end
    else
      stitle = section.title
    end
    stitle = stitle.gsub DropAnchorRx, '' if stitle.include? '<a'
    if slevel < toclevels && (child_toc_level = convert_outline section, toclevels: toclevels, sectnumlevels: sectnumlevels)
      result << %(<li><a href="##{section.id}">#{stitle}</a>)
      result << child_toc_level
      result << '</li>'
    else
      result << %(<li><a href="##{section.id}">#{stitle}</a></li>)
    end
  end
  result << '</ul>'
  result.join LF
end

#convert_page_break(node) ⇒ Object



776
777
778
# File 'lib/asciidoctor/converter/html5.rb', line 776

def convert_page_break node
  '<div style="page-break-after: always;"></div>'
end

#convert_paragraph(node) ⇒ Object



780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
# File 'lib/asciidoctor/converter/html5.rb', line 780

def convert_paragraph node
  if node.role
    attributes = %(#{node.id ? %[ id="#{node.id}"] : ''} class="paragraph #{node.role}")
  elsif node.id
    attributes = %( id="#{node.id}" class="paragraph")
  else
    attributes = ' class="paragraph"'
  end
  if node.title?
    %(<div#{attributes}>
<div class="title">#{node.title}</div>
<p>#{node.content}</p>
</div>)
  else
    %(<div#{attributes}>
<p>#{node.content}</p>
</div>)
  end
end

#convert_preamble(node) ⇒ Object



802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
# File 'lib/asciidoctor/converter/html5.rb', line 802

def convert_preamble node
  if (doc = node.document).attr?('toc-placement', 'preamble') && doc.sections? && (doc.attr? 'toc')
    toc = %(
<div id="toc" class="#{doc.attr 'toc-class', 'toc'}">
<div id="toctitle">#{doc.attr 'toc-title'}</div>
#{doc.converter.convert doc, 'outline'}
</div>)
  else
    toc = ''
  end

  %(<div id="preamble">
<div class="sectionbody">
#{node.content}
</div>#{toc}
</div>)
end

#convert_quote(node) ⇒ Object



820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
# File 'lib/asciidoctor/converter/html5.rb', line 820

def convert_quote node
  id_attribute = node.id ? %( id="#{node.id}") : ''
  classes = ['quoteblock', node.role].compact
  class_attribute = %( class="#{classes.join ' '}")
  title_element = node.title? ? %(\n<div class="title">#{node.title}</div>) : ''
  attribution = (node.attr? 'attribution') ? (node.attr 'attribution') : nil
  citetitle = (node.attr? 'citetitle') ? (node.attr 'citetitle') : nil
  if attribution || citetitle
    cite_element = citetitle ? %(<cite>#{citetitle}</cite>) : ''
    attribution_text = attribution ? %(&#8212; #{attribution}#{citetitle ? "<br#{@void_element_slash}>\n" : ''}) : ''
    attribution_element = %(\n<div class="attribution">\n#{attribution_text}#{cite_element}\n</div>)
  else
    attribution_element = ''
  end

  %(<div#{id_attribute}#{class_attribute}>#{title_element}
<blockquote>
#{node.content}
</blockquote>#{attribution_element}
</div>)
end

#convert_section(node) ⇒ Object



381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
# File 'lib/asciidoctor/converter/html5.rb', line 381

def convert_section node
  doc_attrs = node.document.attributes
  level = node.level
  if node.caption
    title = node.captioned_title
  elsif node.numbered && level <= (doc_attrs['sectnumlevels'] || 3).to_i
    if level < 2 && node.document.doctype == 'book'
      case node.sectname
      when 'chapter'
        title = %(#{(signifier = doc_attrs['chapter-signifier']) ? "#{signifier} " : ''}#{node.sectnum} #{node.title})
      when 'part'
        title = %(#{(signifier = doc_attrs['part-signifier']) ? "#{signifier} " : ''}#{node.sectnum nil, ':'} #{node.title})
      else
        title = %(#{node.sectnum} #{node.title})
      end
    else
      title = %(#{node.sectnum} #{node.title})
    end
  else
    title = node.title
  end
  if node.id
    id_attr = %( id="#{id = node.id}")
    if doc_attrs['sectlinks']
      title = %(<a class="link" href="##{id}">#{title}</a>)
    end
    if doc_attrs['sectanchors']
      # QUESTION should we add a font-based icon in anchor if icons=font?
      if doc_attrs['sectanchors'] == 'after'
        title = %(#{title}<a class="anchor" href="##{id}"></a>)
      else
        title = %(<a class="anchor" href="##{id}"></a>#{title})
      end
    end
  else
    id_attr = ''
  end
  if level == 0
    %(<h1#{id_attr} class="sect0#{(role = node.role) ? " #{role}" : ''}">#{title}</h1>
#{node.content})
  else
    %(<div class="sect#{level}#{(role = node.role) ? " #{role}" : ''}">
<h#{level + 1}#{id_attr}>#{title}</h#{level + 1}>
#{level == 1 ? %[<div class="sectionbody">
#{node.content}
</div>] : node.content}
</div>)
  end
end

#convert_sidebar(node) ⇒ Object



846
847
848
849
850
851
852
853
854
# File 'lib/asciidoctor/converter/html5.rb', line 846

def convert_sidebar node
  id_attribute = node.id ? %( id="#{node.id}") : ''
  title_element = node.title? ? %(<div class="title">#{node.title}</div>\n) : ''
  %(<div#{id_attribute} class="sidebarblock#{(role = node.role) ? " #{role}" : ''}">
<div class="content">
#{title_element}#{node.content}
</div>
</div>)
end

#convert_stem(node) ⇒ Object



694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
# File 'lib/asciidoctor/converter/html5.rb', line 694

def convert_stem node
  id_attribute = node.id ? %( id="#{node.id}") : ''
  title_element = node.title? ? %(<div class="title">#{node.title}</div>\n) : ''
  open, close = BLOCK_MATH_DELIMITERS[style = node.style.to_sym]
  if (equation = node.content)
    if style == :asciimath && (equation.include? LF)
      br = %(#{LF}<br#{@void_element_slash}>)
      equation = equation.gsub(StemBreakRx) { %(#{close}#{br * (($&.count LF) - 1)}#{LF}#{open}) }
    end
    unless (equation.start_with? open) && (equation.end_with? close)
      equation = %(#{open}#{equation}#{close})
    end
  else
    equation = ''
  end
  %(<div#{id_attribute} class="stemblock#{(role = node.role) ? " #{role}" : ''}">
#{title_element}<div class="content">
#{equation}
</div>
</div>)
end

#convert_table(node) ⇒ Object



856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
# File 'lib/asciidoctor/converter/html5.rb', line 856

def convert_table node
  result = []
  id_attribute = node.id ? %( id="#{node.id}") : ''
  frame = 'ends' if (frame = node.attr 'frame', 'all', 'table-frame') == 'topbot'
  classes = ['tableblock', %(frame-#{frame}), %(grid-#{node.attr 'grid', 'all', 'table-grid'})]
  if (stripes = node.attr 'stripes', nil, 'table-stripes')
    classes << %(stripes-#{stripes})
  end
  style_attribute = ''
  if (autowidth = node.option? 'autowidth') && !(node.attr? 'width')
    classes << 'fit-content'
  elsif (tablewidth = node.attr 'tablepcwidth') == 100
    classes << 'stretch'
  else
    style_attribute = %( style="width: #{tablewidth}%;")
  end
  classes << (node.attr 'float') if node.attr? 'float'
  if (role = node.role)
    classes << role
  end
  class_attribute = %( class="#{classes.join ' '}")

  result << %(<table#{id_attribute}#{class_attribute}#{style_attribute}>)
  result << %(<caption class="title">#{node.captioned_title}</caption>) if node.title?
  if (node.attr 'rowcount') > 0
    slash = @void_element_slash
    result << '<colgroup>'
    if autowidth
      result += (Array.new node.columns.size, %(<col#{slash}>))
    else
      node.columns.each do |col|
        result << ((col.option? 'autowidth') ? %(<col#{slash}>) : %(<col style="width: #{col.attr 'colpcwidth'}%;"#{slash}>))
      end
    end
    result << '</colgroup>'
    node.rows.to_h.each do |tsec, rows|
      next if rows.empty?
      result << %(<t#{tsec}>)
      rows.each do |row|
        result << '<tr>'
        row.each do |cell|
          if tsec == :head
            cell_content = cell.text
          else
            case cell.style
            when :asciidoc
              cell_content = %(<div class="content">#{cell.content}</div>)
            when :literal
              cell_content = %(<div class="literal"><pre>#{cell.text}</pre></div>)
            else
              cell_content = (cell_content = cell.content).empty? ? '' : %(<p class="tableblock">#{cell_content.join '</p>
<p class="tableblock">'}</p>)
            end
          end

          cell_tag_name = (tsec == :head || cell.style == :header ? 'th' : 'td')
          cell_class_attribute = %( class="tableblock halign-#{cell.attr 'halign'} valign-#{cell.attr 'valign'}")
          cell_colspan_attribute = cell.colspan ? %( colspan="#{cell.colspan}") : ''
          cell_rowspan_attribute = cell.rowspan ? %( rowspan="#{cell.rowspan}") : ''
          cell_style_attribute = (node.document.attr? 'cellbgcolor') ? %( style="background-color: #{node.document.attr 'cellbgcolor'};") : ''
          result << %(<#{cell_tag_name}#{cell_class_attribute}#{cell_colspan_attribute}#{cell_rowspan_attribute}#{cell_style_attribute}>#{cell_content}</#{cell_tag_name}>)
        end
        result << '</tr>'
      end
      result << %(</t#{tsec}>)
    end
  end
  result << '</table>'
  result.join LF
end

#convert_thematic_break(node) ⇒ Object



842
843
844
# File 'lib/asciidoctor/converter/html5.rb', line 842

def convert_thematic_break node
  %(<hr#{@void_element_slash}>)
end

#convert_toc(node) ⇒ Object



927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
# File 'lib/asciidoctor/converter/html5.rb', line 927

def convert_toc node
  unless (doc = node.document).attr?('toc-placement', 'macro') && doc.sections? && (doc.attr? 'toc')
    return '<!-- toc disabled -->'
  end

  if node.id
    id_attr = %( id="#{node.id}")
    title_id_attr = %( id="#{node.id}title")
  else
    id_attr = ' id="toc"'
    title_id_attr = ' id="toctitle"'
  end
  title = node.title? ? node.title : (doc.attr 'toc-title')
  levels = (node.attr? 'levels') ? (node.attr 'levels').to_i : nil
  role = node.role? ? node.role : (doc.attr 'toc-class', 'toc')

  %(<div#{id_attr} class="#{role}">
<div#{title_id_attr} class="title">#{title}</div>
#{doc.converter.convert doc, 'outline', toclevels: levels}
</div>)
end

#convert_ulist(node) ⇒ Object



949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
# File 'lib/asciidoctor/converter/html5.rb', line 949

def convert_ulist node
  result = []
  id_attribute = node.id ? %( id="#{node.id}") : ''
  div_classes = ['ulist', node.style, node.role].compact
  marker_checked = marker_unchecked = ''
  if (checklist = node.option? 'checklist')
    div_classes.unshift div_classes.shift, 'checklist'
    ul_class_attribute = ' class="checklist"'
    if node.option? 'interactive'
      if @xml_mode
        marker_checked = '<input type="checkbox" data-item-complete="1" checked="checked"/> '
        marker_unchecked = '<input type="checkbox" data-item-complete="0"/> '
      else
        marker_checked = '<input type="checkbox" data-item-complete="1" checked> '
        marker_unchecked = '<input type="checkbox" data-item-complete="0"> '
      end
    elsif node.document.attr? 'icons', 'font'
      marker_checked = '<i class="fa fa-check-square-o"></i> '
      marker_unchecked = '<i class="fa fa-square-o"></i> '
    else
      marker_checked = '&#10003; '
      marker_unchecked = '&#10063; '
    end
  else
    ul_class_attribute = node.style ? %( class="#{node.style}") : ''
  end
  result << %(<div#{id_attribute} class="#{div_classes.join ' '}">)
  result << %(<div class="title">#{node.title}</div>) if node.title?
  result << %(<ul#{ul_class_attribute}>)

  node.items.each do |item|
    if item.id
      result << %(<li id="#{item.id}"#{item.role ? %[ class="#{item.role}"] : ''}>)
    elsif item.role
      result << %(<li class="#{item.role}">)
    else
      result << '<li>'
    end
    if checklist && (item.attr? 'checkbox')
      result << %(<p>#{(item.attr? 'checked') ? marker_checked : marker_unchecked}#{item.text}</p>)
    else
      result << %(<p>#{item.text}</p>)
    end
    result << item.content if item.blocks?
    result << '</li>'
  end

  result << '</ul>'
  result << '</div>'
  result.join LF
end

#convert_verse(node) ⇒ Object



1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
# File 'lib/asciidoctor/converter/html5.rb', line 1001

def convert_verse node
  id_attribute = node.id ? %( id="#{node.id}") : ''
  classes = ['verseblock', node.role].compact
  class_attribute = %( class="#{classes.join ' '}")
  title_element = node.title? ? %(\n<div class="title">#{node.title}</div>) : ''
  attribution = (node.attr? 'attribution') ? (node.attr 'attribution') : nil
  citetitle = (node.attr? 'citetitle') ? (node.attr 'citetitle') : nil
  if attribution || citetitle
    cite_element = citetitle ? %(<cite>#{citetitle}</cite>) : ''
    attribution_text = attribution ? %(&#8212; #{attribution}#{citetitle ? "<br#{@void_element_slash}>\n" : ''}) : ''
    attribution_element = %(\n<div class="attribution">\n#{attribution_text}#{cite_element}\n</div>)
  else
    attribution_element = ''
  end

  %(<div#{id_attribute}#{class_attribute}>#{title_element}
<pre class="content">#{node.content}</pre>#{attribution_element}
</div>)
end

#convert_video(node) ⇒ Object



1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
# File 'lib/asciidoctor/converter/html5.rb', line 1021

def convert_video node
  xml = @xml_mode
  id_attribute = node.id ? %( id="#{node.id}") : ''
  classes = ['videoblock']
  classes << (node.attr 'float') if node.attr? 'float'
  classes << %(text-#{node.attr 'align'}) if node.attr? 'align'
  classes << node.role if node.role
  class_attribute = %( class="#{classes.join ' '}")
  title_element = node.title? ? %(\n<div class="title">#{node.title}</div>) : ''
  width_attribute = (node.attr? 'width') ? %( width="#{node.attr 'width'}") : ''
  height_attribute = (node.attr? 'height') ? %( height="#{node.attr 'height'}") : ''
  case node.attr 'poster'
  when 'vimeo'
    unless (asset_uri_scheme = (node.document.attr 'asset-uri-scheme', 'https')).empty?
      asset_uri_scheme = %(#{asset_uri_scheme}:)
    end
    start_anchor = (node.attr? 'start') ? %(#at=#{node.attr 'start'}) : ''
    delimiter = ['?']
    target, hash = (node.attr 'target').split '/', 2
    hash_param = (hash ||= node.attr 'hash') ? %(#{delimiter.pop || '&amp;'}h=#{hash}) : ''
    autoplay_param = (node.option? 'autoplay') ? %(#{delimiter.pop || '&amp;'}autoplay=1) : ''
    loop_param = (node.option? 'loop') ? %(#{delimiter.pop || '&amp;'}loop=1) : ''
    muted_param = (node.option? 'muted') ? %(#{delimiter.pop || '&amp;'}muted=1) : ''
    %(<div#{id_attribute}#{class_attribute}>#{title_element}
<div class="content">
<iframe#{width_attribute}#{height_attribute} src="#{asset_uri_scheme}//player.vimeo.com/video/#{target}#{hash_param}#{autoplay_param}#{loop_param}#{muted_param}#{start_anchor}" frameborder="0"#{(node.option? 'nofullscreen') ? '' : (append_boolean_attribute 'allowfullscreen', xml)}></iframe>
</div>
</div>)
  when 'youtube'
    unless (asset_uri_scheme = (node.document.attr 'asset-uri-scheme', 'https')).empty?
      asset_uri_scheme = %(#{asset_uri_scheme}:)
    end
    rel_param_val = (node.option? 'related') ? 1 : 0
    # NOTE start and end must be seconds (t parameter allows XmYs where X is minutes and Y is seconds)
    start_param = (node.attr? 'start') ? %(&amp;start=#{node.attr 'start'}) : ''
    end_param = (node.attr? 'end') ? %(&amp;end=#{node.attr 'end'}) : ''
    autoplay_param = (node.option? 'autoplay') ? '&amp;autoplay=1' : ''
    loop_param = (has_loop_param = node.option? 'loop') ? '&amp;loop=1' : ''
    mute_param = (node.option? 'muted') ? '&amp;mute=1' : ''
    controls_param = (node.option? 'nocontrols') ? '&amp;controls=0' : ''
    # cover both ways of controlling fullscreen option
    if node.option? 'nofullscreen'
      fs_param = '&amp;fs=0'
      fs_attribute = ''
    else
      fs_param = ''
      fs_attribute = append_boolean_attribute 'allowfullscreen', xml
    end
    modest_param = (node.option? 'modest') ? '&amp;modestbranding=1' : ''
    theme_param = (node.attr? 'theme') ? %(&amp;theme=#{node.attr 'theme'}) : ''
    hl_param = (node.attr? 'lang') ? %(&amp;hl=#{node.attr 'lang'}) : ''

    # parse video_id/list_id syntax where list_id (i.e., playlist) is optional
    target, list = (node.attr 'target').split '/', 2
    if (list ||= (node.attr 'list'))
      list_param = %(&amp;list=#{list})
    else
      # parse dynamic playlist syntax: video_id1,video_id2,...
      target, playlist = target.split ',', 2
      if (playlist ||= (node.attr 'playlist'))
        # INFO playlist bar doesn't appear in Firefox unless showinfo=1 and modestbranding=1
        list_param = %(&amp;playlist=#{target},#{playlist})
      else
        # NOTE for loop to work, playlist must be specified; use VIDEO_ID if there's no explicit playlist
        list_param = has_loop_param ? %(&amp;playlist=#{target}) : ''
      end
    end

    %(<div#{id_attribute}#{class_attribute}>#{title_element}
<div class="content">
<iframe#{width_attribute}#{height_attribute} src="#{asset_uri_scheme}//www.youtube.com/embed/#{target}?rel=#{rel_param_val}#{start_param}#{end_param}#{autoplay_param}#{loop_param}#{mute_param}#{controls_param}#{list_param}#{fs_param}#{modest_param}#{theme_param}#{hl_param}" frameborder="0"#{fs_attribute}></iframe>
</div>
</div>)
  else
    poster_attribute = (val = node.attr 'poster').nil_or_empty? ? '' : %( poster="#{node.media_uri val}")
    preload_attribute = (val = node.attr 'preload').nil_or_empty? ? '' : %( preload="#{val}")
    start_t = node.attr 'start'
    end_t = node.attr 'end'
    time_anchor = (start_t || end_t) ? %(#t=#{start_t || ''}#{end_t ? ",#{end_t}" : ''}) : ''
    %(<div#{id_attribute}#{class_attribute}>#{title_element}
<div class="content">
<video src="#{node.media_uri(node.attr 'target')}#{time_anchor}"#{width_attribute}#{height_attribute}#{poster_attribute}#{(node.option? 'autoplay') ? (append_boolean_attribute 'autoplay', xml) : ''}#{(node.option? 'muted') ? (append_boolean_attribute 'muted', xml) : ''}#{(node.option? 'nocontrols') ? '' : (append_boolean_attribute 'controls', xml)}#{(node.option? 'loop') ? (append_boolean_attribute 'loop', xml) : ''}#{preload_attribute}>
Your browser does not support the video tag.
</video>
</div>
</div>)
  end
end

#read_svg_contents(node, target) ⇒ Object

NOTE expose read_svg_contents for Bespoke converter



1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
# File 'lib/asciidoctor/converter/html5.rb', line 1281

def read_svg_contents node, target
  if (svg = node.read_contents target, start: (node.document.attr 'imagesdir'), normalize: true, label: 'SVG', warn_if_empty: true)
    return if svg.empty?
    svg = svg.sub SvgPreambleRx, '' unless svg.start_with? '<svg'
    old_start_tag = new_start_tag = start_tag_match = nil
    # NOTE width, height and style attributes are removed if either width or height is specified
    ['width', 'height'].each do |dim|
      next unless node.attr? dim
      unless new_start_tag
        next if (start_tag_match ||= (svg.match SvgStartTagRx) || :no_match) == :no_match
        new_start_tag = (old_start_tag = start_tag_match[0]).gsub DimensionAttributeRx, ''
      end
      # NOTE a unitless value in HTML is assumed to be px, so we can pass the value straight through
      new_start_tag = %(#{new_start_tag.chop} #{dim}="#{node.attr dim}">)
    end
    svg = %(#{new_start_tag}#{svg[old_start_tag.length..-1]}) if new_start_tag
  end
  svg
end