Skip to content

Instantly share code, notes, and snippets.

@Christo44
Created September 16, 2016 14:31
Show Gist options
  • Save Christo44/5b488e4a43ca3053c3bd0db9724610ea to your computer and use it in GitHub Desktop.
Save Christo44/5b488e4a43ca3053c3bd0db9724610ea to your computer and use it in GitHub Desktop.
Object traversal in Pug (fna Jade)
- var floors = { ground: { name: "Ground Floor", image: "ground.png", tenants: { t1: { image: false, heading: '4 desks available', description: 'Lorem ipsum dolor sit amet,consectetur adipisicing elit', linkDescription: 'Link to sales page', linkTarget: 'http://www.google.com', posx: '120', posy: '330' }, t2: { image: 'avaaz.png', heading: 'Company name', description: 'Lorem ipsum dolor sit amet,consectetur adipisicing elit', linkDescription: 'External link', linkTarget: 'http://www.google.com', posx: '340', posy: '280' } } }, first: { name: "1st Floor", image: "ground.png", tenants: { t1: { image: false, heading: '4 desks available', description: 'Lorem ipsum dolor sit amet,consectetur adipisicing elit', linkDescription: 'Link to sales page', linkTarget: 'http://www.google.com', posx: '120', posy: '330' }, t2: { image: 'avaaz.png', heading: 'Company name', description: 'Lorem ipsum dolor sit amet,consectetur adipisicing elit', linkDescription: 'External link', linkTarget: 'http://www.google.com', posx: '340', posy: '280' } } }, second: { name: "2nd Floor", image: "ground.png", tenants: { t1: { image: false, heading: '4 desks available', description: 'Lorem ipsum dolor sit amet,consectetur adipisicing elit', linkDescription: 'Link to sales page', linkTarget: 'http://www.google.com', posx: '120', posy: '330' }, t2: { image: 'avaaz.png', heading: 'Company name', description: 'Lorem ipsum dolor sit amet,consectetur adipisicing elit', linkDescription: 'External link', linkTarget: 'http://www.google.com', posx: '340', posy: '280' } } }, third: { name: "3rd Floor", image: "ground.png" } };
doctype
html.no-js
head
meta(charset='utf-8')
meta(http-equiv='X-UA-Compatible', content='IE=edge')
- var title = title || "Floor Plans"
title #{title}
meta(name='description', content='')
meta(name='viewport', content='width=device-width, initial-scale=1')
link(rel='stylesheet', href='css/main.css')
body
// content
.wrapper
h1 Take a look at this Borough’s floor plan
.box
#tabContainer
ul.box__tabs
// grab all the floors and build the selector tabs
each v,i in floors
li
a(href="##{i}") #{v.name}
// grab all the floors and build the selector tabs
each v,i in floors
div(id="#{i}")
if v.image
figure
img(src="img/placeholders/#{v.image}", alt="#{v.name}")
// cycle all tenants in this floor
// we have tenants on this floor
if v.tenants
ul
// this is one tenant
each a in v.tenants
li
if a.image
img(src="img/logos/#{a.image}", alt="#{a.heading}")
h3= a.heading
p= a.description
if a.linkDescription
a(href="#{a.linkTarget}", target="_new") #{a.linkDescription}
else
p No tenants for this floor
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment