-----------------------------------------------------------------------------
{-# LANGUAGE RecordWildCards   #-}
{-# LANGUAGE OverloadedStrings #-}
-----------------------------------------------------------------------------
-- |
-- Module      :  Miso.Native.Element
-- Copyright   :  (C) 2016-2026 David M. Johnson
-- License     :  BSD3-style (see the file LICENSE)
-- Maintainer  :  David M. Johnson <code@dmj.io>
-- Stability   :  experimental
-- Portability :  non-portable
----------------------------------------------------------------------------
module Miso.Native.Element
  ( -- ** Smart constructor for lynx elements
    lynx_
  , lynxDirect_
    -- ** Page
  , page_
    -- ** View
  , view_
    -- ** Scroll View
  , scrollView_
    -- ** Image
  , image_
    -- ** List
  , list_
  , listItem_
    -- * Text
  , text_
    -- * Frame
  , frame_
  ) where
-----------------------------------------------------------------------------
import           Miso.JSON (toJSON)
import           Miso.Native.Element.List (ListOptions(..))
import           Miso.Property (textProp, prop)
import           Miso.String (MisoString)
import           Miso.Types (View, Attribute, node, nodeDirectEvents, Namespace(HTML))
-----------------------------------------------------------------------------
-- | Smart constructor for constructing a built-in lynx element.
--
lynx_ :: MisoString -> [Attribute model action] -> [View context model action] -> View context model action
lynx_ :: forall model action context.
MisoString
-> [Attribute model action]
-> [View context model action]
-> View context model action
lynx_ = Namespace
-> MisoString
-> [Attribute model action]
-> [View context model action]
-> View context model action
forall model action context.
Namespace
-> MisoString
-> [Attribute model action]
-> [View context model action]
-> View context model action
node Namespace
HTML
-----------------------------------------------------------------------------
-- | Like 'lynx_', but declares the events this element dispatches /directly/ on
-- itself (Lynx component events like @input@\/@scroll@ that don't bubble to the
-- delegated mount listener). The runtime binds an element-level listener for
-- any of these events the element actually handles.
--
lynxDirect_
  :: [MisoString]
  -- ^ Events dispatched directly on this element
  -> MisoString
  -- ^ Tag name
  -> [Attribute model action]
  -> [View context model action]
  -> View context model action
lynxDirect_ :: forall model action context.
[MisoString]
-> MisoString
-> [Attribute model action]
-> [View context model action]
-> View context model action
lynxDirect_ [MisoString]
direct MisoString
tag [Attribute model action]
attrs [View context model action]
kids = Namespace
-> MisoString
-> [Attribute model action]
-> [MisoString]
-> [View context model action]
-> View context model action
forall model action context.
Namespace
-> MisoString
-> [Attribute model action]
-> [MisoString]
-> [View context model action]
-> View context model action
nodeDirectEvents Namespace
HTML MisoString
tag [Attribute model action]
attrs [MisoString]
direct [View context model action]
kids
-----------------------------------------------------------------------------
-- | <https://lynxjs.org/api/elements/built-in/page.html>
--
-- <page> element is the root node, only one <page> element is allowed per page.
-- You can omit the explicit <page> wrapper, as the frontend framework will
-- generate the root node by default.
--
-- You shouldn't use this, we already generate the 'page' for you when
-- the initial 'renderPage' callback is invoked by PrimJS, and there can
-- only be one 'page' present at at time. We include it here for completeness,
-- and because 'page' functionality might change in the future.
--
page_ :: [Attribute model action] -> [View context model action] -> View context model action
page_ :: forall model action context.
[Attribute model action]
-> [View context model action] -> View context model action
page_ = MisoString
-> [Attribute model action]
-> [View context model action]
-> View context model action
forall model action context.
MisoString
-> [Attribute model action]
-> [View context model action]
-> View context model action
lynx_ MisoString
"page"
-----------------------------------------------------------------------------
-- | <https://lynxjs.org/api/elements/built-in/scroll-view.html>
--
-- Basic element, used to contain other elements. <view> is the foundation
-- for all other elements; its attributes, events, and methods can be
-- used in other elements.
--
scrollView_ :: [Attribute model action] -> [View context model action] -> View context model action
scrollView_ :: forall model action context.
[Attribute model action]
-> [View context model action] -> View context model action
scrollView_ = [MisoString]
-> MisoString
-> [Attribute model action]
-> [View context model action]
-> View context model action
forall model action context.
[MisoString]
-> MisoString
-> [Attribute model action]
-> [View context model action]
-> View context model action
lynxDirect_
  [ MisoString
"scroll", MisoString
"scrolltoupper", MisoString
"scrolltolower", MisoString
"scrollend", MisoString
"contentsizechanged" ]
  MisoString
"scroll-view"
-----------------------------------------------------------------------------
-- | <https://lynxjs.org/api/elements/built-in/view.html>
--
-- Basic element, used to contain other elements. <view> is the foundation
-- for all other elements; its attributes, events, and methods can be
-- used in other elements.
--
view_ :: [Attribute model action] -> [View context model action] -> View context model action
view_ :: forall model action context.
[Attribute model action]
-> [View context model action] -> View context model action
view_ = MisoString
-> [Attribute model action]
-> [View context model action]
-> View context model action
forall model action context.
MisoString
-> [Attribute model action]
-> [View context model action]
-> View context model action
lynx_ MisoString
"view"
-----------------------------------------------------------------------------
-- | <https://lynxjs.org/api/elements/built-in/image.html>
--
-- Used to display different types of images, including web images,
-- static resources, and locally stored images.
--
-- <https://lynxjs.org/api/elements/built-in/image.html>
--
-- 'image_' does not support children.
--
-- <https://lynxjs.org/api/elements/built-in/image.html#required-src>
--
-- *Required*
--
-- 'image_' takes a required *src* parameter (as 'MisoString') by default.
--
-- The supported image formats are: *png*, *jpg*, *jpeg*, *bmp*, *gif*, and *webp*.
--
-- > image_ "https://url.com/image.png" []
--
image_ :: MisoString -> [Attribute model action] -> View context model action
image_ :: forall model action context.
MisoString -> [Attribute model action] -> View context model action
image_ MisoString
url [Attribute model action]
attrs = [MisoString]
-> MisoString
-> [Attribute model action]
-> [View context model action]
-> View context model action
forall model action context.
[MisoString]
-> MisoString
-> [Attribute model action]
-> [View context model action]
-> View context model action
lynxDirect_
  [ MisoString
"load", MisoString
"error", MisoString
"startplay", MisoString
"currentloopcomplete", MisoString
"finalloopcomplete" ]
  MisoString
"image" (MisoString -> MisoString -> Attribute model action
forall model action.
MisoString -> MisoString -> Attribute model action
textProp MisoString
"src" MisoString
url Attribute model action
-> [Attribute model action] -> [Attribute model action]
forall a. a -> [a] -> [a]
: [Attribute model action]
attrs) []
-----------------------------------------------------------------------------
-- | <https://lynxjs.org/api/elements/built-in/list.html>
--
listItem_ :: [Attribute model action] -> [View context model action] -> View context model action
listItem_ :: forall model action context.
[Attribute model action]
-> [View context model action] -> View context model action
listItem_ = MisoString
-> [Attribute model action]
-> [View context model action]
-> View context model action
forall model action context.
MisoString
-> [Attribute model action]
-> [View context model action]
-> View context model action
lynx_ MisoString
"list-item"
-----------------------------------------------------------------------------
-- | <https://lynxjs.org/api/elements/built-in/list.html>
--
list_ :: ListOptions -> [Attribute model action] -> [View context model action] -> View context model action
list_ :: forall model action context.
ListOptions
-> [Attribute model action]
-> [View context model action]
-> View context model action
list_ ListOptions {Int
ListType
ScrollOrientation
listType_ :: ListType
spanCount_ :: Int
scrollOrientation_ :: ScrollOrientation
listType_ :: ListOptions -> ListType
scrollOrientation_ :: ListOptions -> ScrollOrientation
spanCount_ :: ListOptions -> Int
..} [Attribute model action]
attrs = [MisoString]
-> MisoString
-> [Attribute model action]
-> [View context model action]
-> View context model action
forall model action context.
[MisoString]
-> MisoString
-> [Attribute model action]
-> [View context model action]
-> View context model action
lynxDirect_
  [ MisoString
"scroll", MisoString
"scrolltoupper", MisoString
"scrolltolower", MisoString
"scrollstatechange", MisoString
"layoutcomplete", MisoString
"snap" ]
  MisoString
"list" ([Attribute model action]
forall {model} {action}. [Attribute model action]
defaults [Attribute model action]
-> [Attribute model action] -> [Attribute model action]
forall a. Semigroup a => a -> a -> a
<> [Attribute model action]
attrs)
  where
    defaults :: [Attribute model action]
defaults =
      [ MisoString -> Value -> Attribute model action
forall a model action.
ToJSON a =>
MisoString -> a -> Attribute model action
prop MisoString
"list-type" (ListType -> Value
forall a. ToJSON a => a -> Value
toJSON ListType
listType_)
      , MisoString -> Value -> Attribute model action
forall a model action.
ToJSON a =>
MisoString -> a -> Attribute model action
prop MisoString
"span-count" (Int -> Value
forall a. ToJSON a => a -> Value
toJSON Int
spanCount_)
      , MisoString -> Value -> Attribute model action
forall a model action.
ToJSON a =>
MisoString -> a -> Attribute model action
prop MisoString
"scroll-orientation" (ScrollOrientation -> Value
forall a. ToJSON a => a -> Value
toJSON ScrollOrientation
scrollOrientation_)
      ]
-----------------------------------------------------------------------------
-- | <https://lynxjs.org/api/elements/built-in/text.html>
--
-- <text> is a built-in component in Lynx used to display text content.
-- It supports specifying text style, binding click event callbacks, and can
-- nest <text>, <image>, and <view> components to achieve relatively complex
-- text and image content presentation.
--
text_ :: [Attribute model action] -> [View context model action] -> View context model action
text_ :: forall model action context.
[Attribute model action]
-> [View context model action] -> View context model action
text_ = [MisoString]
-> MisoString
-> [Attribute model action]
-> [View context model action]
-> View context model action
forall model action context.
[MisoString]
-> MisoString
-> [Attribute model action]
-> [View context model action]
-> View context model action
lynxDirect_ [ MisoString
"layout", MisoString
"selectionchange" ] MisoString
"text"
-----------------------------------------------------------------------------
-- | <https://lynxjs.org/api/elements/built-in/frame.html>
--
-- A page element similar to HTML's \<iframe\>, which can embed a Lynx page
-- into the current page.
--
frame_ :: [Attribute model action] -> View context model action
frame_ :: forall model action context.
[Attribute model action] -> View context model action
frame_ [Attribute model action]
attrs = [MisoString]
-> MisoString
-> [Attribute model action]
-> [View context model action]
-> View context model action
forall model action context.
[MisoString]
-> MisoString
-> [Attribute model action]
-> [View context model action]
-> View context model action
lynxDirect_ [ MisoString
"load", MisoString
"loadmetrics" ] MisoString
"frame" [Attribute model action]
attrs []
-----------------------------------------------------------------------------