Skip to content

Commit

Permalink
Merge pull request #861 from ix5/js-template-labels-placeholders
Browse files Browse the repository at this point in the history
[client] js: Postbox: Use labels rather than placeholders
  • Loading branch information
ix5 authored May 7, 2022
2 parents 1a258cc + 0d09324 commit b755d8a
Show file tree
Hide file tree
Showing 8 changed files with 76 additions and 11 deletions.
2 changes: 2 additions & 0 deletions CHANGES.rst
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ Changelog for Isso
to be added, see `Gravatar: Image requests`_.
- Add ``data-isso-reply-notifications-default-enabled`` option to configure
whether or not the subscribe to replies checkbox should be checked by default.
- Accessibility: Use labels rather than placeholders for name, email & website
in post box (`#861 <https://github.com/posativ/isso/pull/861>`_, ix5)

.. _Gravatar: Image requests: http://en.gravatar.com/site/implement/images/

Expand Down
12 changes: 10 additions & 2 deletions isso/css/isso.css
Original file line number Diff line number Diff line change
Expand Up @@ -206,10 +206,15 @@
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-post-action {
.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-input-wrapper label {
display: inline-block;
line-height: 1.4em;
height: 1.4em;
}
.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-post-action {
display: block;
float: right;
margin: 0 0 0 5px;
margin: 1.4em 0 0 5px;
}
.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-post-action > input {
padding: calc(.3em - 1px);
Expand Down Expand Up @@ -262,4 +267,7 @@
.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-input-wrapper input {
width: 100%;
}
.isso-postbox > .isso-form-wrapper > .isso-auth-section .isso-post-action {
margin-top: 0;
}
}
3 changes: 2 additions & 1 deletion isso/demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@
<head>
<title>Isso Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="page">
<div id="wrapper" style="width: 900px; margin-left: auto; margin-right: auto;">
<div id="wrapper" style="max-width: 900px; margin-left: auto; margin-right: auto;">
<h2><a href="index.html">Isso Demo</a></h2>

<script src="../js/embed.dev.js"
Expand Down
3 changes: 3 additions & 0 deletions isso/js/app/i18n/en.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
module.exports = {
"postbox-text": "Type Comment Here (at least 3 chars)",
"postbox-author": "Name (optional)",
"postbox-author-placeholder": "John Doe",
"postbox-email": "E-mail (optional)",
"postbox-email-placeholder": "[email protected]",
"postbox-website": "Website (optional)",
"postbox-website-placeholder": "https://example.com",
"postbox-preview": "Preview",
"postbox-edit": "Edit",
"postbox-submit": "Submit",
Expand Down
8 changes: 4 additions & 4 deletions isso/js/app/isso.js
Original file line number Diff line number Diff line change
Expand Up @@ -80,14 +80,14 @@ var Postbox = function(parent) {

// email is not optional if this config parameter is set
if (config["require-email"]) {
$("[name='email']", el).setAttribute("placeholder",
$("[name='email']", el).getAttribute("placeholder").replace(/ \(.*\)/, ""));
$("[for='isso-postbox-email']", el).textContent =
$("[for='isso-postbox-email']", el).textContent.replace(/ \(.*\)/, "");
}

// author is not optional if this config parameter is set
if (config["require-author"]) {
$("[name='author']", el).placeholder =
$("[name='author']", el).placeholder.replace(/ \(.*\)/, "");
$("[for='isso-postbox-author']", el).textContent =
$("[for='isso-postbox-author']", el).textContent.replace(/ \(.*\)/, "");
}

// preview function
Expand Down
9 changes: 6 additions & 3 deletions isso/js/app/templates/postbox.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,16 @@ var html = function (globals) {
+ "</div>"
+ "<section class='isso-auth-section'>"
+ "<p class='isso-input-wrapper'>"
+ "<input type='text' name='author' placeholder='" + i18n('postbox-author') + "' value='" + (author ? author : '') + "' />"
+ "<label for='isso-postbox-author'>" + i18n('postbox-author') + "</label>"
+ "<input id='isso-postbox-author' type='text' name='author' placeholder='" + i18n('postbox-author-placeholder') + "' value='" + (author ? author : '') + "' />"
+ "</p>"
+ "<p class='isso-input-wrapper'>"
+ "<input type='email' name='email' placeholder='" + i18n('postbox-email') + "' value='" + (email ? email : '') + "' />"
+ "<label for='isso-postbox-email'>" + i18n('postbox-email') + "</label>"
+ "<input id='isso-postbox-email' type='email' name='email' placeholder='" + i18n('postbox-email-placeholder') + "' value='" + (email ? email : '') + "' />"
+ "</p>"
+ "<p class='isso-input-wrapper'>"
+ "<input type='text' name='website' placeholder='" + i18n('postbox-website') + "' value='" + (website ? website : '') + "' />"
+ "<label for='isso-postbox-website'>" + i18n('postbox-website') + "</label>"
+ "<input id='isso-postbox-website' type='text' name='website' placeholder='" + i18n('postbox-website-placeholder') + "' value='" + (website ? website : '') + "' />"
+ "</p>"
+ "<p class='isso-post-action'>"
+ "<input type='submit' value='" + i18n('postbox-submit') + "' />"
Expand Down
2 changes: 1 addition & 1 deletion isso/js/tests/unit/__snapshots__/isso.test.js.snap
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Create Postbox 1`] = `"<div id=\\"isso-root\\"></div><div class=\\"isso-postbox\\"><div class=\\"isso-form-wrapper\\"><div class=\\"isso-textarea-wrapper\\"><div class=\\"isso-textarea isso-placeholder\\" contenteditable=\\"true\\">Type Comment Here (at least 3 chars)</div><div class=\\"isso-preview\\"><div class=\\"isso-comment\\"><div class=\\"isso-text-wrapper\\"><div class=\\"isso-text\\"></div></div></div></div></div><section class=\\"isso-auth-section\\"><p class=\\"isso-input-wrapper\\"><input type=\\"text\\" name=\\"author\\" placeholder=\\"Name (optional)\\" value=\\"\\"></p><p class=\\"isso-input-wrapper\\"><input type=\\"email\\" name=\\"email\\" placeholder=\\"E-mail (optional)\\" value=\\"\\"></p><p class=\\"isso-input-wrapper\\"><input type=\\"text\\" name=\\"website\\" placeholder=\\"Website (optional)\\" value=\\"\\"></p><p class=\\"isso-post-action\\"><input type=\\"submit\\" value=\\"Submit\\"></p><p class=\\"isso-post-action\\"><input type=\\"button\\" name=\\"preview\\" value=\\"Preview\\"></p><p class=\\"isso-post-action\\"><input type=\\"button\\" name=\\"edit\\" value=\\"Edit\\"></p></section><section class=\\"isso-notification-section\\" style=\\"display: none;\\"><label><input type=\\"checkbox\\" name=\\"notification\\">Subscribe to email notification of replies</label></section></div></div>"`;
exports[`Create Postbox 1`] = `"<div id=\\"isso-root\\"></div><div class=\\"isso-postbox\\"><div class=\\"isso-form-wrapper\\"><div class=\\"isso-textarea-wrapper\\"><div class=\\"isso-textarea isso-placeholder\\" contenteditable=\\"true\\">Type Comment Here (at least 3 chars)</div><div class=\\"isso-preview\\"><div class=\\"isso-comment\\"><div class=\\"isso-text-wrapper\\"><div class=\\"isso-text\\"></div></div></div></div></div><section class=\\"isso-auth-section\\"><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-author\\">Name (optional)</label><input id=\\"isso-postbox-author\\" type=\\"text\\" name=\\"author\\" placeholder=\\"John Doe\\" value=\\"\\"></p><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-email\\">E-mail (optional)</label><input id=\\"isso-postbox-email\\" type=\\"email\\" name=\\"email\\" placeholder=\\"[email protected]\\" value=\\"\\"></p><p class=\\"isso-input-wrapper\\"><label for=\\"isso-postbox-website\\">Website (optional)</label><input id=\\"isso-postbox-website\\" type=\\"text\\" name=\\"website\\" placeholder=\\"https://example.com\\" value=\\"\\"></p><p class=\\"isso-post-action\\"><input type=\\"submit\\" value=\\"Submit\\"></p><p class=\\"isso-post-action\\"><input type=\\"button\\" name=\\"preview\\" value=\\"Preview\\"></p><p class=\\"isso-post-action\\"><input type=\\"button\\" name=\\"edit\\" value=\\"Edit\\"></p></section><section class=\\"isso-notification-section\\" style=\\"display: none;\\"><label><input type=\\"checkbox\\" name=\\"notification\\">Subscribe to email notification of replies</label></section></div></div>"`;
48 changes: 48 additions & 0 deletions isso/js/tests/unit/postbox-labels-optional.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/**
* @jest-environment jsdom
*/

/* Keep the above exactly as-is!
* https://jestjs.io/docs/configuration#testenvironment-string
* https://jestjs.io/docs/configuration#testenvironmentoptions-object
*/

"use strict";

test('"(optional)" labels in Postox vanish if require-author/-email set', () => {
// Set up our document body
document.body.innerHTML =
'<div id=isso-thread></div>' +
'<script src="http://isso.api/js/embed.min.js"'
+ 'data-isso="/"'
+ 'data-isso-lang="de"' // falls back to "en" for placeholders
+ '></script>';

const isso = require("app/isso");
const $ = require("app/dom");

var config = require("app/config");
config['require-author'] = true;
config['require-email'] = true;

const i18n = require("app/i18n");
const svg = require("app/svg");

const template = require("app/template");

template.set("conf", config);
template.set("i18n", i18n.translate);
template.set("pluralize", i18n.pluralize);
template.set("svg", svg);

var isso_thread = $('#isso-thread');
isso_thread.append('<div id="isso-root"></div>');
isso_thread.append(new isso.Postbox(null));

expect($("#isso-postbox-author").placeholder).toBe('John Doe');
expect($("#isso-postbox-email").placeholder).toBe('[email protected]');
// Instead of "Name (optional)"
expect($("[for='isso-postbox-author']").textContent).toBe('Name');
// Instead of "E-mail (optional)"
expect($("[for='isso-postbox-email']").textContent).toBe('E-Mail');
});

0 comments on commit b755d8a

Please sign in to comment.