designer

designer.html

<link rel="import" href="../paper-slider/paper-slider.html">
<link rel="import" href="../paper-progress/paper-progress.html">
<link rel="import" href="../paper-button/paper-button.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 80%;
        height: 100%;
        box-sizing: border-box;
      }
      #core_card {
        position: absolute;
        width: 300px;
        height: 300px;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        background-color: rgb(255, 255, 255);
      }
      #div {
        width: 100%;
      }
      #timer_progress {
        width: 100%;
        padding-top: 20px;
        padding-bottom: 20px;
      }
      #minutes_slider {
        width: 80%;
      }
      #span {
        width: 20%;
      }
    </style>
    <core-card id="core_card" layout vertical>
      <audio preload="auto" id="bell"> 
    		<source src="http://upload.wikimedia.org/wikipedia/commons/2/25/SingingBowl1.ogg" />
  		</audio>
      <div id="div" horizontal layout center>
        <span id="span">Bell interval</span>
        <paper-slider secondaryprogress="1" editable immediatevalue="5" value="5" min="1" max="60" id="minutes_slider"></paper-slider>
      </div>
      <paper-progress id="timer_progress"></paper-progress>
      <paper-button on-tap="{{start}}" label="Start" id="paper_button"></paper-button>
    </core-card>
  </template>

  <script>
    function nextProgress(bell) {
      this.value += 0.01;
      if (this.value >= this.max) {
        bell.play();
        this.value = this.min;
      }
     	this.async(nextProgress, bell, 10);
    };
    
    Polymer('my-element', {
      start: function() {
				this.seconds = this.$.minutes_slider.value * 60;
				this.progress = this.$.timer_progress;
                
        this.progress.min = 0;
        this.progress.max = this.seconds;
        this.progress.value = this.progress.min;
        
        var bell = this.$.bell;
                
        this.progress.async(nextProgress, bell, 10);
      }
    });

  </script>

</polymer-element>