This repository has been archived by the owner on Jul 19, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #278 from unisonweb/download-modal-2
Add DownloadModal with click to copy
- Loading branch information
Showing
14 changed files
with
312 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
module UI.CopyField exposing (..) | ||
|
||
import Html exposing (Html, button, div, input, node, text) | ||
import Html.Attributes exposing (attribute, class, readonly, type_, value) | ||
import UI | ||
import UI.Icon as Icon | ||
|
||
|
||
type alias CopyField msg = | ||
{ prefix : Maybe String | ||
, toCopy : String | ||
, onCopy : String -> msg | ||
} | ||
|
||
|
||
copyField : (String -> msg) -> String -> CopyField msg | ||
copyField onCopy toCopy = | ||
{ prefix = Nothing, toCopy = toCopy, onCopy = onCopy } | ||
|
||
|
||
withPrefix : String -> CopyField msg -> CopyField msg | ||
withPrefix prefix field = | ||
{ field | prefix = Just prefix } | ||
|
||
|
||
withToCopy : String -> CopyField msg -> CopyField msg | ||
withToCopy toCopy field = | ||
{ field | toCopy = toCopy } | ||
|
||
|
||
view : CopyField msg -> Html msg | ||
view field = | ||
let | ||
prefix = | ||
field.prefix | ||
|> Maybe.map (\p -> div [ class "copy-field-prefix" ] [ text p ]) | ||
|> Maybe.withDefault UI.nothing | ||
in | ||
div [ class "copy-field" ] | ||
[ div [ class "copy-field-field" ] | ||
[ prefix | ||
, div | ||
[ class "copy-field-input" ] | ||
[ input | ||
[ type_ "text" | ||
, class "copy-field-to-copy" | ||
, value field.toCopy | ||
, readonly True | ||
] | ||
[] | ||
] | ||
] | ||
, copyButton field.toCopy | ||
] | ||
|
||
|
||
|
||
-- HELPERS -------------------------------------------------------------------- | ||
|
||
|
||
{-| We're not using UI.Button here since a click handler is added from | ||
the webcomponent in JS land. | ||
-} | ||
copyButton : String -> Html msg | ||
copyButton toCopy = | ||
node "copy-on-click" | ||
[ attribute "text" toCopy ] | ||
[ button [ class "button contained default" ] [ Icon.view Icon.clipboard ] | ||
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
// <copy-on-click text="text-to-copy"> | ||
// clickable content | ||
// </copy-on-click> | ||
// | ||
// Use from Elm with an Icon: | ||
// node "copy-on-click" [ ] [ UI.Icon.view UI.Icon.clipboard ] | ||
class CopyOnClick extends HTMLElement { | ||
constructor() { | ||
super(); | ||
} | ||
|
||
connectedCallback() { | ||
this.addEventListener("click", () => { | ||
const text = this.getAttribute("text"); | ||
|
||
// writeText returns a promise with success/failure that we should | ||
// probably do something with... | ||
navigator.clipboard.writeText(text); | ||
}); | ||
} | ||
|
||
static get observedAttributes() { | ||
return ["text"]; | ||
} | ||
} | ||
|
||
customElements.define("copy-on-click", CopyOnClick); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.