0

I'm trying to execute a JS file in my tab2.page.html but it's not working. It's most likely because I'm using an Angular-Framework which is based on typescript. When executing the project the HTML5 document runs just fine, but the JS functionalities aren't applied.
I'd like to know if there is a solution or some kind of workaround for my problem.
Thanks in advance!

tab2.page.html:

<ion-app>
  <ion-header [translucent]="true">
    <ion-toolbar>
      <ion-title>
        Galerie
      </ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
    </head>

    <body>
      <div class="gallery" id="gallery">
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,care" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,studied" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,substance" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,choose" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,past" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,lamp" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,yet" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,eight" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,crew" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,event" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,instrument" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,practical" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,pass" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,bigger" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,number" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,feature" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,line" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,railroad" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,pride" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,too" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,bottle" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,base" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,cell" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,bag" alt=""></div>
        </div>
        <div class="gallery-item">
          <div class="content"><img src="https://source.unsplash.com/random/?tech,card" alt=""></div>
        </div>
      </div>
      <script src="galerie.js"></script>
    </body>
  </ion-content>
</ion-app>


JS-File:

var getVal = function (elem, style) { return parseInt(window.getComputedStyle(elem).getPropertyValue(style)); };
var getHeight = function (item) { return item.querySelector('.content').getBoundingClientRect().height; };
var resizeAll = function () {
    var altura = getVal(gallery, 'grid-auto-rows');
    var gap = getVal(gallery, 'grid-row-gap');
    gallery.querySelectorAll('.gallery-item').forEach(function (item) {
        var el = item;
        el.style.gridRowEnd = "span " + Math.ceil((getHeight(item) + gap) / (altura + gap));
    });
};
gallery.querySelectorAll('img').forEach(function (item) {
    item.classList.add('byebye');
    if (item.complete) {
        console.log(item.src);
    }
    else {
        item.addEventListener('load', function () {
            var altura = getVal(gallery, 'grid-auto-rows');
            var gap = getVal(gallery, 'grid-row-gap');
            var gitem = item.parentElement.parentElement;
            gitem.style.gridRowEnd = "span " + Math.ceil((getHeight(gitem) + gap) / (altura + gap));
            item.classList.remove('byebye');
        });
    }
});
window.addEventListener('resize', resizeAll);
gallery.querySelectorAll('.gallery-item').forEach(function (item) {
    item.addEventListener('click', function () {        
        item.classList.toggle('full');        
    });
});
Favour R.
  • 1
  • 1
  • 4

0 Answers0