пятница, 18 февраля 2011 г.

Функция цитирования текста для ответного сообщения (function for wrapping/quoting text on replies)

Писал приложение, в котором была необходимость создать внутреннюю почту, с возможностью отослать письмо и c возможностью на это email потом ответить. Возникла задача цитирования текста предыдущего сообщения при ответах на входящие письма, наподобие, как делают всякого рода email clients, или тот же gmail с web-интерфейсом.

Например:

> Это quoted text.
> Всё что тут было написано, было написано
> не мной, во входящем сообщении.

Можно, конечно, взять и написать примитивную логику, подобно:

str_replace("\n","\n> ","> ".$text);

Но, это плохое решение, если хочется сделать красивое повторное цитирование уже ранее процитированного текста. Обратите внимание, как это делает gmail или другие email клиенты:

> повторное цитирование:
>
>> Это quoted text.
>> Всё что тут было написано, было написано
>> не мной, во входящем сообщении.

При повторном цитировании текста,  вначале строки, возле угловой скобки ставится отступ лишь в том случае, если рядом стоит «чистый текст», ранее не обвёрнутый в кавычки цитирования. Так что без дополнительной логики, простым str_replace() тут не обойтись.

Оказалось, что найти такую функцию на PHP среди готовых решений не так-то просто. Поэтому предлагаю свой вариант реализации на PHP:

// function for wrapping/quoting text on replies
public function quote_text(&$body)
{
  $body_quote = ">";        // quotation mark
  $rewrap_body = explode("\n", $body);
  $body = '';
  $cnt = count($rewrap_body);
  for ($i=0;$i<$cnt;$i++)
  {
    if (preg_match("/^(>+)/", $rewrap_body[$i], $matches)) {
      $gt = $matches[1];
      $body .= $body_quote . str_replace("\n", "\n" . $body_quote
         . "$gt ", rtrim($rewrap_body[$i])) ."\n";
    } else {
      $body .= $body_quote . (!empty($body_quote) ? ' ' : '') . str_replace("\n", "\n" . $body_quote . (!empty($body_quote) ? ' ' : ''), rtrim($rewrap_body[$i])) . "\n";
    }
    unset($rewrap_body[$i]);
  }
}

Функция quote_text принимает переменную по ссылке в качестве единственного параметра. Результатом работы этой функции будет процитированный текст, обвёрнутый в метки $body_quote, по схеме цитирования, описанной выше.

четверг, 3 февраля 2011 г.

Подсказки в input: text полях (default search text at input using jQuery)

На сайтах часто попадаются подсказки в input: text полях, например, в полях для поиска, когда написан текст «Поиск по сайту», а при вводе в него значения – он исчезает и пользователь может ввести критерий поиска.

Алгоритм работы данного функционала прост. Задается текст-подсказка (описание поля) по умолчанию, зачастую бледного цвета, а при фокусе на элементе всё очищается. При потере фокуса, если значение поля осталось пустым, то снова возвращается текст подсказка.

Самый простой способ, для «любителей» размещать весь код инлайн, реализуется при помощи JS, навесив два события onfocus и onblur на input элемент формы:

<input type="text" value="Поиск по сайту…" onfocus="if (this.value == 'Поиск по сайту…') {this.value = '';}" onblur="if (this.value == '') {this.value ='Поиск по сайту…';}" />

Есть, конечно, и много уже готовых плагинов для отображения подсказки в input полях, но мне почему-то больше всех приглянулся jquery.hint.js (как пользоваться расписано тут).  Как мне показалось, jquery.hint.js вполне удачное, маленькое и элегантное решение для такой задачи.

В любом случае, плагины уже нашёл после того, как написал собственное решение для этой задачи, да и подгружать отдельный js файл на каждую html страницу - непозволительная роскошь, из-за одного маленького input в блоке поиска. Вот этот кусочек js-кода, который с использованием jQuery навешивает подсказку для input text поля с id-шником search:

$('#search').focus(function(){
    if($(this).val() == $(this).attr('title')){
      $(this).val('').css('color','#333');
    }
  }).blur(function(){
    if($(this).val() != $(this).attr('title') && $.trim($(this).val()).length == 0){
      $(this).val($(this).attr('title')).css('color','#AAA');
    }
}).blur();

Сам элемент input выглядет следующим образом:

<input id="search" type="text" name="search" value="" title=" Поиск по сайту…" />

Скрипт использует значение, которое задано в атрибуте title в качестве текста подсказки и выводит его серым цветов в самом input. Как только пользователь ставит/убирает курсор в поле для ввода, срабатывает событие focus/blur, которое и показывает/скрывает текст подсказки и меняет CSS стиль для элемента.

Для того чтобы submit формы не происходил с нашим фейк-значением подсказки, я навесил дополнительное событие onsubmit="checkFakeSearchValues();" на элемент form. Эта функция выглядит следующим образом:

function checkFakeSearchValues(){
  var search = $('#search');
  if($(search).val() == $(search).attr('title')){
    $(search).val('');
  }
}

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

Рекоммендую

Попробуйте надёжный хостинг от Scala Hosting