Skip to content

Instantly share code, notes, and snippets.

😀
HAHAHAHAHAHA

Daybrush (Younkue Choi) daybrush

😀
HAHAHAHAHAHA
Block or report user

Report or block daybrush

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@daybrush
daybrush / index.html
Created Aug 7, 2019
Moveable Vanilla Demo
View index.html
<div class="label"></div>
<div class="page main">
<div class="container">
<div class="moveable"><span>Moveable</span></div>
<div class="buttons able">
<a href="#" data-able="scalable" [class]="scalable ? 'selected' : ''" (click)="clickScalable()" >Scalable</a>
<a href="#" data-able="resizable" [class]="resizable ? 'selected' : ''" (click)="clickResizable()">Resizable</a>
<a href="#" data-able="warpable" [class]="warpable ? 'selected' : ''" (click)="clickWarpable()">Warpable</a>
</div>
<p align="middle">Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable</p>
View flicking.tsx
import ChildrenDiffer, { ChildrenDiffResult } from "@egjs/react-children-differ";
class Flicking {
public render() {
return (
<ChildrenDiffer onUpdate={this.onUpdate}>
{this.renderPanels()}
</ChildrenDiffer>
);
}
View sync.js
function sync(result) {
const { maintained, removed, added, list } = result;
const prevItems = this.items;
const newItems = [];
maintained.forEach(([beforeIndex, afterIndex]) => {
newItems[afterIndex] = prevItems[beforeIndex];
});
added.forEach(i => {
newItems[i] = new Item(list[i]);
View a.md

React Moveable

npm version

A React Component that create Moveable, Draggable, Resizable, Rotatable.

@daybrush
daybrush / listdiffer.js
Created Jul 8, 2019
ordered, pureChanged
View listdiffer.js
import ListDiffer from "@egjs/list-differ";
const listDiffer = new ListDiffer([1, 2, 3, 4, 5, 6, 7], v => v);
const result = listDiffer.update([4, 3, 8, 2, 1, 7]);
// [[3, 0], [3, 1], [3, 2]]
console.log(result.ordered);
// [[3, 0], [2, 1], [1, 3]]
console.log(result.pureChanged);
@daybrush
daybrush / listdiffer.js
Created Jul 8, 2019
added, removed, changed, maintained
View listdiffer.js
import ListDiffer from "@egjs/list-differ";
const listDiffer = new ListDiffer([1, 2, 3, 4, 5, 6, 7], v => v);
const result = listDiffer.update([4, 3, 8, 2, 1, 7]);
// [2]
console.log(result.added);
// [5, 4]
console.log(result.removed);
// [[3, 0], [2, 1], [1, 3], [0, 4], [6, 5]]
@daybrush
daybrush / childrendiffer.js
Last active Jul 8, 2019
ListDiffer, ChildrenDiffer
View childrendiffer.js
import ListDiffer from "@egjs/list-differ";
import ChildrenDiffer from "@egjs/children-differ";
// Indicates the callback function that finds the key for that data.
// And only numbers or strings are allowed.
const listDiffer = new ListDiffer([], v => v);
const childrenDiffer = new childrenDiffer(document.body.children);
document.body.appendChild(document.createElement("div"));
View invert.js
export function invert3x2(a: number[]) {
// 00 01 02
// 10 11 12
// 20 21 22
const [
a00,
a10,
a01,
a11,
a02,
View flicking.js
function sync(result) {
const { maintained, removed, added, list } = result;
const prevItems = this.items;
const newItems = [];
maintained.forEach(([beforeIdx, afterIdx]) => {
newItems[afterIndex] = prevItems[beforeIdx];
});
added.forEach(i => {
newItems[i] = new Item(list[i]);
View hi.js
const { removed, added, ordered, pureChanged, list } = result;
removed.forEach(index => {
inst.remove(index);
});
ordered.forEach(([from, to], i) => {
inst.remove(from);
inst.insert(to, list[pureChanged[i][1]]);
});
added.forEach(index => {
You can’t perform that action at this time.