textWildCardArea.js

A jQuery plugin for textarea to add and remove wildcards from text

Basic Usage

Declare a textarea and declare a list of tags to use with UL LI

 <textarea id="MyTextWildCardArea"></textarea>
 <nav>
    <ul data-toggle="tag" data-target="#MyTextWildCardArea">
        <li class="nav-item"><a class="tag tag--available" data-tag="[ExampleTag]" role="button">[ExampleTag]</a></li>
        <li class="nav-item"><a class="tag tag--available" data-tag="[Email]" role="button">[Email]</a></li>
    </ul>
</nav>

$('#MyTextWildCardArea').textWildCardArea();

It is also possible to instantiate with many text areas.

 <textarea id="TextAreaExample" class="my-textarea"></textarea>
 <nav>
    <ul data-toggle="tag" data-target="#MyTextWildCardArea">
        <li class="nav-item"><a class="tag tag--available" data-tag="[ExampleTag]" role="button">[ExampleTag]</a></li>
        <li class="nav-item"><a class="tag tag--available" data-tag="[Email]" role="button">[Email]</a></li>
    </ul>
</nav>


<textarea id="AnotherTextArea" class="my-textarea"></textarea>
 <nav>
    <ul data-toggle="tag" data-target="#MyTextWildCardArea">
        <li class="nav-item"><a class="tag tag--available" data-tag="[ExampleTag]" role="button">[ExampleTag]</a></li>
        <li class="nav-item"><a class="tag tag--available" data-tag="[Email]" role="button">[Email]</a></li>
    </ul>
</nav>

$('.my-textarea').textWildCardArea();

data attributes

• data-toggle="tag": Required: define the type tag for a element
• data-target="#elementId": Required: define the target textarea to observer

classes

• tag tag-available: the plugin uses this class to control a toggle state.
• tag tag-unavailable: the plugin uses this class to control a toggle state.
  At least one class is required

The plugin doesn't have css styles, but this css can be useful for a basic style

     .tag.tag--available {
        cursor: pointer;
        font-weight: 700;
    }

    .tag.tag--unavailable {
        cursor: pointer;
        font-weight: normal;
        font-style: italic;
        text-decoration: line-through;
    }

Usability

• Click once for add wildcard to the textarea
• Click once for remove all wildcards from the textarea
• If a textarea already has data coming from the server, the plugin must observe and apply the toggle state on the tags