Skip to content

Commit

Permalink
Merge branch 'develop' into gh-pages
Browse files Browse the repository at this point in the history 
* develop:
  v10.0.0
  Allow additional logo in CG spec (#821)
  feat: significantly improve ARIA support (#1065)
  fix(core/markdown): elements are not corrently positioned (#1071)
  • Loading branch information
@marcoscaceres
marcoscaceres committed Feb 8, 2017
2 parents a7f9b3b + b51c85d commit ab7af22
Show file tree
Hide file tree
Showing 24 changed files with 547 additions and 506 deletions.
2 changes: 2 additions & 0 deletions .gitignore
View file
Expand Up @@ -9,6 +9,7 @@ bevy.json
js/deps/*
!js/deps/highlight.js
js/**/*.map
js/core/aria.js
js/core/base-runner.js
js/core/biblio-db.js
js/core/biblio.js
Expand All @@ -23,4 +24,5 @@ js/core/pre-process.js
js/core/pubsubhub.js
js/core/remove-respec.js
js/core/respec-ready.js
js/core/utils.js
js/core/worker.js
2 changes: 1 addition & 1 deletion builds/respec-w3c-common.build.js.map
View file

Large diffs are not rendered by default.

26 changes: 13 additions & 13 deletions builds/respec-w3c-common.js
View file

Large diffs are not rendered by default.

35 changes: 26 additions & 9 deletions js/core/css/respec2.css
View file
Expand Up @@ -123,6 +123,8 @@ table.simple {

#respec-ui {
position: fixed;
display: flex;
flex-direction: row-reverse;
top: 20px;
right: 20px;
width: 202px;
Expand All @@ -139,22 +141,27 @@ table.simple {

.respec-info-button {
border: none;
opacity: .5;
border-radius: 2em;
margin-right: 1em;
min-width: 3.5em;
}

.respec-info-button:focus {
opacity: 1;
transition: opacity .2s;
}


#respec-pill:disabled{
margin: 10px auto;
font-size: 2.8px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(40, 40, 40, 0.2);
border-right: 1.1em solid rgba(40, 40, 40, 0.2);
border-bottom: 1.1em solid rgba(40, 40, 40, 0.2);
border-left: 1.1em solid #ffffff;
transform: translateZ(0);
animation: respec-spin 1.1s infinite linear;
animation: respec-spin .5s infinite linear;
box-shadow: none;
}

Expand All @@ -174,22 +181,32 @@ table.simple {
}
}

#respec-pill:hover, #respec-pill:focus {
#respec-pill:hover, #respec-pill:focus {
color: rgb(0, 0, 0);
transition: color .2s
background-color: rgb(245,245,245);
transition: color .2s;
}

#respec-menu {
position: absolute;
margin:0;
padding: 0;
font-family: sans-serif;
background: #fff;
box-shadow: 1px 1px 8px 0 rgba(100, 100, 100, .5);
width: 200px;
display: none;
text-align: left;
margin-top: 5px;
margin-top: 32px;
font-size: .8em;
}

#respec-menu li {
list-style-type: none;
margin: 0;
padding: 0;
}

.respec-save-button {
background: #fff;
border: 1px solid #000;
Expand All @@ -210,12 +227,12 @@ table.simple {
outline-style: none;
}

#respec-ui button.respec-pill-error {
#respec-pill-error {
background-color: red;
color: white;
}

#respec-ui button.respec-pill-warning {
#respec-pill-warning {
background-color: orange;
color: white;
}
Expand All @@ -229,7 +246,7 @@ table.simple {
padding: 1.2em 1.2em;
}

#respec-menu button.respec-option:hover {
#respec-menu button.respec-option:hover, #respec-menu button:focus {
background-color: #eeeeee;
}

Expand Down
2 changes: 1 addition & 1 deletion js/core/markdown.js
View file
Expand Up @@ -59,7 +59,7 @@ define([
var normalizedLeftPad = utils.normalizePadding(text);
// As markdown is pulled from HTML, > is already escaped and
// so blockquotes aren't picked up by the parser. This fixes it.
var potentialMarkdown = normalizedLeftPad.replace(/>/g, ">");
var potentialMarkdown = normalizedLeftPad.replace(/>/gm, ">");
var html = marked(potentialMarkdown);
return html;
}
Expand Down
69 changes: 57 additions & 12 deletions js/core/ui.js
View file
Expand Up @@ -15,7 +15,19 @@ define([
"core/jquery-enhanced",
],
function(shortcut, pubsubhub) {
const $menu = $("<div id=respec-menu></div>");

function ariaDecorate(elem, ariaMap) {
Array
.from(ariaMap.entries())
.reduce(function(elem, nameValue) {
const name = nameValue[0];
const value = nameValue[1];
elem.setAttribute("aria-" + name, value);
return elem;
}, elem);
}

const $menu = $("<ul id=respec-menu role=menu aria-labelledby='respec-pill'></ul>");
var $modal;
var $overlay;
const errors = [];
Expand All @@ -30,6 +42,8 @@ define([
const $respecPill = $("<button id='respec-pill' disabled>ReSpec</button>")
.click(function(e) {
e.stopPropagation();
const expand = this.getAttribute("aria-expanded") === "true" ? "false" : "true";
this.setAttribute("aria-expanded", expand);
$menu.toggle();
})
.appendTo($respecUI);
Expand All @@ -40,15 +54,24 @@ define([
});
$menu.appendTo($respecUI);

const ariaMap = new Map([
["controls", "respec-menu"],
["expanded", "false"],
["haspopup", "true"],
["label", "ReSpec Menu"],
]);
ariaDecorate($respecPill[0], ariaMap);

function errWarn(msg, arr, butName, title) {
arr.push(msg);
if (buttons.hasOwnProperty(butName)) {
buttons[butName].text(arr.length);
return;
}
buttons[butName] = $("<button class='respec-info-button respec-pill-" + butName + "'>" + arr.length + "</button>")
.insertBefore($respecPill)
buttons[butName] = $("<button id='respec-pill-" + butName + "' class='respec-info-button'>" + arr.length + "</button>")
.appendTo($respecUI)
.click(function() {
this.setAttribute("aria-expanded", "true");
var $ul = $("<ol></ol>");
for (var i = 0, n = arr.length; i < n; i++) {
var err = arr[i];
Expand Down Expand Up @@ -91,19 +114,28 @@ define([
$("<li></li>").text(err).appendTo($ul);
}
}
ui.freshModal(title, $ul);
ui.freshModal(title, $ul, this);
});
const ariaMap = new Map([
["expanded", "false"],
["haspopup", "true"],
["controls", "respec-pill-" + butName + "-modal"],
["label", "Document " + title.toLowerCase()],
]);
ariaDecorate(buttons[butName][0], ariaMap);
}
const ui = {
show: function() {
try {
$respecUI[0].classList.remove("respec-hidden");
$respecUI[0].setAttribute("aria-expanded", "true");
} catch (err) {
console.error(err);
}
},
hide: function() {
$respecUI[0].classList.add("respec-hidden");
$respecUI[0].setAttribute("aria-expanded", "false");
},
enable: function() {
$respecPill[0].removeAttribute("disabled");
Expand All @@ -112,44 +144,57 @@ define([
icon = icon || "";
var handler = function() {
$menu.hide();
require([module], function (mod) {
require([module], function(mod) {
mod.show();
});
};
var id = "respec-modal-" + label.toLowerCase().replace(/\s+/, "-");
$('<button id=\"' + id + '\" class="respec-option" title="' + keyShort + '\"><span class="respec-cmd-icon">' + icon + '</span> ' + label + '… </button>')
var id = "respec-button-" + label.toLowerCase().replace(/\s+/, "-");
var menuItem = $('<li role=menuitem><button id=\"' + id + '\" class="respec-option" title="' + keyShort + '\"><span class="respec-cmd-icon">' + icon + '</span> ' + label + '… </button></li>')
.click(handler)
.appendTo($menu);
if (keyShort) shortcut.add(keyShort, handler);
return menuItem[0].querySelector("button");
},
error: function(msg) {
errWarn(msg, errors, "error", "Errors");
},
warning: function(msg) {
errWarn(msg, warnings, "warning", "Warnings");
},
closeModal: function() {
closeModal: function(owner) {
if ($overlay) $overlay.fadeOut(200, function() {
$overlay.remove();
$overlay = null;
});
if (owner) {
owner.setAttribute("aria-expanded", "false");
}
if (!$modal) return;
$modal.remove();
$modal = null;
},
freshModal: function(title, content) {
freshModal: function(title, content, currentOwner) {
if ($modal) $modal.remove();
if ($overlay) $overlay.remove();
var width = 500;
$overlay = $("<div id='respec-overlay' class='removeOnSave'></div>").hide();
$modal = $("<div id='respec-modal' class='removeOnSave'><h3></h3><div class='inside'></div></div>").hide();
$modal.find("h3").text(title);
const id = currentOwner.id + "-modal";
const headingId = id + "-heading"
$modal = $("<div id='" + id + "' class='respec-modal' role=dialog class='removeOnSave'><h3></h3><div class='inside'></div></div>").hide();
$modal.find("h3").text(title)
$modal.find("h3")[0].id = headingId;
const ariaMap = new Map([
["labelledby", headingId],
]);
ariaDecorate($modal[0], ariaMap);
$modal.find(".inside").append(content);
$("body")
.append($overlay)
.append($modal);
$overlay
.click(this.closeModal)
.click(function() {
this.closeModal(currentOwner);
}.bind(this))
.css({
display: "block",
opacity: 0,
Expand Down

0 comments on commit ab7af22

Please sign in to comment.