From 295c90db780d59b91d6e12399aa63af28e504b6e Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Thu, 30 Dec 2021 15:59:55 +0100 Subject: [PATCH 01/79] Add figure support --- Customization/xsl/topic.xsl | 104 ++++++++++++++++++++++++- Customization/xsl/utility-classes.xsl | 18 +++++ README.md | 4 + insertParameters.xml | 12 +++ plugin.xml | 15 ++++ sample/document.ditamap | 1 + sample/figures.dita | 107 ++++++++++++++++++++++++++ sample/index.dita | 15 ++++ sample/utilities.dita | 6 +- 9 files changed, 278 insertions(+), 4 deletions(-) create mode 100644 sample/figures.dita diff --git a/Customization/xsl/topic.xsl b/Customization/xsl/topic.xsl index 103c396d..dc632b01 100644 --- a/Customization/xsl/topic.xsl +++ b/Customization/xsl/topic.xsl @@ -6,9 +6,10 @@ @@ -115,4 +116,105 @@ + + + + + + + +
+ + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + . + + + + + + + + + + + + . + + + + + + . + + + + + + + +
+ + + + +
+ + +
+ + + + + + + + + border + border-start border-end + border-top + border-bottom + border-top border-bottom + + + diff --git a/Customization/xsl/utility-classes.xsl b/Customization/xsl/utility-classes.xsl index 40689964..c1f03f32 100644 --- a/Customization/xsl/utility-classes.xsl +++ b/Customization/xsl/utility-classes.xsl @@ -19,6 +19,10 @@ + + + + @@ -93,6 +97,12 @@ + + + figure-caption + + + @@ -117,6 +127,14 @@ alert + + figure + + + + figure-img + + carousel diff --git a/README.md b/README.md index 0c0d7a60..a1132a8f 100644 --- a/README.md +++ b/README.md @@ -141,6 +141,10 @@ The HTML output for the following DITA elements can be annotated with common Boo - `bootstrap.css.tabs` – common utility classes for Bootstrap tabbed dialog components - `bootstrap.css.tabs.vertical` – common utility classes for Bootstrap vertical tabbed dialog components - `bootstrap.css.accordion` – common utility classes for Bootstrap accordion components +- `bootstrap.css.figure` – common utility classes for DITA `` elements +- `bootstrap.css.figure.caption` – common utility classes for DITA `` elements within `<fig>` elements +- `bootstrap.css.figure.image` – common utility classes for for DITA `<image>` elements within `<fig>` elements + You can add your own XSLT customizations by creating a new plug-in that extends the DITA Bootstrap XSLT transforms. Just amend `args.xsl` to point to your own XSLT files. An [XSLT template][12] is included within this repository. diff --git a/insertParameters.xml b/insertParameters.xml index c5d563cc..c280c864 100644 --- a/insertParameters.xml +++ b/insertParameters.xml @@ -54,4 +54,16 @@ expression="${bootstrap.css.accordion}" if:set="bootstrap.css.accordion" /> + <param + name="BOOTSTRAP_CSS_FIGURE" + expression="${bootstrap.css.figure}" + if:set="bootstrap.css.figure"/> + <param + name="BOOTSTRAP_CSS_FIGURE_CAPTION" + expression="${bootstrap.css.figure.caption}" + if:set="bootstrap.css.figure.caption"/> + <param + name="BOOTSTRAP_CSS_FIGURE_IMAGE" + expression="${bootstrap.css.figure.image}" + if:set="bootstrap.css.figure.image"/> </dummy> diff --git a/plugin.xml b/plugin.xml index 3298a49c..bd85496b 100755 --- a/plugin.xml +++ b/plugin.xml @@ -84,6 +84,21 @@ type="string" desc="Bootstrap classes for flush accordion components" /> + <param + name="bootstrap.css.figure" + type="string" + desc="Bootstrap classes for figures" + /> + <param + name="bootstrap.css.figure.caption" + type="string" + desc="Bootstrap classes for figure captions" + /> + <param + name="bootstrap.css.figure.image" + type="string" + desc="Bootstrap classes for figure images" + /> </transtype> <feature extension="ant.import" file="build_dita2html5-bootstrap.xml"/> <feature extension="extend.css.process" value="dita-bootstrap.css.copy"/> diff --git a/sample/document.ditamap b/sample/document.ditamap index dc1ed9e7..d80136a7 100644 --- a/sample/document.ditamap +++ b/sample/document.ditamap @@ -25,6 +25,7 @@ </topicmeta> <topicref navtitle="Images" format="dita" type="topic" href="images.dita"/> <topicref navtitle="Tables" format="dita" type="topic" href="tables.dita"/> + <topicref navtitle="Figures" format="dita" type="topic" href="figures.dita"/> </chapter> <chapter> <topicmeta> diff --git a/sample/figures.dita b/sample/figures.dita new file mode 100644 index 00000000..4bff41fe --- /dev/null +++ b/sample/figures.dita @@ -0,0 +1,107 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd"> +<!-- Within the sample documentation, where necessary, the texts describing the + usage of each component have been copied directly from the official Bootstrap + 5.0 documentation (found at https://getbootstrap.com/docs/5.0), however DITA + markup is used throughout the examples describing how to implement these + components correctly using outputclass. --> +<topic id="figures"> + <title>Figures + + Documentation and examples for displaying related images and text with the figure component in Bootstrap. +

Anytime you need to display a piece of content—like an image with an optional caption, consider + using a DITA fig element. Bootstrap CSS classes class="figure" , + class="figure-img" and class="figure-caption" are + automatically included to the output to provide some baseline styles for the HTML5 figure and figcaption elements. +

+ + + + + Figure + CSS + outputclass + + fig + + + + +
+ Example +

By default figure elements are styled as shown:

+
+ + + A caption for the image. + + + + <fig> + <title>A caption for the image.</title> + <image href="..."/> +</fig> +
+ Aligning text +

The figure’s caption can be aligned using the Bootstrap text utilities.

+
+ + + A caption for the image. + + + + <fig> + <title outputclass="text-end">A caption for the image.</title> + <image href="..."/> +</fig> + +
+ Adding borders +

Use the DITA frame attribute to add borders to a fig.

+
+ + + All Borders + frame="all" + +

+ + Top and Bottom Borders + frame="topbot" + +

+ + Side Borders + frame="sides" + +

+ + Top Border only + frame="top" + +

+ + Bottom Border Only + frame="bottom" + + + <fig frame="all"> + ... +</fig> +<fig frame="topbot"> + ... +</fig> +<fig frame="sides"> + ... +</fig> +<fig frame="top"> + ... +</fig> +<fig frame="bottom"> + ... +</fig> + + + + diff --git a/sample/index.dita b/sample/index.dita index 114d4682..85aaa819 100644 --- a/sample/index.dita +++ b/sample/index.dita @@ -208,6 +208,9 @@ --bootstrap.css.tabs --bootstrap.css.tabs.vertical --bootstrap.css.accordion + --bootstrap.css.figure + --bootstrap.css.figure.caption + --bootstrap.css.figure.image

The HTML output for the following DITA elements can be annotated with common Bootstrap utility classes for borders, --bootstrap.css.header – common Bootstrap utility classes for DITA title elements +

  • + --bootstrap.css.figure – common Bootstrap utility classes for DITA + fig elements +
    • +
  • + --bootstrap.css.figure.caption – common Bootstrap utility classes for DITA + title elements within fig elements +
    • +
  • + --bootstrap.css.figure.image – common Bootstrap utility classes for DITA + image elements within fig elements +
  • --bootstrap.css.card – common utility classes for Bootstrap card components diff --git a/sample/utilities.dita b/sample/utilities.dita index 3a3e55c0..da2c9437 100644 --- a/sample/utilities.dita +++ b/sample/utilities.dita @@ -23,7 +23,7 @@ -
    +
    Border

    Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

    @@ -39,7 +39,7 @@ <ph outputclass="border-end">...</ph> <ph outputclass="border-bottom">...</ph> <ph outputclass="border-start">...</ph> -
    +
    Colors

    Colorize text with color utilities

    @@ -71,7 +71,7 @@ <section outputclass="text-white bg-dark">.text-white</section> <section outputclass="text-black-50">.text-black-50</section> <section outputclass="text-white-50 bg-dark">.text-white-50</section> -
    +
    Background color

    Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities do not set color, so in some cases you’ll want to use From 0a9a3a9c17286a0b84f4cdedbf6b35247f17f04b Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Fri, 31 Dec 2021 11:36:27 +0100 Subject: [PATCH 02/79] Basic tooltips --- Customization/xsl/tooltips.xsl | 100 +++++++++++++++++++++++ sample/document.ditamap | 1 + sample/tooltips.dita | 134 +++++++++++++++++++++++++++++++ xsl/html5-bootstrap-template.xsl | 1 + xsl/html5-bootstrap.xsl | 10 +++ 5 files changed, 246 insertions(+) create mode 100644 Customization/xsl/tooltips.xsl create mode 100644 sample/tooltips.dita diff --git a/Customization/xsl/tooltips.xsl b/Customization/xsl/tooltips.xsl new file mode 100644 index 00000000..c6e57ded --- /dev/null +++ b/Customization/xsl/tooltips.xsl @@ -0,0 +1,100 @@ + + + + + + + + + + tooltip + + + + true + + + + + + left + + + right + + + bottom + + + top + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/sample/document.ditamap b/sample/document.ditamap index dc1ed9e7..ab7ec4d7 100644 --- a/sample/document.ditamap +++ b/sample/document.ditamap @@ -40,6 +40,7 @@ + diff --git a/sample/tooltips.dita b/sample/tooltips.dita new file mode 100644 index 00000000..b37fcda8 --- /dev/null +++ b/sample/tooltips.dita @@ -0,0 +1,134 @@ + + + + + Tooltips + Documentation and examples for adding custom Bootstrap tooltips + with CSS and JavaScript using CSS3 for animations and data-bs-attributes + for local title storage. + + + + Tooltips + CSS + outputclass + + props + desc + xref + + + + +

    + Overview + +

    + Things to know when using the tooltip plugin: +

    +
      +
    • + Tooltips rely on the 3rd party library Popper for positioning. +
      • +
    • + Tooltips are opt-in for performance reasons, so you must initialize them yourself. +
      • +
    • + Tooltips with zero-length titles are never displayed. +
      • +
    • + Triggering tooltips on hidden elements will not work. +
      • +
    • + Tooltips for .disabled or disabled elements must be triggered on a wrapper element. +
      • +
    • + When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use white-space: nowrap; on your <a>s to avoid this behavior. +
      • +
    • + Tooltips must be hidden before their corresponding elements have been removed from the DOM. +
      • +
    • + Tooltips can be triggered thanks to an element inside a shadow DOM. +
      • +
    +
    + + +
    + Examples +

    Hover over the links below to see tooltips:

    +
    + + + +

    + Placeholder text to demonstrate some inline links Default tooltip + with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of + real textAnother tooltip. And all that just to give + you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how + these tooltips on linksAnother one here too can work + in practice, once you use them on your ownThe last tip! + site or project. +

    +     + +

    + To enable tooltips, add output-class="tooltip-*" to the enclosing xref. + The direction of the tooltip is appended to the output-class. +

    +

    + Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are + mirrored when using Bootstrap in RTL. +

    + + + Tooltip on top + Tooltip on top + + + Tooltip on right + Tooltip on right + + + Tooltip on bottom + Tooltip on bottom + + + Tooltip on left + Tooltip on left + + +

    When adding custom HTML to tooltips, add props="html" to the desc element

    + + <em>Tooltip</em> <u>with</u> <b>HTML</b> + Tooltip with HTML + +     + <xref href="#" outputclass="btn-secondary tooltip-top"> + <desc>Tooltip on top</desc> + Tooltip on top +</xref> +<xref href="#" outputclass="btn-secondary tooltip-right"> + <desc>Tooltip on right</desc> + Tooltip on right +</xref> +<xref href="#" outputclass="btn-secondary tooltip-bottom"> + <desc>Tooltip on bottom</desc> + Tooltip on bottom +</xref> +<xref href="#" outputclass="btn-secondary tooltip-left"> + <desc>Tooltip on left</desc> + Tooltip on left +</xref> +<xref href="#" outputclass="btn-secondary tooltip-top"> + <desc props="html">&⁠lt;em&⁠gt;Tooltip&⁠lt;/em&⁠gt; &⁠lt;u&⁠gt;with&lt;/u&⁠gt; &⁠lt;b&⁠gt;HTML&⁠lt;/b&⁠gt;</desc> + Tooltip with HTML +</xref> + + + diff --git a/xsl/html5-bootstrap-template.xsl b/xsl/html5-bootstrap-template.xsl index 11c50881..2945d769 100755 --- a/xsl/html5-bootstrap-template.xsl +++ b/xsl/html5-bootstrap-template.xsl @@ -23,5 +23,6 @@ + diff --git a/xsl/html5-bootstrap.xsl b/xsl/html5-bootstrap.xsl index 5973d7c8..299cb6ad 100644 --- a/xsl/html5-bootstrap.xsl +++ b/xsl/html5-bootstrap.xsl @@ -25,6 +25,7 @@ + @@ -92,6 +93,15 @@ + + From 525947f6a594027e797c33a1bb7d4f1e22222077 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Fri, 31 Dec 2021 13:30:52 +0100 Subject: [PATCH 03/79] Switch to DITA elements in desc --- Customization/xsl/tooltips.xsl | 75 ++++++++++++++++++++++++++++++---- sample/tooltips.dita | 8 ++-- 2 files changed, 71 insertions(+), 12 deletions(-) diff --git a/Customization/xsl/tooltips.xsl b/Customization/xsl/tooltips.xsl index c6e57ded..de653404 100644 --- a/Customization/xsl/tooltips.xsl +++ b/Customization/xsl/tooltips.xsl @@ -12,18 +12,13 @@ exclude-result-prefixes="xs xhtml dita-ot" > - + tooltip - - - true - - @@ -40,8 +35,72 @@ - + + + + true + + + + + + + + + + + + + + + + + <strong> + + </strong> + + + <em> + + </em> + + + <u> + + </u> + + + <tt> + + </tt> + + + <sup> + + </sup> + + + <sub> + + </sub> + + + <span style="text-decoration:line-through"> + + </span> + + + <span style="text-decoration:overline"> + + </span> + + + + + + + @@ -53,7 +112,6 @@ - @@ -91,7 +149,6 @@ - diff --git a/sample/tooltips.dita b/sample/tooltips.dita index b37fcda8..af6b5271 100644 --- a/sample/tooltips.dita +++ b/sample/tooltips.dita @@ -103,9 +103,11 @@ Tooltip on left -

    When adding custom HTML to tooltips, add props="html" to the desc element

    +

    + Custom HTML can be added to tooltips using DITA elements in the desc +

    - <em>Tooltip</em> <u>with</u> <b>HTML</b> + Tooltip with DITA elements Tooltip with HTML @@ -126,7 +128,7 @@ Tooltip on left </xref> <xref href="#" outputclass="btn-secondary tooltip-top"> - <desc props="html">&⁠lt;em&⁠gt;Tooltip&⁠lt;/em&⁠gt; &⁠lt;u&⁠gt;with&lt;/u&⁠gt; &⁠lt;b&⁠gt;HTML&⁠lt;/b&⁠gt;</desc> + <desc props="html"><b>Tooltip</b> <u>with&lt;/u> <b>DITA</b> elements</desc> Tooltip with HTML </xref> From 308c976cec3d44d264c17a2608807900f7607b5d Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Fri, 31 Dec 2021 14:24:25 +0100 Subject: [PATCH 04/79] Updating tooltips --- Customization/xsl/tooltips.xsl | 56 ++++++---------------------------- sample/tooltips.dita | 15 ++++----- xsl/html5-bootstrap.xsl | 30 ++++++++++++++++++ 3 files changed, 45 insertions(+), 56 deletions(-) diff --git a/Customization/xsl/tooltips.xsl b/Customization/xsl/tooltips.xsl index de653404..86715f1c 100644 --- a/Customization/xsl/tooltips.xsl +++ b/Customization/xsl/tooltips.xsl @@ -53,53 +53,15 @@ - - - - <strong> - - </strong> - - - <em> - - </em> - - - <u> - - </u> - - - <tt> - - </tt> - - - <sup> - - </sup> - - - <sub> - - </sub> - - - <span style="text-decoration:line-through"> - - </span> - - - <span style="text-decoration:overline"> - - </span> - - - - - - + + + + + + + + + diff --git a/sample/tooltips.dita b/sample/tooltips.dita index af6b5271..21554ed7 100644 --- a/sample/tooltips.dita +++ b/sample/tooltips.dita @@ -44,10 +44,7 @@ Triggering tooltips on hidden elements will not work.
  • - Tooltips for .disabled or disabled elements must be triggered on a wrapper element. -
    • -
  • - When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use white-space: nowrap; on your <a>s to avoid this behavior. + Tooltips for outputclass="disabled" elements must be triggered on a wrapper element.
  • Tooltips must be hidden before their corresponding elements have been removed from the DOM. @@ -82,8 +79,8 @@ The direction of the tooltip is appended to the output-class.

    - Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are - mirrored when using Bootstrap in RTL. + Hover over the buttons below to see the four tooltips directions: top, right, bottom, and + left. Directions are mirrored when using Bootstrap in RTL.

    @@ -108,7 +105,7 @@

    Tooltip with DITA elements - Tooltip with HTML + Tooltip with embedded DITA     <xref href="#" outputclass="btn-secondary tooltip-top"> @@ -128,8 +125,8 @@ Tooltip on left </xref> <xref href="#" outputclass="btn-secondary tooltip-top"> - <desc props="html"><b>Tooltip</b> <u>with&lt;/u> <b>DITA</b> elements</desc> - Tooltip with HTML + <desc><b>Tooltip</b> <u>with&lt;/u> <b>DITA</b> elements</desc> + Tooltip with embedded DITA </xref> diff --git a/xsl/html5-bootstrap.xsl b/xsl/html5-bootstrap.xsl index 299cb6ad..894106ea 100644 --- a/xsl/html5-bootstrap.xsl +++ b/xsl/html5-bootstrap.xsl @@ -118,4 +118,34 @@ col-lg-3 navigation + + + < + + + + + > + + </ + + > + + + /> + + + + + + + + =" + + " + + + + + From 52be33ef9423c57b99ae6478864c909d8b9cc42e Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Fri, 31 Dec 2021 16:39:51 +0100 Subject: [PATCH 05/79] Add popovers --- .github/dita-ot/html.xml | 1 + Customization/xsl/popovers.xsl | 59 +++++++++++++++ Customization/xsl/tooltips.xsl | 33 +++++++- build_dita2html5-bootstrap.xml | 1 + insertParameters.xml | 5 ++ plugin.xml | 8 ++ sample/document.ditamap | 1 + sample/popovers.dita | 125 +++++++++++++++++++++++++++++++ sample/tooltips.dita | 31 ++++---- xsl/html5-bootstrap-template.xsl | 23 +++--- xsl/html5-bootstrap.xsl | 60 +++++---------- 11 files changed, 279 insertions(+), 68 deletions(-) create mode 100644 Customization/xsl/popovers.xsl create mode 100644 sample/popovers.dita diff --git a/.github/dita-ot/html.xml b/.github/dita-ot/html.xml index a6bbc456..302c34b9 100644 --- a/.github/dita-ot/html.xml +++ b/.github/dita-ot/html.xml @@ -22,6 +22,7 @@ + diff --git a/Customization/xsl/popovers.xsl b/Customization/xsl/popovers.xsl new file mode 100644 index 00000000..63c294f2 --- /dev/null +++ b/Customization/xsl/popovers.xsl @@ -0,0 +1,59 @@ + + + + + + + + + + popover + + + + + left + + + right + + + bottom + + + top + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Customization/xsl/tooltips.xsl b/Customization/xsl/tooltips.xsl index 86715f1c..19a8f9c3 100644 --- a/Customization/xsl/tooltips.xsl +++ b/Customization/xsl/tooltips.xsl @@ -64,8 +64,39 @@ + + + < + + + + + > + + </ + + > + + + /> + + + + + + + + =" + + " + + + + + + - + diff --git a/build_dita2html5-bootstrap.xml b/build_dita2html5-bootstrap.xml index 3a2aa971..33521a88 100755 --- a/build_dita2html5-bootstrap.xml +++ b/build_dita2html5-bootstrap.xml @@ -46,5 +46,6 @@ + diff --git a/insertParameters.xml b/insertParameters.xml index c5d563cc..29c2cdbd 100644 --- a/insertParameters.xml +++ b/insertParameters.xml @@ -1,4 +1,9 @@ + yes no + + + yes + no + diff --git a/sample/popovers.dita b/sample/popovers.dita new file mode 100644 index 00000000..681b858a --- /dev/null +++ b/sample/popovers.dita @@ -0,0 +1,125 @@ + + + + + Popovers + Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site. + + + + --popovers.include + Popovers + CSS + outputclass + + desc + title + data + xref + + + + +
    + Overview + +

    + Things to know when using the tooltip plugin: +

    +
      +
    • + Popovers rely on the 3rd party library Popper for positioning. +
      • +
    • + Popovers are opt-in for performance reasons, so you must initialize them yourself by setting --popovers.include= +
      • +
    • + Popovers with a zero-length desc element are never displayed. +
      • +
    • + Triggering popovers on hidden elements will not work. +
      • +
    • + Popovers for outputclass="disabled" elements must be triggered on a wrapper element. +
      • +
    • + Popovers must be hidden before their corresponding elements have been removed from the DOM. +
      • +
    • + Popovers can be triggered thanks to an element inside a shadow DOM. +
      • +
    +
    + + +
    + Examples +

    Keep reading to see how popovers work with some examples.

    +
    + + + + + Popover title + + And here's some amazing content. It's very engaging. Right? + Click to toggle popover + + + <xref href="#" outputclass="btn-lg btn-danger popover-top"> + <data> + <title>Popover title</title> + </data> + <desc>And here's some amazing content. It's very engaging. Right?</desc> + Click to toggle popover +</xref> + +
    + Four directions +

    + Four options are available: top, right, bottom, and + left aligned. Directions are mirrored when using Bootstrap in RTL. To enable popovers, add output-class="popover-*" to the enclosing xref. + The direction of the popover is appended to the output-class. +

    +
    + + + Top popover + Popover on top + + + Right Popover + Popover on right + + + Bottom popover + Popover on bottom + + + Left popover + Popover on left + + + <xref href="#" outputclass="btn-secondary popover-top"> + <desc>Top popover</desc> + Popover on top +</xref> +<xref href="#" outputclass="btn-secondary popover-right"> + <desc>Right Popover</desc> + Popover on right +</xref> +<xref href="#" outputclass="btn-secondary popover-bottom"> + <desc>Bottom popover</desc> + Popover on bottom +</xref> +<xref href="#" outputclass="btn-secondary popover-left"> + <desc>Left popover</desc> + Popover on left +</xref> + +     + diff --git a/sample/tooltips.dita b/sample/tooltips.dita index 21554ed7..a992b18e 100644 --- a/sample/tooltips.dita +++ b/sample/tooltips.dita @@ -13,11 +13,11 @@ + --popovers.include Tooltips CSS outputclass - props desc xref @@ -35,16 +35,16 @@ Tooltips rely on the 3rd party library Popper for positioning.
  • - Tooltips are opt-in for performance reasons, so you must initialize them yourself. + Tooltips are opt-in for performance reasons, so you must initialize them yourself by setting --popovers.include=.
  • - Tooltips with zero-length titles are never displayed. + Tooltips with a zero-length desc element are never displayed.
  • Triggering tooltips on hidden elements will not work.
  • - Tooltips for outputclass="disabled" elements must be triggered on a wrapper element. + Tooltips for outputclass="disabled" elements must be triggered on a wrapper element.
  • Tooltips must be hidden before their corresponding elements have been removed from the DOM. @@ -99,16 +99,7 @@ Tooltip on left Tooltip on left - -

    - Custom HTML can be added to tooltips using DITA elements in the desc -

    - - Tooltip with DITA elements - Tooltip with embedded DITA - - - <xref href="#" outputclass="btn-secondary tooltip-top"> + <xref href="#" outputclass="btn-secondary tooltip-top"> <desc>Tooltip on top</desc> Tooltip on top </xref> @@ -123,8 +114,16 @@ <xref href="#" outputclass="btn-secondary tooltip-left"> <desc>Tooltip on left</desc> Tooltip on left -</xref> -<xref href="#" outputclass="btn-secondary tooltip-top"> +</xref> +

    + Custom HTML can be added to tooltips using additional DITA elements within the desc +

    + + Tooltip with DITA elements + Tooltip with embedded DITA + + + <xref href="#" outputclass="btn-secondary tooltip-top"> <desc><b>Tooltip</b> <u>with&lt;/u> <b>DITA</b> elements</desc> Tooltip with embedded DITA </xref> diff --git a/xsl/html5-bootstrap-template.xsl b/xsl/html5-bootstrap-template.xsl index 2945d769..6b4be8d4 100755 --- a/xsl/html5-bootstrap-template.xsl +++ b/xsl/html5-bootstrap-template.xsl @@ -14,15 +14,16 @@ To override a customization, uncomment one or more of the widgets defined below: --> - - - - - - - - - - - + + + + + + + + + + + + diff --git a/xsl/html5-bootstrap.xsl b/xsl/html5-bootstrap.xsl index 894106ea..f060842a 100644 --- a/xsl/html5-bootstrap.xsl +++ b/xsl/html5-bootstrap.xsl @@ -11,8 +11,10 @@ - + + + @@ -22,10 +24,11 @@ + - + @@ -94,14 +97,21 @@ - + + + @@ -118,34 +128,4 @@ col-lg-3 navigation - - - < - - - - - > - - </ - - > - - - /> - - - - - - - - =" - - " - - - - - From b13635b020c63e0f48e7982337b194f4b0bc94b0 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Fri, 31 Dec 2021 16:50:57 +0100 Subject: [PATCH 06/79] Fix documentation - Icons are not included by default - Update Copyrights --- .github/dita-ot/footer.xml | 2 +- README.md | 10 +++++++++- sample/icons.dita | 16 +++++++++------- sample/index.dita | 17 +++++++++++++++++ 4 files changed, 36 insertions(+), 9 deletions(-) diff --git a/.github/dita-ot/footer.xml b/.github/dita-ot/footer.xml index 0f0c5cd5..d4e4184c 100644 --- a/.github/dita-ot/footer.xml +++ b/.github/dita-ot/footer.xml @@ -28,7 +28,7 @@

    - © 2021 + © 2017-2022 infotexture

    diff --git a/README.md b/README.md index 0c0d7a60..b0db6548 100644 --- a/README.md +++ b/README.md @@ -144,6 +144,14 @@ The HTML output for the following DITA elements can be annotated with common Boo You can add your own XSLT customizations by creating a new plug-in that extends the DITA Bootstrap XSLT transforms. Just amend `args.xsl` to point to your own XSLT files. An [XSLT template][12] is included within this repository. + +### Opt-In elements + +For performance reasons, Bootstrap icons, popovers and tooltips are disabled by default, they can be enabled by using the following command line parameters: + +- `icons.include` – enable Bootstrap icons +- `popovers.include` – enable Bootstrap popover components and tooltip components + ## Feedback - If you find this useful and build something of your own on top of it, [let me know][13]. @@ -155,7 +163,7 @@ You can add your own XSLT customizations by creating a new plug-in that extends ## License -[Apache 2.0](LICENSE) © 2017–2021 Roger W. Fienhold Sheen +[Apache 2.0](LICENSE) © 2017–2022 Roger W. Fienhold Sheen Within the sample documentation, where necessary, the texts describing the usage of each component have been copied directly from the official [Bootstrap 5.0 documentation][2], however DITA markup is used throughout the examples describing how to implement these components correctly using `outputclass`. diff --git a/sample/icons.dita b/sample/icons.dita index dfbf7fd4..c39b8e48 100644 --- a/sample/icons.dita +++ b/sample/icons.dita @@ -7,8 +7,11 @@ components correctly using outputclass. --> Icons - DITA Bootstrap includes Bootstrap Icons by default. Other icon libraries such as can be added or removed - using command line parameters. + When enabled, DITA Bootstrap includes Bootstrap Icons by default. Additional icon libraries such as + Font Awesome + Feather and + Octicons + can also be added using command line parameters.
    Bootstrap Icons @@ -17,19 +20,17 @@ library of SVG icons that are designed by @mdo and maintained by the Bootstrap Team. They are open source and licensed under MIT, just like Bootstrap so the icon set is freely available to everyone.

    - -
    Installing icons --icons.cdn.path --icons.include -

    A Link to the default Bootstrap Icons CDN set is included by default. If you do not - need any icons you can exclude them by setting the --icons.include= +

    A Link to the default Bootstrap Icons CDN set is not included by default. If you + need any icons you can include them by setting the --icons.include=

    dita --input=path/to/your.ditamap \ --format= \ - --icons.include= + --icons.include=

    Other icon sets such as Font Awesome Feather and @@ -48,6 +49,7 @@ dita --input=path/to/your.ditamap \ --format= \ + --icons.include= \ --icons.cdn.path=path/to/icon-cdn-header.xml

    diff --git a/sample/index.dita b/sample/index.dita index 114d4682..348ed471 100644 --- a/sample/index.dita +++ b/sample/index.dita @@ -257,5 +257,22 @@
    • +
    + Opt-In elements + --icons.include + --popovers.include +

    + For performance reasons, Bootstrap icons, + popovers and tooltips + are disabled by default, they can be enabled by using the following command line parameters: +

    +
      +
    • + --icons.include – enable Bootstrap icons
      • +
    • + --popovers.include – enable Bootstrap popover components and tooltip components
      • +
    +
    + From bf7cd73b6f893e8ffcb4bf94c8ffc256387ddc2d Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Sat, 1 Jan 2022 12:27:49 +0100 Subject: [PATCH 07/79] Add @frame support. --- Customization/xsl/topic.xsl | 51 +++++++++++++++++++++++++++++++++++++ sample/figures.dita | 1 - sample/utilities.dita | 33 ++++++++++++++++++++++++ 3 files changed, 84 insertions(+), 1 deletion(-) diff --git a/Customization/xsl/topic.xsl b/Customization/xsl/topic.xsl index dc632b01..3a5ab1de 100644 --- a/Customization/xsl/topic.xsl +++ b/Customization/xsl/topic.xsl @@ -206,6 +206,57 @@     + + + + + + +
    + + + + figure + + + + + + 
    +        
+        
+        
+        
+        
+
    + +
    + +     + + + + + + +
    + + + + figure + + + + +

    + + + + +

    +
    +     + diff --git a/sample/figures.dita b/sample/figures.dita index 4bff41fe..b33f709f 100644 --- a/sample/figures.dita +++ b/sample/figures.dita @@ -102,6 +102,5 @@ ... </fig> - diff --git a/sample/utilities.dita b/sample/utilities.dita index da2c9437..904618e1 100644 --- a/sample/utilities.dita +++ b/sample/utilities.dita @@ -18,6 +18,7 @@ CSS outputclass + frame @@ -39,6 +40,38 @@ <ph outputclass="border-end">...</ph> <ph outputclass="border-bottom">...</ph> <ph outputclass="border-start">...</ph> +
    + <xmlatt>frame</xmlatt> Support +

    For DITA elements which support the frame attribute, such as lines and + codeblock, additional frame borders are automatically added as shown:

    +
    + +

    + // Simple C++ program to display "Hello World" + +// Header file for input output functions +#include<iostream> + +using namespace std; + +// main function - +// where the execution of program begins +int main() +{ + // prints hello world + cout<<"Hello World"; + return 0; +} +

    + Shall I compare thee to a summer's day? +Thou art more lovely and more temperate: +Rough winds do shake the darling buds of May, +and summer's lease hath all too short a date: +... +

    + + <codeblock frame="sides">...</codeblock> +<lines frame="topbot" outputclass="bg-light">...</lines>

    Colors

    Colorize text with color utilities

    From e7c2678b9a9e857303c091e2ee8250b1c87404c3 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Sun, 2 Jan 2022 15:01:13 +0100 Subject: [PATCH 08/79] Update dependencies - Bootstrap 5.1.3 - Bootstrap Icons 1.7.2 --- includes/bootstrap.hdf.xml | 8 ++++---- includes/bootstrap.icons.hdf.xml | 4 +++- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/includes/bootstrap.hdf.xml b/includes/bootstrap.hdf.xml index 3601b023..7c7fb618 100644 --- a/includes/bootstrap.hdf.xml +++ b/includes/bootstrap.hdf.xml @@ -1,13 +1,13 @@