Skip to content

Instantly share code, notes, and snippets.

@hissy hissy/view.php
Created Jun 17, 2019

Embed
What would you like to do?
#concrete5 An example of the custom template for page list with Vue.js
<?php
defined('C5_EXECUTE') or die("Access Denied.");
$c = Page::getCurrentPage();
/** @var \Concrete\Core\Utility\Service\Text $th */
$th = Core::make('helper/text');
/** @var \Concrete\Core\Localization\Service\Date $dh */
$dh = Core::make('helper/date');
if ($c->isEditMode() && $controller->isBlockEmpty()) {
?>
<div class="ccm-edit-mode-disabled-item"><?php echo t('Empty Page List Block.') ?></div>
<?php
} else {
$data = new stdClass();
$data->pageListTitle = (isset($pageListTitle)) ? $pageListTitle : '';
$config = new stdClass();
$config->includeName = (isset($includeName) && $includeName) ? true : false;
$config->includeDate = (isset($includeDate) && $includeDate) ? true : false;
$config->includeDescription = (isset($includeDescription) && $includeDescription) ? true : false;
$config->useButtonForLink = (isset($useButtonForLink) && $useButtonForLink) ? true : false;
$config->displayThumbnail = (isset($displayThumbnail) && $displayThumbnail) ? true : false;
$config->buttonLinkText = (isset($buttonLinkText)) ? $buttonLinkText : '';
$config->noResultsMessage = (isset($noResultsMessage)) ? $noResultsMessage : '';
$data->config = $config;
$_pages = [];
foreach ($pages as $page) {
$_page = new stdClass();
$_page->title = $page->getCollectionName();
if ($page->getCollectionPointerExternalLink() != '') {
$_page->url = $page->getCollectionPointerExternalLink();
if ($page->openCollectionPointerExternalLinkInNewWindow()) {
$_page->target = '_blank';
}
} else {
$_page->url = $page->getCollectionLink();
$_page->target = $page->getAttribute('nav_target');
}
$_page->target = empty($_page->target) ? '_self' : $_page->target;
$_page->description = $page->getCollectionDescription();
$_page->description = $controller->truncateSummaries ? $th->wordSafeShortText($_page->description, $controller->truncateChars) : $_page->description;
$_page->thumbnail_original = false;
$_page->thumbnail_thumbnail = false;
if (isset($displayThumbnail) && $displayThumbnail) {
/** @var \Concrete\Core\Entity\File\File|\Concrete\Core\Entity\File\Version $thumbnail */
$thumbnail = $page->getAttribute('thumbnail');
if (is_object($thumbnail)) {
$_page->thumbnail_original = $thumbnail->getRelativePath();
$_page->thumbnail_thumbnail = $thumbnail->getThumbnailURL('rnn_thumbnail');
}
}
$_page->date = $dh->formatDateTime($page->getCollectionDatePublic(), true);
$_pages[] = $_page;
}
$data->pages = $_pages;
?>
<div id="<?= $controller->getIdentifier(); ?>">
<div class="ccm-block-page-list-wrapper">
<div v-if="pageListTitle != ''" class="ccm-block-page-list-header">
<h5>{{ pageListTitle }}</h5>
</div>
<div class="ccm-block-page-list-pages">
<concrete-page-entry v-for="page in pages" :page="page" :config="config"/>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
const ConcretePageEntry = {
props: ['page', 'config'],
template: `
<div>
<div v-if="config.displayThumbnail" class="ccm-block-page-list-page-entry-thumbnail">
<img :src="page.thumbnail_original" :alt="page.title"/>
</div>
<div class="ccm-block-page-list-page-entry-text">
<div v-if="config.useButtonForLink" class="ccm-block-page-list-title">
{{ page.title }}
</div>
<div v-else class="ccm-block-page-list-title">
<a :href="page.url" :target="page.target">{{ page.title }}</a>
</div>
<div v-if="config.includeDate" class="ccm-block-page-list-date">
{{ page.date }}
</div>
<div v-if="config.includeDescription" class="ccm-block-page-list-description">
{{ page.description }}
</div>
<div v-if="config.useButtonForLink" class="ccm-block-page-list-page-entry-read-more">
<a :href="page.url" :target="page.target">{{ config.buttonLinkText }}</a>
</div>
</div>
</div>
`
}
new Vue({
el: '#<?= $controller->getIdentifier(); ?>',
data: <?= json_encode($data); ?>,
components: {
'concrete-page-entry': ConcretePageEntry
}
})
</script>
<?php
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.