NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-11-05 08:34:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

Copy in code for actually applying overlaps

Browse Source
This commit is contained in:
Tessa Kelly 2023-04-05 09:47:11 -06:00
parent 878fd5fa93
commit 21ce625ba7
1 changed files with 102 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
component-catalog-app/Examples/Highlighter.elm
View File

@ -17,6 +17,7 @@ import Example exposing (Example)
import Examples.Colors
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css)
import List.Extra
import Maybe.Extra
import Nri.Ui.Button.V10 as Button
import Nri.Ui.Colors.V1 as Colors
@ -635,21 +636,108 @@ update msg state =
)
OverlappingHighlighterMsg highlighterMsg ->
let
( newHighlighter, effect, Highlighter.Intent intent ) =
Highlighter.update highlighterMsg state.overlappingHighlightsState
in
( { state | overlappingHighlightsState = newHighlighter }
, Cmd.batch
[ Cmd.map OverlappingHighlighterMsg effect
, case intent.listenTo of
Just listenTo ->
highlighterListen listenTo
-- This code is extracted with minimal updates from Nri.Writing.GuidedDrafts.WritingSamples.Highlighters
case Highlighter.update highlighterMsg state.overlappingHighlightsState of
( newHighlighter, effect, intent ) ->
let
clickedCommentId =
Highlighter.selectShortest Highlighter.clickedHighlightable state.overlappingHighlightsState
Nothing ->
Cmd.none
]
)
hoveredCommentId =
Highlighter.selectShortest Highlighter.hoveredHighlightable newHighlighter
maybePreviousMouseDownIndex =
highlighterState.mouseDownIndex
mouseOverIndex =
newHighlighter.mouseOverIndex
withAllCommentIds =
{ newHighlighter
| highlightables =
List.map2
(\newHighlightable oldHighlightable ->
{ newHighlightable | marked = List.Extra.unique (newHighlightable.marked ++ oldHighlightable.marked) }
)
newHighlighter.highlightables
highlighterState.highlightables
}
highlighterState =
state.overlappingHighlightsState
in
-- The Changed action will be triggered on the Highlighter Up event and
-- when there is an actual change in the highlightable elements. Note
-- that when we click an existing highlight, from the point of view of
-- the highlighter, this is just the same as starting a new highlight
-- (instead we want to intercept that click and do something else).
case Highlighter.hasChanged intent of
Highlighter.Changed ->
case ( clickedCommentId, maybePreviousMouseDownIndex, mouseOverIndex ) of
( Just commentId, Just previousMouseDownIndex, Just currentHover ) ->
if previousMouseDownIndex == currentHover then
-- User is clicking an existing highlight without dragging
-- we don't want to use the entire updated highlighter state, since we don't want to remove the focused highlight!
-- However, we do want to ensure that we don't end up in the middle of highlighting, where the user has to click around more to get out of the highlighting state.
( { state
| overlappingHighlightsState =
{ highlighterState
| mouseDownIndex = Nothing
, mouseOverIndex = Nothing
, selectionStartIndex = Nothing
, selectionEndIndex = Nothing
}
}
, Cmd.none
)
else
( { state | overlappingHighlightsState = withAllCommentIds }
, Cmd.batch
[ Cmd.map OverlappingHighlighterMsg effect
, perform intent
]
)
_ ->
( { state | overlappingHighlightsState = withAllCommentIds }
, Cmd.batch
[ Cmd.map OverlappingHighlighterMsg effect
, perform intent
]
)
Highlighter.NotChanged ->
case maybePreviousMouseDownIndex of
Just _ ->
-- User is dragging and highlighting. We don't want to show
-- any hover effect in case the current highlight starts to
-- overlaps with an existing highlight.
( { state | overlappingHighlightsState = withAllCommentIds }
, Cmd.batch
[ Cmd.map OverlappingHighlighterMsg effect
, perform intent
]
)
Nothing ->
-- User is just hovering around the page
( { state | overlappingHighlightsState = withAllCommentIds }
, Cmd.batch
[ Cmd.map OverlappingHighlighterMsg effect
, perform intent
]
)
perform : Highlighter.Intent -> Cmd msg
perform (Highlighter.Intent intent) =
case intent.listenTo of
Just listenTo ->
highlighterListen listenTo
Nothing ->
Cmd.none
sorter : Sorter ()