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

Rename x-* elements. #1488

Merged
merged 3 commits into from
May 6, 2015
Merged

Rename x-* elements. #1488

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8e12bf9
Rename x-* elements.
May 6, 2015
8932d54
dom-autobind -> dom-bind
May 6, 2015
b795784
Merge branch '0.8-preview' into 0.8-rename
kevinpschaaf May 6, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions polymer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,8 @@
</script>

<link rel="import" href="src/lib/custom-style.html">
<link rel="import" href="src/lib/template/x-autobind.html">
<link rel="import" href="src/lib/template/x-template.html">
<link rel="import" href="src/lib/template/x-repeat.html">
<link rel="import" href="src/lib/template/x-array-selector.html">
<link rel="import" href="src/lib/template/x-if.html">
<link rel="import" href="src/lib/template/dom-bind.html">
<link rel="import" href="src/lib/template/dom-template.html">
<link rel="import" href="src/lib/template/dom-repeat.html">
<link rel="import" href="src/lib/template/array-selector.html">
<link rel="import" href="src/lib/template/dom-if.html">
6 changes: 3 additions & 3 deletions src/lib/custom-style.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@
in the main document that can take advantage of several special features of
Polymer's styling system:

* Document styles defined in an `x-style` will be shimmed to ensure they do
* Document styles defined in a `custom-style` will be shimmed to ensure they do
not leak into local DOM when running on browsers without non-native Shadow DOM.
* Shadow DOM-specific `/deep/` and `::shadow` combinators will be shimmed on
browsers without non-native Shadow DOM.
* Custom properties used by Polymer's experimental shim for cross-scope styling
may be defined in an `x-style`.
* Custom properties used by Polymer's shim for cross-scope styling
may be defined in an `custom-style`.

Example:

Expand Down
10 changes: 5 additions & 5 deletions src/lib/template/x-array-selector.html → src/lib/template/array-selector.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

<!--
Keeping structured data in sync requires that Polymer understand the path
associations of data being bound. The `x-array-selector` element ensures path
associations of data being bound. The `array-selector` element ensures path
linkage when selecting specific items from an array (either single or multiple).
The `items` property accepts an array of user data, and via the `select(item)`
and `deselect(item)` API, updates the `selected` property which may be bound to
Expand All @@ -25,16 +25,16 @@
<template>

<div> Employee list: </div>
<template is="x-repeat" id="employeeList" items="{{employees}}">
<template is="dom-repeat" id="employeeList" items="{{employees}}">
<div>First name: <span>{{item.first}}</span></div>
<div>Last name: <span>{{item.last}}</span></div>
<button on-click="toggleSelection">Select</button>
</template>

<x-array-selector id="selector" items="{{employees}}" selected="{{selected}}" multi toggle></x-array-selector>
<array-selector id="selector" items="{{employees}}" selected="{{selected}}" multi toggle></array-selector>

<div> Selected employees: </div>
<template is="x-repeat" items="{{selected}}">
<template is="dom-repeat" items="{{selected}}">
<div>First name: <span>{{item.first}}</span></div>
<div>Last name: <span>{{item.last}}</span></div>
</template>
Expand Down Expand Up @@ -65,7 +65,7 @@
<script>

Polymer({
is: 'x-array-selector',
is: 'array-selector',

properties: {

Expand Down
10 changes: 4 additions & 6 deletions src/lib/template/x-autobind.html → src/lib/template/dom-bind.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,13 @@

<!--

**THIS ELEMENT IS EXPERIMENTAL. API AND NAME SUBJECT TO CHANGE.**

Polymer's binding features are only available within templates that are managed
by Polymer. As such, these features are available in templates used to define
Polymer elements, for example, but not for elements placed directly in the main
document.

In order to use Polymer bindings without defining a new custom element, elements
utilizing bindings may be wrapped with the `x-autobind` template extension.
utilizing bindings may be wrapped with the `dom-bind` template extension.
This template will immediately stamp itself into the main document and bind
elements to the template itself as the binding scope.

Expand All @@ -34,11 +32,11 @@
</head>
<body>

<template is="x-autobind">
<template is="dom-bind">

<core-ajax url="http://..." lastresponse="{{data}}"></core-ajax>

<template is="x-repeat" items="{{data}}">
<template is="dom-repeat" items="{{data}}">
<div><span>{{item.first}}</span> <span>{{item.last}}</span></div>
</template>

Expand All @@ -54,7 +52,7 @@

Polymer({

is: 'x-autobind',
is: 'dom-bind',

extends: 'template',

Expand Down
4 changes: 2 additions & 2 deletions src/lib/template/x-if.html → src/lib/template/dom-if.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
*/
Polymer({

is: 'x-if',
is: 'dom-if',
extends: 'template',

/**
Expand Down Expand Up @@ -117,7 +117,7 @@
if (this._instance) {
var c = this._instance._children;
if (c) {
// use first child parent, for case when x-if may have been detached
// use first child parent, for case when dom-if may have been detached
var parent = Polymer.dom(Polymer.dom(c[0]).parentNode);
c.forEach(function(n) {
parent.removeChild(n);
Expand Down
24 changes: 11 additions & 13 deletions src/lib/template/x-repeat.html → src/lib/template/dom-repeat.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,11 @@

<!--

**THIS ELEMENT IS EXPERIMENTAL. API AND NAME SUBJECT TO CHANGE.**

The `x-repeat` element is a custom `HTMLTemplateElement` type extension that
The `dom-repeat` element is a custom `HTMLTemplateElement` type extension that
automatically stamps and binds one instance of template content to each object
in a user-provided array. `x-repeat` accepts an `items` property, and one
in a user-provided array. `dom-repeat` accepts an `items` property, and one
instance of the template is stamped for each item into the DOM at the location
of the `x-repeat` element. The `item` property will be set on each instance's
of the `dom-repeat` element. The `item` property will be set on each instance's
binding scope, thus templates should bind to sub-properties of `item`.

Example:
Expand All @@ -27,7 +25,7 @@
<template>

<div> Employee list: </div>
<template is="x-repeat" items="{{employees}}">
<template is="dom-repeat" items="{{employees}}">
<div>First name: <span>{{item.first}}</span></div>
<div>Last name: <span>{{item.last}}</span></div>
</template>
Expand Down Expand Up @@ -58,7 +56,7 @@
shim of this API on unsupported browsers), and template instances are kept in
sync with the data in the array.

A view-specific filter/sort may be applied to each `x-repeat` by supplying a
A view-specific filter/sort may be applied to each `dom-repeat` by supplying a
`filter` and/or `sort` property. This may be a string that names a function on
the host, or a function may be assigned to the property directly. The functions
should implemented following the standard `Array` filter/sort API.
Expand All @@ -67,7 +65,7 @@
of `items`, the `observe` property may be set as a space-separated list of
`item` sub-fields that should cause a re-filter/sort when modified.

For example, for an `x-repeat` with a filter of the following:
For example, for an `dom-repeat` with a filter of the following:

```js
isEngineer: function(item) {
Expand All @@ -78,7 +76,7 @@
Then the `observe` property should be configured as follows:

```html
<template is="x-repeat" items="{{employees}}"
<template is="dom-repeat" items="{{employees}}"
filter="isEngineer" observe="type manager.type">
```

Expand All @@ -91,7 +89,7 @@

Polymer({

is: 'x-repeat',
is: 'dom-repeat',
extends: 'template',

/**
Expand Down Expand Up @@ -558,7 +556,7 @@

/**
* Returns the item associated with a given element stamped by
* this `x-repeat`.
* this `dom-repeat`.
*/
itemForElement: function(el) {
var instance = this._instanceForElement(el);
Expand All @@ -567,15 +565,15 @@

/**
* Returns the `Polymer.Collection` key associated with a given
* element stamped by this `x-repeat`.
* element stamped by this `dom-repeat`.
*/
keyForElement: function(el) {
var instance = this._instanceForElement(el);
return instance && instance.__key__;
},

/**
* Returns the row index for a given element stamped by this `x-repeat`.
* Returns the row index for a given element stamped by this `dom-repeat`.
* If `sort` is provided, the index will reflect the sorted order (rather
* than the original array order).
*/
Expand Down
2 changes: 1 addition & 1 deletion src/lib/template/x-template.html → src/lib/template/dom-template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
*/
Polymer({

is: 'x-template',
is: 'dom-template',
extends: 'template',

behaviors: [
Expand Down
4 changes: 2 additions & 2 deletions test/runner.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,8 @@
'unit/styling-cross-scope-apply.html',
'unit/custom-style.html',
'unit/dynamic-import.html',
'unit/x-repeat.html',
'unit/x-if.html'
'unit/dom-repeat.html',
'unit/dom-if.html'
]);
</script>
</body>
Expand Down
8 changes: 4 additions & 4 deletions test/smoke/x-if.html → test/smoke/dom-if.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
<html>
<head>

<title>x-if</title>
<title>dom-if</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../polymer.html">
<link rel="import" href="../../src/lib/template/x-if.html">
<link rel="import" href="../../src/lib/template/dom-if.html">

</head>
<body>
Expand All @@ -27,14 +27,14 @@
<br><br>
<input value="{{value::input}}">

<template is="x-if" id="if1" if="[[checked]]">
<template is="dom-if" id="if1" if="[[checked]]">
<h3>Lazy / hidden</h3>
<div class="content">
<div>I have been <input value="{{parent.value::input}}"></div>
</div>
</template>

<template is="x-if" id="if2" if="[[checked]]" restamp>
<template is="dom-if" id="if2" if="[[checked]]" restamp>
<h3>Restamp</h3>
<div class="content">
<div>I have been <input value="{{parent.value::input}}"></div>
Expand Down
14 changes: 7 additions & 7 deletions test/smoke/x-repeat.html → test/smoke/dom-repeat.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<head>

<title>x-repeat</title>
<title>dom-repeat</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand Down Expand Up @@ -96,7 +96,7 @@
<div class="layout horizontal flex">

<div class="column flex">
<template is="x-repeat" id="xr1-1" items="{{items}}" as="itemA" inner-as="inner">
<template is="dom-repeat" id="xr1-1" items="{{items}}" as="itemA" inner-as="inner">
<div class="item" id="xr1-1" idx$="{{index}}">
<div class="index">idx: <span>{{index}}</span></div>
<button on-click="changeOuterA">Change outerA</button>
Expand All @@ -105,7 +105,7 @@
<x-labeled-input label="outerA" value="{{outerA}}"></x-labeled-input>
<x-labeled-input label="outerObjA.value" value="{{outerObjA.value}}"></x-labeled-input>
<x-labeled-input label="computeConcat(itemA.name, outerObjA.value)" value="{{computeConcat(itemA.name, outerObjA.value)}}" disabled></x-labeled-input>
<template is="x-repeat" id="xr1-2" idx$="{{index}}" items="{{itemA.items}}" as="itemB">
<template is="dom-repeat" id="xr1-2" idx$="{{index}}" items="{{itemA.items}}" as="itemB">
<div class="item" id="xr1-2" idx$="{{index}}">
<div class="index">idx: <span>{{index}}</span></div>
<button on-click="changeOuterB">Change outerB</button>
Expand All @@ -115,7 +115,7 @@
<x-labeled-input label="outerB" value="{{outerB}}"></x-labeled-input>
<x-labeled-input label="outerObjB.value" value="{{outerObjB.value}}"></x-labeled-input>
<x-labeled-input label="computeConcat(itemB.name, outerObjB.value)" value="{{computeConcat(itemB.name, outerObjB.value)}}" disabled></x-labeled-input>
<template is="x-repeat" id="xr1-3" idx$="{{index}}" items="{{itemB.items}}" as="itemC">
<template is="dom-repeat" id="xr1-3" idx$="{{index}}" items="{{itemB.items}}" as="itemC">
<div class="item" id="xr1-3" idx$="{{index}}">
<div class="index">idx: <span>{{index}}</span></div>
<button on-click="changeOuterC">Change outerC</button>
Expand All @@ -135,7 +135,7 @@
</div>

<div class="column flex">
<template is="x-repeat" id="xr2-1" items="{{items}}" as="itemA" inner-as="inner">
<template is="dom-repeat" id="xr2-1" items="{{items}}" as="itemA" inner-as="inner">
<div class="item" id="xr2-1" idx$="{{index}}">
<div class="index">idx: <span>{{index}}</span></div>
<button on-click="changeOuterA">Change outerA</button>
Expand All @@ -144,7 +144,7 @@
<x-labeled-input label="outerA" value="{{outerA}}"></x-labeled-input>
<x-labeled-input label="outerObjA.value" value="{{outerObjA.value}}"></x-labeled-input>
<x-labeled-input label="computeConcat(itemA.name, outerObjA.value)" value="{{computeConcat(itemA.name, outerObjA.value)}}" disabled></x-labeled-input>
<template is="x-repeat" id="xr2-2" idx$="{{index}}" items="{{itemA.items}}" as="itemB">
<template is="dom-repeat" id="xr2-2" idx$="{{index}}" items="{{itemA.items}}" as="itemB">
<div class="item" id="xr2-2" idx$="{{index}}">
<div class="index">idx: <span>{{index}}</span></div>
<button on-click="changeOuterB">Change outerB</button>
Expand All @@ -154,7 +154,7 @@
<x-labeled-input label="outerB" value="{{outerB}}"></x-labeled-input>
<x-labeled-input label="outerObjB.value" value="{{outerObjB.value}}"></x-labeled-input>
<x-labeled-input label="computeConcat(itemB.name, outerObjB.value)" value="{{computeConcat(itemB.name, outerObjB.value)}}" disabled></x-labeled-input>
<template is="x-repeat" id="xr2-3" idx$="{{index}}" items="{{itemB.items}}" as="itemC">
<template is="dom-repeat" id="xr2-3" idx$="{{index}}" items="{{itemB.items}}" as="itemC">
<div class="item" id="xr2-3" idx$="{{index}}">
<div class="index">idx: <span>{{index}}</span></div>
<button on-click="changeOuterC">Change outerC</button>
Expand Down
12 changes: 6 additions & 6 deletions test/unit/x-if-elements.html → test/unit/dom-if-elements.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,17 @@

<dom-module id="x-nested-if">
<template>
<template is="x-if" id="if-1" if="{{shouldStamp}}" on-dom-change="domUpdateHandler">
<template is="dom-if" id="if-1" if="{{shouldStamp}}" on-dom-change="domUpdateHandler">
<x-foo on-test1="testHandler1"
prop="{{prop}}"
item-prop="{{item.prop}}">
</x-foo>
<template is="x-if" id="if-2" if="{{shouldStamp}}">
<template is="dom-if" id="if-2" if="{{shouldStamp}}">
<x-foo on-test2="testHandler2"
prop="{{prop}}"
item-prop="{{item.prop}}">
</x-foo>
<template is="x-if" id="if-3" if="{{shouldStamp}}">
<template is="dom-if" id="if-3" if="{{shouldStamp}}">
<x-foo on-test3="testHandler3"
prop="{{prop}}"
item-prop="{{item.prop}}">
Expand Down Expand Up @@ -80,15 +80,15 @@

<dom-module id="x-nested-if-configured">
<template>
<template is="x-if" id="if-1" if="{{shouldStamp}}">
<template is="dom-if" id="if-1" if="{{shouldStamp}}">
<x-foo prop="{{prop}}"
item-prop="{{item.prop}}">
</x-foo>
<template is="x-if" id="if-2" if="{{shouldStamp}}">
<template is="dom-if" id="if-2" if="{{shouldStamp}}">
<x-foo prop="{{prop}}"
item-prop="{{item.prop}}">
</x-foo>
<template is="x-if" id="if-3" if="{{shouldStamp}}">
<template is="dom-if" id="if-3" if="{{shouldStamp}}">
<x-foo prop="{{prop}}"
item-prop="{{item.prop}}">
</x-foo>
Expand Down
Loading