src/doc/html_templates/html_components.nit

   1 # This file is part of NIT ( http://www.nitlanguage.org ).
   2 #
   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
   6 #
   7 # http://www.apache.org/licenses/LICENSE-2.0
   8 #
   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.
  14
  15 # HTML templates used by Nitdoc to generate API documentation
  16 # Pages are assembled using `Template`
  17 module html_components
  18
  19 import doc_base
  20 import html::bootstrap
  21 import json
  22
  23 # A label with a text content.
  24 class DocHTMLLabel
  25         super BSLabel
  26
  27         redef init do
  28                 css_classes.clear
  29                 css_classes.add "label"
  30         end
  31
  32         # Init this label from css classes.
  33         init with_classes(classes: Array[String]) do
  34                 init("label", "")
  35                 css_classes.add_all classes
  36         end
  37 end
  38
  39 # A component that display tabbed data.
  40 class DocTabs
  41         super BSComponent
  42
  43         # HTML id of this component.
  44         var html_id: String
  45
  46         # Text displayed on the tabs dropdown button.
  47         var drop_text: String
  48
  49         # Panels to display in this tab group.
  50         var panels = new Array[DocTabPanel]
  51
  52         # Droplist containing links to panels.
  53         #
  54         # Can also be used to add external links.
  55         var drop_list: DocTabsDrop is lazy do return new DocTabsDrop(html_id, drop_text)
  56
  57         # Adds a new `panel` to that tab.
  58         #
  59         # You should always use this instead of `panels.add` because it also set the
  60         # `drop_list` entry.
  61         fun add_panel(panel: DocTabPanel) do
  62                 drop_list.add_li panel.render_tab
  63                 panels.add panel
  64         end
  65
  66         redef fun rendering do
  67                 if panels.is_empty then return
  68                 panels.first.is_active = true
  69                 add "<div role=\"tabpanel\">"
  70                 if drop_list.items.length > 1 then add drop_list
  71                 add " <div class=\"tab-content\">"
  72                 for panel in panels do
  73                         add panel
  74                 end
  75                 add " </div>"
  76                 add "</div>"
  77         end
  78 end
  79
  80 # A list of tab regrouped in a dropdown
  81 class DocTabsDrop
  82         super UnorderedList
  83
  84         # HTML id used by the tabs group.
  85         var html_id: String
  86
  87         # Title to display in the tab item.
  88         var html_title: String
  89
  90         redef fun rendering do
  91                 add """<ul id="{{{html_id}}}-tabs" class="nav pull-right" role="tablist">"""
  92                 add """ <li role="presentation" class="dropdown pull-right">"""
  93                 add """  <a href="#" id="{{{html_id}}}-drop" class="dropdown-toggle"
  94                           data-toggle="dropdown" aria-controls="{{{html_id}}}-contents"
  95                           aria-expanded="false">"""
  96         add html_title
  97                 add """ <span class="glyphicon glyphicon-menu-hamburger"></span>"""
  98                 add """ </a>"""
  99                 add """ <ul class="dropdown-menu" role="menu"
 100                          aria-labelledby="{{{html_id}}}-drop" id="{{{html_id}}}-contents">"""
 101                 for item in items do add item
 102                 add "  </ul>"
 103         add " </li>"
 104         add "</ul>"
 105         end
 106 end
 107
 108 # A panel that goes in a DocTabs.
 109 class DocTabPanel
 110         super BSComponent
 111
 112         # HTML id of this panel.
 113         var html_id: String
 114
 115         # Title of this panel as displayed in the tab label.
 116         var tab_title: String
 117
 118         # HTML content of this panel.
 119         var html_content: Writable is writable
 120
 121         # Is this panel visible by default?
 122         var is_active = false
 123
 124         redef fun rendering do
 125                 var active = ""
 126                 if is_active then active = "active in"
 127                 add "<div role=\"tabpanel\" class=\"tab-pane fade {active}\""
 128                 add "  id=\"{html_id}\" aria-labelledby=\"{html_id}-tab\">"
 129                 add html_content
 130                 add "</div>"
 131         end
 132
 133         private fun render_tab: DocTabItem do return new DocTabItem(tab_title, html_id)
 134 end
 135
 136 # A ListItem that goes in a DocTabsDrop.
 137 private class DocTabItem
 138         super ListItem
 139
 140         # Panel id to trigger when the link is clicked.
 141         var target_id: String
 142
 143         redef fun rendering do
 144                 add "<li{render_css_classes}>"
 145                 add " <a role=\"tab\" data-toggle=\"tab\" aria-expanded=\"false\" tabindex=\"-1\""
 146                 add "   id=\"{target_id}-tab\" href=\"#{target_id}\" aria-controls=\"{target_id}\">"
 147                 add text
 148                 add " </a>"
 149                 add "</li>"
 150         end
 151 end
 152
 153 # A HTML tag attribute
 154 #  `<tag attr="value">`
 155 #
 156 # ~~~nit
 157 # var attr: TagAttribute
 158 #
 159 # attr = new TagAttribute("foo", null)
 160 # assert attr.write_to_string == " foo=\"\""
 161 #
 162 # attr = new TagAttribute("foo", "bar<>")
 163 # assert attr.write_to_string == " foo=\"bar&lt;&gt;\""
 164 # ~~~
 165 class TagAttribute
 166         super Template
 167
 168         var name: String
 169         var value: nullable String
 170
 171         redef fun rendering do
 172                 var value = self.value
 173                 if value == null then
 174                         # SEE: http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes
 175                         add " {name.html_escape}=\"\""
 176                 else
 177                         add " {name.html_escape}=\"{value.html_escape}\""
 178                 end
 179         end
 180 end
 181
 182 # Javacript template that can be added into a DocPage.
 183 class TplScript
 184         super Template
 185
 186         # HTML attributes to add in this tag.
 187         var attrs = new Array[TagAttribute]
 188
 189         # Text content of this script tag.
 190         var content: nullable Writable = null is writable
 191
 192         init do
 193                 attrs.add(new TagAttribute("type", "text/javascript"))
 194         end
 195
 196         # Render the content of this script.
 197         protected fun render_content do
 198                 if content != null then add content.as(not null)
 199         end
 200
 201         redef fun rendering do
 202                 add "<script"
 203                 for attr in attrs do add attr
 204                 addn ">"
 205                 render_content
 206                 addn "</script>"
 207         end
 208 end
 209
 210 # JS script for Piwik Tracker
 211 class TplPiwikScript
 212         super TplScript
 213
 214         # Piwik URL to use for this tracker.
 215         var tracker_url: String
 216
 217         # Site ID used on Piwik system.
 218         var site_id: String
 219
 220         redef fun render_content do
 221                 var site_id = self.site_id.to_json
 222                 var tracker_url = self.tracker_url.trim
 223                 if tracker_url.chars.last != '/' then tracker_url += "/"
 224                 tracker_url = "://{tracker_url}".to_json
 225
 226                 addn "<!-- Piwik -->"
 227                 addn "var _paq = _paq || [];"
 228                 addn " _paq.push([\"trackPageView\"]);"
 229                 addn " _paq.push([\"enableLinkTracking\"]);"
 230                 addn "(function() \{"
 231                 addn " var u=((\"https:\" == document.location.protocol) ? \"https\" : \"http\") + {tracker_url};"
 232                 addn " _paq.push([\"setTrackerUrl\", u+\"piwik.php\"]);"
 233                 addn " _paq.push([\"setSiteId\", {site_id}]);"
 234                 addn " var d=document, g=d.createElement(\"script\"), s=d.getElementsByTagName(\"script\")[0]; g.type=\"text/javascript\";"
 235                 addn " g.defer=true; g.async=true; g.src=u+\"piwik.js\"; s.parentNode.insertBefore(g,s);"
 236                 addn "\})();"
 237         end
 238 end