Angular + HAML + Coffeescript demo

Angular + HAML + Coffeescript demo.markdown

Angular + HAML + Coffeescript demo

This is a demonstration of a simple user-interface built using AngularJS and HAML (instead of HTML).

Forked from Salim Fadhley's Pen OMPrVY.

A Pen by Salim Fadhley on CodePen.

License.

index.html

%section{:"ng-app" => "demo"}
  .conversation_window{:"ng-controller" => "DemoController"}
    .header
      .conversation_title {{conversation_title}}
    .conversation
      .conversation_item{:"ng-repeat" => "item in conversation()"}
        .conversation_card{:"ng-show" => "!is_hidden(item.id)"}
          .hide-link{:"ng-click"=>"hide(item.id)"} X
          .from {{item.from}}
          .date {{item.date}}
          .msg "{{item.msg}}"
          %img{:"gravatar-src" => "item.email", "gravatar-size" => 128}
          .attachment{:"ng-repeat" => "attachment in item.attachments"}
            %a{:href => "attachment.url"} {{attachment.name}} 
    .footer
      .sorting
        %radio{:"name"=>"sort_orde", "value"=>"ascending"}
        %radio{:"name"=>"sort_orde", "value"=>"desending"}
      .status Conected
  

script.js

module = angular.module("demo", ['ui.gravatar'])

module.controller "DemoController", ($scope, $log) ->
  
  hidden = d3.map()
  
  hide = (id)->
    $log.warn("Hiding message", id)
    hidden.set(id, true)
    
  is_hidden = (id)->
    hidden.get(id) || false
 
  $log.warn("Hello Wolrd!", $scope)  
  
  conversation = [
    {
      from: "Bill Bryson"
      date: "2015-11-11"
      msg: "Hi Ted, I'm still looking for the sales figures, they should have been with me two weeks ago. What's causing the delay? The conference is two days from now and Brant is getting very worried that we are behind schedule."
      email: "[email protected]" 
      id: 253254
      attachments: []
    },
    {
      from: "Ted Danson"
      date: "2015-11-11"
      msg: "Brant aloways gets worked up over this sort of thing. Can you ask him to stay calm for once? I definitely emailed them to you last week. Hae you checked your spam folder? It might have ended up there. Can you use your search button or something? I will have another look when I'm back at my desk."
      email: "[email protected]"
      id: 123445
      attachments: []
    },
    {
      from: "Bill Bryson"
      date: "2015-11-12"
      msg: "I'm pretty sure it's not in there - I looked twice. Did you actually email it to me? I've recently changed my email address. Brant is literally tearing his hear out - we can hear him from the other side of the building. He's not going to calm down until you ship that report."
      email: "[email protected]" 
      id: 123447
      attachments: []
    },
    {
      from: "Ted Danson"
      date: "2015-11-13"
      msg: "Actually I think I sent it to the totally wrong address - here you go!. Check the attachments."
      email: "[email protected]"
      id: 123419
      attachments: [
        {
          name:"2015 Sales report"
          type:"pdf"
          url:"http://thecompany.com/private/sales.pdf"
        },
        {
          name:"2015 Sales report (appendix 2)"
          type:"html"
          url:"http://thecompany.com/private/sales_appendix2.html"
        },
    ]
    },

  ]
  
  $scope.is_hidden = is_hidden
  $scope.hide = hide
  $scope.conversation = ()->conversation
  $scope.conversation_title = "Chatting to Ted"

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-gravatar/0.4.1/angular-gravatar.min.js"></script>

style.css

.from {
    color: red;
}

.status {
  color: green;
}

.conversation_title {
  font-weight: bold;
}

.conversation_window {
    width: 300px;
    border: 3px solid #73AD21;
}

.hide-link {
  text-align: right;
  cursor: pointer;
  color: blue;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />