Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

twinkle: Update vector classes (vectorMenu -> vector-menu) for the Twinkle menu #962

Merged
merged 1 commit into from
Jun 17, 2020
Merged

twinkle: Update vector classes (vectorMenu -> vector-menu) for the Twinkle menu #962

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion twinkle.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Explicitly set width of TW menu so that we can use a hidden peer gadget
* to add space where the TW menu would go before it loads.
*/
.skin-vector #p-twinkle {
.skin-vector .vector-menu-dropdown #p-twinkle {
width: 3.24em;
}

Expand Down
80 changes: 41 additions & 39 deletions twinkle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,14 +216,15 @@ Twinkle.getPref = function twinkleGetPref(name) {
* portlet menu types all work slightly different.
*
* Available navigation areas depend on the skin used.
* Vector:
* For each option, the outer div class contains "vector-menu", the inner div class is "vector-menu-content", and the ul is "vector-menu-content-list"
* "mw-panel", outer div class contains "vector-menu-portal". Existing portlets/elements: "p-logo", "p-navigation", "p-interaction", "p-tb", "p-coll-print_export"
* "left-navigation", outer div class contains "vector-menu-tabs" or "vector-menu-dropdown". Existing portlets: "p-namespaces", "p-variants" (menu)
* "right-navigation", outer div class contains "vector-menu-tabs" or "vector-menu-dropdown". Existing portlets: "p-views", "p-cactions" (menu), "p-search"
* Special layout of p-personal portlet (part of "head") through specialized styles.
* Monobook:
* "column-one", outer div class "portlet", inner div class "pBody". Existing portlets: "p-cactions", "p-personal", "p-logo", "p-navigation", "p-search", "p-interaction", "p-tb", "p-coll-print_export"
* Special layout of p-cactions and p-personal through specialized styles.
* Vector:
* "mw-panel", outer div class "portal", inner div class "body". Existing portlets/elements: "p-logo", "p-navigation", "p-interaction", "p-tb", "p-coll-print_export"
* "left-navigation", outer div class "vectorTabs" or "vectorMenu", inner div class "" or "menu". Existing portlets: "p-namespaces", "p-variants" (menu)
* "right-navigation", outer div class "vectorTabs" or "vectorMenu", inner div class "" or "menu". Existing portlets: "p-views", "p-cactions" (menu), "p-search"
* Special layout of p-personal portlet (part of "head") through specialized styles.
* Modern:
* "mw_contentwrapper" (top nav), outer div class "portlet", inner div class "pBody". Existing portlets or elements: "p-cactions", "mw_content"
* "mw_portlets" (sidebar), outer div class "portlet", inner div class "pBody". Existing portlets: "p-navigation", "p-search", "p-interaction", "p-tb", "p-coll-print_export"
Expand Down Expand Up @@ -268,7 +269,8 @@ Twinkle.addPortlet = function(navigation, id, text, type, nextnodeid) {
if (navigation !== 'portal' && navigation !== 'left-navigation' && navigation !== 'right-navigation') {
navigation = 'mw-panel';
}
outerDivClass = navigation === 'mw-panel' ? 'portal' : type === 'menu' ? 'vectorMenu' : 'vectorTabs';
outerDivClass = 'vector-menu vector-menu-' + (navigation === 'mw-panel' ? 'portal' : type === 'menu' ? 'dropdown' : 'tabs');
innerDivClass = 'vector-menu-content';
break;
case 'modern':
if (navigation !== 'mw_portlets' && navigation !== 'mw_contentwrapper') {
Expand All @@ -289,6 +291,7 @@ Twinkle.addPortlet = function(navigation, id, text, type, nextnodeid) {
// Build the DOM elements.
var outerDiv = document.createElement('nav');
outerDiv.setAttribute('aria-labelledby', id + '-label');
// Vector getting vector-menu-empty FIXME TODO
outerDiv.className = outerDivClass + ' emptyPortlet';
outerDiv.id = id;
if (nextnode && nextnode.parentNode === root) {
Expand All @@ -297,52 +300,51 @@ Twinkle.addPortlet = function(navigation, id, text, type, nextnodeid) {
root.appendChild(outerDiv);
}

var h5 = document.createElement('h3');
h5.id = id + '-label';
var h3 = document.createElement('h3');
h3.id = id + '-label';
var ul = document.createElement('ul');

if (outerDivClass === 'vectorMenu') {

if (skin === 'vector') {
// add invisible checkbox to keep menu open when clicked
// similar to the p-cactions ("More") menu
var chkbox = document.createElement('input');
chkbox.className = 'vectorMenuCheckbox';
chkbox.setAttribute('type', 'checkbox');
chkbox.setAttribute('aria-labelledby', id + '-label');
outerDiv.appendChild(chkbox);

var span = document.createElement('span');
span.appendChild(document.createTextNode(text));
h5.appendChild(span);
if (outerDivClass.indexOf('vector-menu-dropdown') !== -1) {
var chkbox = document.createElement('input');
chkbox.className = 'vectorMenuCheckbox vector-menu-checkbox'; // remove vectorMenuCheckbox after 1.35-wmf.37 goes live
chkbox.setAttribute('type', 'checkbox');
chkbox.setAttribute('aria-labelledby', id + '-label');
outerDiv.appendChild(chkbox);

var a = document.createElement('a');
a.href = '#';
var span = document.createElement('span');
span.appendChild(document.createTextNode(text));
h3.appendChild(span);

$(a).click(function(e) {
e.preventDefault();
});
var a = document.createElement('a');
a.href = '#';

h5.appendChild(a);
outerDiv.appendChild(h5);
$(a).click(function(e) {
e.preventDefault();
});

ul.className = 'menu';
outerDiv.appendChild(ul);
h3.appendChild(a);
}

outerDiv.appendChild(h3);
ul.className = 'menu vector-menu-content-list'; // remove menu after 1.35-wmf.37 goes live
} else {
h3.appendChild(document.createTextNode(text));
outerDiv.appendChild(h3);
}

h5.appendChild(document.createTextNode(text));
outerDiv.appendChild(h5);
if (innerDivClass) {
var innerDiv = document.createElement('div');
innerDiv.className = innerDivClass;
innerDiv.appendChild(ul);
outerDiv.appendChild(innerDiv);
} else {
outerDiv.appendChild(ul);
}

if (innerDivClass) {
var innerDiv = document.createElement('div');
innerDiv.className = innerDivClass;
innerDiv.appendChild(ul);
outerDiv.appendChild(innerDiv);
} else {
outerDiv.appendChild(ul);
}


return outerDiv;

};
Expand Down