resolves asciidoctor#241 set data- attributes

examples/data-attributes.adoc

@@ -0,0 +1,29 @@
+// :include: //div[@class="slides"]
+// :header_footer:
+= Data attributes
+:backend: revealjs
+:icons: font
+
+== Reference
+
+https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
+
+// .paragraphs
+== Paragraphs
+
+[.fragment.highlight-red,data-fragment-index=1]
+text1
+
+[.fragment.highlight-red,data-fragment-index=0]
+text2
+
+[.fragment.highlight-red,data-fragment-index=1]
+text3
+
+// .inline-images
+== Inline images
+:imagesdir: images
+
+image:cute-cat-1.jpg[cute-cat-laying,role="fragment fade-in",data-fragment-index=3]
+image:cute-cat-2.jpg[cute-cat-yawning,role="fragment fade-in",data-fragment-index=1]
+image:cute-cat-3.jpg[cute-cat-melting,role="fragment fade-in",data-fragment-index=2]

templates/helpers.rb

@@ -72,7 +72,6 @@ def to_valid_slidenumber val
   # @yield The block of Slim/HTML code within the tag (optional).
   # @return [String] a rendered HTML element.
   #
-
   def html_tag(name, attributes = {}, content = nil)
     attrs = attributes.inject([]) do |attrs, (k, v)|
       next attrs if !v || v.nil_or_empty?
@@ -91,6 +90,17 @@ def html_tag(name, attributes = {}, content = nil)
   end
 
 
+  #
+  # Extracts data- attributes from the attributes.
+  # @param attributes [Hash] (default: {})
+  # @return [Hash] a Hash that contains only data- attributes
+  #
+  def data_attrs(attributes)
+    # key can be an Integer (for positional attributes)
+    attributes.select { |key, _| key.to_s.start_with?('data-') }
+  end
+
+
   ##
   # Returns corrected section level.
   #

templates/inline_image.html.slim

@@ -1,4 +1,4 @@
-span class=[@type,role] style=("float: #{attr :float}" if attr? :float)
+= html_tag('span', { :class => [@type, role], :style => ("float: #{attr :float}" if attr? :float) }.merge(data_attrs(@attributes)))
   - if @type == 'icon' && (@document.attr? :icons, 'font')
     - style_class = ["fa fa-#{@target}"]
     - style_class << "fa-#{attr :size}" if attr? :size

templates/paragraph.html.slim

@@ -1,4 +1,4 @@
-.paragraph id=@id class=role
+= html_tag('div', { :id => @id, :class => ['paragraph', role] }.merge(data_attrs(@attributes)))
   - if title?
     .title=title
   - if has_role? 'small'

test/doctest/data-attributes.html

@@ -0,0 +1,34 @@
+<!-- .paragraphs -->
+<section id="_paragraphs">
+  <h2>Paragraphs</h2>
+  <div class="slide-content">
+    <div class="paragraph fragment highlight-red" data-fragment-index="1">
+      <p>text1</p>
+    </div>
+    <div class="paragraph fragment highlight-red" data-fragment-index="0">
+      <p>text2</p>
+    </div>
+    <div class="paragraph fragment highlight-red" data-fragment-index="1">
+      <p>text3</p>
+    </div>
+  </div>
+</section>
+
+<!-- .inline-images -->
+<section id="_inline_images"><h2>Inline images</h2>
+  <div class="slide-content">
+    <div class="paragraph">
+      <p>
+        <span class="image fragment fade-in" data-fragment-index="3">
+          <img src="images/cute-cat-1.jpg" alt="cute-cat-laying"/>
+        </span>
+        <span class="image fragment fade-in" data-fragment-index="1">
+          <img src="images/cute-cat-2.jpg" alt="cute-cat-yawning"/>
+        </span>
+        <span class="image fragment fade-in" data-fragment-index="2">
+          <img src="images/cute-cat-3.jpg" alt="cute-cat-melting"/>
+        </span>
+      </p>
+    </div>
+  </div>
+</section>