1 @{
2 bool globalTabIsActive = GetBoolean("Item.Active.Value");
3 string globalTabClassName = "section-tabs__navigation__item";
4 string glboalTabContentClassName = "section-tabs__content__item section-tabs__content__item--with-sub-tabs";
5 string globalTabMobileClassName = "section-tabs__navigation-mobile__item";
6
7 if (globalTabIsActive) {
8 globalTabClassName += " js-active";
9 glboalTabContentClassName += " js-active";
10 globalTabMobileClassName += " js-active";
11 }
12 }
13
14 @SnippetStart("GlobalTabs")
15 <li class="@globalTabClassName"><span class="section-tabs__headline">@GetString("Item.TabName")</span></li>
16 @SnippetEnd("GlobalTabs")
17
18 @SnippetStart("GlobalTabsMobileNavigation")
19 <li class="@globalTabMobileClassName"></li>
20 @SnippetEnd("GlobalTabsMobileNavigation")
21
22 @SnippetStart("GlobalTabContents")
23 <li class="@glboalTabContentClassName"><ul class="section-tabs__sub-tabs__navigation">
24 @foreach (var subTab in GetLoop("Item.SubTabs")) {
25 bool subTabIsActive = subTab.GetBoolean("Item.SubTabs.Active");
26 string subTabClassName = "section-tabs__sub-tabs__navigation__item";
27
28 if (subTabIsActive) {
29 subTabClassName += " js-active";
30 }
31
32 <li class="@subTabClassName" @if (subTab.GetString("Item.SubTabs.Type") == "bricktiler") {<text>onclick="loadBtScript()"</text>}>
33 @subTab.GetString("Item.SubTabs.TabName")
34 </li>
35 }
36 </ul><ul class="section-tabs__sub-tabs__content">
37 @foreach (var subTab in GetLoop("Item.SubTabs")) {
38 bool subTabIsActive = subTab.GetBoolean("Item.SubTabs.Active");
39 string subTabClassName = "section-tabs__sub-tabs__content__item";
40
41 if (subTabIsActive) {
42 subTabClassName += " js-active";
43 }
44
45 <li class="@subTabClassName">
46 @if (subTab.GetString("Item.SubTabs.Type") == "content_or_code") {
47 if (!string.IsNullOrWhiteSpace(subTab.GetString("Item.SubTabs.Code"))) {
48 <text>@subTab.GetString("Item.SubTabs.Code")</text>
49 } else {
50 <img src="@subTab.GetString("Item.SubTabs.Image")" alt="" /><div class="section__rich-text">
51 @subTab.GetString("Item.SubTabs.BodyText")
52 </div>
53
54 if (!string.IsNullOrWhiteSpace(subTab.GetString("Item.SubTabs.Link"))) {
55 <a class="button button-simple button-simple--inverted" href="@subTab.GetString("Item.SubTabs.Link")">
56 @subTab.GetString("Item.SubTabs.LinkText")
57 </a>
58 }
59 }
60 } else if (subTab.GetString("Item.SubTabs.Type") == "bricktiler") {
61 <text>@RenderBrickTiler()</text>
62 } else if (subTab.GetString("Item.SubTabs.Type") == "visualization_tool" || subTab.GetString("Item.SubTabs.Type") == "texture_tool") {
63 string productnumber = System.Web.HttpContext.Current.Items["productnumber"].ToString().Replace(" ","");
64 string link = subTab.GetString("Item.SubTabs.Link");
65
66 if (!string.IsNullOrWhiteSpace(productnumber)) {
67 link += "#brick=" + productnumber;
68 } else {
69 link += "#brick=RT150";
70 }
71 if (subTab.GetString("Item.SubTabs.Type") == "visualization_tool") {
72 link += "&viewmode=House";
73 }
74 if (subTab.GetString("Item.SubTabs.Type") == "texture_tool") {
75 link += "&viewmode=Wall";
76 }
77
78 if (!string.IsNullOrWhiteSpace(subTab.GetString("Item.SubTabs.Image"))) {
79 <img src="@subTab.GetString("Item.SubTabs.Image")" alt="" />
80 }
81 if (!string.IsNullOrWhiteSpace(subTab.GetString("Item.SubTabs.BodyText"))) {
82 <div class="section__rich-text">
83 @subTab.GetString("Item.SubTabs.BodyText")
84 </div>
85 }
86 if (!string.IsNullOrWhiteSpace(subTab.GetString("Item.SubTabs.Link"))) {
87 <a class="button button-simple button-simple--inverted" href="@link">@subTab.GetString("Item.SubTabs.LinkText")</a>
88 }
89 }
90 </li>
91 }
92 </ul></li>
93 @SnippetEnd("GlobalTabContents")
94
95 @helper RenderBrickTiler() {
96 <script>
97 var brickimages = [];
98 </script>
99
100 bool showBrickTiler = true;
101 string[] brickimages;
102
103 string productid = System.Web.HttpContext.Current.Items["productid"].ToString();
104 string productnumber = System.Web.HttpContext.Current.Items["productnumber"].ToString().Replace(" ","");
105 string productName = System.Web.HttpContext.Current.Items["productname"].ToString();
106 string isWild = System.Web.HttpContext.Current.Items["productiswild"].ToString();
107
108 try {
109 brickimages = System.IO.Directory.GetFiles(System.Web.HttpContext.Current.Server.MapPath("~\\files\\images\\bricktiler\\" + productnumber));
110
111 foreach (string brickImage in brickimages) {
112 string filepath = brickImage.Substring(brickImage.IndexOf("\\files"), brickImage.Length - brickImage.IndexOf("\\files")).Replace("\\","/");
113
114 if (filepath.Contains(".png")) {
115 <script>
116 brickimages.push('@filepath');
117 </script>
118 }
119 }
120 } catch {
121 showBrickTiler = false;
122 }
123
124 if (showBrickTiler) {
125 <div id="bricktiler"><div id="brickTilerWrap">
126 @if (GetGlobalValue("Global:Device.IsDesktop").ToString().ToLower() == "true") {
127 <div class="dropdowns">
128 @if (isWild.ToLower() == "false") {
129 <ul class="drop-down" role="menu"><li class="bonds"><a>@Translate("RT-2.0_vaelgforbandt")</a><ul>
130 @RenderItemList(new {
131 ItemType = "ForbandtTyper",
132 ListSourceType = "Area",
133 ListSourceArea = Pageview.Area.ID,
134 IncludeParagraphItems = false,
135 ItemFieldsList = "*",
136 ListOrderBy = "Created",
137 ListglobalTabContentClassName = "ItemPublisher/List/Bonds.cshtml",
138 ListPageSize = 100
139 })
140 </ul></li></ul>
141 }
142 <ul class="drop-down" role="menu"><li class="grooves"><a>@Translate("RT-2.0_vaelgfugefarve")</a><ul>
143 @RenderItemList(new {
144 ItemType = "Fugefaver",
145 ListSourceType = "Area",
146 ListSourceArea = Pageview.Area.ID,
147 IncludeParagraphItems = false,
148 ItemFieldsList = "*",
149 ListOrderBy = "Created",
150 ListTemplate = "ItemPublisher/List/Grooves.cshtml",
151 ListPageSize = 100
152 })
153 </ul></li>
154 @if (System.IO.File.Exists(System.Web.HttpContext.Current.Server.MapPath("/Files/Templates/Designs/randers-tegl/images-rt-2.0/icon-arrow-down_2.svg"))) {
155 <span class="icon icon-arrow-down">
156 @System.IO.File.ReadAllText(System.Web.HttpContext.Current.Server.MapPath("/Files/Templates/Designs/randers-tegl/images-rt-2.0/icon-arrow-down_2.svg"))
157 </span>
158 }
159 </ul></div>
160 } else {
161 if (isWild.ToLower() == "false") {
162 <select id="bond-select">
163 @RenderItemList(new {
164 ItemType = "ForbandtTyper",
165 ListSourceType = "Area",
166 ListSourceArea = Pageview.Area.ID,
167 IncludeParagraphItems = false,
168 ItemFieldsList = "*",
169 ListOrderBy = "Created",
170 ListTemplate = "ItemPublisher/List/Bonds-native.cshtml",
171 ListPageSize = 100
172 })
173 </select>
174 }
175 <select id="groove-select">
176 @RenderItemList(new {
177 ItemType = "Fugefaver",
178 ListSourceType = "Area",
179 ListSourceArea = Pageview.Area.ID,
180 IncludeParagraphItems = false,
181 ItemFieldsList = "*",
182 ListOrderBy = "Created",
183 ListTemplate = "ItemPublisher/List/Grooves-native.cshtml",
184 ListPageSize = 100
185 })
186 </select>
187 }
188 @if (GetGlobalValue("Global:Device.IsDesktop").ToString().ToLower() == "true") {
189 <div class="save"><a id="bricktiler_savepackage" class="button button-simple button-simple--inverted">
190 @Translate("RT-2.0_SavePackage")
191 </a></div>
192 }
193 <div id="canvasImg"><canvas id="myCanvas" width="1200px" height="630px" style="background-color:#fdfdfd"></canvas></div></div></div>
194 }
195 <script>
196 function loadBtScript() {
197 var btScript = document.createElement('script');
198 btScript.src = '/Files/Templates/Designs/randers-tegl/js/bricktiler.min.js';
199 btScript.type = 'text/javascript';
200 document.body.appendChild(btScript);
201
202 var checkjquery = setInterval(function() {
203 if (window.jQuery && brickTiler) {
204 clearInterval(checkjquery);
205 initBrickTiler();
206 }
207 },10);
208 }
209
210 function initBrickTiler() {
211 /*if ($('html').hasClass('canvas')) {*/
212 var selectedbond = "";
213 var selectedbondname = "";
214 var selectedgrooveimage = "";
215 var selectedgroovename = "";
216 var usenative = false;
217 var vildtforbandt = '@isWild';
218
219 if ($('#groove-select').length > 0) {
220 usenative = true;
221 }
222
223 if (vildtforbandt.toLowerCase() == 'true') {
224 if (usenative) {
225 selectedbond = [];
226 selectedbondname = 'Vildtforbandt';
227 selectedgrooveimage = [$($('#groove-select option')[0]).attr('data-image-src')];
228 selectedgroovename = $($('#groove-select option')[0]).attr('data-color-name');
229 } else {
230 selectedbond = [];
231 selectedbondname = 'Vildtforbandt';
232 selectedgrooveimage = [$($('#bricktiler .grooves ul li a')[0]).attr('data-image-src')];
233 selectedgroovename = $($('#bricktiler .grooves ul li a')[0]).attr('data-color-name');
234 }
235 } else {
236 if (usenative) {
237 selectedbond = JSON.parse($($('#bond-select option')[0]).attr('data-bond'));
238 selectedbondname = $($('#bond-select option')[0]).attr('data-bond-name');
239 selectedgrooveimage = [$($('#groove-select option')[0]).attr('data-image-src')];
240 selectedgroovename = $($('#groove-select option')[0]).attr('data-color-name');
241 } else {
242 selectedbond = JSON.parse($($('#bricktiler .bonds ul li a')[0]).attr('data-bond'));
243 selectedbondname = $($('#bricktiler .bonds ul li a')[0]).attr('data-bond-name');
244 selectedgrooveimage = [$($('#bricktiler .grooves ul li a')[0]).attr('data-image-src')];
245 selectedgroovename = $($('#bricktiler .grooves ul li a')[0]).attr('data-color-name');
246 }
247 }
248
249 $('#bricktiler .bonds ul li a').click(function() {
250 var selectedbondname = $(this).attr('data-bond-name');
251 var selectedbond = JSON.parse($(this).attr('data-bond'));
252
253 brickTiler.switchBond(selectedbond, selectedbondname);
254 });
255
256 $('#bricktiler .grooves ul li a').click(function() {
257 var selectedgroovename = $(this).attr('data-color-name');
258 var selectedgrooveimage = [$(this).attr('data-image-src')];
259
260 brickTiler.switchGroove(selectedgrooveimage, selectedgroovename);
261 });
262
263 $('#bond-select').change(function(e) {
264 var selectedbondname = $(this).find('option:selected').attr('data-bond-name');
265 var selectedbond = JSON.parse($(this).find('option:selected').attr('data-bond'));
266
267 brickTiler.switchBond(selectedbond, selectedbondname);
268 });
269
270 $('#groove-select').change(function(e) {
271 var selectedgroovename = $(this).find('option:selected').attr('data-color-name');
272 var selectedgrooveimage = [$(this).find('option:selected').attr('data-image-src')];
273
274 brickTiler.switchGroove(selectedgrooveimage, selectedgroovename);
275 });
276
277 $('#bricktiler_saveaspdf').click(function() {
278 showloader();
279
280 setTimeout(function() {
281 brickTiler.savePdf('text here...').done(function() {
282 hideloader();
283 });
284 },300);
285 });
286
287 $('#bricktiler_savepackage').click(function() {
288 showloader();
289
290 $('body').append('<div id="downloadmessage" style="z-index: 999999; color: #fff; position: fixed; max-width: 960px; line-height: 40px; top: 50%; left: 0; right: 0; text-align: center; margin: auto;">Vent venligst. Du vil om kort tid modtage en zip-fil med den valgte tekstur. Det kan tage op til 30 sekunder afhængig af din internetforbindelse.</div>');
291
292 setTimeout(function() {
293 brickTiler.saveZip().done(function() {
294 hideloader();
295 $('#downloadmessage').remove();
296 });
297 },300);
298 });
299
300 function showloader() {
301 $('body').addClass('js-bricktiler-loading');
302 }
303
304 function hideloader() {
305 $('body').removeClass('js-bricktiler-loading');
306 }
307
308 function init() {
309 if (document.getElementById("myCanvas")){
310 setTimeout(function() {
311 brickTiler.init(
312 document.getElementById('myCanvas'),
313 brickimages,
314 '@productnumber @productName',
315 selectedgrooveimage,
316 selectedgroovename,
317 selectedbond,
318 selectedbondname
319 ).done(function(){
320 //console.log("Init done!");
321 });
322 }, 10);
323 } else{
324 document.getElementById("bricktiler").setAttribute("style","display:none");
325 }
326 }
327
328 init();
329
330 $('.dropdowns ul li ul a').click(function() {
331 $('.dropdowns ul li ul a.js-selected').removeClass('js-selected');
332 $(this).addClass('js-selected');
333 var text = $(this).html();
334 $(this).parent().parent().parent().find('> a').html(text);
335 });
336 /*}*/
337 }
338 </script>
339 }
340
