Safari like URL Full page preview

index.jade

.wrapper
  .text="Hover over the URL to open a full-page preview of the link just like it does, when you do a triple click on a link in Safari."
  a(href="https://codepen.io",class="link")='Codepen'
  .iframe_wrapper
    iframe(src="",class="iframe")

safari-like-url-full-page-preview.markdown

Safari like URL Full page preview

A pen that demonstrates the behaviour exhibited when you do a triple-click on a link in Safari. It generally opens up a preview pop up that shows the entire page.

A Pen by Dinesh Balaji on CodePen.

License.

script.babel

var wrapper = document.querySelector('.wrapper');
var link = document.querySelector('.link');
var iframe_wrapper = document.querySelector('.iframe_wrapper')
var iframe = document.querySelector('.iframe');
var shown = false;
link.addEventListener('mouseenter', (event) => {
  if (!shown) {
    var src = event.target.href;
    iframe.src = src;
    iframe_wrapper.classList.add('show');
    iframe_wrapper.style.left = event.target.offsetLeft + 'px';
    iframe_wrapper.style.top = event.target.offsetTop + 'px';
    shown = true;
  }
});

wrapper.addEventListener('click', (event) => {
  if (shown) {
    iframe.src = '';
    iframe_wrapper.classList.remove('show');
    iframe_wrapper.style.left = '0px';
    iframe_wrapper.style.top = '0px';
    shown = false;
  }
});

style.scss

@import 'https://fonts.googleapis.com/css?family=Lato';

html, body {
  width: 100%;
  height: 100%;
  font-family: 'Lato', sans-serif;
  background: linear-gradient(90deg, rgba(82,255,191,1) 0%, rgba(64,231,212,1) 100%);
}

.wrapper {
  width: 100%;
  height: 100%;

  .text {
    width: 300px;
    text-align: Center;
    margin: 10px auto;
    background: white;
    border: 5px solid rgba(0, 0, 0, 0.5);
    padding: 10px;
  }
  .link {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    text-decoration: underline;
    color: white;
    font-size: 20px;
  }
  .iframe_wrapper {
    width: 80vw;
    height: 50vh;
    position: absolute;
    left: 0px;
    top: 0px;
    border: 1px solid #4a4a4a;
    transform: translate(-100%, -100%);
    box-shadow: 0px 0px 10px 0px #4b4b4b;
    visibility: hidden;
    transition: visibility .3s linear;
    background: #4b4b4b;
    &.show {
      transform: translate(-50%, 35px) !important;
      visibility: visible;
    }
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: 0px;
      height: 0px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #4a4a4a;
      transform: translate(-50%, -100%);
    }
    iframe {
      width: 100%;
      height: 100%;
    }
  }
}