Version 3.1.0 - added getDragstartEvent for javascript interop

norpan · Nov 17, 2018 · eae919d · eae919d
1 parent 0c0740b
commit eae919d
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 12 deletions.
diff --git a/elm.json b/elm.json
@@ -3,7 +3,7 @@
     "name": "norpan/elm-html5-drag-drop",
     "summary": "This library handles dragging and dropping using the HTML5 API",
     "license": "BSD-3-Clause",
-    "version": "3.0.3",
+    "version": "3.1.0",
     "exposed-modules": [
         "Html5.DragDrop"
     ],

diff --git a/Example.elm → example/Example.elm b/Example.elm → example/Example.elm
@@ -1,9 +1,13 @@
-module Example exposing (..)
+port module Example exposing (Model, Msg(..), Position(..), divStyle, init, isNothing, main, update, view, viewDiv)
 
 import Browser
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html5.DragDrop as DragDrop
+import Json.Decode exposing (Value)
+
+
+port dragstart : Value -> Cmd msg
 
 
 type Position
@@ -22,10 +26,12 @@ type Msg
     = DragDropMsg (DragDrop.Msg Int Position)
 
 
-init =
-    { data = { count = 0, position = Up }
-    , dragDrop = DragDrop.init
-    }
+init () =
+    ( { data = { count = 0, position = Up }
+      , dragDrop = DragDrop.init
+      }
+    , Cmd.none
+    )
 
 
 update msg model =
@@ -35,7 +41,7 @@ update msg model =
                 ( model_, result ) =
                     DragDrop.update msg_ model.dragDrop
             in
-            { model
+            ( { model
                 | dragDrop = model_
                 , data =
                     case result of
@@ -44,7 +50,15 @@ update msg model =
 
                         Just ( count, position, _ ) ->
                             { count = count + 1, position = position }
-            }
+              }
+            , DragDrop.getDragstartEvent msg_
+                |> Maybe.map (.event >> dragstart)
+                |> Maybe.withDefault Cmd.none
+            )
+
+
+subscriptions model =
+    Sub.none
 
 
 divStyle =
@@ -89,8 +103,10 @@ viewDiv position data dropId droppablePosition =
                     Just pos ->
                         if pos.y < pos.height // 2 then
                             [ style "background-color" "cyan" ]
+
                         else
                             [ style "background-color" "magenta" ]
+
             else
                 []
     in
@@ -99,6 +115,7 @@ viewDiv position data dropId droppablePosition =
             ++ highlight
             ++ (if data.position /= position then
                     DragDrop.droppable DragDropMsg position
+
                 else
                     []
                )
@@ -107,14 +124,16 @@ viewDiv position data dropId droppablePosition =
             [ img (src "https://upload.wikimedia.org/wikipedia/commons/f/f3/Elm_logo.svg" :: width 100 :: DragDrop.draggable DragDropMsg data.count) []
             , text (String.fromInt data.count)
             ]
+
          else
             []
         )
 
 
 main =
-    Browser.sandbox
+    Browser.element
         { init = init
         , update = update
+        , subscriptions = subscriptions
         , view = view
         }
diff --git a/example/elm.json b/example/elm.json
@@ -0,0 +1,24 @@
+{
+    "type": "application",
+    "source-directories": [
+        "src", "../src"
+    ],
+    "elm-version": "0.19.0",
+    "dependencies": {
+        "direct": {
+            "elm/browser": "1.0.1",
+            "elm/core": "1.0.2",
+            "elm/html": "1.0.0",
+            "elm/json": "1.1.2"
+        },
+        "indirect": {
+            "elm/time": "1.0.0",
+            "elm/url": "1.0.0",
+            "elm/virtual-dom": "1.0.2"
+        }
+    },
+    "test-dependencies": {
+        "direct": {},
+        "indirect": {}
+    }
+}
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Main</title>
+  <link rel="stylesheet" href="whatever-you-want.css">
+  <script src="main.js"></script>
+</head>
+
+<body>
+  <div id="elm"></div>
+  <script>
+  var app = Elm.Example.init({
+    node: document.getElementById('elm')
+  });
+  app.ports.dragstart.subscribe(function (event) {
+    event.dataTransfer.setData('text', '');
+  });
+  </script>
+</body>
+</html>
diff --git a/src/Html5/DragDrop.elm b/src/Html5/DragDrop.elm
@@ -2,6 +2,7 @@ module Html5.DragDrop exposing
     ( Model, init, Msg, Position, update, updateSticky
     , draggable, droppable
     , getDragId, getDropId, getDroppablePosition
+    , getDragstartEvent
     )
 
 {-| This library handles dragging and dropping using the API
@@ -24,6 +25,10 @@ was made from another instance.
 To use on mobile, you can include the following polyfill:
 <https://github.com/Bernardo-Castilho/dragdroptouch>
 
+Note that drag and drop _does not_ work out of the box in Firefox.
+See the example folder in github for an example that uses ports
+to do `event.dataTransfer.setData('text', '')`. to fix this.
+
 
 # Model and update
 
@@ -39,6 +44,11 @@ To use on mobile, you can include the following polyfill:
 
 @docs getDragId, getDropId, getDroppablePosition
 
+
+# Javascript interop
+
+@docs getDragstartEvent
+
 -}
 
 import Html exposing (..)
@@ -100,7 +110,7 @@ This should be placed inside your application's messages like this:
 
 -}
 type Msg dragId dropId
-    = DragStart dragId
+    = DragStart dragId Json.Value
     | DragEnd
     | DragEnter dropId
     | DragLeave dropId
@@ -158,7 +168,7 @@ updateCommon :
     -> ( Model dragId dropId, Maybe ( dragId, dropId, Position ) )
 updateCommon sticky msg model =
     case ( msg, model, sticky ) of
-        ( DragStart dragId, _, _ ) ->
+        ( DragStart dragId _, _, _ ) ->
             ( Dragging dragId, Nothing )
 
         ( DragEnd, _, _ ) ->
@@ -215,7 +225,7 @@ It should be used like this:
 draggable : (Msg dragId dropId -> msg) -> dragId -> List (Attribute msg)
 draggable wrap drag =
     [ attribute "draggable" "true"
-    , onWithOptions "dragstart" { stopPropagation = True, preventDefault = False } <| Json.succeed <| wrap <| DragStart drag
+    , onWithOptions "dragstart" { stopPropagation = True, preventDefault = False } <| Json.map (wrap << DragStart drag) Json.value
     , onWithOptions "dragend" { stopPropagation = True, preventDefault = False } <| Json.succeed <| wrap <| DragEnd
     ]
 
@@ -296,6 +306,24 @@ getDroppablePosition model =
             Nothing
 
 
+{-| Get the `dragstart` event `Value` so that you can pass it to a port.
+This is useful to fix Firefox behaviour. See the example directory in github
+for how you can do that.
+
+You can also use the event to do other things from Javascript,
+such as setting the drag image.
+
+-}
+getDragstartEvent : Msg dragId dropId -> Maybe { dragId : dragId, event : Json.Value }
+getDragstartEvent msg =
+    case msg of
+        DragStart dragId event ->
+            Just { dragId = dragId, event = event }
+
+        _ ->
+            Nothing
+
+
 {-| polyfill for onWithOptions
 -}
 onWithOptions :