1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update textarea

This commit is contained in:
Luke Pulverenti 2016-06-23 01:25:16 -04:00
parent b1cca31fa5
commit b3e4c65c0b
29 changed files with 302 additions and 50 deletions

View file

@ -15,12 +15,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.4.53",
"_release": "1.4.53",
"version": "1.4.54",
"_release": "1.4.54",
"_resolution": {
"type": "version",
"tag": "1.4.53",
"commit": "300770cf6f36621ffdb2d2482438916f1520ffb5"
"tag": "1.4.54",
"commit": "e54c908295025a828f897937f4e41d3ec9f122ba"
},
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.0",

View file

@ -0,0 +1,54 @@
[is="emby-textarea"] {
display: block;
margin: 0;
margin-bottom: 0 !important;
background: none;
border: 1px solid rgb(221, 221, 221);
border-width: 0 0 1px 0;
/* Prefixed box-sizing rules necessary for older browsers */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Remove select styling */
/* Font size must the 16px or larger to prevent iOS page zoom on focus */
font-size: inherit;
/* General select styles: change as needed */
font-family: inherit;
font-weight: inherit;
color: inherit;
padding: .35em 0 .3em 0;
cursor: pointer;
outline: none !important;
width: 100%;
background-color: transparent;
border-radius: 0;
}
.inputContainer {
margin-bottom: 2em;
}
.textareaLabel {
display: inline-block;
transition: all .2s ease-out;
}
.textareaLabel.focused:not(.blank) {
color: #52B54B;
}
.emby-textarea-selectionbar {
height: 2px;
transform: scale(.01, 1);
transition: transform .25s ease-out;
position: relative;
top: -1px;
margin-bottom: .5em;
-webkit-transform-origin: center center;
transform-origin: center center;
}
[is="emby-textarea"]:focus + .emby-textarea-selectionbar {
background-color: #52B54B;
transform: none;
}

View file

@ -0,0 +1,161 @@
define(['layoutManager', 'browser', 'css!./emby-textarea', 'registerElement'], function (layoutManager, browser) {
function autoGrow(textarea, maxLines) {
var self = this;
if (maxLines === undefined) {
maxLines = 999;
}
/**
* Calculates the vertical padding of the element
* @param textarea
* @returns {number}
*/
self.getOffset = function (textarea) {
var style = window.getComputedStyle(textarea, null),
props = ['paddingTop', 'paddingBottom'],
offset = 0;
for (var i = 0; i < props.length; i++) {
offset += parseInt(style[props[i]]);
}
return offset;
};
var offset;
function reset() {
textarea.rows = 1;
offset = self.getOffset(textarea);
self.rows = textarea.rows || 1;
self.lineHeight = (textarea.scrollHeight / self.rows) - (offset / self.rows);
self.maxAllowedHeight = (self.lineHeight * maxLines) - offset;
}
function autogrowFn() {
if (!self.lineHeight || self.lineHeight <= 0) {
reset();
}
if (self.lineHeight <= 0) {
textarea.style.overflowY = 'scroll';
textarea.style.height = 'auto';
textarea.rows = 3;
return;
}
var newHeight = 0, hasGrown = false;
if ((textarea.scrollHeight - offset) > self.maxAllowedHeight) {
textarea.style.overflowY = 'scroll';
newHeight = self.maxAllowedHeight;
}
else {
textarea.style.overflowY = 'hidden';
textarea.style.height = 'auto';
newHeight = textarea.scrollHeight/* - offset*/;
hasGrown = true;
}
textarea.style.height = newHeight + 'px';
}
// Call autogrowFn() when textarea's value is changed
textarea.addEventListener('input', autogrowFn);
textarea.addEventListener('focus', autogrowFn);
textarea.addEventListener('valueset', autogrowFn);
autogrowFn();
}
var EmbyTextAreaPrototype = Object.create(HTMLTextAreaElement.prototype);
var elementId = 0;
var supportsFloatingLabel = false;
if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
var descriptor = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
// descriptor returning null in webos
if (descriptor && descriptor.configurable) {
var baseSetMethod = descriptor.set;
descriptor.set = function (value) {
baseSetMethod.call(this, value);
this.dispatchEvent(new CustomEvent('valueset', {
bubbles: false,
cancelable: false
}));
}
Object.defineProperty(HTMLTextAreaElement.prototype, 'value', descriptor);
supportsFloatingLabel = true;
}
}
EmbyTextAreaPrototype.createdCallback = function () {
if (!this.id) {
this.id = 'embytextarea' + elementId;
elementId++;
}
};
EmbyTextAreaPrototype.attachedCallback = function () {
if (this.getAttribute('data-embytextarea') == 'true') {
return;
}
this.rows = 1;
this.setAttribute('data-embytextarea', 'true');
var parentNode = this.parentNode;
var label = this.ownerDocument.createElement('label');
label.innerHTML = this.getAttribute('label') || '';
label.classList.add('textareaLabel');
if (!supportsFloatingLabel || this.type == 'date') {
label.classList.add('nofloat');
}
label.htmlFor = this.id;
parentNode.insertBefore(label, this);
var div = document.createElement('div');
div.classList.add('emby-textarea-selectionbar');
parentNode.insertBefore(div, this.nextSibling);
function onChange() {
if (this.value) {
label.classList.remove('blank');
} else {
label.classList.add('blank');
}
}
this.addEventListener('focus', function () {
onChange.call(this);
label.classList.add('focused');
});
this.addEventListener('blur', function () {
onChange.call(this);
label.classList.remove('focused');
});
this.addEventListener('change', onChange);
this.addEventListener('input', onChange);
this.addEventListener('valueset', onChange);
onChange.call(this);
this.label = function (text) {
label.innerHTML = text;
};
new autoGrow(this);
};
document.registerElement('emby-textarea', {
prototype: EmbyTextAreaPrototype,
extends: 'textarea'
});
});

View file

@ -1,6 +1,6 @@
{
"name": "iron-a11y-keys-behavior",
"version": "1.1.3",
"version": "1.1.4",
"description": "A behavior that enables keybindings for greater a11y.",
"keywords": [
"web-components",
@ -30,14 +30,14 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"ignore": [],
"homepage": "https://github.com/PolymerElements/iron-a11y-keys-behavior",
"_release": "1.1.3",
"homepage": "https://github.com/polymerelements/iron-a11y-keys-behavior",
"_release": "1.1.4",
"_resolution": {
"type": "version",
"tag": "v1.1.3",
"commit": "bfbb922fb9029958e618baf06acf8e3c6513898b"
"tag": "v1.1.4",
"commit": "36362671d1cee654758d0e2167548f9fdcff2805"
},
"_source": "git://github.com/PolymerElements/iron-a11y-keys-behavior.git",
"_source": "git://github.com/polymerelements/iron-a11y-keys-behavior.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-a11y-keys-behavior"
"_originalSource": "polymerelements/iron-a11y-keys-behavior"
}

View file

@ -10,7 +10,7 @@ env:
- secure: vIs86+z7s1QwihkHtLBRQzlmJRSIWIadq3SlDdZHS4HOivH7fNV0d4hm8QnZYZ9X8yvSvxFCzEFdLuX1TpU0H3oy5wgYky7DnfJtsEhuOfW8dobHHZeCNi/t2FQAXpobqpRwojC3A+1b1lNrY1XNpYRz7aEialO4Yr8e1SQSLex5zw/pqm7g9Vz6PnQwobDQcGXKc6ZWc84+DqOo9qfkSlnEJC/1vQxHYpUa172UnnAnmHJ7gZKdhf9aLWJSZcSpPcoKEnvslRFmeDyRMNRDWVzcg2vHnV+tc1aYzp1wsrRW3P+oqwYlvGlxo+5U92QLXKIcKZhGblVWxe8BtXgiVzgS1sz5D11vKs61Xe46onbguG/XK3UxX9bPRK5uklkC5fwAY2hhvOTGXqimTb2YrlyEWO3BCKGBk6Is3KGyCe7c2nNEmXPUSun9X1JLGRPivJb9iBR4/WSEFvibYHl6/gIke9LdXPOCHuJ3+Iu14lCz+pwi8ADIWVuGpDIxFcorG8a3BCoxQo5VouUbSe0mcNttAvSzBNxhljaaBuFs56DLDpLRr0sGhqvfA1JzdCyzVyrk4WECfZw26pAnYCyTczVXmu5msVdKnjPJKtDqWazvIhHk2G1mk8CKb14lrN58u/Kh6PQ3miJ+61c1stBWhRDlp2QffOkBJiOATKHF+AA=
node_js: stable
addons:
firefox: latest
firefox: '46.0'
apt:
sources:
- google-chrome

View file

@ -1,6 +1,6 @@
{
"name": "iron-a11y-keys-behavior",
"version": "1.1.3",
"version": "1.1.4",
"description": "A behavior that enables keybindings for greater a11y.",
"keywords": [
"web-components",

View file

@ -249,7 +249,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
Polymer.IronA11yKeysBehavior = {
properties: {
/**
* The HTMLElement that will be firing relevant KeyboardEvents.
* The EventTarget that will be firing relevant KeyboardEvents. Set it to
* `null` to disable the listeners.
* @type {?EventTarget}
*/
keyEventTarget: {
type: Object,
@ -389,7 +391,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
_resetKeyEventListeners: function() {
this._unlistenKeyEventListeners();
if (this.isAttached) {
if (this.isAttached && this.keyEventTarget) {
this._listenKeyEventListeners();
}
},

View file

@ -173,6 +173,13 @@ suite('Polymer.IronA11yKeysBehavior', function() {
expect(keys.keyCount).to.be.equal(1);
});
test('keyEventTarget can be null, and disables listeners', function() {
keys.keyEventTarget = null;
MockInteractions.pressSpace(keys);
expect(keys.keyCount).to.be.equal(0);
});
test('trigger the handler when the specified key is pressed together with a modifier', function() {
var event = new CustomEvent('keydown');
event.ctrlKey = true;

View file

@ -37,14 +37,14 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"ignore": [],
"homepage": "https://github.com/polymerelements/paper-icon-button",
"homepage": "https://github.com/PolymerElements/paper-icon-button",
"_release": "1.1.2",
"_resolution": {
"type": "version",
"tag": "v1.1.2",
"commit": "0a6c65f73765d6f6ae6cfe90ddc9905a2cf45f20"
},
"_source": "git://github.com/polymerelements/paper-icon-button.git",
"_source": "git://github.com/PolymerElements/paper-icon-button.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/paper-icon-button"
"_originalSource": "PolymerElements/paper-icon-button"
}

View file

@ -1,6 +1,6 @@
{
"name": "paper-input",
"version": "1.1.11",
"version": "1.1.12",
"description": "Material design text fields",
"authors": [
"The Polymer Authors"
@ -48,14 +48,13 @@
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.1.11",
"_release": "1.1.12",
"_resolution": {
"type": "version",
"tag": "v1.1.11",
"commit": "8cfe5c5bf8c2e40d243443d046a94b6fe371983c"
"tag": "v1.1.12",
"commit": "5dd3174ecee88ea280e960c6b6fbd04ce5c3da0e"
},
"_source": "git://github.com/PolymerElements/paper-input.git",
"_target": "^1.1.11",
"_originalSource": "PolymerElements/paper-input",
"_direct": true
"_originalSource": "PolymerElements/paper-input"
}

View file

@ -10,7 +10,7 @@ env:
- secure: nh65tvhnhOrK05qKvDJKMV7Jm9yiCoG1wFkP3ZnqOHix9Ny+KmcTa41Bl6NXQdvYaMTFtzS7lMZX5cqIziyKyGWHVN30LzGMHJNz12fhcMi3nJ84trhQGcu/9qR9yDv16q9ouGlcz1VxnDOHaRAHnIKjLIbhN3aJtMtZBbnWihA=
node_js: stable
addons:
firefox: latest
firefox: '46.0'
apt:
sources:
- google-chrome

View file

@ -1,4 +1,3 @@
<!--
This file is autogenerated based on
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
@ -11,6 +10,7 @@ specific element:
jsbin=https://jsbin.com/cagaye/edit?html,output
-->
# Polymer Elements
## Guide for Contributors

View file

@ -1,6 +1,6 @@
{
"name": "paper-input",
"version": "1.1.11",
"version": "1.1.12",
"description": "Material design text fields",
"authors": [
"The Polymer Authors"

View file

@ -20,6 +20,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
display: inline-block;
}
:host([hidden]) {
display: none !important;
}
input[is="iron-input"] {
font: inherit;
outline: none;

View file

@ -446,13 +446,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
* Forward focus to inputElement. Overriden from IronControlState.
*/
_focusBlurHandler: function(event) {
if (this._shiftTabPressed)
return;
Polymer.IronControlState._focusBlurHandler.call(this, event);
// Forward the focus to the nested input.
if (this.focused)
if (this.focused && !this._shiftTabPressed)
this._focusableElement.focus();
},

View file

@ -41,6 +41,10 @@ Custom property | Description | Default
@apply(--paper-input-char-counter);
}
:host([hidden]) {
display: none !important;
}
:host-context([dir="rtl"]) {
float: left;
}

View file

@ -121,6 +121,10 @@ This element is `display:block` by default, but you can set the `inline` attribu
@apply(--paper-input-container-disabled);
}
:host([hidden]) {
display: none !important;
}
.floated-label-placeholder {
@apply(--paper-font-caption);
}
@ -310,7 +314,7 @@ This element is `display:block` by default, but you can set the `inline` attribu
</style>
<template is="dom-if" if="[[!noLabelFloat]]">
<div class="floated-label-placeholder">&nbsp;</div>
<div class="floated-label-placeholder" aria-hidden="true">&nbsp;</div>
</template>
<div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">

View file

@ -74,6 +74,10 @@ style this element.
display: block;
}
:host([hidden]) {
display: none !important;
}
input::-webkit-input-placeholder {
color: var(--paper-input-container-color, --secondary-text-color);
}
@ -95,7 +99,7 @@ style this element.
<content select="[prefix]"></content>
<label hidden$="[[!label]]">[[label]]</label>
<label hidden$="[[!label]]" aria-hidden="true">[[label]]</label>
<input is="iron-input" id="input"
aria-labelledby$="[[_ariaLabelledBy]]"

View file

@ -39,11 +39,15 @@ style this element.
:host {
display: block;
}
:host([hidden]) {
display: none !important;
}
</style>
<paper-input-container no-label-float$="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
<label hidden$="[[!label]]">[[label]]</label>
<label hidden$="[[!label]]" aria-hidden="true">[[label]]</label>
<iron-autogrow-textarea id="input" class="paper-input-input"
bind-value="{{value}}"

View file

@ -251,6 +251,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
MockInteractions.blur(input.inputElement);
assert(!input.focused, 'input is blurred');
});
test('focusing then bluring with shift-tab removes the focused attribute correctly', function() {
MockInteractions.focus(input);
assert(input.focused, 'input is focused');
// Fake a shift-tab induced blur by forcing the flag.
input._shiftTabPressed = true;
MockInteractions.blur(input.inputElement);
assert(!input.focused, 'input is blurred');
});
});
suite('focused styling (integration test)', function() {

View file

@ -1,6 +1,6 @@
{
"name": "paper-ripple",
"version": "1.0.6",
"version": "1.0.7",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Adds a material design ripple to any container",
"private": true,
@ -18,7 +18,7 @@
},
"main": "paper-ripple.html",
"dependencies": {
"iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0",
"iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.1.4",
"polymer": "Polymer/polymer#^1.1.0"
},
"devDependencies": {
@ -33,11 +33,11 @@
},
"ignore": [],
"homepage": "https://github.com/PolymerElements/paper-ripple",
"_release": "1.0.6",
"_release": "1.0.7",
"_resolution": {
"type": "version",
"tag": "v1.0.6",
"commit": "8e9ec00765b14acb387205e5f748c7ebeac16fd3"
"tag": "v1.0.7",
"commit": "8f49ac1282a3603834e6a3a16926279ccee74489"
},
"_source": "git://github.com/PolymerElements/paper-ripple.git",
"_target": "^1.0.0",

View file

@ -1,6 +1,6 @@
{
"name": "paper-ripple",
"version": "1.0.6",
"version": "1.0.7",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Adds a material design ripple to any container",
"private": true,
@ -18,7 +18,7 @@
},
"main": "paper-ripple.html",
"dependencies": {
"iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0",
"iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.1.4",
"polymer": "Polymer/polymer#^1.1.0"
},
"devDependencies": {

View file

@ -569,8 +569,9 @@ Apply `circle` class to make the rippling effect within a circle.
} else {
this.keyEventTarget = this.parentNode;
}
this.listen(this.keyEventTarget, 'up', 'uiUpAction');
this.listen(this.keyEventTarget, 'down', 'uiDownAction');
var keyEventTarget = /** @type {!EventTarget} */ (this.keyEventTarget);
this.listen(keyEventTarget, 'up', 'uiUpAction');
this.listen(keyEventTarget, 'down', 'uiDownAction');
},
detached: function() {

View file

@ -37,6 +37,6 @@
"commit": "885bbd74db88dab4fb5dc229cdf994c55fb2b31b"
},
"_source": "git://github.com/PolymerElements/paper-styles.git",
"_target": "^1.1.4",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/paper-styles"
}

View file

@ -39,6 +39,6 @@
"commit": "ce5b9fb2d8aa03c698410e2e55cffcfa0b788a3a"
},
"_source": "git://github.com/Polymer/polymer.git",
"_target": "^1.0.0",
"_target": "^1.1.0",
"_originalSource": "Polymer/polymer"
}

View file

@ -1,4 +1,4 @@
define(['dialogHelper', 'datetime', 'jQuery', 'emby-checkbox', 'emby-input', 'emby-select', 'paper-item-body', 'paper-icon-item', 'paper-textarea', 'paper-fab', 'paper-icon-button-light'], function (dialogHelper, datetime, $) {
define(['dialogHelper', 'datetime', 'jQuery', 'emby-checkbox', 'emby-input', 'emby-select', 'paper-item-body', 'paper-icon-item', 'emby-textarea', 'paper-fab', 'paper-icon-button-light'], function (dialogHelper, datetime, $) {
var currentContext;
var metadataEditorInfo;

View file

@ -78,7 +78,7 @@
<input is="emby-input" id="txtTagline" type="text" label="${LabelTagline}" />
</div>
<div class="inputContainer">
<paper-textarea id="txtOverview" label="${LabelOverview}"></paper-textarea>
<textarea is="emby-textarea" id="txtOverview" label="${LabelOverview}"></textarea>
</div>
<div id="fldShortOverview" style="display: none;" class="inputContainer">
<input is="emby-input" id="txtShortOverview" type="text" label="${LabelShortOverview}" />

View file

@ -1800,6 +1800,7 @@ var AppInfo = {};
define("emby-select", [embyWebComponentsBowerPath + "/emby-select/emby-select"], returnFirstDependency);
define("emby-slider", [embyWebComponentsBowerPath + "/emby-slider/emby-slider"], returnFirstDependency);
define("emby-checkbox", [embyWebComponentsBowerPath + "/emby-checkbox/emby-checkbox"], returnFirstDependency);
define("emby-textarea", [embyWebComponentsBowerPath + "/emby-textarea/emby-textarea"], returnFirstDependency);
define("collectionEditor", [embyWebComponentsBowerPath + "/collectioneditor/collectioneditor"], returnFirstDependency);
define("playlistEditor", [embyWebComponentsBowerPath + "/playlisteditor/playlisteditor"], returnFirstDependency);
define("recordingCreator", [embyWebComponentsBowerPath + "/recordingcreator/recordingcreator"], returnFirstDependency);

View file

@ -328,15 +328,15 @@ paper-input label, paper-textarea label {
color: #ccc;
}
.ui-body-a .inputLabel {
.ui-body-a .inputLabel, .ui-body-a .textareaLabel {
color: #555;
}
.ui-body-a .inputLabel.focused:not(.blank) {
.ui-body-a .inputLabel.focused:not(.blank), .ui-body-a .textareaLabel.focused:not(.blank) {
color: green;
}
.ui-body-b .selectLabelUnfocused, .ui-body-b .inputLabel {
.ui-body-b .selectLabelUnfocused, .ui-body-b .inputLabel, .ui-body-b .textareaLabel {
color: #ccc;
}