1 @inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.GridRowViewModel>
2 @using System.IO;
3 @using Dynamicweb;
4 @using Dynamicweb.Content;
5 @using Dynamicweb.Content.Items;
6 @using Dynamicweb.Security.Permissions;
7 @using Bluedesk.DynamicWeb.ItemTypes;
8 @using Bluedesk.DynamicWeb.ItemTypes.Configuration;
9 @using Dynamicweb.Frontend;
10 @using Dynamicweb.Frontend.Navigation
11 @using Dynamicweb.Ecommerce.ProductCatalog
12 @using Dynamicweb.Environment
13 @using Dynamicweb.Rendering;
14
15 @using Bluedesk.DynamicWeb.ItemTypes.Settings.Configuration;
16 @using Bluedesk.DynamicWeb.ItemTypes.BaseSolution;
17
18 @{
19 var colorService = new ColorSwatchService();
20
21 var master_configuration = Dynamicweb.Content.Services.Pages.GetPageByNavigationTag(Pageview.AreaID, "MasterConfiguration");
22
23 MasterConfig mc = master_configuration.Item.ToCodeFirstItem<MasterConfig>();
24
25 string BackgroundColor = Model.Item.GetString("BackgroundColor") == "transparent" ? "" : Model.Item.GetString("BackgroundColor");
26 string Height = Model.Item.GetString("Height") + "px";
27
28 var ItemID = Model.Item.Id;
29 string ModelID = Model.Id.ToString();
30 int ParagraphID = Model.Column(1).Paragraph.ID;
31
32 string StyleID = ParagraphID + "Style";
33 string ContentID = ParagraphID + "Content";
34 string FrameID = ParagraphID + "Frame";
35
36 Breakpoint _data = Dynamicweb.Content.Services.Items.GetItem("Breakpoint", ItemID).ToCodeFirstItem<Breakpoint>() ?? new Breakpoint();
37
38 string BreakPointValue = _data.Device.Breakpoint != 0 ? _data.Device.Breakpoint + "px" : "auto";
39 string MaxOrMinValue = _data.Device.MaxOrMin;
40 string Abbreviation = _data.Device.Abbreviation;
41 string iFrameWidth = _data.Device.Breakpoint != 0 ? (_data.Device.Breakpoint + 10) + "px" : "auto";
42
43 bool isVisualEditor = Dynamicweb.Context.Current.Request.GetBoolean("visualedit");
44
45 // var websitesettings = Dynamicweb.Content.Services.Items.GetItemById<WebsiteSettings>(Model.Area.Item.Id);
46 var font_configuration = Dynamicweb.Content.Services.Pages.GetPageByNavigationTag(Pageview.AreaID, "FontConfiguration");
47
48 var designRoot = "/Files/Templates/Designs/" + Pageview.Area.Layout.Design.Name;
49 }
50 <section>
51 <div>
52 @Model.Column(1).Output()
53 </div>
54 <div id="@ContentID">
55
56 @RenderBackgroundConfigurationTemplate(1)
57
58 @if (font_configuration != null)
59 {
60 foreach (var item in font_configuration.Item.ToCodeFirstItem<Bluedesk.DynamicWeb.ItemTypes.Pages.ConfigurationPagesParent>().GetChildConfigs<FontConfiguration>())
61 {
62 <link href="@item["FontLink"]" rel="stylesheet">
63 }
64 }
65
66 <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
67
68 </div>
69
70 @*<iframe style="width: @iFrameWidth; height: 350px; border: 1px solid red;" id="@FrameID"></iframe>*@
71 @*<div id="@StyleID"></div>*@
72
73 </section>
74
75 <script type="text/javascript">
76 // Vanilla Document Ready Listener
77 document.addEventListener('DOMContentLoaded', function () {
78 onTryItClick(@ParagraphID);
79 });
80 </script>
81
82 @if (isVisualEditor)
83 {
84
85 @*
86 <div class="breakpoint--@ItemID" style="width: @BreakPointValue; height: 300px;">
87 <iframe style="width: 100%; height: 300px; border: 1px solid red;" id="Frame-"></iframe>
88 <section class="breakpoint-container" id="Content-@Model.Column(1).Paragraph.ID">
89
90 @Model.Column(1).Output()
91 @RenderBackgroundConfigurationTemplate(1)
92
93 <button onclick="onTryItClick">Click it</button>
94
95 </section>
96 </div>
97 *@
98
99 <style>
100
101 .breakpoint--@Model.Item.Id {
102 display: flex;
103 flex-direction: row;
104 min-height: @Height;
105 background-color: #f1f1f1;
106 width: 100%;
107 }
108
109 .breakpoint-container {
110 display: flex;
111 flex-grow: 1;
112 flex-direction: row;
113 min-height: 50px;
114 margin: 25px;
115 width: 100%;
116 }
117
118 .breakpoint-container div {
119 width: 100%;
120 }
121
122 </style>
123 }
124
125 @functions{
126 string RenderBackgroundConfigurationTemplate(int ColumnCount)
127 {
128 string template = "";
129
130 string paragraphItemId = Model.Column(ColumnCount).Paragraph.Item.Id;
131 int paragraphID = Model.Column(ColumnCount).Paragraph.ID;
132 int UniqueID = Model.Column(ColumnCount).Paragraph.PageID;
133
134 BackgroundConfiguration _data = Dynamicweb.Content.Services.Items.GetItem("BackgroundConfiguration", paragraphItemId).ToCodeFirstItem<BackgroundConfiguration>() ?? new BackgroundConfiguration();
135
136 string shadowClass = _data.contentShadow ? "contentShadow" : "";
137 string backgroundImageRepeatClass = _data.BackgroundImageRepeat;
138 string backgroundImageSizeClass = "";
139
140 string BackgroundImagePositionX = _data.BackgroundImagePositionX;
141 string BackgroundImagePositionY = _data.BackgroundImagePositionY;
142
143 string BackgroundImagePositionClass = "";
144
145 if (backgroundImageRepeatClass == "no-repeat")
146 {
147 BackgroundImagePositionClass = BackgroundImagePositionY + "-" + BackgroundImagePositionX;
148 backgroundImageSizeClass = _data.BackgroundImageSize;
149 }
150
151 string contentGutterClass = _data.contentGutter;
152 string BackgroundPadding = _data.backgroundPadding;
153
154 string backgroundClass = !string.IsNullOrWhiteSpace(_data.BackgroundClass) ? string.Format("bg-{0}", _data.BackgroundClass) : "";
155 string backgroundStyle = !string.IsNullOrWhiteSpace(_data.BackgroundColor) ? $"background-color: {_data.BackgroundColor}; " : "";
156 backgroundStyle += !string.IsNullOrWhiteSpace(_data.BackgroundImage) ? $"background-image: url({_data.BackgroundImage}); " : "";
157
158 template = $@"
159 <div style=""display: flex; flex-direction: column; padding: 25px;"" >
160 <div class=""multicolumn--{UniqueID} multicolumn {backgroundClass} {backgroundImageRepeatClass} {BackgroundImagePositionClass} {backgroundImageSizeClass} {contentGutterClass} {BackgroundPadding}"" style=""display: flex; flex-direction: row;"">
161 <section class=""multicolumn__item"">
162 <div class=""cta-paragraph {shadowClass}"" style=""display: flex; flex-direction: column; padding: 25px;"">
163 <section class=""cta-paragraph__content-container"">
164 <header class=""cta-paragraph__header"">
165 <h2 class=""cta-paragraph__subheader"">Subheader</h2>
166 <h2 class=""cta-paragraph__header"">header</h2>
167 </header>
168 <div class=""cta-paragraph__text"">
169 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
170 </div>
171 </section>
172 </div>
173 </section>
174 <section class=""multicolumn__item"">
175 <div class=""cta-paragraph {shadowClass}"" style=""display: flex; flex-direction: column; padding: 25px;"">
176 <section class=""cta-paragraph__content-container"">
177 <header class=""cta-paragraph__header"">
178 <h2 class=""cta-paragraph__subheader"">Subheader</h2>
179 <h2 class=""cta-paragraph__header"">header</h2>
180 </header>
181 <div class=""cta-paragraph__text"">
182 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
183 </div>
184 </section>
185 </div>
186 </section>
187 </div>
188
189 {Model.Column(ColumnCount).Paragraph.Name.ToString()}
190 </div>";
191
192 return template;
193 }
194 }
195
196 @*@helper RenderBackgroundConfigurationTemplate(int ColumnCount)
197 {
198
199 string paragraphItemId = Model.Column(ColumnCount).Paragraph.Item.Id;
200 int paragraphID = Model.Column(ColumnCount).Paragraph.ID;
201 int UniqueID = Model.Column(ColumnCount).Paragraph.PageID;
202
203 BackgroundConfiguration _data = Dynamicweb.Content.Services.Items.GetItem("BackgroundConfiguration", paragraphItemId).ToCodeFirstItem<BackgroundConfiguration>() ?? new BackgroundConfiguration();
204
205 string shadowClass = _data.contentShadow ? "contentShadow" : "";
206 string backgroundImageRepeatClass = _data.BackgroundImageRepeat;
207 string backgroundImageSizeClass = "";
208
209 string BackgroundImagePositionX = _data.BackgroundImagePositionX;
210 string BackgroundImagePositionY = _data.BackgroundImagePositionY;
211
212 string BackgroundImagePositionClass = "";
213
214 if (backgroundImageRepeatClass == "no-repeat")
215 {
216 BackgroundImagePositionClass = BackgroundImagePositionY + "-" + BackgroundImagePositionX;
217 backgroundImageSizeClass = _data.BackgroundImageSize;
218 }
219
220 string contentGutterClass = _data.contentGutter;
221 string BackgroundPadding = _data.backgroundPadding;
222
223 string backgroundClass = !string.IsNullOrWhiteSpace(_data.BackgroundClass) ? string.Format("bg-{0}", _data.BackgroundClass) : "";
224 string backgroundStyle = !string.IsNullOrWhiteSpace(_data.BackgroundColor) ? $"background-color: {_data.BackgroundColor}; " : "";
225 backgroundStyle += !string.IsNullOrWhiteSpace(_data.BackgroundImage) ? $"background-image: url({_data.BackgroundImage}); " : "";
226
227 <div style="display: flex; flex-direction: column; padding: 25px;">
228 <div class="multicolumn--@UniqueID multicolumn @backgroundClass @backgroundImageRepeatClass @BackgroundImagePositionClass @backgroundImageSizeClass @contentGutterClass @BackgroundPadding" style="display: flex; flex-direction: row;">
229 <section class="multicolumn__item">
230 <div class="cta-paragraph @shadowClass" style="display: flex; flex-direction: column; padding: 25px;">
231 <section class="cta-paragraph__content-container">
232 <header class="cta-paragraph__header">
233 <h2 class="cta-paragraph__subheader">Subheader</h2>
234 <h2 class="cta-paragraph__header">header</h2>
235 </header>
236 <div class="cta-paragraph__text">
237 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
238 </div>
239 </section>
240 </div>
241 </section>
242 <section class="multicolumn__item">
243 <div class="cta-paragraph @shadowClass" style="display: flex; flex-direction: column; padding: 25px;">
244 <section class="cta-paragraph__content-container">
245 <header class="cta-paragraph__header">
246 <h2 class="cta-paragraph__subheader">Subheader</h2>
247 <h2 class="cta-paragraph__header">header</h2>
248 </header>
249 <div class="cta-paragraph__text">
250 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
251 </div>
252 </section>
253 </div>
254 </section>
255 </div>
256
257 @Model.Column(ColumnCount).Paragraph.Name.ToString()
258 </div>
259
260 }*@
261
262
263 @*<section class="cta-paragraph">
264
265 <div class="cta-paragraph__container">
266
267 <figure class="cta-paragraph__image-container">
268
269 <picture class="cta-paragraph__image">
270 <source media="(max-width: 400px)" srcset="/Admin/Public/GetImage.ashx?Image=/Files/Images/Homepage/Backend.png&x=-22&y=44&Crop=7&Format=webp&Quality=90&Compression=80&Width=400">
271 <source media="(max-width: 994px)" srcset="/Admin/Public/GetImage.ashx?Image=/Files/Images/Homepage/Backend.png&x=-22&y=44&Crop=7&Format=webp&Quality=90&Compression=80&Width=994">
272 <img src="/Admin/Public/GetImage.ashx?Image=/Files/Images/Homepage/Backend.png&x=-22&y=44&Crop=7&Format=webp&Quality=90&Compression=80&Width=1000" loading="lazy" alt="" class="cta-paragraph__image bg-contain " width="1980" height="500">
273 </picture>
274
275 </figure>
276
277 <section class="cta-paragraph__content">
278
279 <article class="cta-paragraph__content-container">
280
281 <header class="cta-paragraph__header ">
282 <h2 class="cta-paragraph__subheader">Dit is een subheader</h2>
283 <h2 class="cta-paragraph__header">Dit is een header</h2>
284 </header>
285
286 <div class="cta-paragraph__text ">
287 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt mauris elit, eget iaculis risus egestas eget. Etiam iaculis vehicula tortor ut viverra. Mauris venenatis lectus diam, eget ultricies arcu volutpat at. Suspendisse ac dolor varius, consectetur nisl id, tristique ipsum. Maecenas sed nunc in sapien posuere semper.</p>
288 </div>
289
290 <nav class="cta-paragraph__btn-navigation ">
291 <a href="http://#" class="btn default-btn btn__primar button--11" target="_self">
292 <span class="btn__text cta-paragraph__btn-label">Lees meer</span>
293 <i class="btn__icon fal fa-chevron-right"></i>
294 </a>
295
296 <a href="http://#" class="btn default-btn btn__primar button--11" target="_self">
297 <span class="btn__text cta-paragraph__btn-label">Lees meer</span>
298 <i class="btn__icon fal fa-chevron-right"></i>
299 </a>
300
301 </nav>
302
303 </article>
304 </section>
305
306
307
308 </div>
309
310 </section>*@
311