1. Главная
  2. Блоги
  3. Блог Химический Али

Крутые плавающие уведомления

Главные вкладки

Аватар пользователя Химический Али Химический Али 28 июля 2009 в 21:15

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

Как это обычно водится, мир оказался не без добрых людей и такие мысли приходили в голову не только мне. Накануне попал на сайт Open Atrium, а там это уже сделано, причем весьма симпатично. Оставалось только выдрать нужный код и крутые плавающие уведомления у нас в руках:

Крутое плавающее уведомление

Как сделать такое? Смотрим под катом.

В phptemplate.php темизируем вывод уведомлений (оборачиваем в дополнительный div и выводим кнопку закрытия):

<?php
function phptemplate_status_messages($display = NULL) {
  $output = '';
  foreach (drupal_get_messages($display) as $type => $messages) {
    $output .= "<div id=\"growl\"><div class=\"messages $type\"><span class=\"close\">X</span><div class=\"message-content\">\n";
    if (count($messages) > 1) {
      $output .= " <ul>\n";
      foreach ($messages as $message) {
        $output .= '  <li>'. $message ."</li>\n";
      }
      $output .= " </ul>\n";
    }
    else {
      $output .= $messages[0];
    }
    $output .= "</div></div></div>\n";
  }
  return $output;
} 
?>

Добавляем любым удобным способом CSS-код:

/**
 * Крутые плавающие уведомления
 */
#growl {
  font-size:13px;
  line-height:20px;
  position:fixed;
  right:10px;
  top:30px;
  width:300px;
  z-index:100;
  }

#growl div.messages span.close {
  float:right;
  width:20px;
  height:20px;
  display:block;
  overflow:hidden;
  text-indent:-999px;
  /* Тут надо указать верный путь к close.png */
  background:url(../images/close.png) no-repeat;
  }

#growl div.messages {
  -moz-border-radius:10px;
  margin:5px 0px;
  background:#eff;
  opacity:.9;
  padding:20px;
  cursor:pointer;
  }

#growl div.error { background:#fee; }

Добавляем любым удобным способом изюмительный JavaScript-код, который и претворяет в жизнь задуманное:

Drupal.behaviors.singular = function (context) {
  $('#growl > div:not(.processed)').each(function() {
    $(this).addClass('processed');
    $('span.close', this).click(function() {
      $(this).parent().hide('fast');
    });
    if ($(this).is('.autoclose')) {
      // Если сообщение содержит ссылку, автозакрытие - не самая лучшая идея.
      if ($('a', this).size() > 0) {
        $(this).removeClass('autoclose');
      }
      else {
        // Добавляем 5-секундную паузу перед скрытием сообщения.
        $(this).animate({opacity:.95}, 5000, 'linear', function() {
          $(this).hide('fast');
        });
      }
    }
  });
}    

Все! Сохраняйте изменения, сбрасывайте кеш и любуйтесь. При нажатии на кнопку закрытия окошко круто улетает в небытие, не нарушая оптической привлекательности страницы.

Владельцы сайтов на Drupal 5 могут попробовать готовый модуль Popup Message Box, который, кажется, делает подобное без необходимости лезть в код.

Обновление 1. Соучастник ole-studio подсказывает вариант для версии 6 — мощный модуль Better Messages.

Обновление 2. Оформил в модуль, качайте. Прогнал в Opera 10, Firefox 3.5 и IE 7.

Файл close.png можете скачать отсюда:

ВложениеРазмер
Иконка изображения close.png504 байта
Иконка пакета pretty_messages-6.x-1.0.zip2.44 КБ

Комментарии

Аватар пользователя Ветер Ветер 29 июля 2009 в 21:35

В нем, при выводе в центре экрана, за основу расчета центра берется вся страница, а не границы окна. Sad
И получается если страница большая или очень... большая, то найти это окошко будет мягко говоря затрудительно.

Аватар пользователя Stan.Ezersky Stan.Ezersky 29 июля 2009 в 0:27

Химический Али, а от меня огромные плюс и спасибо. Ручной труд - это ручной труд. По крайней м ере всё видно и знамо как сделано. Почёт и уважение!-)

Аватар пользователя Kostyan Kostyan 29 июля 2009 в 11:53

Из- за этих модулей, любой крупный проект так тормозит, что задумаешься поневоле, а не легче ли что - то руками дописать...

Аватар пользователя volocuga volocuga 29 июля 2009 в 17:10

Я правильно вообще яву юзаю?Между <head></head>

<script type="text/javascript">
Drupal.behaviors.singular = function (context) {
  $('#growl > div:not(.processed)').each(function() {
    $(this).addClass('processed');
    $('span.close', this).click(function() {
      $(this).parent().hide('fast');
    });
    if ($(this).is('.autoclose')) {
      // Если сообщение содержит ссылку, автозакрытие - не самая лучшая идея.
      if ($('a', this).size() > 0) {
        $(this).removeClass('autoclose');
      }
      else {
        // Добавляем 5-секундную паузу перед скрытием сообщения.
        $(this).animate({opacity:.95}, 5000, 'linear', function() {
          $(this).hide('fast');
        });
      }
    }
  });
}
</script>
Аватар пользователя Химический Али Химический Али 29 июля 2009 в 17:50

Вроде да. Попробуй засунуть скрипт перед закрытием тела хтмл-документа (/body).

Просьба попробовать модуль и сообщить, как отрабатывает. У меня некоторое время в IE не пахало, потом пошло.

Аватар пользователя wanders.32 wanders.32 5 августа 2009 в 15:29

Али, спасибо) как пробежался по опен атриуму, посетила та же идея - вынести сообщения в окно, у меня на текущем проекте сообщения оформлены красиво и много - бесит сжираемое место на странице