Skip to content

Commit

Permalink
editable table now uses a11y-menu-button
Browse files Browse the repository at this point in the history
  • Loading branch information
@nikkimk
nikkimk committed May 6, 2021
1 parent 65bd03f commit f48bad8
Show file tree
Hide file tree
Showing 6 changed files with 111 additions and 68 deletions.
2 changes: 1 addition & 1 deletion .vscode/settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,5 @@
"custom-elements.json"
],
"cSpell.enabled": false,
"compile-hero.disable-compile-files-on-did-save-code": false
"compile-hero.disable-compile-files-on-did-save-code": true
}
10 changes: 10 additions & 0 deletions elements/editable-table/editable-table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ class EditableTable extends displayBehaviors(LitElement) {
table {
min-width: calc(100% - 2.3px);
width: unset;
height: 1px;
}
caption {
width: 100%;
Expand All @@ -126,6 +127,11 @@ class EditableTable extends displayBehaviors(LitElement) {
var(--editable-table-color, #222)
);
}
table *:focus,
table *:hover,
table *:focus-within {
z-index: 2;
}
caption,
.th-or-td {
border: 1px solid #ddd;
Expand Down Expand Up @@ -297,6 +303,7 @@ class EditableTable extends displayBehaviors(LitElement) {
?condensed="${this.condensed}"
index="${th}"
@rowcol-action="${this._handleRowColumnMenu}"
@rowcol-menuopen="${this._handleMenuOpen}"
>
</editable-table-editor-rowcol>
</th>
Expand Down Expand Up @@ -838,6 +845,9 @@ class EditableTable extends displayBehaviors(LitElement) {
}
return row;
}
_handleMenuOpen(e) {
console.log(e);
}

/**
* Handles row/column menu actions
Expand Down
59 changes: 30 additions & 29 deletions elements/editable-table/lib/dist/editable-table-editor-rowcol.dev.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ var _editableTableBehaviors = require("./editable-table-behaviors.js");

var _a11yMenuButton = require("@lrnwebcomponents/a11y-menu-button/a11y-menu-button.js");

require("@lrnwebcomponents/a11y-menu-button/lib/a11y-menu-button-item.js");

require("@lrnwebcomponents/simple-icon/lib/simple-icon-lite.js");

require("@lrnwebcomponents/simple-icon/lib/simple-icons.js");
Expand Down Expand Up @@ -86,7 +88,7 @@ function _defineProperty(obj, key, value) {

function _templateObject4() {
var data = _taggedTemplateLiteral([
'\n :host {\n display: block;\n --paper-item-min-height: 24px;\n --a11y-menu-button-border: none;\n --a11y-menu-button-list-border: 1px solid\n var(--editable-table-border-color, #999);\n --a11y-menu-button-vertical-padding: var(\n --editable-table-cell-vertical-padding,\n 10px\n );\n --a11y-menu-button-horizontal-padding: var(\n --editable-table-cell-horizontal-padding,\n 6px\n );\n --a11y-menu-button-item-focus-bg-color: var(\n --editable-table-heading-bg-color,\n #e8e8e8\n );\n --a11y-menu-button-list-bg-color: var(\n --editable-table-bg-color,\n #fff\n );\n }\n ul,\n absolute-position-behavior {\n width: 100%;\n }\n absolute-position-behavior.row,\n absolute-position-behavior.row ul {\n width: 150px;\n }\n a11y-menu-button-item {\n font-family: var(\n --editable-table-secondary-font-family,\n "Roboto",\n "Noto",\n sans-serif\n );\n color: var(--editable-table-color, #222);\n font-size: var(--editable-table-secondary-font-size, 12px);\n }\n ',
'\n :host {\n display: block;\n height: 100%;\n width: 100%;\n --paper-item-min-height: 24px;\n --a11y-menu-button-border: none;\n --a11y-menu-button-list-border: 1px solid\n var(--editable-table-border-color, #999);\n --a11y-menu-button-vertical-padding: var(\n --editable-table-cell-vertical-padding,\n 10px\n );\n --a11y-menu-button-horizontal-padding: var(\n --editable-table-cell-horizontal-padding,\n 6px\n );\n --a11y-menu-button-item-focus-bg-color: var(\n --editable-table-heading-bg-color,\n #e8e8e8\n );\n --a11y-menu-button-list-bg-color: var(\n --editable-table-bg-color,\n #fff\n );\n }\n a11y-menu-button {\n display: block;\n height: 100%;\n width: 100%;\n }\n a11y-menu-button::part(button) {\n height: 100%;\n width: 100%;\n }\n a11y-menu-button::part(menu-outer) {\n min-width: 150px;\n }\n a11y-menu-button-item {\n font-family: var(\n --editable-table-secondary-font-family,\n "Roboto",\n "Noto",\n sans-serif\n );\n color: var(--editable-table-color, #222);\n font-size: var(--editable-table-secondary-font-size, 12px);\n line-height: 150%;\n }\n ',
]);

_templateObject4 = function _templateObject4() {
Expand Down Expand Up @@ -135,7 +137,7 @@ function _templateObject3() {

function _templateObject2() {
var data = _taggedTemplateLiteral([
' <a11y-menu-button-item\n @click="',
'<a11y-menu-button-item\n @click="',
'"\n >\n ',
"\n ",
"",
Expand All @@ -152,20 +154,14 @@ function _templateObject2() {

function _templateObject() {
var data = _taggedTemplateLiteral([
'\n <button\n id="menubutton"\n aria-haspopup="true"\n aria-controls="menu"\n aria-expanded="',
'"\n >\n <span class="sr-only">',
'</span>\n <span id="label">',
' </span>\n <span class="sr-only">Menu</span>\n <simple-icon-lite icon="arrow-drop-down"></simple-icon-lite>\n </button>\n <absolute-position-behavior\n ?auto="',
'"\n class="',
'"\n for="menubutton"\n position="',
'"\n position-align="',
'"\n offset="-3"\n >\n <ul\n id="menu"\n role="menu"\n aria-labelledby="menubutton"\n ?hidden="',
'"\n @mousover="',
'"\n @mousout="',
'"\n >\n ',
" ",
'\n <a11y-menu-button\n id="menubutton" \n position="',
'"\n @open="',
'">\n <span class="sr-only" slot="button">',
'</span>\n <span id="label" slot="button">',
' </span>\n <span class="sr-only" slot="button">Menu</span>\n <simple-icon-lite icon="arrow-drop-down" slot="button"></simple-icon-lite>\n ',
" \n ",
"\n ",
"\n </ul>\n </absolute-position-behavior>\n ",
"\n </ul>\n </a11y-menu-button>\n ",
]);

_templateObject = function _templateObject() {
Expand Down Expand Up @@ -305,24 +301,12 @@ var EditableTableEditorRowcol =
{
key: "render",
value: function render() {
var _this = this;

return (0, _litElement.html)(
_templateObject(),
this.expanded ? "true" : "false",
this.row ? "right" : "bottom",
this._onOpen,
this.type,
this.label || "",
this.expanded,
this.row ? "row" : "column",
this.row ? "right" : "bottom",
this.row ? "start" : "center",
!this.expanded,
function (e) {
return (_this.hover = true);
},
function (e) {
return (_this.hover = false);
},
this._getItem(),
this._getItem(false, true),
this._getItem(true)
Expand Down Expand Up @@ -385,6 +369,23 @@ var EditableTableEditorRowcol =
this.labelInfo
);
},
},
{
key: "_onOpen",
value: function _onOpen(e) {
this.dispatchEvent(
new CustomEvent("rowcol-menuopen", {
bubbles: true,
cancelable: true,
composed: true,
detail: {
insert: insert,
row: this.row,
index: index,
},
})
);
},
/**
* Handles when Delete Row/Column is clicked
* @param {event} e button event
Expand Down
81 changes: 46 additions & 35 deletions elements/editable-table/lib/editable-table-editor-rowcol.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import {
cellBehaviors,
editableTableCellStyles,
} from "./editable-table-behaviors.js";
import "@lrnwebcomponents/a11y-menu-button/a11y-menu-button.js";
import "@lrnwebcomponents/a11y-menu-button/lib/a11y-menu-button-item.js";
import { A11yMenuButton } from "@lrnwebcomponents/a11y-menu-button/a11y-menu-button.js";
import "@lrnwebcomponents/simple-icon/lib/simple-icon-lite.js";
import "@lrnwebcomponents/simple-icon/lib/simple-icons.js";
Expand All @@ -29,6 +31,8 @@ class EditableTableEditorRowcol extends cellBehaviors(A11yMenuButton) {
css`
:host {
display: block;
height: 100%;
width: 100%;
--paper-item-min-height: 24px;
--a11y-menu-button-border: none;
--a11y-menu-button-list-border: 1px solid
Expand All @@ -50,15 +54,25 @@ class EditableTableEditorRowcol extends cellBehaviors(A11yMenuButton) {
#fff
);
}
ul,
absolute-position-behavior {
a11y-menu-button {
display: block;
height: 100%;
width: 100%;
}
absolute-position-behavior.row,
absolute-position-behavior.row ul {
width: 150px;
a11y-menu-button::part(button) {
font-family: var(
--editable-table-secondary-font-family,
"Roboto",
"Noto",
sans-serif
);
height: 100%;
width: 100%;
}
a11y-menu-button-item {
a11y-menu-button::part(menu-outer) {
min-width: 150px;
}
a11y-menu-button-item::part(button) {
font-family: var(
--editable-table-secondary-font-family,
"Roboto",
Expand All @@ -67,43 +81,26 @@ class EditableTableEditorRowcol extends cellBehaviors(A11yMenuButton) {
);
color: var(--editable-table-color, #222);
font-size: var(--editable-table-secondary-font-size, 12px);
line-height: 150%;
}
`,
];
}
render() {
return html`
<button
id="menubutton"
aria-haspopup="true"
aria-controls="menu"
aria-expanded="${this.expanded ? "true" : "false"}"
>
<span class="sr-only">${this.type}</span>
<span id="label">${this.label || ""} </span>
<span class="sr-only">Menu</span>
<simple-icon-lite icon="arrow-drop-down"></simple-icon-lite>
</button>
<absolute-position-behavior
?auto="${this.expanded}"
class="${this.row ? "row" : "column"}"
for="menubutton"
<a11y-menu-button
id="menubutton"
position="${this.row ? "right" : "bottom"}"
position-align="${this.row ? "start" : "center"}"
offset="-3"
>
<ul
id="menu"
role="menu"
aria-labelledby="menubutton"
?hidden="${!this.expanded}"
@mousover="${(e) => (this.hover = true)}"
@mousout="${(e) => (this.hover = false)}"
>
${this._getItem()} ${this._getItem(false, true)}
@open="${this._onOpen}">
<span class="sr-only" slot="button">${this.type}</span>
<span id="label" slot="button">${this.label || ""} </span>
<span class="sr-only" slot="button">Menu</span>
<simple-icon-lite icon="arrow-drop-down" slot="button"></simple-icon-lite>
${this._getItem()}
${this._getItem(false, true)}
${this._getItem(true)}
</ul>
</absolute-position-behavior>
</a11y-menu-button>
`;
}
static get tag() {
Expand Down Expand Up @@ -185,7 +182,7 @@ class EditableTableEditorRowcol extends cellBehaviors(A11yMenuButton) {
);
}
_getItem(deleteItem = false, after = false) {
return html` <a11y-menu-button-item
return html`<a11y-menu-button-item
@click="${deleteItem
? this._onDelete
: after
Expand All @@ -197,6 +194,20 @@ class EditableTableEditorRowcol extends cellBehaviors(A11yMenuButton) {
${this.labelInfo}
</a11y-menu-button-item>`;
}
_onOpen(e) {
this.dispatchEvent(
new CustomEvent("rowcol-menuopen", {
bubbles: true,
cancelable: true,
composed: true,
detail: {
insert: insert,
row: this.row,
index: index,
},
})
);
}
/**
* Handles when Delete Row/Column is clicked
* @param {event} e button event
Expand Down
Loading

0 comments on commit f48bad8

Please sign in to comment.