View on GitHub

jQuery.textmistake

Плагин "jquery.textmistake"

скачать .ZIPскачать .TGZ

Что это?

Если у тебя возникал вопрос "Каким образом дать возможность редакторам на сайте сообщать о найденных опечатках или ошибках", или сам частенько наталкивался на них и думал "Надо бы куда-нибудь записать чтоб не забыть поправить" - возможно, этот плагин будет тебе интересен.

Общая идея заключается в следующем: когда редактор нашел опечатку в тексте на сайте — то выделил её, и нажал "Ctrl" ("Cmd" для Mac) + "Enter", после чего получил сообщение на почту. И не важно что крутится у тебя на сервере - решение применимо даже для простых статичных страниц, но об этом чуть ниже. Зависимость - необходим jQuery.

 

Демонстрация

Просто выдели любое слово на этой странице, и нажми "Ctrl" + "Enter". С этой страницы уведомления никуда не уходят, это всего лишь денонстрация.

 

 

Описание особенностей

  1. Наличие серверной части для отправки сообщений - не обязательноельное условие. Но в комплекте идет пример скрипта на PHP, который может выполнять эту роль:
    jQuery(document).textmistake({
        'sendmailUrl': './textmistake.php'
    });
  2. Если для отправки сообщений не используется серверная часть, то нам необходимо перейти по ссылке и получив бесплатную учетную запись на mandrill.com, перейти в "настройки аккаунта", и нажав на "+ New API Key" - получить свой "API Key". Лимит для бесплатного аккаунта составляет 12,000 сообщений в месяц (295 в час), плюс настраиваемые черные/белые листы и прочие плюшки:
    jQuery(document).textmistake({
        'mandrillKey': 'GetYourOwnApiKey'
    });
  3. Текст всех сообщений что видит пользователь - настраиваемый, и указываются в момент инициализации плагина. Это позволяет без каких-либо проблем встроить данный плагин на мультиязычные сайты:
    jQuery(document).textmistake({
        'l10n': {
            'title': 'Сообщить автору об опечатке:',
            'urlHint': 'Адрес страницы с ошибкой:',
            'errTextHint': 'Текст с ошибкой:',
            /* etc */
        }
    });
  4. Никаких дополнительных css, js, или картинок (последние есть, но подгружаются с imgur.com) не требуется для работы. Просто один файл подключить и выполнить один вызов инициализации. Об этом ещё будет сказано ниже:
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script src="js/jquery.textmistake.js"></script>
    <script>jQuery(document).textmistake();</script>
  5. Имеется возможность использовать свои стили и свою верстку - просто отключаем инициализацию не нужных частей и используем свои (структуру смотри в исходнике плагина):
    jQuery(document).textmistake({
        'initCss': false,
        'initHtml': false,
    });
  6. Опциональные настройки интерфейса в виде цвета заливки слоя-оверлея, его прозрачность, сокрытие прокрутки документа, указание номера слоя, возможность закрытия по нажатия Esc и прочее:
    jQuery(document).textmistake({
        'overlayColor': '#666',
        'overlayOpacity': 0.5,
        /* etc */
    });
  7. Имеется набор callback-функций:
    jQuery(document).textmistake({
        'onShow': function(state){},
        'onAjaxDone': function(response){},
        /* etc */
    });
  8. При использовании скрипта с серверной части - его необходимо сперва настроить:
    define('MailFrom', 'textmistake@'.$_SERVER['HTTP_HOST']);
    define('MailTo',   'your_email@address.here');
    define('RemoveHTML', true);

Установка

Для минимальной настройки и запуска тебе потребуется:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/tarampampam/jquery.textmistake/master/src/jquery.textmistake.js"></script>
<script type="text/javascript">
(function(e){
    jQuery(document).textmistake({
        'mailTo': 'your_email(d0g)here.com'.replace(/\(d0g\)/, '@'),
        'mailFrom': 'textmistake(d0g)yourdomain.com'.replace(/\(d0g\)/, '@'),
        'mandrillKey': 'HereIsYourMandrillApiKey', // Get your - https://mandrill.com/signup/
    });
})(jQuery)
</script>

Весь список возможных параметров:

jQuery(document).textmistake({
    'l10n': {
        'title': 'Report a typo author:',
        'urlHint': 'Url of the page with error:',
        'errTextHint': 'Text with the error:',
        'yourComment': 'Your comment:',
        'userComment': 'Comment by user:',
        'commentPlaceholder': 'Type comment',
        'cancel': 'Cancel',
        'send': 'Send',
        'mailSubject': 'Typo on the site',
        'mailTitle': 'Typo on the site',
        'mailSended': 'Notification sent',
        'mailSendedDesc': 'Your notification has been sent successfully. Thank you for your feedback!',
        'mailNotSended': 'Sending error',
        'mailNotSendedDesc': 'Your message has not been sent, sorry.',
    },
    'debug': false,
    'initCss': true,
    'initHtml': true,
    'overlayColor': '#666',
    'overlayOpacity': 0.5,
    'windowZindex': 10001,
    'hideBodyScroll': true,
    'textLimit': 400,
    'contextLength': 40,
    'closeOnEsc': true,
    'mailTo': '',
    'mailFrom': 'textmistake@'+window.location.hostname,
    'mandrillKey': '',
    'sendmailUrl': '',
    'animateSpeed': 0,
    'autocloseTime': 10000,
    'onShow': function(state){},
    'onHide': function(state){},
    'onLoadingShow': function(state){},
    'onLoadingHide': function(state){},
    'onCtrlEnter': function(){},
    'onEscPressed': function(){},
    'onSendMail': function(response){},
    'onAjaxDone': function(response){},
    'onAjaxResultError': function(response){},
    'onAjaxSendError': function(response){},
});