1. Главная
  2. Блоги
  3. Блог direqtor

Матросы на зебрахъ, или Как раскрасить Drupal в цвета российского флага

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

Аватар пользователя direqtor direqtor 30 декабря 2008 в 5:55

Возникла тут с дикого утреннего бодуна после отгремевшего вчера предновогоднего корпоративчика мысль раскрасить друпал в цвета российского флага. Точнее его таблицы.

Возможность отличить четную строку таблицы от нечетной предоставляется в ядре Drupal, в стандартом выводе таблиц для каждой строки tr присутствуют классы odd и even. А при выводе нод есть переменная с метким названием $zebra, указывающая на четность или нечетность ноды в списке. Но иногда возникает необходимость (дизайнер, гад, нарисовал) отличать каждую третью или десятую строку таблицы и соответствующим образом изменять её внешний вид при помощи CSS-правил.

За вывод табличного содержимого в Drupal отвечает функция theme_table(). Чтобы добавить в вывод таблиц свои возможности надо написать в файле вашей темы template.php пользовательскую функцию с названием phptemplate_table(). Параметры функции должны совпадать с исходной, а код мы скопируем оттуда же и лишь немного дополним его. Для данного примера мои приправы в этот PHP-супчик находятся в строках 59-69:

  1. function phptemplate_table($header, $rows, $attributes = array(), $caption = NULL) {
  2.   // Add sticky headers, if applicable.
  3.   if (count($header)) {
  4.     drupal_add_js('misc/tableheader.js');
  5.     // Add 'sticky-enabled' class to the table to identify it for JS.
  6.     // This is needed to target tables constructed by this function.
  7.     $attributes['class'] = empty($attributes['class']) ? 'sticky-enabled' : ($attributes['class'] .' sticky-enabled');
  8.   }
  9.   $output = '<table'. drupal_attributes($attributes) .">\n";
  10.   if (isset($caption)) {
  11.     $output .= '<caption>'. $caption ."</caption>\n";
  12.   }
  13.   // Format the table header:
  14.   if (count($header)) {
  15.     $ts = tablesort_init($header);
  16.     // HTML requires that the thead tag has tr tags in it follwed by tbody
  17.     // tags. Using ternary operator to check and see if we have any rows.
  18.     $output .= (count($rows) ? ' <thead><tr>' : ' <tr>');
  19.     foreach ($header as $cell) {
  20.       $cell = tablesort_header($cell, $header, $ts);
  21.       $output .= _theme_table_cell($cell, TRUE);
  22.     }
  23.     // Using ternary operator to close the tags based on whether or not there are rows
  24.     $output .= (count($rows) ? " </tr></thead>\n" : "</tr>\n");
  25.   }
  26.   else {
  27.     $ts = array();
  28.   }
  29.   // Format the table rows:
  30.   if (count($rows)) {
  31.     $output .= "<tbody>\n";
  32.     $flip = array('even' => 'odd', 'odd' => 'even');
  33.     $class = 'even';
  34.     foreach ($rows as $number => $row) {
  35.       $attributes = array();
  36.       // Check if we're dealing with a simple or complex row
  37.       if (isset($row['data'])) {
  38.         foreach ($row as $key => $value) {
  39.           if ($key == 'data') {
  40.             $cells = $value;
  41.           }
  42.           else {
  43.             $attributes[$key] = $value;
  44.           }
  45.         }
  46.       }
  47.       else {
  48.         $cells = $row;
  49.       }
  50.       if (count($cells)) {
  51.         // Add odd/even class
  52.         $class = $flip[$class];
  53.         if (isset($attributes['class'])) {
  54.           $attributes['class'] .= ' '. $class;
  55.         }
  56.         else {
  57.           $attributes['class'] = $class;
  58.         }
  59.         switch ($number % 3) {
  60.           case 0:
  61.            $attributes['class'] = empty($attributes['class']) ? 'one' : ($attributes['class'] .' one');
  62.           break;
  63.           case 1:
  64.             $attributes['class'] = empty($attributes['class']) ? 'two' : ($attributes['class'] .' two');
  65.           break;
  66.           case 2:
  67.             $attributes['class'] = empty($attributes['class']) ? 'three' : ($attributes['class'] .' three');
  68.           break;
  69.         }
  70.         // Build row
  71.         $output .= ' <tr'. drupal_attributes($attributes) .'>';
  72.         $i = 0;
  73.         foreach ($cells as $cell) {
  74.           $cell = tablesort_cell($cell, $header, $ts, $i++);
  75.           $output .= _theme_table_cell($cell);
  76.         }
  77.         $output .= " </tr>\n";
  78.       }
  79.     }
  80.  
  81.     $output .= "</tbody>\n";
  82.   }
  83.  
  84.   $output .= "</table>\n";
  85.   return $output;
  86. }

Если кому-то непонятно, почему 0 - это один, 1 - это два, а 2 - это три, отвечу, что так считают даже трезвые программисты.

Теперь добавим в файл стилей темы (обычно style.css) немного краски

.one, tr.one {
  background: white;
}
.two, tr.two {
  background: blue;
}
.three, tr.three {
  background: red;
}

И результат:

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

Если вам необходимо использовать в дизайне таблиц пять цветов, то добавленный код дожен быть таким:

switch ($number % 5) {
  case 0:
    $attributes['class'] = empty($attributes['class']) ? 'one' : ($attributes['class'] .' one');
  break;
  case 1:
    $attributes['class'] = empty($attributes['class']) ? 'two' : ($attributes['class'] .' two');
  break;
  case 2:
    $attributes['class'] = empty($attributes['class']) ? 'three' : ($attributes['class'] .' three');
  break;
  case 3:
    $attributes['class'] = empty($attributes['class']) ? 'four' : ($attributes['class'] .' four');
  break;
  case 4:
    $attributes['class'] = empty($attributes['class']) ? 'five' : ($attributes['class'] .' five');
  break;
}

А если просто выделить каждую десятую строку, то так:

  if($number % 10 == 9) $attributes['class'] = empty($attributes['class']) ? 'ten' : ($attributes['class'] .' ten');

И не забудьте про соответствующие этим классам CSS-правила в файле стилей.

Источники:

[ru-api=theme_table]
Мътросы на зебрахъ, или Как раскрасить Drupal в цвета российского флага

ЗЫ. Всех с Новым 2009-м годом!

Комментарии

Аватар пользователя glu2006 glu2006 30 декабря 2008 в 10:36

Есть предложение создать раздел ПЕРЛЫ С БОДУНА :))))).
По сути топика - полезно, плюсанул бы. Smile

С наступающим НГ.

Аватар пользователя Antoniy Antoniy 30 декабря 2008 в 12:15

Спасибо! Да, практично. А если еще креатив к CSS приложить, то работа в админке веселее и эстетичнее будет. И для зарегенных юзеров, у кого они есть.

Аватар пользователя direqtor direqtor 30 декабря 2008 в 20:17

Я? да я всего лишь взял три самых известных в России цвета...
У нас, конечно, приханкайские поляны знамениты не менее чуйских долин, но корпоративы в нашей конторе проходят под шампанское и коньячок.

Аватар пользователя gilmor gilmor 30 декабря 2008 в 20:58

Хорошая заметка. Полезно.
Отмечу лишь мелкую «опечатку»

"direqtor" wrote:
if($number % 5 == 9)

В место 5 явно 10 просится Wink

Аватар пользователя jagy jagy 12 января 2009 в 14:59

Ну, а по-моему, статья совершенно не информативна.
Это все равно что расписать как же нам добавить на каждую страничку еще один логотипчик. Действительно,о Боже, как?! ROFL
Вот если бы написали, как это все проделать для какой-то конкретной вьюхи или таблицы.
Вообще это минус финкции, что на классы odd и even вообще ничто не влияет; - хорошо хоть можно для тегов table и td передавать свои классы. Интересно чем tr перед разработчиками провинилося?

Аватар пользователя direqtor direqtor 12 января 2009 в 17:03

"AntonTau" wrote:
Ну, а по-моему, статья совершенно не информативна.
Абсолютно согласен с вами – тема сисек в ней совершенно не раскрыта.
"AntonTau" wrote:
Это все равно что расписать как же нам добавить на каждую страничку еще один логотипчик. Действительно,о Боже, как?!
Хм, что интересно, половина топиков этого сайта как раз об этом - люди не знают как в страничку добавить еще один логотипчик. Вот и поделитесь тоже с народом, как это сделать.
"AntonTau" wrote:
Вот если бы написали, как это все проделать для какой-то конкретной вьюхи или таблицы.
В функции [ru-api=theme_table] имеется параметр attributes. Приличные модули выводя таблицы добавляют туда класс или айди имени себя. Пишете такую же функцию, проверяете параметры, если совпало - ваш код, если нет - прямой вызов системной theme_table.
"AntonTau" wrote:
Вообще это минус финкции, что на классы odd и even вообще ничто не влияет;
CSS на них очень даже влияет... Для того и нужны.

Аватар пользователя direqtor direqtor 13 января 2009 в 7:15

Извиняюсь... Какой-то глюк. Вроде пользовался кнопкой Цитировать, но почему-то ваше имя встало... И не отредактируешь уже, почему-то Sad (ушол биться ап стену)

Аватар пользователя jagy jagy 12 января 2009 в 18:02

"direqtor" wrote:
CSS на них очень даже влияет... Для того и нужны.

CSS на все влияет =)))

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

Аватар пользователя direqtor direqtor 12 января 2009 в 18:20

"jagy" wrote:
Как раз сегодня надо было выделить строки если они входят в определенный словарь
Чем тогда odd и even виноваты?

Аватар пользователя jagy jagy 12 января 2009 в 19:27

"direqtor" wrote:
Чем тогда odd и even виноваты?

Ну вот надо мне выделить,например, 5 строчку. Я сначала думал что есть какая то возможность указать функции на то, чтобы вместо класса 'odd' или 'even' она использовала тот, что я передам (как,это уже другой вопрос). А тут все жестко или белое или серое.
Собственно вот этим боком и относятся.

Аватар пользователя direqtor direqtor 12 января 2009 в 20:35

"jagy" wrote:
Ну вот надо мне выделить,например, 5 строчку.
Если вам не нравится серое-белое покрасьте классы odd и even в белый цвет и все. Или в желтый и зеленый. Если вам надо выделить каждую пятую строчку, то вся информация выше - в статье... Хоть пятую, хоть десятую, хоть сто пяцсотую.

Аватар пользователя jagy jagy 13 января 2009 в 16:42

Аааа, как глухой со слепым!
Я к тому что нет возможности заменить стандартные классы строки через параметры функции (как например добавление класса к тегу table), а не к тому как окрасить сто какую-то там строку; это как раз тривиально.
Ладно, будем считать, что мы оба не поняли друг-друга. Smile