Created
May 7, 2020 08:09
-
-
Save andreapavoni/44ce56c218c5d8082a3fed2a0632241c to your computer and use it in GitHub Desktop.
Slug widget made with Elm
This file contains hidden or 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
module Slug exposing (..) | |
import Html exposing (Html, Attribute, beginnerProgram, text, div, input) | |
import Html.Attributes exposing (..) | |
import Html.Events exposing (onInput) | |
import String exposing (toLower) | |
import Regex exposing (replace, regex) | |
-- MAIN | |
main = | |
beginnerProgram { model = "", view = view, update = update } | |
-- MODEL | |
type alias Model = | |
String | |
-- UPDATE | |
type Msg = NewContent String | |
update : Msg -> Model -> Model | |
update (NewContent content) oldContent = | |
content | |
sluggify : Model -> Model | |
sluggify content = | |
replace Regex.All (regex "[^\\w-]+") (\_ -> "-") (toLower content) | |
-- VIEW | |
view content = | |
div [] | |
[ input [ placeholder "Text to reverse", onInput NewContent ] [] | |
, div [] [ text (sluggify content) ] | |
] |
This file contains hidden or 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
export default function(selector) { | |
let elem = document.querySelector(selector) | |
if (!!elem) { | |
const Elm = require('../elm/Slug') | |
Elm.Slug.embed(elem) | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment