Skip to content

Replaced scrubber in wat-player-controls with wat-slider #96

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Replaced scrubber in wat-player-controls with wat-slider #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 89 additions & 0 deletions internal/wat-slider/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<!--
Copyright 2014 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and limitations
under the License.
-->

<!doctype html>

<link rel="import" href="../../../polymer/polymer.html">
<script src="../../../platform/platform.js"></script>
<link rel="import" href="wat-slider.html">
<link rel="import" href="../wat-button/wat-button.html">

<polymer-element name="wat-slider-button-demo" attributes="textSize step min max">
<template>
<style>
@import url('http://fonts.googleapis.com/css?family=Roboto');
:host {
font-family: Roboto, sans-serif;
}
label,
wat-slider,
#text-size,
wat-button {
width: 200px;
}
label {
display: block;
}
label,
#text-size {
text-align: center;
}
#text-size {
font-size: {{textSize}}px;
}
.black {
color: black;
}
.red {
color: red;
}
</style>
<label for="slider">Change Text Size:</label>
<wat-slider id="slider" value="{{textSize}}" min="{{min}}" max="{{max}}" step="{{step}}"></wat-slider>
<div id="text-size">{{textSize}}</div>
<wat-button on-click="{{changeColour}}">{{buttonText}}</wat-button>
</template>
<script>
Polymer('wat-slider-button-demo', {
textSize: 50,
min: 0,
max: 100,
step: 1,
colour: 'black',
buttonText: 'Make Text Red',
ready: function() {
this.textSize = (this.max + this.min) / 2;
this.$['text-size'].classList.add(this.colour);
},
colourChanged: function() {
if (this.colour == 'red') {
this.$['text-size'].classList.remove('black');
this.$['text-size'].classList.add('red');
this.buttonText = 'Make Text Black';
} else {
this.$['text-size'].classList.remove('red');
this.$['text-size'].classList.add('black');
this.buttonText = 'Make Text Red';
}
},
changeColour: function() {
this.colour = this.colour == 'red' ? 'black' : 'red';
}
});
</script>
</polymer-element>

<wat-slider-button-demo step="2"></wat-slider-button-demo>
55 changes: 55 additions & 0 deletions internal/wat-slider/wat-slider.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<!--
Copyright 2014 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and limitations
under the License.
-->

<!DOCTYPE html>

<link rel="import" href="../../../polymer/polymer.html">

<polymer-element name="wat-slider" attributes="value step min max title" noscript>
<template>
<style>
:host {
display: flex;
align-items: center;
}
.slider {
flex-grow: 1;
-webkit-appearance: none;
outline: none;
overflow: hidden;
border: 1px solid rgba(221,221,221,1);
background-color: white;
border-radius: 99px;
box-shadow: 1px 1px 3px rgba(0,0,0,.21) inset;
cursor: pointer;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
background: rgba(66, 133, 244, 1);
height: 13px;
width: 13px;
border-radius: 50%;
box-shadow: -1px -1px 5px rgba(0,0,0,.42) inset,
-1px -1px 4px 3px rgba(66,133,244,.84) inset,
1px 1px 3px rgba(0,0,0,.3),
-203px 0 0 198px rgba(66,133,244,.42);
cursor: pointer;
}
</style>
<input class="slider" type="range" value="{{value}}" step="{{step}}"
min="{{min}}" max="{{max}}" title="{{title}}">
</template>
</polymer-element>
42 changes: 10 additions & 32 deletions wat-player-controls/wat-player-controls.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@

<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../internal/wat-button/wat-button.html">
<link rel="import" href="../internal/wat-slider/wat-slider.html">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<polymer-element name="wat-player-controls" attributes="step">
Expand All @@ -62,34 +63,6 @@
background-color: white;
}

.scrubber {
-webkit-appearance: none;
margin: 2px;
width: 150px;
vertical-align: middle;
outline: none;
overflow: hidden;
border: 1px solid rgba(221,221,221,1);
background-color: white;
border-radius: 99px;
box-shadow: 1px 1px 3px rgba(0,0,0,.21) inset;
cursor: pointer;
}


.scrubber::-webkit-slider-thumb {
-webkit-appearance: none;
background: rgba(66, 133, 244, 1);
height: 13px;
width: 13px;
border-radius: 50%;
box-shadow: -1px -1px 5px rgba(0,0,0,.42) inset,
-1px -1px 4px 3px rgba(66,133,244,.84) inset,
1px 1px 3px rgba(0,0,0,.3),
-203px 0 0 198px rgba(66,133,244,.42);
cursor: pointer;
}

.number {
width: 4em;
margin: 2px;
Expand All @@ -104,6 +77,10 @@
border: 1px solid rgba(66,133,244,1);
outline: none;
}

wat-slider {
width: 156px;
}
</style>

<wat-button on-click="{{playPause}}" title="Play / Pause">
Expand All @@ -127,10 +104,11 @@
</wat-button>
<input class="number" type="Number" value="{{player.playbackRate}}"
step="0.1" title="Playback Rate">
<input class="scrubber" type="range" value="{{player.currentTime}}"
step="{{step}}" min="{{player.source.startTime}}"
max="{{player.source.endTime}}" on-pointerup="{{resume}}"
on-pointerdown="{{pauseWhileSeeking}}" title="Adjust Current Time">
<wat-slider value="{{player.currentTime}}" step="{{step}}"
min="{{player.source.startTime}}" max="{{player.source.endTime}}"
on-pointerdown="{{pauseWhileSeeking}}" on-pointerup="{{resume}}"
title="Adjust Current Time">
</wat-slider>
</template>

<script>
Expand Down