girliemac · September 1, 2016 14:47
diff --git a/0.txt b/0.txt
 This is a gist for my blog/tutorial, "Creating a Chat App with Material Design using Polymer"
diff --git a/01.html b/01.html
 <!-- Import element -->
 <link rel="import" href="paper-fab"> 
 ...
 <!-- Use element -->
 <paper-fab icon="send"></paper-fab>
diff --git a/02.html b/02.html
 <!DOCTYPE html>
 <html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
  </head>
  <body>
 ...
diff --git a/03.html b/03.html
 <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

 <link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
 <link rel="import" href="bower_components/core-item/core-item.html"> 
 <link rel="import" href="bower_components/paper-input/paper-input.html">
 <link rel="import" href="bower_components/paper-fab/paper-fab.html">
diff --git a/04.html b/04.html
 <body fullbleed unresolved>
  <core-scaffold>
  
    <!-- Drawer panel -->
    <core-header-panel navigation flex>
      <core-toolbar class="tall">
        <!-- an avatar and username will be here -->
      </core-toolbar>
    </core-header-panel>
  	
    <!-- App Title -->
    <div tool layout horizontal flex>
    	<span flex>Kitteh Anonymous</span>
    	<core-icon icon="account-circle"></core-icon>
    	<span><!-- number of people online --></span> 
    </div>
    
    <!-- Main content -->
    <div flex>...</div>
    
  </core-scaffold>
 </body>
diff --git a/05.html b/05.html
 <!-- Main content -->

 <div class="send-message" layout horizontal>
  <paper-input flex label="Type message..." id="input" value="{{input}}"></paper-input>
  <paper-fab icon="send" id="sendButton" on-tap="{{sendMyMessage}}"></paper-fab>
 </div>
diff --git a/06.html b/06.html
 <body fullbleed unresolved>
  <template is="auto-binding">
    <core-scaffold>
      ...
    </core-scaffold>
  </template>
 </body>
diff --git a/07.js b/07.js
 var template = document.querySelector('template[is=auto-binding]');
 doSomething(template.input);
diff --git a/08.html b/08.html
 <template repeat="{{item in items}}">
  <core-item icon="{{item.icon}}" label="{{item.title}}"></core-item>
 </template>
diff --git a/09.js b/09.js
 template.items = [
  {icon: 'cloud', title: 'PubNub'},
  {icon: 'polymer', title: 'Polymer'},
  {icon: 'favorite', title: 'Love'}
 ];
diff --git a/10.html b/10.html
 <polymer-element name="x-chat-list" attributes="avatar color username text">
  <template>
  <section class="user-list" layout horizontal>
    <div class="avatar {{color}}" style="background-image: url({{avatar}})"></div>
    <div flex>
      <div class="username">{{username}}</div>
      <div class="text">{{text}}</div>
    </div>
  </section>
  </template>
  <script>
    Polymer('x-chat-list', { // set default values
      avatar: '', 
      color: '',
      username: '',
      text: ''
    });
  </script>
 </polymer-element>
diff --git a/11.html b/11.html
 <link rel="import" href="x-chat-list.html">
diff --git a/12.html b/12.html
 <div flex class="chat-list">
  <template repeat="{{message in messages}}">
    <x-chat-list color="{{message.color}}" 
                 avatar="{{message.avatar}}" 
                 username="{{message.uuid}}" 
                 text="{{message.text}}"></x-chat-list>
  </template>
 </div>
diff --git a/13.html b/13.html
 <link rel="import" href="bower_components/pubnub-polymer/pubnub-element.html">
diff --git a/14.html b/14.html
 <core-pubnub 
  publish_key="your_pub_key" 
  subscribe_key="your_sub_key" 
  uuid="{{uuid}}"></core-pubnub>
diff --git a/15.js b/15.js
 var randomColor = function() {   
  var colors = ['navy', 'slate', 'olive', 'moss', 'chocolate',...];   
  return colors[(Math.random() * colors.length) >>> 0];
 };

 var randomCat = function() { ... }; 

 var color = randomColor();
 var cat = randomCat();

 template.uuid = color + '-' + cat;
 templtae.color = color;
 template.avatar = 'images/' + cat + '.jpg';
diff --git a/16.html b/16.html
 <core-pubnub publish_key="demo" subscribe_key="demo">
  <core-pubnub-publish id="pub" channel="polymer-chat" message="Hello">
  </core-pubnub-publish>
 </core-pubnub>
diff --git a/17.html b/17.html
 <paper-fab icon="send" on-tap="{{sendMyMessage}}"></paper-fab>
diff --git a/18.js b/18.js
 template.sendMyMessage = function(e) {
  if(!template.input) return; // if the input field is empty, do nothing.

  template.$.pub.message = {
    uuid: uuid, 
    avatar: avatarUrl,
    color: color, 
    text: template.input  
  };
  template.$.pub.publish();
 };
diff --git a/19.html b/19.html
 <core-pubnub-subscribe 
  channel="polymer-chat" 
  id="sub" 
  messages="{{messages}}" 
  on-callback="{{subscribeCallback}}"> 
diff --git a/20.html b/20.html
 <div flex class="chat-list">
  <template repeat="{{message in messages}}">
    <x-chat-list 
      color="{{message.color}}" 
      avatar="{{message.avatar}}" 
      username="{{message.uuid}}" 
      text="{{message.text}}"></x-chat-list>
  </template>
 </div>
diff --git a/21.js b/21.js
 template.subscribeCallback = function(e) {
  template.async(function(){
    var chatDiv = document.querySelector('.chat-list');
    chatDiv.scrollTop = chatDiv.scrollHeight; // scroll to bottom
  });
 };
	<!-- Import element -->
	<link rel="import" href="paper-fab">
	...
	<!-- Use element -->
	<paper-fab icon="send"></paper-fab>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
	</head>
	<body>
	...
	<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

	<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
	<link rel="import" href="bower_components/core-item/core-item.html">
	<link rel="import" href="bower_components/paper-input/paper-input.html">
	<link rel="import" href="bower_components/paper-fab/paper-fab.html">
	<body fullbleed unresolved>
	<core-scaffold>

	<!-- Drawer panel -->
	<core-header-panel navigation flex>
	<core-toolbar class="tall">
	<!-- an avatar and username will be here -->
	</core-toolbar>
	</core-header-panel>

	<!-- App Title -->
	<div tool layout horizontal flex>
	<span flex>Kitteh Anonymous</span>
	<core-icon icon="account-circle"></core-icon>
	<span><!-- number of people online --></span>
	</div>

	<!-- Main content -->
	<div flex>...</div>

	</core-scaffold>
	</body>
	<!-- Main content -->

	<div class="send-message" layout horizontal>
	<paper-input flex label="Type message..." id="input" value="{{input}}"></paper-input>
	<paper-fab icon="send" id="sendButton" on-tap="{{sendMyMessage}}"></paper-fab>
	</div>
	<body fullbleed unresolved>
	<template is="auto-binding">
	<core-scaffold>
	...
	</core-scaffold>
	</template>
	</body>
	var template = document.querySelector('template[is=auto-binding]');
	doSomething(template.input);
	<template repeat="{{item in items}}">
	<core-item icon="{{item.icon}}" label="{{item.title}}"></core-item>
	</template>
	template.items = [
	{icon: 'cloud', title: 'PubNub'},
	{icon: 'polymer', title: 'Polymer'},
	{icon: 'favorite', title: 'Love'}
	];
	<polymer-element name="x-chat-list" attributes="avatar color username text">
	<template>
	<section class="user-list" layout horizontal>
	<div class="avatar {{color}}" style="background-image: url({{avatar}})"></div>
	<div flex>
	<div class="username">{{username}}</div>
	<div class="text">{{text}}</div>
	</div>
	</section>
	</template>
	<script>
	Polymer('x-chat-list', { // set default values
	avatar: '',
	color: '',
	username: '',
	text: ''
	});
	</script>
	</polymer-element>