0

I'm trying to do the following:

I have a number of blocks which I want to transfer to another page. The transfer should be made on click on one of those blocks (not the one called 'banner'), and they should be shown as if it was a slider (the element which was clicked should be shown in the center, the others should be hidden/half-hidden).

For example, If I click on the green block, I should be redirected to the second page (called 'gallery') and there I should see the green block right in the center (surrounded by the other blocks, but it's too early for that, I think).

I'm a long way away from the goal, but I got stuck with the concept of getting the block I click on and transferring it to another page. Could you please help me out here?

Sorry for the code, it's really just a trial version, I'm just trying to get the hang of this concept first.

'use strict';

let smallBlocks = document.querySelectorAll('.small-blocks__block');
let navBack = document.querySelector('.small-blocks__arrows--back');
let navForward = document.querySelector('.small-blocks__arrows--forward');
let colors = ['pink','yellow','green','grey','purple','black'];
let element;

let onClickBlock = function (evt) {
 element = evt.currentTarget;
 window.open('gallery.html', '_blank');
}

smallBlocks.forEach(function (element) {
 element.addEventListener('click', onClickBlock);
});
sessionStorage.setItem('clickedElement', element);
document.querySelector('.main').insertAdjacentHTML('beforebegin', sessionStorage.getItem(element));
body {
 margin: 0;
 padding: 0;
}

.visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;

  white-space: nowrap;

  -webkit-clip-path: inset(100%);

          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.wrapper {
 width: 90%;
 padding-left: 5%;
 padding-right: 5%;
 margin: 0 auto;
}

.banner {
 width: 80%;
 margin: 0 auto;
 height: 300px;
 margin-bottom: 100px;

 background: blue;
}

.small-blocks {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 width: 80%;
 margin: 0 auto;
}

.small-blocks__block {
 width: 320px;
 margin-bottom: 50px;
}

.small-blocks__block--image {
 width: 320px;
 height: 150px;
}

.small-blocks__block--image-black,
.small-blocks-gallery__block--image-black {
 background: black;
}
.small-blocks__block--image-yellow,
.small-blocks-gallery__block--image-yellow {
 background: yellow;
}
.small-blocks__block--image-green,
.small-blocks-gallery__block--image-green {
 background: green;
}
.small-blocks__block--image-purple,
.small-blocks-gallery__block--image-purple {
 background: purple;
}
.small-blocks__block--image-pink,
.small-blocks-gallery__block--image-pink {
 background: pink;
}
.small-blocks__block--image-grey,
.small-blocks-gallery__block--image-grey {
 background: grey;
}

.small-blocks__block--description {
 font-weight: bold;
 font-size: 24px;
 line-height: 30px;
}

.small-blocks__block--time {
 font-size: 18px;
 line-height: 24px;
}

.hidden {
 display: none;
}



/*GALLERY*/

.main {
 margin: 0 auto;
 position: relative;
 overflow: hidden;
 width: 800px;
 height: 600px;
}


.small-blocks-gallery {
 position: absolute;
 display: flex;
 flex-wrap: wrap;
 width: 8000px;
 margin: 0 auto;
}

.small-blocks-gallery__block {
 width: 600px;
 margin-bottom: 50px;
 height: 400px;
}

.small-blocks-gallery__block--image {
 width: 500px;
 height: 300px;
}

.small-blocks-gallery__block--description {
 width: 500px;
 font-weight: bold;
 font-size: 24px;
 line-height: 30px;
}

.small-blocks-gallery__nav {
 position: absolute;
 top: 40%;
 width: 800px;
}

.small-blocks-gallery__nav-arrows {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
}

.small-blocks-gallery__nav-arrows--back {
 border: none;
 background: transparent;
 font-size: 40px;
}

.small-blocks-gallery__nav-arrows--forward {
 border: none;
 background: transparent;
 font-size: 40px;
}
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <header class="header page-header">
      <h1 class="visually-hidden">Фотогалерея</h1>
    </header>
    <main>
      <div class="wrapper">
        <section class="banner">
          <h2 class="visually-hidden">Баннер</h2>
        </section>
        <section class="small-blocks">
          <h3 class="visually-hidden">Маленькие блоки</h3>
          <div class="small-blocks__block">
            <div class="small-blocks__block--image small-blocks__block--image-black"></div>
            <p class="small-blocks__block--description">Большой заголовок статьи, очень длинный и явно не короткий</p>
            <span class="small-blocks__block--time">10 march 2019</span>
          </div>
          <div class="small-blocks__block">
            <div class="small-blocks__block--image small-blocks__block--image-yellow"></div>
            <p class="small-blocks__block--description">Большой заголовок статьи, очень длинный и явно не</p>
            <span class="small-blocks__block--time">10 march 2019</span>
          </div>
          <div class="small-blocks__block">
            <div class="small-blocks__block--image small-blocks__block--image-green"></div>
            <p class="small-blocks__block--description">Большой заголовок статьи, очень длинный и явно</p>
            <span class="small-blocks__block--time">10 march 2019</span>
          </div>
          <div class="small-blocks__block">
            <div class="small-blocks__block--image small-blocks__block--image-purple"></div>
            <p class="small-blocks__block--description">Большой заголовок статьи, очень длинный и</p>
            <span class="small-blocks__block--time">10 march 2019</span>
          </div>
          <div class="small-blocks__block">
            <div class="small-blocks__block--image small-blocks__block--image-pink"></div>
            <p class="small-blocks__block--description">Большой заголовок статьи, очень длинный</p>
            <span class="small-blocks__block--time">10 march 2019</span>
          </div>
          <div class="small-blocks__block">
            <div class="small-blocks__block--image small-blocks__block--image-grey"></div>
            <p class="small-blocks__block--description">Большой заголовок статьи, очень</p>
            <span class="small-blocks__block--time">10 march 2019</span>
          </div>
        </section>
    </main>
    <footer class="footer page-footer">
    </footer>
    <script src="script.js"></script>
  </body>
</html>
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Gallery Test</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <header class="header page-header">
    </header>
    <main class="main">
      <section class="small-blocks-gallery">
        <h3 class="visually-hidden">Маленькие блоки</h3>
        <div class="small-blocks-gallery__block">
          <div class="small-blocks-gallery__block--image small-blocks-gallery__block--image-black"></div>
          <p class="small-blocks-gallery__block--description"></p>
        </div>
        <div class="small-blocks-gallery__block">
          <div class="small-blocks-gallery__block--image small-blocks-gallery__block--image-yellow"></div>
          <p class="small-blocks-gallery__block--description"></p>
        </div>
        <div class="small-blocks-gallery__block">
          <div class="small-blocks-gallery__block--image small-blocks-gallery__block--image-green"></div>
          <p class="small-blocks-gallery__block--description"></p>
        </div>
        <div class="small-blocks-gallery__block">
          <div class="small-blocks-gallery__block--image small-blocks-gallery__block--image-purple"></div>
          <p class="small-blocks-gallery__block--description"></p>
        </div>
        <div class="small-blocks-gallery__block">
          <div class="small-blocks-gallery__block--image small-blocks-gallery__block--image-pink"></div>
          <p class="small-blocks-gallery__block--description"></p>
        </div>
        <div class="small-blocks-gallery__block">
          <div class="small-blocks-gallery__block--image small-blocks-gallery__block--image-grey"></div>
          <p class="small-blocks-gallery__block--description"></p>
        </div>
        <div class="small-blocks-gallery__nav">
          <div class ="small-blocks-gallery__nav-arrows">
            <button class="small-blocks-gallery__nav-arrows--back" type="button"> < </button>
            <button class="small-blocks-gallery__nav-arrows--forward" type="button"> > </button>
          </div>
        </div>
      </section>
    </main>
    <footer class="footer page-footer">
    </footer>
    <script src="script.js"></script>
  </body>
</html>
Mike L.
  • 313
  • 2
  • 12

1 Answers1

1

After a couple of try with Firefox 69.0 (and quite be helped by an SO answer), I noticed that:

  • The main web page and the popup should be in a place where cross-origin access has to be allowed (and local files won't work)
  • The call to highlight an element has to be fired from the opened popup
  • a loop relying on setTimeOut() should be placed to be sure the popup elements are fully loaded. This one sounds kind of weird, since even once the onload event is fired, the window.document.getElementById method could be not yet available (actually the call will success, but you'll get an error in the browser console, at least for Firefox 69.0)

You'll find below a working sample:

  • Main page. Steps are commented.

    <html>
    <head>
        <script type="text/javascript">
            var popup = null;
            function highlightPopupElement(popupDocument) {

                // Checks if the popup is fully loaded. If not,
                // the function sets a timeout call to itself and exits.
                if (!popupDocument.getElementById) {
                    setTimeout(function() {highlightPopupElement(popupDocument)}, 100);
                    return;
                }

                // Retrieves the element to highlight
                elemToHighLight = popupDocument.getElementById('to-highlight');
                if (!elemToHighLight) {
                    console.log("Error: element to highlight not found");
                    return;
                }

                // Highlighting
                elemToHighLight.className="highlighted";

            }

            // Function called by the button click
            function loadAndHighlight() {
                popup = window.open('gallery.html', 'showtime');
            }
        </script>
    </head>
    <body>
        <!-- Click the button to load the popup and highlight an element -->
        <button onclick="loadAndHighlight()">Showtime</button>
    </body>
</head>

  • Popup page, quite simple. The second item is highlighted (background is blue). You can see that the highlighting function defined in the main page is called from the popup and once its page is fully loaded.

    <html>
    <head>
        <style>
            li.highlighted {background-color:c0c0f0;}
        </style>
        <script type="text/javascript">         
            function loaded() {
               window.opener.highlightPopupElement(document);
            }
        </script>
    </head>
    <body onload="loaded()">
        <ul>
            <li>Not Highlighted</li>
            <li id="to-highlight">Highlighted :-)</li>
            <li>Not Highlighted</li>
        </ul>
    </body>
</head>
Amessihel
  • 5,891
  • 3
  • 16
  • 40