polymer-hackup/send-message.html at master · marcobuschini/polymer-hackup · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<link rel="import" href="components/firebase-element-master/firebase-element.html">
<link rel="import" href="components/paper-input/paper-input.html">

<polymer-element name="send-message">
  <template>
    <style>
    :host {
      display: block;
      position: relative;
      background-color: white;
      padding: 20px;
      width: 100%;
      font-size: 1.2rem;
      font-weight: 300;
    }
    .card-header {
      margin-bottom: 10px;
    }
    polyfill-next-selector { content: '.card-header h2'; }
    .card-header ::content h2 {
      margin: 0;
      font-size: 1.8rem;
      font-weight: 300;
    }
    polyfill-next-selector { content: '.card-header img'; }
    .card-header ::content img {
      width: 70px;
      border-radius: 50%;
      margin: 10px;
    }
    core-icon-button {
      position: absolute;
      top: 3px;
      right: 3px;
      color: #636363;
    }
    :host([favorite]) core-icon-button {
      color: #da4336;
    }
    </style>
    <firebase-element id="base" data="{{posts}}" location="https://polymer-hackup.firebaseio.com/" log></firebase-element>
    <div class="card-header" layout horizontal center>

      <content select="img"></content>
      <content select="h2"></content>

    </div>
    <paper-input id="text" label="Message" value="{{text}}"></paper-input>

    <core-icon-button
      id="sendicon"
      icon="send"
      on-tap="{{sendMessage}}">
    </core-icon-button>

  </template>
  <script>
  Polymer({
      readCookie : function (name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for(var i=0;i < ca.length;i++) {
          var c = ca[i];
          while (c.charAt(0)==' ') c = c.substring(1,c.length);
          if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
      }
      return null;
      },
      avatars : {1:"images/avatar-03.svg",
          2:"images/avatar-04.svg",
          3:"images/avatar-05.svg",
          4:"images/avatar-06.svg",
          5:"images/avatar-07.svg"},
    sendMessage: function() {
      var idAvatar = this.readCookie("userid");
      var name = this.readCookie("username");
      if(typeof this.text !== undefined && this.text !=""
              && typeof this.name !== undefined && this.name !== "")
      {
          var message = {};
          message.avatar = this.avatars[idAvatar];
          message.text = this.text;
          message.username = name;
          this.$.base.push(message);
          this.username = "";
          this.text = "";
      }
      else
      {
          //TODO -- error messsage
      }
    }
  });
  </script>
</polymer-element>