https://github.com/konradjurk/ember-text-highlight

Simple, performant Ember.Helper that highlights matching parts of a text.
https://github.com/konradjurk/ember-text-highlight

ember ember-addon ember-helpers highlight highlight-matches highlight-text

Last synced: about 2 months ago
JSON representation

Simple, performant Ember.Helper that highlights matching parts of a text.

• Host: GitHub
• URL: https://github.com/konradjurk/ember-text-highlight
• Owner: konradjurk
• License: mit
• Created: 2017-12-07T12:39:50.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2021-11-19T18:36:20.000Z (about 3 years ago)
• Last Synced: 2024-10-30T06:33:57.335Z (about 2 months ago)
• Topics: ember, ember-addon, ember-helpers, highlight, highlight-matches, highlight-text
• Language: JavaScript
• Homepage:
• Size: 3.13 MB
• Stars: 10
• Watchers: 2
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 😔 Not adivisable to be used in its current state.

Please look out for an alternative until I had some time to work on this plugin again.

# Ember Text Highlight [![Build Status](https://travis-ci.org/konradjurk/ember-text-highlight.svg?branch=master)](https://travis-ci.org/konradjurk/ember-text-highlight) [![Coverage Status](https://coveralls.io/repos/github/konradjurk/ember-text-highlight/badge.svg?branch=master)](https://coveralls.io/github/konradjurk/ember-text-highlight?branch=master) [![Code Climate](https://img.shields.io/codeclimate/maintainability/konradjurk/ember-text-highlight.svg)](https://codeclimate.com/github/konradjurk/ember-text-highlight) [![Greenkeeper badge](https://badges.greenkeeper.io/konradjurk/ember-text-highlight.svg)](https://greenkeeper.io/) [![npm](https://img.shields.io/npm/v/ember-text-highlight.svg)](https://www.npmjs.com/package/ember-text-highlight)

This addon exposes a simple Ember.Helper that wraps matching parts of a text in a `span` with a stylable CSS class (`mark`).

It picks the algorithm that likely performs best in the current environment, making it up to **twice as fast** as the idiomatic implementation with regular expressions.

![Ember Text Highlight Demo (2MB)](https://github.com/konradjurk/ember-text-highlight/raw/master/demo-ember-text-highlight.gif "Ember Text Highlight Demo")

## Usage

1. Pick one way to install the addon.

    ```bash

    $ ember install ember-text-highlight

    $ yarn add ember-text-highlight --dev

    $ npm install ember-text-highlight --save-dev

    ```

2. Wrap around your template strings

    ```handlebars

    {{text-highlight content query=query}}

    ```

3. Style

    Lets say `content` is `Bryan Burke` and `query` is `Bry`:

    ```handlebars

    {{text-highlight 'Bryan Burke' query='bry'}}

    ```

    The rendered HTML will look like this:

    

    ```html

    Bryan Burke

    ```

    You can now style the CSS class `.mark` according to your wishes and context.

    A good start might be the style you see in the demo video above:

    ```css

    .mark {

      padding: 0 !important;

      background-color: rgba(255, 238, 115, 0.59);

    }

    ```

    [Twitter Bootstrap](https://getbootstrap.com/) already ships a [pre-styled `.mark` class](https://v4-alpha.getbootstrap.com/content/typography/#inline-text-elements).

## Contributing

* Fork repository

* `git clone `

* `cd ember-text-highlight`

* `yarn install`

* Make sure everything works before you start: `yarn run test` (Runs `ember try:each` to test against multiple Ember versions)

* Improve something

* Re-run tests and adapt/expand

* Create a pull request 🙌