@egjs/react-flicking 4.16.0-beta.1 → 4.18.0-beta.3

package/dev/archive/css/features.css

@@ -1,49 +0,0 @@
-.flicking-viewport {
-  width: 500px;
-  height: 130px;
-  margin: 0px auto;
-  background: #eee;
-  background: rgba(55, 55, 55 0.1);
-  border-radius: 5px;
-}
-.panel {
-  position: relative;
-  display: block;
-  border-radius: 5px;
-  width: 200px;
-  margin-top: 5px;
-  background: #f55;
-  height: 120px;
-  text-align: center;
-  line-height: 120px;
-}
-.flicking-viewport .panel0 {
-  background: #f47071;
-}
-.flicking-viewport .panel1 {
-  background: #f69462;
-}
-.flicking-viewport .panel2 {
-  background: #ede484;
-}
-.flicking-viewport .panel3 {
-  background: #90f290;
-}
-.flicking-viewport .panel4 {
-  background: #78caff;
-}
-.flicking-viewport .infinite0 {
-  background: #f47071;
-}
-.flicking-viewport .infinite1 {
-  background: #f69462;
-}
-.flicking-viewport .infinite2 {
-  background: #ede484;
-}
-.flicking-viewport .infinite3 {
-  background: #90f290;
-}
-.flicking-viewport .infinite4 {
-  background: #78caff;
-}

package/dev/archive/css/gap.css

@@ -1,13 +0,0 @@
-#gap .flicking1 .panel:before {
-  position: absolute;
-  width: 20px;
-  content: "2 0 p x";
-  word-break: break-all;
-  font-weight: bold;
-  color: #333;
-  left: 200px;
-  top: 50%;
-  transform: translateY(-50%);
-  line-height: 1.2;
-  text-align: center;
-}

package/dev/archive/css/highlight.css

@@ -1,96 +0,0 @@
-/*
-
-Atom One Dark by Daniel Gamage
-Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
-
-base:    #282c34
-mono-1:  #abb2bf
-mono-2:  #818896
-mono-3:  #5c6370
-hue-1:   #56b6c2
-hue-2:   #61aeee
-hue-3:   #c678dd
-hue-4:   #98c379
-hue-5:   #e06c75
-hue-5-2: #be5046
-hue-6:   #d19a66
-hue-6-2: #e6c07b
-
-*/
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  color: #abb2bf;
-  background: #282c34;
-}
-
-.hljs-comment,
-.hljs-quote {
-  color: #5c6370;
-  font-style: italic;
-}
-
-.hljs-doctag,
-.hljs-keyword,
-.hljs-formula {
-  color: #c678dd;
-}
-
-.hljs-section,
-.hljs-name,
-.hljs-selector-tag,
-.hljs-deletion,
-.hljs-subst {
-  color: #e06c75;
-}
-
-.hljs-literal {
-  color: #56b6c2;
-}
-
-.hljs-string,
-.hljs-regexp,
-.hljs-addition,
-.hljs-attribute,
-.hljs-meta-string {
-  color: #98c379;
-}
-
-.hljs-built_in,
-.hljs-class .hljs-title {
-  color: #e6c07b;
-}
-
-.hljs-attr,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-type,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo,
-.hljs-number {
-  color: #d19a66;
-}
-
-.hljs-symbol,
-.hljs-bullet,
-.hljs-link,
-.hljs-meta,
-.hljs-selector-id,
-.hljs-title {
-  color: #61aeee;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
-}
-
-.hljs-link {
-  text-decoration: underline;
-}

package/dev/archive/css/infinite.css

@@ -1,35 +0,0 @@
-#infinite .buttons {
-  padding: 10px 0px;
-  text-align: center;
-}
-#infinite .buttons button {
-  padding: 10px 15px;
-  background: #eee;
-  border: 0;
-  margin: 0px 2px;
-}
-#infinite .buttons button:hover {
-  background: #ccc;
-}
-#infinite .panel,
-#infinite .infinite {
-  font-weight: bold;
-}
-#infinite .flicking2 .infinite {
-  transition: background ease 1s;
-}
-#infinite .flicking .infinite.placeholder {
-  background: #ddd;
-  color: transparent;
-}
-
-#infinite .infinite {
-  position: relative;
-  display: block;
-  border-radius: 5px;
-  width: 200px;
-  margin-top: 5px;
-  height: 120px;
-  text-align: center;
-  line-height: 120px;
-}

package/dev/archive/css/parallax.css

@@ -1,3 +0,0 @@
-#parallax .flicking-viewport .panel {
-  width: 500px;
-}

package/dev/archive/css/plugins.css

@@ -1,46 +0,0 @@
-.plugins h1 {
-  line-height: 1;
-}
-.plugins h1 a {
-  font-size: 20px;
-  vertical-align: bottom;
-  margin-left: 10px;
-  /* color: #55e; */
-}
-.plugins .flicking-viewport {
-  width: 500px;
-  height: 200px;
-  margin: 0px auto;
-  background: #eee;
-  background: rgba(55, 55, 55 0.1);
-  border-radius: 5px;
-}
-.plugins .flicking-viewport .panel {
-  position: relative;
-  display: block;
-  border-radius: 5px;
-  width: 400px;
-  margin-top: 5px;
-  background: #f55;
-  height: 200px;
-  text-align: center;
-  line-height: 200px;
-  overflow: hidden;
-}
-.plugins .panel:after {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.1);
-}
-.plugins .panel img {
-  top: -100%;
-  bottom: -100%;
-  margin: auto;
-  position: absolute;
-  left: 50%;
-  transform: translate(-50%);
-}

package/dev/archive/css/progress.css

@@ -1,16 +0,0 @@
-#progress .progress {
-  position: relative;
-  width: 400px;
-  height: 10px;
-  border-radius: 5px;
-  background: #eee;
-  margin: 10px auto;
-  overflow: hidden;
-}
-#progress .thumb {
-  position: relative;
-  height: 100%;
-  width: 0;
-  border-radius: inherit;
-  background: #ccc;
-}

package/dev/archive/css/variable-size.css

@@ -1,15 +0,0 @@
-#variable-size .flicking-viewport .panel0 {
-  width: 100px;
-}
-#variable-size .flicking-viewport .panel1 {
-  width: 200px;
-}
-#variable-size .flicking-viewport .panel2 {
-  width: 80px;
-}
-#variable-size .flicking-viewport .panel3 {
-  width: 250px;
-}
-#variable-size .flicking-viewport .panel4 {
-  width: 150px;
-}

package/dev/archive/features/Align.tsx

@@ -1,149 +0,0 @@
-import Flicking from "@dev/react-flicking";
-import * as React from "react";
-import { insertCode } from "../utils";
-import "../css/align.css";
-
-export default class Align extends React.Component<{}> {
-  public render() {
-    return (
-      <div id="align" className="container">
-        <h1>Flexible Align</h1>
-        <ul className="extra">
-          <li>Use Hanger and Anchor to provide customizable alignment.</li>
-          <li>The Hanger and Anchor have magnetically bonded effect which allows the panel position to be aligned</li>
-          <li>
-            <strong>Hanger:</strong> An alignment point within Flicking area. It hangs panel anchors to its position.
-          </li>
-          <li>
-            <strong>Anchor:</strong> Alignment points based on each panels. Panel's anchor position is determined by
-            this value. <br /> It will be used for a reference point where panel should stop when selected, interacting
-            with hanger position.
-          </li>
-        </ul>
-        <h2>Center Align (Default)</h2>
-        <h3>hanger: 50%, anchor: 50%</h3>
-        <div className="hanger hanger0"></div>
-        <Flicking className="flicking flicking0">
-          <div className="panel panel0">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel1">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel2">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel3">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel4">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel0">
-            <div className="anchor"></div>
-          </div>
-        </Flicking>
-        <pre>
-          <code className="hljs html" data-script="flicking0"></code>
-        </pre>
-
-        <h2>Left Align</h2>
-        <h2>hanger: 0, anchor: 0</h2>
-        <div className="hanger hanger1"></div>
-        <Flicking className="flicking flicking1" align="prev">
-          <div className="panel panel0">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel1">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel2">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel3">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel4">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel0">
-            <div className="anchor"></div>
-          </div>
-        </Flicking>
-        <div className="pagination pagination1"></div>
-        <pre>
-          <code className="hljs html" data-script="flicking1"></code>
-        </pre>
-
-        <h2>Custom Align</h2>
-        <h3>hanger: 30%, anchor: 50px</h3>
-        <div className="hanger hanger2"></div>
-        <Flicking className="flicking flicking2" align={{ camera: "30%", panel: "50px" }}>
-          <div className="panel panel0">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel1">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel2">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel3">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel4">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel0">
-            <div className="anchor"></div>
-          </div>
-        </Flicking>
-        <div className="pagination pagination2"></div>
-        <pre>
-          <code className="hljs html" data-script="flicking2"></code>
-        </pre>
-      </div>
-    );
-  }
-  public componentDidMount() {
-    insertCode(
-      "align",
-      0,
-      `
-  <Flicking className="flicking flicking0">
-    <div className="panel"><div className="anchor"></div></div>
-    <div className="panel"><div className="anchor"></div></div>
-    <div className="panel"><div className="anchor"></div></div>
-    <div className="panel"><div className="anchor"></div></div>
-    <div className="panel"><div className="anchor"></div></div>
-    <div className="panel"><div className="anchor"></div></div>
-  </Flicking>`
-    );
-    insertCode(
-      "align",
-      1,
-      `
-  <Flicking className="flicking flicking1" hanger={"0"} anchor={"0"}>
-    <div className="panel"><div className="anchor"></div></div>
-    <div className="panel"><div className="anchor"></div></div>
-    <div className="panel"><div className="anchor"></div></div>
-    <div className="panel"><div className="anchor"></div></div>
-    <div className="panel"><div className="anchor"></div></div>
-    <div className="panel"><div className="anchor"></div></div>
-  </Flicking>`
-    );
-    insertCode(
-      "align",
-      2,
-      `
-  <Flicking className="flicking flicking2" hanger={"30%"} anchor={"50px"}>
-    <div className="panel"><div className="anchor"></div></div>
-    <div className="panel"><div className="anchor"></div></div>
-    <div className="panel"><div className="anchor"></div></div>
-    <div className="panel"><div className="anchor"></div></div>
-    <div className="panel"><div className="anchor"></div></div>
-    <div className="panel"><div className="anchor"></div></div>
-  </Flicking>`
-    );
-  }
-}

package/dev/archive/features/Bound.tsx

@@ -1,83 +0,0 @@
-import Flicking from "@dev/react-flicking";
-import * as React from "react";
-import { insertCode } from "../utils";
-import "../css/bound.css";
-
-export default class Bound extends React.Component<{}> {
-  public render() {
-    return (
-      <div id="bound" className="container">
-        <h1>
-          Bound <img src="https://naver.github.io/egjs-flicking/images/bound-dog.png" alt="img" width="40px" />
-        </h1>
-        <ul className="extra">
-          <li>Bound the panels so that they are not out of the flicking area.</li>
-          <li>This prevents unwanted free space within the flicking area.</li>
-        </ul>
-        <h2>bound: false</h2>
-        <div className="hanger hanger0"></div>
-        <Flicking className="flicking flicking0" gap={10}>
-          <div className="panel panel0">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel1">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel2">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel3">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel4">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel0">
-            <div className="anchor"></div>
-          </div>
-        </Flicking>
-        <h2>bound: true</h2>
-        <div className="hanger hanger0"></div>
-        <Flicking className="flicking flicking1" gap={10} bound={true}>
-          <div className="panel panel0">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel1">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel2">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel3">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel4">
-            <div className="anchor"></div>
-          </div>
-          <div className="panel panel0">
-            <div className="anchor"></div>
-          </div>
-        </Flicking>
-        <div className="pagination pagination2"></div>
-        <pre>
-          <code className="hljs html" data-script="flicking1"></code>
-        </pre>
-      </div>
-    );
-  }
-  public componentDidMount() {
-    insertCode(
-      "bound",
-      1,
-      `
-  <Flicking className="flicking flicking1" bound={true}>
-    <div className="panel"><div className="anchor"></div></div>
-    <div className="panel"><div className="anchor"></div></div>
-    <div className="panel"><div className="anchor"></div></div>
-    <div className="panel"><div className="anchor"></div></div>
-    <div className="panel"><div className="anchor"></div></div>
-    <div className="panel"><div className="anchor"></div></div>
-  </Flicking>`
-    );
-  }
-}

package/dev/archive/features/CrossFlicking.tsx

@@ -1,74 +0,0 @@
-import { CrossFlicking } from "@dev/react-flicking";
-import * as React from "react";
-import "../css/cross.css";
-
-export default class Cross extends React.Component<{}> {
-  public render() {
-    return (
-      <div id="cross" className="container">
-        <CrossFlicking className="flicking" preventDefaultOnDrag={true}>
-          <div data-cross-groupkey="0" className="panel">
-            <img src="https://naver.github.io/egjs-infinitegrid/assets/image/11.jpg" />
-            방송 1A
-          </div>
-          <div data-cross-groupkey="0" className="panel">
-            <img src="https://naver.github.io/egjs-infinitegrid/assets/image/12.jpg" />
-            방송 1B
-          </div>
-          <div data-cross-groupkey="0" className="panel">
-            <img src="https://naver.github.io/egjs-infinitegrid/assets/image/13.jpg" />
-            방송 1C
-          </div>
-          <div data-cross-groupkey="0" className="panel">
-            <img src="https://naver.github.io/egjs-infinitegrid/assets/image/14.jpg" />
-            방송 1D
-          </div>
-          <div data-cross-groupkey="0" className="panel">
-            <img src="https://naver.github.io/egjs-infinitegrid/assets/image/15.jpg" />
-            방송 1E
-          </div>
-          <div data-cross-groupkey="1" className="panel">
-            <img src="https://naver.github.io/egjs-infinitegrid/assets/image/16.jpg" />
-            축구 2A
-          </div>
-          <div data-cross-groupkey="1" className="panel">
-            <img src="https://naver.github.io/egjs-infinitegrid/assets/image/17.jpg" />
-            축구 2B
-          </div>
-          <div data-cross-groupkey="1" className="panel">
-            <img src="https://naver.github.io/egjs-infinitegrid/assets/image/18.jpg" />
-            축구 2C
-          </div>
-          <div data-cross-groupkey="1" className="panel">
-            <img src="https://naver.github.io/egjs-infinitegrid/assets/image/19.jpg" />
-            축구 2D
-          </div>
-          <div data-cross-groupkey="1" className="panel">
-            <img src="https://naver.github.io/egjs-infinitegrid/assets/image/39.jpg" />
-            축구 2E
-          </div>
-          <div data-cross-groupkey="2" className="panel">
-            <img src="https://naver.github.io/egjs-infinitegrid/assets/image/21.jpg" />
-            패션 3A
-          </div>
-          <div data-cross-groupkey="2" className="panel">
-            <img src="https://naver.github.io/egjs-infinitegrid/assets/image/22.jpg" />
-            패션 3B
-          </div>
-          <div data-cross-groupkey="2" className="panel">
-            <img src="https://naver.github.io/egjs-infinitegrid/assets/image/38.jpg" />
-            패션 3C
-          </div>
-          <div data-cross-groupkey="2" className="panel">
-            <img src="https://naver.github.io/egjs-infinitegrid/assets/image/24.jpg" />
-            패션 3D
-          </div>
-          <div data-cross-groupkey="2" className="panel">
-            <img src="https://naver.github.io/egjs-infinitegrid/assets/image/25.jpg" />
-            패션 3E
-          </div>
-        </CrossFlicking>
-      </div>
-    );
-  }
-}

package/dev/archive/features/FreeScroll.tsx

@@ -1,66 +0,0 @@
-import Flicking from "@dev/react-flicking";
-import * as React from "react";
-import { insertCode } from "../utils";
-
-export default class FreeScroll extends React.Component<{}> {
-  public render() {
-    return (
-      <div id="free-scroll" className="container">
-        <h1>Free Scroll</h1>
-        <ul className="extra">
-          <li>The panels are freely scrollable.</li>
-        </ul>
-        <h2>moveType: "freeScroll", deceleration: 0.0075(default)</h2>
-        <Flicking className="flicking flicking0" gap={10} circular={true} moveType="freeScroll" renderOnlyVisible>
-          <div className="panel panel0"></div>
-          <div className="panel panel1"></div>
-          <div className="panel panel2"></div>
-          <div className="panel panel3"></div>
-          <div className="panel panel4"></div>
-        </Flicking>
-        <pre>
-          <code className="hljs html" data-script="flicking0"></code>
-        </pre>
-        <h2>moveType: "freeScroll", deceleration: 0.015</h2>
-        <Flicking className="flicking flicking1" gap={10} circular={true} deceleration={0.015} moveType="freeScroll">
-          <div className="panel panel0"></div>
-          <div className="panel panel1"></div>
-          <div className="panel panel2"></div>
-          <div className="panel panel3"></div>
-          <div className="panel panel4"></div>
-        </Flicking>
-        <pre>
-          <code className="hljs html" data-script="flicking1"></code>
-        </pre>
-      </div>
-    );
-  }
-  public componentDidMount() {
-    insertCode(
-      "free-scroll",
-      0,
-      `
-  <Flicking className="flicking flicking0" gap={10} circular={true} moveType="freeScroll">
-    <div className="panel"></div>
-    <div className="panel"></div>
-    <div className="panel"></div>
-    <div className="panel"></div>
-    <div className="panel"></div>
-  </Flicking>`
-    );
-    insertCode(
-      "free-scroll",
-      1,
-      `
-<Flicking
-  className="flicking flicking1" gap={10}
-  circular={true} deceleration={0.015} moveType="freeScroll">
-  <div className="panel"></div>
-  <div className="panel"></div>
-  <div className="panel"></div>
-  <div className="panel"></div>
-  <div className="panel"></div>
-</Flicking>`
-    );
-  }
-}