-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 371815d
Showing
13 changed files
with
583 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"directory": "bower_components" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
# EditorConfig helps developers define and maintain consistent | ||
# coding styles between different editors and IDEs | ||
# http://editorconfig.org | ||
|
||
root = true | ||
|
||
[*] | ||
# Change these settings to your own preference | ||
indent_style = tab | ||
indent_size = 3 | ||
|
||
# We recommend you to keep these unchanged | ||
end_of_line = lf | ||
charset = utf-8 | ||
trim_trailing_whitespace = true | ||
insert_final_newline = true | ||
|
||
[*.md] | ||
trim_trailing_whitespace = false |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
# Logs | ||
logs | ||
*.log | ||
|
||
# Runtime data | ||
pids | ||
*.pid | ||
*.seed | ||
|
||
# Directory for instrumented libs generated by jscoverage/JSCover | ||
lib-cov | ||
|
||
# Coverage directory used by tools like istanbul | ||
coverage | ||
|
||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) | ||
.grunt | ||
|
||
# Compiled binary addons (http://nodejs.org/api/addons.html) | ||
build/Release | ||
|
||
# Dependency directory | ||
# Deployed apps should consider commenting this line out: | ||
# see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git | ||
node_modules | ||
|
||
# Bower dependencies | ||
bower_components |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
module.exports = function(grunt) { | ||
|
||
grunt.initConfig({ | ||
'connect': { | ||
demo: { | ||
options: { | ||
open: true, | ||
keepalive: true | ||
} | ||
} | ||
}, | ||
'gh-pages': { | ||
options: { | ||
clone: 'bower_components/input-password' | ||
}, | ||
src: [ | ||
'bower_components/**/*', | ||
'!bower_components/input-password/**/*', | ||
'demo/*', 'src/*', 'index.html' | ||
] | ||
}, | ||
'replace': { | ||
example: { | ||
src: ['src/*'], | ||
dest: 'dist/', | ||
replacements: [{ | ||
from: 'bower_components', | ||
to: '..' | ||
}] | ||
} | ||
} | ||
}); | ||
|
||
grunt.loadNpmTasks('grunt-contrib-connect'); | ||
grunt.loadNpmTasks('grunt-gh-pages'); | ||
grunt.loadNpmTasks('grunt-text-replace'); | ||
|
||
grunt.registerTask('build', ['replace']); | ||
grunt.registerTask('deploy', ['gh-pages']); | ||
grunt.registerTask('serve', ['connect']); | ||
|
||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
# <input-password> | ||
|
||
The input password with mobile features and possibility to see the password and more. | ||
|
||
## Demo | ||
|
||
[http://jorgecasar.github.io/input-password/](http://jorgecasar.github.io/input-password/) | ||
|
||
## Install | ||
|
||
Install the component using [Bower](http://bower.io/): | ||
|
||
```sh | ||
$ bower install input-password --save | ||
``` | ||
|
||
Or [download as ZIP](#). | ||
|
||
## Usage | ||
|
||
1. Import Web Components' polyfill: | ||
|
||
```html | ||
<script src="bower_components/platform/platform.js"></script> | ||
``` | ||
|
||
2. Import Custom Element: | ||
|
||
```html | ||
<link rel="import" href="bower_components/input-password/dist/input-password.html"> | ||
``` | ||
|
||
3. Start using it! | ||
|
||
```html | ||
<input-password></input-password> | ||
``` | ||
|
||
### Options | ||
|
||
Attribute | Options | Default | Description | ||
--- | --- | --- | --- | ||
`name` | *string* | `` | Specifies the input's name. | ||
`value` | *string* | `` | Specifies the input's value. | ||
`visible` | *boolean* | `false` | Specifies the visibility of the input's value. | ||
`toggleText` | *string* | `Toggle` | Specifies the text for the button that change the visibility. | ||
`toggleClass` | *string* | `visible` | Specifies the class that will have to be synthesized and spoken. | ||
|
||
### Methods | ||
|
||
Method | Parameters | Returns | Description | ||
--- | --- | --- | --- | ||
`getShowText()` | None. | Nothing. | Get the button's show text. | ||
`getHideText()` | None. | Nothing. | Get the button's hide text. | ||
`showValue()` | None. | Nothing. | Triggers the input value to be shown. | ||
`hideValue()` | None. | Nothing. | Triggers the input value to be hidden. | ||
`toggle()` | None. | Nothing. | Triggers the input value to be toggled. | ||
|
||
### Events | ||
|
||
Event | Description | ||
--- | --- | ||
`onHideValue` | Triggers when the password begun to be shown. | ||
`onHideValue` | Triggers when the password begun to be hidden. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
{ | ||
"name": "input-password", | ||
"version": "0.0.1", | ||
"authors": [ | ||
"Jorge del Casar <[email protected]>" | ||
], | ||
"description": "The input password that you allways want to use in your apps with sign in process.", | ||
"main": "dist/input-password.html", | ||
"keywords": [ | ||
"polymer", | ||
"web-components", | ||
"input", | ||
"password" | ||
], | ||
"license": "MIT", | ||
"homepage": "https://jorgecasar.github.io/input-password/", | ||
"ignore": [ | ||
"**/.*", | ||
"node_modules", | ||
"bower_components", | ||
"app/bower_components", | ||
"test", | ||
"tests" | ||
], | ||
"dependencies": { | ||
"polymer": "Polymer/polymer#~0.3.1" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,105 @@ | ||
/* Code example | ||
========================================================================== */ | ||
* { | ||
box-sizing: border-box; | ||
} | ||
.center { | ||
max-width: 768px; | ||
margin: 0 auto; | ||
display: block; | ||
} | ||
|
||
|
||
.example_content { | ||
margin-bottom:1em; | ||
border: 1px solid #CCC; | ||
border-radius: 4px; | ||
box-shadow: 0 0 10px #CCC; | ||
} | ||
.example { | ||
position: relative; | ||
margin: 0 0 1em; | ||
padding: 2em 1em 1em; | ||
} | ||
|
||
.example:after { | ||
content: "Example"; | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
padding: 2px 8px; | ||
font-size: 12px; | ||
font-weight: bold; | ||
background-color: #f5f5f5; | ||
color: #9da0a4; | ||
border-radius: 4px 0 4px 0; | ||
border: 1px solid #CCC; | ||
border-width: 0 1px 1px 0; | ||
} | ||
|
||
pre { | ||
padding: 0.5em; | ||
margin: 0 0 1em; | ||
font-size: 1.2em; | ||
line-height: 1.5; | ||
word-break: break-all; | ||
word-wrap: break-word; | ||
white-space: pre; | ||
white-space: pre-wrap; | ||
background-color: #F8F8F8; | ||
border: 1px solid #CCC; | ||
border-radius:4px; | ||
font-family: Monaco, Consolas, "Lucida Console", monospace; | ||
} | ||
|
||
.example + pre { | ||
margin-top: -1em; | ||
margin-bottom:0; | ||
border: 0; | ||
} | ||
|
||
#exampleToggleClass input-password:after { | ||
content: "Visible"; | ||
position: absolute; | ||
bottom: 0.2em; | ||
left: 1.4em; | ||
padding:0 0.8em; | ||
font-size:0.8em; | ||
background-color: #FFF; | ||
color: #9da0a4; | ||
border:1px solid #CCC; | ||
border-top:0; | ||
} | ||
|
||
#exampleToggleClass input-password.secret:after { | ||
content: "Hidden"; | ||
} | ||
|
||
#stylish { | ||
width:200px; | ||
} | ||
#stylish::shadow input, #stylish::shadow button { | ||
margin:0; | ||
border:1px solid #CCC; | ||
outline: none; | ||
} | ||
#stylish::shadow input { | ||
padding:0.5em; | ||
border-radius:4px 0 0 4px; | ||
z-index:2; | ||
} | ||
#stylish::shadow button { | ||
margin-left:-1px; | ||
border-radius:0 4px 4px 0; | ||
background:#F8F8F8; | ||
z-index:1; | ||
} | ||
#stylish::shadow button:hover { | ||
cursor: pointer; | ||
background: #F2F2F2; | ||
} | ||
#stylish::shadow input:focus { | ||
border-color: #66AFE9; | ||
outline: 0; | ||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
<!-- Import Polymer --> | ||
<link rel="import" href="../../polymer/polymer.html"> | ||
|
||
<!-- Define your custom element --> | ||
<polymer-element name="input-password" attributes="name value visible toggleText visibleClass" horizontal layout> | ||
<script src="input-password.js"></script> | ||
<template> | ||
<input type="password" placeholder="{{placeholder}}" value="{{value}}" name="{{name}}" id="{{id}}" flex><button id="visbilityButton">{{showHideText}}</button> | ||
</template> | ||
</polymer-element> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
(function() { | ||
Polymer('input-password', { | ||
/* -- Attributes ------------------------------------------------ */ | ||
visible: false, | ||
toggleText: 'Toggle', | ||
visibleClass: 'visible', | ||
/* -- Lifecycle ------------------------------------------------- */ | ||
ready: function() { | ||
// Bind Events | ||
this._bindEvents(); | ||
// Initialize attributes | ||
this.showText = this.getShowText(); | ||
this.hideText = this.getHideText(); | ||
this.visible = this.visible === true || this.visible === 'visible' || this.visible; | ||
this.visibleChanged(this.show, this.show); | ||
}, | ||
visibleChanged: function(oldValue, newValue){ | ||
if( this.visible ) | ||
{ | ||
this.showValue(); | ||
} | ||
else | ||
{ | ||
this.hideValue(); | ||
} | ||
}, | ||
nameChanged: function(oldValue, newValue){ | ||
this.id = this.id || newValue; | ||
}, | ||
/* -- Methods --------------------------------------------------- */ | ||
getShowText: function(){ | ||
return this.toggleText.split('/')[0]; | ||
}, | ||
getHideText: function(){ | ||
return this.toggleText.split('/')[1] || this.showText; | ||
}, | ||
showValue: function() { | ||
this.$[this.id].type = 'text'; | ||
this.classList.add(this.visibleClass); | ||
this.$.visbilityButton.innerHTML = this.hideText; | ||
this.fire('showValue'); | ||
}, | ||
hideValue: function() { | ||
this.$[this.id].type = 'password'; | ||
this.classList.remove(this.visibleClass); | ||
this.$.visbilityButton.innerHTML = this.showText; | ||
this.fire('hideValue'); | ||
}, | ||
toggle: function() { | ||
this.visible = !this.visible; | ||
}, | ||
/* -- Events ---------------------------------------------------- */ | ||
_bindEvents: function(){ | ||
this.$.visbilityButton.addEventListener('tap', this.toggle.bind(this), false); | ||
} | ||
}); | ||
})(); |
Oops, something went wrong.