Split out popup functionality from ve.ui.PopupButtonWidget to ve.ui.PopuppableElement

Change-Id: I522d852d81d9674723a3262da3f030417f4fc3be

VisualEditor.php

@@ -427,6 +427,7 @@ $wgResourceModules += array(
 			've/ui/elements/ve.ui.IconedElement.js',
 			've/ui/elements/ve.ui.GroupElement.js',
 			've/ui/elements/ve.ui.FlaggableElement.js',
+			've/ui/elements/ve.ui.PopuppableElement.js',
 
 			've/ui/ve.ui.Surface.js',
 			've/ui/ve.ui.Context.js',

demos/ve/index.php

@@ -226,6 +226,7 @@ $html = file_get_contents( $page );
 		<script src="../../modules/ve/ui/elements/ve.ui.IconedElement.js"></script>
 		<script src="../../modules/ve/ui/elements/ve.ui.GroupElement.js"></script>
 		<script src="../../modules/ve/ui/elements/ve.ui.FlaggableElement.js"></script>
+		<script src="../../modules/ve/ui/elements/ve.ui.PopuppableElement.js"></script>
 		<script src="../../modules/ve/ui/ve.ui.Surface.js"></script>
 		<script src="../../modules/ve/ui/ve.ui.Context.js"></script>
 		<script src="../../modules/ve/ui/ve.ui.Frame.js"></script>

modules/ve/test/index.php

@@ -170,6 +170,7 @@
 		<script src="../../ve/ui/elements/ve.ui.IconedElement.js"></script>
 		<script src="../../ve/ui/elements/ve.ui.GroupElement.js"></script>
 		<script src="../../ve/ui/elements/ve.ui.FlaggableElement.js"></script>
+		<script src="../../ve/ui/elements/ve.ui.PopuppableElement.js"></script>
 		<script src="../../ve/ui/ve.ui.Surface.js"></script>
 		<script src="../../ve/ui/ve.ui.Context.js"></script>
 		<script src="../../ve/ui/ve.ui.Frame.js"></script>

modules/ve/ui/elements/ve.ui.PopuppableElement.js

@@ -0,0 +1,62 @@
+/*!
+ * VisualEditor UserInterface PopuppableElement class.
+ *
+ * @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * Popuppable element.
+ *
+ * @class
+ * @abstract
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ * @cfg {number} [popupWidth=320] Width of popup
+ * @cfg {number} [popupHeight] Height of popup
+ * @cfg {Object} [popup] Configuration to pass to popup
+ */
+ve.ui.PopuppableElement = function VeUiPopuppableElement( config ) {
+	// Configuration initialization
+	config = ve.extendObject( { 'popupWidth': 320 }, config );
+
+	// Properties
+	this.popup = new ve.ui.PopupWidget( ve.extendObject(
+		{ 'align': 'center', 'autoClose': true },
+		config.popup,
+		{ '$$': this.$$, '$autoCloseIgnore': this.$ }
+	) );
+	this.popupWidth = config.popupWidth;
+	this.popupHeight = config.popupHeight;
+};
+
+/* Methods */
+
+/**
+ * Get popup.
+ *
+ * @method
+ * @returns {ve.ui.PopupWidget} Popup widget
+ */
+ve.ui.PopuppableElement.prototype.getPopup = function () {
+	return this.popup;
+};
+
+/**
+ * Show popup.
+ *
+ * @method
+ */
+ve.ui.PopuppableElement.prototype.showPopup = function () {
+	this.popup.show().display( this.popupWidth, this.popupHeight );
+};
+
+/**
+ * Hide popup.
+ *
+ * @method
+ */
+ve.ui.PopuppableElement.prototype.hidePopup = function () {
+	this.popup.hide();
+};

modules/ve/ui/widgets/ve.ui.PopupButtonWidget.js

@@ -10,38 +10,30 @@
  *
  * @class
  * @extends ve.ui.IconButtonWidget
+ * @mixins ve.ui.PopuppableElement
  *
  * @constructor
  * @param {Object} [config] Configuration options
- * @cfg {number} [width=320] Width of popup
- * @cfg {number} [height] Height of popup
- * @cfg {Object} [popup] Configuration to pass to popup
  */
 ve.ui.PopupButtonWidget = function VeUiPopupButtonWidget( config ) {
-	// Configuration initialization
-	config = ve.extendObject( { 'width': 320 }, config );
-
 	// Parent constructor
 	ve.ui.IconButtonWidget.call( this, config );
 
-	// Properties
+	// Mixin constructors
-	this.popup = new ve.ui.PopupWidget( ve.extendObject(
+	ve.ui.PopuppableElement.call( this, config );
-		{ 'align': 'center', 'autoClose': true },
-		config.popup,
-		{ '$$': this.$$, '$autoCloseIgnore': this.$ }
-	) );
-	this.width = config.width;
-	this.height = config.height;
 
 	// Initialization
-	this.$.addClass( 've-ui-popupButtonWidget' );
+	this.$
-	this.$.append( this.popup.$ );
+		.addClass( 've-ui-popupButtonWidget' )
+		.append( this.popup.$ );
 };
 
 /* Inheritance */
 
 ve.inheritClass( ve.ui.PopupButtonWidget, ve.ui.IconButtonWidget );
 
+ve.mixinClass( ve.ui.PopupButtonWidget, ve.ui.PopuppableElement );
+
 /* Methods */
 
 /**
@@ -66,31 +58,3 @@ ve.ui.PopupButtonWidget.prototype.onClick = function ( e ) {
 	}
 	return false;
 };
-
-/**
- * Get popup.
- *
- * @method
- * @returns {ve.ui.PopupWidget} Popup widget
- */
-ve.ui.PopupButtonWidget.prototype.getPopup = function () {
-	return this.popup;
-};
-
-/**
- * Show popup.
- *
- * @method
- */
-ve.ui.PopupButtonWidget.prototype.showPopup = function () {
-	this.popup.show().display( this.width, this.height );
-};
-
-/**
- * Hide popup.
- *
- * @method
- */
-ve.ui.PopupButtonWidget.prototype.hidePopup = function () {
-	this.popup.hide();
-};