1 @SnippetStart("Modals")
2 <script>
3 var brickimages = [];
4 </script><div id='modal-@GetString("ParagraphID")' class="product-modal modal-light-grey">
5 @{
6 bool showBrickTiler = true;
7 string[] brickimages;
8
9 string productid = System.Web.HttpContext.Current.Request.QueryString.Get("ProductID");
10
11 Dynamicweb.Ecommerce.Products.Product p = Dynamicweb.Ecommerce.Services.Products.GetProductById(productid, "", true);
12
13 string productnumber = p.Number.Replace(" ","");
14 string productName = p.Name;
15 string isWild = p.ProductFieldValues.GetProductFieldValue("BrickTilerVildtForbandt").Value.ToString();
16
17 try {
18 brickimages = System.IO.Directory.GetFiles(System.Web.HttpContext.Current.Server.MapPath("~\\files\\images\\bricktiler\\" + productnumber));
19
20 foreach (string brickImage in brickimages) {
21 string filepath = brickImage.Substring(brickImage.IndexOf("\\files"), brickImage.Length - brickImage.IndexOf("\\files")).Replace("\\","/");
22
23 if (filepath.Contains(".png")) {
24 <script>
25 brickimages.push('@filepath');
26 </script>
27 }
28 }
29 } catch {
30 showBrickTiler = false;
31 }
32
33 if (showBrickTiler) {
34 <div class="wrap-fluid" id="bricktiler"><div class="wrap-inner"><div class="column-xxs-22 column-xxs-left-1 column-xxs-top-6 column-xxs-bottom-2 column-md-top-2"><div id="brickTilerWrap">
35 @if (GetGlobalValue("Global:Device.IsDesktop").ToString().ToLower() == "true") {
36 <div class="dropdowns">
37 @if (isWild.ToLower() == "false") {
38 <ul class="drop-down" role="menu"><li class="bonds"><a>@Translate("RT-2.0_vaelgforbandt")</a><ul>
39 @RenderItemList(new {
40 ItemType = "ForbandtTyper",
41 ListSourceType = "Area",
42 ListSourceArea = Pageview.Area.ID,
43 IncludeParagraphItems = false,
44 ItemFieldsList = "*",
45 ListOrderBy = "Created",
46 ListTemplate = "ItemPublisher/List/Bonds.cshtml",
47 ListPageSize = 100
48 })
49 </ul>
50 @if (System.IO.File.Exists(System.Web.HttpContext.Current.Server.MapPath("/files/Templates/Designs/randers-tegl/images-rt-2.0/icon-arrow-right.svg"))) {
51 <span class="icon-down">
52 @System.IO.File.ReadAllText(System.Web.HttpContext.Current.Server.MapPath("/files/Templates/Designs/randers-tegl/images-rt-2.0/icon-arrow-right.svg"))
53 </span>
54 }
55 </li></ul>
56 }
57 <ul class="drop-down" role="menu"><li class="grooves"><a>@Translate("RT-2.0_vaelgfugefarve")</a><ul>
58 @RenderItemList(new {
59 ItemType = "Fugefaver",
60 ListSourceType = "Area",
61 ListSourceArea = Pageview.Area.ID,
62 IncludeParagraphItems = false,
63 ItemFieldsList = "*",
64 ListOrderBy = "Created",
65 ListTemplate = "ItemPublisher/List/Grooves.cshtml",
66 ListPageSize = 100
67 })
68 </ul>
69 @if (System.IO.File.Exists(System.Web.HttpContext.Current.Server.MapPath("/files/Templates/Designs/randers-tegl/images-rt-2.0/icon-arrow-right.svg"))) {
70 <span class="icon-down">
71 @System.IO.File.ReadAllText(System.Web.HttpContext.Current.Server.MapPath("/files/Templates/Designs/randers-tegl/images-rt-2.0/icon-arrow-right.svg"))
72 </span>
73 }
74 </li></ul></div>
75 } else {
76 if (isWild.ToLower() == "false") {
77 <select id="bond-select">
78 @RenderItemList(new {
79 ItemType = "ForbandtTyper",
80 ListSourceType = "Area",
81 ListSourceArea = Pageview.Area.ID,
82 IncludeParagraphItems = false,
83 ItemFieldsList = "*",
84 ListOrderBy = "Created",
85 ListTemplate = "ItemPublisher/List/Bonds-native.cshtml",
86 ListPageSize = 100
87 })
88 </select>
89 }
90 <select id="groove-select">
91 @RenderItemList(new {
92 ItemType = "Fugefaver",
93 ListSourceType = "Area",
94 ListSourceArea = Pageview.Area.ID,
95 IncludeParagraphItems = false,
96 ItemFieldsList = "*",
97 ListOrderBy = "Created",
98 ListTemplate = "ItemPublisher/List/Grooves-native.cshtml",
99 ListPageSize = 100
100 })
101 </select>
102 }
103 @if (GetGlobalValue("Global:Device.IsDesktop").ToString().ToLower() == "true") {
104 <div class="save"><a id="bricktiler_savepackage"><span class="arrow-link"><span>
105 @if (System.IO.File.Exists(System.Web.HttpContext.Current.Server.MapPath("/files/Templates/Designs/randers-tegl/images-rt-2.0/icon-arrow-right.svg"))) {
106 <span>
107 @System.IO.File.ReadAllText(System.Web.HttpContext.Current.Server.MapPath("/files/Templates/Designs/randers-tegl/images-rt-2.0/icon-arrow-right.svg"))
108 @System.IO.File.ReadAllText(System.Web.HttpContext.Current.Server.MapPath("/files/Templates/Designs/randers-tegl/images-rt-2.0/icon-arrow-right.svg"))
109 </span>
110 }
111 </span></span>
112 @Translate("RT-2.0_SavePackage")
113 </a></div>
114 }
115 <div id="canvasImg"><canvas id="myCanvas" width="1200px" height="630px" style="background-color:#fdfdfd"></canvas><!--canvas id="myCanvas" width="1900px" height="997px" style="background-color:#fdfdfd"></canvas--></div></div></div></div></div>
116 }
117 }
118 <span class="icon-close">
119 @if (System.IO.File.Exists(System.Web.HttpContext.Current.Server.MapPath("/files/Templates/Designs/randers-tegl/images-rt-2.0/icon-close.svg"))) {
120 <text>@System.IO.File.ReadAllText(System.Web.HttpContext.Current.Server.MapPath("/files/Templates/Designs/randers-tegl/images-rt-2.0/icon-close.svg"))</text>
121 }
122 </span></div><script src="/files/Templates/Designs/randers-tegl/js/bricktiler.min.js" async defer"></script><!--script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script src="/files/Templates/Designs/randers-tegl/js/jspdf/libs/filesaver.js/FileSaver.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script><script src="/files/Templates/Designs/randers-tegl/js/bricktiler6.js"></script--><script>
123 var track = false;
124 </script>
125 @if (Pageview.Area.ID != 8) {
126 <script>
127 track = true;
128 </script>
129 }
130 <script>
131 var checkjquery = setInterval(function() {
132 if (window.jQuery) {
133 clearInterval(checkjquery);
134 initBrickTiler();
135 }
136 },10);
137
138 function initBrickTiler() {
139 /*if ($('html').hasClass('canvas')) {*/
140 var timerStart = -1;
141 var timerEnd = -1;
142
143 /* ---------- Start timer when clicking save package button */
144 if ($('#bricktiler').length > 0) {
145 $('#bricktiler_savepackage').click(function() {
146 // TODO: Start timer
147 var tmpStart = new Date();
148 timerStart = tmpStart.getTime();
149
150 if (track) {
151 ga('send', 'event', {
152 eventCategory: 'Murstenskonfigurator',
153 eventAction: 'Start download texture'
154 });
155 }
156 });
157 }
158
159 var selectedbond = "";
160 var selectedbondname = "";
161 var selectedgrooveimage = ""
162 var selectedgroovename = "";
163 var usenative = false;
164 var vildtforbandt = '@isWild';
165
166 if ($('#groove-select').length > 0) {
167 usenative = true;
168 }
169
170 if (vildtforbandt.toLowerCase() == 'true') {
171 if (usenative) {
172 selectedbond = [];
173 selectedbondname = 'Vildtforbandt';
174 selectedgrooveimage = [$($('#groove-select option')[0]).attr('data-image-src')];
175 selectedgroovename = $($('#groove-select option')[0]).attr('data-color-name');
176 } else {
177 selectedbond = [];
178 selectedbondname = 'Vildtforbandt';
179 selectedgrooveimage = [$($('#bricktiler .grooves ul li a')[0]).attr('data-image-src')];
180 selectedgroovename = $($('#bricktiler .grooves ul li a')[0]).attr('data-color-name');
181 }
182 } else {
183 if (usenative) {
184 selectedbond = JSON.parse($($('#bond-select option')[0]).attr('data-bond'));
185 selectedbondname = $($('#bond-select option')[0]).attr('data-bond-name');
186 selectedgrooveimage = [$($('#groove-select option')[0]).attr('data-image-src')];
187 selectedgroovename = $($('#groove-select option')[0]).attr('data-color-name');
188 } else {
189 selectedbond = JSON.parse($($('#bricktiler .bonds ul li a')[0]).attr('data-bond'));
190 selectedbondname = $($('#bricktiler .bonds ul li a')[0]).attr('data-bond-name');
191 selectedgrooveimage = [$($('#bricktiler .grooves ul li a')[0]).attr('data-image-src')];
192 selectedgroovename = $($('#bricktiler .grooves ul li a')[0]).attr('data-color-name');
193 }
194 }
195
196 $('#bricktiler .bonds ul li a').click(function() {
197 var selectedbondname = $(this).attr('data-bond-name');
198 var selectedbond = JSON.parse($(this).attr('data-bond'));
199
200 brickTiler.switchBond(selectedbond, selectedbondname);
201 });
202
203 $('#bricktiler .grooves ul li a').click(function() {
204 var selectedgroovename = $(this).attr('data-color-name');
205 var selectedgrooveimage = [$(this).attr('data-image-src')];
206
207 brickTiler.switchGroove(selectedgrooveimage, selectedgroovename);
208 });
209
210 $('#bond-select').change(function(e) {
211 var selectedbondname = $(this).find('option:selected').attr('data-bond-name');
212 var selectedbond = JSON.parse($(this).find('option:selected').attr('data-bond'));
213
214 brickTiler.switchBond(selectedbond, selectedbondname);
215 });
216
217 $('#groove-select').change(function(e) {
218 var selectedgroovename = $(this).find('option:selected').attr('data-color-name');
219 var selectedgrooveimage = [$(this).find('option:selected').attr('data-image-src')];
220
221 brickTiler.switchGroove(selectedgrooveimage, selectedgroovename);
222 });
223
224 $('#bricktiler_saveaspdf').click(function() {
225 showloader();
226
227 setTimeout(function() {
228 brickTiler.savePdf('text here...').done(function() {
229 hideloader();
230 });
231 },300);
232 });
233
234 $('#bricktiler_savepackage').click(function() {
235 showloader();
236
237 $('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>');
238
239 setTimeout(function() {
240 brickTiler.saveZip().done(function() {
241 hideloader();
242 $('#downloadmessage').remove();
243
244 var tmpEnd = new Date();
245 timerEnd = tmpEnd.getTime();
246
247 var seconds = (timerEnd - timerStart) / 1000;
248
249 if (track) {
250 ga('send', 'event', {
251 eventCategory: 'Murstenskonfigurator',
252 eventAction: 'Slut download texture',
253 eventLabel: 'download tid = ' + seconds
254 });
255 }
256 });
257 },300);
258 });
259
260 function showloader() {
261 $('body').addClass('js-bricktiler-loading');
262 }
263
264 function hideloader() {
265 $('body').removeClass('js-bricktiler-loading');
266 }
267
268 function init() {
269 if (document.getElementById("myCanvas")){
270 setTimeout(function() {
271 brickTiler.init(
272 document.getElementById('myCanvas'),
273 brickimages,
274 '@productnumber @productName',
275 selectedgrooveimage,
276 selectedgroovename,
277 selectedbond,
278 selectedbondname
279 ).done(function(){
280 //console.log("Init done!");
281 });
282 }, 10);
283 } else{
284 document.getElementById("bricktiler").setAttribute("style","display:none");
285 }
286 }
287
288 init();
289
290 /*$('.dropdowns ul li ul a').click(function() {
291 $('.dropdowns ul li ul a.js-selected').removeClass('js-selected');
292 $(this).addClass('js-selected');
293 var text = $(this).html();
294 $(this).parent().parent().parent().find('> a').html(text);
295 });*/
296 /*}*/
297 }
298 </script>
299 @SnippetEnd("Modals")
300
