https://www.luotokuopio.fi/js/custom-v4.js

1/* custom.js for Devkit */
2$(function () {
3  $(".misa").css({'display': 'none', 'visibility': 'hidden'});
4  /*$('.mobile-icon').click(function () {
5   $('nav ul').toggleClass("showing");
6   });*/
7});
8
9
10
11
12
13function toggle_submenu(div_id, div_class) {
14  
15  
16    /* Valikon korkeus vaihtelee, joten lasketaan */
17    var headerHeight = document.getElementById("header").offsetHeight;
18  
19    var submenuelems = document.getElementsByClassName('submenu');
20
21    for(var i = 0; i < submenuelems.length; i++) {
22
23      if (submenuelems[i].id == div_id) {
24          if( submenuelems[i].classList.contains(div_class) ){
25              submenuelems[i].classList.remove(div_class);
26              submenuelems[i].parentNode.classList.remove(div_class);
27          } else {
28              submenuelems[i].classList.add(div_class);
29              submenuelems[i].parentNode.classList.add(div_class);
30              
31                if (window.innerWidth > 1299) {
32                    submenuelems[i].style.top = headerHeight + 'px';
33                } else {
34                    submenuelems[i].removeAttribute('style');
35                }
36          }
37      } else {
38          if( submenuelems[i].classList.contains(div_class) ){
39            submenuelems[i].classList.remove(div_class);
40            submenuelems[i].parentNode.classList.remove(div_class);
41          }
42      }
43    
44  }
45}
46
47//var lastScrollTop = 0;
48
49$(window).scroll(function() {
50    if ($(this).scrollTop() > 50){  
51	$('header').addClass("scroll");
52	$('#main-menu').addClass("scroll");
53        
54        //$('#brandlogo').attr("src","images/xxx.png");
55	
56    }
57    else {
58        $('header').removeClass("scroll");
59        $('#main-menu').removeClass("scroll");
60
61        //$('#brandlogo').attr("src","images/xxx.png");
62    }
63    
64    /*
65   var st = window.pageYOffset || document.documentElement.scrollTop;
66   if (st > lastScrollTop && $(this).scrollTop() > 250){
67      $('header').addClass("up");
68   } else {
69      $('header').removeClass("up");
70   }
71   lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
72    */
73});
74
75$("a.fancybox").fancybox({
76  speedIn: 600,
77  speedOut: 200,
78  overlayShow: false,
79  autoScale: true,
80});
81
82document.addEventListener('click', function(e) {
83    
84  if (e.target.closest('button') != null) {
85    if (!e.target.closest('button').classList.contains('show-some-button')) {
86        const some_share_buttons_container = document.querySelector('.social-sharing-btns.showing');
87        if (some_share_buttons_container) {
88            some_share_buttons_container.classList.remove('showing');
89        }
90    }
91  } else {
92      console.log('button null');
93  }   
94});
95
96
97$(window).on('load', function () {
98  AOS.refresh();
99});
100$(function () {
101  AOS.init();
102});
103
104document.addEventListener("DOMContentLoaded", function (event) {
105    
106  // some share
107  const some_share_button = document.querySelector('.show-some-button');
108  const some_share_buttons_container = document.querySelector('.social-sharing-btns');
109  if (some_share_button && some_share_buttons_container) {
110    
111      some_share_button.addEventListener("click", function() { 
112        if (some_share_buttons_container.classList.contains('showing')) {
113            some_share_buttons_container.classList.remove('showing');
114        } else {
115            some_share_buttons_container.classList.add('showing');
116        }
117        // $('.social-sharing-btns').not($('.social-sharing-btns')).removeClass('showing')
118		    // $('.social-sharing-btns').toggleClass('showing');
119     });
120  }
121    
122  // Uses sharer.js
123  //  https://ellisonleao.github.io/sharer.js/#twitter
124  var url = window.location.href;
125  var title = document.title;
126  var subject = "Read this good article";
127  var via = "bootstrapC";
128  console.log(url);
129  console.log(title);
130
131  //facebook
132  $("#share-fb")
133          .attr("data-url", url)
134          .attr("data-sharer", "facebook");
135  //twitter
136  $("#share-tw")
137          .attr("data-url", url)
138          .attr("data-title", title)
139          .attr("data-via", via)
140          .attr("data-sharer", "twitter");
141  //linkedin
142  $("#share-li")
143          .attr("data-url", url)
144          .attr("data-sharer", "linkedin");
145  // google plus
146  $("#share-gp")
147          .attr("data-url", url)
148          .attr("data-title", title)
149          .attr("data-sharer", "googleplus");
150  // email
151  $("#share-em")
152          .attr("data-url", url)
153          .attr("data-title", title)
154          .attr("data-subject", subject)
155          .attr("data-sharer", "email");
156
157  //Prevent basic click behavior
158  $(".sharer button").click(function () {
159    event.preventDefault();
160  });
161});
162
163$(function () {
164    $('a[href*="#"]:not([href="#"])').click(function () {

165      if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
166        var target = $(this.hash);
167        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
168        if (target.length) {
169          $('html, body').animate({scrollTop: (target.offset().top - 100)}, 1000);
170          return false;
171        }
172      }
173    });
174  });
175
176
177// external js: isotope.pkgd.js
178// init first imagesLoaded, then Isotope
179
180var $grid = $('.grid-isotope').imagesLoaded( function() {
181var $grid = $('.grid-isotope').isotope({
182  itemSelector: '.grid-item',
183   layoutMode: 'fitRows',
184  transitionDuration: 650,
185  // stagger: 30
186});
187// filter functions, DO NOT REMOVE!
188var filterFns = {
189};
190
191// bind filter button click
192$('.filters-button-group').on( 'click', 'button', function() {
193  var filterValue = $( this ).attr('data-filter');
194  // use filterFn if matches value
195  filterValue = filterFns[ filterValue ] || filterValue;
196  $grid.isotope({ filter: filterValue });
197});
198// change is-checked class on buttons
199$('.button-group').each( function( i, buttonGroup ) {
200  var $buttonGroup = $( buttonGroup );
201  $buttonGroup.on( 'click', 'button', function() {
202    $buttonGroup.find('.is-checked').removeClass('is-checked');
203    $( this ).addClass('is-checked');
204  });
205});
206
207});
208
209// SmartMenus init
210$(function() {
211  $('#main-menu').smartmenus({
212    showOnClick: true,		// show the first-level sub menus onclick instead of onmouseover (i.e. mimic desktop app menus) (matters only for mouse input)
213    hideOnClick: true,		// hide the sub menus on click/tap anywhere on the page
214    noMouseOver: true
215  });
216});
217
218/*** GENERAL START ***/
219
220function loadMore(that, offset, elem, limit, category, forced) {
221  var el = $(that);
222  el.closest('.js-news-cats').find('li').each(function(i){
223    $(this).removeClass('active');
224  });
225  el.closest('li').addClass('active');
226  if (sessionStorage.getItem('load-offset')) {
227    if (offset == 0) {
228      sessionStorage.setItem('load-offset', 0)
229    }
230    var offset_before = parseInt(sessionStorage.getItem('load-offset'));
231  } else {
232    var offset_before = 0;
233  }
234  
235 
236  var new_offset = offset + offset_before;
237   if (forced == 1) {
238      new_offset = 0;
239  }
240  
241  sessionStorage.setItem('load-offset', new_offset)
242
243  const data = {
244    offset: new_offset,
245    limit: limit,
246    category: category
247  };
248
249	console.log('new_offset - '+new_offset);
250	console.log('limit - '+limit);
251
252  const params = encodeQueryData(data);
253  const callbackArgs = [elem, limit, offset];
254  const responseType = 'html';
255  httpRequestHandler('get', 'ajax/ajax-load-more/', params, responseType, appendContent, callbackArgs);
256}
257
258function encodeQueryData(data) {
259  const ret = [];
260  for (let d in data)
261    ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d]));
262  return ret.join('&');
263}
264
265var xmlHttp = null;
266function httpRequestHandler(method, url, params, responseType, callbackFunction, callbackArgs, multipleRequestAllowed) {
267  if (method == 'post') {
268  var paramsSend = params;
269  var paramsGet = '';
270  } else {
271  var paramsSend = null;
272  var paramsGet = '?' + params;
273  }
274
275  if (multipleRequestAllowed == true) {
276      var xmlHttp = null;
277  }
278
279  if (xmlHttp != null) {
280      xmlHttp.abort();
281  } else {
282      if (document.getElementById('ajax-loader')) {
283        if (document.getElementById('ajax-loader').style.display == 'none') {
284          var loader = setTimeout(startLoader, 2000);
285        }
286      }
287  }
288
289  xmlHttp = new XMLHttpRequest();
290  xmlHttp.onreadystatechange = function () {
291      if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
292          if (loader) {
293            stopLoader(loader);
294          }
295          var response = xmlHttp.responseText;
296          if (xmlHttp.responseText !== '') {
297              if (responseType === 'json') {
298                  response = JSON.parse(xmlHttp.responseText);
299              }
300          }
301
302          if (callbackFunction) {
303              callbackFunction(...callbackArgs, response);
304          }
305      }
306  }
307  xmlHttp.open(method, url + paramsGet);
308  xmlHttp.setRequestHeader('Cache-Control', 'no-cache');
309  xmlHttp.send(paramsSend);
310}
311
312function appendContent(elem, limit, offset, requestResponse) {
313  if (offset == 0) {
314    document.getElementById(elem).innerHTML = '';
315  }
316  console.log(elem);
317  document.getElementById(elem).insertAdjacentHTML("beforeend", requestResponse);
318  var parseContent = document.createElement("div");
319  parseContent.innerHTML = requestResponse;

320  const lastLoadMore = Array.from(document.getElementById(elem).getElementsByClassName('loadMoreButtonJS')).pop();
321  console.log(lastLoadMore);
322  Array.from(document.getElementById(elem).getElementsByClassName('loadMoreButtonJS')).forEach(hideMe);
323  if (parseContent.querySelector('#total_count')) {
324    var itemsTotalCount = parseContent.querySelector('#total_count').value;
325    var listed_items = parseInt(sessionStorage.getItem('load-offset')) + limit;
326    if (listed_items < itemsTotalCount) {
327      lastLoadMore.style.display = 'block';
328    }
329  }
330}
331
332
333function hideMe(el) {
334  el.style.display = 'none';
335}
336
337function showAjaxContent(elementDOMID, innerHTMLData) {
338  if (elementDOMID) {
339    document.getElementById(elementDOMID).innerHTML = innerHTMLData;
340  }
341}
342function startLoader() {
343  document.getElementById('ajax-loader').innerHTML = '<img src="ikonit/loader-200.gif">';
344  document.getElementById('ajax-loader').style.display = 'block';
345}
346
347function stopLoader(interval) {
348  document.getElementById('ajax-loader').innerHTML = '';
349  document.getElementById('ajax-loader').style.display = 'none';
350  clearTimeout(interval);
351}
352
353function showMessage(message, message_class, delay) {
354  delay = (delay > 0) ? delay : 2000;
355  var messageBox = document.getElementById('messageBox');
356  messageBox.innerHTML = message;
357  messageBox.classList.remove('fadeout');
358  messageBox.classList.add(message_class);
359  messageBox.classList.add('fade');
360
361  setTimeout(function () {
362  messageBox.classList.remove('fade');
363  messageBox.classList.add('fadeout');
364  }, delay);
365}
366
367/*** GENERAL END ***/
368
369
370
371
372// Popupin aukaisu
373function getPopUp(url, paramsData, button, itemID) {
374  // paramsData.database = site;
375  console.log('getPopup...');
376  const params = encodeQueryData(paramsData);
377  const callbackArgs = [button, itemID];
378  const responseType = 'html';
379  httpRequestHandler('get', url, params, responseType, showPopUp, callbackArgs);
380}
381
382function getPopUpXX(url, paramsData, button, itemID) {
383  console.log('getPopup...');
384  return false;
385}
386
387function showPopUpTest(button, itemID, requestResponse) {
388    console.log(requestResponse);
389}
390
391
392// Alustetaan moduulin muokkaus ikkuna
393function showPopUp(button, itemID, requestResponse) {
394 
395 
396    // get editor container
397    const settingsElem = document.getElementById('settingsJS');
398
399    // Jos elementtiä ei ole olemassa, ollaan menossa muokkaamaan
400    if (settingsElem === null) {
401        
402        var settingsModule = document.createElement("div");
403      settingsModule.setAttribute('id', 'settingsJS');
404
405      // Editorin mitat h*w
406      const contentClientWidth = document.body.clientWidth;
407      var editorWidth = contentClientWidth - 100;
408      const contentClientHeight = document.body.clientHeight;
409      var editorHeight = contentClientHeight - 100;
410
411
412      // Editorin sijainti
413      if (editorWidth >= 700) {
414        var editoriLeft = (contentClientWidth / 2) - (700 / 2);
415        editorWidth = 700;
416      } else {
417        var editoriLeft = (contentClientWidth / 2) - (editorWidth / 2);
418      }
419      if (editorHeight >= 700) {
420        editorHeight = 700;
421      }
422
423      if (editorHeight >= 700) {
424        editorHeight = 700;
425      }
426
427      // settingsModule.setAttribute('style', 'width: ' + editorWidth + 'px; height: ' + editorHeight + 'px;');
428      settingsModule.setAttribute('style', 'width: ' + editorWidth + 'px; height: auto;');
429      settingsModule.innerHTML = requestResponse;
430      document.getElementById('popUpContainer').appendChild(settingsModule);
431      if (document.getElementById('popUpContainer').querySelector("#runscript")) {

432          eval(document.getElementById('popUpContainer').querySelector("#runscript").innerHTML);
433      }
434      document.getElementById('popUpContainer').setAttribute('style', 'right: ' + editoriLeft + 'px;');
435      var editing_mode = true;
436      document.getElementById('bodyOverlay').classList.add('disabled');
437    } else {
438      
439      var editing_mode = false;
440      document.getElementById('bodyOverlay').classList.remove('disabled');
441      // mahdollinen requestResponse, päivitetään sivu
442      if (requestResponse !== '') {
443          
444           console.log('reloadi');
445           console.log(requestResponse);
446           location.reload();
447           showMessage(requestResponse, 'msg', 1000);
448      }
449    }
450    
451    var settingsContainer = document.getElementById('popUpContainer'); // Moduulin editoinnin container
452    var editorOpenEvent = 'showPopUp';
453    var editorOpenClass = 'popUpOpen';
454
455    if (editing_mode === true) {
456      // Esitetään moduulin muokkausikkuna
457      // Show selected editor
458      settingsModule.classList.add(editorOpenClass);
459      // Add transition for container by class
460      settingsContainer.classList.add(editorOpenEvent);
461    } else {
462        if (document.getElementById('settingsJS')) {
463            document.getElementById('settingsJS').remove();
464        }
465        // Overlay taustalta pois
466        document.getElementById('bodyOverlay').classList.remove('disabled');
467        settingsContainer.classList.remove(editorOpenEvent);
468    }
469}
470
471function saveFormData(form, url, method, responseType, callbackFunction, lang, callbackArgs) {
472
473  // Luodaan lähetettävä formin data
474    var form_inputs = form.querySelectorAll('input, select, textarea');
475    var form_data = new FormData();
476  
477    for (var i = 0; form_inputs.length > i; i++) {
478      if (form_inputs[i].getAttribute('type') == 'checkbox') {
479        if (form_inputs[i].checked) {
480          form_data.append(form_inputs[i].name, form_inputs[i].value);
481        }
482      } else if (form_inputs[i].getAttribute('type') == 'radio') {
483        if (form_inputs[i].checked) {
484          form_data.append(form_inputs[i].name, form_inputs[i].value);
485        }
486      } else {
487        form_data.append(form_inputs[i].name, form_inputs[i].value);
488      }
489      console.log('input: '+form_inputs[i].name+','+form_inputs[i].value);
490    }
491  
492    // form_data.append('database', site);
493    form_data.append('lang', lang);
494  
495    console.log(form_data);
496  
497    httpRequestHandler(method, url, form_data, responseType, callbackFunction, callbackArgs);
498    return false;
499  
500  }
501
502function validateForm(form) {
503
504  // TODO input validation too! addEventListener for onkeyup with selector .sagaValidateForm input.sagaRequired
505    var valid = true;
506    var form_checkbox = false;
507    var form_checkbox_checked = false;
508    var form_checkbox_error_elem;
509    var form_radio = false;
510    var form_radio_checked = false;
511    var form_radio_error_elem;
512    // Error elementti joka esitetään formin ylälaidassa
513    var exists_form_error_elem = form.querySelector('.formErrorElement');
514    if (exists_form_error_elem) {
515        exists_form_error_elem.remove();
516    }
517    var form_error_elem = '';
518    
519    var form_inputs = form.querySelectorAll('input, select, textarea');
520
521    for (var i = 0; form_inputs.length > i; i++) {
522        if (form_inputs[i].parentElement.classList.contains('formError')) {
523            form_inputs[i].parentElement.classList.remove('formError');
524        }
525        // Pakolliset kentät
526        if (form_inputs[i].classList.contains('required')) {
527            if (form_inputs[i].getAttribute('type') == 'checkbox') {
528                form_checkbox = true;
529                //form_inputs[i].parentElement.classList.add('formError');
530                form_checkbox_error_elem = form_inputs[i];
531                if (form_inputs[i].checked) {
532                    form_checkbox_checked = true;
533                    //form_inputs[i].parentElement.classList.remove('formError');
534                }
535            } else if (form_inputs[i].getAttribute('type') == 'radio') {
536                form_radio = true; 
537                form_radio_error_elem = form_inputs[i];
538                //form_inputs[i].parentElement.classList.add('formError');
539                if (form_inputs[i].checked) {
540                    form_radio_checked = true;
541                    //form_inputs[i].parentElement.classList.remove('formError');
542                }
543            }  else {
544                if (form_inputs[i].value == '') { // Tyhjä kenttä
545                    valid = false;

546                    // Error elementin info
547                    if (form_inputs[i].getAttribute('data-form-error-msg') && form_inputs[i].getAttribute('data-form-error-msg') !== '') {
548                        form_error_elem += '- '+form_inputs[i].getAttribute('data-form-error-msg') + '<br>';
549                    } else {
550                        form_error_elem += '- '+form_inputs[i].label + '<br>';
551                    }
552                    form_inputs[i].parentElement.classList.add('formError');
553                }
554            }
555        }
556    }
557    // Onko kaikki checkboxit täytetty jota pakollisia
558    if (form_checkbox == true && form_checkbox_checked == false) {
559        valid = false;
560        form_checkbox_error_elem.parentElement.classList.add('formError');
561    }
562    // Onko kaikki radio elementit täytetty jota pakollisia
563    if (form_radio == true && form_radio_checked == false) {
564        valid = false;
565        form_radio_error_elem.parentElement.classList.add('formError');
566    }
567
568    // Esietettän error elementti
569    if (valid == false && form_error_elem !== '') {
570        // form.insertAdjacentHTML('afterbegin', '<div class="formErrorElement">'+form_error_elem)+'</div>';
571    }
572    
573    return valid;
574}
575
576function deleteProfilePicture(itemID) {
577  const paramsData = {
578    itemID: itemID
579  }
580  const params = encodeQueryData(paramsData);
581  const callbackArgs = [];
582  const responseType = 'html';
583  httpRequestHandler('get', 'ajax/delete-profile-picture/', params, responseType, updatePage, callbackArgs);
584}
585
586function deleteAccount(itemID) {
587  const paramsData = {
588    itemID: itemID
589  }
590  const params = encodeQueryData(paramsData);
591  const callbackArgs = [];
592  const responseType = 'html';
593  httpRequestHandler('get', 'ajax/ajax-delete-account-final/', params, responseType, updatePageTest, callbackArgs);
594}
595
596
597function updatePage() {
598    location.reload(); 
599}
600
601
602function updatePageTest(response) {
603    console.log('updatepage temp - ');
604    console.log(response);
605}
606
607
608function inviteUser(elem, roleIDs, contactID, email, lang, url, method, responseType, callbackFunction, callbackArgs) {
609
610  const data = {
611    lang: lang,
612    roleIDs: roleIDs,
613    contactID: contactID,
614    email: email
615  };
616
617  const params = encodeQueryData(data);
618  httpRequestHandler(method, url, params, responseType, callbackFunction, callbackArgs);
619}
620
621function userInvited(elem, requestResponse) {
622  if (elem && requestResponse.trim() != '' && requestResponse != '-1') {
623      elem.parentElement.innerHTML = '<span>'+requestResponse+'</span>';
624  }
625}
626
627function getOrderInfo(externalKey, url, method, responseType, callbackFunction, callbackArgs) {
628  const data = {
629    lang: lang,
630    externalKey: externalKey
631  };
632
633  const params = encodeQueryData(data);
634  httpRequestHandler(method, url, params, responseType, callbackFunction, callbackArgs);
635}
636
637
638function getOrderInfoLight(externalKey, url, method, responseType, callbackFunction, callbackArgs) {
639  const data = {
640    lang: lang,
641    externalKey: externalKey
642  };
643
644  const params = encodeQueryData(data);
645  httpRequestHandlerLight(method, url, params, responseType, callbackFunction, callbackArgs);
646}
647
648
649
650
651function updateOrders(url, method, responseType, callbackFunction, callbackArgs) {
652  const data = {
653    lang: lang
654  };
655  const params = encodeQueryData(data);
656  httpRequestHandler(method, url, params, responseType, callbackFunction, callbackArgs);
657}
658
659
660
661function confirmOrder(form, itemID) {
662
663    var orderID = form.querySelector('[name="orderID"]').value;
664    if (orderID == '') {
665        alert('Order ID missing!');
666        return false;
667    }
668
669    var confirm = false; // Käsitelläänkö vai siirretäänkö takaisin käsiteltäväksi
670    var confirmed = form.querySelector('[name="confirmed"]').value;
671    if (confirmed == '') {
672        confirm = true;
673    } else { // Tilaus on jo tasomestarilla tai tuotannossa, avataan popup jossa varoitetaan tästä
674      const data = {
675        lang: lang,
676        orderID: orderID
677      };
678      const params = encodeQueryData(data);
679      const callbackArgs = [];
680      httpRequestHandler('GET','ajax/ajax-order-to-checklist/', params, 'html', updatePage, callbackArgs);
681      return false;

682    }
683
684    // Ohjataanko tasomestarille
685    var worktop_master = form.querySelector('[name="worktop_master"]');
686    if (worktop_master) {
687        if (worktop_master.checked) { // Tasomestarille, avataan popup
688            getPopUp('ajax/ajax-select-worktop-master/', {lang: lang, itemID: orderID}, form, itemID);
689        } else { // Ohjataan valitsemaan tuotantolinja 
690            getPopUp('ajax/ajax-select-production-line/', {lang: lang, itemID: orderID}, form, itemID);
691        }
692    }
693    
694}
695
696function selectThis(elem) {
697    var all_elements = elem.parentElement.querySelectorAll('tr');
698    for (let i = 0; i < all_elements.length; i++) {
699      all_elements[i].classList.remove('selected');
700    }
701
702    elem.classList.add('selected');
703}
704
705function addValue(elemID, value) {
706    document.getElementById(elemID).value = value;
707}
708
709function validateTableSelect(form, elemName) {
710    var validateValue = form.querySelector('[name="'+elemName+'"]');
711    if (validateValue.value != '') {
712        return true;
713    } else {
714        validateValue.insertAdjacentHTML('afterend', '<p style="padding: 1rem; color: red;">Valitse tasomestari</p>');
715        return false;
716    }
717}
718
719/** MEDIA START **/
720function dropHandler(elem, ev, media_typeID) {
721  ev.preventDefault();
722  let dt = ev.dataTransfer;
723  let files = dt.files;
724  document.getElementById('fileElem').files = dt.files;
725  previewFiles(files, media_typeID);
726}
727
728function previewFile(file, media_typeID, i) {
729  document.getElementById('fsagaAddNewGalleryItemHolder').innerHTML = '';
730  let reader = new FileReader();
731  reader.readAsDataURL(file);
732  reader.onloadend = function() {
733    let filenameElem = document.createElement('span');
734    filenameElem.innerHTML = file.name;
735    filenameElem.className = 'fsagaFormGroup';
736    let img = document.createElement('img');
737    img.src = reader.result;
738    let img_container = document.createElement('div');
739    img_container.className = 'fsagaAddNewGalleryItemHolderImageWrapper';
740    img_container.appendChild(img);
741    let div = document.createElement('div');
742    div.className = 'fsagaPadSmall';
743    div.setAttribute('id', 'fileMedia'+i)
744
745    var template = '';
746    if (media_typeID == 1) {
747        template = document.getElementById('fsagaMediaImageEditTmpl').innerHTML;
748    }
749    div.appendChild(filenameElem);
750    div.appendChild(img_container);
751    div.insertAdjacentHTML('beforeend', template);
752    document.getElementById('fsagaAddNewGalleryItemHolder').appendChild(div);
753
754  }
755}
756
757function uploadFile(file, media_typeID, itemID, index) { // <- Add `index` parameter
758
759  var url = 'ajax/ajax-save-media-item/';
760  var xhr = new XMLHttpRequest();
761  var form_data = new FormData();
762
763  var form = document.getElementById('fileMedia'+index);
764  var form_inputs = form.querySelectorAll('input, select, textarea');
765
766  for (var i = 0; form_inputs.length > i; i++) {
767    if (form_inputs[i].getAttribute('type') == 'checkbox') {
768      if (form_inputs[i].checked) {
769        form_data.append(form_inputs[i].name, form_inputs[i].value);
770      }
771    } else if (form_inputs[i].getAttribute('type') == 'radio') {
772      if (form_inputs[i].checked) {
773        form_data.append(form_inputs[i].name, form_inputs[i].files[0]);
774      }
775    } else if (form_inputs[i].getAttribute('type') == 'file') {
776      form_data.append(form_inputs[i].name, form_inputs[i].value);
777    } else {
778      form_data.append(form_inputs[i].name, form_inputs[i].value);
779    }
780  }
781
782  form_data.append('database', site);
783  form_data.append('lang', lang);
784  form_data.append('media_typeID', media_typeID);
785  form_data.append('itemID', itemID);
786
787  xhr.open('POST', url, true);
788
789  // Add following event listener
790  xhr.upload.addEventListener("progress", function(e) {
791    console.log('loaded:'+e.loaded);
792    console.log('total:'+e.total);
793    updateProgress(index, (e.loaded * 100.0 / e.total) || 100);
794  })
795
796  xhr.addEventListener('readystatechange', function(e) {
797    if (xhr.readyState == 4 && xhr.status == 200) {
798      // Done. Inform the user
799      showPopUp('','', xhr.responseText);
800    }
801    else if (xhr.readyState == 4 && xhr.status != 200) {
802      // Error. Inform the user
803    }
804  });
805
806  form_data.append('file', file);
807  xhr.send(form_data);
808}
809
810
811
812
813function uploadWorkFile(file, media_typeID, orderID, index, type) { // <- Add `index` parameter
814
815  var url = 'ajax/ajax-save-work-file/';
816  var xhr = new XMLHttpRequest();
817  var form_data = new FormData();
818
819  var form = document.getElementById('fileMedia'+index);
820  var form_inputs = form.querySelectorAll('input, select, textarea');
821
822  for (var i = 0; form_inputs.length > i; i++) {
823    if (form_inputs[i].getAttribute('type') == 'checkbox') {
824      if (form_inputs[i].checked) {
825        form_data.append(form_inputs[i].name, form_inputs[i].value);
826      }
827    } else if (form_inputs[i].getAttribute('type') == 'radio') {
828      if (form_inputs[i].checked) {
829        form_data.append(form_inputs[i].name, form_inputs[i].files[0]);
830      }
831    } else if (form_inputs[i].getAttribute('type') == 'file') {
832      form_data.append(form_inputs[i].name, form_inputs[i].value);
833    } else {
834      form_data.append(form_inputs[i].name, form_inputs[i].value);
835    }
836  }
837
838  form_data.append('database', site);
839  form_data.append('lang', lang);
840  form_data.append('media_typeID', media_typeID);
841  form_data.append('orderID', orderID);
842  form_data.append('type', type);
843
844  xhr.open('POST', url, true);
845
846  // Add following event listener
847  xhr.upload.addEventListener("progress", function(e) {
848    console.log('loaded:'+e.loaded);
849    console.log('total:'+e.total);
850    updateProgress(index, (e.loaded * 100.0 / e.total) || 100);
851  })
852
853  xhr.addEventListener('readystatechange', function(e) {
854    if (xhr.readyState == 4 && xhr.status == 200) {
855      // Done. Inform the user
856      showPopUp('','', xhr.responseText);
857    }
858    else if (xhr.readyState == 4 && xhr.status != 200) {
859      // Error. Inform the user
860    }
861  });
862
863  form_data.append('file', file);
864  xhr.send(form_data);
865}
866
867
868
869function handleFiles(elem, media_typeID, itemID) {
870
871  var files = elem.files;
872  initializeProgress(files.length);
873  if (files.length > 0) {

874    ([...files]).forEach(function (file, i) {
875      uploadFile(file, media_typeID, itemID, i);
876    });
877  } else {
878    showMessage('Select file first', 'message-error');
879  }
880}
881
882
883function handleWorkFiles(elem, media_typeID, orderID, type) {
884
885  var files = elem.files;
886  initializeProgress(files.length);
887  if (files.length > 0) {
888    ([...files]).forEach(function (file, i) {
889      uploadWorkFile(file, media_typeID, orderID, i, type);
890    });
891  } else {
892    showMessage('Select file first', 'message-error');
893  }
894}
895
896
897function previewFiles(files, media_typeID) {
898  // ([...files]).forEach(previewFile);
899  ([...files]).forEach(function (file, i) {
900    previewFile(file, media_typeID, i);
901  });
902}
903
904function initializeProgress(numFiles) {
905  if (typeof progressBar === "undefined") {
906      progressBar = document.getElementById('fsagaProgressBar');
907  }
908
909  document.getElementById('fsagaProgressBarContainer').classList.remove('fsagaHide');
910
911  progressBar.value = 0
912  uploadProgress = []
913
914  for(let i = numFiles; i > 0; i--) {
915    uploadProgress.push(0)
916  }
917}
918
919function updateProgress(fileNumber, percent) {
920  uploadProgress[fileNumber] = percent;
921  let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length;
922  progressBar.value = total;
923}
924
925function dragOverHandler(elem, ev) {
926  elem.classList.add('fsagaDropHighlight')
927  // Prevent default behavior (Prevent file from being opened)
928  ev.preventDefault();
929}
930
931function unhighlight(elem, ev) {
932  elem.classList.remove('fsagaDropHighlight');
933  ev.preventDefault();
934}
935/** MEDIA END **/