module Pages.Donate exposing (Model, Msg, page) -- import Html.Attributes as H import Config.Data.Identity exposing (pageNames) import Config.Data.ImageFolders as M exposing ( ImageFolder(..) , imagePathMaker ) import Config.Helpers.Cards.Inner.StrengthBar exposing ( barMaker , barPadding ) import Config.Helpers.Cards.Inner.Text exposing ( detailBodyMaker , detailFormat , detailTitleMaker , listItem , listMaker ) import Config.Helpers.Cards.Inner.ToolTip exposing (tooltip) import Config.Helpers.Cards.Outer.Helpers exposing (cardMaker) import Config.Helpers.Cards.Outer.Types as C exposing (Cardable(..)) import Config.Helpers.Headers.Helpers exposing (headerMaker) import Config.Helpers.Headers.Records exposing (donateHeader) import Config.Helpers.Headers.Types as R exposing (Header) import Config.Helpers.Response exposing ( pageList , topLevelContainer ) import Config.Helpers.Viewport exposing (resetViewport) import Config.Pages.Donate.Records.Cardano exposing (donateCardano) import Config.Pages.Donate.Records.KoFi exposing (donateKoFi) import Config.Pages.Donate.Records.LiberaPay exposing (donateLiberaPay) import Config.Pages.Donate.Records.Merch exposing (donateMerch) import Config.Pages.Donate.Records.Patreon exposing (donatePatreon) import Config.Pages.Donate.Records.PayPal exposing (donatePayPal) import Config.Pages.Donate.Records.Stripe exposing (donateStripe) import Config.Pages.Donate.Records.YouTube exposing (donateYouTube) import Config.Pages.Donate.Types exposing ( Cons , Donate , Features , Pros ) import Config.Style.Colour.Helpers as T exposing ( ThemeColor(..) , getThemeColor ) import Config.Style.Images exposing ( ElementSize(..) , imageSquareMaker ) import Effect exposing (Effect) import Element as E exposing ( Column , Device , DeviceClass(..) , Element , Orientation(..) , alignLeft , alignTop , centerX , centerY , clip , column , el , fill , padding , paddingEach , paragraph , px , row , spacing , text ) import Element.Background as B exposing (color) import Element.Border as D exposing ( color , widthEach ) import Element.Font as F exposing ( bold , center , color ) import Layouts import Page exposing (Page) import Route exposing (Route) import Shared exposing (Model) import Task import View exposing (View) page : Shared.Model -> Route () -> Page Model Msg page shared route = Page.new { init = init , update = update , subscriptions = subscriptions , view = view shared } |> Page.withLayout toLayout toLayout : Model -> Layouts.Layout Msg toLayout model = Layouts.Navbar {} -- INIT type alias Model = {} init : () -> ( Model, Effect Msg ) init () = ( {} , Effect.map (\_ -> NoOp) (Effect.sendCmd resetViewport) ) -- UPDATE type Msg = NoOp update : Msg -> Model -> ( Model, Effect Msg ) update msg model = case msg of NoOp -> ( model , Effect.none ) -- SUBSCRIPTIONS subscriptions : Model -> Sub Msg subscriptions model = Sub.none -- VIEW view : Shared.Model -> Model -> View Msg view shared model = { title = pageNames.pageDonate , attributes = [] , element = donateContainer shared } donateContainer : Shared.Model -> Element msg donateContainer shared = topLevelContainer (donateList shared) donateList : Shared.Model -> Element msg donateList shared = column (case ( shared.device.class, shared.device.orientation ) of _ -> pageList shared.device ) <| List.concat [ [ headerMaker (R.Donate donateHeader) ] , List.map (\donate -> cardMaker shared.device (C.Donate donate) (contentList shared donate) ) [ donateLiberaPay , donateStripe , donatePatreon , donateCardano , donateKoFi , donateYouTube , donateMerch ] ] contentList : Shared.Model -> Donate -> List (Element msg) contentList shared donate = let image : ElementSize -> Element msg image size = el [ alignLeft , alignTop , paddingEach { top = 0 , right = 10 , bottom = 0 , left = 0 } ] <| imageSquareMaker shared.device (imagePathMaker M.Donate donate.donateImage) True size in [ detailFormat row [ image Big , detailFormat column [ feeMaker donate , preferenceMaker shared donate , tableMaker donate shared.device ] ] , proConMaker donate ] feeMaker : Donate -> Element msg feeMaker donate = detailFormat row [ detailTitleMaker TextLightOrange "Fees:" , detailBodyMaker TextLightGrey (text donate.donateFees) ] proConMaker : Donate -> Element msg proConMaker donate = detailFormat column [ detailTitleMaker TextLightOrange "Pros:" , listMaker makePro donate.donatePros , detailTitleMaker TextLightOrange "Cons:" , listMaker makeCon donate.donateCons ] makePro : Pros -> Element msg makePro pro = listItem TextLightGrey pro.pro makeCon : Cons -> Element msg makeCon con = listItem TextLightGrey con.con preferenceMaker : Shared.Model -> Donate -> Element msg preferenceMaker shared donate = detailFormat row [ el (case ( shared.device.class, shared.device.orientation ) of ( Phone, Portrait ) -> [] ( Tablet, Portrait ) -> [] _ -> if not shared.isNavbarExpanded then [ tooltip "This represents how strongly I prefer a given platform relative to other platforms." True ] else [] ) <| detailTitleMaker TextLightOrange "Preference:" , barPadding [ barMaker shared getPreferenceTooltip donate.donatePreference ] ] getPreferenceTooltip : Int -> String getPreferenceTooltip num = case num of 0 -> "Disdain this platform." 1 -> "Very negative towards this platform." 2 -> "Strongly dislike this platform." 3 -> "Dislike this platform." 4 -> "Somewhat dislike this platform." 5 -> "Neutral, no strong feelings." 6 -> "Somewhat like this platform." 7 -> "Like this platform." 8 -> "Strongly like this platform." 9 -> "Very positive towards this platform." 10 -> "Absolutely love this platform!" _ -> "Preference is out of bounds." tableMaker : Donate -> Device -> Element msg tableMaker donate device = el [ E.alignLeft , E.width fill , centerX ] <| E.table ([ spacing 0 , D.rounded 10 , D.width 2 , D.color (getThemeColor TextDarkGrey) , clip ] ++ (case ( device.class, device.orientation ) of ( Phone, Portrait ) -> [ B.color (getThemeColor BackgroundSpreadsheet) ] ( Tablet, Portrait ) -> [ B.color (getThemeColor BackgroundSpreadsheet) ] _ -> [] ) ) { data = donate.donateFeatures , columns = List.map createColumn (case ( device.class, device.orientation ) of ( Phone, Portrait ) -> mobileLabels ( Tablet, Portrait ) -> mobileLabels _ -> desktopLabels ) } desktopLabels : List { label : String, getter : { a | free : b, subscriptions : b, userFriendly : b, anonymous : b, rewardTiers : b } -> b } desktopLabels = [ { label = "Zero Fees" , getter = .free } , { label = "Subscriptions" , getter = .subscriptions } , { label = "User Friendly" , getter = .userFriendly } , { label = "Anonymous" , getter = .anonymous } , { label = "Rewards" , getter = .rewardTiers } ] mobileLabels : List { label : String, getter : { a | free : b, subscriptions : b, userFriendly : b, anonymous : b } -> b } mobileLabels = [ { label = "Free" , getter = .free } , { label = "Subs" , getter = .subscriptions } , { label = "Easy" , getter = .userFriendly } , { label = "Safe" , getter = .anonymous } ] createColumn : { label : String, getter : Features -> Maybe Bool } -> Column Features msg createColumn { label, getter } = { header = el [ F.bold , D.widthEach { bottom = 1 , top = 1 , left = 1 , right = 0 } , D.color (getThemeColor TextDarkGrey) , padding 5 , E.width fill , F.center ] (text label) |> el [ F.color (getThemeColor TextLightOrange) ] , width = fill , view = \feature -> row [ F.color (getThemeColor TextLightOrange) , F.bold , D.widthEach { bottom = 1 , top = 0 , left = 1 , right = 0 } , D.color (getThemeColor TextDarkGrey) , padding 5 , E.height fill ] [ row [ centerX , centerY ] [ paragraph [] [ E.image [ E.width <| px 30 , E.height <| px 30 ] (featureToString (getter feature)) ] ] ] } featureToString : Maybe Bool -> { src : String, description : String } featureToString maybeBool = case maybeBool of Just True -> { src = "donate/checkmark.png", description = "" } Just False -> { src = "donate/ex.png", description = "" } Nothing -> { src = "donate/question.png", description = "" }