mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
add new slider
This commit is contained in:
Luke Pulverenti
parent
e33e5875cf
commit
09d4af3357
133 changed files with 9418 additions and 256 deletions
96
dashboard-ui/bower_components/paper-input/demo/index.html
vendored
Normal file
96
dashboard-ui/bower_components/paper-input/demo/index.html
vendored
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<!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 http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<title>paper-input demo</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../paper-input.html">
|
||||
<link rel="import" href="../paper-input-container.html">
|
||||
<link rel="import" href="../paper-input-error.html">
|
||||
<link rel="import" href="../paper-input-char-counter.html">
|
||||
<link rel="import" href="../paper-textarea.html">
|
||||
<link rel="import" href="../../iron-input/iron-input.html">
|
||||
<link rel="import" href="ssn-input.html">
|
||||
|
||||
<link rel="stylesheet" href="../../paper-styles/paper-styles.html">
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
|
||||
<style>
|
||||
body {
|
||||
padding: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<div class="vertical center-justified layout">
|
||||
<h4>Text input</h4>
|
||||
<div class="vertical-section">
|
||||
<paper-input label="label"></paper-input>
|
||||
|
||||
<paper-input label="password" type="password"></paper-input>
|
||||
|
||||
<paper-input no-label-float label="label (no-label-float)"></paper-input>
|
||||
|
||||
<paper-input label="disabled" disabled></paper-input>
|
||||
</div>
|
||||
|
||||
<h4>Text area</h4>
|
||||
<div class="vertical-section">
|
||||
<paper-textarea label="textarea label"></paper-textarea>
|
||||
</div>
|
||||
|
||||
<h4>Validation</h4>
|
||||
<div class="vertical-section">
|
||||
<paper-input label="only type letters (auto-validate)" auto-validate pattern="[a-zA-Z]*" error-message="letters only!"></paper-input>
|
||||
|
||||
<paper-input id="inputForValidation" required label="only type letters (no auto validate)" pattern="[a-zA-Z]*" error-message="letters only, required input!"></paper-input>
|
||||
<br>
|
||||
<button onclick="validate()">Validate!</button>
|
||||
</div>
|
||||
|
||||
<h4>Character counter</h4>
|
||||
<div class="vertical-section">
|
||||
<paper-input label="label" char-counter></paper-input>
|
||||
|
||||
<paper-input label="at most 10 letters" char-counter auto-validate pattern="[a-zA-Z]*" maxlength="10" error-message="letters only!"></paper-input>
|
||||
|
||||
<paper-textarea label="textarea" char-counter></paper-textarea>
|
||||
|
||||
<paper-textarea label="textarea with maxlength" char-counter maxlength="10"></paper-textarea>
|
||||
</div>
|
||||
|
||||
<h4>Complex inputs</h4>
|
||||
<div class="vertical-section">
|
||||
<template is="dom-bind">
|
||||
<paper-input-container always-float-label auto-validate attr-for-value="value">
|
||||
<label>Social Security Number</label>
|
||||
<ssn-input class="paper-input-input"></ssn-input>
|
||||
<paper-input-error>SSN invalid!</paper-input-error>
|
||||
</paper-input-container>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function validate() {
|
||||
document.getElementById('inputForValidation').validate();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
94
dashboard-ui/bower_components/paper-input/demo/ssn-input.html
vendored
Normal file
94
dashboard-ui/bower_components/paper-input/demo/ssn-input.html
vendored
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<!--
|
||||
@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
|
||||
-->
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
<link rel="import" href="../../iron-input/iron-input.html">
|
||||
<link rel="import" href="ssn-validator.html">
|
||||
|
||||
<dom-module id="ssn-input">
|
||||
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input[is="iron-input"] {
|
||||
font: inherit;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
|
||||
<ssn-validator></ssn-validator>
|
||||
|
||||
<input is="iron-input" maxlength="3" bind-value="{{_ssn1}}" size="3" aria-label="First 3 digits of social security number">
|
||||
-
|
||||
<input is="iron-input" maxlength="2" bind-value="{{_ssn2}}" size="2" aria-label="Middle 2 digits of social security number">
|
||||
-
|
||||
<input is="iron-input" maxlength="4" bind-value="{{_ssn3}}" size="4" aria-label="Last 4 digits of social security number">
|
||||
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'ssn-input',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronValidatableBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
|
||||
value: {
|
||||
notify: true,
|
||||
type: String
|
||||
},
|
||||
|
||||
_ssn1: {
|
||||
type: String
|
||||
},
|
||||
|
||||
_ssn2: {
|
||||
type: String
|
||||
},
|
||||
|
||||
_ssn3: {
|
||||
type: String
|
||||
},
|
||||
|
||||
validator: {
|
||||
type: String,
|
||||
value: 'ssn-validator'
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_computeValue(_ssn1,_ssn2,_ssn3)'
|
||||
],
|
||||
|
||||
_computeValue: function(ssn1, ssn2, ssn3) {
|
||||
this.value = ssn1.trim() + '-' + ssn2.trim() + '-' + ssn3.trim();
|
||||
}
|
||||
|
||||
})
|
||||
})();
|
||||
</script>
|
||||
31
dashboard-ui/bower_components/paper-input/demo/ssn-validator.html
vendored
Normal file
31
dashboard-ui/bower_components/paper-input/demo/ssn-validator.html
vendored
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<!--
|
||||
@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
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../polymer/polymer.html">
|
||||
<link rel="import" href="../../iron-validator-behavior/iron-validator-behavior.html">
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'ssn-validator',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronValidatorBehavior
|
||||
],
|
||||
|
||||
validate: function(value) {
|
||||
// this regex validates incomplete ssn's (by design)
|
||||
return !value || value.match(/^[0-9]{0,3}-[0-9]{0,2}-[0-9]{0,4}$/);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue