corburn/es6Polymer.md

## es6Polymer.md

      
    Raw
  

              es6Polymer.md
            
          
    class StockTicker extends HTMLElement {
  createdCallback() {
    this.createShadowRoor().innerHTML = `
      <style> :host { display: block; } </style>
      <div id="quotes"></div>`;
  }
  
  updateQuotes() {
    let url = `https://api.finance.com?q=${this.symbols}`;
    return fetch(url).then(...);
  }
}
document.registerElement('stock-ticker', StockTicker)

class StockTicker() {
  beforeRegister() {
    this.is = 'stock-ticker';
    this.properties = {
      symbols: { type: Array, observer: '_updateQuotes' }
    };
  }
  
  created() {};
  ready() {};
  attached() {};
  detached() {};
  attributeChanged() {};
  ...
  _updateQuotes() {};
}
Polymer(StockTicker);


## polycasts15.md

      
    Raw
  

              polycasts15.md
            
          
    <style is="custom-style">
<!-- If using variables, it is important to place them inside custom-style elements because it gives Polymer one place to look for these declarations -->
  ui-message {
    -ui-message-header-color: white;
  }
</style>

<dom-module id="ui-message">
<style>
  :host {
    display: inline-block;
  }
  .container {
    background-color: grey;
    padding: 10px;
  }
  .header {
    color: var(--ui-message-header-color);
  }
</style>
<template>
  <div class="container">
    div class="header"{{header}}</div>
    <p class="content">{{message}}</p>
  </div>
</template>
</dom-module>


## polycasts25.md

      
    Raw
  

              polycasts25.md
            
          
    Polymer({
  is: 'list-page',
  
  behaviors: [Polymer.NeonAnimationBehavior],
  
  properties: {
    animationConfig: {
      value: function() {
        return {
          'entry': {
            name: 'slide-from-left-animation',
            node: this
          },
          'exit': {
            name: 'fade-out-animation',
            node: this
          }
        }
      }
    }
  }
});

Polymer(
  is: 'config-page',
  behaviors: [Polymer.NeonAnimatableBehavior],
  properties: {
    animationConfig: {
      value: function() {
        return {
          'entry': {
            name: 'slide-from-right-animation',
            node: this
          },
          'exit': {
            name: 'slide-right-animation',
            node: this
          }
        }
      }
    }
  }
});


## polycasts37notes
// polycasts #37 testing ajax with web components tester
// https://www.youtube.com/watch?v=_9qARcdCAn4&index=5&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN
<head>
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
</head>
<body>

<test-fixture id="simple-get">
<template>
<iron-ajax url="/responds_to_get_with_json"></iron-ajax>
</template>
</test-fixture>

<script>
suite('<iron-ajax>', function() {
    //...
    var responseHeaders = {
    json: {'Content-Type': 'application/json'}
    }
  });

  setup(function() {
    server = sinon.fakeServer.create();
    server.responseWith(
      'GET',
      '\/respond_to_get_with_json/.*/, [
      200,
      responseHeaders.json,
      '{"success": true}'
      ]
    );

  teardown(function() {
    // If there is any shared state, get rid of it so the next test will have a clean slate.
    server.restore();
  });

  suite('when making simple GET requests for JSON', function() {
    request = ajax.generateRequest();
    server.respond();
    expect(request.response).to.be.ok;
    expect(request.response).to.be.an('object');
    expect(request.response.success).to.be.equal(true);
  });
</script>
</body>
	// polycasts #37 testing ajax with web components tester
	// https://www.youtube.com/watch?v=_9qARcdCAn4&index=5&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN
	<head>
	<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
	</head>
	<body>

	<test-fixture id="simple-get">
	<template>
	<iron-ajax url="/responds_to_get_with_json"></iron-ajax>
	</template>
	</test-fixture>

	<script>
	suite('<iron-ajax>', function() {
	//...
	var responseHeaders = {
	json: {'Content-Type': 'application/json'}
	}
	});

	setup(function() {
	server = sinon.fakeServer.create();
	server.responseWith(
	'GET',
	'\/respond_to_get_with_json/.*/, [
	200,
	responseHeaders.json,
	'{"success": true}'
	]
	);

	teardown(function() {
	// If there is any shared state, get rid of it so the next test will have a clean slate.
	server.restore();
	});

	suite('when making simple GET requests for JSON', function() {
	request = ajax.generateRequest();
	server.respond();
	expect(request.response).to.be.ok;
	expect(request.response).to.be.an('object');
	expect(request.response.success).to.be.equal(true);
	});
	</script>
	</body>