Кнопки быстрого редактирования

+41
3.85K
Всем привет!

Наряду со стандартными дополнениями периодически появляются мысли и потребности в реализации мелких плюшек для InstantCMS 2. Специально для этого я завел здесь у себя в блоге раздел "Разное", где планирую постить интересные мысли, небольшие доработки, хаки и другие подобные мелочи.

Иллюстрация

Сегодня я хотел бы описать как в список записей можно добавить кнопки "Редактирование" и "Удалить" для быстрого перехода к соответствующим функциям.
При разработке и тестировании одного из дополнений, у меня возникла потребность в частом редактировании записей. Стандартный функционал предполагает для этого перейти в список требуемого типа контента (через меню), затем войти "в тело" самой записи, и только после мы можем нажать кнопку "Редактировать ..." справа в меню действий. На моем уже стареньком компьютере с запущенным OpenServer'ом процесс открытия любой страницы сайта — очень не быстрый. Сокращение списка вышеописанных действий, пусть даже на один шаг, очень экономит время и нервы))).

И так, приступим...

Иллюстрация
готовый результат

Посмотрим сначала как выводится кнопка "Редактировать" внутри записи. Идем в ..\templates\default\controllers\content\item_view.tpl.php и
находим следующие строки:
  1. if (cmsUser::isAllowed($ctype['name'], 'edit', 'all') ||
  2. (cmsUser::isAllowed($ctype['name'], 'edit', 'own') && $item['user_id'] == $user->id)){
  3. $this->addToolButton(array(
  4. 'class' => 'edit',
  5. 'title' => sprintf(LANG_CONTENT_EDIT_ITEM, $ctype['labels']['create']),
  6. 'href' => href_to($ctype['name'], 'edit', $item['id'])
  7. ));
  8. }
т.е. перед выводом кнопки проверяется ряд условий, при выполнении которых функции addToolButton() передаются соответствующие параметры (css-класс, заголовок и url). Всё элементарно и понятно)) Переносим подобную структуру в файл ..\templates\default\content\default_list.tpl.php — шаблон вывода списка записей по умолчанию — так, например, выводятся статьи и блоги в дефолтном шаблоне.

Находим тег <div class="content_list_item ...> внутри которого выводятся поля записи (у меня это 23-ая строка), и сразу за ним добавляем найденный код (точнее небольшую его модификацию):
  1. <?php if (cmsUser::isAllowed($ctype['name'], 'edit', 'all') ||
  2. (cmsUser::isAllowed($ctype['name'], 'edit', 'own') && $item['user_id'] == $user->id)){ ?>
  3. <div class="actions">
  4. <?php if (cmsUser::isAdmin()) { ?>
  5. <a href="<?php echo href_to($ctype['name'], 'delete', $item['id']); ?>" class="delete-this" title="<?php echo sprintf(LANG_CONTENT_DELETE_ITEM, $ctype['labels']['create']); ?>"></a>
  6. <?php } ?>
  7. <a href="<?php echo href_to($ctype['name'], 'edit', $item['id']); ?>" class="edit-this" title="<?php echo sprintf(LANG_CONTENT_EDIT_ITEM, $ctype['labels']['create']); ?>"></a>
  8. </div>
  9. <?php } ?>
Как видно, здесь мы обернули кнопки/ссылки в div с классом "actions" и добавили еще кнопку "Удалить" запись, которая будет показываться только администратору сайта.
Теперь немного стилизуем добавленные ссылки. Открываем файл ..\templates\default\css\theme-content.css и в самом низу добавляем следующие строки:
  1. .content_list_item .actions {
  2. float: right;
  3. visibility: hidden;
  4. }
  5.  
  6. .content_list_item:hover .actions {
  7. visibility: visible;
  8. }
  9.  
  10. .content_list_item .actions a {
  11. display: inline-block;
  12. width: 16px;
  13. height: 16px;
  14. overflow: hidden;
  15. }
  16.  
  17. .edit-this {
  18. background: url("../images/icons/edit.png") no-repeat center center;
  19. }
  20.  
  21. .delete-this {
  22. margin-right: 5px;
  23. background: url("../images/icons/delete.png") no-repeat center center;
  24. }
Всё! Можем испытывать))
Кнопки "Удалить" и "Редактировать" будут видны администратору сайта для всех записей — тут он царь и бог)) А кнопка "Редактировать", при наведении курсора на статью или пост, будет показываться только автору записи. Гости и остальные пользователи (не авторы) никаких кнопок не увидят. Получился, такой своеобразный хак шаблона))))

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

Всем удачи!
+2
F_a_R_i_D F_a_R_i_D 8 лет назад #
То, что надо!
Респект!
+1
Игорь Lu Игорь Lu 8 лет назад #
Правильная задумка, тем более, что бывают ситуации, когда меню действий не выведешь из за особенностей дизайна.
По поводу хостинга, пользуюсь Этим уже больше двух лет. Не дорогой безлимитный хостинг без всяких ограничений и с хорошими параметрами. Можно создавать неограниченное количество доменов и субдоменов и БД на MySQL. Лично у меня на нём лежит больше десятка сайтов и файлов уже поти 100 гигов.
В общем, это как вариант, спросили, поделился, не сочтите за рекламу joke
А за идею, плюс однозначно v
+1
Алексей Т Алексей Т 8 лет назад #
Val могу делать для вам демо сайты на моем хосте
0
Алексей Т Алексей Т 8 лет назад #
вам могу делать для вас zst
+3
Val Val 8 лет назад #
Cтудия Sitestroi, выражаю вам огромную благодарность за предоставление бесплатного хостинга для размещения демо дополнений!
0
Дмитрий Дмитрий 8 лет назад #
Не совсем понятно. Есть же бесплатные хостинги, с вполне приемлемыми параметрами. Например www.hostinger.ru
+2
• Mike • • Mike • 8 лет назад #
Просьба ко всем — пишите по теме или по тому что с ней явно связано…
0
Def Def 6 лет назад #
в 2.9 как можно реализовать? изменились файлы(
0
Pocus Pocus 6 лет назад #
Val, спасибо за урок. Ваш код я слегка изменил, с тем, чтобы экспресс-меню было не только у автора и админа, но и у модератора, а так же добавил кнопки корзины. Получилось довольно клёво.



Теперь вопрос ко всем:
Как бы обойтись без правки или создания шаблонов вывода?
Может быть есть какой-то хук, срабатывающий при каждом создании ***_list_item?
0
Pocus Pocus 6 лет назад #
Кстати, если кому интересно.
Экспресс-меню
0
Pocus Pocus 6 лет назад #
Забыл уточнить.
Чтобы абсолютно-позиционируемое меню отображалось там, где нужно, родительский контейнер должен иметь относительное позиционирование.
Например для "плиточного" шаблона, в файле "ваш_шаблон/css/theme_content.css" добавьте правило для класса:
.content_list.tiled .tile {
...
...
position: relative;
}

Еще от автора

СтопХам - userscript для instantcms.ru
Всем привет! Презентую чужую разработку со своей небольшой доработкой .
Предпросмотр для InstantCMS 2
Всем привет!
Just4Fun - Аватарки!
Здравствуйте, любители InstantCMS 2.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.