Skip to content

Commit

Permalink
First commit
Browse files Browse the repository at this point in the history
  • Loading branch information
jorgecasar committed Jul 6, 2014
0 parents commit 371815d
Show file tree
Hide file tree
Showing 13 changed files with 583 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .bowerrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"directory": "bower_components"
}
19 changes: 19 additions & 0 deletions .editorconfig
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
28 changes: 28 additions & 0 deletions .gitignore
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
42 changes: 42 additions & 0 deletions Gruntfile.js
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']);

};
64 changes: 64 additions & 0 deletions README.md
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.
28 changes: 28 additions & 0 deletions bower.json
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"
}
}
105 changes: 105 additions & 0 deletions demo/demo.css
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);
}
10 changes: 10 additions & 0 deletions dist/input-password.html
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>
57 changes: 57 additions & 0 deletions dist/input-password.js
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);
}
});
})();
Loading

0 comments on commit 371815d

Please sign in to comment.