Esanders has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/337561 )
Change subject: Preview collapsible handles in tables
......................................................................
Preview collapsible handles in tables
Use CSS :after content to avoids problems with interfering
with CE cursoring. Doesn't let us style the handle exactly
but is good enough for layout preview.
Change-Id: Idec1558420ea7056ca6a1a41bfc1a27bb31d0d46
---
M modules/ve-mw/ce/nodes/ve.ce.MWTableNode.js
M modules/ve-mw/ce/styles/nodes/ve.ce.MWTableNode.css
2 files changed, 79 insertions(+), 10 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/61/337561/1
diff --git a/modules/ve-mw/ce/nodes/ve.ce.MWTableNode.js
b/modules/ve-mw/ce/nodes/ve.ce.MWTableNode.js
index db0e814..336cd35 100644
--- a/modules/ve-mw/ce/nodes/ve.ce.MWTableNode.js
+++ b/modules/ve-mw/ce/nodes/ve.ce.MWTableNode.js
@@ -24,24 +24,28 @@
ve.ce.ClassAttributeNode.call( this );
// Properties
- this.updateSortableHeadersHandler = ve.debounce(
this.updateSortableHeaders );
+ this.updateSortableHeadersDebounced = ve.debounce(
this.updateSortableHeaders );
+ this.updateCollapsibleDebounced = ve.debounce( this.updateCollapsible );
this.$sortableHeaders = $( [] );
+ this.$lastCollapsibleHandle = $( [] );
// Events
- this.connect( this, { setup: 'updateSortableHeadersHandler' } );
+ this.connect( this, { setup: 'updateSortableHeadersDebounced' } );
this.model.connect( this, {
// Update when the table is made sortable or not sortable
- attributeChange: 'updateSortableHeadersHandler',
+ attributeChange: 'onAttributeChange',
// Update when a cell style changes between content cell and
header cell
- cellAttributeChange: 'updateSortableHeadersHandler'
+ cellAttributeChange: 'updateSortableHeadersDebounced'
} );
this.model.getMatrix().connect( this, {
// Update when cells are added, removed, merged, split
- structureChange: 'updateSortableHeadersHandler'
+ structureChange: 'onStructureChange'
} );
// DOM changes
this.$element.addClass( 've-ce-mwTableNode' );
+
+ this.updateCollapsible();
};
/* Inheritance */
@@ -54,21 +58,75 @@
ve.ce.MWTableNode.static.name = 'mwTable';
+/* Methods */
+
+/**
+ * Handle structure change events
+ */
+ve.ce.MWTableNode.prototype.onStructureChange = function () {
+ this.updateSortableHeadersDebounced();
+ this.updateCollapsibleDebounced();
+};
+
+/**
+ * Handle attribute change events.
+ *
+ * @param {string} key Attribute key
+ * @param {string} from Old value
+ * @param {string} to New value
+ */
+ve.ce.MWTableNode.prototype.onAttributeChange = function ( key ) {
+ switch ( key ) {
+ case 'sortable':
+ this.updateSortableHeadersDebounced();
+ break;
+ case 'collapsible':
+ this.updateCollapsibleDebounced();
+ break;
+ }
+};
+
+/**
+ * Update collapsible handles
+ *
+ * @private
+ */
+ve.ce.MWTableNode.prototype.updateCollapsible = function () {
+ var $collapsibleHandle;
+
+ if ( this.model.getCaptionNode() ) {
+ $collapsibleHandle = this.$element.find( '> caption' );
+ } else {
+ $collapsibleHandle = this.$element.find( 'tr:first th, tr:first
td' ).eq( -1 );
+ }
+
+ this.$lastCollapsibleHandle
+ .removeClass( 've-ce-mwTableNode-collapsible-handle' )
+ .removeAttr( 'data-ve-collapse-message' );
+
+ if ( this.model.getAttribute( 'collapsible' ) ) {
+ $collapsibleHandle
+ .addClass( 've-ce-mwTableNode-collapsible-handle' )
+ .attr( 'data-ve-collapse-message', ' [' + ve.msg(
'collapsible-collapse' ) + ']' );
+ }
+ this.$lastCollapsibleHandle = $collapsibleHandle;
+};
+
/**
* Update sortable headers (if the table is sortable).
*
* @private
*/
ve.ce.MWTableNode.prototype.updateSortableHeaders = function () {
- var
- view = this,
- cellModels, cellViews;
+ var cellModels, cellViews,
+ sortable = this.model.getAttribute( 'sortable' ),
+ view = this;
- this.$element.toggleClass( 'jquery-tablesorter',
this.model.getAttribute( 'sortable' ) );
+ this.$element.toggleClass( 'jquery-tablesorter', sortable );
this.$sortableHeaders.removeClass( 'headerSort' );
- if ( this.model.getAttribute( 'sortable' ) ) {
+ if ( sortable ) {
// We only really want the styles. But it's harmless to load
the entire module, and if the user
// ends up saving this change, it will be loaded anyway to
render the real sortable table.
mw.loader.load( 'jquery.tablesorter' );
diff --git a/modules/ve-mw/ce/styles/nodes/ve.ce.MWTableNode.css
b/modules/ve-mw/ce/styles/nodes/ve.ce.MWTableNode.css
index 03a71fe..6a53e9f 100644
--- a/modules/ve-mw/ce/styles/nodes/ve.ce.MWTableNode.css
+++ b/modules/ve-mw/ce/styles/nodes/ve.ce.MWTableNode.css
@@ -13,3 +13,14 @@
.ve-ce-mwTableNode.jquery-tablesorter
th.ve-ce-tableCellNode-header.ve-ce-tableCellNode-editing.headerSort {
cursor: text;
}
+
+.ve-ce-mwTableNode.mw-collapsible >
caption.ve-ce-mwTableNode-collapsible-handle:after,
+.ve-ce-mwTableNode.mw-collapsible > * > tr >
td.ve-ce-mwTableNode-collapsible-handle:after {
+ content: attr( data-ve-collapse-message );
+ color: #888;
+}
+
+.ve-ce-mwTableNode.mw-collapsible >
caption.ve-ce-mwTableNode-collapsible-handle > *:last-child,
+.ve-ce-mwTableNode.mw-collapsible > * > tr >
td.ve-ce-mwTableNode-collapsible-handle > *:last-child {
+ display: inline;
+}
--
To view, visit https://gerrit.wikimedia.org/r/337561
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Idec1558420ea7056ca6a1a41bfc1a27bb31d0d46
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Esanders <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
