makerspace site

main.elm

import Window
import String (concat, contains, toLower, any)
import Graphics.Input (Input, input, dropDown, customButton)
import Graphics.Input.Field as Field
import List (filter, map, take, intersperse, any)

 
main = lift4 scene Window.dimensions yrIdeas.signal yrEmail.signal click.signal

-- MODEL

title = "Make Wheeling"

info = [markdown|
     
We live in Wheeling, WV. We've gone through rough times, but 
we're tough, creative, and smart. We have the ability to 
improve our own lives and make our city a better place to live. 
Unfortunately, many of us lack the resources such as tools, 
materials, space, or training to accomplish everything we want to do.
     
A **maker space** is a place for people to come together and
share equipment and expertise in order to create amazing things.
     
Wheeling's maker space would cost about $30 a month for a 
membership and all members would be required to volunteer at 
least 3 hours a month.
      
Would you be interested in joining?      
     
      |]

ideas : [String]
ideas = [ "friendly", "beautiful", "smart", "creative", "ours", "colorful"
          , "fun", "strong", "innovative", "safe", "different", "exciting"
          , "unique", "exceptional", "prosperous", "awesome", "weird"
          , "cool", "grow", "green", "diverse", "stylish", "impressive"
          , "artsy", "eco-friendly", "jobs", "better", "famous", "rock"
          , "high-tech", "great", "pretty", "a maker space"]

contactPrompt = "Great! Enter your e-mail to hear more!"

-- INPUT 

-- fields 
yrIdeas : Input Field.Content
yrIdeas = input Field.noContent
yrEmail : Input Field.Content
yrEmail = input Field.noContent

data Button a = Go a | 
               Submit a | 
               Yes | No | None

click : Input (Button String)
click = input None 

{--
port redirect : Signal String
port redirect =
    keepWhen sendable "" <| sampleOn submit.signal <|
    lift3 url first.signal last.signal email.signal --}

-- UPDATES
----------
 
listIdeas : Int -> String -> [Element]
listIdeas h str = let l = if str == "" then []
                                       else filter (contains <| str) ideas
               in if | (l == []) || (str == "") -> [spacer 30 h]
                     | otherwise -> map  (\x -> link "#makerspace" <| 
                             centered <| style (smallText dkRed) <| toText x) l

display : Button String -> String  -> Element -> Element             
display clickedButton reqButton element = 
    if | (btnString clickedButton) == reqButton -> element
       | otherwise -> spacer 10 10 
       
btnString : Button String -> String
btnString button = case button of 
                      (Go string) -> "Go"
                      (Submit string) -> "Submit"
                      Yes -> "Yes"
                      otherwise -> "No"
       
consButton : Button -> String -> Button
consButton button a = button

-- VIEW
-----------

-- colors
dkGreen  = hsl (degrees 168) 0.5 0.25
mdGreen  = hsl (degrees 168) 0.9 0.25
ltGreen  = hsl (degrees 168) 0.9 0.8
ltrGreen = hsl (degrees 168) 0.9 0.9
dkRed    = hsl (degrees 348) 0.75 0.25
mdRed    = hsl (degrees 348) 0.75 0.5

-- text
bigText color = { typeface = [ "Helvetica", "sans" ]
                , height   = Just 26
                , color    = color
                , bold     = False
                , italic   = False
                , line     = Nothing
                }
  
smallText color = { typeface = [ "Helvetica", "sans" ]
                  , height   = Just 16
                  , color    = color
                  , bold     = False
                  , italic   = False
                  , line     = Nothing
                  }
          
goButton : Button String -> String -> Element
goButton typeButton label =
    customButton click.handle typeButton
            (buttonGraphic mdRed label)
            (buttonGraphic mdRed label)
            (buttonGraphic mdRed label)
            
buttonGraphic : Color -> String -> Element
buttonGraphic color label = collage 50 30 [ 
            filled mdRed <| rect 50 30,
            toForm <| centered <| style (smallText white) <| toText label
            ]

-- squeeze to fit
squeeze = width 450 
decreaseWidth : Int -> Int
decreaseWidth w = let x = floor (toFloat w * 0.8) in
                  if x < 500 then 500 else x
margin w = floor <| toFloat (w - decreaseWidth w) / 2 

--field formatting
largeField = { padding   = { left = 2 , right = 2, top = 2, bottom = 2 }
             , outline   = { color = mdGreen, width = {left = 0, right = 0, top = 0, bottom = 2}, radius = 0 }
             , highlight = { color = blue, width = 0 }
             , style     =  bigText mdGreen
             }

-- display ideas that match the input
displayIdeas : Int -> Int -> String -> Element
displayIdeas w h str = container w h middle <| flow right <|
                   intersperse (spacer 10 10) <| take 5 <| 
                   listIdeas h str
          

-- the boxes
titleBox : Field.Content -> Int -> Element
titleBox fieldContent w =
   let fieldsWidth x = (floor (toFloat x/2) - 5) in
   color ltGreen <| flow right
       [ color ltGreen <| 
             container (fieldsWidth w) 36 midRight <| 
             leftAligned <| style (bigText mdGreen) <| 
             toText title
       , spacer 10 10
       , flow right [ container (fieldsWidth <| fieldsWidth w) 42 midTop <| size  ((fieldsWidth <| fieldsWidth w)-10) 38 <| color ltGreen <|
                              Field.field largeField yrIdeas.handle id "what?" fieldContent
                        , spacer 10 10
                        , container (fieldsWidth <| fieldsWidth w) 36 midLeft<| goButton (Go fieldContent.string) "Go!"
                        ]        
       ] 
   `above`
   displayIdeas w 36 fieldContent.string

infoBox w = 
    flow down [ tag "#makerspace" (spacer 10 10)
              , container w (heightOf <| squeeze info) middle <| 
                  squeeze info
              , spacer 10 10
              , container w 50 middle <| 
                     flow right [ link ("#contact") <| goButton Yes "Yes"
                                , spacer 10 50
                                , goButton No "No" ]
              , spacer 10 10
                ]
                
                
contactBox w emailContent = 
      color ltGreen <| container w 100 middle <| 
      flow down [ centered <| style (smallText dkGreen) <| toText contactPrompt
                ,  flow right [ container 225 48 midLeft <| 
                                Field.field Field.defaultStyle yrEmail.handle id 
                                    "Type here!" emailContent
                              , spacer 10 10
                              , container 50 46 midRight <| link ("#thanks") <| goButton (Submit "email") "OK" ]
                ]
                
thanksBox w emailContent = 
     color ltGreen <| container w 100 middle <| centered <| 
     style (smallText dkGreen) <| toText "Thanks!"
                
mainBox content email width height button = 
  let w = decreaseWidth width in
  flow down [ color ltrGreen <| spacer 50 20 -- top margin 
            , color ltGreen <| spacer w 20 -- padding
            , titleBox content w
            , spacer 30 20
            , color ltGreen <| infoBox w
            , spacer 30 20
            , display button "Yes" <| (tag "#contact" <| contactBox w email)
            , display button "Submit" <| (tag "#thanks" <| thanksBox w email)
              ]

scene (w,h) ideas email button = color ltrGreen <| width w <|
    flow right [ spacer (margin w) 10 -- left margin
               , mainBox ideas email w h button]