Creative Commons license chooser widget in Elm

.gitignore

elm-stuff

elm-package.json

{
    "version": "1.0.0",
    "summary": "helpful summary of your project, less than 80 characters",
    "repository": "https://github.com/user/project.git",
    "license": "BSD3",
    "source-directories": [
        "."
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "4.0.0 <= v < 5.0.0",
        "elm-lang/html": "1.0.0 <= v < 2.0.0"
    },
    "elm-version": "0.17.0 <= v < 0.18.0"
}

license-selector-pattern.css

.license-selector label {
  padding: 0 1em 0 5px;
}

license-selector-pattern.js

import { LicenseSelector } from './LicenseSelector';
import Registry from 'pat-registry';

Registry.register({
  name: 'license-selector',
  trigger: '.pat-license-selector',

  init ($el) {
    // Get the form input element and hide it
    const el = $el.hide().get(0);

    // Create container for the widget
    const container = document.createElement('div');
    el.parentNode.insertBefore(container, el);
    container.className = 'license-selector';

    // Wire up the widget
    const widget = LicenseSelector.embed(container);
    widget.ports.outbound.subscribe((value) => $el.val(value));
    setTimeout(() => widget.ports.inbound.send($el.val()));
  }
});

LicenseSelector.elm

port module LicenseSelector exposing (..)

import Html exposing (Html, button, div, img, input, label, p, text)
import Html.App as Html
import Html.Attributes exposing (..)
import Html.Events exposing (onCheck)
import String


main =
  Html.program
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }


-- MODEL

type alias Model =
  { derivates : Derivates
  , commercial : Commercial
  }

type Derivates
  = AllowDerivates
  | NoDerivates
  | DerivatesSharedAlike

type Commercial
  = AllowCommercialUse
  | NoCommercialUse

init : (Model, Cmd Msg)
init =
  (Model AllowDerivates AllowCommercialUse, Cmd.none)


-- UPDATE

type Msg
  = SelectDerivate Derivates
  | SelectCommercial Commercial
  | ReadInbound (String)

port outbound : String -> Cmd msg

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    SelectDerivate d   ->
      let model' = { model | derivates = d }
      in (model', outbound <| serialize model')
    SelectCommercial c ->
      let model' = { model | commercial = c }
      in (model', outbound <| serialize model')
    ReadInbound serialized ->
      (deserialize serialized, Cmd.none)

deserialize : String -> Model
deserialize serialized =
  Model (
    if String.contains "-nd" serialized then NoDerivates
    else if String.contains "-sa" serialized then DerivatesSharedAlike
    else AllowDerivates
  ) (
    if String.contains "-nc" serialized then NoCommercialUse
    else AllowCommercialUse
  )

serialize : Model -> String
serialize model =
  "by" ++ (
    case model.commercial of
      AllowCommercialUse -> ""
      NoCommercialUse -> "-nc") ++ (
    case model.derivates of
      AllowDerivates -> ""
      NoDerivates -> "-nd"
      DerivatesSharedAlike -> "-sa")

-- SUBSCRIPTIONS

port inbound : (String -> msg) -> Sub msg

subscriptions : Model -> Sub Msg
subscriptions model =
  inbound ReadInbound


-- VIEW

apply : List (a -> b) -> a -> List b
apply fs a = List.map (\f -> f a) fs


selector : a -> b -> String -> a -> Html.Html b
selector value ev message selected =
  label []
    [ input [ type' "radio"
            , checked (selected == value)
            , onCheck (\_ -> ev)
            ]
            []
    , text message
    ]


derivateSelectors : List (Derivates -> Html.Html Msg)
derivateSelectors =
  [ selector AllowDerivates (SelectDerivate AllowDerivates) "Yes"
  , selector NoDerivates (SelectDerivate NoDerivates) "No"
  , selector DerivatesSharedAlike (SelectDerivate DerivatesSharedAlike) "Yes, as long as others share alike"
  ]


commercialSelectors : List (Commercial -> Html.Html Msg)
commercialSelectors =
  [ selector AllowCommercialUse (SelectCommercial AllowCommercialUse) "Yes"
  , selector NoCommercialUse (SelectCommercial NoCommercialUse) "No"
  ]


logo : Model -> Html.Html a
logo model =
  let
    license = "by" ++ (
      case model.commercial of
        AllowCommercialUse -> ""
        NoCommercialUse    -> "-nc") ++ (
      case model.derivates of
        AllowDerivates       -> ""
        NoDerivates          -> "-nd"
        DerivatesSharedAlike -> "-sa")
  in
    img [ src ("https://i.creativecommons.org/l/"
          ++ license ++ "/4.0/88x31.png") ] []


view : Model -> Html Msg
view model =
  div []
    [ p [] [ text "Allow adaptations of your work to be shared?" ]
    , div [] (apply derivateSelectors model.derivates)
    , p [] [ text "Allow commercial uses of your work?" ]
    , div [] (apply commercialSelectors model.commercial)
    , p [] [ logo model ]
    ]

screenshot.png