diff --git a/elm.json b/elm.json index 6e32cfb..6a749fb 100644 --- a/elm.json +++ b/elm.json @@ -3,7 +3,7 @@ "name": "carwow/elm-slider", "summary": "Elm slider implementation", "license": "BSD-3-Clause", - "version": "7.0.2", + "version": "8.0.0", "exposed-modules": [ "DoubleSlider", "SingleSlider" diff --git a/src/DoubleSlider.elm b/src/DoubleSlider.elm index fb5aaf1..c8d37db 100644 --- a/src/DoubleSlider.elm +++ b/src/DoubleSlider.elm @@ -24,7 +24,6 @@ module DoubleSlider exposing -} import Browser -import Browser.Events import DOM exposing (boundingClientRect) import Html exposing (Html, div, input) import Html.Attributes exposing (..) @@ -40,12 +39,6 @@ type alias Model = , step : Int , lowValue : Float , highValue : Float - , dragging : Bool - , draggedValueType : SliderValueType - , rangeStartValue : Float - , thumbStartingPosition : Float - , dragStartPosition : Float - , thumbParentWidth : Float , overlapThreshold : Float , minFormatter : Float -> String , maxFormatter : Float -> String @@ -63,9 +56,6 @@ type SliderValueType -} type Msg = TrackClicked SliderValueType String - | DragStart SliderValueType Int Float Float - | DragAt Int - | DragEnd | RangeChanged SliderValueType String Bool @@ -79,12 +69,6 @@ defaultModel = , lowValue = 0 , highValue = 100 , overlapThreshold = 1 - , dragging = False - , draggedValueType = None - , rangeStartValue = 0 - , thumbStartingPosition = 0 - , thumbParentWidth = 0 - , dragStartPosition = 0 , minFormatter = String.fromFloat , maxFormatter = String.fromFloat , currentRangeFormatter = defaultCurrentRangeFormatter @@ -145,101 +129,6 @@ update message model = in ( newModel, Cmd.none, True ) - DragStart valueType positionX offsetLeft offsetWidth -> - let - newModel = - { model - | dragging = True - , draggedValueType = valueType - , rangeStartValue = - case valueType of - LowValue -> - model.lowValue - model.min - - HighValue -> - model.highValue - model.min - - None -> - 0 - , thumbStartingPosition = offsetLeft + 16 - , thumbParentWidth = offsetWidth - , dragStartPosition = toFloat positionX - } - in - ( newModel, Cmd.none, False ) - - DragAt positionX -> - let - rangeStart = - case model.draggedValueType of - HighValue -> - model.rangeStartValue - - LowValue -> - model.max - model.rangeStartValue - model.min - - None -> - 0 - - offset = - case model.draggedValueType of - HighValue -> - model.thumbStartingPosition - - LowValue -> - model.thumbParentWidth - model.thumbStartingPosition - - None -> - 0 - - ratio = - rangeStart / offset - - delta = - toFloat positionX - model.dragStartPosition - - newValue = - case model.draggedValueType of - HighValue -> - model.min + snapValue ((offset + delta) * ratio) model.step - - LowValue -> - model.min + snapValue ((model.thumbParentWidth - offset + delta) * ratio) model.step - - None -> - 0 - - newModel = - if model.draggedValueType == LowValue && newValue + (toFloat model.step * model.overlapThreshold) > model.highValue then - model - - else if model.draggedValueType == HighValue && newValue - (toFloat model.step * model.overlapThreshold) < model.lowValue then - model - - else if newValue >= model.min && newValue <= model.max then - case model.draggedValueType of - LowValue -> - { model | lowValue = newValue } - - HighValue -> - { model | highValue = newValue } - - None -> - model - - else - model - in - ( newModel, Cmd.none, False ) - - DragEnd -> - ( { model - | dragging = False - } - , Cmd.none - , True - ) - snapValue : Float -> Int -> Float snapValue value step = @@ -320,16 +209,6 @@ onInsideRangeClick model = Json.Decode.map2 TrackClicked valueTypeDecoder valueDecoder -onThumbMouseDown : SliderValueType -> Json.Decode.Decoder Msg -onThumbMouseDown valueType = - Json.Decode.map4 - DragStart - (Json.Decode.succeed valueType) - pageXDecoder - (Json.Decode.at [ "target", "offsetLeft" ] Json.Decode.float) - (Json.Decode.at [ "target", "offsetParent", "offsetWidth" ] Json.Decode.float) - - onRangeChange : SliderValueType -> Bool -> Json.Decode.Decoder Msg onRangeChange valueType shouldFetchModels = Json.Decode.map3 @@ -339,10 +218,10 @@ onRangeChange valueType shouldFetchModels = (Json.Decode.succeed shouldFetchModels) -{-| Displays the slider using two inputs +{-| Displays the slider -} -fallbackView : Model -> Html Msg -fallbackView model = +view : Model -> Html Msg +view model = let lowValue = round model.lowValue @@ -408,6 +287,13 @@ fallbackView model = ] +{-| DEPRECATED: Displays the slider +-} +fallbackView : Model -> Html Msg +fallbackView model = + view model + + {-| Renders the current values using the formatter -} formatCurrentRange : Model -> String @@ -419,101 +305,8 @@ formatCurrentRange model = model.currentRangeFormatter model.lowValue model.highValue model.min model.max -{-| Displays the slider --} -view : Model -> Html Msg -view model = - let - lowValue = - round model.lowValue - - highValue = - round model.highValue - - progressRatio = - 100 / (model.max - model.min) - - lowThumbStartingPosition = - String.fromFloat ((model.lowValue - model.min) * progressRatio) ++ "%" - - highThumbStartingPosition = - String.fromFloat ((model.highValue - model.min) * progressRatio) ++ "%" - - progressLow = - String.fromFloat ((model.lowValue - model.min) * progressRatio) ++ "%" - - progressHigh = - String.fromFloat ((model.max - model.highValue) * progressRatio) ++ "%" - - mouseDownEvent t = - onThumbMouseDown t - |> Json.Decode.map (\msg -> { message = msg, stopPropagation = True, preventDefault = True }) - |> Html.Events.custom "mousedown" - in - div [] - [ div - [ Html.Attributes.class "input-range-container" ] - [ div - [ Html.Attributes.class "slider-thumb slider-thumb--first" - , Html.Attributes.style "left" lowThumbStartingPosition - , Html.Attributes.style "float" "left" - , mouseDownEvent LowValue - ] - [] - , div - [ Html.Attributes.class "slider-thumb slider-thumb--second" - , Html.Attributes.style "left" highThumbStartingPosition - , Html.Attributes.style "float" "left" - , mouseDownEvent HighValue - ] - [] - , div - [ Html.Attributes.class "input-range__track" - , Html.Events.on "click" (onOutsideRangeClick model) - ] - [] - , div - [ Html.Attributes.class "input-range__progress" - , Html.Attributes.style "left" progressLow - , Html.Attributes.style "right" progressHigh - , Html.Events.on "click" (onInsideRangeClick model) - ] - [] - ] - , div - [ Html.Attributes.class "input-range-labels-container" ] - [ div [ Html.Attributes.class "input-range-label" ] [ Html.text (model.minFormatter model.min) ] - , div - [ Html.Attributes.class "input-range-label input-range-label--current-value" ] - [ Html.text (formatCurrentRange model) ] - , div [ Html.Attributes.class "input-range-label" ] [ Html.text (model.maxFormatter model.max) ] - ] - ] - - {-| Returns the subscriptions necessary to run -} subscriptions : Model -> Sub Msg subscriptions model = - if model.dragging then - let - moveDecoder : Json.Decode.Decoder Msg - moveDecoder = - Json.Decode.map DragAt pageXDecoder - - upDecoder : Json.Decode.Decoder Msg - upDecoder = - Json.Decode.succeed DragEnd - in - Sub.batch - [ Browser.Events.onMouseMove moveDecoder - , Browser.Events.onMouseUp upDecoder - ] - - else - Sub.none - - -pageXDecoder : Json.Decode.Decoder Int -pageXDecoder = - Json.Decode.field "pageX" Json.Decode.int + Sub.none