maxfarseer

module Base64 exposing (Base64ImgUrl, decoderStringToBase64ImgUrl, fromString, toString)

import Json.Decode as JD
import String exposing (startsWith)


type Base64ImgUrl
    = Base64ImgUrl String

maxfarseer

{
  "name": "elm-webinar-2",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "clean": "rm dist/bundle.js",
    "start": "parcel src/index.html",
    "build-prod": "parcel build src/index.html"
  },

maxfarseer

npm install -g parcel-bundler
npm init -y

maxfarseer

-- наш чекбокс (стандартный input type="checkbox")
checkbox : (Bool -> msg) -> Bool -> Html msg
checkbox toMsg isChecked =
  input
    [ type_ "checkbox"
    , checked isChecked
    , onCheck toMsg
    ]
    []
    

maxfarseer

-- было

viewHeader : Model -> Html Msg
viewHeader model =
  ...127 lines
  
viewBody : Model -> Html Msg
viewBody model =
  ...349 lines

maxfarseer

type Model
  = Не_запрашивали
  | В_процессе
  | Получено (Ошибка или Новости)
  
-- в переводе на англ

type Model
  = NotAsked
  | Loading

maxfarseer

initialState = {
  data: [],
  isLoading: false,
  error: null,
}

maxfarseer

<!-- ...  -->
<script src="/elm.js"></script>
<script>
  const errorLogger = error => console.error(`App Error: ${error}`);
  const node = document.querySelector('#app');

  // add flags here
  const flags = {}
  try {
    const app = Elm.Main.init({ node, flags });

maxfarseer

// пример custom web component
// который добавляет на страницу fabric.js (canvas) элемент

class CustomCanvas extends HTMLElement {
  constructor() {
    const self = super();
    self._canvas = null;
    self._ctx = null;
    self._cf = null; // cf = canvas fabric instance
    return self;

maxfarseer

-- Main.elm -> добавляем "port"
port module Main exposing (main)

-- ...

-- добавляем команду
port sendDataToJs : String -> Cmd msg

-- update функция
case msg of