ODS > Popovers

[ffoodd]

Requirement

For a Developer Who is creating an Orange Website The Popover Integration is an automated component that proposes the web site's Orange Popover Helpers unlike the default bootstrap framework Boosted will provide this ready to use component compatible with the Orange Design and the accessibility requirements

Description

• Warning: However what's being specified is closer to modals than to Bootstrap popovers. We need some digging regarding the name.
• Features: Guided tour is an extended type of popover, basically chaining popovers together and highlighting popover's anchor when opened.

References

• Orange Design System: Components > Popovers
  • Feature popover with title and description — WEB-POP-FEA-001
  • Feature popover with title, description and link — WEB-POP-FEA-002
  • Feature popover marker — WEB-POP-MAR-001
  • Guided tour popover with title and description — WEB-POP-GUI-001
  • Guided tour popover with image top, title and description — WEB-POP-GUI-002
  • Guided tour popover with image left, title and description — WEB-POP-GUI-003
  • Guided tour popover with image right, title and description — WEB-POP-GUI-004
  • Make examples with the 2 screenshots of "Feature popover in use" and "Guided tour popover in use"?

[ffoodd]

As a reference, I already implemented this years ago using Boosted v4 and jQuery.

The pattern simple required:

• a new .btn-modal class (could be whatever) as a trigger,
• with a data-related attribute to specify elements to highlight,
• a .highlight class to make target pop visually—should be renamed,
• and to match our modal pattern (e.g. having a data-target attribute to specify which modal to open).

Example

$(document).ready(function() {
  $('.btn-modal').on('click', function() {
    var $modal  = $(this).parents('[role="dialog"]');
    var $target = $(this).data('target');
    var $highlights = $(".highlight");

    $highlights.removeClass("highlight");

    $modal.modal('hide');

    $modal.on('hidden.bs.modal', function() {
      $highlights.removeClass("highlight");
      $($target).modal('show');
      $target = null;
    });
  });

  $('[role="dialog"][id$="-step"]').on('shown.bs.modal', function() {
    var $related = $(this).data('related').split(',');
    var $coords  = $("#" + $related[0]).offset();

    $.each( $related, function(index, value) {
      $("#" + value).addClass("highlight");
    });

    $('html, body').animate({
      scrollTop: $coords.top - 108
    }, 500);

    $related = null;
    $coords = null;
  });
});

It also required a few tricks template-side for first and last modals (e.g. "Done" button for the last slide, "Let'sgo" button on the first one).

[ffoodd]

Regarding "Guided Tour", just came across a Bootstrap unofficial plugin that just does that (only working with v4 AFAIK): Bootstrap Tour. It seems unmaintained but could still be an inspiration of some sort.

[julien-deramond]

A prototype has been done for the Popover Tour at https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/2190. Let's go back from it when we'll tackle this feature.