World Conquest Chronicles

World Conquest Chronicles

Wizard Tags, v1.1

Posted on

Скриншот примера использования

(CC BY-SA 4.0, Copyright © 2015 thewizardplusplus)

Библиотека для мобильных браузеров, реализующая редактор тегов с автодополнением.

Дополнительные режимы поиска и сортировки, расширение API и повышение удобства использования.

Изменения

  • удаление тегов клавишей Backspace;
  • список автодополнения ввода:
    • автодополнение тегов без учёта регистра;
    • автодополнение тегов с поиском по началам слов в теге;
    • сортировка списка по частоте использования тегов (частота использования передаётся как параметр);
    • подсветка совпадений в тегах с поисковым запросом;
  • опции:
    • опциональный запрет на автодополнение тегов без учёта регистра;
    • режим поиска тегов при автодополнении:
      • по началу тега;
      • по началам слов в теге;
    • сортировка списка автодополнения ввода:
      • по частоте использования тегов по возрастанию;
      • по частоте использования тегов по убыванию;
    • таблица частоты использования тегов;
  • API:
    • добавления тега из текущего содержания поля ввода;
  • кроссбраузерная обработка нажатий клавиш.

Пример использования

wizard_tags_example.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8" />
        <meta
            name = "viewport"
            content = "width=device-width, initial-scale=1.0" />

        <link rel = "stylesheet" href = "path_to_wizard_tags/styles/wizard_tags.css" />
        <link rel = "stylesheet" href = "path_to_wizard_tags/styles/default_theme.css" />

        <script src = "path_to_wizard_tags/scripts/wizard_tags.js"></script>
        <script src = "scripts/main.js"></script>

        <title>Wizard Tags - Default Example</title>
    </head>
    <body>
        <header>
            <h4>Wizard Tags — Default Example</h4>
            <hr />
        </header>
        <section>
            <p>
                Version of Wizard Tags —
                v<span class = "version-view">0.0</span>.
            </p>
            <p>
                Selected tags:
                <span class = "selected-tags-view">—</span>.
            </p>
            <div class = "tags-input"></div>
            <p>
                <button class = "adding-button">Add current text</button>
            </p>
        </section>
        <footer>
            <hr />
            © thewizardplusplus, 2015
        </footer>
    </body>
</html>

scripts/main.js:

window.addEventListener(
    'load',
    function() {
        var selected_tags_view = document.querySelector('.selected-tags-view');
        var tags_input = new WizardTags(
            '.tags-input',
            {
                tags: [
                    'one',
                    'two',
                    'three',
                    'four',
                    'four',
                    'five',
                    'five',
                    '',
                    '      six',
                    'six',
                    'multi words tag'
                ],
                case_sensitive: true,
                search_mode: 'words',
                default_tags: ['one', 'two'],
                separators: ',',
                only_unique: true,
                placeholder: 'Themes',
                sort: 'priorities-desc',
                priorities_tags: {'six': 2, 'four': 1},
                onChange: function() {
                    var tags = this.getTags();
                    if (tags.length) {
                        selected_tags_view.innerHTML = tags.join(', ');
                    } else {
                        selected_tags_view.innerHTML = '—';
                    }
                }
            }
        );

        var version_view = document.querySelector('.version-view');
        if (version_view) {
            version_view.innerHTML = tags_input.getVersion();
        }

        var test_form = document.querySelector('.test-form');
        if (test_form) {
            test_form.addEventListener(
                'submit',
                function(event) {
                    console.log('attempt to submit test form');

                    event.preventDefault();
                    return false;
                }
            );
        }

        var adding_button = document.querySelector('.adding-button');
        if (adding_button) {
            adding_button.addEventListener(
                'click',
                function() {
                    tags_input.addCurrentText();
                }
            );
        }
    }
);

Репозиторий

Ссылка: https://github.com/thewizardplusplus/wizard-tags/tree/v1.1.

Содержание: код, документация, пример использования.

Лицензия: MIT.

Скриншоты

Результаты поиска по началам слов в теге (CC BY-SA 4.0, Copyright © 2015 thewizardplusplus):

Скриншот результатов поиска по началам слов в теге

Авторские права