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:
Ilja 2022-07-25 09:29:24 +02:00
parent ecd3f750cb
commit a8dd3dd719
4 changed files with 71 additions and 71 deletions

View file

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

View file

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

View file

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

View file

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