1 # This file is part of NIT ( http://www.nitlanguage.org ).
3 # Licensed under the Apache License, Version 2.0 (the "License");
4 # you may not use this file except in compliance with the License.
5 # You may obtain a copy of the License at
7 # http://www.apache.org/licenses/LICENSE-2.0
9 # Unless required by applicable law or agreed to in writing, software
10 # distributed under the License is distributed on an "AS IS" BASIS,
11 # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 # See the License for the specific language governing permissions and
13 # limitations under the License.
15 # HTML templates for Bootstrap components.
17 # See http://getbootstrap.com/components/
22 # Bootstrap component abstraction.
24 # Mainly used to factoryze CSS treatments.
25 # Can be used in the future to handle generic stuff like attributes or escaping.
27 # TODO merge with html::HTMTag without init conflict?
28 # HTMLTag requires the main init to pass a tagname,
29 # this was so much verbose here.
30 abstract class BSComponent
33 # CSS classes to add on this element.
34 var css_classes
= new Array[String] is optional
36 # Render `self` css clases as a `class` attribute.
37 fun render_css_classes
: String do
38 if css_classes
.is_empty
then return ""
39 return " class=\"{css_classes.join(" ")}\
""
45 # Not really a Bootstrap component but used in other components
46 # that it required its own abstraction.
50 # var lnk = new Link("http://nitlanguage.org", "Nit")
51 # assert lnk.write_to_string == "<a href=\"http://nitlanguage.org\">Nit</a>"
54 # Creates a link with a title attribute:
56 # lnk = new Link("http://nitlanguage.org", "Nit", "Nit homepage")
57 # assert lnk.write_to_string == "<a href=\"http://nitlanguage.org\" title=\"Nit homepage\">Nit</a>"
61 autoinit
(href
, text
, title
, css_classes
)
63 # URL pointed by this link.
64 var href
: String is writable
67 var text
: Writable is writable
70 var title
: nullable String = null is optional
, writable
72 redef fun rendering
do
73 add
"<a{render_css_classes} href=\"{href}\
""
74 var title
= self.title
75 if title
!= null then add
" title=\"{title.html_escape}\
""
80 # A `<h1>` to `<h6>` tag.
82 # Not really a Bootstrap component but used in other components
83 # that it required its own abstraction.
87 # var h1 = new Header(1, "Title")
88 # assert h1.write_to_string == "<h1>Title</h1>"
93 # var h6 = new Header(6, "Title", "with subtext")
94 # assert h6.write_to_string == "<h6>Title<small>with subtext</small></h6>"
98 autoinit
(level
, text
, subtext
, id
, css_classes
)
100 # Header level between 1 and 6.
107 var subtext
: nullable Writable = null is optional
, writable
110 var id
: nullable String = null is optional
, writable
112 redef fun rendering
do
113 add
"<h{level}{render_css_classes}>{text.write_to_string}"
114 var subtext
= self.subtext
115 if subtext
!= null then add
"<small>{subtext.write_to_string}</small>"
120 # An abstract HTML list.
122 # Many Bootstrap components are built around a HTML list.
124 # Used to factorize behavior between OrderedList and UnorderedList.
125 abstract class HTMLList
127 autoinit
(items
, css_classes
)
129 # A list contains `<li>` tags as children.
132 var items
= new Array[ListItem] is optional
134 # Adds a new ListItem to `self`.
135 fun add_li
(item
: ListItem) do items
.add item
137 # Does `self` contains no items?
138 fun is_empty
: Bool do return items
.is_empty
146 # var lst = new OrderedList
147 # lst.add_li(new ListItem("foo"))
148 # lst.add_li(new ListItem("bar"))
149 # lst.add_li(new ListItem("baz"))
151 # assert lst.write_to_string == """
162 redef fun rendering
do
163 addn
"<ol{render_css_classes}>"
164 for item
in items
do add item
174 # var lst = new UnorderedList
175 # lst.add_li(new ListItem("foo"))
176 # lst.add_li(new ListItem("bar"))
177 # lst.add_li(new ListItem("baz"))
179 # assert lst.write_to_string == """
190 redef fun rendering
do
191 addn
"<ul{render_css_classes}>"
192 for item
in items
do add item
200 autoinit
(text
, css_classes
)
202 # Content to display in this list item.
203 var text
: Writable is writable
205 redef fun rendering
do addn
"<li{render_css_classes}>{text.write_to_string}</li>"
210 # See http://getbootstrap.com/components/#glyphicons
215 # var icon = new BSIcon("star")
216 # assert icon.write_to_string == "<span class=\"glyphicon glyphicon-star\" aria-hidden=\"true\"></span>"
220 autoinit
(icon
, css_classes
)
222 # Glyphicon name to display.
224 # See full list at http://getbootstrap.com/components/#glyphicons.
227 init do css_classes
.add
"glyphicon glyphicon-{icon}"
229 redef fun rendering
do
230 add
"<span{render_css_classes} aria-hidden=\"true\
"></span>"
234 # A Bootstrap breadcrumbs component.
236 # See http://getbootstrap.com/components/#breadcrumbs
241 # var bc = new BSBreadCrumbs
242 # bc.add_li(new ListItem("foo"))
243 # bc.add_li(new ListItem("bar"))
244 # bc.add_li(new ListItem("baz"))
246 # assert bc.write_to_string == """
247 # <ol class=\"breadcrumbs\">
250 # <li class=\"active\">baz</li>
257 init do css_classes
.add
"breadcrumbs"
259 redef fun rendering
do
260 items
.last
.css_classes
.add
"active"
265 # A Bootstrap label component.
267 # See http://getbootstrap.com/components/#labels
272 # var lbl = new BSLabel("danger", "Danger!")
273 # assert lbl.write_to_string == "<span class=\"label label-danger\">Danger!</span>"
277 autoinit
(color
, text
, css_classes
)
279 # Class used to change the color of the label.
281 # Can be one of `default`, `primary`, `success`, `info`, `warning` or `danger`.
284 # Text to display in the label.
287 init do css_classes
.add
"label label-{color}"
289 redef fun rendering
do
290 add
"<span{render_css_classes}>{text.write_to_string}</span>"
294 # A Bootstrap badge component.
296 # See http://getbootstrap.com/components/#badges
301 # var b = new BSBadge("42 messages")
302 # assert b.write_to_string == "<span class=\"badge\">42 messages</span>"
306 autoinit
(text
, css_classes
)
308 # Text to display in the label.
311 init do css_classes
.add
"badge"
313 redef fun rendering
do
314 add
"<span{render_css_classes}>{text.write_to_string}</span>"
318 # A Bootstrap page header component.
320 # See http://getbootstrap.com/components/#page-header
325 # var h = new BSPageHeader("Welcome")
326 # assert h.write_to_string == """
327 # <div class=\"page-header\">
334 autoinit
(text
, css_classes
)
336 # Text to display as title.
339 init do css_classes
.add
"page-header"
341 redef fun rendering
do
342 addn
"<div{render_css_classes}>"
343 addn text
.write_to_string
348 # A Bootstrap alert component.
350 # See http://getbootstrap.com/components/#alerts
355 # var alert = new BSAlert("danger", "Danger!")
356 # assert alert.write_to_string == """
357 # <div class="alert alert-danger">
364 autoinit
(color
, text
, is_dismissible
, css_classes
)
366 # Class used to change the color of the alert.
368 # Can be one of `primary`, `success`, `info`, `warning` or `danger`.
371 # Text to display in the alert.
374 # Can the alert be dismissed by clicking the close button?
376 # See http://getbootstrap.com/components/#alerts-dismissible
378 # Default is `false`.
379 var is_dismissible
= false is optional
, writable
381 init do css_classes
.add
"alert alert-{color}"
383 redef fun rendering
do
384 addn
"<div{render_css_classes}>"
385 if is_dismissible
then
386 add
"<button type=\"button\
" class=\"close\
" data-dismiss=\"alert\
""
387 add
"aria-label=\"Close\
"><span aria-hidden=\"true\
">×</span>"
390 addn text
.write_to_string
395 # A Bootstrap panel component.
397 # See http://getbootstrap.com/components/#panels
402 # var p = new BSPanel("default", body = "Panel content")
404 # assert p.write_to_string == """
405 # <div class="panel panel-default">
406 # <div class="panel-body">
413 # Panel with heading:
416 # p = new BSPanel("danger", heading = "Panel heading", body = "Panel content")
418 # assert p.write_to_string == """
419 # <div class="panel panel-danger">
420 # <div class="panel-heading">
423 # <div class="panel-body">
431 autoinit
(color
, heading
, body
, footer
, css_classes
)
435 # Can be one of `default`, `primary`, `success`, `info`, `warning` or `danger`.
436 var color
: String is writable
438 # Panel header if any.
439 var heading
: nullable Writable = null is optional
, writable
441 # Body to display in the panel.
442 var body
: nullable Writable = null is optional
, writable
444 # Panel footer is any.
445 var footer
: nullable Writable = null is optional
, writable
447 init do css_classes
.add
"panel panel-{color}"
449 redef fun rendering
do
450 addn
"<div{render_css_classes}>"
451 var heading
= self.heading
452 if heading
!= null then
453 addn
"<div class=\"panel-heading\
">"
454 addn heading
.write_to_string
459 addn
"<div class=\"panel-body\
">"
460 addn body
.write_to_string
463 var footer
= self.footer
464 if footer
!= null then
465 addn
"<div class=\"panel-footer\
">"
466 addn footer
.write_to_string