naver / egjs

Javascript components group that brings easiest and fastest way to build a web application in your way.
https://naver.github.io/egjs
Other
935 stars 80 forks source link

call 'resize()' when preview padding was applied, panel size doesn't change #489

Closed weumj closed 7 years ago

weumj commented 7 years ago

Description

Calling flicking.resize() when device rotate event occurs, each panel's size should change appropriately.

But when preview padding was applied, calling 'resize()' did not change each panel's size.

portrait

image

after device rotate to horizontal (current)

image

after device rotate to horizontal (expected)

image

Steps to check or reproduce

  1. create a Flicking object and listen device rotate event
  2. invoke device rotate event

I think that _checkPadding() caused this problem.

Javascript

const flicking = new eg.Flicking("#flick", {
    duration: 200,
    hwAccelerable: true,
    threshold: 70,
    previewPadding: [0, 16],
    circular: false,
    adaptiveHeight: true
});

$(window).on("rotate", () => flicking.resize());

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.0,minimum-scale=1.0,user-scalable=yes">
</head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/egjs/1.5.0/pkgd/eg.pkgd.min.js"></script>
  <body>
    <div id="flick">
      <div>panel 1</div>
      <div>panel 2</div>
      <div>panel 3</div>
      <div>panel 4</div>
      <div>panel 5</div>
    </div>
  </body>
</html>

CSS

body {
   margin: 0;
   padding:0;
}
#flick {
   height: 200px;
}
#flick div {
   border: 1px solid rgba(0,0,0,0.08);
   background-color: #bbbbbb;
   height: 100%;
   font-size: 15px;
}
netil commented 7 years ago

Confirmed the bug, I'll check for the fix.