mirror of
https://github.com/CoderSherlock/CoderSherlock.github.io.git
synced 2026-06-13 08:08:10 -07:00
I_changed_another_theme
This commit is contained in:
+45
@@ -0,0 +1,45 @@
|
||||
{
|
||||
"name": "paper-toolbar",
|
||||
"version": "1.0.2",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "A material design toolbar that is easily customizable",
|
||||
"private": true,
|
||||
"main": [
|
||||
"paper-toolbar.html"
|
||||
],
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"toolbar",
|
||||
"layout"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/paper-toolbar.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"polymer": "Polymer/polymer#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/PolymerElements/paper-toolbar",
|
||||
"_release": "1.0.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.2",
|
||||
"commit": "402eb11da736a5ae19713748bfa04cd96f3f7a0c"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-toolbar.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/paper-toolbar"
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
bower_components/
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
paper-toolbar
|
||||
============
|
||||
|
||||
`paper-toolbar` is a horizontal bar containing items that can be used for
|
||||
label, navigation, search and actions. The items place inside the
|
||||
`paper-toolbar` are projected into a `class="horizontal center layout"` container inside of
|
||||
`paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items'
|
||||
sizing.
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<paper-toolbar>
|
||||
<paper-icon-button icon="menu" on-tap="{{menuAction}}"></paper-icon-button>
|
||||
<div class="title">Title</div>
|
||||
<paper-icon-button icon="more" on-tap="{{moreAction}}"></paper-icon-button>
|
||||
</paper-toolbar>
|
||||
```
|
||||
|
||||
`paper-toolbar` has a standard height, but can made be taller by setting `tall`
|
||||
class on the `paper-toolbar`. This will make the toolbar 3x the normal height.
|
||||
|
||||
```html
|
||||
<paper-toolbar class="tall">
|
||||
<paper-icon-button icon="menu"></paper-icon-button>
|
||||
</paper-toolbar>
|
||||
```
|
||||
|
||||
Apply `medium-tall` class to make the toolbar medium tall. This will make the
|
||||
toolbar 2x the normal height.
|
||||
|
||||
```html
|
||||
<paper-toolbar class="medium-tall">
|
||||
<paper-icon-button icon="menu"></paper-icon-button>
|
||||
</paper-toolbar>
|
||||
```
|
||||
|
||||
When `tall`, items can pin to either the top (default), middle or bottom. Use
|
||||
`middle` class for middle content and `bottom` class for bottom content.
|
||||
|
||||
```html
|
||||
<paper-toolbar class="tall">
|
||||
<paper-icon-button icon="menu"></paper-icon-button>
|
||||
<div class="title middle">Middle Title</div>
|
||||
<div class="title bottom">Bottom Title</div>
|
||||
</paper-toolbar>
|
||||
```
|
||||
|
||||
For `medium-tall` toolbar, the middle and bottom contents overlap and are
|
||||
pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are
|
||||
still honored separately.
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"name": "paper-toolbar",
|
||||
"version": "1.0.2",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "A material design toolbar that is easily customizable",
|
||||
"private": true,
|
||||
"main": [
|
||||
"paper-toolbar.html"
|
||||
],
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"toolbar",
|
||||
"layout"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/paper-toolbar.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"polymer": "Polymer/polymer#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
}
|
||||
}
|
||||
+81
@@ -0,0 +1,81 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<title>paper-toolbar demo</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../../iron-icons/iron-icons.html">
|
||||
<link rel="import" href="../../paper-icon-button/paper-icon-button.html">
|
||||
<link rel="import" href="../../paper-styles/paper-styles.html">
|
||||
<link rel="import" href="../paper-toolbar.html">
|
||||
|
||||
<style>
|
||||
paper-toolbar + paper-toolbar {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<paper-toolbar>
|
||||
<paper-icon-button icon="menu"></paper-icon-button>
|
||||
<span class="title">Toolbar</span>
|
||||
<paper-icon-button icon="refresh"></paper-icon-button>
|
||||
<paper-icon-button icon="add">+</paper-icon-button>
|
||||
</paper-toolbar>
|
||||
|
||||
<paper-toolbar class="tall">
|
||||
<paper-icon-button icon="menu"></paper-icon-button>
|
||||
<span class="title">Toolbar: tall</span>
|
||||
<paper-icon-button icon="refresh"></paper-icon-button>
|
||||
<paper-icon-button icon="add">+</paper-icon-button>
|
||||
</paper-toolbar>
|
||||
|
||||
<paper-toolbar class="tall">
|
||||
<paper-icon-button icon="menu" class="bottom"></paper-icon-button>
|
||||
<span class="bottom title">Toolbar: tall with elements pin to the bottom</span>
|
||||
<paper-icon-button icon="refresh" class="bottom"></paper-icon-button>
|
||||
<paper-icon-button icon="add" class="bottom">+</paper-icon-button>
|
||||
</paper-toolbar>
|
||||
|
||||
<paper-toolbar class="medium-tall">
|
||||
<paper-icon-button icon="menu"></paper-icon-button>
|
||||
<span class="flex"></span>
|
||||
<paper-icon-button icon="refresh"></paper-icon-button>
|
||||
<paper-icon-button icon="add">+</paper-icon-button>
|
||||
<span class="bottom title">Toolbar: medium-tall with label aligns to the bottom</span>
|
||||
</paper-toolbar>
|
||||
|
||||
<paper-toolbar class="tall">
|
||||
<paper-icon-button icon="menu"></paper-icon-button>
|
||||
<div class="flex"></div>
|
||||
<paper-icon-button icon="refresh"></paper-icon-button>
|
||||
<paper-icon-button icon="add">+</paper-icon-button>
|
||||
<div class="middle title">label aligns to the middle</div>
|
||||
<div class="bottom title">some stuffs align to the bottom</div>
|
||||
</paper-toolbar>
|
||||
|
||||
<paper-toolbar class="tall">
|
||||
<paper-icon-button icon="menu"></paper-icon-button>
|
||||
<div class="flex"></div>
|
||||
<paper-icon-button icon="refresh"></paper-icon-button>
|
||||
<paper-icon-button icon="add">+</paper-icon-button>
|
||||
<div class="middle title">element (e.g. progress) fits at the bottom of the toolbar</div>
|
||||
<div class="bottom flex" style="height: 20px; background-color: #0f9d58;"></div>
|
||||
</paper-toolbar>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+38
@@ -0,0 +1,38 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
|
||||
<title>paper-toolbar</title>
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iron-component-page></iron-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+368
@@ -0,0 +1,368 @@
|
||||
<!--
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../paper-styles/paper-styles.html">
|
||||
|
||||
<!--
|
||||
`paper-toolbar` is a horizontal bar containing items that can be used for
|
||||
label, navigation, search and actions. The items place inside the
|
||||
`paper-toolbar` are projected into a `class="horizontal center layout"` container inside of
|
||||
`paper-toolbar`'s Shadow DOM. You can use flex attributes to control the items'
|
||||
sizing.
|
||||
|
||||
Example:
|
||||
|
||||
<paper-toolbar>
|
||||
<paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button>
|
||||
<div class="title">Title</div>
|
||||
<paper-icon-button icon="more-vert" on-tap="moreAction"></paper-icon-button>
|
||||
</paper-toolbar>
|
||||
|
||||
`paper-toolbar` has a standard height, but can made be taller by setting `tall`
|
||||
class on the `paper-toolbar`. This will make the toolbar 3x the normal height.
|
||||
|
||||
<paper-toolbar class="tall">
|
||||
<paper-icon-button icon="menu"></paper-icon-button>
|
||||
</paper-toolbar>
|
||||
|
||||
Apply `medium-tall` class to make the toolbar medium tall. This will make the
|
||||
toolbar 2x the normal height.
|
||||
|
||||
<paper-toolbar class="medium-tall">
|
||||
<paper-icon-button icon="menu"></paper-icon-button>
|
||||
</paper-toolbar>
|
||||
|
||||
When `tall`, items can pin to either the top (default), middle or bottom. Use
|
||||
`middle` class for middle content and `bottom` class for bottom content.
|
||||
|
||||
<paper-toolbar class="tall">
|
||||
<paper-icon-button icon="menu"></paper-icon-button>
|
||||
<div class="middle title">Middle Title</div>
|
||||
<div class="bottom title">Bottom Title</div>
|
||||
</paper-toolbar>
|
||||
|
||||
For `medium-tall` toolbar, the middle and bottom contents overlap and are
|
||||
pinned to the bottom. But `middleJustify` and `bottomJustify` attributes are
|
||||
still honored separately.
|
||||
|
||||
### Styling
|
||||
|
||||
The following custom properties and mixins are available for styling:
|
||||
|
||||
Custom property | Description | Default
|
||||
----------------|-------------|----------
|
||||
`--paper-toolbar-background` | Toolbar background color | `--default-primary-color`
|
||||
`--paper-toolbar-color` | Toolbar foreground color | `--text-primary-color`
|
||||
`--paper-toolbar` | Mixin applied to the toolbar | `{}`
|
||||
|
||||
### Accessibility
|
||||
|
||||
`<paper-toolbar>` has `role="toolbar"` by default. Any elements with the class `title` will
|
||||
be used as the label of the toolbar via `aria-labelledby`.
|
||||
|
||||
@demo demo/index.html
|
||||
-->
|
||||
|
||||
<dom-module id="paper-toolbar">
|
||||
|
||||
<style>
|
||||
:host {
|
||||
/* technical */
|
||||
display: block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
|
||||
/* size */
|
||||
height: 64px;
|
||||
|
||||
background: var(--paper-toolbar-background, --default-primary-color);
|
||||
color: var(--paper-toolbar-color, --text-primary-color);
|
||||
|
||||
@apply(--paper-toolbar);
|
||||
}
|
||||
|
||||
:host(.animate) {
|
||||
/* transition */
|
||||
transition: height 0.18s ease-in;
|
||||
}
|
||||
|
||||
:host(.medium-tall) {
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
:host(.tall) {
|
||||
height: 192px;
|
||||
}
|
||||
|
||||
.toolbar-tools {
|
||||
position: relative;
|
||||
height: 64px;
|
||||
padding: 0 16px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* TODO: Where should media query breakpoints live so they can be shared between elements?
|
||||
*/
|
||||
|
||||
@media (max-width: 639px) {
|
||||
:host {
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
:host(.medium-tall) {
|
||||
height: 112px;
|
||||
}
|
||||
|
||||
:host(.tall) {
|
||||
height: 168px;
|
||||
}
|
||||
|
||||
.toolbar-tools {
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
#topBar {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* middle bar */
|
||||
#middleBar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
:host(.tall) #middleBar,
|
||||
:host(.medium-tall) #middleBar {
|
||||
-webkit-transform: translateY(100%);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
/* bottom bar */
|
||||
#bottomBar {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* make elements (e.g. buttons) respond to mouse/touch events
|
||||
*
|
||||
* `.toolbar-tools` disables touch events so multiple toolbars can stack and not
|
||||
* absorb events. All children must have pointer events re-enabled to work as
|
||||
* expected.
|
||||
*/
|
||||
.toolbar-tools > ::content > *:not([disabled]) {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.toolbar-tools > ::content .title {
|
||||
@apply(--paper-font-title);
|
||||
@apply(--layout-flex);
|
||||
|
||||
pointer-events: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
/*
|
||||
* Polymer/polymer/issues/1525
|
||||
* --paper-font-title defines a `font-weight`
|
||||
* let's override its value, but we need `important!`
|
||||
* because all mixins are resolved in rule's selector that has higher precedence
|
||||
* than the current selector.
|
||||
*/
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO: Refactor these selectors
|
||||
* Work in progress.
|
||||
*/
|
||||
.toolbar-tools > ::content paper-icon-button[icon=menu] {
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.toolbar-tools > ::content > .title,
|
||||
.toolbar-tools > ::content[select=".middle"] > .title,
|
||||
.toolbar-tools > ::content[select=".bottom"] > .title {
|
||||
margin-left: 56px;
|
||||
}
|
||||
|
||||
.toolbar-tools > ::content > paper-icon-button + .title,
|
||||
.toolbar-tools > ::content[select=".middle"] paper-icon-button + .title,
|
||||
.toolbar-tools > ::content[select=".bottom"] paper-icon-button + .title {
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
|
||||
<div id="topBar" class$="[[_computeBarClassName(justify)]]">
|
||||
<content select=":not(.middle):not(.bottom)"></content>
|
||||
</div>
|
||||
|
||||
<div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]">
|
||||
<content select=".middle"></content>
|
||||
</div>
|
||||
|
||||
<div id="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]">
|
||||
<content select=".bottom"></content>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
function classNames(obj) {
|
||||
var classNames = [];
|
||||
for (var key in obj) {
|
||||
if (obj.hasOwnProperty(key) && obj[key]) {
|
||||
classNames.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
return classNames.join(' ');
|
||||
}
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'paper-toolbar',
|
||||
|
||||
hostAttributes: {
|
||||
'role': 'toolbar'
|
||||
},
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* Controls how the items are aligned horizontally when they are placed
|
||||
* at the bottom.
|
||||
* Options are `start`, `center`, `end`, `justified` and `around`.
|
||||
*
|
||||
* @attribute bottomJustify
|
||||
* @type string
|
||||
* @default ''
|
||||
*/
|
||||
bottomJustify: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
|
||||
/**
|
||||
* Controls how the items are aligned horizontally.
|
||||
* Options are `start`, `center`, `end`, `justified` and `around`.
|
||||
*
|
||||
* @attribute justify
|
||||
* @type string
|
||||
* @default ''
|
||||
*/
|
||||
justify: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
|
||||
/**
|
||||
* Controls how the items are aligned horizontally when they are placed
|
||||
* in the middle.
|
||||
* Options are `start`, `center`, `end`, `justified` and `around`.
|
||||
*
|
||||
* @attribute middleJustify
|
||||
* @type string
|
||||
* @default ''
|
||||
*/
|
||||
middleJustify: {
|
||||
type: String,
|
||||
value: ''
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
this._observer = this._observe(this);
|
||||
this._updateAriaLabelledBy();
|
||||
},
|
||||
|
||||
detached: function() {
|
||||
if (this._observer) {
|
||||
this._observer.disconnect();
|
||||
}
|
||||
},
|
||||
|
||||
_observe: function(node) {
|
||||
var observer = new MutationObserver(function() {
|
||||
this._updateAriaLabelledBy();
|
||||
}.bind(this));
|
||||
observer.observe(node, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
return observer;
|
||||
},
|
||||
|
||||
_updateAriaLabelledBy: function() {
|
||||
var labelledBy = [];
|
||||
var contents = Polymer.dom(this.root).querySelectorAll('content');
|
||||
for (var content, index = 0; content = contents[index]; index++) {
|
||||
var nodes = Polymer.dom(content).getDistributedNodes();
|
||||
for (var node, jndex = 0; node = nodes[jndex]; jndex++) {
|
||||
if (node.classList && node.classList.contains('title')) {
|
||||
if (node.id) {
|
||||
labelledBy.push(node.id);
|
||||
} else {
|
||||
var id = 'paper-toolbar-label-' + Math.floor(Math.random() * 10000);
|
||||
node.id = id;
|
||||
labelledBy.push(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (labelledBy.length > 0) {
|
||||
this.setAttribute('aria-labelledby', labelledBy.join(' '));
|
||||
}
|
||||
},
|
||||
|
||||
_computeBarClassName: function(barJustify) {
|
||||
var classObj = {
|
||||
center: true,
|
||||
horizontal: true,
|
||||
layout: true,
|
||||
'toolbar-tools': true
|
||||
};
|
||||
|
||||
// If a blank string or any falsy value is given, no other class name is
|
||||
// added.
|
||||
if (barJustify) {
|
||||
var justifyClassName = (barJustify === 'justified') ?
|
||||
barJustify :
|
||||
barJustify + '-justified';
|
||||
|
||||
classObj[justifyClassName] = true;
|
||||
}
|
||||
|
||||
return classNames(classObj);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}());
|
||||
|
||||
</script>
|
||||
+24
@@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
<title>paper-toolbar tests</title>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
WCT.loadSuites([
|
||||
'paper-toolbar.html'
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,147 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>paper-toolbar basic tests</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
<script src="../../test-fixture/test-fixture-mocha.js"></script>
|
||||
|
||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
<link rel="import" href="../paper-toolbar.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="basic">
|
||||
<template>
|
||||
<paper-toolbar></paper-toolbar>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="title">
|
||||
<template>
|
||||
<paper-toolbar>
|
||||
<span class="title">Title</span>
|
||||
</paper-toolbar>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="title-with-id">
|
||||
<template>
|
||||
<paper-toolbar>
|
||||
<span class="title" id="title">Title</span>
|
||||
</paper-toolbar>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="multiple-titles">
|
||||
<template>
|
||||
<paper-toolbar>
|
||||
<span class="title">Title 1</span>
|
||||
<span class="title">Title 2</span>
|
||||
</paper-toolbar>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
suite('basic', function() {
|
||||
|
||||
var toolbar;
|
||||
|
||||
setup(function() {
|
||||
toolbar = fixture('basic');
|
||||
});
|
||||
|
||||
test('has expected medium-tall height', function() {
|
||||
var old = toolbar.offsetHeight;
|
||||
toolbar.classList.add('medium-tall');
|
||||
expect(toolbar.offsetHeight).to.be.eql(old * 2);
|
||||
});
|
||||
|
||||
test('has expected tall height', function() {
|
||||
var old = toolbar.offsetHeight;
|
||||
toolbar.classList.add('tall');
|
||||
expect(toolbar.offsetHeight).to.be.eql(old * 3);
|
||||
});
|
||||
|
||||
test('distributes nodes to topBar by default', function() {
|
||||
var item = document.createElement('div');
|
||||
Polymer.dom(toolbar).appendChild(item);
|
||||
Polymer.dom.flush();
|
||||
|
||||
var insertionPoint = Polymer.dom(item).getDestinationInsertionPoints()[0];
|
||||
expect(Polymer.dom(insertionPoint).parentNode).to.be.eql(toolbar.$.topBar);
|
||||
});
|
||||
|
||||
test('distributes nodes with "middle" class to middleBar', function() {
|
||||
var item = document.createElement('div');
|
||||
item.classList.add('middle');
|
||||
Polymer.dom(toolbar).appendChild(item);
|
||||
Polymer.dom.flush();
|
||||
|
||||
var insertionPoint = Polymer.dom(item).getDestinationInsertionPoints()[0];
|
||||
expect(Polymer.dom(insertionPoint).parentNode).to.be.eql(toolbar.$.middleBar);
|
||||
});
|
||||
|
||||
test('distributes nodes with "bottom" class to bottombar', function() {
|
||||
var item = document.createElement('div');
|
||||
item.classList.add('bottom');
|
||||
Polymer.dom(toolbar).appendChild(item);
|
||||
Polymer.dom.flush();
|
||||
|
||||
var insertionPoint = Polymer.dom(item).getDestinationInsertionPoints()[0];
|
||||
expect(Polymer.dom(insertionPoint).parentNode).to.be.eql(toolbar.$.bottomBar);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
suite('a11y', function() {
|
||||
|
||||
test('has role="toolbar"', function() {
|
||||
var toolbar = fixture('basic');
|
||||
assert.equal(toolbar.getAttribute('role'), 'toolbar', 'has role="toolbar"');
|
||||
});
|
||||
|
||||
test('children with .title becomes the label', function() {
|
||||
var toolbar = fixture('title');
|
||||
assert.isTrue(toolbar.hasAttribute('aria-labelledby'), 'has aria-labelledby');
|
||||
assert.equal(toolbar.getAttribute('aria-labelledby'), Polymer.dom(toolbar).querySelector('.title').id, 'aria-labelledby has the id of the .title element');
|
||||
});
|
||||
|
||||
test('existing ids on titles are preserved', function() {
|
||||
var toolbar = fixture('title-with-id');
|
||||
assert.isTrue(toolbar.hasAttribute('aria-labelledby'), 'has aria-labelledby');
|
||||
assert.equal(Polymer.dom(toolbar).querySelector('.title').id, 'title', 'id is preserved');
|
||||
});
|
||||
|
||||
test('multiple children with .title becomes the label', function() {
|
||||
var toolbar = fixture('multiple-titles');
|
||||
assert.isTrue(toolbar.hasAttribute('aria-labelledby'), 'has aria-labelledby');
|
||||
var ids = [];
|
||||
var titles = Polymer.dom(toolbar).querySelectorAll('.title');
|
||||
for (var title, index = 0; title = titles[index]; index++) {
|
||||
ids.push(title.id);
|
||||
}
|
||||
assert.equal(toolbar.getAttribute('aria-labelledby'), ids.join(' '), 'aria-labelledby has the id of all .title elements');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user