Skip to content
This repository has been archived by the owner on Dec 19, 2024. It is now read-only.

Commit

Permalink
Merge pull request #269 from PolymerElements/auto-cleanup
Browse files Browse the repository at this point in the history 
Automatic format!
  • Loading branch information
Elliott Marquez authored Apr 19, 2018
2 parents b2c0d4b + 59b60a6 commit 1db0d3a
Show file tree
Hide file tree
Showing 8 changed files with 1,910 additions and 505 deletions.
3 changes: 3 additions & 0 deletions .travis.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ before_script:
npm run update-types && git diff --exit-code || (echo -e
'\n\033[31mERROR:\033[0m Typings are stale. Please run "npm run
update-types".' && false)
- >-
npm run format && git diff --exit-code || (echo -e '\n\033[31mERROR:\033[0m
Typings are stale. Please run "npm run format".' && false)
env:
global:
- secure: >-
Expand Down
18 changes: 4 additions & 14 deletions demo/cats-only.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,27 +28,18 @@
</dom-module>

<script>

Polymer({
is: 'cats-only',

properties: {
value: {
type: String
},
value: {type: String},

name: {
type: String
}
name: {type: String}
},

behaviors: [
Polymer.IronValidatableBehavior
],
behaviors: [Polymer.IronValidatableBehavior],

listeners: {
'input': '_onInput'
},
listeners: {'input': '_onInput'},

_onInput: function() {
this.value = this.$.input.value;
Expand All @@ -61,5 +52,4 @@
}

});

</script>
5 changes: 3 additions & 2 deletions iron-form.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,8 +98,9 @@ interface IronFormElement extends Polymer.Element {
headers: object|null|undefined;

/**
* Set the `withCredentials` flag on the request. See PolymerElements/iron-ajax for
* more details. Only works when `allowRedirect` is false.
* Set the `withCredentials` flag on the request. See
* PolymerElements/iron-ajax for more details. Only works when
* `allowRedirect` is false.
*/
withCredentials: boolean|null|undefined;
attached(): void;
Expand Down
145 changes: 79 additions & 66 deletions iron-form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@
</template>

<script>
(function() {
(function() {

Polymer({
is: 'iron-form',
Expand All @@ -114,26 +114,23 @@
* ajax request, and you want the page to redirect to the action URL
* after the form has been submitted.
*/
allowRedirect: {
type: Boolean,
value: false
},
allowRedirect: {type: Boolean, value: false},
/**
* HTTP request headers to send. See PolymerElements/iron-ajax for
* more details. Only works when `allowRedirect` is false.
*/
* HTTP request headers to send. See PolymerElements/iron-ajax for
* more details. Only works when `allowRedirect` is false.
*/
headers: {
type: Object,
value: function() { return {}; }
value: function() {
return {};
}
},
/**
* Set the `withCredentials` flag on the request. See PolymerElements/iron-ajax for
* more details. Only works when `allowRedirect` is false.
*/
withCredentials: {
type: Boolean,
value: false
},
* Set the `withCredentials` flag on the request. See
* PolymerElements/iron-ajax for more details. Only works when
* `allowRedirect` is false.
*/
withCredentials: {type: Boolean, value: false},
},
/**
* Fired if the form cannot be submitted because it's invalid.
Expand Down Expand Up @@ -194,20 +191,19 @@
// values.
this.async(this._saveInitialValues.bind(this), 1);
} else {
this._nodeObserver = Polymer.dom(this).observeNodes(
function(mutations) {
for (var i = 0; i < mutations.addedNodes.length; i++) {
if (mutations.addedNodes[i].tagName === 'FORM') {
this._form = mutations.addedNodes[i];
// At this point in time, all custom elements are expected
// to be upgraded, hence we'll be able to traverse their
// shadowRoots.
this._init();
Polymer.dom(this).unobserveNodes(this._nodeObserver);
this._nodeObserver = null;
}
this._nodeObserver = Polymer.dom(this).observeNodes(function(mutations) {
for (var i = 0; i < mutations.addedNodes.length; i++) {
if (mutations.addedNodes[i].tagName === 'FORM') {
this._form = mutations.addedNodes[i];
// At this point in time, all custom elements are expected
// to be upgraded, hence we'll be able to traverse their
// shadowRoots.
this._init();
Polymer.dom(this).unobserveNodes(this._nodeObserver);
this._nodeObserver = null;
}
}.bind(this));
}
}.bind(this));
}
},

Expand Down Expand Up @@ -237,9 +233,7 @@
if (!this._defaults.has(node)) {
// Submittables are expected to have `value` property,
// that's what gets serialized.
var defaults = {
value: node.value
};
var defaults = {value: node.value};
if ('checked' in node) {
defaults.checked = node.checked;
}
Expand Down Expand Up @@ -304,7 +298,8 @@
return;
}

// Remove any existing children in the submission form (from a previous submit).
// Remove any existing children in the submission form (from a previous
// submit).
this.$.helper.textContent = '';

var json = this.serializeForm();
Expand All @@ -314,13 +309,15 @@
// If we're submitting the form natively, then create a hidden element for
// each of the values.
for (var element in json) {
this.$.helper.appendChild(this._createHiddenElement(element, json[element]));
this.$.helper.appendChild(
this._createHiddenElement(element, json[element]));
}

// Copy the original form attributes.
this.$.helper.action = this._form.getAttribute('action');
this.$.helper.method = this._form.getAttribute('method') || 'GET';
this.$.helper.contentType = this._form.getAttribute('enctype') || 'application/x-www-form-urlencoded';
this.$.helper.contentType = this._form.getAttribute('enctype') ||
'application/x-www-form-urlencoded';

this.$.helper.submit();
this.fire('iron-form-submit');
Expand All @@ -346,8 +343,9 @@
}

// Ensure the native form fired the `reset` event.
// User might have bound `<button on-click="_resetIronForm">`, or directly called
// `ironForm.reset()`. In these cases we want to first reset the native form.
// User might have bound `<button on-click="_resetIronForm">`, or directly
// called `ironForm.reset()`. In these cases we want to first reset the
// native form.
if (!event || event.type !== 'reset' || event.target !== this._form) {
this._form.reset();
return;
Expand Down Expand Up @@ -388,19 +386,20 @@
return json;
},

_handleFormResponse: function (event) {
_handleFormResponse: function(event) {
this.fire('iron-form-response', event.detail);
},

_handleFormError: function (event) {
_handleFormError: function(event) {
this.fire('iron-form-error', event.detail);
},

_makeAjaxRequest: function(json) {
// Initialize the iron-ajax element if we haven't already.
if (!this.request) {
this.request = document.createElement('iron-ajax');
this.request.addEventListener('response', this._handleFormResponse.bind(this));
this.request.addEventListener(
'response', this._handleFormResponse.bind(this));
this.request.addEventListener('error', this._handleFormError.bind(this));
}

Expand All @@ -409,7 +408,8 @@
// elements with those names.
this.request.url = this._form.getAttribute('action');
this.request.method = this._form.getAttribute('method') || 'GET';
this.request.contentType = this._form.getAttribute('enctype') || 'application/x-www-form-urlencoded';
this.request.contentType = this._form.getAttribute('enctype') ||
'application/x-www-form-urlencoded';
this.request.withCredentials = this.withCredentials;
this.request.headers = this.headers;

Expand All @@ -421,22 +421,25 @@

// Allow for a presubmit hook
var event = this.fire('iron-form-presubmit', {}, {cancelable: true});
if(!event.defaultPrevented) {
if (!event.defaultPrevented) {
this.request.generateRequest();
this.fire('iron-form-submit', json);
}
},

_getValidatableElements: function() {
return this._findElements(this._form, true /* ignoreName */, false /* skipSlots */);
return this._findElements(
this._form, true /* ignoreName */, false /* skipSlots */);
},

_getSubmittableElements: function() {
return this._findElements(this._form, false /* ignoreName */, false /* skipSlots */);
return this._findElements(
this._form, false /* ignoreName */, false /* skipSlots */);
},

/**
* Traverse the parent element to find and add all submittable nodes to `submittable`.
* Traverse the parent element to find and add all submittable nodes to
* `submittable`.
* @param {!Node} parent The parent node
* @param {!boolean} ignoreName Whether the name of the submittable nodes should be disregarded
* @param {!boolean} skipSlots Whether to skip traversing of slot elements
Expand Down Expand Up @@ -477,12 +480,14 @@
continue;
}

// Note: assignedNodes does not contain <slot> or <content> because
// Note: assignedNodes does not contain <slot> or <content> because
// getDistributedNodes flattens the tree.
this._searchSubmittable(submittable, assignedNodes[i], ignoreName);
var nestedAssignedNodes = Polymer.dom(assignedNodes[i]).querySelectorAll('*');
var nestedAssignedNodes =
Polymer.dom(assignedNodes[i]).querySelectorAll('*');
for (var j = 0; j < nestedAssignedNodes.length; j++) {
this._searchSubmittable(submittable, nestedAssignedNodes[j], ignoreName);
this._searchSubmittable(
submittable, nestedAssignedNodes[j], ignoreName);
}
}
},
Expand All @@ -500,45 +505,52 @@
if (this._isSubmittable(node, ignoreName)) {
submittable.push(node);
} else if (node.root) {
this._findElements(node.root, ignoreName, true /* skipSlots */, submittable);
this._findElements(
node.root, ignoreName, true /* skipSlots */, submittable);
}
},

/**
* An element is submittable if it is not disabled, and if it has a
* 'name' attribute. If we ignore the name, check if is validatable.
* This allows `_findElements` to decide if to explore an element's shadowRoot or not:
* an element implementing `validate()` is considered validatable, and we don't
* search for validatables in its shadowRoot.
* This allows `_findElements` to decide if to explore an element's shadowRoot
* or not: an element implementing `validate()` is considered validatable, and
* we don't search for validatables in its shadowRoot.
* @param {!Node} node
* @param {!boolean} ignoreName
* @return {boolean}
* @private
*/
_isSubmittable: function(node, ignoreName) {
return (!node.disabled && (ignoreName ? node.name || typeof node.validate === 'function' : node.name));
return (
!node.disabled &&
(ignoreName ? node.name || typeof node.validate === 'function' :
node.name));
},

_serializeElementValues: function(element) {
// We will assume that every custom element that needs to be serialized
// has a `value` property, and it contains the correct value.
// The only weird one is an element that implements IronCheckedElementBehaviour,
// in which case like the native checkbox/radio button, it's only used
// when checked.
// For native elements, from https://www.w3.org/TR/html5/forms.html#the-form-element.
// Native submittable elements: button, input, keygen, object, select, textarea;
// The only weird one is an element that implements
// IronCheckedElementBehaviour, in which case like the native checkbox/radio
// button, it's only used when checked. For native elements, from
// https://www.w3.org/TR/html5/forms.html#the-form-element. Native
// submittable elements: button, input, keygen, object, select, textarea;
// 1. We will skip `keygen and `object` for this iteration, and deal with
// them if they're actually required.
// 2. <button> and <textarea> have a `value` property, so they behave like
// the custom elements.
// 3. <select> can have multiple options selected, in which case its
// `value` is incorrect, and we must use the values of each of its
// `selectedOptions`
// 4. <input> can have a whole bunch of behaviours, so it's handled separately.
// 4. <input> can have a whole bunch of behaviours, so it's handled
// separately.
// 5. Buttons are hard. The button that was clicked to submit the form
// is the one who's name/value gets sent to the server.
var tag = element.tagName.toLowerCase();
if (tag === 'button' || (tag === 'input' && (element.type === 'submit' || element.type === 'reset'))) {
if (tag === 'button' ||
(tag === 'input' &&
(element.type === 'submit' || element.type === 'reset'))) {
return [];
}

Expand All @@ -556,7 +568,8 @@
_serializeSelectValues: function(element) {
var values = [];

// A <select multiple> has an array of options, some of which can be selected.
// A <select multiple> has an array of options, some of which can be
// selected.
for (var i = 0; i < element.options.length; i++) {
if (element.options[i].selected) {
values.push(element.options[i].value)
Expand All @@ -580,10 +593,10 @@
},

_createHiddenElement: function(name, value) {
var input = document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("name", name);
input.setAttribute("value", value);
var input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', name);
input.setAttribute('value', value);
return input;
},

Expand All @@ -600,6 +613,6 @@
}
}
});
})();
})();
</script>
</dom-module>
Loading

0 comments on commit 1db0d3a

Please sign in to comment.