-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[FEATURE] Upgrade compact view to use video elements #3
base: master
Are you sure you want to change the base?
Changes from 1 commit
f900d47
6e16b67
41720ca
3bac2e5
34b643b
a5824d3
fba7291
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -11,6 +11,7 @@ | |
use TYPO3\CMS\Backend\Utility\BackendUtility; | ||
use TYPO3\CMS\Core\Imaging\Icon; | ||
use TYPO3\CMS\Core\Resource\ResourceStorage; | ||
use TYPO3\CMS\Core\Utility\GeneralUtility; | ||
|
||
/** | ||
* Class InlineControlContainer | ||
|
@@ -33,7 +34,7 @@ protected function renderPossibleRecordsSelectorTypeGroupDB(array $inlineConfigu | |
// Inject button before help-block | ||
if (strpos($selector, '</div><div class="help-block">') > 0) { | ||
$selector = str_replace('</div><div class="help-block">', $button . '</div><div class="help-block">', $selector); | ||
// Try to inject it into the form-control container | ||
// Try to inject it into the form-control container | ||
} elseif (preg_match('/<\/div><\/div>$/i', $selector)) { | ||
$selector = preg_replace('/<\/div><\/div>$/i', $button . '</div></div>', $selector); | ||
} else { | ||
|
@@ -67,7 +68,10 @@ protected function renderBynderButton(array $inlineConfiguration): string | |
$objectPrefix = $currentStructureDomObjectIdPrefix . '-' . $foreign_table; | ||
$nameObject = $currentStructureDomObjectIdPrefix; | ||
|
||
$compactViewUrl = BackendUtility::getModuleUrl('bynder_compact_view', ['element' => 'bynder' . $this->inlineData['config'][$nameObject]['md5']]); | ||
$compactViewUrl = BackendUtility::getModuleUrl('bynder_compact_view', [ | ||
'element' => 'bynder' . $this->inlineData['config'][$nameObject]['md5'], | ||
'assetTypes' => $this->getAssetTypesByAllowedElements($groupFieldConfiguration['appearance']['elementBrowserAllowed']) | ||
]); | ||
|
||
$this->requireJsModules[] = 'TYPO3/CMS/Bynder/CompactView'; | ||
$buttonText = htmlspecialchars($languageService->sL('LLL:EXT:bynder/Resources/Private/Language/locallang_be.xlf:compact_view.button')); | ||
|
@@ -105,4 +109,27 @@ protected function bynderStorageAvailable(): bool | |
} | ||
return false; | ||
} | ||
} | ||
|
||
/** | ||
* @param array $allowedElements | ||
* @return string | ||
*/ | ||
protected function getAssetTypesByAllowedElements($allowedElements): string | ||
{ | ||
$assetTypes = []; | ||
if (empty($allowedElements)) { | ||
$assetTypes = [BynderDriver::ASSET_TYPE_IMAGE, BynderDriver::ASSET_TYPE_VIDEO]; | ||
} else { | ||
$allowedElements = GeneralUtility::trimExplode(',', $allowedElements); | ||
if (in_array('png', $allowedElements)) { | ||
$assetTypes[] = BynderDriver::ASSET_TYPE_IMAGE; | ||
} | ||
|
||
if (in_array('mp4', $allowedElements)) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same here, There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. same here |
||
$assetTypes[] = BynderDriver::ASSET_TYPE_VIDEO; | ||
} | ||
} | ||
|
||
return implode(',', $assetTypes); | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -252,4 +252,4 @@ public function __destruct() | |
sleep(ceil(3 - $difference)); | ||
} | ||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,17 @@ | ||
<link rel="stylesheet" type="text/css" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. CSS isn't needed anymore? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think this is handled by the JS now. I followed documentation of https://developer-docs.bynder.com/UI%20components/#compact-view where it only mentioned the <script> to setup. |
||
href="https://d8ejoa1fys2rk.cloudfront.net/modules/compactview/includes/css/compactview_global-1.0.1.css"> | ||
|
||
<div id="bynder-compactview" | ||
data-language="{language}" | ||
data-button="Pick a file from Bynder" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why did you drop the button text? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you give me an example, where this is shown? The inline button uses this label. I cannot see where this is used in this compact view :-) |
||
data-folder="bynder-compactview" | ||
data-zindex="300" | ||
data-collections="false" | ||
data-header="false" | ||
data-assetTypes="{assetTypes}" | ||
data-autoload="true" | ||
data-fullScreen="true" | ||
data-collections="true" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Does that work selecting collections? Or does this only allow to browse collections? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. For me, it only allowed the quick filter of collections (in the bottom) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ok, so you still get single assets. It only enables you to browse the collections? |
||
data-defaultEnvironment="{apiBaseUrl}" | ||
data-button-id="1" | ||
></div> | ||
<script src="https://d8ejoa1fys2rk.cloudfront.net/modules/compactview/includes/js/client-1.0.1.min.js"></script> | ||
data-folder="bynder-compactview" | ||
data-fullScreen="true" | ||
data-header="false" | ||
data-language="{language}" | ||
data-mode="multi" | ||
data-zindex="300" | ||
> | ||
</div> | ||
<script src="https://d8ejoa1fys2rk.cloudfront.net/modules/compactview/includes/js/client-1.1.0.min.js"></script> | ||
|
||
<div id="importedAssets"></div> | ||
<script> | ||
|
@@ -34,4 +32,4 @@ | |
|
||
parentDocument.dispatchEvent(new CustomEvent("BynderAddMedia", {"detail": details})); | ||
}); | ||
</script> | ||
</script> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What about other image formats? What if we only allow
jpg
?