-
Notifications
You must be signed in to change notification settings - Fork 7.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e05931d
commit 0ffb27a
Showing
5 changed files
with
175 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| /** | ||
| * @file popup-button.js | ||
| */ | ||
| import ClickableComponent from '../clickable-component.js'; | ||
| import Component from '../component.js'; | ||
| import Popup from './popup.js'; | ||
| import * as Dom from '../utils/dom.js'; | ||
| import * as Fn from '../utils/fn.js'; | ||
| import toTitleCase from '../utils/to-title-case.js'; | ||
|
|
||
| /** | ||
| * A button class with a popup control | ||
| * | ||
| * @param {Player|Object} player | ||
| * @param {Object=} options | ||
| * @extends ClickableComponent | ||
| * @class PopupButton | ||
| */ | ||
| class PopupButton extends ClickableComponent { | ||
|
|
||
| constructor(player, options={}){ | ||
| super(player, options); | ||
|
|
||
| this.update(); | ||
| } | ||
|
|
||
| /** | ||
| * Update popup | ||
| * | ||
| * @method update | ||
| */ | ||
| update() { | ||
| let popup = this.createPopup(); | ||
|
|
||
| if (this.popup) { | ||
| this.removeChild(this.popup); | ||
| } | ||
|
|
||
| this.popup = popup; | ||
| this.addChild(popup); | ||
|
|
||
| if (this.items && this.items.length === 0) { | ||
| this.hide(); | ||
| } else if (this.items && this.items.length > 1) { | ||
| this.show(); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Create popup - Override with specific functionality for component | ||
| * | ||
| * @return {Popup} The constructed popup | ||
| * @method createPopup | ||
| */ | ||
| createPopup() {} | ||
|
|
||
| /** | ||
| * Create the component's DOM element | ||
| * | ||
| * @return {Element} | ||
| * @method createEl | ||
| */ | ||
| createEl() { | ||
| return super.createEl('div', { | ||
| className: this.buildCSSClass() | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * Allow sub components to stack CSS class names | ||
| * | ||
| * @return {String} The constructed class name | ||
| * @method buildCSSClass | ||
| */ | ||
| buildCSSClass() { | ||
| var menuButtonClass = 'vjs-menu-button'; | ||
|
|
||
| // If the inline option is passed, we want to use different styles altogether. | ||
| if (this.options_.inline === true) { | ||
| menuButtonClass += '-inline'; | ||
| } else { | ||
| menuButtonClass += '-popup'; | ||
| } | ||
|
|
||
| return `vjs-menu-button ${menuButtonClass} ${super.buildCSSClass()}`; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| Component.registerComponent('PopupButton', PopupButton); | ||
| export default PopupButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| /** | ||
| * @file popup.js | ||
| */ | ||
| import Component from '../component.js'; | ||
| import * as Dom from '../utils/dom.js'; | ||
| import * as Fn from '../utils/fn.js'; | ||
| import * as Events from '../utils/events.js'; | ||
|
|
||
| /** | ||
| * The Popup component is used to build pop up controls. | ||
| * | ||
| * @extends Component | ||
| * @class Popup | ||
| */ | ||
| class Popup extends Component { | ||
|
|
||
| /** | ||
| * Add a popup item to the popup | ||
| * | ||
| * @param {Object|String} component Component or component type to add | ||
| * @method addItem | ||
| */ | ||
| addItem(component) { | ||
| this.addChild(component); | ||
| component.on('click', Fn.bind(this, function(){ | ||
| this.unlockShowing(); | ||
| })); | ||
| } | ||
|
|
||
| /** | ||
| * Create the component's DOM element | ||
| * | ||
| * @return {Element} | ||
| * @method createEl | ||
| */ | ||
| createEl() { | ||
| let contentElType = this.options_.contentElType || 'ul'; | ||
| this.contentEl_ = Dom.createEl(contentElType, { | ||
| className: 'vjs-menu-content' | ||
| }); | ||
| var el = super.createEl('div', { | ||
| append: this.contentEl_, | ||
| className: 'vjs-menu' | ||
| }); | ||
| el.appendChild(this.contentEl_); | ||
|
|
||
| // Prevent clicks from bubbling up. Needed for Popup Buttons, | ||
| // where a click on the parent is significant | ||
| Events.on(el, 'click', function(event){ | ||
| event.preventDefault(); | ||
| event.stopImmediatePropagation(); | ||
| }); | ||
|
|
||
| return el; | ||
| } | ||
| } | ||
|
|
||
| Component.registerComponent('Popup', Popup); | ||
| export default Popup; |