Skip to content

Commit

Permalink
see cl 1.17.0
Browse files Browse the repository at this point in the history
  • Loading branch information
Dennis Patzer committed May 6, 2020
1 parent a74fa32 commit aa0351f
Show file tree
Hide file tree
Showing 15 changed files with 243 additions and 8 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
@@ -1,6 +1,9 @@
# Changelog
All notable changes to this project will be documented in this file.

## [1.17.0] - 2020-05-06
- added new implementation for opening list items in modals (and deprecated the old modal module-based one)

## [1.16.3] - 2020-04-22
- added `decodeEntities` to `sortingText`

Expand Down
2 changes: 1 addition & 1 deletion composer.json
View file
Expand Up @@ -70,6 +70,6 @@
"foxy": true
},
"suggest": {
"heimrichhannot/contao-modal": "Allows display of list items in modal window."
"heimrichhannot/contao-reader-bundle": "This bundle offers a generic reader module to use with arbitrary contao entities containing standard reader specific functionality like field output, images and auto_item handling."
}
}
16 changes: 16 additions & 0 deletions src/Item/DefaultItem.php
View file
Expand Up @@ -95,6 +95,11 @@ class DefaultItem implements ItemInterface, \JsonSerializable
*/
protected $_useModal;

/**
* @var bool
*/
protected $_openListItemsInModal;

/**
* @var int
*/
Expand Down Expand Up @@ -425,6 +430,7 @@ public function addDetailsUrl($idOrAlias, ItemInterface $item, ListConfigModel $
if ($listConfig->addDetails) {
$this->setUseModal($listConfig->useModal);
$this->setJumpToDetails($listConfig->jumpToDetails);
$this->setOpenListItemsInModal($listConfig->openListItemsInModal);

if ($listConfig->jumpToDetailsMultilingual) {
$this->setJumpToDetailsMultilingual($listConfig->jumpToDetailsMultilingual);
Expand Down Expand Up @@ -704,4 +710,14 @@ public function setTableFields(array $tableFields)
{
$this->_tableFields = $tableFields;
}

public function isOpenListItemsInModal(): bool
{
return $this->_openListItemsInModal;
}

public function setOpenListItemsInModal(bool $openListItemsInModal): void
{
$this->_openListItemsInModal = $openListItemsInModal;
}
}
34 changes: 34 additions & 0 deletions src/Lists/DefaultList.php
View file
Expand Up @@ -153,6 +153,11 @@ class DefaultList implements ListInterface, \JsonSerializable
*/
protected $_jumpToOverviewLabel;

/**
* @var string
*/
protected $_modal;

/**
* Constructor.
*/
Expand All @@ -176,6 +181,7 @@ public function parse(string $listTemplate = null, string $itemTemplate = null,

$this->addDataAttributes();
$this->addMasonry();
$this->addModal();

if ($listConfig->addOverview) {
$this->addJumpToOverview($listConfig);
Expand Down Expand Up @@ -1136,4 +1142,32 @@ public function getTranslatedJumpToOverviewLabel(ListConfigModel $listConfig): s

return System::getContainer()->get('translator')->trans($label);
}

public function addModal()
{
$listConfig = $this->_manager->getListConfig();

if (!$listConfig->openListItemsInModal) {
return;
}

$templateName = $this->_manager->getItemTemplateByName($listConfig->listModalTemplate ?: 'list_modal_bs4');

$this->setModal(System::getContainer()->get('twig')->render($templateName, [
'module' => $this->getModule(),
]));
}

/**
* @return string
*/
public function getModal(): ?string
{
return $this->_modal;
}

public function setModal(string $modal): void
{
$this->_modal = $modal;
}
}
61 changes: 60 additions & 1 deletion src/Resources/contao/dca/tl_list_config.php
View file
Expand Up @@ -80,6 +80,8 @@
'sortingMode',
'useAlias',
'addDetails',
'openListItemsInModal',
'listModalReaderType',
'addShare',
'addAjaxPagination',
'addMasonry',
Expand All @@ -97,7 +99,10 @@
'sortingMode_' . \HeimrichHannot\ListBundle\Backend\ListConfig::SORTING_MODE_TEXT => 'sortingText',
'sortingMode_' . \HeimrichHannot\ListBundle\Backend\ListConfig::SORTING_MODE_MANUAL => 'sortingItems',
'useAlias' => 'aliasField',
'addDetails' => 'jumpToDetails,jumpToDetailsMultilingual',
'addDetails' => 'jumpToDetails,jumpToDetailsMultilingual,openListItemsInModal',
'openListItemsInModal' => 'listModalTemplate,listModalReaderType',
'listModalReaderType_css' => 'listModalReaderCssSelector',
'listModalReaderType_huh_reader' => 'listModalReaderModule',
'addShare' => 'jumpToShare,shareAutoItem',
'addAjaxPagination' => 'ajaxPaginationTemplate,addInfiniteScroll',
'addMasonry' => 'masonryStampContentElements',
Expand Down Expand Up @@ -412,6 +417,60 @@
'sql' => "int(10) unsigned NOT NULL default '0'",
'relation' => ['type' => 'hasOne', 'load' => 'eager'],
],
'openListItemsInModal' => [
'label' => &$GLOBALS['TL_LANG']['tl_list_config']['openListItemsInModal'],
'exclude' => true,
'inputType' => 'checkbox',
'eval' => ['tl_class' => 'w50', 'submitOnChange' => true, 'addAsDataAttribute' => true],
'sql' => "char(1) NOT NULL default ''"
],
'listModalTemplate' => [
'label' => &$GLOBALS['TL_LANG']['tl_list_config']['listModalTemplate'],
'exclude' => true,
'inputType' => 'select',
'options_callback' => function (\Contao\DataContainer $dc) {
return System::getContainer()->get('huh.utils.choice.twig_template')->getCachedChoices([
'list_modal_'
]);
},
'eval' => ['tl_class' => 'long clr', 'includeBlankOption' => true, 'chosen' => true],
'sql' => "varchar(128) NOT NULL default ''",
],
'listModalReaderType' => [
'label' => &$GLOBALS['TL_LANG']['tl_list_config']['listModalReaderType'],
'exclude' => true,
'filter' => true,
'inputType' => 'select',
'options' => [
'css_selector',
'huh_reader'
],
'reference' => &$GLOBALS['TL_LANG']['tl_list_config']['reference'],
'eval' => ['tl_class' => 'w50', 'mandatory' => true, 'includeBlankOption' => true, 'submitOnChange' => true, 'addAsDataAttribute' => true],
'sql' => "varchar(32) NOT NULL default ''"
],
'listModalReaderCssSelector' => [
'label' => &$GLOBALS['TL_LANG']['tl_list_config']['listModalReaderCssSelector'],
'exclude' => true,
'search' => true,
'inputType' => 'text',
'eval' => ['maxlength' => 128, 'tl_class' => 'w50', 'mandatory' => true, 'addAsDataAttribute' => true],
'sql' => "varchar(128) NOT NULL default ''"
],
'listModalReaderModule' => [
'label' => &$GLOBALS['TL_LANG']['tl_list_config']['listModalReaderModule'],
'exclude' => true,
'filter' => true,
'inputType' => 'select',
'options_callback' => function (\Contao\DataContainer $dc) {
return System::getContainer()->get('huh.utils.choice.model_instance')->getCachedChoices([
'dataContainer' => 'tl_module',
'labelPattern' => '%name% (ID %id%)'
]);
},
'eval' => ['tl_class' => 'w50', 'mandatory' => true, 'includeBlankOption' => true, 'chosen' => true, 'addAsDataAttribute' => true],
'sql' => "int(10) unsigned NOT NULL default '0'"
],
'addShare' => [
'label' => &$GLOBALS['TL_LANG']['tl_list_config']['addShare'],
'exclude' => true,
Expand Down
14 changes: 13 additions & 1 deletion src/Resources/contao/languages/de/tl_list_config.php
View file
Expand Up @@ -75,6 +75,16 @@

$lang['addDetails'][0] = 'Details-Weiterleitung hinzufügen';
$lang['addDetails'][1] = 'Klicken Sie hier, um jedem Eintrag der Liste eine Weiterleitung zum Anzeigen von Details hinzuzufügen.';
$lang['openListItemsInModal'][0] = 'Instanzen in Modalfenstern öffnen';
$lang['openListItemsInModal'][1] = 'Klicken Sie hier, um Einträge der Liste beim Klick in einem Modalfenster zu öffnen.';
$lang['listModalTemplate'][0] = 'Modalfenster-Template';
$lang['listModalTemplate'][1] = 'Wählen Sie hier ein Template aus.';
$lang['listModalReaderType'][0] = 'Modus zum Auffinden des Lesers auf der Detailseite';
$lang['listModalReaderType'][1] = 'Wählen Sie hier auf, wie das Leser-Modul auf der Detailseite gefunden werden kann.';
$lang['listModalReaderCssSelector'][0] = 'CSS-Selektor zum Auffinden des HTML-Codes des Lesers';
$lang['listModalReaderCssSelector'][1] = 'Der HTML-Code des Lesers auf der Detailseite wird durch Angabe dieses CSS-Selektors gesucht. Idealerweise handelt es sich um eine CSS-ID (Beispiele: #reader-166, .mod_newsreader).';
$lang['listModalReaderModule'][0] = 'Leser-Modul';
$lang['listModalReaderModule'][1] = 'Wählen Sie hier das Leser-Modul aus, in dem die Instanzen auf der Detailseite angezeigt werden.';
$lang['jumpToDetails'][0] = 'Weiterleitungsseite (Details; MUSS für die Einbeziehung in die Sitemap gesetzt sein!)';
$lang['jumpToDetails'][1] = 'Wählen Sie hier die Seite aus, zu der weitergeleitet wird, wenn es eine Detailseite gibt.';
$lang['jumpToDetailsMultilingual'] = [
Expand All @@ -99,7 +109,7 @@
$lang['customJumpToOverviewLabel'][1] = '';
$lang['jumpToOverviewLabel'][0] = 'Label für "zur Übersicht"';
$lang['jumpToOverviewLabel'][1] = '';
$lang['useModal'][0] = 'Elemente im Modalfenstern anzeigen';
$lang['useModal'][0] = 'Elemente im Modalfenstern anzeigen (DEPRECATED! Entfällt in v2)';
$lang['useModal'][1] = 'Wählen Sie diese Option, wenn die Elemente im Modalfenstern angezeigt werden sollen.';
$lang['useModalExplanation'] = 'Zum Aufruf der Leser-Elemente (also den Entitäten) ist es nötig, die Weiterleitungsseite mit einem Modal zu verknüpfen. Dazu legen Sie das Modal an, hinterlegen in diesem ein Leser-Modul als Inhaltselement und weisen es über "Modal verknüpfen" an Ihrer Weiterleitungsseite in der Seitenstruktur zu. Wenn Sie keine Weiterleitungsseite auswählen, wird die aktuelle Seite genutzt, auf der sich dieses Modul befindet.<br/><br/>Hinweis: Sollten in Ihrem Modulkontext mehrere Leser-Module eine Rolle spielen (bspw. zum Lesen und Bearbeiten der Entität), nutzen Sie dafür bitte heimrichhannot/contao-blocks.';

Expand Down Expand Up @@ -160,6 +170,8 @@
\HeimrichHannot\ListBundle\Backend\ListConfig::SORTING_MODE_MANUAL => 'Manuell',
\HeimrichHannot\ListBundle\Backend\ListConfig::SORTING_DIRECTION_ASC => 'Aufsteigend',
\HeimrichHannot\ListBundle\Backend\ListConfig::SORTING_DIRECTION_DESC => 'Absteigend',
'css_selector' => 'CSS-Selektor',
'huh_reader' => 'Leser-Modul (heimrichhannot/contao-reader-bundle)'
];

/**
Expand Down
88 changes: 88 additions & 0 deletions src/Resources/npm-package/js/contao-list-bundle.js
View file
Expand Up @@ -4,6 +4,7 @@ class ListBundle {
ListBundle.initPagination();
ListBundle.initMasonry();
ListBundle.initEvents();
ListBundle.initModal();
}

static initEvents() {
Expand All @@ -12,6 +13,93 @@ class ListBundle {
});
}

static initModal() {
// only bootstrap is supported at the moment
if ('undefined' === typeof window.jQuery) {
return;
}

const currentUrl = location.href,
lists = document.querySelectorAll('.huh-list .items[data-open-list-items-in-modal="1"]');

if (lists.length < 1) {
return;
}

// modal event listeners for history changing
document.querySelectorAll('.huh-list .items[data-open-list-items-in-modal="1"]').forEach((list) => {
const modalId = 'modal-' + list.parentNode.getAttribute('id');

window.jQuery('#' + modalId).on('hidden.bs.modal', (e) => {
history.pushState({
modalId: modalId
}, '', currentUrl);
});
});

// catch browser back button
addEventListener('popstate', (e) => {
window.jQuery('#' + e.state.modalId).modal('hide');
});

// modal links
utilsBundle.event.addDynamicEventListener('click', '.huh-list .items[data-open-list-items-in-modal="1"] .item .details.modal-link', function(item, event) {
event.preventDefault();

utilsBundle.ajax.get(item.getAttribute('href'), {}, {
onSuccess: (request) => {
const response = document.createElement('div'),
itemsWrapper = item.closest('.items'),
readerType = itemsWrapper.getAttribute('data-list-modal-reader-type'),
readerCssSelector = itemsWrapper.getAttribute('data-list-modal-reader-css-selector'),
readerModule = itemsWrapper.getAttribute('data-list-modal-reader-module'),
modalId = 'modal-' + itemsWrapper.parentNode.getAttribute('id');

let reader = null;

response.innerHTML = request.response.trim();

switch (readerType) {
case 'huh_reader':
reader = response.querySelector('#huh-reader-' + readerModule);

if (null === reader) {
console.log('Reader not found with selector: #huh-reader-' + readerModule);
return;
}

break;
case 'css_selector':
reader = response.querySelector(readerCssSelector);

if (null === reader) {
console.log('Reader not found with selector: ' + readerCssSelector);
return;
}

break;
}

if (null === reader) {
return;
}

document.getElementById(modalId).querySelector('.modal-content .modal-body').innerHTML = reader.outerHTML;

window.jQuery('#' + modalId).modal('show');

history.pushState({
modalId: modalId
}, '', item.getAttribute('href'));

history.pushState({
modalId: modalId
}, '', item.getAttribute('href'));
}
});
});
}

static initPagination() {
document.querySelectorAll('.huh-list .ajax-pagination').forEach(function(ajaxPagination) {
import(/* webpackChunkName: "jscroll" */ 'jscroll').then(() => {
Expand Down
2 changes: 1 addition & 1 deletion src/Resources/npm-package/package.json
View file
@@ -1,6 +1,6 @@
{
"name": "@hundh/contao-list-bundle",
"version": "1.0.5",
"version": "1.1.0",
"description": "This package contains the frontend assets of the composer bundle heimrichhannot/contao-list-bundle.",
"main": "js/contao-list-bundle.js",
"dependencies": {
Expand Down

0 comments on commit aa0351f

Please sign in to comment.