Trevor Parscal has uploaded a new change for review.
https://gerrit.wikimedia.org/r/184008
Change subject: Add AsideLayout
......................................................................
Add AsideLayout
Problem: GridLayout doesn't really solve the problem we need it to solve, and
is most likely an overengineerd pile of JavaScript trash.
Solution: Add a new layout with two areas: the aside which can be positioned on
of the the sides and the content which fills the remaining space. The aside can
be toggled.
TODO: Make BookletLayout inherit from AsideLayout instead of embedding a
GridLayout.
Change-Id: I86b9f6729d8eaf58509fb48c41835c5d8d7587a9
TODO: Consider murdering GridLayout with a blunt object.
---
M build/modules.json
A src/layouts/AsideLayout.js
M src/styles/core.less
A src/styles/layouts/AsideLayout.less
M src/styles/theme.less
5 files changed, 207 insertions(+), 0 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/08/184008/1
diff --git a/build/modules.json b/build/modules.json
index dd94177..54a5f87 100644
--- a/build/modules.json
+++ b/build/modules.json
@@ -38,6 +38,7 @@
"src/dialogs/MessageDialog.js",
"src/dialogs/ProcessDialog.js",
+ "src/layouts/AsideLayout.js",
"src/layouts/BookletLayout.js",
"src/layouts/FieldLayout.js",
"src/layouts/FieldsetLayout.js",
diff --git a/src/layouts/AsideLayout.js b/src/layouts/AsideLayout.js
new file mode 100644
index 0000000..010cf1a
--- /dev/null
+++ b/src/layouts/AsideLayout.js
@@ -0,0 +1,156 @@
+/**
+ * Layout with a content and aside area.
+ *
+ * The aside area can be positioned at the top, right, bottom or left. The
content area will fill
+ * all remaining space.
+ *
+ * @class
+ * @extends OO.ui.Layout
+ * @property {jQuery} $aside Aside DOM node
+ * @property {jQuery} $content Content DOM node
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ * @cfg {number|string} [size='20em'] Size of aside in pixels or any CSS unit
+ * @cfg {boolean} [aside=true] Show aside
+ * @cfg {string} [position=left] Position of aside, either `top`, `right`,
`bottom` or `left`
+ * @cfg {boolean} [collapse] Collapse the aside out of view
+ */
+OO.ui.AsideLayout = function OoUiAsideLayout( config ) {
+ var positions = this.constructor.static.asidePositions;
+
+ // Configuration initialization
+ config = config || {};
+
+ // Parent constructor
+ OO.ui.AsideLayout.super.call( this, config );
+
+ // Properties
+ this.aside = config.aside !== false;
+ this.asideSize = config.asideSize || '20em';
+ this.asidePosition = positions[config.asidePosition] || positions.left;
+ this.$aside = this.$( '<div>' );
+ this.$content = this.$( '<div>' );
+
+ // Initialization
+ this.$aside.css( this.asidePosition.asideSizeProperty, this.asideSize );
+ this.$content.css( this.asidePosition.asidePositionProperty,
this.asideSize );
+ this.$element
+ .addClass( 'oo-ui-asideLayout ' + this.asidePosition.className )
+ .append( this.$content, this.$aside );
+};
+
+/* Setup */
+
+OO.inheritClass( OO.ui.AsideLayout, OO.ui.Layout );
+
+/* Static Properties */
+
+OO.ui.AsideLayout.static.asidePositions = {
+ top: {
+ sizeProperty: 'height',
+ positionProperty: 'top',
+ className: 'oo-ui-asideLayout-top'
+ },
+ right: {
+ sizeProperty: 'width',
+ positionProperty: 'right',
+ className: 'oo-ui-asideLayout-right'
+ },
+ bottom: {
+ sizeProperty: 'height',
+ positionProperty: 'bottom',
+ className: 'oo-ui-asideLayout-bottom'
+ },
+ left: {
+ sizeProperty: 'width',
+ positionProperty: 'left',
+ className: 'oo-ui-asideLayout-left'
+ }
+};
+
+/* Methods */
+
+/**
+ * Toggle aside.
+ *
+ * @param {boolean} show Show aside, omit to toggle
+ * @chainable
+ */
+OO.ui.AsideLayout.prototype.toggleAside = function ( show ) {
+ show = show === undefined ? !this.aside : !!show;
+
+ if ( this.aside !== show ) {
+ this.aside = show;
+ if ( show ) {
+ this.$aside
+ .css( this.asidePosition.asideSizeProperty,
this.asideSize )
+ .css( 'overflow', '' );
+ this.$content.css(
this.asidePosition.asidePositionProperty, this.asideSize );
+ } else {
+ this.$aside
+ .css( this.asidePosition.asideSizeProperty, 0 )
+ .css( 'overflow', 'hidden' );
+ this.$content.css(
this.asidePosition.asidePositionProperty, 0 );
+ }
+ }
+
+ return this;
+};
+
+/**
+ * Set aside size.
+ *
+ * @param {number|string} size Size of aside in pixels or any CSS unit
+ * @chainable
+ */
+OO.ui.AsideLayout.prototype.setAsideSize = function ( size ) {
+ this.asideSize = size;
+ this.$aside.css( this.asidePosition.asideSizeProperty, this.asideSize );
+ this.$content.css( this.asidePosition.asidePositionProperty,
this.asideSize );
+
+ return this;
+};
+
+/**
+ * Get aside size.
+ *
+ * @return {number|string} Aside size
+ */
+OO.ui.AsideLayout.prototype.getAsideSize = function () {
+ return this.asideSize;
+};
+
+/**
+ * Set aside position.
+ *
+ * @param {string} position Position of aside, either `top`, `right`, `bottom`
or `left`
+ * @throws {Error} If position value is not supported
+ * @chainable
+ */
+OO.ui.AsideLayout.prototype.setAsidePosition = function ( position ) {
+ var positions = this.constructor.static.asidePositions;
+
+ if ( !positions[position] ) {
+ throw new Error( 'Cannot set position; unsupported position
value: ' + position );
+ }
+
+ this.$aside.css( this.asidePosition.asideSizeProperty, '' );
+ this.$content.css( this.asidePosition.asidePositionProperty, '' );
+ this.$element.removeClass( this.asidePosition.className );
+ this.asidePosition = positions[position];
+ this.$aside.css( this.asidePosition.asideSizeProperty, this.asideSize );
+ this.$content.css( this.asidePosition.asidePositionProperty,
this.asideSize );
+ this.$element.addClass( this.asidePosition.className );
+
+ return this;
+};
+
+/**
+ * Get aside position.
+ *
+ * @return {string} Aside position
+ */
+OO.ui.AsideLayout.prototype.getAsidePosition = function () {
+ return this.asidePosition;
+};
diff --git a/src/styles/core.less b/src/styles/core.less
index 4032f54..e4f54bd 100644
--- a/src/styles/core.less
+++ b/src/styles/core.less
@@ -29,6 +29,7 @@
@import 'elements/TitledElement.less';
@import 'Layout.less';
+@import 'layouts/AsideLayout.less';
@import 'layouts/BookletLayout.less';
@import 'layouts/FieldLayout.less';
@import 'layouts/FieldsetLayout.less';
diff --git a/src/styles/layouts/AsideLayout.less
b/src/styles/layouts/AsideLayout.less
new file mode 100644
index 0000000..242645b
--- /dev/null
+++ b/src/styles/layouts/AsideLayout.less
@@ -0,0 +1,48 @@
+@import '../common';
+
+.oo-ui-asideLayout {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+
+ &-aside,
+ &-content {
+ position: absolute;
+ .oo-ui-transition(all ease-in-out 200ms);
+ }
+
+ &-content {
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+
+ &-top .oo-ui-asideLayout-aside {
+ left: 0;
+ top: 0;
+ right: 0;
+ }
+
+ &-right .oo-ui-asideLayout-aside {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+
+ &-bottom .oo-ui-asideLayout-aside {
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
+
+ &-left .oo-ui-asideLayout-aside {
+ bottom: 0;
+ left: 0;
+ top: 0;
+ }
+
+ .theme-oo-ui-asideLayout();
+}
diff --git a/src/styles/theme.less b/src/styles/theme.less
index c62fd3f..320f0f8 100644
--- a/src/styles/theme.less
+++ b/src/styles/theme.less
@@ -29,6 +29,7 @@
.theme-oo-ui-messageDialog () {}
.theme-oo-ui-processDialog () {}
+.theme-oo-ui-asideLayout () {}
.theme-oo-ui-bookletLayout () {}
.theme-oo-ui-fieldLayout () {}
.theme-oo-ui-fieldsetLayout () {}
--
To view, visit https://gerrit.wikimedia.org/r/184008
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I86b9f6729d8eaf58509fb48c41835c5d8d7587a9
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Trevor Parscal <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
