Giter Site home page Giter Site logo

naver / egjs-infinitegrid Goto Github PK

View Code? Open in Web Editor NEW
1.9K 24.0 90.0 185.92 MB

A module used to arrange card elements including content infinitely on a grid layout.

Home Page: https://naver.github.io/egjs-infinitegrid/

License: MIT License

JavaScript 4.01% HTML 6.09% CSS 1.47% TypeScript 42.32% Vue 2.24% Svelte 1.22% Sass 0.55% MDX 42.10%
infinitegrid egjs masonry layout javascript dom-recycle react infinite grid vue

egjs-infinitegrid's Issues

Make default demo for test case

Description

Make default demo for test case

  • GridLayout
  • JustifedLayout
  • FrameLayout
  • SquareLayout
  • PackingLayout
  • append
  • prepend
  • getStatus
  • setStatus
  • endableParallax
  • disableParallax
  • clear
  • vertical
  • horizontal

Steps to check or reproduce

provides container tagname

Description

when isOverflowScroll options is 'true', infiniteGrid create dom element.
this is div element.
but, user want to use other tags like 'ul' , 'ol', ...

Research IntersectionObserver spec

@sculove commented on Fri Apr 22 2016

Description

I think IntersectionObserver spec can use at infiniteGrid and visible.
Therefore, check this spec.
https://developers.google.com/web/updates/2016/04/intersectionobserver

@kishu commented on Fri Nov 18 2016

image

Intersection Observer API is good, but it is an experimental technology and not supported by most browsers. I want you to keep looking over time.

The implementation code for polyfill of this API(https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill) is interesting. I will refer to it in the egjs conversion work.

Document for Layouts API

Description

Document for Layouts API

  • GridLayout
  • JustifedLayout
  • SquareLayout
  • FrameLayout
  • PackingLayout

Sub Modules.

  • Parallax

Steps to check or reproduce

provide layout interface

Description

provide layout interface
layout(groups: Group[], outline: number[]);
append(group: Group, outline: number[]): Group;
prepend(group: Group, outline: number[]): Group;
setViewport(width: number, height: number);

#32

Steps to check or reproduce

remove name in AMD

Description

If you use infinitegrid in AMD, you should use 'infiniteGrid' as named.

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("@egjs/component"));
	else if(typeof define === 'function' && define.amd)
		define("InfiniteGrid", ["@egjs/component"], factory);
	else if(typeof exports === 'object')
		exports["InfiniteGrid"] = factory(require("@egjs/component"));
	else
		root["eg"] = root["eg"] || {}, root["eg"]["InfiniteGrid"] = factory(root["eg"]["Component"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_5__) {

If you remove umdNamedDefine property, you can use something name.

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("@egjs/component"));
	else if(typeof define === 'function' && define.amd)
		define(["@egjs/component"], factory);
	else if(typeof exports === 'object')
		exports["InfiniteGrid"] = factory(require("@egjs/component"));
	else
		root["eg"] = root["eg"] || {}, root["eg"]["InfiniteGrid"] = factory(root["eg"]["Component"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_5__) {

update env files

Description

  • support release, changelog task
  • update dependency lib

Support parallax scrolling

Description

Support parallax scrolling.
If item has parallax class name and image is longer than the area surronding this, apply parallax scrolling.

Steps to check or reproduce

Use only option parallax.
Parallax's options have selector, strength, ...
selector option indicates the image to parallax scroll.
strength option indicates parallax scroll speed.

If item has not the image indicated selector, this item does not apply parallax scrolling.

var ig = new eg.InfiniteGrid(container, {
	parallax: true,
/*
default
{
	selector: "img",
	strength: 1,
*/
});

// or 
var ig = new eg.InfiniteGrid(container, {
	parallax: {
		selector: ".thumbnail", 
		strength: 1, // default 1
	},
});

Image is longer than the area(item)

.item {
	height: 400px;
	overflow:hidden;
}
img {
	height: 600px;
}

Surrounding area is images's parent node.

<div class="item">
	<img src="...." class="thumbnail">
</div>

2017-09-21 1 58 25

Parallax scrolling use transform level 1.
This is supported from IE9 or later, but use with a prefix.

InfinteGrid show x-boxs when Image is failed

Description

  • infiniteGrid should support failover feature when image loading is failed. (error code 404)
  • infiniteGrid should notify that the image loading is failed.

Interface

new eg.InfiniteGrid("#grid", {
    itemSelector: ".item"
}).on({
    "imageError": function(e) {
        // e.target: image element. - replace image element or src
        // e.item: item element. - If the item was previously deleted, this value is undefined.
    },
});

Intent to apply CSS containment

@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.

add isTrust properties

Description

infiniteGrid 3.0 omits isTrusted property on append/prepend/change events

fix start page for v3.0.0

Description

fix start page for v3.0.0

  • 5 Layouts
    • Demos in 5 Layouts
  • Projects

Steps to check or reproduce

infiniteGrid resize bug

Description

if trigger resize event, items' length is doubled.
previous items are the same as the next items.
previous items are not show. next items are show after previous items.

Steps to check or reproduce

add demo for 3.0.0

Description

  1. each layout demo
  2. one row infinite demo
  3. two row infinite demo

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.