diff --git a/.gitignore b/.gitignore index b5b0bba..c111527 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ -node_modules .idea/ package-lock.json .DS_Store +node_modules +.lh diff --git a/.lh/.lhignore b/.lh/.lhignore deleted file mode 100644 index 0145f59..0000000 --- a/.lh/.lhignore +++ /dev/null @@ -1,6 +0,0 @@ -# list file to not track by the local-history extension. comment line starts with a '#' character -# each line describe a regular expression pattern (search for "Javascript regex") -# it will relate to the workspace directory root. for example: -# ".*\.txt" ignores any file with "txt" extension -# "/test/.*" ignores all the files under the "test" directory -# ".*/test/.*" ignores all the files under any "test" directory (even under sub-folders) diff --git a/.lh/examples/index.html.json b/.lh/examples/index.html.json deleted file mode 100644 index aee08b1..0000000 --- a/.lh/examples/index.html.json +++ /dev/null @@ -1,106 +0,0 @@ -{ - "sourceFile": "examples/index.html", - "activeCommit": 0, - "commits": [ - { - "activePatchIndex": 22, - "patches": [ - { - "date": 1643106920462, - "content": "Index: \n===================================================================\n--- \n+++ \n" - }, - { - "date": 1643107038245, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -31,9 +31,9 @@\n \n \n asdf\n
\n- \n+ \n \n \n" - }, - { - "date": 1643108749001, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - }, - { - "date": 1643108766814, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - }, - { - "date": 1643108929545, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - }, - { - "date": 1643108944710, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - }, - { - "date": 1643108949911, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - }, - { - "date": 1643108991813, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - }, - { - "date": 1643109000154, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - }, - { - "date": 1643109011069, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - }, - { - "date": 1643109019896, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - }, - { - "date": 1643109120384, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - }, - { - "date": 1643120724482, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - }, - { - "date": 1643120752675, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - }, - { - "date": 1643120802544, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - }, - { - "date": 1643120808220, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - }, - { - "date": 1643120815919, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - }, - { - "date": 1643120822410, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - }, - { - "date": 1643120829430, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - }, - { - "date": 1643120835110, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - }, - { - "date": 1643120844081, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - }, - { - "date": 1643120849539, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - }, - { - "date": 1643126128412, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -33,9 +33,9 @@\n asdf\n
\n \n \n \n \n \n" - } - ], - "date": 1643106920462, - "name": "Commit-0", - "content": "\n\n\n\n \n bounty\n \n \n \n \n \n\n\n\n asdf\n
\n \n \n\n\n\n" - } - ] -} \ No newline at end of file diff --git a/.lh/package.json.json b/.lh/package.json.json deleted file mode 100644 index 9f39ef0..0000000 --- a/.lh/package.json.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "sourceFile": "package.json", - "activeCommit": 0, - "commits": [ - { - "activePatchIndex": 1, - "patches": [ - { - "date": 1643121810362, - "content": "Index: \n===================================================================\n--- \n+++ \n" - }, - { - "date": 1643121891278, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -5,9 +5,10 @@\n \"main\": \"lib/bounty.js\",\n \"scripts\": {\n \"start\": \"webpack serve --progress --colors --inline --host 0.0.0.0\",\n \"build\": \"webpack -p\",\n- \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n+ \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n+ \"start:dev\": \"webpack serve\"\n },\n \"files\": [\n \"lib/*.js\"\n ],\n" - } - ], - "date": 1643121810362, - "name": "Commit-0", - "content": "{\n \"name\": \"bounty\",\n \"version\": \"1.3.0\",\n \"description\": \"SVG library for transitioning numbers with motion blur\",\n \"main\": \"lib/bounty.js\",\n \"scripts\": {\n \"start\": \"webpack serve --progress --colors --inline --host 0.0.0.0\",\n \"build\": \"webpack -p\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"files\": [\n \"lib/*.js\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/coderitual/bounty.git\"\n },\n \"keywords\": [\n \"svg\",\n \"odometer\",\n \"effect\",\n \"animation\",\n \"ui\",\n \"library\",\n \"webcomponents\"\n ],\n \"author\": \"Michal Skowronek \",\n \"license\": \"MIT\",\n \"devDependencies\": {\n \"babel-core\": \"^6.13.2\",\n \"babel-loader\": \"^6.2.4\",\n \"babel-preset-es2015\": \"^6.13.2\",\n \"babel-preset-stage-0\": \"^6.5.0\",\n \"eslint\": \"^4.18.2\",\n \"eslint-config-airbnb\": \"^10.0.0\",\n \"eslint-plugin-import\": \"^1.12.0\",\n \"eslint-plugin-jsx-a11y\": \"^2.0.1\",\n \"eslint-plugin-react\": \"^6.0.0\",\n \"webpack\": \"^1.13.1\",\n \"webpack-dev-server\": \"^3.1.11\"\n },\n \"dependencies\": {\n \"webpack-cli\": \"^4.9.2\"\n }\n}\n" - } - ] -} \ No newline at end of file diff --git a/.lh/src/bounty.js.json b/.lh/src/bounty.js.json deleted file mode 100644 index 487c3b7..0000000 --- a/.lh/src/bounty.js.json +++ /dev/null @@ -1,442 +0,0 @@ -{ - "sourceFile": "src/bounty.js", - "activeCommit": 0, - "commits": [ - { - "activePatchIndex": 106, - "patches": [ - { - "date": 1643107097002, - "content": "Index: \n===================================================================\n--- \n+++ \n" - }, - { - "date": 1643107581667, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -140,9 +140,9 @@\n id: id,\n node: createDigitRoulette(svg, fontSize, lineHeight, id),\n filter: createFilter(defs, id),\n value: Number(char),\n- initial: Number(initial[i]),\n+ initial: ''Number(initial[i])'',\n offset: {\n x: 0,\n y: offset + Number(initial[i]) * (fontSize * lineHeight),\n },\n@@ -162,9 +162,9 @@\n duration: duration,\n delay: (digits.length - 1 - i) * letterAnimationDelay + animationDelay,\n step(value) {\n digit.offset.y =\n- offset - (value % (fontSize * lineHeight * DIGITS_COUNT));\n+ offset + (value % (fontSize * lineHeight * DIGITS_COUNT));\n digit.node::attr(\n \"transform\",\n `translate(${digit.offset.x}, ${digit.offset.y})`\n );\n" - }, - { - "date": 1643107614546, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -140,9 +140,9 @@\n id: id,\n node: createDigitRoulette(svg, fontSize, lineHeight, id),\n filter: createFilter(defs, id),\n value: Number(char),\n- initial: ''Number(initial[i])'',\n+ initial: '',\n offset: {\n x: 0,\n y: offset + Number(initial[i]) * (fontSize * lineHeight),\n },\n" - }, - { - "date": 1643107838620, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -140,9 +140,9 @@\n id: id,\n node: createDigitRoulette(svg, fontSize, lineHeight, id),\n filter: createFilter(defs, id),\n value: Number(char),\n- initial: '',\n+ initial: Number(initial[i]),\n offset: {\n x: 0,\n y: offset + Number(initial[i]) * (fontSize * lineHeight),\n },\n" - }, - { - "date": 1643108239004, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -2,9 +2,9 @@\n import { select, append, attr, style, text } from \"./selection\";\n import transition from \"./transition\";\n \n const DIGITS_COUNT = 10;\n-const ROTATIONS = 3;\n+const ROTATIONS = 1;\n \n const createDigitRoulette = (svg, fontSize, lineHeight, id) => {\n const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n const roulette = svg\n" - }, - { - "date": 1643108271751, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,9 +1,9 @@\n import loop from \"./loop\";\n import { select, append, attr, style, text } from \"./selection\";\n import transition from \"./transition\";\n \n-const DIGITS_COUNT = 10;\n+const DIGITS_COUNT = 9;\n const ROTATIONS = 1;\n \n const createDigitRoulette = (svg, fontSize, lineHeight, id) => {\n const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n" - }, - { - "date": 1643108279762, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,9 +1,9 @@\n import loop from \"./loop\";\n import { select, append, attr, style, text } from \"./selection\";\n import transition from \"./transition\";\n \n-const DIGITS_COUNT = 9;\n+const DIGITS_COUNT = 1;\n const ROTATIONS = 1;\n \n const createDigitRoulette = (svg, fontSize, lineHeight, id) => {\n const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n" - }, - { - "date": 1643108306851, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,9 +1,9 @@\n import loop from \"./loop\";\n import { select, append, attr, style, text } from \"./selection\";\n import transition from \"./transition\";\n \n-const DIGITS_COUNT = 1;\n+const DIGITS_COUNT = 10;\n const ROTATIONS = 1;\n \n const createDigitRoulette = (svg, fontSize, lineHeight, id) => {\n const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n" - }, - { - "date": 1643108578798, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -2,9 +2,9 @@\n import { select, append, attr, style, text } from \"./selection\";\n import transition from \"./transition\";\n \n const DIGITS_COUNT = 10;\n-const ROTATIONS = 1;\n+const ROTATIONS = 5;\n \n const createDigitRoulette = (svg, fontSize, lineHeight, id) => {\n const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n const roulette = svg\n" - }, - { - "date": 1643108621098, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -5,9 +5,9 @@\n const DIGITS_COUNT = 10;\n const ROTATIONS = 5;\n \n const createDigitRoulette = (svg, fontSize, lineHeight, id) => {\n- const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n+ const digits = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n const roulette = svg\n ::append(\"g\")\n ::attr(\"id\", `digit-${id}`)\n ::style(\"filter\", `url(#motionFilter-${id})`);\n" - }, - { - "date": 1643108635998, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -5,9 +5,9 @@\n const DIGITS_COUNT = 10;\n const ROTATIONS = 5;\n \n const createDigitRoulette = (svg, fontSize, lineHeight, id) => {\n- const digits = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n+ const digits = ['' ,1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n const roulette = svg\n ::append(\"g\")\n ::attr(\"id\", `digit-${id}`)\n ::style(\"filter\", `url(#motionFilter-${id})`);\n" - }, - { - "date": 1643108663695, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -5,9 +5,9 @@\n const DIGITS_COUNT = 10;\n const ROTATIONS = 5;\n \n const createDigitRoulette = (svg, fontSize, lineHeight, id) => {\n- const digits = ['' ,1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n+ const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];\n const roulette = svg\n ::append(\"g\")\n ::attr(\"id\", `digit-${id}`)\n ::style(\"filter\", `url(#motionFilter-${id})`);\n" - }, - { - "date": 1643108702302, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -5,9 +5,9 @@\n const DIGITS_COUNT = 10;\n const ROTATIONS = 5;\n \n const createDigitRoulette = (svg, fontSize, lineHeight, id) => {\n- const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];\n+ const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n const roulette = svg\n ::append(\"g\")\n ::attr(\"id\", `digit-${id}`)\n ::style(\"filter\", `url(#motionFilter-${id})`);\n" - }, - { - "date": 1643108779930, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -2,9 +2,9 @@\n import { select, append, attr, style, text } from \"./selection\";\n import transition from \"./transition\";\n \n const DIGITS_COUNT = 10;\n-const ROTATIONS = 5;\n+const ROTATIONS = 50;\n \n const createDigitRoulette = (svg, fontSize, lineHeight, id) => {\n const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n const roulette = svg\n" - }, - { - "date": 1643108795199, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -2,9 +2,9 @@\n import { select, append, attr, style, text } from \"./selection\";\n import transition from \"./transition\";\n \n const DIGITS_COUNT = 10;\n-const ROTATIONS = 50;\n+const ROTATIONS = 1;\n \n const createDigitRoulette = (svg, fontSize, lineHeight, id) => {\n const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n const roulette = svg\n" - }, - { - "date": 1643108911761, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -90,8 +90,9 @@\n letterSpacing = 1,\n animationDelay = 100,\n letterAnimationDelay = 100,\n duration = 3000,\n+ rotations = 3,\n }) => {\n const element = select(el);\n const computedStyle = window.getComputedStyle(element);\n const fontSize = parseInt(computedStyle.fontSize, 10);\n@@ -154,9 +155,9 @@\n const digits = chars.filter((char) => char.isDigit);\n digits.forEach((digit, i) => {\n const sourceDistance = digit.initial * (fontSize * lineHeight);\n const targetDistance =\n- (ROTATIONS * DIGITS_COUNT + digit.value) * (fontSize * lineHeight);\n+ (rotations * DIGITS_COUNT + digit.value) * (fontSize * lineHeight);\n const digitTransition = transition({\n from: sourceDistance,\n to: targetDistance,\n duration: duration,\n" - }, - { - "date": 1643108969820, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -143,9 +143,9 @@\n filter: createFilter(defs, id),\n value: Number(char),\n initial: Number(initial[i]),\n offset: {\n- x: 0,\n+ x: 10,\n y: offset + Number(initial[i]) * (fontSize * lineHeight),\n },\n };\n }\n" - }, - { - "date": 1643108975883, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -143,9 +143,9 @@\n filter: createFilter(defs, id),\n value: Number(char),\n initial: Number(initial[i]),\n offset: {\n- x: 10,\n+ x: 0,\n y: offset + Number(initial[i]) * (fontSize * lineHeight),\n },\n };\n }\n" - }, - { - "date": 1643109076028, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -162,8 +162,9 @@\n to: targetDistance,\n duration: duration,\n delay: (digits.length - 1 - i) * letterAnimationDelay + animationDelay,\n step(value) {\n+ console.log('offset:', offset)\n digit.offset.y =\n offset + (value % (fontSize * lineHeight * DIGITS_COUNT));\n digit.node::attr(\n \"transform\",\n" - }, - { - "date": 1643109192608, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -143,9 +143,9 @@\n filter: createFilter(defs, id),\n value: Number(char),\n initial: Number(initial[i]),\n offset: {\n- x: 0,\n+ x: 100,\n y: offset + Number(initial[i]) * (fontSize * lineHeight),\n },\n };\n }\n" - }, - { - "date": 1643109210238, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -143,9 +143,9 @@\n filter: createFilter(defs, id),\n value: Number(char),\n initial: Number(initial[i]),\n offset: {\n- x: 100,\n+ x: 1000,\n y: offset + Number(initial[i]) * (fontSize * lineHeight),\n },\n };\n }\n" - }, - { - "date": 1643109229683, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -132,9 +132,9 @@\n return {\n isDigit: false,\n node: createCharacter(svg, char, fontSize),\n value: char,\n- offset: { x: 0, y: offset },\n+ offset: { x: 1000, y: offset },\n };\n } else {\n return {\n isDigit: true,\n" - }, - { - "date": 1643109253636, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -132,9 +132,9 @@\n return {\n isDigit: false,\n node: createCharacter(svg, char, fontSize),\n value: char,\n- offset: { x: 1000, y: offset },\n+ offset: { x: 0, y: offset },\n };\n } else {\n return {\n isDigit: true,\n@@ -143,9 +143,9 @@\n filter: createFilter(defs, id),\n value: Number(char),\n initial: Number(initial[i]),\n offset: {\n- x: 1000,\n+ x: 0,\n y: offset + Number(initial[i]) * (fontSize * lineHeight),\n },\n };\n }\n" - }, - { - "date": 1643109404721, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -164,9 +164,9 @@\n delay: (digits.length - 1 - i) * letterAnimationDelay + animationDelay,\n step(value) {\n console.log('offset:', offset)\n digit.offset.y =\n- offset + (value % (fontSize * lineHeight * DIGITS_COUNT));\n+ offset + 1000 + (value % (fontSize * lineHeight * DIGITS_COUNT));\n digit.node::attr(\n \"transform\",\n `translate(${digit.offset.x}, ${digit.offset.y})`\n );\n" - }, - { - "date": 1643109420159, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -164,9 +164,9 @@\n delay: (digits.length - 1 - i) * letterAnimationDelay + animationDelay,\n step(value) {\n console.log('offset:', offset)\n digit.offset.y =\n- offset + 1000 + (value % (fontSize * lineHeight * DIGITS_COUNT));\n+ offset + (value % (fontSize * lineHeight * DIGITS_COUNT));\n digit.node::attr(\n \"transform\",\n `translate(${digit.offset.x}, ${digit.offset.y})`\n );\n" - }, - { - "date": 1643110009501, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -121,9 +121,9 @@\n }\n return values;\n };\n \n- const initialString = String(initialValue || \"0\");\n+ const initialString = String(initialValue || \"\");\n const values = prepareValues(String(value), initialString);\n const initial = prepareValues(initialString, String(value));\n \n const chars = values.map((char, i) => {\n" - }, - { - "date": 1643110026674, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -121,9 +121,9 @@\n }\n return values;\n };\n \n- const initialString = String(initialValue || \"\");\n+ const initialString = String(initialValue || \"0\");\n const values = prepareValues(String(value), initialString);\n const initial = prepareValues(initialString, String(value));\n \n const chars = values.map((char, i) => {\n" - }, - { - "date": 1643110038077, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -121,9 +121,9 @@\n }\n return values;\n };\n \n- const initialString = String(initialValue || \"0\");\n+ const initialString = String(initialValue || \" \");\n const values = prepareValues(String(value), initialString);\n const initial = prepareValues(initialString, String(value));\n \n const chars = values.map((char, i) => {\n" - }, - { - "date": 1643110063982, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -121,9 +121,9 @@\n }\n return values;\n };\n \n- const initialString = String(initialValue || \" \");\n+ const initialString = String(initialValue || \"\");\n const values = prepareValues(String(value), initialString);\n const initial = prepareValues(initialString, String(value));\n \n const chars = values.map((char, i) => {\n" - }, - { - "date": 1643110073172, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -121,9 +121,9 @@\n }\n return values;\n };\n \n- const initialString = String(initialValue || \"\");\n+ const initialString = String(\"\");\n const values = prepareValues(String(value), initialString);\n const initial = prepareValues(initialString, String(value));\n \n const chars = values.map((char, i) => {\n" - }, - { - "date": 1643110090038, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -121,9 +121,10 @@\n }\n return values;\n };\n \n- const initialString = String(\"\");\n+ const initialString = String(initialValue || \"0\");\n+ console.log('initialString:', initialString)\n const values = prepareValues(String(value), initialString);\n const initial = prepareValues(initialString, String(value));\n \n const chars = values.map((char, i) => {\n" - }, - { - "date": 1643110140277, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -124,9 +124,11 @@\n \n const initialString = String(initialValue || \"0\");\n console.log('initialString:', initialString)\n const values = prepareValues(String(value), initialString);\n+ console.log('values:', values)\n const initial = prepareValues(initialString, String(value));\n+ console.log('initial:', initial)\n \n const chars = values.map((char, i) => {\n const id = `${i}-${salt}`;\n if (isNaN(parseInt(char, 10)) || isNaN(parseInt(initial[i], 10))) {\n" - }, - { - "date": 1643110196738, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -125,9 +125,10 @@\n const initialString = String(initialValue || \"0\");\n console.log('initialString:', initialString)\n const values = prepareValues(String(value), initialString);\n console.log('values:', values)\n- const initial = prepareValues(initialString, String(value));\n+ let initial = prepareValues(initialString, String(value));\n+ initial = ['', '', '', '', '', '' ]\n console.log('initial:', initial)\n \n const chars = values.map((char, i) => {\n const id = `${i}-${salt}`;\n" - }, - { - "date": 1643110218873, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -126,9 +126,9 @@\n console.log('initialString:', initialString)\n const values = prepareValues(String(value), initialString);\n console.log('values:', values)\n let initial = prepareValues(initialString, String(value));\n- initial = ['', '', '', '', '', '' ]\n+ initial = ['.', '', '', '', '', '' ]\n console.log('initial:', initial)\n \n const chars = values.map((char, i) => {\n const id = `${i}-${salt}`;\n" - }, - { - "date": 1643110247865, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -125,10 +125,9 @@\n const initialString = String(initialValue || \"0\");\n console.log('initialString:', initialString)\n const values = prepareValues(String(value), initialString);\n console.log('values:', values)\n- let initial = prepareValues(initialString, String(value));\n- initial = ['.', '', '', '', '', '' ]\n+ const initial = prepareValues(initialString, String(value));\n console.log('initial:', initial)\n \n const chars = values.map((char, i) => {\n const id = `${i}-${salt}`;\n" - }, - { - "date": 1643110300429, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -5,9 +5,9 @@\n const DIGITS_COUNT = 10;\n const ROTATIONS = 1;\n \n const createDigitRoulette = (svg, fontSize, lineHeight, id) => {\n- const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n+ const digits = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n const roulette = svg\n ::append(\"g\")\n ::attr(\"id\", `digit-${id}`)\n ::style(\"filter\", `url(#motionFilter-${id})`);\n" - }, - { - "date": 1643110319810, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -5,9 +5,9 @@\n const DIGITS_COUNT = 10;\n const ROTATIONS = 1;\n \n const createDigitRoulette = (svg, fontSize, lineHeight, id) => {\n- const digits = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n+ const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];\n const roulette = svg\n ::append(\"g\")\n ::attr(\"id\", `digit-${id}`)\n ::style(\"filter\", `url(#motionFilter-${id})`);\n" - }, - { - "date": 1643110338041, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -5,9 +5,9 @@\n const DIGITS_COUNT = 10;\n const ROTATIONS = 1;\n \n const createDigitRoulette = (svg, fontSize, lineHeight, id) => {\n- const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];\n+ const digits = ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n const roulette = svg\n ::append(\"g\")\n ::attr(\"id\", `digit-${id}`)\n ::style(\"filter\", `url(#motionFilter-${id})`);\n" - }, - { - "date": 1643117440100, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -87,9 +87,9 @@\n value,\n initialValue = null,\n lineHeight = 1.35,\n letterSpacing = 1,\n- animationDelay = 100,\n+ animationDelay = 1000,\n letterAnimationDelay = 100,\n duration = 3000,\n rotations = 3,\n }) => {\n" - }, - { - "date": 1643117465662, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -87,9 +87,9 @@\n value,\n initialValue = null,\n lineHeight = 1.35,\n letterSpacing = 1,\n- animationDelay = 1000,\n+ animationDelay = 5000,\n letterAnimationDelay = 100,\n duration = 3000,\n rotations = 3,\n }) => {\n" - }, - { - "date": 1643117482918, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -87,9 +87,9 @@\n value,\n initialValue = null,\n lineHeight = 1.35,\n letterSpacing = 1,\n- animationDelay = 5000,\n+ animationDelay = 0,\n letterAnimationDelay = 100,\n duration = 3000,\n rotations = 3,\n }) => {\n" - }, - { - "date": 1643117514393, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -88,9 +88,9 @@\n initialValue = null,\n lineHeight = 1.35,\n letterSpacing = 1,\n animationDelay = 0,\n- letterAnimationDelay = 100,\n+ letterAnimationDelay = 300,\n duration = 3000,\n rotations = 3,\n }) => {\n const element = select(el);\n" - }, - { - "date": 1643117598639, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -156,8 +156,9 @@\n \n const transitions = [];\n const digits = chars.filter((char) => char.isDigit);\n digits.forEach((digit, i) => {\n+ console.log('i:', i)\n const sourceDistance = digit.initial * (fontSize * lineHeight);\n const targetDistance =\n (rotations * DIGITS_COUNT + digit.value) * (fontSize * lineHeight);\n const digitTransition = transition({\n" - }, - { - "date": 1643117637029, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -159,9 +159,9 @@\n digits.forEach((digit, i) => {\n console.log('i:', i)\n const sourceDistance = digit.initial * (fontSize * lineHeight);\n const targetDistance =\n- (rotations * DIGITS_COUNT + digit.value) * (fontSize * lineHeight);\n+ (rotations * i * DIGITS_COUNT + digit.value) * (fontSize * lineHeight);\n const digitTransition = transition({\n from: sourceDistance,\n to: targetDistance,\n duration: duration,\n" - }, - { - "date": 1643117657445, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -90,9 +90,9 @@\n letterSpacing = 1,\n animationDelay = 0,\n letterAnimationDelay = 300,\n duration = 3000,\n- rotations = 3,\n+ rotations = 1,\n }) => {\n const element = select(el);\n const computedStyle = window.getComputedStyle(element);\n const fontSize = parseInt(computedStyle.fontSize, 10);\n" - }, - { - "date": 1643117692444, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -5,9 +5,9 @@\n const DIGITS_COUNT = 10;\n const ROTATIONS = 1;\n \n const createDigitRoulette = (svg, fontSize, lineHeight, id) => {\n- const digits = ['', 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n+ const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n const roulette = svg\n ::append(\"g\")\n ::attr(\"id\", `digit-${id}`)\n ::style(\"filter\", `url(#motionFilter-${id})`);\n" - }, - { - "date": 1643117714021, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -88,9 +88,9 @@\n initialValue = null,\n lineHeight = 1.35,\n letterSpacing = 1,\n animationDelay = 0,\n- letterAnimationDelay = 300,\n+ letterAnimationDelay = 0,\n duration = 3000,\n rotations = 1,\n }) => {\n const element = select(el);\n" - }, - { - "date": 1643117873332, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -159,9 +159,9 @@\n digits.forEach((digit, i) => {\n console.log('i:', i)\n const sourceDistance = digit.initial * (fontSize * lineHeight);\n const targetDistance =\n- (rotations * i * DIGITS_COUNT + digit.value) * (fontSize * lineHeight);\n+ (rotations * Math.pow(10, i) * DIGITS_COUNT + digit.value) * (fontSize * lineHeight);\n const digitTransition = transition({\n from: sourceDistance,\n to: targetDistance,\n duration: duration,\n" - }, - { - "date": 1643117889178, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -159,9 +159,9 @@\n digits.forEach((digit, i) => {\n console.log('i:', i)\n const sourceDistance = digit.initial * (fontSize * lineHeight);\n const targetDistance =\n- (rotations * Math.pow(10, i) * DIGITS_COUNT + digit.value) * (fontSize * lineHeight);\n+ (rotations * Math.pow(2, i) * DIGITS_COUNT + digit.value) * (fontSize * lineHeight);\n const digitTransition = transition({\n from: sourceDistance,\n to: targetDistance,\n duration: duration,\n" - }, - { - "date": 1643117928797, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -159,9 +159,9 @@\n digits.forEach((digit, i) => {\n console.log('i:', i)\n const sourceDistance = digit.initial * (fontSize * lineHeight);\n const targetDistance =\n- (rotations * Math.pow(2, i) * DIGITS_COUNT + digit.value) * (fontSize * lineHeight);\n+ (rotations * i * DIGITS_COUNT + digit.value) * (fontSize * lineHeight);\n const digitTransition = transition({\n from: sourceDistance,\n to: targetDistance,\n duration: duration,\n" - }, - { - "date": 1643118164111, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -111,8 +111,9 @@\n createMask(defs, salt);\n \n const prepareValues = (value, secondValue) => {\n const values = String(value).replace(/ /g, \"\\u00a0\").split(\"\");\n+ console.log('values:', values)\n \n const digitIndex = String(value).search(/\\d/);\n while (secondValue.length > values.length) {\n const char =\n" - }, - { - "date": 1643118181952, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -111,9 +111,9 @@\n createMask(defs, salt);\n \n const prepareValues = (value, secondValue) => {\n const values = String(value).replace(/ /g, \"\\u00a0\").split(\"\");\n- console.log('values:', values)\n+ console.log('valuesASDF:', values)\n \n const digitIndex = String(value).search(/\\d/);\n while (secondValue.length > values.length) {\n const char =\n" - }, - { - "date": 1643119772108, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -193,8 +193,9 @@\n cancel();\n }\n : (e) => e,\n });\n+ console.log('digitTransition:', digitTransition)\n transitions.push(digitTransition);\n });\n \n const update = (timestamp) => {\n" - }, - { - "date": 1643119968918, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -172,9 +172,9 @@\n digit.offset.y =\n offset + (value % (fontSize * lineHeight * DIGITS_COUNT));\n digit.node::attr(\n \"transform\",\n- `translate(${digit.offset.x}, ${digit.offset.y})`\n+ `translate(${digit.offset.x}, ${digit.offset.y + 10})`\n );\n const filterOrigin = (sourceDistance + targetDistance) / 2;\n const motionValue = Number(\n Math.abs(\n" - }, - { - "date": 1643119980861, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -172,9 +172,9 @@\n digit.offset.y =\n offset + (value % (fontSize * lineHeight * DIGITS_COUNT));\n digit.node::attr(\n \"transform\",\n- `translate(${digit.offset.x}, ${digit.offset.y + 10})`\n+ `translate(${digit.offset.x}, ${digit.offset.y + 1000})`\n );\n const filterOrigin = (sourceDistance + targetDistance) / 2;\n const motionValue = Number(\n Math.abs(\n" - }, - { - "date": 1643120004580, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -172,9 +172,9 @@\n digit.offset.y =\n offset + (value % (fontSize * lineHeight * DIGITS_COUNT));\n digit.node::attr(\n \"transform\",\n- `translate(${digit.offset.x}, ${digit.offset.y + 1000})`\n+ `translate(${digit.offset.x}, ${digit.offset.y - 50})`\n );\n const filterOrigin = (sourceDistance + targetDistance) / 2;\n const motionValue = Number(\n Math.abs(\n" - }, - { - "date": 1643120027469, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -172,9 +172,9 @@\n digit.offset.y =\n offset + (value % (fontSize * lineHeight * DIGITS_COUNT));\n digit.node::attr(\n \"transform\",\n- `translate(${digit.offset.x}, ${digit.offset.y - 50})`\n+ `translate(${digit.offset.x}, ${digit.offset.y})`\n );\n const filterOrigin = (sourceDistance + targetDistance) / 2;\n const motionValue = Number(\n Math.abs(\n" - }, - { - "date": 1643120144926, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -111,9 +111,8 @@\n createMask(defs, salt);\n \n const prepareValues = (value, secondValue) => {\n const values = String(value).replace(/ /g, \"\\u00a0\").split(\"\");\n- console.log('valuesASDF:', values)\n \n const digitIndex = String(value).search(/\\d/);\n while (secondValue.length > values.length) {\n const char =\n@@ -167,9 +166,9 @@\n to: targetDistance,\n duration: duration,\n delay: (digits.length - 1 - i) * letterAnimationDelay + animationDelay,\n step(value) {\n- console.log('offset:', offset)\n+ console.log('offsetASDF:', offset)\n digit.offset.y =\n offset + (value % (fontSize * lineHeight * DIGITS_COUNT));\n digit.node::attr(\n \"transform\",\n" - }, - { - "date": 1643120194661, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -174,8 +174,9 @@\n \"transform\",\n `translate(${digit.offset.x}, ${digit.offset.y})`\n );\n const filterOrigin = (sourceDistance + targetDistance) / 2;\n+ console.log('filterOrigin:', filterOrigin)\n const motionValue = Number(\n Math.abs(\n Math.abs(Math.abs(value - filterOrigin) - filterOrigin) -\n sourceDistance\n" - }, - { - "date": 1643120228822, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -173,10 +173,9 @@\n digit.node::attr(\n \"transform\",\n `translate(${digit.offset.x}, ${digit.offset.y})`\n );\n- const filterOrigin = (sourceDistance + targetDistance) / 2;\n- console.log('filterOrigin:', filterOrigin)\n+ const filterOrigin = (sourceDistance + targetDistance) / 20;\n const motionValue = Number(\n Math.abs(\n Math.abs(Math.abs(value - filterOrigin) - filterOrigin) -\n sourceDistance\n" - }, - { - "date": 1643120241583, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -173,9 +173,9 @@\n digit.node::attr(\n \"transform\",\n `translate(${digit.offset.x}, ${digit.offset.y})`\n );\n- const filterOrigin = (sourceDistance + targetDistance) / 20;\n+ const filterOrigin = (sourceDistance + targetDistance);\n const motionValue = Number(\n Math.abs(\n Math.abs(Math.abs(value - filterOrigin) - filterOrigin) -\n sourceDistance\n" - }, - { - "date": 1643120266538, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -173,9 +173,9 @@\n digit.node::attr(\n \"transform\",\n `translate(${digit.offset.x}, ${digit.offset.y})`\n );\n- const filterOrigin = (sourceDistance + targetDistance);\n+ const filterOrigin = (sourceDistance + targetDistance) / 3;\n const motionValue = Number(\n Math.abs(\n Math.abs(Math.abs(value - filterOrigin) - filterOrigin) -\n sourceDistance\n" - }, - { - "date": 1643120278013, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -173,9 +173,9 @@\n digit.node::attr(\n \"transform\",\n `translate(${digit.offset.x}, ${digit.offset.y})`\n );\n- const filterOrigin = (sourceDistance + targetDistance) / 3;\n+ const filterOrigin = (sourceDistance + targetDistance) / 2;\n const motionValue = Number(\n Math.abs(\n Math.abs(Math.abs(value - filterOrigin) - filterOrigin) -\n sourceDistance\n" - }, - { - "date": 1643120317176, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -177,11 +177,12 @@\n const filterOrigin = (sourceDistance + targetDistance) / 2;\n const motionValue = Number(\n Math.abs(\n Math.abs(Math.abs(value - filterOrigin) - filterOrigin) -\n- sourceDistance\n- ) / 100\n- ).toFixed(1);\n+ sourceDistance\n+ ) / 100\n+ ).toFixed(1);\n+ console.log('motionValue:', motionValue)\n digit.filter::attr(\"stdDeviation\", `0 ${motionValue}`);\n },\n end:\n i === 0\n" - }, - { - "date": 1643120482845, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -180,9 +180,8 @@\n Math.abs(Math.abs(value - filterOrigin) - filterOrigin) -\n sourceDistance\n ) / 100\n ).toFixed(1);\n- console.log('motionValue:', motionValue)\n digit.filter::attr(\"stdDeviation\", `0 ${motionValue}`);\n },\n end:\n i === 0\n" - }, - { - "date": 1643121355284, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -18,8 +18,9 @@\n ::attr(\"y\", -i * fontSize * lineHeight)\n ::text(el);\n });\n \n+ console.log('roulette:', roulette)\n return roulette;\n };\n \n const createCharacter = (svg, el, fontSize) =>\n" - }, - { - "date": 1643121506384, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -169,9 +169,9 @@\n delay: (digits.length - 1 - i) * letterAnimationDelay + animationDelay,\n step(value) {\n console.log('offsetASDF:', offset)\n digit.offset.y =\n- offset + (value % (fontSize * lineHeight * DIGITS_COUNT));\n+ offset - (value % (fontSize * lineHeight * DIGITS_COUNT));\n digit.node::attr(\n \"transform\",\n `translate(${digit.offset.x}, ${digit.offset.y})`\n );\n" - }, - { - "date": 1643121602187, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -5,9 +5,10 @@\n const DIGITS_COUNT = 10;\n const ROTATIONS = 1;\n \n const createDigitRoulette = (svg, fontSize, lineHeight, id) => {\n- const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n+ const digits = [0, 9,8,7,6,5,4,3,2,1, 0];\n+ // const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n const roulette = svg\n ::append(\"g\")\n ::attr(\"id\", `digit-${id}`)\n ::style(\"filter\", `url(#motionFilter-${id})`);\n" - }, - { - "date": 1643121695064, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -170,9 +170,9 @@\n delay: (digits.length - 1 - i) * letterAnimationDelay + animationDelay,\n step(value) {\n console.log('offsetASDF:', offset)\n digit.offset.y =\n- offset - (value % (fontSize * lineHeight * DIGITS_COUNT));\n+ offset + (value % (fontSize * lineHeight * DIGITS_COUNT));\n digit.node::attr(\n \"transform\",\n `translate(${digit.offset.x}, ${digit.offset.y})`\n );\n" - }, - { - "date": 1643122562829, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -168,9 +168,9 @@\n to: targetDistance,\n duration: duration,\n delay: (digits.length - 1 - i) * letterAnimationDelay + animationDelay,\n step(value) {\n- console.log('offsetASDF:', offset)\n+ console.log('step value:', value)\n digit.offset.y =\n offset + (value % (fontSize * lineHeight * DIGITS_COUNT));\n digit.node::attr(\n \"transform\",\n" - }, - { - "date": 1643122643143, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -168,9 +168,8 @@\n to: targetDistance,\n duration: duration,\n delay: (digits.length - 1 - i) * letterAnimationDelay + animationDelay,\n step(value) {\n- console.log('step value:', value)\n digit.offset.y =\n offset + (value % (fontSize * lineHeight * DIGITS_COUNT));\n digit.node::attr(\n \"transform\",\n" - }, - { - "date": 1643122696509, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -106,9 +106,11 @@\n const canvasHeight = fontSize * lineHeight + marginBottom;\n \n element.innerHTML = \"\";\n const root = element::append(\"svg\");\n+ console.log('root:', root)\n const svg = root::append(\"svg\")::attr(\"mask\", `url(#mask-${salt})`);\n+ console.log('svg:', svg)\n const defs = root::append(\"defs\");\n createGradient(defs, salt);\n createMask(defs, salt);\n \n" - }, - { - "date": 1643122762180, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -106,11 +106,9 @@\n const canvasHeight = fontSize * lineHeight + marginBottom;\n \n element.innerHTML = \"\";\n const root = element::append(\"svg\");\n- console.log('root:', root)\n const svg = root::append(\"svg\")::attr(\"mask\", `url(#mask-${salt})`);\n- console.log('svg:', svg)\n const defs = root::append(\"defs\");\n createGradient(defs, salt);\n createMask(defs, salt);\n \n" - }, - { - "date": 1643122856095, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -14,9 +14,9 @@\n ::style(\"filter\", `url(#motionFilter-${id})`);\n \n digits.forEach((el, i) => {\n roulette\n- ::append(\"text\")\n+ ::prepend(\"text\")\n ::attr(\"y\", -i * fontSize * lineHeight)\n ::text(el);\n });\n \n" - }, - { - "date": 1643122868445, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -5,10 +5,10 @@\n const DIGITS_COUNT = 10;\n const ROTATIONS = 1;\n \n const createDigitRoulette = (svg, fontSize, lineHeight, id) => {\n- const digits = [0, 9,8,7,6,5,4,3,2,1, 0];\n- // const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n+ // const digits = [0, 9,8,7,6,5,4,3,2,1, 0];\n+ const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n const roulette = svg\n ::append(\"g\")\n ::attr(\"id\", `digit-${id}`)\n ::style(\"filter\", `url(#motionFilter-${id})`);\n" - }, - { - "date": 1643123063426, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,6 +1,6 @@\n import loop from \"./loop\";\n-import { select, append, attr, style, text } from \"./selection\";\n+import { select, append, prepend, attr, style, text } from \"./selection\";\n import transition from \"./transition\";\n \n const DIGITS_COUNT = 10;\n const ROTATIONS = 1;\n" - }, - { - "date": 1643123385728, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -14,9 +14,9 @@\n ::style(\"filter\", `url(#motionFilter-${id})`);\n \n digits.forEach((el, i) => {\n roulette\n- ::prepend(\"text\")\n+ ::append(\"text\")\n ::attr(\"y\", -i * fontSize * lineHeight)\n ::text(el);\n });\n \n" - }, - { - "date": 1643123401933, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -14,9 +14,9 @@\n ::style(\"filter\", `url(#motionFilter-${id})`);\n \n digits.forEach((el, i) => {\n roulette\n- ::append(\"text\")\n+ ::prepend(\"text\")\n ::attr(\"y\", -i * fontSize * lineHeight)\n ::text(el);\n });\n \n" - }, - { - "date": 1643123436214, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -14,9 +14,9 @@\n ::style(\"filter\", `url(#motionFilter-${id})`);\n \n digits.forEach((el, i) => {\n roulette\n- ::prepend(\"text\")\n+ ::append(\"text\")\n ::attr(\"y\", -i * fontSize * lineHeight)\n ::text(el);\n });\n \n" - }, - { - "date": 1643123494356, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -15,9 +15,9 @@\n \n digits.forEach((el, i) => {\n roulette\n ::append(\"text\")\n- ::attr(\"y\", -i * fontSize * lineHeight)\n+ ::attr(\"y\", i * fontSize * lineHeight)\n ::text(el);\n });\n \n console.log('roulette:', roulette)\n" - }, - { - "date": 1643123576734, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -169,9 +169,9 @@\n duration: duration,\n delay: (digits.length - 1 - i) * letterAnimationDelay + animationDelay,\n step(value) {\n digit.offset.y =\n- offset + (value % (fontSize * lineHeight * DIGITS_COUNT));\n+ offset - (value % (fontSize * lineHeight * DIGITS_COUNT));\n digit.node::attr(\n \"transform\",\n `translate(${digit.offset.x}, ${digit.offset.y})`\n );\n" - }, - { - "date": 1643126003295, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -235,7 +235,7 @@\n };\n const resume = () => {\n transitions.forEach((transition) => transition.resume());\n };\n-\n+ pause();\n return { cancel, pause, resume };\n };\n" - }, - { - "date": 1643126082933, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -6,9 +6,9 @@\n const ROTATIONS = 1;\n \n const createDigitRoulette = (svg, fontSize, lineHeight, id) => {\n // const digits = [0, 9,8,7,6,5,4,3,2,1, 0];\n- const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n+ const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];\n const roulette = svg\n ::append(\"g\")\n ::attr(\"id\", `digit-${id}`)\n ::style(\"filter\", `url(#motionFilter-${id})`);\n" - }, - { - "date": 1643126115594, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -235,7 +235,7 @@\n };\n const resume = () => {\n transitions.forEach((transition) => transition.resume());\n };\n- pause();\n+ // pause();\n return { cancel, pause, resume };\n };\n" - }, - { - "date": 1643126181353, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -6,9 +6,9 @@\n const ROTATIONS = 1;\n \n const createDigitRoulette = (svg, fontSize, lineHeight, id) => {\n // const digits = [0, 9,8,7,6,5,4,3,2,1, 0];\n- const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];\n+ const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ,0];\n const roulette = svg\n ::append(\"g\")\n ::attr(\"id\", `digit-${id}`)\n ::style(\"filter\", `url(#motionFilter-${id})`);\n" - }, - { - "date": 1643126647890, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -235,7 +235,7 @@\n };\n const resume = () => {\n transitions.forEach((transition) => transition.resume());\n };\n- // pause();\n+ pause();\n return { cancel, pause, resume };\n };\n" - }, - { - "date": 1643126830556, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -235,7 +235,7 @@\n };\n const resume = () => {\n transitions.forEach((transition) => transition.resume());\n };\n- pause();\n+ // pause();\n return { cancel, pause, resume };\n };\n" - }, - { - "date": 1643126866650, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -14,9 +14,9 @@\n ::style(\"filter\", `url(#motionFilter-${id})`);\n \n digits.forEach((el, i) => {\n roulette\n- ::append(\"text\")\n+ ::prepend(\"text\")\n ::attr(\"y\", i * fontSize * lineHeight)\n ::text(el);\n });\n \n" - }, - { - "date": 1643126945871, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -14,9 +14,9 @@\n ::style(\"filter\", `url(#motionFilter-${id})`);\n \n digits.forEach((el, i) => {\n roulette\n- ::prepend(\"text\")\n+ ::append(\"text\")\n ::attr(\"y\", i * fontSize * lineHeight)\n ::text(el);\n });\n \n" - }, - { - "date": 1643127028222, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,6 +1,6 @@\n import loop from \"./loop\";\n-import { select, append, prepend, attr, style, text } from \"./selection\";\n+import { select, append, attr, style, text } from \"./selection\";\n import transition from \"./transition\";\n \n const DIGITS_COUNT = 10;\n const ROTATIONS = 1;\n@@ -17,8 +17,9 @@\n roulette\n ::append(\"text\")\n ::attr(\"y\", i * fontSize * lineHeight)\n ::text(el);\n+ ::style(\"opacity\", 0.5);\n });\n \n console.log('roulette:', roulette)\n return roulette;\n" - }, - { - "date": 1643127117007, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -17,9 +17,9 @@\n roulette\n ::append(\"text\")\n ::attr(\"y\", i * fontSize * lineHeight)\n ::text(el);\n- ::style(\"opacity\", 0.5);\n+ ::style(\"opacity\", '0.5');\n });\n \n console.log('roulette:', roulette)\n return roulette;\n" - }, - { - "date": 1643127133208, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -16,9 +16,9 @@\n digits.forEach((el, i) => {\n roulette\n ::append(\"text\")\n ::attr(\"y\", i * fontSize * lineHeight)\n- ::text(el);\n+ ::text(el)\n ::style(\"opacity\", '0.5');\n });\n \n console.log('roulette:', roulette)\n" - }, - { - "date": 1643127213016, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -17,9 +17,9 @@\n roulette\n ::append(\"text\")\n ::attr(\"y\", i * fontSize * lineHeight)\n ::text(el)\n- ::style(\"opacity\", '0.5');\n+ ::style(\"opacity\", i === 0 ? '0.5': 1);\n });\n \n console.log('roulette:', roulette)\n return roulette;\n" - }, - { - "date": 1643127564589, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -17,9 +17,10 @@\n roulette\n ::append(\"text\")\n ::attr(\"y\", i * fontSize * lineHeight)\n ::text(el)\n- ::style(\"opacity\", i === 0 ? '0.5': 1);\n+ ::style(\"fill\", i === 0 ? 'red': 'blue');\n+ // ::style(\"opacity\", i === 0 ? '0.5': 1);\n });\n \n console.log('roulette:', roulette)\n return roulette;\n" - }, - { - "date": 1643127619486, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -186,8 +186,9 @@\n ).toFixed(1);\n digit.filter::attr(\"stdDeviation\", `0 ${motionValue}`);\n },\n end:\n+ console.log('end')\n i === 0\n ? () => {\n element.querySelectorAll('[style*=\"filter\"]').forEach((ele) => {\n ele.style.filter = \"\";\n" - }, - { - "date": 1643127643027, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -186,11 +186,11 @@\n ).toFixed(1);\n digit.filter::attr(\"stdDeviation\", `0 ${motionValue}`);\n },\n end:\n- console.log('end')\n- i === 0\n- ? () => {\n+ i === 0\n+ ? () => {\n+ console.log('end')\n element.querySelectorAll('[style*=\"filter\"]').forEach((ele) => {\n ele.style.filter = \"\";\n });\n cancel();\n" - }, - { - "date": 1643127700601, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -190,9 +190,9 @@\n i === 0\n ? () => {\n console.log('end')\n element.querySelectorAll('[style*=\"filter\"]').forEach((ele) => {\n- ele.style.filter = \"\";\n+ // ele.style.filter = \"\";\n });\n cancel();\n }\n : (e) => e,\n" - }, - { - "date": 1643127720025, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -190,9 +190,9 @@\n i === 0\n ? () => {\n console.log('end')\n element.querySelectorAll('[style*=\"filter\"]').forEach((ele) => {\n- // ele.style.filter = \"\";\n+ ele.style.filter = \"\";\n });\n cancel();\n }\n : (e) => e,\n" - }, - { - "date": 1643127839974, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -192,9 +192,9 @@\n console.log('end')\n element.querySelectorAll('[style*=\"filter\"]').forEach((ele) => {\n ele.style.filter = \"\";\n });\n- cancel();\n+ // cancel();\n }\n : (e) => e,\n });\n console.log('digitTransition:', digitTransition)\n" - }, - { - "date": 1643127857319, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -192,9 +192,9 @@\n console.log('end')\n element.querySelectorAll('[style*=\"filter\"]').forEach((ele) => {\n ele.style.filter = \"\";\n });\n- // cancel();\n+ cancel();\n }\n : (e) => e,\n });\n console.log('digitTransition:', digitTransition)\n" - }, - { - "date": 1643127869767, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -190,8 +190,9 @@\n i === 0\n ? () => {\n console.log('end')\n element.querySelectorAll('[style*=\"filter\"]').forEach((ele) => {\n+ console.log('ele:', ele)\n ele.style.filter = \"\";\n });\n cancel();\n }\n" - }, - { - "date": 1643127944354, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -189,10 +189,10 @@\n end:\n i === 0\n ? () => {\n console.log('end')\n+ console.log('element:', element)\n element.querySelectorAll('[style*=\"filter\"]').forEach((ele) => {\n- console.log('ele:', ele)\n ele.style.filter = \"\";\n });\n cancel();\n }\n" - }, - { - "date": 1643128023772, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -17,8 +17,9 @@\n roulette\n ::append(\"text\")\n ::attr(\"y\", i * fontSize * lineHeight)\n ::text(el)\n+ ::attr(\"class\": \"js-bounty__zero\")\n ::style(\"fill\", i === 0 ? 'red': 'blue');\n // ::style(\"opacity\", i === 0 ? '0.5': 1);\n });\n \n" - }, - { - "date": 1643128142340, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -191,8 +191,11 @@\n i === 0\n ? () => {\n console.log('end')\n console.log('element:', element)\n+ element.querySelectorAll('.js-bounty__zero').forEach(el => {\n+ el.style.opacity = 1;\n+ });\n element.querySelectorAll('[style*=\"filter\"]').forEach((ele) => {\n ele.style.filter = \"\";\n });\n cancel();\n" - }, - { - "date": 1643128162922, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -18,10 +18,9 @@\n ::append(\"text\")\n ::attr(\"y\", i * fontSize * lineHeight)\n ::text(el)\n ::attr(\"class\": \"js-bounty__zero\")\n- ::style(\"fill\", i === 0 ? 'red': 'blue');\n- // ::style(\"opacity\", i === 0 ? '0.5': 1);\n+ ::style(\"opacity\", i === 0 ? '0.5': '1');\n });\n \n console.log('roulette:', roulette)\n return roulette;\n" - }, - { - "date": 1643128194095, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -17,9 +17,9 @@\n roulette\n ::append(\"text\")\n ::attr(\"y\", i * fontSize * lineHeight)\n ::text(el)\n- ::attr(\"class\": \"js-bounty__zero\")\n+ ::attr(\"class\", \"js-bounty__zero\")\n ::style(\"opacity\", i === 0 ? '0.5': '1');\n });\n \n console.log('roulette:', roulette)\n" - }, - { - "date": 1643128212261, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -18,9 +18,9 @@\n ::append(\"text\")\n ::attr(\"y\", i * fontSize * lineHeight)\n ::text(el)\n ::attr(\"class\", \"js-bounty__zero\")\n- ::style(\"opacity\", i === 0 ? '0.5': '1');\n+ ::style(\"opacity\", i === 0 ? '0': '1');\n });\n \n console.log('roulette:', roulette)\n return roulette;\n" - } - ], - "date": 1643107097002, - "name": "Commit-0", - "content": "import loop from \"./loop\";\nimport { select, append, attr, style, text } from \"./selection\";\nimport transition from \"./transition\";\n\nconst DIGITS_COUNT = 10;\nconst ROTATIONS = 3;\n\nconst createDigitRoulette = (svg, fontSize, lineHeight, id) => {\n const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];\n const roulette = svg\n ::append(\"g\")\n ::attr(\"id\", `digit-${id}`)\n ::style(\"filter\", `url(#motionFilter-${id})`);\n\n digits.forEach((el, i) => {\n roulette\n ::append(\"text\")\n ::attr(\"y\", -i * fontSize * lineHeight)\n ::text(el);\n });\n\n return roulette;\n};\n\nconst createCharacter = (svg, el, fontSize) =>\n svg::append(\"g\")::append(\"text\")::text(el);\n\nconst createFilter = (defs, id) =>\n defs\n ::append(\"filter\")\n ::attr(\"id\", `motionFilter-${id}`)\n ::attr(\"width\", \"300%\")\n ::attr(\"x\", \"-100%\")\n ::append(\"feGaussianBlur\")\n ::attr(\"class\", \"blurValues\")\n ::attr(\"in\", \"SourceGraphic\")\n ::attr(\"stdDeviation\", \"0 0\");\n\nconst createGradient = (defs, id) =>\n defs\n ::append(\"linearGradient\")\n ::attr(\"id\", `gradient-${id}`)\n ::attr(\"x1\", \"0%\")\n ::attr(\"y1\", \"0%\")\n ::attr(\"x2\", \"0%\")\n ::attr(\"y2\", \"100%\")\n ::append(\"stop\")\n ::attr(\"offset\", \"0\")\n ::attr(\"stop-color\", \"white\")\n ::attr(\"stop-opacity\", \"0\")\n ::select(`#gradient-${id}`)\n ::append(\"stop\")\n ::attr(\"offset\", \"0.2\")\n ::attr(\"stop-color\", \"white\")\n ::attr(\"stop-opacity\", \"1\")\n ::select(`#gradient-${id}`)\n ::append(\"stop\")\n ::attr(\"offset\", \"0.8\")\n ::attr(\"stop-color\", \"white\")\n ::attr(\"stop-opacity\", \"1\")\n ::select(`#gradient-${id}`)\n ::append(\"stop\")\n ::attr(\"offset\", \"1\")\n ::attr(\"stop-color\", \"white\")\n ::attr(\"stop-opacity\", \"0\");\n\nconst createMask = (defs, id) =>\n defs\n ::append(\"mask\")\n ::attr(\"id\", `mask-${id}`)\n ::append(\"rect\")\n ::attr(\"x\", 0)\n ::attr(\"y\", 0)\n ::attr(\"width\", \"100%\")\n ::attr(\"height\", \"100%\")\n ::attr(\"fill\", `url(#gradient-${id})`);\n\nconst setViewBox = (svg, width, height) => {\n svg::attr(\"width\", width);\n svg::attr(\"height\", height);\n svg::attr(\"viewBox\", `0 0 ${width} ${height}`);\n svg::style(\"overflow\", \"hidden\");\n};\n\nexport default ({\n el,\n value,\n initialValue = null,\n lineHeight = 1.35,\n letterSpacing = 1,\n animationDelay = 100,\n letterAnimationDelay = 100,\n duration = 3000,\n}) => {\n const element = select(el);\n const computedStyle = window.getComputedStyle(element);\n const fontSize = parseInt(computedStyle.fontSize, 10);\n const marginBottom = (fontSize * lineHeight - fontSize) / 2 + fontSize / 10;\n const offset = fontSize * lineHeight - marginBottom;\n const salt = Date.now();\n\n let canvasWidth = 0;\n const canvasHeight = fontSize * lineHeight + marginBottom;\n\n element.innerHTML = \"\";\n const root = element::append(\"svg\");\n const svg = root::append(\"svg\")::attr(\"mask\", `url(#mask-${salt})`);\n const defs = root::append(\"defs\");\n createGradient(defs, salt);\n createMask(defs, salt);\n\n const prepareValues = (value, secondValue) => {\n const values = String(value).replace(/ /g, \"\\u00a0\").split(\"\");\n\n const digitIndex = String(value).search(/\\d/);\n while (secondValue.length > values.length) {\n const char =\n secondValue[secondValue.length - values.length - 1 + digitIndex];\n values.splice(digitIndex, 0, isNaN(parseInt(char, 10)) ? char : \"0\");\n }\n return values;\n };\n\n const initialString = String(initialValue || \"0\");\n const values = prepareValues(String(value), initialString);\n const initial = prepareValues(initialString, String(value));\n\n const chars = values.map((char, i) => {\n const id = `${i}-${salt}`;\n if (isNaN(parseInt(char, 10)) || isNaN(parseInt(initial[i], 10))) {\n return {\n isDigit: false,\n node: createCharacter(svg, char, fontSize),\n value: char,\n offset: { x: 0, y: offset },\n };\n } else {\n return {\n isDigit: true,\n id: id,\n node: createDigitRoulette(svg, fontSize, lineHeight, id),\n filter: createFilter(defs, id),\n value: Number(char),\n initial: Number(initial[i]),\n offset: {\n x: 0,\n y: offset + Number(initial[i]) * (fontSize * lineHeight),\n },\n };\n }\n });\n\n const transitions = [];\n const digits = chars.filter((char) => char.isDigit);\n digits.forEach((digit, i) => {\n const sourceDistance = digit.initial * (fontSize * lineHeight);\n const targetDistance =\n (ROTATIONS * DIGITS_COUNT + digit.value) * (fontSize * lineHeight);\n const digitTransition = transition({\n from: sourceDistance,\n to: targetDistance,\n duration: duration,\n delay: (digits.length - 1 - i) * letterAnimationDelay + animationDelay,\n step(value) {\n digit.offset.y =\n offset - (value % (fontSize * lineHeight * DIGITS_COUNT));\n digit.node::attr(\n \"transform\",\n `translate(${digit.offset.x}, ${digit.offset.y})`\n );\n const filterOrigin = (sourceDistance + targetDistance) / 2;\n const motionValue = Number(\n Math.abs(\n Math.abs(Math.abs(value - filterOrigin) - filterOrigin) -\n sourceDistance\n ) / 100\n ).toFixed(1);\n digit.filter::attr(\"stdDeviation\", `0 ${motionValue}`);\n },\n end:\n i === 0\n ? () => {\n element.querySelectorAll('[style*=\"filter\"]').forEach((ele) => {\n ele.style.filter = \"\";\n });\n cancel();\n }\n : (e) => e,\n });\n transitions.push(digitTransition);\n });\n\n const update = (timestamp) => {\n canvasWidth = 0;\n chars.forEach((char) => {\n const { width } = char.node.getBBox();\n\n char.offset.x = canvasWidth;\n // set proper kerning for proportional fonts\n if (char.isDigit) {\n [...char.node.childNodes].forEach((element) => {\n const { width: letterWidth } = element.getBBox();\n const offset = (width - letterWidth) / 2;\n element.setAttribute(\"x\", offset);\n });\n }\n\n canvasWidth += width + letterSpacing;\n });\n canvasWidth -= letterSpacing;\n\n chars.forEach((char) => {\n char.node::attr(\n \"transform\",\n `translate(${char.offset.x}, ${char.offset.y})`\n );\n });\n\n setViewBox(root, canvasWidth, canvasHeight);\n transitions.forEach((transition) => transition.update(timestamp));\n };\n\n const cancel = loop(update);\n\n const pause = () => {\n transitions.forEach((transition) => transition.pause());\n };\n const resume = () => {\n transitions.forEach((transition) => transition.resume());\n };\n\n return { cancel, pause, resume };\n};\n" - } - ] -} \ No newline at end of file diff --git a/.lh/src/loop.js.json b/.lh/src/loop.js.json deleted file mode 100644 index 15676b4..0000000 --- a/.lh/src/loop.js.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "sourceFile": "src/loop.js", - "activeCommit": 0, - "commits": [ - { - "activePatchIndex": 1, - "patches": [ - { - "date": 1643127802737, - "content": "Index: \n===================================================================\n--- \n+++ \n" - }, - { - "date": 1643127816478, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,6 +1,5 @@\n export default func => {\n- return\n let frame;\n const step = timestamp => {\n frame = requestAnimationFrame(step);\n func(timestamp);\n" - } - ], - "date": 1643127802737, - "name": "Commit-0", - "content": "export default func => {\n return\n let frame;\n const step = timestamp => {\n frame = requestAnimationFrame(step);\n func(timestamp);\n };\n step(0);\n return () => cancelAnimationFrame(frame);\n};\n" - } - ] -} \ No newline at end of file diff --git a/.lh/src/selection/index.js.json b/.lh/src/selection/index.js.json deleted file mode 100644 index f9dd5d3..0000000 --- a/.lh/src/selection/index.js.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "sourceFile": "src/selection/index.js", - "activeCommit": 0, - "commits": [ - { - "activePatchIndex": 1, - "patches": [ - { - "date": 1643123232261, - "content": "Index: \n===================================================================\n--- \n+++ \n" - }, - { - "date": 1643126969617, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,6 +1,5 @@\n export { default as select } from './select';\n export { default as append } from './append';\n-export { default as prepend } from './prepend';\n export { default as attr } from './attr';\n export { default as style } from './style';\n export { default as text } from './text';\n" - } - ], - "date": 1643123232261, - "name": "Commit-0", - "content": "export { default as select } from './select';\nexport { default as append } from './append';\nexport { default as prepend } from './prepend';\nexport { default as attr } from './attr';\nexport { default as style } from './style';\nexport { default as text } from './text';\n" - } - ] -} \ No newline at end of file diff --git a/.lh/src/selection/prepend.js.json b/.lh/src/selection/prepend.js.json deleted file mode 100644 index 25de77e..0000000 --- a/.lh/src/selection/prepend.js.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "sourceFile": "src/selection/prepend.js", - "activeCommit": 0, - "commits": [ - { - "activePatchIndex": 3, - "patches": [ - { - "date": 1643123001331, - "content": "Index: \n===================================================================\n--- \n+++ \n" - }, - { - "date": 1643123044345, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,7 +1,7 @@\n import namespaces from './namespaces';\n \n export default function(type) {\n const element = document.createElementNS(namespaces.svg, type);\n- this.appendChild(element);\n+ this.prepend(element);\n return element;\n }\n" - }, - { - "date": 1643123142176, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,7 +1,7 @@\n import namespaces from './namespaces';\n \n export default function(type) {\n const element = document.createElementNS(namespaces.svg, type);\n- this.prepend(element);\n+ this.insertBefore(element, element);\n return element;\n }\n" - }, - { - "date": 1643123324009, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,7 +1,7 @@\n import namespaces from './namespaces';\n \n export default function(type) {\n const element = document.createElementNS(namespaces.svg, type);\n- this.insertBefore(element, element);\n+ this.prepend(element, element);\n return element;\n }\n" - } - ], - "date": 1643123001331, - "name": "Commit-0", - "content": "import namespaces from './namespaces';\n\nexport default function(type) {\n const element = document.createElementNS(namespaces.svg, type);\n this.appendChild(element);\n return element;\n}\n" - } - ] -} \ No newline at end of file diff --git a/.lh/webpack.config.js.json b/.lh/webpack.config.js.json deleted file mode 100644 index 2930d84..0000000 --- a/.lh/webpack.config.js.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "sourceFile": "webpack.config.js", - "activeCommit": 0, - "commits": [ - { - "activePatchIndex": 3, - "patches": [ - { - "date": 1643122186203, - "content": "Index: \n===================================================================\n--- \n+++ \n" - }, - { - "date": 1643122203294, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -14,9 +14,6 @@\n exclude: /node_modules/,\n loader: 'babel'\n }\n ]\n- },\n- resolve: {\n- extensions: ['.js', '.jsx']\n-}\n+ }\n };\n" - }, - { - "date": 1643122324248, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -14,6 +14,13 @@\n exclude: /node_modules/,\n loader: 'babel'\n }\n ]\n- }\n+ },\n+ devServer: {\n+ static: {\n+ directory: path.join(__dirname, 'public'),\n+ },\n+ compress: true,\n+ port: 9000,\n+ },\n };\n" - }, - { - "date": 1643122349857, - "content": "Index: \n===================================================================\n--- \n+++ \n@@ -1,4 +1,6 @@\n+const path = require('path');\n+\n module.exports = {\n entry: './src/index.js',\n output: {\n filename: 'bounty.js',\n" - } - ], - "date": 1643122186203, - "name": "Commit-0", - "content": "module.exports = {\n entry: './src/index.js',\n output: {\n filename: 'bounty.js',\n path: './lib/',\n publicPath: '/',\n libraryTarget: 'umd',\n library: 'bounty'\n },\n module: {\n loaders: [\n {\n test: /\\.js$/,\n exclude: /node_modules/,\n loader: 'babel'\n }\n ]\n },\n resolve: {\n extensions: ['.js', '.jsx']\n}\n};\n" - } - ] -} \ No newline at end of file diff --git a/README.md b/README.md index 27dee2e..70a8526 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,9 @@ bounty({ letterSpacing: 1, animationDelay: 100, letterAnimationDelay: 100, - duration: 3000 + duration: 3000, + rotations: 1, + startManually: false }); ``` diff --git a/examples/index.html b/examples/index.html index b277b52..e20bdba 100644 --- a/examples/index.html +++ b/examples/index.html @@ -34,7 +34,11 @@
diff --git a/lib/bounty.js b/lib/bounty.js index f0e891f..b9b7870 100644 --- a/lib/bounty.js +++ b/lib/bounty.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.bounty=e():t.bounty=e()}(this,function(){return function(t){function e(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return t[n].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var r={};return e.m=t,e.c=r,e.p="/",e(0)}([function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var a=r(1);Object.defineProperty(e,"default",{enumerable:!0,get:function(){return n(a).default}})},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function a(t){if(Array.isArray(t)){for(var e=0,r=Array(t.length);er.length;){var a=e[e.length-r.length-1+n];r.splice(n,0,isNaN(parseInt(a,10))?a:"0")}return r},T=String(u||"0");console.log("initialString:",T);var V=H(String(n),T);console.log("values:",V);var L=H(T,String(n));console.log("initial:",L);var J=V.map(function(t,e){var r=e+"-"+k;return isNaN(parseInt(t,10))||isNaN(parseInt(L[e],10))?{isDigit:!1,node:d(C,t,D),value:t,offset:{x:0,y:F}}:{isDigit:!0,id:r,node:s(C,D,m,r),filter:p(G,r),value:Number(t),initial:Number(L[e]),offset:{x:0,y:F+Number(L[e])*(D*m)}}}),K=[],Q=J.filter(function(t){return t.isDigit});Q.forEach(function(t,e){console.log("i:",e);var r=t.initial*(D*m),n=(N*e*f+t.value)*(D*m),a=(0,c.default)({from:r,to:n,duration:O,delay:(Q.length-1-e)*w+j,step:function(e){var a;t.offset.y=F-e%(D*m*f),(a=t.node,i.attr).call(a,"transform","translate("+t.offset.x+", "+t.offset.y+")");var l=(r+n)/2,o=Number(Math.abs(Math.abs(Math.abs(e-l)-l)-r)/100).toFixed(1);(a=t.filter,i.attr).call(a,"stdDeviation","0 "+o)},end:0===e?function(){console.log("end"),console.log("element:",A),A.querySelectorAll(".js-bounty__zero").forEach(function(t){t.style.opacity=1}),A.querySelectorAll('[style*="filter"]').forEach(function(t){t.style.filter=""}),U()}:function(t){return t}});console.log("digitTransition:",a),K.push(a)});var R=function(t){q=0,J.forEach(function(t){var e=t.node.getBBox(),r=e.width;t.offset.x=q,t.isDigit&&[].concat(a(t.node.childNodes)).forEach(function(t){var e=t.getBBox(),n=e.width,a=(r-n)/2;t.setAttribute("x",a)}),q+=r+_}),q-=_,J.forEach(function(t){var e;(e=t.node,i.attr).call(e,"transform","translate("+t.offset.x+", "+t.offset.y+")")}),g(z,q,I),K.forEach(function(e){return e.update(t)})},U=(0,o.default)(R),W=function(){K.forEach(function(t){return t.pause()})},X=function(){K.forEach(function(t){return t.resume()})};return{cancel:U,pause:W,resume:X}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){var e=void 0,r=function r(n){e=requestAnimationFrame(r),t(n)};return r(0),function(){return cancelAnimationFrame(e)}}},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){var e=document.createElementNS(l.default.svg,t);return this.appendChild(e),e};var a=r(6),l=n(a)},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t,e){return this.setAttribute(t,e),this}},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var a=r(7);Object.defineProperty(e,"select",{enumerable:!0,get:function(){return n(a).default}});var l=r(3);Object.defineProperty(e,"append",{enumerable:!0,get:function(){return n(l).default}});var o=r(4);Object.defineProperty(e,"attr",{enumerable:!0,get:function(){return n(o).default}});var i=r(8);Object.defineProperty(e,"style",{enumerable:!0,get:function(){return n(i).default}});var u=r(9);Object.defineProperty(e,"text",{enumerable:!0,get:function(){return n(u).default}})},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={svg:"http://www.w3.org/2000/svg"}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){return t===String(t)?document.querySelector(t):t}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return this.style.setProperty(t,e,r),this}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){return this.textContent=t,this}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=function(t){return((t*=2)<=1?t*t*t:(t-=2)*t*t+2)/2};e.default=function(t){var e=t.from,n=t.to,a=t.duration,l=void 0===a?3e3:a,o=t.delay,i=void 0===o?0:o,u=t.easing,c=void 0===u?r:u,f=t.start,s=void 0===f?function(t){return t}:f,d=t.step,p=void 0===d?function(t){return t}:d,v=t.end,y=void 0===v?function(t){return t}:v,g=e,h=0,m=!1,b=0,_=!1,x=function(t){if(!_){h||(h=t,b=t,s(g)),m&&(h+=t-b);var r=Math.min(Math.max(t-h-i,0),l)/l;g=c(r)*(n-e)+e,p(g),1===r&&(_=!0,y(g)),b=t}},j=function(){m=!0},M=function(){m=!1};return{update:x,pause:j,resume:M}}}])}); \ No newline at end of file +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.bounty=e():t.bounty=e()}(this,function(){return function(t){function e(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return t[n].call(a.exports,a,a.exports,e),a.loaded=!0,a.exports}var r={};return e.m=t,e.c=r,e.p="/",e(0)}([function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var a=r(1);Object.defineProperty(e,"default",{enumerable:!0,get:function(){return n(a).default}})},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}function a(t){if(Array.isArray(t)){for(var e=0,r=Array(t.length);er.length;){var a=e[e.length-r.length-1+n];r.splice(n,0,isNaN(parseInt(a,10))?a:"0")}return r},L=String(u||"0");console.log("initialString:",L);var J=V(String(n),L);console.log("values:",J);var K=V(L,String(n));console.log("initial:",K);var Q=J.map(function(t,e){var r=e+"-"+I;return isNaN(parseInt(t,10))||isNaN(parseInt(K[e],10))?{isDigit:!1,node:d(H,t,F),value:t,offset:{x:0,y:q}}:{isDigit:!0,id:r,node:s(H,F,m,r),filter:p(T,r),value:Number(t),initial:Number(K[e]),offset:{x:0,y:q+Number(K[e])*(F*m)}}}),R=[],U=Q.filter(function(t){return t.isDigit});U.forEach(function(t,e){console.log("i:",e);var r=t.initial*(F*m),n=(N*e*f+t.value)*(F*m),a=(0,c.default)({from:r,to:n,duration:O,delay:(U.length-1-e)*w+j,step:function(e){var a;t.offset.y=q-e%(F*m*f),(a=t.node,i.attr).call(a,"transform","translate("+t.offset.x+", "+t.offset.y+")");var l=(r+n)/2,o=Number(Math.abs(Math.abs(Math.abs(e-l)-l)-r)/100).toFixed(1);(a=t.filter,i.attr).call(a,"stdDeviation","0 "+o)},end:0===e?function(){console.log("end"),console.log("element:",D),D.querySelectorAll(".js-bounty__zero").forEach(function(t){t.style.opacity=1}),D.querySelectorAll('[style*="filter"]').forEach(function(t){t.style.filter=""}),X()}:function(t){return t}});console.log("digitTransition:",a),R.push(a)});var W=function(t){z=0,Q.forEach(function(t){var e=t.node.getBBox(),r=e.width;t.offset.x=z,t.isDigit&&[].concat(a(t.node.childNodes)).forEach(function(t){var e=t.getBBox(),n=e.width,a=(r-n)/2;t.setAttribute("x",a)}),z+=r+_}),z-=_,Q.forEach(function(t){var e;(e=t.node,i.attr).call(e,"transform","translate("+t.offset.x+", "+t.offset.y+")")}),g(G,z,C),R.forEach(function(e){return e.update(t)})},X=(0,o.default)(W),Y=function(){R.forEach(function(t){return t.pause()})},Z=function(){R.forEach(function(t){return t.resume()})};return E&&Y(),{cancel:X,pause:Y,resume:Z}}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){var e=void 0,r=function r(n){e=requestAnimationFrame(r),t(n)};return r(0),function(){return cancelAnimationFrame(e)}}},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){var e=document.createElementNS(l.default.svg,t);return this.appendChild(e),e};var a=r(6),l=n(a)},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t,e){return this.setAttribute(t,e),this}},function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var a=r(7);Object.defineProperty(e,"select",{enumerable:!0,get:function(){return n(a).default}});var l=r(3);Object.defineProperty(e,"append",{enumerable:!0,get:function(){return n(l).default}});var o=r(4);Object.defineProperty(e,"attr",{enumerable:!0,get:function(){return n(o).default}});var i=r(8);Object.defineProperty(e,"style",{enumerable:!0,get:function(){return n(i).default}});var u=r(9);Object.defineProperty(e,"text",{enumerable:!0,get:function(){return n(u).default}})},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={svg:"http://www.w3.org/2000/svg"}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){return t===String(t)?document.querySelector(t):t}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t,e){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return this.style.setProperty(t,e,r),this}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){return this.textContent=t,this}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=function(t){return((t*=2)<=1?t*t*t:(t-=2)*t*t+2)/2};e.default=function(t){var e=t.from,n=t.to,a=t.duration,l=void 0===a?3e3:a,o=t.delay,i=void 0===o?0:o,u=t.easing,c=void 0===u?r:u,f=t.start,s=void 0===f?function(t){return t}:f,d=t.step,p=void 0===d?function(t){return t}:d,v=t.end,y=void 0===v?function(t){return t}:v,g=e,h=0,m=!1,b=0,_=!1,x=function(t){if(!_){h||(h=t,b=t,s(g)),m&&(h+=t-b);var r=Math.min(Math.max(t-h-i,0),l)/l;g=c(r)*(n-e)+e,p(g),1===r&&(_=!0,y(g)),b=t}},j=function(){m=!0},M=function(){m=!1};return{update:x,pause:j,resume:M}}}])}); \ No newline at end of file diff --git a/src/bounty.js b/src/bounty.js index bfef756..ad3543a 100644 --- a/src/bounty.js +++ b/src/bounty.js @@ -3,10 +3,8 @@ import { select, append, attr, style, text } from "./selection"; import transition from "./transition"; const DIGITS_COUNT = 10; -const ROTATIONS = 1; const createDigitRoulette = (svg, fontSize, lineHeight, id) => { - // const digits = [0, 9,8,7,6,5,4,3,2,1, 0]; const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ,0]; const roulette = svg ::append("g") @@ -96,6 +94,7 @@ export default ({ letterAnimationDelay = 0, duration = 3000, rotations = 1, + startManually = false }) => { const element = select(el); const computedStyle = window.getComputedStyle(element); @@ -243,6 +242,8 @@ export default ({ const resume = () => { transitions.forEach((transition) => transition.resume()); }; - // pause(); + if(startManually) { + pause(); + } return { cancel, pause, resume }; };