Skip to content

Commit

Permalink
feat(ui): update ReSpec UI (#944)
Browse files Browse the repository at this point in the history 
* BREAKING CHANGE: UI is now exported interface
* feat(ui): new ReSpec pill UI
  • Loading branch information
Marcos Cáceres committed Oct 12, 2016
1 parent 018dc2b commit 828aa78
Show file tree
Hide file tree
Showing 6 changed files with 141 additions and 188 deletions.
237 changes: 102 additions & 135 deletions js/core/ui.js
View file
Expand Up @@ -9,168 +9,126 @@
// - make a release candidate that people can test
// - once we have something decent, merge, ship as 3.2.0
"use strict";
define(
[
define([
"shortcut",
"core/pubsubhub",
"core/jquery-enhanced",
],
function(shortcut, pubsubhub) {
var $menu = $("<div id=respec-menu></div>")
.css({
background: "#fff",
border: "1px solid #000",
width: "200px",
display: "none",
textAlign: "left",
marginTop: "5px",
marginRight: "5px"
});
var $modal, $overlay, errors = [],
warnings = [],
buttons = {},
$respecButton, $respecUI, errWarn = function(msg, arr, butName, bg, title) {
arr.push(msg);
if (!buttons[butName]) {
buttons[butName] = $("<button></button>")
.css({
background: bg,
color: "#fff",
fontWeight: "bold",
border: "none",
borderRadius: "5px",
marginLeft: "5px"
})
.insertAfter($respecButton)
.click(function() {
var $ul = $("<ol></ol>");
for (var i = 0, n = arr.length; i < n; i++) {
var err = arr[i];
if (err instanceof Error) {
$("<li><span></span> <a>\u229e</a><pre></pre></li>")
.appendTo($ul)
.find("span")
.text("[" + err.name + "] " + err.message)
.end()
.find("a")
.css({
fontSize: "1.1em",
color: "#999",
cursor: "pointer"
})
.click(function() {
var $a = $(this),
state = $a.text(),
$pre = $a.parent().find("pre");
if (state === "\u229e") {
$a.text("\u229f");
$pre.show();
} else {
$a.text("\u229e");
$pre.hide();
}
})
.end()
.find("pre")
.text(err.stack)
.css({
marginLeft: "0",
maxWidth: "100%",
overflowY: "hidden",
overflowX: "scroll"
})
.hide()
.end();
} else {
$("<li></li>").text(err).appendTo($ul);
}
}
ui.freshModal(title, $ul);
});
}
const $menu = $("<div id=respec-menu></div>");
var $modal;
var $overlay;
const errors = [];
const warnings = [];
const buttons = {};

// Respec UI - add early
const $respecUI = $(
"<div id='respec-ui' class='removeOnSave respec-hidden'></div>", document)
.appendTo($("body", document));

const $respecPill = $("<button id='respec-pill' disabled>ReSpec</button>")
.click(function(e) {
e.stopPropagation();
$menu.toggle();
})
.appendTo($respecUI);
document.documentElement.addEventListener("click", function() {
if (window.getComputedStyle($menu[0]).display === "block") {
$menu.fadeOut(200);
}
});
$menu.appendTo($respecUI);

function errWarn(msg, arr, butName, title) {
arr.push(msg);
if (buttons.hasOwnProperty(butName)) {
buttons[butName].text(arr.length);
};
var conf, doc;
var ui = {
return;
}
buttons[butName] = $("<button class='respec-info-button respec-pill-" + butName + "'>" + arr.length + "</button>")
.insertBefore($respecPill)
.click(function() {
var $ul = $("<ol></ol>");
for (var i = 0, n = arr.length; i < n; i++) {
var err = arr[i];
if (err instanceof Error) {
$("<li><span></span> <a>\u229e</a><pre></pre></li>")
.appendTo($ul)
.find("span")
.text("[" + err.name + "] " + err.message)
.end()
.find("a")
.css({
fontSize: "1.1em",
color: "#999",
cursor: "pointer"
})
.click(function() {
var $a = $(this),
state = $a.text(),
$pre = $a.parent().find("pre");
if (state === "\u229e") {
$a.text("\u229f");
$pre.show();
} else {
$a.text("\u229e");
$pre.hide();
}
})
.end()
.find("pre")
.text(err.stack)
.css({
marginLeft: "0",
maxWidth: "100%",
overflowY: "hidden",
overflowX: "scroll"
})
.hide()
.end();
} else {
$("<li></li>").text(err).appendTo($ul);
}
}
ui.freshModal(title, $ul);
});
}
const ui = {
show: function() {
$respecUI[0].classList.remove("respec-hidden");
},
hide: function() {
$respecUI[0].classList.add("respec-hidden");
},
run: function(_conf, _doc, cb) {
conf = _conf, doc = _doc;
var $div = $respecUI = $("<div id='respec-ui' class='removeOnSave'></div>", doc)
.css({
position: "fixed",
top: "20px",
right: "20px",
width: "202px",
textAlign: "right"
})
.appendTo($("body", doc));
$respecButton = $("<button id='respec-pill'>ReSpec</button>")
.css({
background: "#fff",
fontWeight: "bold",
border: "1px solid #ccc",
borderRadius: "5px"
})
.click(function(e) {
e.stopPropagation();
$menu.toggle();
})
.appendTo($div);
doc.documentElement.addEventListener("click", function() {
if (window.getComputedStyle($menu[0]).display === "block") {
$menu.fadeOut(200);
}
});
$menu.appendTo($div);
shortcut.add("Esc", function() {
ui.closeModal();
});
shortcut.add("Ctrl+Alt+Shift+E", function() {
if (buttons.error) buttons.error.click();
});
shortcut.add("Ctrl+Alt+Shift+W", function() {
if (buttons.warning) buttons.warning.click();
});
this.hide();
cb();
enable: function() {
$respecPill[0].removeAttribute("disabled");
},
addCommand: function(label, module, keyShort) {
addCommand: function(label, module, keyShort, icon) {
icon = icon || "";
var handler = function() {
$menu.hide();
require([module], function(mod) {
mod.show(ui, conf, doc);
require([module], function (mod) {
mod.show();
});
};
var id = "respec-modal-" + label.toLowerCase().replace(/\s+/, "-");
$("<button></button>")
.attr({ id: id })
.css({
background: "#fff",
border: "none",
borderBottom: "1px solid #ccc",
width: "100%",
textAlign: "left",
fontSize: "inherit"
})
.text(label)
$('<button id=\"' + id + '\" class="respec-option" title="' + keyShort + '\"><span class="respec-cmd-icon">' + icon + '</span> ' + label + '… </button>')
.click(handler)
.appendTo($menu);
if (keyShort) shortcut.add(keyShort, handler);
},
error: function(msg) {
errWarn(msg, errors, "error", "#c00", "Errors");
errWarn(msg, errors, "error", "Errors");
},
warning: function(msg) {
errWarn(msg, warnings, "warning", "#f60", "Warnings");
errWarn(msg, warnings, "warning", "Warnings");
},
closeModal: function() {
if ($overlay) $overlay.fadeOut(200, function() { $overlay.remove();
$overlay = null; });
if ($overlay) $overlay.fadeOut(200, function() {
$overlay.remove();
$overlay = null;
});
if (!$modal) return;
$modal.remove();
$modal = null;
Expand Down Expand Up @@ -220,6 +178,15 @@ define(
.fadeTo(200, 1);
}
};
shortcut.add("Esc", function() {
ui.closeModal();
});
shortcut.add("Ctrl+Alt+Shift+E", function() {
if (buttons.error) buttons.error.click();
});
shortcut.add("Ctrl+Alt+Shift+W", function() {
if (buttons.warning) buttons.warning.click();
});
window.respecUI = ui;
pubsubhub.sub("error", function(details) {
ui.error(details);
Expand Down
9 changes: 3 additions & 6 deletions js/profile-w3c-common.js
View file
Expand Up @@ -77,20 +77,17 @@ define([
],
function(domReady, runner, ui) {
var args = Array.from(arguments);
ui.show();
domReady(function() {
runner
.runAll(args)
.then(document.respecIsReady)
.then(ui.show)
.then(ui.enable)
.catch(function(err){
console.error(err);
// even if things go critically bad, we should still try to show the UI
ui.show();
ui.enable();
});
ui.addCommand("Save Snapshot", "ui/save-html", "Ctrl+Shift+Alt+S");
ui.addCommand("About ReSpec", "ui/about-respec", "Ctrl+Shift+Alt+A");
ui.addCommand("Definition List", "ui/dfn-list", "Ctrl+Shift+Alt+D");
ui.addCommand("Search Specref DB", "ui/search-specref", "Ctrl+Shift+Alt+space");
});
}
);
30 changes: 16 additions & 14 deletions js/ui/about-respec.js
View file
@@ -1,17 +1,19 @@

// Module ui/about-respec
// A simple about dialogue with pointer to the help

// A simple about dialog with pointer to the help
"use strict";
define(
[],
function () {
return {
show: function (ui) {
var $halp = $("<div><p>ReSpec is a document production toolchain, with a notable focus on W3C specifications.</p></div>");
$("<p>You can find more information in the <a href='https://w3.org/respec/'>documentation</a>.</p>").appendTo($halp);
$("<p>Found a bug in ReSpec? <a href='https://github.com/w3c/respec/issues'>File it!</a>.</p>").appendTo($halp);
ui.freshModal("About ReSpec", $halp);
}
};
}
["core/ui"],
function(ui) {
// window.respecVersion is added at build time (see tools/builder.js)
window.respecVersion = window.respecVersion || "Developer Edition";
const $halp = $("<div><p>ReSpec is a document production toolchain, with a notable focus on W3C specifications.</p></div>");
$("<p>You can find more information in the <a href='https://w3.org/respec/'>documentation</a>.</p>").appendTo($halp);
$("<p>Found a bug in ReSpec? <a href='https://github.com/w3c/respec/issues'>File it!</a>.</p>").appendTo($halp);
ui.addCommand("About ReSpec", "ui/about-respec", "Ctrl+Shift+Alt+A", "ℹ️");
return {
show: function() {
ui.freshModal("About ReSpec - " + window.respecVersion, $halp);
}
};
}
);
11 changes: 6 additions & 5 deletions js/ui/dfn-list.js
View file
Expand Up @@ -2,13 +2,14 @@
// Module ui/dfn-list
// Displays all definitions with links to the defining element.
define(
[],
function () {
["core/ui"],
function (ui) {
ui.addCommand("Definition List", "ui/dfn-list", "Ctrl+Shift+Alt+D", "📔");
return {
show: function (ui, _conf) {
show: function() {
var $halp = $("<ul></ul>");
Object.keys(_conf.definitionMap).sort().forEach(function(title) {
_conf.definitionMap[title].forEach(function(dfn) {
Object.keys(window.respecConfig.definitionMap).sort().forEach(function(title) {
window.respecConfig.definitionMap[title].forEach(function(dfn) {
// Link to definition
var $link = $("<a>" + title + "</a>")
.attr("href", "#" + dfn.attr("id"))
Expand Down

0 comments on commit 828aa78

Please sign in to comment.