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

Всем привет!

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

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

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

готовый результат

Посмотрим сначала как выводится кнопка "Редактировать" внутри записи. Идем в ..\templates\default\controllers\content\item_view.tpl.php и
находим следующие строки:

        if (cmsUser::isAllowed($ctype['name'], 'edit', 'all') ||
        (cmsUser::isAllowed($ctype['name'], 'edit', 'own') && $item['user_id'] == $user->id)){
            $this->addToolButton(array(
                'class' => 'edit',
                'title' => sprintf(LANG_CONTENT_EDIT_ITEM, $ctype['labels']['create']),
                'href'  => href_to($ctype['name'], 'edit', $item['id'])
            ));
        }

т.е. перед выводом кнопки проверяется ряд условий, при выполнении которых функции addToolButton() передаются соответствующие параметры (css-класс, заголовок и url). Всё элементарно и понятно)) Переносим подобную структуру в файл ..\templates\default\content\default_list.tpl.php — шаблон вывода списка записей по умолчанию — так, например, выводятся статьи и блоги в дефолтном шаблоне.

Находим тег <div class="content_list_item ...> внутри которого выводятся поля записи (у меня это 23-ая строка), и сразу за ним добавляем найденный код (точнее небольшую его модификацию):

<?php if (cmsUser::isAllowed($ctype['name'], 'edit', 'all') ||
         (cmsUser::isAllowed($ctype['name'], 'edit', 'own') && $item['user_id'] == $user->id)){ ?>
    <div class="actions">
        <?php if (cmsUser::isAdmin()) { ?>
            <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>
        <?php } ?>
        <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>
    </div>
<?php } ?>

Как видно, здесь мы обернули кнопки/ссылки в div с классом "actions" и добавили еще кнопку "Удалить" запись, которая будет показываться только администратору сайта.
Теперь немного стилизуем добавленные ссылки. Открываем файл ..\templates\default\css\theme-content.css и в самом низу добавляем следующие строки:

.content_list_item .actions {
    float: right;
    visibility: hidden;
}
 
.content_list_item:hover .actions {
    visibility: visible;
}
 
.content_list_item .actions a {
    display: inline-block;
    width: 16px;
    height: 16px;
    overflow: hidden;
}
 
.edit-this {
    background: url("../images/icons/edit.png") no-repeat center center;
}
 
.delete-this {
    margin-right: 5px;
    background: url("../images/icons/delete.png") no-repeat center center;
}

Всё! Можем испытывать))
Кнопки "Удалить" и "Редактировать" будут видны администратору сайта для всех записей — тут он царь и бог)) А кнопка "Редактировать", при наведении курсора на статью или пост, будет показываться только автору записи. Гости и остальные пользователи (не авторы) никаких кнопок не увидят. Получился, такой своеобразный хак шаблона))))

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

Всем удачи!

"Опросы" для InstantCMS 2.x. Обновление которого так долго ждали ;)

Ещё один виджет бегущей строки для InstantCMS 2.x

instant2 instantcms 2 template разное шаблон шаблон 2

11 комментариев

Реклама #

F_a_R_i_D 9 лет назад #

То, что надо!
Респект!

Игорь Lu 9 лет назад #

Правильная задумка, тем более, что бывают ситуации, когда меню действий не выведешь из за особенностей дизайна.
По поводу хостинга, пользуюсь Этим уже больше двух лет. Не дорогой безлимитный хостинг без всяких ограничений и с хорошими параметрами. Можно создавать неограниченное количество доменов и субдоменов и БД на MySQL. Лично у меня на нём лежит больше десятка сайтов и файлов уже поти 100 гигов.
В общем, это как вариант, спросили, поделился, не сочтите за рекламу joke

А за идею, плюс однозначно

Алексей Т 9 лет назад #

Val могу делать для вам демо сайты на моем хосте

Алексей Т 9 лет назад #

~~вам~~ могу делать для вас zst

Val 9 лет назад #

Cтудия Sitestroi, выражаю вам огромную благодарность за предоставление бесплатного хостинга для размещения демо дополнений!

Дмитрий 9 лет назад #

Не совсем понятно. Есть же бесплатные хостинги, с вполне приемлемыми параметрами. Например www.hostinger.ru

• Mike • 9 лет назад #

Просьба ко всем — пишите по теме или по тому что с ней явно связано…

Def 6 лет назад #

в 2.9 как можно реализовать? изменились файлы(

Pocus 6 лет назад #

Val, спасибо за урок. Ваш код я слегка изменил, с тем, чтобы экспресс-меню было не только у автора и админа, но и у модератора, а так же добавил кнопки корзины. Получилось довольно клёво.

Теперь вопрос ко всем:
Как бы обойтись без правки или создания шаблонов вывода?
Может быть есть какой-то хук, срабатывающий при каждом создании ***_list_item?

Pocus 6 лет назад #

Кстати, если кому интересно.

Экспресс-меню

Код PHP:

<?php if ($item['is_approved'] || $is_moderator) { ?>
    <div class="actions">
        <?php if (cmsUser::isAllowed($ctype['name'], 'edit', 'all') || (cmsUser::isAllowed($ctype['name'], 'edit', 'own') && $item['user_id'] == $user->id)){ ?>
            <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']); ?>" 
            target="_blank"></a>
        <?php }?>
        <?php  if (cmsUser::isAllowed($ctype['name'], 'delete', 'all') || (cmsUser::isAllowed($ctype['name'], 'delete', 'own') && $item['user_id'] == $user->id)) { ?>
            <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']); ?>"
            onclick = "if(!confirm('<?php echo sprintf(LANG_CONTENT_DELETE_ITEM_CONFIRM, $ctype['labels']['create']); ?>')){ return false; }"></a>
        <?php }?>
        <?php  if ($item['is_approved'] && !$item['is_deleted']) { ?>
            <?php  if (cmsUser::isAllowed($ctype['name'], 'move_to_trash', 'all') || (cmsUser::isAllowed($ctype['name'], 'move_to_trash', 'own') && $item['user_id'] == $user->id)){?>
                <a href="<?php echo href_to($ctype['name'], 'trash_put', $item['id']); ?>" 
                class="basket-this" 
                title="<?php echo sprintf(LANG_BASKET_DELETE); ?>"
                onclick = "if(!confirm('<?php echo sprintf(LANG_CONTENT_DELETE_ITEM_CONFIRM, $ctype['labels']['create']); ?>')){ return false; }"></a>
            <?php }?>
        <?php }?>
        <?php if ($item['is_approved'] && $item['is_deleted']){ ?>
            <?php if (cmsUser::isAllowed($ctype['name'], 'restore', 'all') || (cmsUser::isAllowed($ctype['name'], 'restore', 'own') && $item['user_id'] == $user->id)){ ?>
                <a href="<?php echo href_to($ctype['name'], 'trash_remove', $item['id']); ?>" 
                class="restore-this" 
                title="<?php echo sprintf(LANG_RESTORE); ?>"></a>
            <?php }?>
        <?php }?>
    </div>
<?php } ?>

Код CSS:

/*=== express menu ===*/
.content_list .actions {
    visibility: hidden;
    position: absolute;
    right: 10px;
    z-index: 1;
    line-height: 0;
    background-color: #fff;
}
.content_list > div:hover .actions { visibility: visible; }
.content_list > div:hover .actions a {
    display: inline-block;
    width: 16px;
    height: 16px;
    overflow: hidden;
    padding: 5px;
}
.content_list .actions a:hover { background-color: #ff8888; }
.content_list .actions a.edit-this:hover,
.content_list .actions a.restore-this:hover { background-color: #88ff88 !important; }
a.delete-this { background: url("../../default/images/icons/delete.png") no-repeat center center; }
a.basket-this { background: url("../../default/images/icons/basket_put.png") no-repeat center center; }
a.restore-this { background: url("../../default/images/icons/basket_remove.png") no-repeat center center; }
a.edit-this { background: url("../../default/images/icons/edit.png") no-repeat center center; }

Pocus 6 лет назад #

Забыл уточнить.
Чтобы абсолютно-позиционируемое меню отображалось там, где нужно, родительский контейнер должен иметь относительное позиционирование.
Например для "плиточного" шаблона, в файле "ваш_шаблон/css/theme_content.css" добавьте правило для класса:
.content_list.tiled .tile {
...
...
position: relative;
}

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

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

Реклама #

F_a_R_i_D 9 лет назад #

Игорь Lu 9 лет назад #

Алексей Т 9 лет назад #

Алексей Т 9 лет назад #

Val 9 лет назад #

Дмитрий 9 лет назад #

• Mike • 9 лет назад #

Def 6 лет назад #

Pocus 6 лет назад #

Pocus 6 лет назад #

Pocus 6 лет назад #

Еще от автора

СтопХам - userscript для instantcms.ru

Предпросмотр для InstantCMS 2

Just4Fun - Аватарки!

InstantCMS Team

О проекте

Поддержка

Дополнения