jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/360771 )
Change subject: demos: Allow linking to specific widgets
......................................................................
demos: Allow linking to specific widgets
* Insert a 'Link to this example' link (or '#' for short) next to the
console toggle.
* If none is set, set an 'id' for each FieldLayout based on its label.
For unlabelled fields, do this on the parent FieldsetLayout instead.
* Override browser behavior for linking to fragment identifiers to
avoid target elements being hidden under our fixed header.
Change-Id: I8dcc07236db70d3ab47efc366451f349a289018e
---
M demos/demo.js
M demos/index.html
M demos/pages/widgets.js
M demos/styles/demo.css
4 files changed, 102 insertions(+), 3 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, but someone else must approve
jenkins-bot: Verified
VolkerE: Looks good to me, approved
diff --git a/demos/demo.js b/demos/demo.js
index e4c121e..b244bbe 100644
--- a/demos/demo.js
+++ b/demos/demo.js
@@ -233,6 +233,19 @@
*/
Demo.static.defaultPlatform = 'desktop';
+/* Static Methods */
+
+/**
+ * Scroll to current fragment identifier. We have to do this manually because
of the fixed header.
+ */
+Demo.static.scrollToFragment = function () {
+ var elem = document.getElementById( location.hash.slice( 1 ) );
+ if ( elem ) {
+ // The additional '10' is just because it looks nicer.
+ $( window ).scrollTop( $( elem ).offset().top - $( '.demo-menu'
).outerHeight() - 10 );
+ }
+};
+
/* Methods */
/**
@@ -719,3 +732,41 @@
return $console;
};
+
+/**
+ * Build a link to this example.
+ *
+ * @param {OO.ui.Layout} item
+ * @param {OO.ui.FieldsetLayout} parentItem
+ * @return {jQuery} Link interface element
+ */
+Demo.prototype.buildLinkExample = function ( item, parentItem ) {
+ var $linkExample, label, fragment;
+
+ if ( item.$label.text() === '' ) {
+ item = parentItem;
+ }
+ fragment = item.elementId;
+ if ( !fragment ) {
+ label = item.$label.text();
+ fragment = label.replace( /[^\w]+/g, '-' ).replace( /^-|-$/g,
'' );
+ item.setElementId( fragment );
+ }
+
+ $linkExample = $( '<a>' )
+ .addClass( 'demo-link-example' )
+ .attr( 'title', 'Link to this example' )
+ .attr( 'href', '#' + fragment )
+ .on( 'click', function ( e ) {
+ // We have to handle this manually in order to call
.scrollToFragment() even if it's the same
+ // fragment. Normally, the browser will scroll but not
fire a 'hashchange' event in this
+ // situation, and the scroll position will be off
because of our fixed header.
+ if ( e.which === OO.ui.MouseButtons.LEFT ) {
+ location.hash = $( this ).attr( 'href' );
+ Demo.static.scrollToFragment();
+ e.preventDefault();
+ }
+ } );
+
+ return $linkExample;
+};
diff --git a/demos/index.html b/demos/index.html
index 6b2c924..e13fa5c 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -52,21 +52,27 @@
<script src="pages/toolbars.js"></script>
<script>
$( function () {
- var demo;
+ var demo, lastQuery = location.search;
function setup() {
var
prevPage = demo ? demo.mode.page : null,
scrollPos = $( window ).scrollTop();
if ( demo ) {
+ if ( lastQuery === location.search ) {
+ return false;
+ }
demo.destroy();
}
+ lastQuery = location.search;
demo = new Demo();
$( 'body' ).append( demo.$element );
demo.initialize().done( function () {
- if ( prevPage === demo.mode.page ) {
+ if ( prevPage === demo.mode.page &&
scrollPos ) {
// Restore scroll position from
before we destroyed the demo
$( window ).scrollTop(
scrollPos );
+ } else {
+ Demo.static.scrollToFragment();
}
} );
}
@@ -74,6 +80,7 @@
setup();
$( window ).on( 'popstate', setup );
+ $( window ).on( 'hashchange',
Demo.static.scrollToFragment );
} )
</script>
</body>
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index 2735559..6a38cc8 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -2740,6 +2740,7 @@
$.each( fieldsetLayout.getItems(), function ( j, fieldLayout ) {
fieldLayout.$element.append(
+ demo.buildLinkExample( fieldLayout,
fieldsetLayout instanceof OO.ui.FormLayout ? fieldLayout : fieldsetLayout ),
demo.buildConsole( fieldLayout, 'layout',
'widget', showLayoutCode )
);
} );
diff --git a/demos/styles/demo.css b/demos/styles/demo.css
index 8e39658..34611fe 100644
--- a/demos/styles/demo.css
+++ b/demos/styles/demo.css
@@ -63,6 +63,7 @@
box-sizing: border-box;
}
+.demo-link-example,
.demo-console-toggle {
float: right;
margin-top: -2.5em;
@@ -72,12 +73,27 @@
transition: background-color 100ms, color 100ms;
}
+.demo-link-example {
+ position: relative;
+ top: 1px;
+ right: 2em;
+ opacity: 0;
+ -webkit-transition: opacity 100ms;
+ -moz-transition: opacity 100ms;
+ transition: opacity 100ms;
+}
+
+.oo-ui-fieldsetLayout-group > .oo-ui-fieldLayout:first-child
.demo-link-example {
+ right: 7.2em;
+ opacity: 1;
+}
+
.demo-console-expanded .demo-console-toggle {
margin-top: -3em;
}
+.demo-link-example::after,
.demo-console-toggle::after {
- content: '↓';
color: #36c;
position: relative;
display: inline-block;
@@ -92,8 +108,21 @@
transition: color 100ms;
}
+.demo-link-example::after,
.demo-console-toggle:hover::after {
color: #447ff5;
+}
+
+.demo-link-example::after {
+ content: '#';
+}
+
+.demo-container > .oo-ui-fieldsetLayout:first-child
.oo-ui-fieldLayout:first-child .demo-link-example::after {
+ content: 'Link to this example #';
+}
+
+.demo-console-toggle::after {
+ content: '↓';
}
.demo-console-expanded .demo-console-toggle::after {
@@ -106,6 +135,10 @@
.oo-ui-fieldsetLayout-group > .oo-ui-fieldLayout:first-child
.demo-console-expanded .demo-console-toggle::after {
content: 'Hide code ↑';
+}
+
+.oo-ui-fieldLayout:hover > .demo-link-example {
+ opacity: 1;
}
.demo-console-collapsed .demo-sample-code,
@@ -280,8 +313,11 @@
max-width: 50em;
}
+.oo-ui-fieldLayout-align-top.oo-ui-actionFieldLayout .demo-link-example,
.oo-ui-fieldLayout-align-top.oo-ui-actionFieldLayout .demo-console-toggle,
+.oo-ui-fieldLayout-align-left .demo-link-example,
.oo-ui-fieldLayout-align-left .demo-console-toggle,
+.oo-ui-fieldLayout-align-right .demo-link-example,
.oo-ui-fieldLayout-align-right .demo-console-toggle {
margin-right: -2em;
}
@@ -352,6 +388,7 @@
width: calc( 100% + 2.5em ); /* equals `100%` + `padding` of
`.demo-container` above */
}
+ .demo-link-example,
.demo-console-toggle {
margin-right: -2.5em;
}
@@ -360,6 +397,7 @@
margin-right: 0;
}
+ .oo-ui-fieldsetLayout-group > .oo-ui-fieldLayout:first-child
.demo-link-example,
.oo-ui-fieldsetLayout-group > .oo-ui-fieldLayout:first-child
.demo-console-toggle {
margin-top: 0;
}
@@ -429,11 +467,13 @@
width: 100%;
}
+ .demo-link-example,
.demo-console-toggle,
.demo-console-expanded .demo-console-toggle {
margin-right: 0;
}
+ .oo-ui-fieldsetLayout-group > .oo-ui-fieldLayout:first-child
.demo-link-example,
.oo-ui-fieldsetLayout-group > .oo-ui-fieldLayout:first-child
.demo-console-toggle {
margin-top: -2.5em;
}
--
To view, visit https://gerrit.wikimedia.org/r/360771
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I8dcc07236db70d3ab47efc366451f349a289018e
Gerrit-PatchSet: 2
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Hashar <[email protected]>
Gerrit-Reviewer: Prtksxna <[email protected]>
Gerrit-Reviewer: VolkerE <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
