Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(16)

Unified Diff: ui/file_manager/audio_player/elements/control_panel.js

Issue 1432393003: Revert of AudioPlayer: Update volume controls. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: ui/file_manager/audio_player/elements/control_panel.js
diff --git a/ui/file_manager/audio_player/elements/control_panel.js b/ui/file_manager/audio_player/elements/control_panel.js
index 89562878932e291d1dcad25ac2b8ebd98db8d363..317d5c21059b4254b44311fa93477d26ff49a89d 100644
--- a/ui/file_manager/audio_player/elements/control_panel.js
+++ b/ui/file_manager/audio_player/elements/control_panel.js
@@ -5,6 +5,26 @@
(function() {
'use strict';
+ /**
+ * Moves |target| element above |anchor| element, in order to match the
+ * bottom lines.
+ * @param {HTMLElement} target Target element.
+ * @param {HTMLElement} anchor Anchor element.
+ */
+ function matchBottomLine(target, anchor) {
+ var targetRect = target.getBoundingClientRect();
+ var anchorRect = anchor.getBoundingClientRect();
+
+ var pos = {
+ left: anchorRect.left + anchorRect.width / 2 - targetRect.width / 2,
+ bottom: window.innerHeight - anchorRect.bottom,
+ };
+
+ target.style.position = 'fixed';
+ target.style.left = pos.left + 'px';
+ target.style.bottom = pos.bottom + 'px';
+ }
+
Polymer({
is: 'control-panel',
@@ -77,8 +97,8 @@
volumeSliderShown: {
type: Boolean,
value: false,
- notify: true,
- reflectToAttribute: true
+ observer: 'volumeSliderShownChanged',
+ notify: true
},
/**
@@ -96,6 +116,11 @@
* element is ready.
*/
ready: function() {
+ var onFocusoutBound = this.onVolumeControllerFocusout_.bind(this);
+
+ this.$.volumeSlider.addEventListener('focusout', onFocusoutBound);
+ this.$.volumeButton.addEventListener('focusout', onFocusoutBound);
+
this.$.timeSlider.addEventListener('value-change', function() {
if (this.dragging)
this.dragging = false;
@@ -128,6 +153,44 @@
},
/**
+ * Invoked when the property 'volumeSliderShown' changes.
+ * @param {boolean} shown
+ */
+ volumeSliderShownChanged: function(shown) {
+ this.showVolumeController_(shown);
+ },
+
+ /**
+ * Invoked when the focus goes out of the volume elements.
+ * @param {!UIEvent} event The focusout event.
+ * @private
+ */
+ onVolumeControllerFocusout_: function(event) {
+ if (this.volumeSliderShown) {
+ // If the focus goes out of the volume, hide the volume control.
+ if (!event.relatedTarget ||
+ (!this.$.volumeButton.contains(event.relatedTarget) &&
+ !this.$.volumeSlider.contains(event.relatedTarget))) {
+ this.volumeSliderShown = false;
+ }
+ }
+ },
+
+ /**
+ * Shows/hides the volume controller.
+ * @param {boolean} show True to show the controller, false to hide.
+ * @private
+ */
+ showVolumeController_: function(show) {
+ if (show) {
+ matchBottomLine(this.$.volumeContainer, this.$.volumeButton);
+ this.$.volumeContainer.style.visibility = 'visible';
+ } else {
+ this.$.volumeContainer.style.visibility = 'hidden';
+ }
+ },
+
+ /**
* Converts the time into human friendly string.
* @param {number} time Time to be converted.
* @return {string} String representation of the given time
« no previous file with comments | « ui/file_manager/audio_player/elements/control_panel.html ('k') | ui/file_manager/audio_player/elements/volume_controller.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698