feat: add scrolling

This commit is contained in:
Ananth Venkatesh 2025-02-10 01:56:10 -05:00
parent 4b85ed5fb5
commit d0e4539f9c
Signed by: ananthv
GPG key ID: 4BB578E748CFE4FF
5 changed files with 85 additions and 22 deletions

View file

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

View file

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

View file

@ -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 assignmentsthey 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 everywhereby 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 cultureone of the most diverse, unique, and historic of any MIT dormspanning nine entries, countless murals and traditions, and a couple hundred current residents."
]

4
src/Scroll.elm Normal file
View file

@ -0,0 +1,4 @@
port module Scroll exposing (scrollTo)
port scrollTo : String -> Cmd msg

View file

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