test.jade

style.
  body {
    font-family: Helvetica, Arial, san-serif;
    padding: 40px;
  }

  [id^="hyper-"] {
    display: block;
    margin: 20px;
  }

  [id^="hyper-"] .ng-hyper-loading {
    background: red;
    display: block;
  }

  [id^="hyper-"].fail .ng-hyper-loading {
    background: green;
    display: block;
  }

  [id^="hyper-"] .ng-hyper-loaded {
    background: green;
  }

  [id^="hyper-"].fail .ng-hyper-loaded {
    background: red;
  }

//- ***
//- hyper
//- ***

//- simple hyper
div(id="hyper-simple")
  div(data-hyper=".simple.text", data-ng-bind="text")

//- multiple hypers
div(id="hyper-multi")
  div(data-hyper=".simple.text, .user.name")
    span(data-ng-bind="text").text
    span(data-ng-bind="name").name

//- hyper as
div(id="hyper-as")
  div(data-hyper=".user.name as username", data-ng-bind="username")

//- hyper collection
div(id="hyper-collection")
  div(data-hyper=".items")
    span(data-ng-repeat="item in items", data-hyper-bind="item.title")

//- hyper collection property
div(id="hyper-collection-property")
  div(data-hyper=".items.property", data-ng-bind="property")

div(id="hyper-traversal")
  div(data-hyper=".user")
    div(data-hyper="user.address")
      div(data-hyper="address.street", data-ng-bind="street")

//- ***
//- hyper-bind
//- ***

//- simple hyper-bind
div(id="hyper-bind-simple")
  div(data-hyper-bind=".simple.text")

//- link title
div(id="hyper-bind-link-title")
  div(data-hyper-bind=".link-title.title")

//- ***
//- hyper-img
//- ***

//- simple image embedding
div(id="hyper-img-simple")
  img(data-hyper-img=".user.picture")

//- srcset
div(id="hyper-img-srcset")
  img(data-hyper-img=".user.pictures")

//- ***
//- hyper-link
//- ***

//- simple link
div(id="hyper-link-simple")
  a(data-hyper-link="/simple-link") Simple

//- resource link
div(id="hyper-link-resource")
  a(data-hyper-link="/users/:.user") User

//- slug link
div(id="hyper-link-slug")
  div(data-hyper=".user")
    a(data-hyper-link="/users/:user/:user.name") Link with slug

//- non-existant
div(id="hyper-link-non-existant").fail
  a(data-hyper-link="/link/to/:.nowhere") Link to nowhere

//- ***
//- hyper-redirect
//- ***

//- TODO move hyper-redirect tests into another page

div(id="hyper-redirect-simple")
  div(data-hyper-redirect="/users/:.user")

div(id="hyper-redirect-broken").fail
  div(data-hyper-redirect="/link/to/:.nowhere")

//- ***
//- hyper-form
//- ***

div(id="hyper-form-get-submit")
  form(data-hyper-form=".items.search", data-hyper-action="/results/:query")
    input(type="{{inputs.query.type}}", name="query", data-ng-model="inputs.query.model")
    input(type="submit")

div(id="hyper-form-get-nosubmit")
  form(data-hyper-form=".items.search", data-hyper-action="/results/:query")
    input(type="{{inputs.query.type}}", name="query", data-ng-model="inputs.query.model")

div(id="hyper-form-post")
  form(data-hyper-form=".items.create")
    input(type="{{inputs.title.type}}", name="title", data-ng-model="inputs.title.model")