Code review part 2
* <https://ilja.space/notice/ALpd6nux5hT2nsfetM> * Previous commit: `|> fill_props(token) after the cond` in the parser * This commit: Don't use intention-specific data in the tokens (e.g. left is reverse, x is mfm-spinX) * <https://ilja.space/notice/ALpcK6W59UjkIUofU8> * TODO: Use less files * Previous commit: Change nested if-statement in mfm.ex to `cond do`
This commit is contained in:
parent
ecd3f750cb
commit
a8dd3dd719
4 changed files with 71 additions and 71 deletions
|
@ -108,18 +108,28 @@ defmodule MfmParser.Encoder do
|
|||
%Node.MFM.Spin{} ->
|
||||
{html_child, styles_child} = to_html_styles(node.children)
|
||||
|
||||
stylemap = %{
|
||||
"mfm-spin" =>
|
||||
"@keyframes mfm-spin { 0% { transform:rotate(0) } to { transform:rotate(360deg) }}",
|
||||
"mfm-spinX" =>
|
||||
styles_map = %{
|
||||
"x" =>
|
||||
"@keyframes mfm-spinX { 0% { transform:perspective(128px) rotateX(0) } to { transform:perspective(128px) rotateX(360deg) }}",
|
||||
"mfm-spinY" =>
|
||||
"@keyframes mfm-spinY { 0% { transform:perspective(128px) rotateY(0) } to { transform:perspective(128px) rotateY(360deg) }}"
|
||||
"y" =>
|
||||
"@keyframes mfm-spinY { 0% { transform:perspective(128px) rotateY(0) } to { transform:perspective(128px) rotateY(360deg) }}",
|
||||
"z" =>
|
||||
"@keyframes mfm-spin { 0% { transform:rotate(0) } to { transform:rotate(360deg) }}"
|
||||
}
|
||||
|
||||
keyframe_names_map = %{
|
||||
"x" => "mfm-spinX",
|
||||
"y" => "mfm-spinY",
|
||||
"z" => "mfm-spin"
|
||||
}
|
||||
|
||||
directions_map = %{
|
||||
"left" => "reverse"
|
||||
}
|
||||
|
||||
{html <>
|
||||
"<span style=\"display: inline-block; animation: #{node.props.speed} linear 0s infinite #{node.props.direction} none running #{node.props.keyframes_name};\">#{html_child}</span>",
|
||||
styles ++ [Map.get(stylemap, node.props.keyframes_name, "")] ++ styles_child}
|
||||
"<span style=\"display: inline-block; animation: #{node.props.speed} linear 0s infinite #{Map.get(directions_map, node.props.direction, node.props.direction)} none running #{Map.get(keyframe_names_map, node.props.axis, "")};\">#{html_child}</span>",
|
||||
styles ++ [Map.get(styles_map, node.props.axis, "")] ++ styles_child}
|
||||
|
||||
%Node.MFM.Shake{} ->
|
||||
{html_child, styles_child} = to_html_styles(node.children)
|
||||
|
|
|
@ -1,13 +1,3 @@
|
|||
defmodule MfmParser.Node.MFM.Spin do
|
||||
# keyframes_name:
|
||||
# x -> mfm-spinX
|
||||
# y -> mfm-spinY
|
||||
# _ -> mfm-spin
|
||||
#
|
||||
# direction:
|
||||
# left -> reverse
|
||||
# alternate -> alternate
|
||||
# _ -> normal
|
||||
#
|
||||
defstruct props: %{keyframes_name: "mfm-spin", direction: "normal", speed: "1.5s"}, children: []
|
||||
defstruct props: %{axis: "z", direction: "normal", speed: "1.5s"}, children: []
|
||||
end
|
||||
|
|
|
@ -149,107 +149,107 @@ defmodule MfmParser.EncoderTest do
|
|||
end
|
||||
|
||||
test "it handles spin" do
|
||||
input_tree_spin_reverse = [
|
||||
input_tree_z_left = [
|
||||
%Node.MFM.Spin{
|
||||
props: %{keyframes_name: "mfm-spin", direction: "reverse", speed: "1.5s"},
|
||||
props: %{axis: "z", direction: "left", speed: "1.5s"},
|
||||
children: [%Node.Text{props: %{text: "🍮"}}]
|
||||
}
|
||||
]
|
||||
|
||||
input_tree_spinx_reverse = [
|
||||
input_tree_x_left = [
|
||||
%Node.MFM.Spin{
|
||||
props: %{keyframes_name: "mfm-spinX", direction: "reverse", speed: "1.5s"},
|
||||
props: %{axis: "x", direction: "left", speed: "1.5s"},
|
||||
children: [%Node.Text{props: %{text: "🍮"}}]
|
||||
}
|
||||
]
|
||||
|
||||
input_tree_spiny_reverse = [
|
||||
input_tree_y_left = [
|
||||
%Node.MFM.Spin{
|
||||
props: %{keyframes_name: "mfm-spinY", direction: "reverse", speed: "1.5s"},
|
||||
props: %{axis: "y", direction: "left", speed: "1.5s"},
|
||||
children: [%Node.Text{props: %{text: "🍮"}}]
|
||||
}
|
||||
]
|
||||
|
||||
input_tree_spin_alternate = [
|
||||
input_tree_z_alternate = [
|
||||
%Node.MFM.Spin{
|
||||
props: %{keyframes_name: "mfm-spin", direction: "alternate", speed: "1.5s"},
|
||||
props: %{axis: "z", direction: "alternate", speed: "1.5s"},
|
||||
children: [%Node.Text{props: %{text: "🍮"}}]
|
||||
}
|
||||
]
|
||||
|
||||
input_tree_spinx_alternate = [
|
||||
input_tree_x_alternate = [
|
||||
%Node.MFM.Spin{
|
||||
props: %{keyframes_name: "mfm-spinX", direction: "alternate", speed: "1.5s"},
|
||||
props: %{axis: "x", direction: "alternate", speed: "1.5s"},
|
||||
children: [%Node.Text{props: %{text: "🍮"}}]
|
||||
}
|
||||
]
|
||||
|
||||
input_tree_spiny_alternate = [
|
||||
input_tree_y_alternate = [
|
||||
%Node.MFM.Spin{
|
||||
props: %{keyframes_name: "mfm-spinY", direction: "alternate", speed: "1.5s"},
|
||||
props: %{axis: "y", direction: "alternate", speed: "1.5s"},
|
||||
children: [%Node.Text{props: %{text: "🍮"}}]
|
||||
}
|
||||
]
|
||||
|
||||
input_tree_spin_normal = [
|
||||
input_tree_z_normal = [
|
||||
%Node.MFM.Spin{
|
||||
props: %{keyframes_name: "mfm-spin", direction: "normal", speed: "1.5s"},
|
||||
props: %{axis: "z", direction: "normal", speed: "1.5s"},
|
||||
children: [%Node.Text{props: %{text: "🍮"}}]
|
||||
}
|
||||
]
|
||||
|
||||
input_tree_spinx_normal = [
|
||||
input_tree_x_normal = [
|
||||
%Node.MFM.Spin{
|
||||
props: %{keyframes_name: "mfm-spinX", direction: "normal", speed: "1.5s"},
|
||||
props: %{axis: "x", direction: "normal", speed: "1.5s"},
|
||||
children: [%Node.Text{props: %{text: "🍮"}}]
|
||||
}
|
||||
]
|
||||
|
||||
input_tree_spiny_normal = [
|
||||
input_tree_y_normal = [
|
||||
%Node.MFM.Spin{
|
||||
props: %{keyframes_name: "mfm-spinY", direction: "normal", speed: "1.5s"},
|
||||
props: %{axis: "y", direction: "normal", speed: "1.5s"},
|
||||
children: [%Node.Text{props: %{text: "🍮"}}]
|
||||
}
|
||||
]
|
||||
|
||||
expected_tree_spin_reverse =
|
||||
expected_tree_z_left =
|
||||
~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite reverse none running mfm-spin;">🍮</span><style>@keyframes mfm-spin { 0% { transform:rotate(0) } to { transform:rotate(360deg) }}</style>]
|
||||
|
||||
expected_tree_spinx_reverse =
|
||||
expected_tree_x_left =
|
||||
~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite reverse none running mfm-spinX;">🍮</span><style>@keyframes mfm-spinX { 0% { transform:perspective(128px) rotateX(0) } to { transform:perspective(128px) rotateX(360deg) }}</style>]
|
||||
|
||||
expected_tree_spiny_reverse =
|
||||
expected_tree_y_left =
|
||||
~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite reverse none running mfm-spinY;">🍮</span><style>@keyframes mfm-spinY { 0% { transform:perspective(128px) rotateY(0) } to { transform:perspective(128px) rotateY(360deg) }}</style>]
|
||||
|
||||
expected_tree_spin_alternate =
|
||||
expected_tree_z_alternate =
|
||||
~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite alternate none running mfm-spin;">🍮</span><style>@keyframes mfm-spin { 0% { transform:rotate(0) } to { transform:rotate(360deg) }}</style>]
|
||||
|
||||
expected_tree_spinx_alternate =
|
||||
expected_tree_x_alternate =
|
||||
~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite alternate none running mfm-spinX;">🍮</span><style>@keyframes mfm-spinX { 0% { transform:perspective(128px) rotateX(0) } to { transform:perspective(128px) rotateX(360deg) }}</style>]
|
||||
|
||||
expected_tree_spiny_alternate =
|
||||
expected_tree_y_alternate =
|
||||
~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite alternate none running mfm-spinY;">🍮</span><style>@keyframes mfm-spinY { 0% { transform:perspective(128px) rotateY(0) } to { transform:perspective(128px) rotateY(360deg) }}</style>]
|
||||
|
||||
expected_tree_spin_normal =
|
||||
expected_tree_z_normal =
|
||||
~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite normal none running mfm-spin;">🍮</span><style>@keyframes mfm-spin { 0% { transform:rotate(0) } to { transform:rotate(360deg) }}</style>]
|
||||
|
||||
expected_tree_spinx_normal =
|
||||
expected_tree_x_normal =
|
||||
~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite normal none running mfm-spinX;">🍮</span><style>@keyframes mfm-spinX { 0% { transform:perspective(128px) rotateX(0) } to { transform:perspective(128px) rotateX(360deg) }}</style>]
|
||||
|
||||
expected_tree_spiny_normal =
|
||||
expected_tree_y_normal =
|
||||
~s[<span style="display: inline-block; animation: 1.5s linear 0s infinite normal none running mfm-spinY;">🍮</span><style>@keyframes mfm-spinY { 0% { transform:perspective(128px) rotateY(0) } to { transform:perspective(128px) rotateY(360deg) }}</style>]
|
||||
|
||||
assert Encoder.to_html(input_tree_spin_reverse) == expected_tree_spin_reverse
|
||||
assert Encoder.to_html(input_tree_spinx_reverse) == expected_tree_spinx_reverse
|
||||
assert Encoder.to_html(input_tree_spiny_reverse) == expected_tree_spiny_reverse
|
||||
assert Encoder.to_html(input_tree_z_left) == expected_tree_z_left
|
||||
assert Encoder.to_html(input_tree_x_left) == expected_tree_x_left
|
||||
assert Encoder.to_html(input_tree_y_left) == expected_tree_y_left
|
||||
|
||||
assert Encoder.to_html(input_tree_spin_alternate) == expected_tree_spin_alternate
|
||||
assert Encoder.to_html(input_tree_spinx_alternate) == expected_tree_spinx_alternate
|
||||
assert Encoder.to_html(input_tree_spiny_alternate) == expected_tree_spiny_alternate
|
||||
assert Encoder.to_html(input_tree_z_alternate) == expected_tree_z_alternate
|
||||
assert Encoder.to_html(input_tree_x_alternate) == expected_tree_x_alternate
|
||||
assert Encoder.to_html(input_tree_y_alternate) == expected_tree_y_alternate
|
||||
|
||||
assert Encoder.to_html(input_tree_spin_normal) == expected_tree_spin_normal
|
||||
assert Encoder.to_html(input_tree_spinx_normal) == expected_tree_spinx_normal
|
||||
assert Encoder.to_html(input_tree_spiny_normal) == expected_tree_spiny_normal
|
||||
assert Encoder.to_html(input_tree_z_normal) == expected_tree_z_normal
|
||||
assert Encoder.to_html(input_tree_x_normal) == expected_tree_x_normal
|
||||
assert Encoder.to_html(input_tree_y_normal) == expected_tree_y_normal
|
||||
end
|
||||
|
||||
test "it handles shake" do
|
||||
|
@ -395,7 +395,7 @@ defmodule MfmParser.EncoderTest do
|
|||
children: [
|
||||
%MfmParser.Node.MFM.Spin{
|
||||
children: [%MfmParser.Node.Text{props: %{text: "pain"}}],
|
||||
props: %{direction: "normal", keyframes_name: "mfm-spin", speed: "1s"}
|
||||
props: %{direction: "normal", axis: "z", speed: "1s"}
|
||||
},
|
||||
%MfmParser.Node.Text{props: %{text: " "}},
|
||||
%MfmParser.Node.MFM.Rainbow{
|
||||
|
|
|
@ -244,7 +244,7 @@ defmodule MfmParser.ParserTest do
|
|||
output_default = [
|
||||
%MfmParser.Node.MFM.Spin{
|
||||
props: %{
|
||||
keyframes_name: "mfm-spin",
|
||||
axis: "z",
|
||||
direction: "normal",
|
||||
speed: "1.5s"
|
||||
},
|
||||
|
@ -257,8 +257,8 @@ defmodule MfmParser.ParserTest do
|
|||
output_left = [
|
||||
%MfmParser.Node.MFM.Spin{
|
||||
props: %{
|
||||
keyframes_name: "mfm-spin",
|
||||
direction: "reverse",
|
||||
axis: "z",
|
||||
direction: "left",
|
||||
speed: "1.5s"
|
||||
},
|
||||
children: []
|
||||
|
@ -270,7 +270,7 @@ defmodule MfmParser.ParserTest do
|
|||
output_alternate = [
|
||||
%MfmParser.Node.MFM.Spin{
|
||||
props: %{
|
||||
keyframes_name: "mfm-spin",
|
||||
axis: "z",
|
||||
direction: "alternate",
|
||||
speed: "1.5s"
|
||||
},
|
||||
|
@ -283,7 +283,7 @@ defmodule MfmParser.ParserTest do
|
|||
output_x = [
|
||||
%MfmParser.Node.MFM.Spin{
|
||||
props: %{
|
||||
keyframes_name: "mfm-spinX",
|
||||
axis: "x",
|
||||
direction: "normal",
|
||||
speed: "1.5s"
|
||||
},
|
||||
|
@ -296,8 +296,8 @@ defmodule MfmParser.ParserTest do
|
|||
output_x_left = [
|
||||
%MfmParser.Node.MFM.Spin{
|
||||
props: %{
|
||||
keyframes_name: "mfm-spinX",
|
||||
direction: "reverse",
|
||||
axis: "x",
|
||||
direction: "left",
|
||||
speed: "1.5s"
|
||||
},
|
||||
children: []
|
||||
|
@ -309,7 +309,7 @@ defmodule MfmParser.ParserTest do
|
|||
output_x_alternate = [
|
||||
%MfmParser.Node.MFM.Spin{
|
||||
props: %{
|
||||
keyframes_name: "mfm-spinX",
|
||||
axis: "x",
|
||||
direction: "alternate",
|
||||
speed: "1.5s"
|
||||
},
|
||||
|
@ -322,7 +322,7 @@ defmodule MfmParser.ParserTest do
|
|||
output_y = [
|
||||
%MfmParser.Node.MFM.Spin{
|
||||
props: %{
|
||||
keyframes_name: "mfm-spinY",
|
||||
axis: "y",
|
||||
direction: "normal",
|
||||
speed: "1.5s"
|
||||
},
|
||||
|
@ -335,8 +335,8 @@ defmodule MfmParser.ParserTest do
|
|||
output_y_left = [
|
||||
%MfmParser.Node.MFM.Spin{
|
||||
props: %{
|
||||
keyframes_name: "mfm-spinY",
|
||||
direction: "reverse",
|
||||
axis: "y",
|
||||
direction: "left",
|
||||
speed: "1.5s"
|
||||
},
|
||||
children: []
|
||||
|
@ -348,7 +348,7 @@ defmodule MfmParser.ParserTest do
|
|||
output_y_alternate = [
|
||||
%MfmParser.Node.MFM.Spin{
|
||||
props: %{
|
||||
keyframes_name: "mfm-spinY",
|
||||
axis: "y",
|
||||
direction: "alternate",
|
||||
speed: "1.5s"
|
||||
},
|
||||
|
@ -361,7 +361,7 @@ defmodule MfmParser.ParserTest do
|
|||
output_speed = [
|
||||
%MfmParser.Node.MFM.Spin{
|
||||
props: %{
|
||||
keyframes_name: "mfm-spin",
|
||||
axis: "z",
|
||||
direction: "normal",
|
||||
speed: "20s"
|
||||
},
|
||||
|
@ -544,7 +544,7 @@ defmodule MfmParser.ParserTest do
|
|||
children: [
|
||||
%MfmParser.Node.MFM.Spin{
|
||||
children: [%MfmParser.Node.Text{props: %{text: "chocolatine"}}],
|
||||
props: %{direction: "normal", keyframes_name: "mfm-spin", speed: "1.5s"}
|
||||
props: %{direction: "normal", axis: "z", speed: "1.5s"}
|
||||
}
|
||||
],
|
||||
props: %{speed: "0.5s"}
|
||||
|
@ -568,7 +568,7 @@ defmodule MfmParser.ParserTest do
|
|||
children: [
|
||||
%MfmParser.Node.MFM.Spin{
|
||||
children: [%MfmParser.Node.Text{props: %{text: "pain"}}],
|
||||
props: %{direction: "normal", keyframes_name: "mfm-spin", speed: "1.5s"}
|
||||
props: %{direction: "normal", axis: "z", speed: "1.5s"}
|
||||
},
|
||||
%MfmParser.Node.Text{props: %{text: " "}},
|
||||
%MfmParser.Node.MFM.Rainbow{
|
||||
|
|
Loading…
Reference in a new issue