Skip to content

Commit d0424d1

Browse files
yehzhangyehzhang
committed
Initial commit
0 parents  commit d0424d1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+6205
-0
lines changed

‎.gitignore

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/bower_components/
2+
/node_modules/
3+
/.pulp-cache/
4+
/output/
5+
/generated-docs/
6+
/.psc-package/
7+
/.psc*
8+
/.purs*
9+
/.psa*
10+
.psci_modules
11+
.psci
12+
*.sublime-project
13+
*.sublime-workspace
14+
materialize.css

‎.travis.yml

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
language: node_js
2+
node_js: 9
3+
install:
4+
- npm install -g --production bower purescript pulp
5+
script:
6+
- bower install
7+
- pulp test
8+
after_success:
9+
- >-
10+
test $TRAVIS_TAG &&
11+
echo $GITHUB_TOKEN | pulp login &&
12+
echo y | pulp publish --no-push

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2018 Simon Zhang
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+196
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
# purescript-materialize
2+
3+
[![Build](https://img.shields.io/travis/yehzhang/purescript-materialize.svg)](https://travis-ci.com/yehzhang/purescript-materialize)
4+
[![Latest release](https://img.shields.io/github/release/yehzhang/purescript-materialize.svg)](https://github.com/yehzhang/purescript-materialize/releases)
5+
6+
[Materialize](https://materializecss.com/) bindings in PureScript, with a
7+
builtin [purescript-smolder](https://github.com/bodil/purescript-smolder)-style
8+
DSL.
9+
10+
## Overview
11+
12+
### Class DSL
13+
14+
Class DSL is a domain-specific language that makes it easy to markup Materialize
15+
CSS classes.
16+
17+
A statement in Class DSL starts with a subject, followed by required objects
18+
19+
```purescript
20+
import Materialize.Color (Color, background, teal)
21+
22+
color :: Color
23+
color = background teal
24+
```
25+
26+
or optional objects.
27+
28+
```purescript
29+
import Materialize.Buttons (Button, button, floating)
30+
import Materialize.Markup ((~))
31+
import Materialize.Overriden (large)
32+
33+
plainButton :: Button
34+
plainButton = button
35+
36+
largeButton :: Button
37+
largeButton = button ~ large
38+
39+
floatingButton :: Button
40+
floatingButton = button ~ floating
41+
42+
largeFloatingButton :: Button
43+
largeFloatingButton = button ~ large ~ floating
44+
```
45+
46+
Class DSL is meant to be spoken along with Smolder DSL. Here is an example to
47+
describe a complex [Button](https://materializecss.com/buttons.html):
48+
49+
```purescript
50+
import Data.Typelevel.Num (d1)
51+
import Text.Smolder.Markup (Markup, text, (!))
52+
import Text.Smolder.HTML (div)
53+
import Prelude
54+
55+
import Materialize.Buttons (button, floating)
56+
import Materialize.Color (background, teal, lighten)
57+
import Materialize.Markup (classList, (~))
58+
import Materialize.Overriden (large)
59+
import Materialize.Visibility (hide, on)
60+
import Materialize.Waves (waves, light)
61+
62+
63+
viewButton :: forall e. Markup e
64+
viewButton =
65+
div ! classList do
66+
button ~ large ~ floating
67+
background teal ~ lighten d1
68+
waves ~ light
69+
hide ~ on large
70+
$ text "Click me"
71+
```
72+
73+
which renders to HTML:
74+
75+
```html
76+
<div class="btn-large btn-floating teal lighten-1 waves-effect waves-light hide-on-large-only">
77+
Click me
78+
</div>
79+
```
80+
81+
See [test cases](https://github.com/yehzhang/purescript-materialize/blob/master/test/Main.purs)
82+
for more examples.
83+
84+
### DOM API
85+
86+
Some material designs cannot be implemented with pure CSS, e.g.,
87+
[Tooltips](https://materializecss.com/tooltips.html). Therefore, it is sometimes
88+
inevitable to interact with Materialize's API in JavaScript. Hopefully, included
89+
is a PureScript API that abstracts away the DOM manipulation required by the
90+
Materialize API.
91+
92+
```purescript
93+
import Data.Traversable (traverse)
94+
import Effect (Effect)
95+
import Prelude
96+
import Web.DOM.ParentNode (ParentNode)
97+
98+
import Materialize.DOM (findElements, findInstances, init, open, destroy)
99+
import Materialize.Tooltips (Tooltip)
100+
101+
102+
initTooltipsAndOpen :: Effect ParentNode -> Effect Unit
103+
initTooltipsAndOpen parentNode = do
104+
_ :: Array Tooltip <- parentNode >>= findElements
105+
>>= traverse (init { enterDelay: 400.0
106+
, outDuration: 40.0
107+
})
108+
>>= traverse open
109+
pure unit
110+
111+
destroyTooltips :: Effect ParentNode -> Effect Unit
112+
destroyTooltips parentNode = do
113+
_ :: Array Tooltip <- parentNode >>= findInstances >>= traverse destroy
114+
pure unit
115+
```
116+
117+
## Supported modules
118+
119+
### CSS
120+
121+
- [x] [Color](https://materializecss.com/color.html)
122+
- [x] [Grid](https://materializecss.com/grid.html)
123+
- [x] [Helpers](https://materializecss.com/helpers.html)
124+
- [x] [Media](https://materializecss.com/media-css.html)
125+
- [x] [Pulse](https://materializecss.com/pulse.html)
126+
- [x] [Shadow](https://materializecss.com/shadow.html)
127+
- [x] [Table](https://materializecss.com/table.html)
128+
- [x] [Transitions](https://materializecss.com/css-transitions.html)
129+
- [x] [Typography](https://materializecss.com/typography.html)
130+
131+
### Components
132+
133+
- [x] [Badges](https://materializecss.com/badges.html)
134+
- [x] [Buttons](https://materializecss.com/buttons.html)
135+
- [x] [Breadcrumbs](https://materializecss.com/breadcrumbs.html)
136+
- [x] [Cards](https://materializecss.com/cards.html)
137+
- [x] [Collections](https://materializecss.com/collections.html)
138+
- [x] [Floating Action Button](https://materializecss.com/floating-action-button.html) (Class only)
139+
- [x] [Footer](https://materializecss.com/footer.html)
140+
- [x] [Icons](https://materializecss.com/icons.html)
141+
- [x] [Navbar](https://materializecss.com/navbar.html)
142+
- [x] [Pagination](https://materializecss.com/pagination.html)
143+
- [x] [Preloader](https://materializecss.com/preloader.html)
144+
145+
### JavaScript
146+
147+
- [x] [Auto Init](https://materializecss.com/auto-init.html)
148+
- [x] [Carousel](https://materializecss.com/carousel.html) (Class only)
149+
- [ ] Collapsible
150+
- [ ] Dropdown
151+
- [ ] FeatureDiscovery
152+
- [x] [Media](https://materializecss.com/media.html) (Class only)
153+
- [ ] Modals
154+
- [ ] Parallax
155+
- [ ] Pushpin
156+
- [ ] Scrollspy
157+
- [ ] Sidenav
158+
- [ ] Tabs
159+
- [x] [Toasts](https://materializecss.com/toasts.html)
160+
- [x] [Tooltips](https://materializecss.com/tooltips.html)
161+
- [x] [Waves](https://materializecss.com/waves.html)
162+
163+
### Forms
164+
165+
- [ ] Autocomplete
166+
- [x] [Checkboxes](https://materializecss.com/checkboxes.html)
167+
- [x] [Chips](https://materializecss.com/chips.html)
168+
- [ ] Pickers
169+
- [x] [Radio Buttons](https://materializecss.com/radio-buttons.html)
170+
- [ ] Range
171+
- [x] [Select](https://materializecss.com/select.html)
172+
- [x] [Switches](https://materializecss.com/switches.html)
173+
- [x] [Text Inputs](https://materializecss.com/text-inputs.html) (Class only)
174+
175+
(Pull requests are welcomed) :)
176+
177+
## Installation
178+
179+
```
180+
bower install purescript-materialize
181+
```
182+
183+
Additionally, Materialize 1.0.0-rc needs to be installed. An easy way is to add
184+
the following line into the `<body>` block of `index.html`, before the
185+
`<script>` tag of PureScript code:
186+
187+
```html
188+
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
189+
```
190+
191+
There are other ways to install Materialize, but please make sure that the
192+
gloabl Materialize object `M` is available.
193+
194+
## Documentation
195+
196+
Module documentation is [published on Pursuit](https://pursuit.purescript.org/packages/purescript-materialize).

‎bower.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "purescript-materialize",
3+
"license": "MIT",
4+
"repository": {
5+
"type": "git",
6+
"url": "git://github.com/yehzhang/purescript-materialize"
7+
},
8+
"ignore": [
9+
"**/.*",
10+
"node_modules",
11+
"bower_components",
12+
"output"
13+
],
14+
"dependencies": {
15+
"purescript-smolder": "^11.0.0",
16+
"purescript-typelevel": "^4.0.0",
17+
"purescript-aff": "^5.0.0",
18+
"purescript-web-dom": "^1.0.0"
19+
},
20+
"devDependencies": {
21+
"purescript-psci-support": "^4.0.0",
22+
"purescript-spec": "^3.0.0"
23+
}
24+
}

‎src/Materialize/Alignment.purs

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
{-|
2+
See <https://materializecss.com/helpers.html>.
3+
-}
4+
module Materialize.Alignment where
5+
6+
import Data.Either (Either)
7+
import Data.Either (Either(..)) as E
8+
import Data.Either.Nested (Either3, in1, in2, in3)
9+
import Data.Maybe (Maybe(..))
10+
import Data.Newtype (class Newtype, wrap)
11+
import Data.Typelevel.Undefined (undefined)
12+
import Prelude
13+
14+
import Materialize.Markup (class Decorate, class Render, class Variadic, liftVariadic, render, (<~), (~>))
15+
import Materialize.Overriden (Left, Right)
16+
import Materialize.Types (Class)
17+
18+
19+
newtype Alignment = Alignment { vertical :: Maybe VerticalCenter
20+
, horizontal :: Maybe HorizontalAlignment
21+
}
22+
23+
type HorizontalAlignment = Either3 Left HorizontalCenter Right
24+
25+
data HorizontalCenter
26+
27+
data VerticalCenter
28+
29+
newtype Float = Float (Either Left Right)
30+
31+
align :: forall a r. Decorate Alignment a => Variadic Alignment r => a -> r
32+
align a = liftVariadic $ a ~> wrap { vertical: Nothing
33+
, horizontal: Nothing
34+
}
35+
36+
instance variadicReturnAlignment :: Variadic Alignment Alignment where
37+
liftVariadic = identity
38+
39+
float :: forall a r. Decorate Float a => Variadic Float r => a -> r
40+
float a = liftVariadic $ a ~> undefined
41+
42+
instance variadicReturnFloat :: Variadic Float Float where
43+
liftVariadic = identity
44+
45+
horizontalCenter :: HorizontalCenter
46+
horizontalCenter = undefined
47+
48+
verticalCenter :: VerticalCenter
49+
verticalCenter = undefined
50+
51+
noPadding :: forall r. Variadic Class r => r
52+
noPadding = liftVariadic "no-padding"
53+
54+
instance decorateFloatLeft :: Decorate Float Left where
55+
decorate _ = wrap <<< E.Left
56+
57+
instance decorateFloatRight :: Decorate Float Right where
58+
decorate _ = wrap <<< E.Right
59+
60+
instance decorateAlignmentLeft :: Decorate Alignment Left where
61+
decorate (Alignment t) l = wrap t { horizontal = pure $ in1 l }
62+
63+
instance decorateAlignmentHorizontalCenter :: Decorate Alignment HorizontalCenter where
64+
decorate (Alignment t) c = wrap t { horizontal = pure $ in2 c }
65+
66+
instance decorateAlignmentRight :: Decorate Alignment Right where
67+
decorate (Alignment t) r = wrap t { horizontal = pure $ in3 r }
68+
69+
instance decorateAlignmentVerticalCenter :: Decorate Alignment VerticalCenter where
70+
decorate (Alignment t) v = wrap t { vertical = pure v }
71+
72+
instance renderAlignment :: Render Alignment where
73+
render (Alignment { vertical: v, horizontal: h }) =
74+
(render h <~ "align") <> render v
75+
76+
instance renderVerticalCenter :: Render VerticalCenter where
77+
render _ = render "valign-wrapper"
78+
79+
instance renderHorizontalCenter :: Render HorizontalCenter where
80+
render _ = render "center"
81+
82+
derive instance newtypeAlignment :: Newtype Alignment _
83+
84+
derive instance newtypeFloat :: Newtype Float _
85+
86+
derive newtype instance renderFloat :: Render Float

‎src/Materialize/AutoInit.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
exports.autoInitImpl = function (parentNode) {
2+
M.AutoInit(parentNode);
3+
};

‎src/Materialize/AutoInit.purs

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{-|
2+
See <https://materializecss.com/auto-init.html>.
3+
-}
4+
module Materialize.AutoInit
5+
( autoInit
6+
, noAutoInit
7+
) where
8+
9+
import Effect (Effect)
10+
import Effect.Uncurried (EffectFn1, runEffectFn1)
11+
import Prelude
12+
import Web.DOM.ParentNode (ParentNode)
13+
14+
import Materialize.Markup (class Variadic, liftVariadic)
15+
import Materialize.Types (Class)
16+
17+
18+
autoInit :: ParentNode -> Effect Unit
19+
autoInit = runEffectFn1 autoInitImpl
20+
21+
foreign import autoInitImpl :: EffectFn1 ParentNode Unit
22+
23+
noAutoInit :: forall r. Variadic Class r => r
24+
noAutoInit = liftVariadic "no-autoinit"

0 commit comments

Comments
 (0)