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

Better support for HTML5 attributes #102

Merged
merged 18 commits into from Sep 26, 2016
Merged

Better support for HTML5 attributes #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
4b53551
Better support for HTML5 attributes
gcacars Sep 17, 2016
0532413
Correct sandbox value
gcacars Sep 17, 2016
7678bd7
Readability of spellcheck
gcacars Sep 17, 2016
9a48fd6
Removed tabs
gcacars Sep 17, 2016
9a124bc
Correction of elem.contentEditable
gcacars Sep 17, 2016
b54ea02
Indentation
gcacars Sep 18, 2016
0ab0370
Fixed Unexpected token
gcacars Sep 18, 2016
00e0c3e
Indentation+
gcacars Sep 18, 2016
44c09a4
Add Tests to better support for HTML5 attributes
gcacars Sep 18, 2016
e38017c
Fix JS HTML attribute names
gcacars Sep 18, 2016
2862bf5
Removed autocomplete property
gcacars Sep 18, 2016
c5b257e
Removed spellcheck property
gcacars Sep 18, 2016
c476a9e
Removed spellcheck test
gcacars Sep 18, 2016
f9316ed
Changed history do PR #102
gcacars Sep 18, 2016
caa4775
Pass a boolean value to BooleanHandler when IFrame
gcacars Sep 20, 2016
361febc
More tests for iframe mode sandbox
gcacars Sep 20, 2016
ce519fe
Merge branch 'master' into patch-1
gcacars Sep 26, 2016
d327d66
Flush Tracker changes
gcacars Sep 26, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions HISTORY.md
View file
Open in desktop
@@ -1,4 +1,6 @@
## vNEXT
* Better support for HTML5 boolean attributes (disabled, required, hidden, ...) to be removed when a falsy value is set, just like checked property.
[#102](https://github.com/meteor/blaze/pull/102) [#52](https://github.com/meteor/blaze/issues/52)

## v2.1.9, 2016-Sep-13

Expand Down
20 changes: 20 additions & 0 deletions packages/blaze/attrs.js
View file
Open in desktop
Expand Up @@ -296,6 +296,26 @@ Blaze._makeAttributeHandler = function (elem, name, value) {
} else if ((elem.tagName === 'OPTION' && name === 'selected') ||
(elem.tagName === 'INPUT' && name === 'checked')) {
return new BooleanHandler(name, value);
} else if (name === 'autofocus' || name === 'disabled' || name === 'hidden' ||
name === 'readonly' || name === 'required') {
return new BooleanHandler(name, value);
} else if (elem.tagName === 'FORM' && name === 'novalidate') {
return new BooleanHandler(name, value);
} else if (elem.tagName === 'IFRAME' && name === 'sandbox' && !value) {
// Disable sandbox mode (others values will be handled as a normal attr)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gcacars: Why is sandbox handled differently?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because we can have:
<iframe sandbox>
And this way, the attribute is simply true or false.
Or we can have this others values:

<iframe sandbox="allow-forms">
<iframe sandbox="allow-pointer-lock">

return new BooleanHandler(name, !!value);
} else if (elem.tagName === 'IMG' && name === 'ismap') {
return new BooleanHandler(name, value);
} else if ((elem.tagName === 'INPUT' || elem.tagName === 'SELECT')
&& name === 'multiple') {
return new BooleanHandler(name, value);
} else if (elem.tagName === 'OL' && name === 'reversed') {
return new BooleanHandler(name, value);
} else if (elem.tagName === 'SCRIPT' && name === 'defer') {
return new BooleanHandler(name, value);
} else if (elem.tagName === 'VIDEO' && (name === 'autoplay' ||
name === 'controls' || name === 'loop' || name === 'muted')) {
return new BooleanHandler(name, value);
} else if ((elem.tagName === 'TEXTAREA' || elem.tagName === 'INPUT')
&& name === 'value') {
// internally, TEXTAREAs tracks their value in the 'value'
Expand Down
261 changes: 254 additions & 7 deletions packages/blaze/render_tests.js
View file
Open in desktop
@@ -1,17 +1,24 @@
var toCode = BlazeTools.toJS;

var P = HTML.P;
var A = HTML.A;
var BR = HTML.BR;
var CharRef = HTML.CharRef;
var DIV = HTML.DIV;
var Comment = HTML.Comment;
var BR = HTML.BR;
var A = HTML.A;
var UL = HTML.UL;
var DIV = HTML.DIV;
var FORM = HTML.FORM;
var HR = HTML.HR;
var LI = HTML.LI;
var IFRAME = HTML.IFRAME;
var IMG = HTML.IMG;
var INPUT = HTML.INPUT;
var OL = HTML.OL;
var P = HTML.P;
var SCRIPT = HTML.SCRIPT;
var SELECT = HTML.SELECT;
var SPAN = HTML.SPAN;
var HR = HTML.HR;
var TEXTAREA = HTML.TEXTAREA;
var INPUT = HTML.INPUT;
var UL = HTML.UL;
var VIDEO = HTML.VIDEO;

var materialize = function (content, parent) {
var func = content;
Expand Down Expand Up @@ -132,6 +139,246 @@ Tinytest.add("blaze - render - input - checked", function (test) {
test.equal(inputEl.checked, false);
});

// test that we correctly update the HTML5 boolean properties
Tinytest.add("blaze - render - input - autofocus", function (test) {
var R = ReactiveVar(null);
var div = document.createElement("DIV");
materialize(INPUT({type: "text", autofocus: function () { return R.get(); }}), div);
var inputEl = div.querySelector('input');
test.equal(inputEl.autofocus, false);
inputEl.autofocus = true;

R.set("autofocus");
Tracker.flush();
R.set(null);
Tracker.flush();
test.equal(inputEl.autofocus, false);
});

Tinytest.add("blaze - render - input - disabled", function (test) {
var R = ReactiveVar(null);
var div = document.createElement("DIV");
materialize(INPUT({type: "text", disabled: function () { return R.get(); }}), div);
var inputEl = div.querySelector('input');
test.equal(inputEl.disabled, false);
inputEl.disabled = true;

R.set("disabled");
Tracker.flush();
R.set(null);
Tracker.flush();
test.equal(inputEl.disabled, false);
});

Tinytest.add("blaze - render - input - hidden", function (test) {
var R = ReactiveVar(null);
var div = document.createElement("DIV");
materialize(INPUT({type: "text", hidden: function () { return R.get(); }}), div);
var inputEl = div.querySelector('input');
test.equal(inputEl.hidden, false);
inputEl.hidden = true;

R.set("hidden");
Tracker.flush();
R.set(null);
Tracker.flush();
test.equal(inputEl.hidden, false);
});

Tinytest.add("blaze - render - input - readonly", function (test) {
var R = ReactiveVar(null);
var div = document.createElement("DIV");
materialize(INPUT({type: "text", readOnly: function () { return R.get(); }}), div);
var inputEl = div.querySelector('input');
test.equal(inputEl.readOnly, false);
inputEl.readOnly = true;

R.set("readonly");
Tracker.flush();
R.set(null);
Tracker.flush();
test.equal(inputEl.readOnly, false);
});

Tinytest.add("blaze - render - input - required", function (test) {
var R = ReactiveVar(null);
var div = document.createElement("DIV");
materialize(INPUT({type: "text", required: function () { return R.get(); }}), div);
var inputEl = div.querySelector('input');
test.equal(inputEl.required, false);
inputEl.required = true;

R.set("required");
Tracker.flush();
R.set(null);
Tracker.flush();
test.equal(inputEl.required, false);
});

Tinytest.add("blaze - render - select - multiple", function (test) {
var R = ReactiveVar(null);
var div = document.createElement("DIV");
materialize(SELECT({multiple: function () { return R.get(); }}), div);
var selectEl = div.querySelector('select');
test.equal(selectEl.multiple, false);
selectEl.multiple = true;

R.set("multiple");
Tracker.flush();
R.set(null);
Tracker.flush();
test.equal(selectEl.multiple, false);
});

// test that we correctly update the HTML5 <form> novalidate boolean property
Tinytest.add("blaze - render - form - novalidate", function (test) {
var R = ReactiveVar(null);
var div = document.createElement("DIV");
materialize(FORM({noValidate: function () { return R.get(); }}), div);
var formEl = div.querySelector('form');
test.equal(formEl.noValidate, false);
formEl.noValidate = true;

R.set("novalidate");
Tracker.flush();
R.set(null);
Tracker.flush();
test.equal(formEl.noValidate, false);
});

// test that we correctly update the HTML5 <iframe> sandbox boolean property
Tinytest.add("blaze - render - iframe - sandbox", function (test) {
var R = ReactiveVar(null);
var div = document.createElement("DIV");
materialize(IFRAME({sandbox: function () { return R.get(); }}), div);
var iframeEl = div.querySelector('iframe');
test.equal(iframeEl.sandbox.contains('sandbox'), false);
iframeEl.sandbox.add('sandbox');
R.set("sandbox");
Tracker.flush();
R.set(null);
Tracker.flush();
test.equal(iframeEl.sandbox.contains('sandbox'), false);

// Check non boolean valid values
R.set("allow-forms");
Tracker.flush();
test.equal(iframeEl.sandbox.contains('allow-forms'), true);
R.set("allow-forms allow-scripts");
Tracker.flush();
var containAll = (iframeEl.sandbox.contains('allow-forms') && iframeEl.sandbox.contains('allow-scripts'));
test.equal(containAll, true);
});

// test that we correctly update the HTML5 <image> ismap boolean property
Tinytest.add("blaze - render - image - ismap", function (test) {
var R = ReactiveVar(null);
var div = document.createElement("DIV");
materialize(IMG({isMap: function () { return R.get(); }}), div);
var imageEl = div.querySelector('img');
test.equal(imageEl.isMap, false);
imageEl.isMap = true;

R.set("ismap");
Tracker.flush();
R.set(null);
Tracker.flush();
test.equal(imageEl.isMap, false);
});

// test that we correctly update the HTML5 <ol> reversed boolean property
Tinytest.add("blaze - render - ordered list - reversed", function (test) {
var R = ReactiveVar(null);
var div = document.createElement("DIV");
materialize(OL({reversed: function () { return R.get(); }}), div);
var orderedListEl = div.querySelector('ol');
test.equal(orderedListEl.reversed, false);
orderedListEl.reversed = true;

R.set("reversed");
Tracker.flush();
R.set(null);
Tracker.flush();
test.equal(orderedListEl.reversed, false);
});

// test that we correctly update the HTML5 <script> boolean properties
Tinytest.add("blaze - render - script - defer", function (test) {
var R = ReactiveVar(null);
var div = document.createElement("DIV");
materialize(SCRIPT({src: "", defer: function () { return R.get(); }}), div);
var scriptEl = div.querySelector('script');
test.equal(scriptEl.defer, false);
scriptEl.defer = true;

R.set("defer");
Tracker.flush();
R.set(null);
Tracker.flush();
test.equal(scriptEl.defer, false);
});

// test that we correctly update the HTML5 <video> boolean properties
Tinytest.add("blaze - render - video - autoplay", function (test) {
var R = ReactiveVar(null);
var div = document.createElement("DIV");
materialize(VIDEO({autoplay: function () { return R.get(); }}), div);
var videoEl = div.querySelector('video');
test.equal(videoEl.autoplay, false);
videoEl.autoplay = true;

R.set("autoplay");
Tracker.flush();
R.set(null);
Tracker.flush();
test.equal(videoEl.autoplay, false);
});

Tinytest.add("blaze - render - video - controls", function (test) {
var R = ReactiveVar(null);
var div = document.createElement("DIV");
materialize(VIDEO({controls: function () { return R.get(); }}), div);
var videoEl = div.querySelector('video');
test.equal(videoEl.controls, false);
videoEl.controls = true;

R.set("controls");
Tracker.flush();
R.set(null);
Tracker.flush();
test.equal(videoEl.controls, false);
});

Tinytest.add("blaze - render - video - loop", function (test) {
var R = ReactiveVar(null);
var div = document.createElement("DIV");
materialize(VIDEO({loop: function () { return R.get(); }}), div);
var videoEl = div.querySelector('video');
test.equal(videoEl.loop, false);
videoEl.loop = true;

R.set("loop");
Tracker.flush();
R.set(null);
Tracker.flush();
test.equal(videoEl.loop, false);
});

Tinytest.add("blaze - render - video - muted", function (test) {
var R = ReactiveVar(null);
var div = document.createElement("DIV");
materialize(VIDEO({muted: function () { return R.get(); }}), div);
var videoEl = div.querySelector('video');
test.equal(videoEl.muted, false);
videoEl.muted = true;

R.set("muted");
Tracker.flush();
R.set(null);
Tracker.flush();
test.equal(videoEl.muted, false);
});

Tinytest.add("blaze - render - textarea", function (test) {
var run = function (optNode, text, html, code) {
if (typeof optNode === 'string') {
Expand Down