Skip to content

Commit 46e22b9

Browse files
jdcmsdjdcmsd
committed
grueling, hours-long attempt @ empty containers in lib
1 parent 409373e commit 46e22b9

20 files changed

Lines changed: 4599 additions & 159 deletions

File tree

‎examples/dotcms-laravel/app/Helpers/DotCmsHelpers.php‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
use Dotcms\PhpSdk\Utils\DotCmsHelper;
66
use Dotcms\PhpSdk\Model\Content\Contentlet;
7+
use Dotcms\PhpSdk\Model\Layout\ContainerRef;
78

89
class DotCmsHelpers
910
{
@@ -42,4 +43,34 @@ public function generateHtmlBasedOnProperty(Contentlet $content)
4243
// Fall back to the SDK simple HTML renderer
4344
return DotCmsHelper::simpleContentHtml($content->jsonSerialize());
4445
}
46+
47+
/**
48+
* Render a complete container using SDK functionality with empty state support
49+
*
50+
* @param ContainerRef $containerRef Container reference
51+
* @param array<Contentlet> $contentlets Array of contentlets
52+
* @param string|null $mode Current mode for UVE detection
53+
* @return string Container HTML
54+
*/
55+
public function renderContainer(ContainerRef $containerRef, array $contentlets, ?string $mode = null)
56+
{
57+
return DotCmsHelper::renderContainer(
58+
$containerRef,
59+
$contentlets,
60+
$mode,
61+
function(Contentlet $content) {
62+
return $this->generateHtmlBasedOnProperty($content);
63+
}
64+
);
65+
}
66+
67+
/**
68+
* Get CSS for empty container styling
69+
*
70+
* @return string CSS styles
71+
*/
72+
public function getEmptyContainerCSS()
73+
{
74+
return DotCmsHelper::getEmptyContainerCSS();
75+
}
4576
}

‎examples/dotcms-laravel/app/Http/Controllers/AppController.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,8 @@ public function index(Request $request)
8787
return view('page', [
8888
'pageAsset' => $page,
8989
'navigation' => $nav,
90-
'publishDate' => $publishDate
90+
'publishDate' => $publishDate,
91+
'mode' => $mode
9192
]);
9293
} catch (\Exception $e) {
9394
// Log the error

‎examples/dotcms-laravel/resources/css/app.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
display: grid;
2222
grid-template-columns: repeat(12, 1fr);
2323
gap: 1rem;
24+
margin-bottom: 1rem; /* Add vertical spacing between rows */
2425
}
2526

2627
.col-start-1 { grid-column-start: 1; }
@@ -49,3 +50,47 @@
4950
.col-end-11 { grid-column-end: 11; }
5051
.col-end-12 { grid-column-end: 12; }
5152
.col-end-13 { grid-column-end: 13; }
53+
54+
.text-shadow {
55+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
56+
}
57+
58+
/* DotCMS SDK Empty Container Styles - Include via helper or manually include below */
59+
/*
60+
To include SDK styles in your project, you can:
61+
1. Add this to your Blade template: {!! $dotCmsHelpers->getEmptyContainerCSS() !!}
62+
2. Or manually include the CSS from DotCmsHelper::getEmptyContainerCSS()
63+
*/
64+
65+
/* Manual inclusion of SDK empty container styles: */
66+
/* Empty Container Placeholder for UVE */
67+
.empty-container-placeholder {
68+
padding: 2rem;
69+
border: 2px dashed #d1d5db;
70+
border-radius: 0.5rem;
71+
text-align: center;
72+
color: #6b7280;
73+
font-style: italic;
74+
margin: 0;
75+
background-color: #f9fafb;
76+
transition: all 0.2s ease;
77+
min-height: 4rem;
78+
display: flex;
79+
align-items: center;
80+
justify-content: center;
81+
}
82+
83+
.empty-container-placeholder:hover {
84+
border-color: #9ca3af;
85+
background-color: #f3f4f6;
86+
}
87+
88+
/* UVE Ghost Contentlet - wrapper that UVE can detect but is visually transparent */
89+
.uve-ghost-contentlet {
90+
/* Make the wrapper transparent to UVE detection but maintain visual container */
91+
display: block;
92+
position: relative;
93+
margin: 0;
94+
padding: 0;
95+
min-height: 6rem; /* Ensure adequate hover target for UVE */
96+
}

‎examples/dotcms-laravel/resources/views/layouts/container.blade.php‎

Lines changed: 4 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,4 @@
1-
@php
2-
$containerAttrs = [
3-
'data-dot-object' => 'container',
4-
'data-dot-identifier' => $containerRef->identifier ?? '',
5-
'data-dot-accept-types' => $containerRef->acceptTypes ?? '',
6-
'data-max-contentlets' => $containerRef->maxContentlets ?? '',
7-
'data-dot-uuid' => $containerRef->uuid ?? ''
8-
];
9-
@endphp
10-
11-
<div {!! $dotCmsHelpers->htmlAttr($containerAttrs) !!}>
12-
@foreach($containerRef->contentlets as $content)
13-
@php
14-
$contentAttrs = [
15-
'data-dot-object' => 'contentlet',
16-
'data-dot-identifier' => $content->identifier ?? '',
17-
'data-dot-basetype' => $content->baseType ?? '',
18-
'data-dot-title' => $content->widgetTitle ?? $content->title ?? '',
19-
'data-dot-inode' => $content->inode ?? '',
20-
'data-dot-type' => $content->contentType ?? '',
21-
'data-dot-container' => json_encode([
22-
'acceptTypes' => $containerRef->acceptTypes ?? '',
23-
'identifier' => $containerRef->identifier ?? '',
24-
'maxContentlets' => $containerRef->maxContentlets ?? '',
25-
'variantId' => $containerRef->variantId ?? '',
26-
'uuid' => $containerRef->uuid ?? ''
27-
])
28-
];
29-
@endphp
30-
31-
<div {!! $dotCmsHelpers->htmlAttr($contentAttrs) !!}>
32-
{!! $dotCmsHelpers->generateHtmlBasedOnProperty($content) !!}
33-
</div>
34-
@endforeach
35-
</div>
1+
{{--
2+
Container template using SDK functionality for empty state handling and UVE compatibility
3+
--}}
4+
{!! $dotCmsHelpers->renderContainer($containerRef, $containerRef->contentlets ?? [], $mode ?? null) !!}

‎examples/dotcms-laravel/resources/views/page.blade.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@
2121
@foreach($column->containers as $containerRef)
2222
@include('layouts.container', [
2323
'containerRef' => $containerRef,
24-
'containers' => $pageAsset->containers ?? []
24+
'containers' => $pageAsset->containers ?? [],
25+
'mode' => $mode ?? null
2526
])
2627
@endforeach
2728
@endif

‎examples/dotcms-symfony/assets/app.js‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {createUVESubscription, initUVE} from '@dotcms/uve';
12
import './bootstrap.js';
23
/*
34
* Welcome to your app's main JavaScript file!
@@ -9,11 +10,14 @@ import './styles/app.css';
910

1011
console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');
1112

12-
// dotUVE is a global variable that is set by the dotCMS UVE JavaScript API
13-
if (window.dotUVE) {
14-
window.dotUVE.createSubscription('changes', (changes) => {
13+
// Initialize UVE using the official package
14+
try {
15+
initUVE();
16+
createUVESubscription('changes', (changes) => {
17+
console.log('🔄 UVE changes detected:', changes);
1518
window.location.reload();
16-
})
17-
} else {
18-
console.warn('dotUVE is not available, you might experience issues with the the Universal Visual Editor');
19+
});
20+
console.log('✅ UVE initialized successfully');
21+
} catch (error) {
22+
console.warn('dotUVE is not available, you might experience issues with the Universal Visual Editor', error);
1923
}

0 commit comments

Comments
 (0)