Daniel@0: /* Part of DML (Digital Music Laboratory) Daniel@0: Copyright 2014-2015 Samer Abdallah, University of London Daniel@0: Daniel@0: This program is free software; you can redistribute it and/or Daniel@0: modify it under the terms of the GNU General Public License Daniel@0: as published by the Free Software Foundation; either version 2 Daniel@0: of the License, or (at your option) any later version. Daniel@0: Daniel@0: This program is distributed in the hope that it will be useful, Daniel@0: but WITHOUT ANY WARRANTY; without even the implied warranty of Daniel@0: MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the Daniel@0: GNU General Public License for more details. Daniel@0: Daniel@0: You should have received a copy of the GNU General Public Daniel@0: License along with this library; if not, write to the Free Software Daniel@0: Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA Daniel@0: */ Daniel@0: Daniel@0: :- module(bootstrap, Daniel@0: [ navbar//3 Daniel@0: , navbar_menu//2 Daniel@0: , navbar_item//1 Daniel@0: ]). Daniel@0: Daniel@0: /** Enables use of Bootstrap CSS framework Daniel@0: */ Daniel@0: Daniel@0: :- use_module(library(http/html_write)). Daniel@0: :- use_module(library(http/html_head)). Daniel@0: :- use_module(library(htmlutils)). Daniel@0: :- use_module(library(dcg_core)). Daniel@0: Daniel@0: :- set_prolog_flag(double_quote,string). Daniel@0: Daniel@0: % http:location(bootstrap,"//maxcdn.bootstrapcdn.com/bootstrap/3.3.2",[]). Daniel@0: % http:location(bootstrap_examples,"//getbootstrap.com/examples",[]). Daniel@0: Daniel@0: :- html_resource( bootstrap, [virtual(true), requires(web('css/bootstrap.min.1.css'))]). Daniel@0: :- html_resource( bootstrap_js, [virtual(true), requires(web('js/bootstrap.min.js'))]). Daniel@0: % :- html_resource( bootstrap("css/bootstrap-theme.min.css"), [requires(bootstrap)]). Daniel@0: % :- html_resource( bootstrap("css/bootstrap.min.css"), []). Daniel@0: Daniel@0: % :- html_resource( bootstrap_examples("starter-template/starter-template.css"), Daniel@0: % [requires(bootstrap)]). Daniel@0: % :- html_resource( bootstrap_examples("navbar/navbar.css"), Daniel@0: % [requires(bootstrap)]). Daniel@0: % :- html_resource( bootstrap_examples("navbar-static-top/navbar-static-top.css"), Daniel@0: % [requires(bootstrap)]). Daniel@0: % :- html_resource( bootstrap_examples("navbar-fixed-top/navbar-fixed-top.css"), Daniel@0: % [requires(bootstrap)]). Daniel@0: % :- html_resource( bootstrap_examples("theme/theme.css"), Daniel@0: % [requires(bootstrap_theme)]). Daniel@0: Daniel@0: % :- html_resource( bootstrap_theme, [virtual(true), requires(bootstrap("css/bootstrap-theme.min.css"))]). Daniel@0: Daniel@0: % navbar_class_option('navbar-inverse'). Daniel@0: % navbar_class_option('navbar-fixed-top'). Daniel@0: % navbar_class_option('navbar-static-top'). Daniel@0: Daniel@0: % user:head(bootstrap(_,_),Head) --> !, Daniel@0: % html(head([ meta([name(viewport), content("width-device-width,initial-scale=1")]) Daniel@0: % | Head ])). Daniel@0: Daniel@0: % % use abstract paths here?ads Daniel@0: % user:body(bootstrap(Var,Nav),Body) --> !, Daniel@0: % html_requires(bootstrap("css/bootstrap.min.css")), Daniel@0: % bootstrap_body(Var,Nav,Body). Daniel@0: Daniel@0: % bootstrap_body(1,Nav,Body) --> Daniel@0: % { setting(htmlutils:appname, AppName) }, Daniel@0: % html_requires(bootstrap_examples("starter-template/starter-template.css")), Daniel@0: % html( body( div( class=container, Daniel@0: % \bootstrap_body(AppName,['navbar-static-top'],Nav, Daniel@0: % div(class="starter-template", Body))))). Daniel@0: Daniel@0: % bootstrap_body(2,Nav,Body) --> Daniel@0: % { setting(htmlutils:appname, AppName) }, Daniel@0: % html_requires(bootstrap_examples("navbar-fixed-top/navbar-fixed-top.css")), Daniel@0: % html(body( Daniel@0: % % div( class=container, Daniel@0: % \bootstrap_body(AppName,['navbar-default','navbar-fixed-top'],Nav,Body) Daniel@0: % % ) Daniel@0: % )). Daniel@0: % % \bootstrap_body("swiPlayer",['navbar-inverse','navbar-fixed-top'],Nav,Body)))). Daniel@0: Daniel@0: % bootstrap_body(3,Nav,Body) --> Daniel@0: % { setting(htmlutils:appname, AppName) }, Daniel@0: % html_requires(bootstrap_examples("navbar-static-top/navbar-static-top.css")), Daniel@0: % % html_requires(bootstrap_examples("theme/theme.css")), Daniel@0: % html( body(role(document), Daniel@0: % [ \navbar(AppName,['navbar-inverse','navbar-static-top'],navbar_menu(left,Nav)) Daniel@0: % , div([class=container,role=main], Body) Daniel@0: % , \script("//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js") Daniel@0: % , \script("//getbootstrap.com/dist/js/bootstrap.min.js") Daniel@0: % ])). Daniel@0: Daniel@0: % bootstrap_body(AppName,NavbarClasses,Nav,Body) --> Daniel@0: % html( [ \navbar(AppName,NavbarClasses, navbar_menu(left,Nav)) Daniel@0: % , div(class=container,Body) Daniel@0: % , \script("//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js") Daniel@0: % , \script("//getbootstrap.com/dist/js/bootstrap.min.js") Daniel@0: % ]). Daniel@0: Daniel@0: navbar_item(link(Label,Location)) --> html(li(a([href(Location)], Label))). Daniel@0: navbar_item(divider) --> html(li(class=divider,[])). Daniel@0: navbar_item(header(Text)) --> html(li(class='dropdown-header',Text)). Daniel@0: navbar_item(menu(Label,Items)) --> Daniel@0: html(li(class(dropdown), Daniel@0: [ a([href='#', class='dropdown-toggle', 'data-toggle'=dropdown, role=button, aria-expanded=false], Daniel@0: [Label,span(class(caret1),'\u25BE')]) Daniel@0: , ul([class='dropdown-menu', role=menu], \seqmap(navbar_item,Items)) Daniel@0: ])). Daniel@0: Daniel@0: Daniel@0: button(Content,Classes) --> Daniel@0: html(button([type=button,class=[btn|Classes]], Content)). Daniel@0: Daniel@0: button_link(Ref,Content) --> Daniel@0: html(a([role=button,class=[btn,'btn-default'],href=Ref],Content)). Daniel@0: Daniel@0: :- meta_predicate navbar(:,+,//,?,?). Daniel@0: %% navbar( +Header:html_item, +Classes:list(html_class), +Menus:phrase(html))// is det. Daniel@0: navbar(_AppName,NavbarClasses,Menus) --> Daniel@0: html_requires(bootstrap), Daniel@0: html_requires(bootstrap_js), Daniel@0: html_requires(font_awesome), Daniel@0: html( div( [ class=[navbar | NavbarClasses], role=navigation], Daniel@0: div( class=container, Daniel@0: [ div( class='navbar-header', Daniel@0: [ \navbar_toggle Daniel@0: %, a([class='navbar-brand', href='.'], AppName) Daniel@0: ] Daniel@0: ) Daniel@0: , div( class=[collapse,'navbar-collapse'], \Menus) Daniel@0: ]))). Daniel@0: Daniel@0: %% navbar_menu(Just:oneof([left,right]), +Items:phrase(html))// is det. Daniel@0: navbar_menu(left,Items) --> html(ul(class=[nav,'navbar-nav'], \Items)). Daniel@0: navbar_menu(right,Items) --> html(ul(class=[nav,'navbar-nav','navbar-right'], \Items)). Daniel@0: Daniel@0: navbar_toggle --> Daniel@0: html( button( Daniel@0: [ type=button Daniel@0: , class='navbar-toggle' Daniel@0: , 'data-toggle'=collapse Daniel@0: , 'data-target'='.navbar-collapse' Daniel@0: ], Daniel@0: [ span(class='sr-only',"Toggle navigation") Daniel@0: , i(class('fa fa-bars'),[]) %\rep(3,icon_bar) Daniel@0: ])). Daniel@0: Daniel@0: icon_bar --> html(span(class='icon-bar',[])). Daniel@0: Daniel@0: % user:style(bootstrap(1),'Bootstrap, variation 1'). Daniel@0: % user:style(bootstrap(2),'Bootstrap, variation 2'). Daniel@0: % user:style(bootstrap(3),'Bootstrap, variation 3'). Daniel@0: Daniel@0: side_nav(Items) --> Daniel@0: html(div(class='col-md-3', Daniel@0: div([ class=['bs-docs-sidebar','hidden-print','hidden-xs','hidden-sm'], Daniel@0: role=complementary ], Daniel@0: [ ul(class='nav bs-docs-sidenav', \Items) Daniel@0: , a([class='back-to-top',href='#top'],"Back to top") Daniel@0: ]))).