Highlight Text View 

Highlight Text View is used to highlight text in view element.

Example: highlight query string in search results.

Initialization 

Initialize in twig:

//example from System Configuration page content
<div data-page-component-view="{{ {
    view: 'oroui/js/app/views/highlight-text-view',
    highlightSwitcherContainer: 'div.system-configuration-content-header',
    highlightStateStorageKey: 'show-all-configuration-items-on-search',
    highlightSelectors: [
        'div.system-configuration-content-title',
        'h5.user-fieldset span',
        'div.control-label label',
        'i.tooltip-icon'
    ],
    toggleSelectors: {
        'div.control-group': 'div.control-group-wrapper',
        'fieldset.form-horizontal': 'div.system-configuration-content-inner'
    },
    viewGroup: 'configuration'
}|json_encode }}">
    {{ _self.renderTabContent(data.form, data.content) }}
</div>

Initialize in JavaScript:

//example from "oroui/js/app/views/jstree/base-tree-view"
this.subview('highlight', new HighlightTextView({
    el: this.el,
    viewGroup: 'configuration',
    highlightSelectors: ['.jstree-search']
}));

Options 

  • text:string - text to highlight

  • viewGroup:string - used as mediator event prefix

  • highlightSwitcherContainer:string - a class or attribute in which will render template of highlight switcher

  • highlightStateStorageKey:string - localStorage key which will contain state of visibility for not found/highlighted elements

  • highlightClass:string - class used for text highlight

  • notFoundClass:string - class used for mark content without highlighted elements

  • foundClass:string - class used for mark content with highlighted elements

  • highlightSelectors:array - array of selectors that used to find elements to highlight

  • toggleSelectors:object - array of selectors that used to find elements to mark as found or not found