feat: add scrolling
This commit is contained in:
parent
4b85ed5fb5
commit
d0e4539f9c
5 changed files with 85 additions and 22 deletions
8
elm.json
8
elm.json
|
@ -6,7 +6,9 @@
|
|||
"elm-explorations/webgl": "1.1.3",
|
||||
"elm/browser": "1.0.2",
|
||||
"elm/core": "1.0.5",
|
||||
"elm/html": "1.0.0",
|
||||
"elm/http": "2.0.0",
|
||||
"elm/json": "1.1.3",
|
||||
"elm/time": "1.0.0",
|
||||
"ianmackenzie/elm-3d-camera": "3.1.0",
|
||||
"ianmackenzie/elm-3d-scene": "1.0.2",
|
||||
|
@ -14,14 +16,13 @@
|
|||
"ianmackenzie/elm-triangular-mesh": "1.1.0",
|
||||
"ianmackenzie/elm-units": "2.10.0",
|
||||
"mdgriffith/elm-ui": "1.1.8",
|
||||
"rl-king/elm-scroll-to": "1.1.2",
|
||||
"w0rm/elm-obj-file": "1.2.1"
|
||||
},
|
||||
"indirect": {
|
||||
"elm-explorations/linear-algebra": "1.0.3",
|
||||
"elm/bytes": "1.0.8",
|
||||
"elm/file": "1.0.5",
|
||||
"elm/html": "1.0.0",
|
||||
"elm/json": "1.1.3",
|
||||
"elm/random": "1.0.0",
|
||||
"elm/url": "1.0.0",
|
||||
"elm/virtual-dom": "1.0.3",
|
||||
|
@ -29,7 +30,8 @@
|
|||
"ianmackenzie/elm-float-extra": "1.1.0",
|
||||
"ianmackenzie/elm-geometry-linear-algebra-interop": "2.0.2",
|
||||
"ianmackenzie/elm-interval": "3.1.0",
|
||||
"ianmackenzie/elm-units-interval": "3.2.0"
|
||||
"ianmackenzie/elm-units-interval": "3.2.0",
|
||||
"tad-lispy/springs": "1.0.5"
|
||||
}
|
||||
},
|
||||
"elm-version": "0.19.1",
|
||||
|
|
|
@ -88,11 +88,11 @@
|
|||
"nixpkgs": "nixpkgs"
|
||||
},
|
||||
"locked": {
|
||||
"lastModified": 1738459463,
|
||||
"narHash": "sha256-QBYK7boMjAAXFySEK9jEpQAhhe5vXkC9UI2fvQipadk=",
|
||||
"lastModified": 1739064336,
|
||||
"narHash": "sha256-LTZznyurm9WWchG3uPH+8Sf5hkzZyHoa9FvDW0cLk0M=",
|
||||
"owner": "jeslie0",
|
||||
"repo": "mkElmDerivation",
|
||||
"rev": "e86ad254296f6861dedfc3cc303dd3b530535fd6",
|
||||
"rev": "2d5f1acc6da7e6d5deeff5c9f47729a671ab8f9a",
|
||||
"type": "github"
|
||||
},
|
||||
"original": {
|
||||
|
|
82
src/Main.elm
82
src/Main.elm
|
@ -13,7 +13,9 @@ import Element.Background as Background
|
|||
import Element.Border as Border
|
||||
import Element.Font as Font
|
||||
import Element.Input exposing (button)
|
||||
import Html.Attributes
|
||||
import Http
|
||||
import Json.Decode as Decode
|
||||
import Length
|
||||
import Obj.Decode
|
||||
import Pixels
|
||||
|
@ -21,6 +23,7 @@ import Point3d exposing (Point3d)
|
|||
import Scene3d exposing (Entity)
|
||||
import Scene3d.Material as Material
|
||||
import Scene3d.Mesh as Mesh
|
||||
import Scroll exposing (scrollTo)
|
||||
import Simple.Animation as Animation exposing (Animation)
|
||||
import Simple.Animation.Animated as Animated
|
||||
import Simple.Animation.Property as P
|
||||
|
@ -69,7 +72,7 @@ main =
|
|||
|
||||
|
||||
type alias Model =
|
||||
{ w : Int, h : Int, mesh : Maybe Object3d, textures : Maybe (Material.Textured Obj.Decode.ObjCoordinates), angle : Float }
|
||||
{ w : Int, h : Int, last : String, mesh : Maybe Object3d, textures : Maybe (Material.Textured Obj.Decode.ObjCoordinates), angle : Float }
|
||||
|
||||
|
||||
type alias Flags =
|
||||
|
@ -82,7 +85,7 @@ init flags =
|
|||
( width, height ) =
|
||||
flags
|
||||
in
|
||||
( { w = width, h = height, mesh = Nothing, textures = Nothing, angle = 0 }, Cmd.batch [ getMesh, getTexture ] )
|
||||
( { w = width, h = height, last = "", mesh = Nothing, textures = Nothing, angle = 0 }, Cmd.batch [ getMesh, getTexture ] )
|
||||
|
||||
|
||||
type alias Object3d =
|
||||
|
@ -95,6 +98,8 @@ type Msg
|
|||
| GotTexture (Result WebGL.Texture.Error (Material.Texture Color.Color))
|
||||
| Rotate Time.Posix
|
||||
| Copy String
|
||||
| Key String
|
||||
| Scroll String
|
||||
|
||||
|
||||
modulo : Float -> Float -> Float
|
||||
|
@ -148,11 +153,23 @@ update msg model =
|
|||
Copy text ->
|
||||
( model, copyToClipboard text )
|
||||
|
||||
Key key ->
|
||||
( { model | last = key }, Cmd.none )
|
||||
|
||||
Scroll loc ->
|
||||
( model, scrollTo loc )
|
||||
|
||||
|
||||
keyDecoder : Decode.Decoder String
|
||||
keyDecoder =
|
||||
Decode.field "key" Decode.string
|
||||
|
||||
|
||||
subscribe : Model -> Sub Msg
|
||||
subscribe _ =
|
||||
Sub.batch
|
||||
[ Events.onResize Resize
|
||||
, Events.onKeyPress (Decode.map Key keyDecoder)
|
||||
, Time.every (1000 / 30) Rotate
|
||||
]
|
||||
|
||||
|
@ -271,7 +288,7 @@ pageText model =
|
|||
, width (vw2px model 50)
|
||||
, height (vh2px model 100)
|
||||
, paddingEach
|
||||
{ top = vh2pt model 50 - 96
|
||||
{ top = vh2pt model 50 - 96 * 2
|
||||
, bottom = 0
|
||||
, left = vw2pt model 10
|
||||
, right = 0
|
||||
|
@ -290,6 +307,11 @@ inlineLink disp addr =
|
|||
}
|
||||
|
||||
|
||||
id : String -> Element.Attribute msg
|
||||
id =
|
||||
Html.Attributes.id >> Element.htmlAttribute
|
||||
|
||||
|
||||
view : Model -> Browser.Document Msg
|
||||
view model =
|
||||
{ title = "MacGregor House"
|
||||
|
@ -302,6 +324,7 @@ view model =
|
|||
[ width fill
|
||||
, height fill
|
||||
, spacing (vh2pt model -100)
|
||||
, id "zero"
|
||||
]
|
||||
[ el
|
||||
[ width fill
|
||||
|
@ -342,7 +365,8 @@ view model =
|
|||
, row
|
||||
[ spacing 20
|
||||
]
|
||||
[ linkBtn "Events" "https://calendar.google.com/calendar/embed?src=c_c9fb13003264d5becb74cf9ba42a087d8a4a180d927441994458a07ac146eb88%40group.calendar.google.com&ctz=America%2FNew_York"
|
||||
[ btn "↓" (Scroll "one")
|
||||
, linkBtn "Events" "https://calendar.google.com/calendar/embed?src=c_c9fb13003264d5becb74cf9ba42a087d8a4a180d927441994458a07ac146eb88%40group.calendar.google.com&ctz=America%2FNew_York"
|
||||
, linkBtn "Space" "https://forms.gle/KxFAG65TQuPxdYak8"
|
||||
, btn "iCal" (Copy "https://calendar.google.com/calendar/ical/c_c9fb13003264d5becb74cf9ba42a087d8a4a180d927441994458a07ac146eb88%40group.calendar.google.com/public/basic.ics")
|
||||
]
|
||||
|
@ -363,13 +387,19 @@ view model =
|
|||
(view3D model)
|
||||
]
|
||||
, column
|
||||
(page model)
|
||||
(page model ++ [ id "one" ])
|
||||
[ image (fullImage model)
|
||||
{ src = "../assets/img/tall.jpg"
|
||||
, description = "the imposing macgregor superstructure stands tall in defiance of strong winds"
|
||||
}
|
||||
, column (pageText model)
|
||||
[ paragraph subheading [ text "The tallest undergraduate dormitory." ]
|
||||
[ row [ spacing 10 ]
|
||||
[ btn "↑" (Scroll "zero")
|
||||
, btn "↓" (Scroll "two")
|
||||
]
|
||||
, paragraph
|
||||
subheading
|
||||
[ text "The tallest undergraduate dormitory." ]
|
||||
, paragraph bodyText
|
||||
[ text "Enrico Fermi once said, \"Before I came here I was confused about this subject. Having listened to your lecture, I am still confused, but on a higher level.\" "
|
||||
, inlineLink "Pietro Belluschi" "https://listart.mit.edu/art-artists/macgregor-house-1970"
|
||||
|
@ -378,39 +408,51 @@ view model =
|
|||
]
|
||||
]
|
||||
, column
|
||||
(page model)
|
||||
(page model ++ [ id "two" ])
|
||||
[ image (fullImage model)
|
||||
{ src = "../assets/img/view.jpg"
|
||||
, description = "the macgregor pov just hits different"
|
||||
}
|
||||
, column (pageText model)
|
||||
[ paragraph subheading [ text "Stunning vistas are just the beginning." ]
|
||||
[ row [ spacing 10 ]
|
||||
[ btn "↑" (Scroll "one")
|
||||
, btn "↓" (Scroll "three")
|
||||
]
|
||||
, paragraph subheading [ text "Stunning vistas are just the beginning." ]
|
||||
, paragraph bodyText
|
||||
[ text "A view from MacGregor is like looking down on Earth from the stars. MacGregor's prime waterfront real estate offers breathtaking views of the Charles and the Boston skyline beyond."
|
||||
]
|
||||
]
|
||||
]
|
||||
, column
|
||||
(page model)
|
||||
(page model ++ [ id "three" ])
|
||||
[ image (fullImage model)
|
||||
{ src = "../assets/img/free.jpg"
|
||||
, description = "macgregor is often seen as the gateway to new worlds, especially briggs field"
|
||||
}
|
||||
, column (pageText model)
|
||||
[ paragraph subheading [ text "Free as in freedom." ]
|
||||
[ row [ spacing 10 ]
|
||||
[ btn "↑" (Scroll "two")
|
||||
, btn "↓" (Scroll "four")
|
||||
]
|
||||
, paragraph subheading [ text "Free as in freedom." ]
|
||||
, paragraph bodyText
|
||||
[ text "This website's source code and infrastructure, the ability to cook, your choice of living community and room assignments—they operate in the public interest of all MacGregorites. You won't get this freedom at many other undergraduate dormitories at MIT."
|
||||
]
|
||||
]
|
||||
]
|
||||
, column
|
||||
(page model)
|
||||
(page model ++ [ id "four" ])
|
||||
[ image (fullImage model)
|
||||
{ src = "../assets/img/location.jpg"
|
||||
, description = "the bright lights of the macgregor high rise shine down upon the glossy snow-covered surface of briggs field"
|
||||
}
|
||||
, column (pageText model)
|
||||
[ paragraph subheading [ text "Nestled between Kendall and Cambridgeport." ]
|
||||
[ row [ spacing 10 ]
|
||||
[ btn "↑" (Scroll "three")
|
||||
, btn "↓" (Scroll "five")
|
||||
]
|
||||
, paragraph subheading [ text "Nestled between Kendall and Cambridgeport." ]
|
||||
, paragraph bodyText
|
||||
[ text "Between "
|
||||
, inlineLink "the innovative spirit of Kendall" "https://kendallsquare.org/kendalls-history-orientation/"
|
||||
|
@ -419,26 +461,34 @@ view model =
|
|||
]
|
||||
]
|
||||
, column
|
||||
(page model)
|
||||
(page model ++ [ id "five" ])
|
||||
[ image (fullImage model)
|
||||
{ src = "../assets/img/brick.jpg"
|
||||
, description = "multicolored bricks shine in the limelight of macgregorian festivities"
|
||||
}
|
||||
, column (pageText model)
|
||||
[ paragraph subheading [ text "We like the ", el [ Font.bold, Font.size 96 ] (text "brick"), text "." ]
|
||||
[ row [ spacing 10 ]
|
||||
[ btn "↑" (Scroll "four")
|
||||
, btn "↓" (Scroll "six")
|
||||
]
|
||||
, paragraph subheading [ text "We like the ", el [ Font.bold, Font.size 96 ] (text "brick"), text "." ]
|
||||
, paragraph bodyText
|
||||
[ text "The bricks are everywhere—by far the most recognizable feature of MacGregor. You'll find them protecting the building's exterior from harsh Bostonian winters, lining its fabled corridors, and in your room, as much an architectural statement as they are a testament to the people of MacGregor."
|
||||
]
|
||||
]
|
||||
]
|
||||
, column
|
||||
(page model)
|
||||
(page model ++ [ id "six" ])
|
||||
[ image (fullImage model)
|
||||
{ src = "../assets/img/belong.jpg"
|
||||
, description = "the cultural murals of macgregor breathe life into its ancient pedestrian thoroughfares"
|
||||
}
|
||||
, column (pageText model)
|
||||
[ paragraph subheading [ text "You belong here." ]
|
||||
[ row [ spacing 10 ]
|
||||
[ btn "↑" (Scroll "five")
|
||||
, btn "Top" (Scroll "zero")
|
||||
]
|
||||
, paragraph subheading [ text "You belong here." ]
|
||||
, paragraph bodyText
|
||||
[ text "MacGregor's greatness is the greatness of its people. Living in MacGregor inevitably connects you to its people and its culture—one of the most diverse, unique, and historic of any MIT dorm—spanning nine entries, countless murals and traditions, and a couple hundred current residents."
|
||||
]
|
||||
|
|
4
src/Scroll.elm
Normal file
4
src/Scroll.elm
Normal file
|
@ -0,0 +1,4 @@
|
|||
port module Scroll exposing (scrollTo)
|
||||
|
||||
|
||||
port scrollTo : String -> Cmd msg
|
|
@ -27,6 +27,13 @@
|
|||
document.execCommand("copy");
|
||||
document.body.removeChild(textArea);
|
||||
});
|
||||
|
||||
app.ports.scrollTo.subscribe((id) => {
|
||||
let element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in a new issue