Description

The usual sequence of doing flickings are:

• (1) touch's down & moving
• (2) touch's up
• (3) do Animation
• (4) end of animation
• (5) idle (after the flickEnd callback)

And illustrating above sequence with the moment which custom events fires are:
--- flick(1) --- beforeFlickStart(2) --- flick(3) --- flickEnd(4) --- idle (5) -->

Among those events, the isAnimaiting status values are:
--- false ----- true ------------------- true ------ true ---------- false ---->

The ideal of the animation status should be true only in phase (3), which animation is really happening.

So, the corrected isAnimating status should be as follows:
--- flick(1) --- beforeFlickStart(2) --- flick(3) --- flickEnd(4) --- idle (5) -->
--- false ----- false------------------- true ------ false ---------- false ---->

Description

Prior 2.x, adaptiveHeight option was getting panel's height value from jQuery's .outerHeight(true).
Which means, it should return element's height + padding + margin.

• http://devdocs.io/jquery/outerheight#outerHeight-includeMargin

The current, is returning only the height + margin. It should sum padding value also.

Description

A bug occurs when execute 'resize' method bug in IE9

when resize in a browser that does not support transform, left or top of the panels will not change.

Steps to check or reproduce

Description

eg.Flicking written by js, but have file supporting typescript. (flicking.d.ts)
But an update is required.

I use [email protected], it tell me some lint error.
error type is lacks return-type annotation

Steps to check or reproduce

• used typescript compile option

"compilerOptions": {
        "allowJs": true,
        "sourceMap": true,
        "noImplicitAny": true
}

• library usage

import * as Flicking from "@egjs/flicking";

// error TS7010: 'destroy', which lacks return-type annotation, implicitly has an 'any' return type
// `setStatus` method have same error

Description

• update dependencies to the latest
• update npm install command on CI
  • naver/billboard.js#316
• update webpack's config to meet 4.0 changes

Description

Due to increase of performance device usages, function to determine isHWAccelerable isn't useful anymore.
Remove from the code base.

Ref #42

Description

Add https://greenkeeper.io integration to manage npm modules automatically.

Description

Have tested on Android 4.1.1 (Galaxy S3)

Steps to check or reproduce

I just bumped up to 2.0.3. It works just like as vertical/horizontal scroll. It has been working well in 1.5.0.

Description

I'm using [email protected] and [email protected]

currently getStatus function returns interface string | FlickingStatus.
If I want to reference status as FlickingStatus, I have to cast that like status as FlickingStatus or just reference them like below screenshot.

but actually none of that possible.

FlickingStatus is not exported and referencing status recognized as string.

casting
direct referencing

Description

Introduce the way to plug with different effects or functionalities.

new eg.Flicking( ... )
    .plugin([
        new eg.Flicking.plugin.SomeEffect( ... ),
        ...
    ]);

Description

Generate changelog automatically based on commit logs.

onflick 이벤트에서
moveTo, next, prev 메소드 호출을 통해 전환시 distance가 pos와 동일한 값이 떨어집니다.
이후 수동으로 flicking 후 호출시 정상적인 값이 떨어집니다.

Description

• Get rid Jekyll (due to it makes tedious setup dev-env in windows)
• Make gh-pages deployment as a shell script

Description

Add support of the official react binding

Description

.getTotalCount() was deprecated since 1.3.0.

• naver/egjs#229

According the deprecation process, the removal should happen at 4th release(It needed removed on 2.1.0).

• https://github.com/naver/egjs/wiki/1.x-Deprecation-process#2-code-removal

Description

A bug occurs when executingresize method in this module.

• Related Link: https://m.search.naver.com/search.naver?where=m&sm=mtb_etc&mra=blA2&query=%EC%97%AC%EB%A6%84%EA%BD%83

Details

When resize occurs, reassigning the width value of the container. If the panels already constituting the container are responsive, the reassignment occurs, and the layout of the elements constituting the panel is not properly detected.

Steps to check or reproduce

1. Click the link
2. Open the Chrome Development Tool
3. Click the rotate button.

Current behavior

Expected behavior

4. Click the rotate button again.

Current behavior

Expected behavior

What about adding an option value for the responsive case?
Thx.

@netil commented on Fri Aug 05 2016

Description

For some components, can be useuful improving rendering cost with CSS containment property.
https://developers.google.com/web/updates/2016/06/css-containment

Try to find if it's applicable.

@netil commented on Wed Nov 16 2016

There're many behavioural causing side effects.
When panels are fixed size is worth to apply, but there's no guarantee of external(ex. intentional trigger) layout transformation.

Try research and look for more practical use cases of that spec. keeping this issue for later.

Description

eg.isHWAccelerable is not provied.
https://github.com/naver/egjs-flicking/blob/master/src/Flicking.js#L26

destroy() 한번 호출 한 이후에
새로 this.f1 = new eg.Flicking 객체 생성하면 연결이 안됩니다.

js로 html 그리고
다른 메뉴 선택시 destroy로 연결 끊고 html 비우고
새로운 메뉴의 html 다시 그리고
this.f1 = new eg.Flicking으로 다시 그린 부분 잡아서
컨트롤 하고 있었습니다.

// 해제
itemUtil.flickingDestroy();

// 화면 다시 그리기
var index = 0;
$.each(json_cate,function(k,v){
itemUtil.drawItem(k, index++);
});

// 다시 그린 화면 컨트롤 하기 위해 연결
itemUtil.getFlicking();

// destroy 호출 후 다시 잡으면
// transform: translate(200%, 0px); 이 값 설정도 안됨.

이렇게 동적으로 호출 할 때는 에러가 나는데
getFlicking : function() {
start = ;

	this.f1 = new eg.Flicking("#mflick", {
	  duration : 100,
	  hwAccelerable : true,			
	  threshold : 20, 
	  circular: true
	}).on({
	  flickEnd: function(e) {
		itemUtil.selectMenu();
		itemUtil.setHeight();
	  }
	});
}
, flickingDestroy : function() {
	//log('flickingDestroy');
	$('.ssMenu').hide();

	this.f1.currentIndex = 0;
	this.selectMenu();
	this.f1.destroy();
	
	$('#mflick').empty();
}

페이지가 처음 로드 될 때는 에러가 안납니다.
$(document).ready(function(){
var index = 0;

$.each(json_cate,function(k,v){
	itemUtil.drawItem(k, index++);
});

itemUtil.getFlicking();
itemUtil.selectMenu();

//console.log("mainList li img : " + $(".mainList li img").height());

});

에러-----------------------------------

Uncaught TypeError: Cannot read property 'destroy' of null
at PanInput.connect (flicking.pkgd.min.js:1)
at Axes.connect (flicking.pkgd.min.js:1)
at Flicking._bindEvents (flicking.pkgd.min.js:1)
at new Flicking (flicking.pkgd.min.js:1)

at HTMLAnchorElement.dispatch (jquery-1.11.3.min.js:4)
at HTMLAnchorElement.r.handle (jquery-1.11.3.min.js:4)

Description

Update below dependencies:

• egjs/component: 2.1.0
• egjs/axes: 2.2.0

Description

in flicking.d.ts

import * as Component from "@egjs/component";

Currently, we use esModuleInterop: true of ts-compiler option in TypeScript 2.7.x version. That is, the current version and way of importing module is not appropriate.

How about supporting ES6 module like @egjs/axes?

ref>> naver/egjs-component#32

Steps to check or reproduce

Description

• support @types/egjs-flicking

user want to do something when touching on flicking.

flikcking.on("hold", function(e) {
   // do it!
});

@netil commented on Thu Aug 11 2016

Description

For previewPadding options, only px values are allowed.
To be responsible, it should be act on %(relative wrapper element) values too.

Steps to check or reproduce

 new eg.Flicking("#mflick", {
    previewPadding: [ "10%", "20%" ],
    circular: true
});

@netil commented on Mon Nov 14 2016

There's ambiguity on this.
If percentage values are given, what that values are based on?

• Wrapper element
• screen
• viewport (in case of desktop this will be browser's size)

@netil commented on Thu Nov 17 2016

As a result on internal discussion,

• wrapper is the base element
• isn't must functionality for this moment, but will be useful providing

Keep for later shipment

@netil commented on Fri Mar 03 2017

Try implement on v2

@sculove commented on Thu Aug 03 2017

Issue moved to naver/egjs-flicking #19 via ZenHub

Description

babel-preset-es2015 was deprecated and it should be updated to babel-preset-env

• https://babeljs.io/env/

Description

I can't see @see of content on api document.
https://github.com/naver/egjs-flicking/blob/master/src/Flicking.js#L41-L42

Description

There're possibility of mal-minification of the this keyword used on private ._setMoveStyle() method.

The possible case is when user set pure_getters=true option using UglifyJS2 as minification tool.

• https://github.com/mishoo/UglifyJS2/tree/harmony#compress-options

Steps to check or reproduce

// current minified code
Flicking.prototype._setMoveStyle = function(t, e) {
    var n = l.TRANSFORM;

    this._setMoveStyle = n.support ? function(t, e) {
            var i;
            a.utils.css(t, ((i = {})[n.name] = a.utils.translate(e[0], e[1], this._conf.useLayerHack), i))
        } :
        function(t, e) {
            a.utils.css(t, {
                left: e[0],
                top: e[1]
            })
        }, this._setMoveStyle(t, e)  // <-- called in current context with the keyword 'this'
}

// reported mal-minification code
e.prototype._setMoveStyle = function(t, e) {
	var n = d.TRANSFORM;
	
        // it's wrapped with parenthesis, which returns a function and then called
        // in this case, there's no context and  'this' become undefined
	(this._setMoveStyle = n.support ? function(t, e) {
			var i;
			p.utils.css(t, (i = {},
			i[n.name] = p.utils.translate(e[0], e[1], this._conf.useLayerHack), i))
		}
		: function(t, e) {
			p.utils.css(t, {
				left: e[0],
				top: e[1]
			})
		}
	)(t, e)  // <-- there's no context in this call
}

안녕하세요.
ie8 에서 egjs-flicking을 사용하려고
hammerjs-compatible
hammer
의 dependency를 맞추니
forEach 가 없어서 에러가 발생합니다.

polyfill 하니 기본적인 플리킹 기능이 ie8에서도 잘 작동하는데,
아예 flicker코드 내에 polyfill을 해서 ie8 하위 호환을 맞추는 건 어떠신가요?

if (typeof Array.prototype.forEach != 'function') {
    Array.prototype.forEach = function(callback, thisArg) {
        if (typeof this.length != 'number') return;
        if (typeof callback != 'function') return;

        if (typeof this == 'object') {
            for (var i = 0; i < this.length; i++) {
                if (i in this) {
                    callback.call(thisArg || this, this[i], i, this);
                } else {
                    return;
                }
            }
        }
    };
}

pr 받으시나요?

Description

In the real use cases, when needs to handle a massive panel elements, aren't recommended due to the performance decrease.

In that case dealing with a small number of DOM nodes and swap contents will be more effective.
Intent ship recyling DOM feature.

@netil commented on Mon Jan 16 2017

Description

Currently .resize(), only treat one sided dimension value.

ex.)

• when option.horizontal == true, resize only width
• when option.horizontal == false, resize only height

Improve .resize() to adjust width and height

@sculove commented on Thu Aug 03 2017

Issue moved to naver/egjs-flicking #17 via ZenHub

Description

egjs-infiniteGrid supports snapshot method like setStatus and getStatus for using persist
I would like to provide a snapshot method at Flicking component like infiniteGrid.

ref : naver/egjs#443

Description

If there is an overlay layout using its z-index value as 100, we should reorganize the z-index values in order to use egjs-flicking since its container’s z-index value is 2000, which is pretty high.
It’d be good for various of use-cases if we can use an option such as containerZIndex.

template for new issue and PR

Description

An error occurs when constructing a Flicking module

Steps to check or reproduce

I'm using webkacp v3.10.0, Typescript v2.6.2 and the code is as follows:

import * as Flicking from "@egjs/flicking";
const flicking = new Flicking(this.wrapper);

Error message:

Axes refer to /outjs/ when it's a module. However, index.js of /outjs/ seems to be generated from PanInput and it can't be referenced as a static property of Axes.

Fix code. but side-effects are expected So I won’t give you a PR.

// Flicking.js(@egjs/flicking)
import Axes, {PanInput} from "@egjs/axes";

@netil commented on Mon Jan 16 2017

Description

Currently .resize(), only treat one sided dimension value.

ex.)

• when option.horizontal == true, resize only width
• when option.horizontal == false, resize only height

Improve .resize() to adjust width and height

Description

Axes supports ES6 Module for Tree-shaking.
if you want to use latest version of @egjs/axes, you should change code following like

AS-IS (before @egjs/axes v2.4.2)

import Axes from "@egjs/axes";

// new Axes()
// new Axes.PanInput()

TO-BE (after @egjs/axes v2.4.2)

import Axes, {PanInput} from "@egjs/axes";

// new Axes()
// PanInput()

Description

Provide an option to resize automatically when device rotates.

플리킹 ui 쓰면 PC에서 볼때 이렇게 보입니다.
If I use Flicking ui , it looks like this below picture on PC

Description

Allows multiple panels to be shown and flicks.

@sculove commented on Thu Sep 14 2017

Description

provide isTrusted property on events.

When the event is fired using API method, isTrusted is false
When the event is fired using User action, isTrusted is true

Description

In some circumstances, panels are duplicated due to maintain the usability.
Ex. when there's a panel, to make flickable, it duplicates to be 3.
In that case, logically there's a panel, but physically there're 3 panels.

This approach was quite reasonable at the first time, but it's giving confusion and isn't really used normally.
Get rid the confusion physical on API calls.

Description

Current implementation of adaptiveHeight option is for static DOM panels, which are defined at the time of the initialization.

When panel elements are updated dynamically, the height's value needs to be updated as well.
Look for a better way to handle this.

@sculove commented on Fri Feb 03 2017

• https://kr.pinterest.com/pin/469711436116656025/
• https://kr.pinterest.com/pin/571394271455030235/
• https://kr.pinterest.com/pin/547046685970796426/
• ...

source : https://kr.pinterest.com/search/pins/?q=swipe%20ui&rs=typed&term_meta[]=swipe%7Ctyped&term_meta[]=ui%7Ctyped

Description

If call 'disableInput' method while holding it with touch, mehotds like prev, next, moveTo, ... don't work.

flicking._conf.touch.holding

Steps to check or reproduce

Description

Implement dot indicator option to facilitate the navigation experience

Description

restore custom event is fired inappropriately in specific occasion.

Steps to check or reproduce

• Do touch moves of panel, but to be restored
• Call .next/prev/moveTo with duration
• unexpected restore event is fired after flickEnd event

Description

Allow doc & readme file

@sculove commented on Fri Feb 03 2017

• https://kr.pinterest.com/pin/469711436116656025/
• https://kr.pinterest.com/pin/571394271455030235/
• https://kr.pinterest.com/pin/547046685970796426/
• ...

source : https://kr.pinterest.com/search/pins/?q=swipe%20ui&rs=typed&term_meta[]=swipe%7Ctyped&term_meta[]=ui%7Ctyped

@netil commented on Thu Aug 11 2016

Description

For previewPadding options, only px values are allowed.
To be responsible, it should be act on %(relative wrapper element) values too.

Steps to check or reproduce

 new eg.Flicking("#mflick", {
    previewPadding: [ "10%", "20%" ],
    circular: true
});

@netil commented on Mon Nov 14 2016

There's ambiguity on this.
If percentage values are given, what that values are based on?

• Wrapper element
• screen
• viewport (in case of desktop this will be browser's size)

@netil commented on Thu Nov 17 2016

As a result on internal discussion,

• wrapper is the base element
• isn't must functionality for this moment, but will be useful providing

Keep for later shipment

@netil commented on Fri Mar 03 2017

Try implement on v2

version: latest stable (2.0.3)
raf polyfill calls window.performance.now, which is not supported in ie9