Merged date-time widget and natural language form first
This commit is contained in:
Vivek Teega
commit
aa15dd4de8
11
README.md
Executable file
11
README.md
Executable file
@ -0,0 +1,11 @@
|
||||
|
||||
NaturalLanguageForm
|
||||
=========
|
||||
|
||||
An experimental form that uses natural language instead of the usual form layout. Values are entered using custom input elements.
|
||||
|
||||
[article on Codrops](http://tympanus.net/codrops/?p=15139)
|
||||
|
||||
[demo](http://tympanus.net/Tutorials/NaturalLanguageForm/)
|
||||
|
||||
[LICENSING & TERMS OF USE](http://tympanus.net/codrops/licensing/)
|
||||
9
bower.json
Normal file
9
bower.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "NaturalLanguageForm",
|
||||
"homepage": "https://github.com/codrops/NaturalLanguageForm",
|
||||
"main": [
|
||||
"css/component.css",
|
||||
"js/nlform.js",
|
||||
"js/modernizr.custom.js"
|
||||
]
|
||||
}
|
||||
285
css/component.css
Executable file
285
css/component.css
Executable file
@ -0,0 +1,285 @@
|
||||
@font-face {
|
||||
font-family: 'nlicons';
|
||||
src:url('../fonts/nlicons/nlicons.eot');
|
||||
src:url('../fonts/nlicons/nlicons.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/nlicons/nlicons.woff') format('woff'),
|
||||
url('../fonts/nlicons/nlicons.ttf') format('truetype'),
|
||||
url('../fonts/nlicons/nlicons.svg#nlicons') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* general style for the form */
|
||||
.nl-form {
|
||||
width: 100%;
|
||||
margin: 0.3em auto 0 auto;
|
||||
font-size: 4em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.nl-form ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* normalize the input elements, make them look like everything else */
|
||||
.nl-form input,
|
||||
.nl-form select,
|
||||
.nl-form button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
.nl-form input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* custom field (drop-down, text element) styling */
|
||||
.nl-field {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nl-field.nl-field-open {
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
/* the toggle is the visible part in the form */
|
||||
.nl-field-toggle,
|
||||
.nl-form input,
|
||||
.nl-form select {
|
||||
line-height: inherit;
|
||||
display: inline-block;
|
||||
color: #b14943;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px dashed #b14943;
|
||||
}
|
||||
|
||||
/* drop-down list / text element */
|
||||
.nl-field ul {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
background: #76C3BD;
|
||||
left: -0.5em;
|
||||
top: 50%;
|
||||
font-size: 80%;
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-40%) scale(0.9);
|
||||
-moz-transform: translateY(-40%) scale(0.9);
|
||||
transform: translateY(-40%) scale(0.9);
|
||||
-webkit-transition: visibility 0s 0.3s, opacity 0.3s, -webkit-transform 0.3s;
|
||||
-moz-transition: visibility 0s 0.3s, opacity 0.3s, -moz-transform 0.3s;
|
||||
transition: visibility 0s 0.3s, opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
.nl-field.nl-field-open ul {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(-50%) scale(1);
|
||||
-moz-transform: translateY(-50%) scale(1);
|
||||
transform: translateY(-50%) scale(1);
|
||||
-webkit-transition: visibility 0s 0s, opacity 0.3s, -webkit-transform 0.3s;
|
||||
-moz-transition: visibility 0s 0s, opacity 0.3s, -moz-transform 0.3s;
|
||||
transition: visibility 0s 0s, opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
|
||||
.nl-field ul li {
|
||||
color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nl-dd ul li {
|
||||
padding: 0 1.5em 0 0.5em;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nl-dd ul li.nl-dd-checked {
|
||||
color: #478982;
|
||||
}
|
||||
|
||||
.no-touch .nl-dd ul li:hover {
|
||||
background: rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.no-touch .nl-dd ul li:hover:active {
|
||||
color: #478982;
|
||||
}
|
||||
|
||||
/* icons for some elements */
|
||||
.nl-dd ul li.nl-dd-checked:before,
|
||||
.nl-submit:before,
|
||||
.nl-field-go:before {
|
||||
font-family: 'nlicons';
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.nl-dd ul li.nl-dd-checked:before {
|
||||
content: "\e000";
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
font-size: 50%;
|
||||
line-height: 3;
|
||||
}
|
||||
|
||||
.nl-ti-text ul {
|
||||
min-width: 8em;
|
||||
}
|
||||
|
||||
.nl-ti-text ul li.nl-ti-input input {
|
||||
width: 100%;
|
||||
padding: 0.2em 2em 0.2em 0.5em;
|
||||
border-bottom: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nl-form .nl-field-go {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
background: rgba(0,0,0,0.1);
|
||||
width: 1.8em;
|
||||
text-align: center;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.nl-field-go:before {
|
||||
content: "\e001";
|
||||
font-size: 75%;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
line-height: 2.5;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* custom placeholder color */
|
||||
input::-webkit-input-placeholder {
|
||||
color: rgba(255,255,255,0.8);
|
||||
}
|
||||
|
||||
input:active::-webkit-input-placeholder ,
|
||||
input:focus::-webkit-input-placeholder {
|
||||
color: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
input::-moz-placeholder {
|
||||
color: rgba(255,255,255,0.8);
|
||||
}
|
||||
|
||||
input:active::-moz-placeholder,
|
||||
input:focus::-moz-placeholder {
|
||||
color: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
input:-ms-input-placeholder {
|
||||
color: rgba(255,255,255,0.8);
|
||||
}
|
||||
|
||||
input:active::-ms-input-placeholder ,
|
||||
input:focus::-ms-input-placeholder {
|
||||
color: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
/* example field below text input */
|
||||
.nl-ti-text ul li.nl-ti-example {
|
||||
font-size: 40%;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
padding: 0.4em 1em;
|
||||
color: rgba(0,0,0,0.2);
|
||||
border-top: 1px dashed rgba(255,255,255,0.7);
|
||||
}
|
||||
|
||||
.nl-ti-text ul li.nl-ti-example em {
|
||||
color: #fff
|
||||
}
|
||||
|
||||
/* submit button */
|
||||
.nl-submit-wrap {
|
||||
margin-top: 0.4em;
|
||||
}
|
||||
|
||||
.nl-form .nl-submit {
|
||||
line-height: 3;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
background: #76C3BD;
|
||||
color: #fff;
|
||||
padding: 0 1em 0 0;
|
||||
font-size: 40%;
|
||||
font-weight: bold;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.nl-submit:before {
|
||||
content: "\e001";
|
||||
color: #fff;
|
||||
float: left;
|
||||
padding: 0 0.7em;
|
||||
margin: 0 0.8em 0 0;
|
||||
background: #69B1A9;
|
||||
}
|
||||
|
||||
.no-touch .nl-form .nl-submit:hover,
|
||||
.no-touch .nl-form .nl-submit:active {
|
||||
background: #69B1A9;
|
||||
}
|
||||
|
||||
.no-touch .nl-form .nl-submit:hover:before {
|
||||
background: #58a199;
|
||||
}
|
||||
|
||||
/* overlay becomes visible when a field is opened */
|
||||
.nl-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.5);
|
||||
opacity: 0;
|
||||
z-index: 9999;
|
||||
visibility: hidden;
|
||||
-webkit-transition: visibility 0s 0.3s, opacity 0.3s;
|
||||
-moz-transition: visibility 0s 0.3s, opacity 0.3s;
|
||||
transition: visibility 0s 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.nl-field.nl-field-open ~ .nl-overlay {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transition-delay: 0s;
|
||||
-moz-transition-delay: 0s;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 45em) {
|
||||
.nl-form {
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 25em) {
|
||||
.nl-form {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
141
css/default.css
Executable file
141
css/default.css
Executable file
@ -0,0 +1,141 @@
|
||||
/* General Demo Style */
|
||||
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
|
||||
|
||||
@font-face {
|
||||
font-family: 'codropsicons';
|
||||
src:url('../fonts/codropsicons/codropsicons.eot');
|
||||
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
|
||||
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
|
||||
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
|
||||
body, html { font-size: 100%; padding: 0; margin: 0;}
|
||||
|
||||
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
|
||||
.clearfix:before, .clearfix:after { content: " "; display: table; }
|
||||
.clearfix:after { clear: both; }
|
||||
|
||||
body {
|
||||
font-family: 'Lato', Calibri, Arial, sans-serif;
|
||||
color: #ffe8e7;
|
||||
background: #E96D65;
|
||||
font-weight: 300;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #888;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Header Style */
|
||||
.main,
|
||||
.container > header {
|
||||
margin: 0 auto;
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.container > header {
|
||||
text-align: center;
|
||||
background: rgba(0,0,0,0.01);
|
||||
}
|
||||
|
||||
.container > header h1 {
|
||||
font-size: 2.625em;
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.container > header span {
|
||||
display: block;
|
||||
font-size: 60%;
|
||||
color: #b14943;
|
||||
padding: 0 0 0.6em 0.1em;
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
.main {
|
||||
max-width: 50em;
|
||||
}
|
||||
|
||||
/* To Navigation Style */
|
||||
.codrops-top {
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
font-size: 0.69em;
|
||||
line-height: 2.2;
|
||||
}
|
||||
|
||||
.codrops-top a {
|
||||
padding: 0 1em;
|
||||
letter-spacing: 0.1em;
|
||||
color: #E96D65;
|
||||
font-weight: 700;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.codrops-top a:hover {
|
||||
background: rgba(255,255,255,0.5);
|
||||
color: #bd4a43;
|
||||
}
|
||||
|
||||
.codrops-top span.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.codrops-top span.right a {
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.codrops-icon:before {
|
||||
font-family: 'codropsicons';
|
||||
margin: 0 4px;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.codrops-icon-drop:before {
|
||||
content: "\e001";
|
||||
}
|
||||
|
||||
.codrops-icon-prev:before {
|
||||
content: "\e004";
|
||||
}
|
||||
|
||||
.codrops-icon-archive:before {
|
||||
content: "\e002";
|
||||
}
|
||||
|
||||
.codrops-icon-next:before {
|
||||
content: "\e000";
|
||||
}
|
||||
|
||||
.codrops-icon-about:before {
|
||||
content: "\e003";
|
||||
}
|
||||
|
||||
@media screen and (max-width: 25em) {
|
||||
|
||||
.codrops-icon span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
548
css/material-datetime-picker.css
Normal file
548
css/material-datetime-picker.css
Normal file
@ -0,0 +1,548 @@
|
||||
.c-scrim {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.541176);
|
||||
opacity: 0;
|
||||
transition: 200ms ease opacity;
|
||||
will-change: opacity; }
|
||||
.c-scrim--shown {
|
||||
opacity: 1; }
|
||||
|
||||
.c-datepicker {
|
||||
min-height: 610px;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 45%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: white;
|
||||
border: 0;
|
||||
width: 300px;
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
box-shadow: 0 14px 45px rgba(0, 0, 0, 0.25), 0 10px 18px rgba(0, 0, 0, 0.22);
|
||||
border-radius: 2px;
|
||||
opacity: 0;
|
||||
will-change: opacity;
|
||||
transition: 200ms ease-in-out opacity, 200ms ease-in-out top; }
|
||||
.c-datepicker--open {
|
||||
opacity: 1;
|
||||
top: 50%; }
|
||||
|
||||
.c-datepicker__header {
|
||||
position: relative; }
|
||||
|
||||
.c-datepicker__header-day {
|
||||
height: 32px;
|
||||
background: #0097a7;
|
||||
color: white;
|
||||
line-height: 32px;
|
||||
font-size: 12px;
|
||||
font-weight: 200;
|
||||
letter-spacing: 0.3px; }
|
||||
|
||||
.c-datepicker__header::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
|
||||
.c-datepicker__header-date {
|
||||
background: #00bcd4;
|
||||
height: 150px;
|
||||
padding: 16px 0; }
|
||||
|
||||
.rd-month-label {
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
font-size: 14px;
|
||||
font-weight: 800; }
|
||||
|
||||
.c-datepicker__back, .c-datepicker__next, .c-datepicker__toggle {
|
||||
position: absolute;
|
||||
border: 0;
|
||||
background: white;
|
||||
font-family: 'Material Icons';
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "liga" 1;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
font-size: 24px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
cursor: pointer; }
|
||||
.c-datepicker__back:focus, .c-datepicker__next:focus, .c-datepicker__toggle:focus {
|
||||
outline: 0; }
|
||||
|
||||
.c-datepicker__back {
|
||||
left: 0; }
|
||||
|
||||
.c-datepicker__next {
|
||||
right: 0; }
|
||||
|
||||
.c-datepicker__back:before {
|
||||
content: 'chevron_left'; }
|
||||
|
||||
.c-datepicker__next:after {
|
||||
content: 'chevron_right'; }
|
||||
|
||||
.c-datepicker--show-time:after {
|
||||
content: 'access_time';
|
||||
color: white;
|
||||
visibility: visible; }
|
||||
|
||||
.c-datepicker--show-calendar:after {
|
||||
content: 'grid_on';
|
||||
color: white;
|
||||
visibility: visible; }
|
||||
|
||||
.c-datepicker__header-date span {
|
||||
display: block;
|
||||
color: white;
|
||||
margin: 0;
|
||||
transition: opacity 100ms ease-in-out; }
|
||||
|
||||
.c-datepicker__header-date__month {
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
opacity: 0.6; }
|
||||
|
||||
.c-datepicker__header-date__day {
|
||||
cursor: pointer;
|
||||
font-size: 64px;
|
||||
opacity: 0.6; }
|
||||
|
||||
.c-datepicker__header-date__time {
|
||||
font-size: 25px;
|
||||
opacity: 0.6; }
|
||||
.c-datepicker__header-date__time > span {
|
||||
display: inline-block; }
|
||||
|
||||
.c-datepicker__header-date__hours, .c-datepicker__header-date__minutes {
|
||||
cursor: pointer; }
|
||||
|
||||
.c-datepicker--show-time.is-selected ~ .c-datepicker__header .c-datepicker__header-date__time {
|
||||
opacity: 1; }
|
||||
.c-datepicker--show-time.is-selected ~ .c-datepicker__header .c-datepicker__header-date__time .c-datepicker__header-date__hours, .c-datepicker--show-time.is-selected ~ .c-datepicker__header .c-datepicker__header-date__time .c-datepicker__header-date__minutes {
|
||||
opacity: .6; }
|
||||
.c-datepicker--show-time.is-selected ~ .c-datepicker__header .c-datepicker__header-date__time .c-datepicker__header-date__hours.active, .c-datepicker--show-time.is-selected ~ .c-datepicker__header .c-datepicker__header-date__time .c-datepicker__header-date__minutes.active {
|
||||
opacity: 1; }
|
||||
|
||||
.c-datepicker--show-calendar.is-selected ~ .c-datepicker__header .c-datepicker__header-date__month, .c-datepicker--show-calendar.is-selected ~ .c-datepicker__header .c-datepicker__header-date__day {
|
||||
opacity: 1; }
|
||||
|
||||
.modal-btns {
|
||||
padding: 20px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0; }
|
||||
|
||||
.c-datepicker__day-body {
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
cursor: pointer;
|
||||
position: relative; }
|
||||
.c-datepicker__day-body:hover {
|
||||
/* color: white; */ }
|
||||
|
||||
.c-datepicker__day--selected::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(0, 0, 0, 0.05); }
|
||||
|
||||
.c-datepicker__day-head {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
font-size: 12px;
|
||||
height: 36px; }
|
||||
|
||||
.c-datepicker__day-head, c-datepicker__day-body {
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
|
||||
.modal-btns {
|
||||
float: right; }
|
||||
|
||||
.c-btn {
|
||||
display: inline-block;
|
||||
min-width: 56px;
|
||||
cursor: pointer; }
|
||||
|
||||
.rd-day-prev-month {
|
||||
opacity: 0.1;
|
||||
pointer-events: none; }
|
||||
|
||||
.rd-day-next-month {
|
||||
opacity: 0.1;
|
||||
pointer-events: none; }
|
||||
|
||||
.c-datepicker__calendar {
|
||||
height: 300px; }
|
||||
|
||||
.c-datepicker__date {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0; }
|
||||
|
||||
.c-datepicker__days {
|
||||
margin: 10px 20px; }
|
||||
|
||||
.c-datepicker__header-toggle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
color: white;
|
||||
cursor: pointer; }
|
||||
.c-datepicker__header-toggle i {
|
||||
font-size: 26px; }
|
||||
|
||||
.c-datepicker__header-toggle--left {
|
||||
left: 20px; }
|
||||
|
||||
.c-datepicker__header-toggle--right {
|
||||
right: 20px; }
|
||||
|
||||
.c-datepicker__header-toggle--inactive {
|
||||
opacity: 0.2; }
|
||||
|
||||
.c-datepicker__toggle {
|
||||
top: 170px;
|
||||
width: 36px;
|
||||
height: 30px;
|
||||
visibility: hidden;
|
||||
opacity: 0.5;
|
||||
z-index: 1;
|
||||
transition: opacity 200ms ease-in-out; }
|
||||
|
||||
.c-datepicker__toggle--right {
|
||||
right: 10px; }
|
||||
|
||||
.c-datepicker__toggle--left {
|
||||
left: 10px; }
|
||||
|
||||
.c-datepicker__toggle.is-selected {
|
||||
opacity: 1; }
|
||||
|
||||
.c-datepicker--show-time.is-selected ~ .c-datepicker__calendar {
|
||||
display: none; }
|
||||
|
||||
.c-datepicker--show-calendar.is-selected ~ .c-datepicker__clock {
|
||||
display: none; }
|
||||
|
||||
.c-datepicker__clock {
|
||||
position: relative;
|
||||
/* [1] */
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
list-style: none;
|
||||
/* [2] */
|
||||
font-size: 14px;
|
||||
line-height: 50px;
|
||||
padding: 160px 0 20px 0;
|
||||
margin: 0 auto; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: -25px;
|
||||
z-index: 98; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(1) {
|
||||
transform: rotate(0deg) translate(100px) rotate(-0deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(1).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(270deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(1).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(1):hover ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(270deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(1):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(2) {
|
||||
transform: rotate(30deg) translate(100px) rotate(-30deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(2).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(300deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(2).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(2):hover ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(300deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(2):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(3) {
|
||||
transform: rotate(60deg) translate(100px) rotate(-60deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(3).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(330deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(3).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(3):hover ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(330deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(3):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(4) {
|
||||
transform: rotate(90deg) translate(100px) rotate(-90deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(4).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(360deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(4).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(4):hover ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(360deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(4):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(5) {
|
||||
transform: rotate(120deg) translate(100px) rotate(-120deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(5).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(390deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(5).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(5):hover ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(390deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(5):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(6) {
|
||||
transform: rotate(150deg) translate(100px) rotate(-150deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(6).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(420deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(6).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(6):hover ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(420deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(6):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(7) {
|
||||
transform: rotate(180deg) translate(100px) rotate(-180deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(7).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(450deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(7).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(7):hover ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(450deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(7):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(8) {
|
||||
transform: rotate(210deg) translate(100px) rotate(-210deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(8).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(480deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(8).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(8):hover ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(480deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(8):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(9) {
|
||||
transform: rotate(240deg) translate(100px) rotate(-240deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(9).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(510deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(9).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(9):hover ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(510deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(9):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(10) {
|
||||
transform: rotate(270deg) translate(100px) rotate(-270deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(10).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(540deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(10).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(10):hover ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(540deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(10):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(11) {
|
||||
transform: rotate(300deg) translate(100px) rotate(-300deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(11).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(570deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(11).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(11):hover ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(570deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(11):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(12) {
|
||||
transform: rotate(330deg) translate(100px) rotate(-330deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(12).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(600deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(12).c-datepicker__clock__num--active:not(.hide-hand) ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(12):hover ~ .c-datepicker__clock-hands {
|
||||
transform: translate(-50%, -50%) rotate(600deg); }
|
||||
.c-datepicker__clock .c-datepicker__clock__num:nth-of-type(12):hover ~ .c-datepicker__clock-hands .c-datepicker__hour-hand {
|
||||
opacity: 1;
|
||||
background: #00bcd4; }
|
||||
.c-datepicker__clock::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
left: -20px;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 50%; }
|
||||
|
||||
.u-hover-ball-effect, .c-datepicker__day-body, .c-datepicker__clock__num, .c-datepicker__clock__am-pm-toggle label {
|
||||
position: relative;
|
||||
cursor: pointer; }
|
||||
.u-hover-ball-effect:before, .c-datepicker__day-body:before, .c-datepicker__clock__num:before, .c-datepicker__clock__am-pm-toggle label:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 0%;
|
||||
height: 0%;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 100ms ease-in-out, height 100ms ease-in-out; }
|
||||
.u-hover-ball-effect:hover, .c-datepicker__day-body:hover, .c-datepicker__clock__num:hover, .c-datepicker__clock__am-pm-toggle label:hover {
|
||||
color: white; }
|
||||
.u-hover-ball-effect:hover:before, .c-datepicker__day-body:hover:before, .c-datepicker__clock__num:hover:before, .c-datepicker__clock__am-pm-toggle label:hover:before {
|
||||
background: #00bcd4;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
z-index: -1; }
|
||||
|
||||
.c-datepicker__day-body--active:not(.hide-hand), .c-datepicker__clock__num--active:not(.hide-hand) {
|
||||
color: white; }
|
||||
.c-datepicker__day-body--active:not(.hide-hand):before, .c-datepicker__clock__num--active:not(.hide-hand):before {
|
||||
background: #00bcd4;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
z-index: -1; }
|
||||
|
||||
.c-datepicker__clock-hands {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) rotate(180deg);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #0097a7; }
|
||||
|
||||
.c-datepicker__hour-hand {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
height: 78px;
|
||||
width: 2px;
|
||||
background: #00bcd4;
|
||||
left: 4px;
|
||||
top: 10px; }
|
||||
|
||||
.c-datepicker__clock__minutes {
|
||||
display: none;
|
||||
height: 200px;
|
||||
margin: -69px 0 0 0;
|
||||
width: 200px;
|
||||
display: none; }
|
||||
.c-datepicker__clock__minutes.active {
|
||||
display: block; }
|
||||
|
||||
.c-datepicker__clock__hours {
|
||||
height: 200px;
|
||||
margin: -69px 0 0 0;
|
||||
width: 200px;
|
||||
display: none; }
|
||||
.c-datepicker__clock__hours.active {
|
||||
display: block; }
|
||||
|
||||
.c-datepicker__mask {
|
||||
width: 127px;
|
||||
height: 132px;
|
||||
position: absolute;
|
||||
top: 122px;
|
||||
left: 37px;
|
||||
z-index: 99; }
|
||||
.c-datepicker__mask:after {
|
||||
content: ' ';
|
||||
width: 156px;
|
||||
height: 70px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
left: 0;
|
||||
margin-left: -13px; }
|
||||
.c-datepicker__mask:before {
|
||||
content: ' ';
|
||||
width: 75px;
|
||||
height: 158px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 28px;
|
||||
margin-top: -18px; }
|
||||
|
||||
.c-datepicker__clock--show-minutes .c-datepicker__clock__minutes {
|
||||
visibility: visible; }
|
||||
|
||||
.c-datepicker__clock--show-minutes .c-datepicker__clock__hours {
|
||||
visibility: hidden; }
|
||||
|
||||
.c-datepicker__clock--show-hours .c-datepicker__clock__minutes {
|
||||
visibility: hidden; }
|
||||
|
||||
.c-datepicker__clock--show-hours .c-datepicker__clock__hours {
|
||||
visibility: visible; }
|
||||
|
||||
.c-datepicker__clock__am-pm-toggle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
height: 40px;
|
||||
padding: 20px;
|
||||
line-height: 40px; }
|
||||
.c-datepicker__clock__am-pm-toggle label {
|
||||
width: 40px;
|
||||
position: absolute; }
|
||||
.c-datepicker__clock__am-pm-toggle label:nth-child(1) {
|
||||
left: 0; }
|
||||
.c-datepicker__clock__am-pm-toggle label:nth-child(2) {
|
||||
right: 0; }
|
||||
.c-datepicker__clock__am-pm-toggle label.c-datepicker__toggle--checked::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 0%;
|
||||
height: 0%;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
z-index: -1;
|
||||
background: rgba(0, 0, 0, 0.05); }
|
||||
BIN
fonts/codropsicons/codropsicons.eot
Normal file
BIN
fonts/codropsicons/codropsicons.eot
Normal file
Binary file not shown.
24
fonts/codropsicons/codropsicons.svg
Normal file
24
fonts/codropsicons/codropsicons.svg
Normal file
@ -0,0 +1,24 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>
|
||||
This is a custom SVG font generated by IcoMoon.
|
||||
<iconset grid="14"></iconset>
|
||||
</metadata>
|
||||
<defs>
|
||||
<font id="codropsicons" horiz-adv-x="448" >
|
||||
<font-face units-per-em="448" ascent="384" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="448" />
|
||||
<glyph unicode="" d="M 221.657,359.485 ,m0.00,0.00,c 0.00,0.00 -132.984-182.838 -132.205-286.236 0.515-68.522 61.089-123.688 135.314-123.218 74.202,0.479 133.943,56.421 133.428,124.943 C 357.414,178.368 221.657,359.485 221.657,359.485 z" />
|
||||
<glyph unicode="" d="M 384.00,160.00l0.00-32.00 q0.00-13.25 -8.125-22.625t-21.125-9.375l-176.00,0.00 l 73.25-73.50q 9.50-9.00 9.50-22.50t-9.50-22.50l-18.75-19.00q-9.25-9.25 -22.50-9.25q-13.00,0.00 -22.75,9.25l-162.75,163.00q-9.25,9.25 -9.25,22.50q0.00,13.00 9.25,22.75l 162.75,162.50q 9.50,9.50 22.75,9.50q 13.00,0.00 22.50-9.50l 18.75-18.50q 9.50-9.50 9.50-22.75t-9.50-22.75l-73.25-73.25l 176.00,0.00 q 13.00,0.00 21.125-9.375 t 8.125-22.625z" horiz-adv-x="384" />
|
||||
<glyph unicode="" d="M 407.273-23.273c0.00,0.00-325.818,0.00-366.545,0.00s-40.727,40.727-40.727,40.727l0.00,142.545 l 101.818,183.273l 244.364,0.00 l 101.818-183.273c0.00,0.00,0.00-101.818,0.00-142.545S 407.273-23.273, 407.273-23.273z M 325.818,302.545L 122.182,302.545
|
||||
l-71.273-142.545L 142.545,160.00 c0.00,0.00, 40.727,0.00, 40.727-40.727l0.00-20.364 l 81.455,0.00 l0.00,20.364 c0.00,0.00,0.00,40.727, 40.727,40.727l 91.636,0.00 L 325.818,302.545z M 407.273,119.273l-96.911,0.00 C 307.532,113.917, 305.455,107.503, 305.455,98.909c0.00-40.727-40.727-40.727-40.727-40.727L 183.273,58.182 c0.00,0.00-40.727,0.00-40.727,40.727
|
||||
c0.00,8.593-2.077,15.008-4.908,20.364L 40.727,119.273 l0.00-101.818 l 366.545,0.00 L 407.273,119.273 z M 132.364,221.091l 183.273,0.00 L 325.818,200.727L 122.182,200.727 L 132.364,221.091z M 152.727,261.818l 142.545,0.00 L 305.455,241.455L 142.545,241.455 L 152.727,261.818z" />
|
||||
<glyph unicode="" d="M 368.00,144.00q0.00-13.50 -9.25-22.75l-162.75-162.75q-9.75-9.25 -22.75-9.25q-12.75,0.00 -22.50,9.25l-18.75,18.75q-9.50,9.50 -9.50,22.75t 9.50,22.75l 73.25,73.25l-176.00,0.00 q-13.00,0.00 -21.125,9.375t-8.125,22.625l0.00,32.00 q0.00,13.25 8.125,22.625t 21.125,9.375l 176.00,0.00 l-73.25,73.50q-9.50,9.00 -9.50,22.50t 9.50,22.50l 18.75,18.75q 9.50,9.50 22.50,9.50q 13.25,0.00 22.75-9.50l 162.75-162.75q 9.25-8.75 9.25-22.50z" horiz-adv-x="384" />
|
||||
<glyph unicode="" d="M 224.00-64.00C 100.291-64.00,0.00,36.291,0.00,160.00S 100.291,384.00, 224.00,384.00s 224.00-100.291, 224.00-224.00S 347.709-64.00, 224.00-64.00z
|
||||
M 224.00,343.273c-101.228,0.00-183.273-82.045-183.273-183.273s 82.045-183.273, 183.273-183.273s 183.273,82.045, 183.273,183.273S 325.228,343.273, 224.00,343.273z M 244.364,122.164C 244.364,111.005, 244.364,98.909, 244.364,98.909l-40.727,0.00 c0.00,0.00,0.00,29.466,0.00,40.727
|
||||
s 9.123,20.364, 20.364,20.364l0.00,0.00c 22.481,0.00, 40.727,18.246, 40.727,40.727s-18.246,40.727-40.727,40.727S 183.273,223.209, 183.273,200.727c0.00-7.453, 2.138-14.356, 5.641-20.364L 145.437,180.364 C 143.727,186.90, 142.545,193.661, 142.545,200.727
|
||||
c0.00,44.983, 36.471,81.455, 81.455,81.455s 81.455-36.471, 81.455-81.455C 305.455,162.831, 279.45,131.247, 244.364,122.164z M 244.364,37.818l-40.727,0.00 l0.00,40.727 l 40.727,0.00 L 244.364,37.818 z" />
|
||||
<glyph unicode=" " horiz-adv-x="224" />
|
||||
<glyph class="hidden" unicode="" d="M0,384L 448 -64L0 -64 z" horiz-adv-x="0" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
BIN
fonts/codropsicons/codropsicons.ttf
Normal file
BIN
fonts/codropsicons/codropsicons.ttf
Normal file
Binary file not shown.
BIN
fonts/codropsicons/codropsicons.woff
Normal file
BIN
fonts/codropsicons/codropsicons.woff
Normal file
Binary file not shown.
6
fonts/codropsicons/license.txt
Normal file
6
fonts/codropsicons/license.txt
Normal file
@ -0,0 +1,6 @@
|
||||
Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/
|
||||
License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL
|
||||
|
||||
|
||||
Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico
|
||||
License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/
|
||||
2
fonts/nlicons/license.txt
Normal file
2
fonts/nlicons/license.txt
Normal file
@ -0,0 +1,2 @@
|
||||
Icon Set: IcoMoon - Free -- http://keyamoon.com/icomoon/
|
||||
License: CC BY 3.0 -- http://creativecommons.org/licenses/by/3.0/
|
||||
18
fonts/nlicons/nlicons.dev.svg
Normal file
18
fonts/nlicons/nlicons.dev.svg
Normal file
@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>
|
||||
This is a custom SVG font generated by IcoMoon.
|
||||
<iconset grid="16"></iconset>
|
||||
</metadata>
|
||||
<defs>
|
||||
<font id="nlicons" horiz-adv-x="512" >
|
||||
<font-face units-per-em="512" ascent="480" descent="-32" />
|
||||
<missing-glyph horiz-adv-x="512" />
|
||||
<glyph unicode="" d="M 432,416L 192,176L 80,288L0,208L 192,16L 512,336 z" data-tags="checkmark, tick, correct, accept, ok" />
|
||||
<glyph unicode="" d="M 310.627,41.373l 160,160c 12.497,12.496, 12.497,32.758,0,45.255l-160,160c-12.497,12.496-32.758,12.496-45.255,0
|
||||
c-12.497-12.497-12.497-32.758,0-45.255L 370.745,256L 64,256 c-17.673,0-32-14.327-32-32s 14.327-32, 32-32l 306.745,0 L 265.372,86.627
|
||||
C 259.124,80.379, 256,72.189, 256,64s 3.124-16.379, 9.372-22.627C 277.869,28.876, 298.13,28.876, 310.627,41.373z" data-tags="arrow-right, right, next" />
|
||||
<glyph unicode=" " horiz-adv-x="256" />
|
||||
<glyph class="hidden" unicode="" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
BIN
fonts/nlicons/nlicons.eot
Normal file
BIN
fonts/nlicons/nlicons.eot
Normal file
Binary file not shown.
18
fonts/nlicons/nlicons.svg
Normal file
18
fonts/nlicons/nlicons.svg
Normal file
@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>
|
||||
This is a custom SVG font generated by IcoMoon.
|
||||
<iconset grid="16"></iconset>
|
||||
</metadata>
|
||||
<defs>
|
||||
<font id="nlicons" horiz-adv-x="512" >
|
||||
<font-face units-per-em="512" ascent="480" descent="-32" />
|
||||
<missing-glyph horiz-adv-x="512" />
|
||||
<glyph unicode="" d="M 432,416L 192,176L 80,288L0,208L 192,16L 512,336 z" />
|
||||
<glyph unicode="" d="M 310.627,41.373l 160,160c 12.497,12.496, 12.497,32.758,0,45.255l-160,160c-12.497,12.496-32.758,12.496-45.255,0
|
||||
c-12.497-12.497-12.497-32.758,0-45.255L 370.745,256L 64,256 c-17.673,0-32-14.327-32-32s 14.327-32, 32-32l 306.745,0 L 265.372,86.627
|
||||
C 259.124,80.379, 256,72.189, 256,64s 3.124-16.379, 9.372-22.627C 277.869,28.876, 298.13,28.876, 310.627,41.373z" />
|
||||
<glyph unicode=" " horiz-adv-x="256" />
|
||||
<glyph class="hidden" unicode="" d="M0,480L 512 -32L0 -32 z" horiz-adv-x="0" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
BIN
fonts/nlicons/nlicons.ttf
Normal file
BIN
fonts/nlicons/nlicons.ttf
Normal file
Binary file not shown.
BIN
fonts/nlicons/nlicons.woff
Normal file
BIN
fonts/nlicons/nlicons.woff
Normal file
Binary file not shown.
163
index.html
Executable file
163
index.html
Executable file
@ -0,0 +1,163 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Natural Language Form</title>
|
||||
<meta name="description" content="Natural Language Form with custom text input and drop-down lists" />
|
||||
<meta name="keywords" content="Natural Language UI, sentence form, text input, contenteditable, html5, css3, jquery" />
|
||||
<meta name="author" content="Codrops" />
|
||||
<link rel="shortcut icon" href="../favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="css/default.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/component.css" />
|
||||
|
||||
<!-- START Content from date time picker -->
|
||||
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/material-datetime-picker.css">
|
||||
|
||||
<style>
|
||||
/*
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
} */
|
||||
|
||||
.c-btn {
|
||||
font-size: 14px;
|
||||
text-transform: capitalize;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
min-width: 88px;
|
||||
height: 36px;
|
||||
margin: 10px 8px;
|
||||
padding: 0 8px;
|
||||
text-align: center;
|
||||
letter-spacing: .5px;
|
||||
border-radius: 2px;
|
||||
background: #F1F1F1;
|
||||
color: #393939;
|
||||
transition: background 200ms ease-in-out;
|
||||
box-shadow: 0 3.08696px 5.82609px 0 rgba(0, 0, 0, 0.16174), 0 3.65217px 12.91304px 0 rgba(0, 0, 0, 0.12435);
|
||||
}
|
||||
|
||||
.c-btn--flat {
|
||||
background: transparent;
|
||||
margin: 10px 8px;
|
||||
min-width: 52px;
|
||||
}
|
||||
|
||||
.c-btn:hover {
|
||||
background: rgba(153, 153, 153, 0.2);
|
||||
color: #393939;
|
||||
}
|
||||
|
||||
.c-btn:active {
|
||||
box-shadow: 0 9.6087px 10.78261px 0 rgba(0, 0, 0, 0.17217), 0 13.56522px 30.3913px 0 rgba(0, 0, 0, 0.15043);
|
||||
}
|
||||
|
||||
.c-btn--flat, .c-btn--flat:hover, .c-btn--flat:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- END Content from date time picker -->
|
||||
|
||||
<script src="js/modernizr.custom.js"></script>
|
||||
</head>
|
||||
<body class="nl-blurred">
|
||||
<div class="container demo-1">
|
||||
<!-- Top Navigation -->
|
||||
<div class="codrops-top clearfix">
|
||||
<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/MorphingDevices/"><span>Previous Demo</span></a>
|
||||
<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=15139"><span>Back to the Codrops Article</span></a></span>
|
||||
</div>
|
||||
<header>
|
||||
<h1>Smart Contract Creator<span>with custom input elements</span></h1>
|
||||
</header>
|
||||
<div class="main clearfix">
|
||||
<form id="nl-form" class="nl-form">
|
||||
I feel to eat
|
||||
<select>
|
||||
<option value="1" selected>any food</option>
|
||||
<option value="2">Indian</option>
|
||||
<option value="3">French</option>
|
||||
<option value="4">Japanese</option>
|
||||
<option value="2">Italian</option>
|
||||
</select>
|
||||
<br />in a
|
||||
<select>
|
||||
<option value="1" selected>standard</option>
|
||||
<option value="2">fancy</option>
|
||||
<option value="3">hip</option>
|
||||
<option value="4">traditional</option>
|
||||
<option value="2">romantic</option>
|
||||
</select>
|
||||
restaurant
|
||||
<br />at
|
||||
<select>
|
||||
<option value="1" selected>anytime</option>
|
||||
<option value="1">7 p.m.</option>
|
||||
<option value="2">8 p.m.</option>
|
||||
<option value="3">9 p.m.</option>
|
||||
</select>
|
||||
in <input type="text" value="" placeholder="any city" data-subline="For example: <em>Los Angeles</em> or <em>New York</em>"/>
|
||||
|
||||
<!-- date time picker content-->
|
||||
differentiation text
|
||||
<a class="c-btn c-datepicker-btn">
|
||||
<span class="material-icon">date-time</span>
|
||||
</a>
|
||||
|
||||
<pre id="output"></pre>
|
||||
<!-- date time picker content-->
|
||||
|
||||
|
||||
<div class="nl-submit-wrap">
|
||||
<button class="nl-submit" type="submit">Find a restaurant</button>
|
||||
</div>
|
||||
|
||||
<div class="nl-overlay"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div><!-- /container -->
|
||||
|
||||
<!-- START content from material date time picker-->
|
||||
|
||||
<script src="https://unpkg.com/babel-polyfill@6.2.0/dist/polyfill.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/rome/2.1.22/rome.standalone.js"></script>
|
||||
<script src="js/material-datetime-picker.js" charset="utf-8"></script>
|
||||
|
||||
<script>
|
||||
|
||||
var picker = new MaterialDatetimePicker({})
|
||||
.on('submit', function(d) {
|
||||
output.innerText = d;
|
||||
});
|
||||
|
||||
var el = document.querySelector('.c-datepicker-btn');
|
||||
el.addEventListener('click', function() {
|
||||
picker.open();
|
||||
}, false);
|
||||
|
||||
</script>
|
||||
|
||||
<!-- END content from material date time picker-->
|
||||
|
||||
|
||||
<script src="js/nlform.js"></script>
|
||||
<script>
|
||||
var nlform = new NLForm( document.getElementById( 'nl-form' ) );
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
744
js/material-datetime-picker.js
Normal file
744
js/material-datetime-picker.js
Normal file
@ -0,0 +1,744 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('rome'), require('moment')) :
|
||||
typeof define === 'function' && define.amd ? define(['rome', 'moment'], factory) :
|
||||
(global.MaterialDatetimePicker = factory(global.rome,global.moment));
|
||||
}(this, (function (rome,moment) { 'use strict';
|
||||
|
||||
rome = 'default' in rome ? rome['default'] : rome;
|
||||
moment = 'default' in moment ? moment['default'] : moment;
|
||||
|
||||
var popupTemplate = (function () {
|
||||
return "\n<div class=\"c-datepicker\">\n <a class=\"c-datepicker__toggle c-datepicker__toggle--right c-datepicker--show-time js-show-clock\" title=\"show time picker\">\n </a>\n\n <a class=\"c-datepicker__toggle c-datepicker__toggle--left c-datepicker--show-calendar is-selected js-show-calendar\" title=\"show date picker\">\n </a>\n\n <div class=\"c-datepicker__header\">\n <div class=\"c-datepicker__header-day\">\n <span class=\"js-day\">Monday</span>\n </div>\n <div class=\"c-datepicker__header-date\">\n <span class=\"c-datepicker__header-date__month js-date-month\"></span>\n <span class=\"c-datepicker__header-date__day js-date-day\"></span>\n <span class=\"c-datepicker__header-date__time js-date-time\">\n <span class=\"c-datepicker__header-date__hours js-date-hours active\">09</span>:<span class=\"c-datepicker__header-date__minutes js-date-minutes\">00</span>\n </span>\n </div>\n </div>\n\n <div class=\"c-datepicker__calendar\"></div>\n <div class=\"c-datepicker__clock\">\n <div class=\"c-datepicker__clock__am-pm-toggle\">\n <label class=\"c-datepicker__toggle--checked\">\n <input checked=\"checked\" class=\"c-datepicker__toggle c-datepicker__toggle--right c-datepicker__clock--am\" type=\"radio\" name=\"time-date-toggle\" value=\"AM\" />\n AM\n </label>\n\n <label>\n <input class=\"c-datepicker__toggle c-datepicker__toggle--right c-datepicker__clock--pm\" type=\"radio\" name=\"time-date-toggle\" value=\"PM\" />\n PM\n </label>\n </div>\n <div class=\"c-datepicker__mask\"></div>\n <div class=\"c-datepicker__clock__hours js-clock-hours active\">\n <div class=\"c-datepicker__clock__num\" data-number=\"3\">3</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"4\">4</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"5\">5</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"6\">6</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"7\">7</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"8\">8</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"9\">9</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"10\">10</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"11\">11</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"0\">12</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"1\">1</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"2\">2</div>\n <div class=\"c-datepicker__clock-hands\">\n <div class=\"c-datepicker__hour-hand\"></div>\n </div>\n </div>\n <div class=\"c-datepicker__clock__minutes js-clock-minutes\">\n <div class=\"c-datepicker__clock__num\" data-number=\"15\">15</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"20\">20</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"25\">25</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"30\">30</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"35\">35</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"40\">40</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"45\">45</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"50\">50</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"55\">55</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"0\">0</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"5\">5</div>\n <div class=\"c-datepicker__clock__num\" data-number=\"10\">10</div>\n <div class=\"c-datepicker__clock-hands\">\n <div class=\"c-datepicker__hour-hand\"></div>\n </div>\n </div>\n </div>\n <div class=\"modal-btns\">\n <a class=\"c-btn c-btn--flat js-cancel\">Cancel</a>\n <a class=\"c-btn c-btn--flat js-ok\">OK</a>\n </div>\n</div>\n";
|
||||
});
|
||||
|
||||
var scrimTemplate = (function (_ref) {
|
||||
var styles = _ref.styles;
|
||||
return "\n<div class=\"" + styles.scrim + "\"></div>\n";
|
||||
});
|
||||
|
||||
var classCallCheck = function (instance, Constructor) {
|
||||
if (!(instance instanceof Constructor)) {
|
||||
throw new TypeError("Cannot call a class as a function");
|
||||
}
|
||||
};
|
||||
|
||||
var createClass = function () {
|
||||
function defineProperties(target, props) {
|
||||
for (var i = 0; i < props.length; i++) {
|
||||
var descriptor = props[i];
|
||||
descriptor.enumerable = descriptor.enumerable || false;
|
||||
descriptor.configurable = true;
|
||||
if ("value" in descriptor) descriptor.writable = true;
|
||||
Object.defineProperty(target, descriptor.key, descriptor);
|
||||
}
|
||||
}
|
||||
|
||||
return function (Constructor, protoProps, staticProps) {
|
||||
if (protoProps) defineProperties(Constructor.prototype, protoProps);
|
||||
if (staticProps) defineProperties(Constructor, staticProps);
|
||||
return Constructor;
|
||||
};
|
||||
}();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var inherits = function (subClass, superClass) {
|
||||
if (typeof superClass !== "function" && superClass !== null) {
|
||||
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
|
||||
}
|
||||
|
||||
subClass.prototype = Object.create(superClass && superClass.prototype, {
|
||||
constructor: {
|
||||
value: subClass,
|
||||
enumerable: false,
|
||||
writable: true,
|
||||
configurable: true
|
||||
}
|
||||
});
|
||||
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var possibleConstructorReturn = function (self, call) {
|
||||
if (!self) {
|
||||
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
||||
}
|
||||
|
||||
return call && (typeof call === "object" || typeof call === "function") ? call : self;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var slicedToArray = function () {
|
||||
function sliceIterator(arr, i) {
|
||||
var _arr = [];
|
||||
var _n = true;
|
||||
var _d = false;
|
||||
var _e = undefined;
|
||||
|
||||
try {
|
||||
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
||||
_arr.push(_s.value);
|
||||
|
||||
if (i && _arr.length === i) break;
|
||||
}
|
||||
} catch (err) {
|
||||
_d = true;
|
||||
_e = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_n && _i["return"]) _i["return"]();
|
||||
} finally {
|
||||
if (_d) throw _e;
|
||||
}
|
||||
}
|
||||
|
||||
return _arr;
|
||||
}
|
||||
|
||||
return function (arr, i) {
|
||||
if (Array.isArray(arr)) {
|
||||
return arr;
|
||||
} else if (Symbol.iterator in Object(arr)) {
|
||||
return sliceIterator(arr, i);
|
||||
} else {
|
||||
throw new TypeError("Invalid attempt to destructure non-iterable instance");
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var toConsumableArray = function (arr) {
|
||||
if (Array.isArray(arr)) {
|
||||
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
|
||||
|
||||
return arr2;
|
||||
} else {
|
||||
return Array.from(arr);
|
||||
}
|
||||
};
|
||||
|
||||
//
|
||||
// basic event triggering and listening
|
||||
//
|
||||
var Events = function () {
|
||||
function Events() {
|
||||
classCallCheck(this, Events);
|
||||
|
||||
this._events = {
|
||||
'*': []
|
||||
};
|
||||
}
|
||||
|
||||
createClass(Events, [{
|
||||
key: 'trigger',
|
||||
value: function trigger(eventName, evtData) {
|
||||
var _this = this;
|
||||
|
||||
eventName.split(' ').forEach(function (evtName) {
|
||||
// trigger a global event event
|
||||
_this._events['*'].forEach(function (evt) {
|
||||
return evt.fn.call(evt.scope, evtName, evtData);
|
||||
});
|
||||
// if there are any listeners to this event
|
||||
// then fire their handlers
|
||||
if (_this._events[evtName]) {
|
||||
_this._events[evtName].forEach(function (evt) {
|
||||
evt.fn.call(evt.scope, evtData);
|
||||
});
|
||||
}
|
||||
});
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'on',
|
||||
value: function on(eventName, fn, scope) {
|
||||
if (!this._events[eventName]) this._events[eventName] = [];
|
||||
this._events[eventName].push({
|
||||
eventName: eventName,
|
||||
fn: fn,
|
||||
scope: scope || this
|
||||
});
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'off',
|
||||
value: function off(eventName, fn) {
|
||||
if (!this._events[eventName]) return this;
|
||||
if (!fn) {
|
||||
this._events[eventName] = [];
|
||||
}
|
||||
this._events[eventName] = this._events[eventName].filter(function (evt) {
|
||||
return evt.fn !== fn;
|
||||
});
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'once',
|
||||
value: function once(eventName, fn, scope) {
|
||||
var _this2 = this;
|
||||
|
||||
var func = function func() {
|
||||
fn.call(scope, eventName, fn, scope);
|
||||
_this2.off(eventName, func);
|
||||
};
|
||||
return this.on(eventName, func, scope);
|
||||
}
|
||||
}]);
|
||||
return Events;
|
||||
}();
|
||||
|
||||
var ESC_KEY = 27;
|
||||
|
||||
var prefix = 'c-datepicker';
|
||||
var defaults$$1 = function defaults$$1() {
|
||||
return {
|
||||
default: moment().startOf('hour'),
|
||||
// allow the user to override all the classes
|
||||
// used for styling the calendar
|
||||
styles: {
|
||||
scrim: 'c-scrim',
|
||||
back: prefix + '__back',
|
||||
container: prefix + '__calendar',
|
||||
date: prefix + '__date',
|
||||
dayBody: prefix + '__days-body',
|
||||
dayBodyElem: prefix + '__day-body',
|
||||
dayConcealed: prefix + '__day--concealed',
|
||||
dayDisabled: prefix + '__day--disabled',
|
||||
dayHead: prefix + '__days-head',
|
||||
dayHeadElem: prefix + '__day-head',
|
||||
dayRow: prefix + '__days-row',
|
||||
dayTable: prefix + '__days',
|
||||
month: prefix + '__month',
|
||||
next: prefix + '__next',
|
||||
positioned: prefix + '--fixed',
|
||||
selectedDay: prefix + '__day--selected',
|
||||
selectedTime: prefix + '__time--selected',
|
||||
time: prefix + '__time',
|
||||
timeList: prefix + '__time-list',
|
||||
timeOption: prefix + '__time-option',
|
||||
clockNum: prefix + '__clock__num'
|
||||
},
|
||||
// format to display in the input, or set on the element
|
||||
format: 'DD/MM/YY',
|
||||
// the container to append the picker
|
||||
container: document.body,
|
||||
// allow any dates
|
||||
dateValidator: undefined
|
||||
};
|
||||
};
|
||||
|
||||
var DateTimePicker = function (_Events) {
|
||||
inherits(DateTimePicker, _Events);
|
||||
|
||||
function DateTimePicker() {
|
||||
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||||
classCallCheck(this, DateTimePicker);
|
||||
|
||||
var _this = possibleConstructorReturn(this, (DateTimePicker.__proto__ || Object.getPrototypeOf(DateTimePicker)).call(this));
|
||||
|
||||
var styles = Object.assign(defaults$$1().styles, options.styles);
|
||||
_this.options = Object.assign(defaults$$1(), options);
|
||||
_this.options.styles = styles;
|
||||
|
||||
// listen to any event
|
||||
_this.on('*', function (evtName, evtData) {
|
||||
if (_this.options.el) {
|
||||
// if there is a custom element, fire a real dom
|
||||
// event on that now
|
||||
var event = new CustomEvent(evtName, _this, evtData);
|
||||
_this.options.el.dispatchEvent(event);
|
||||
}
|
||||
});
|
||||
return _this;
|
||||
}
|
||||
|
||||
// intialize the rom calendar with our default date and
|
||||
// style options
|
||||
|
||||
|
||||
createClass(DateTimePicker, [{
|
||||
key: 'initializeRome',
|
||||
value: function initializeRome(container, validator) {
|
||||
var onData = this.onChangeDate.bind(this);
|
||||
|
||||
return rome(container, {
|
||||
styles: this.options.styles,
|
||||
time: false,
|
||||
dateValidator: validator,
|
||||
initialValue: this.value
|
||||
}).on('data', onData);
|
||||
}
|
||||
|
||||
// called to open the picker
|
||||
|
||||
}, {
|
||||
key: 'open',
|
||||
value: function open() {
|
||||
var scrimEl = scrimTemplate(this.options);
|
||||
_appendTemplate(document.body, scrimEl);
|
||||
_appendTemplate(this.options.container, popupTemplate());
|
||||
this.pickerEl = this.options.container.querySelector('.' + prefix);
|
||||
this.scrimEl = document.body.querySelector('.' + this.options.styles.scrim);
|
||||
this.amToggleEl = this.$('.c-datepicker__clock--am');
|
||||
this.pmToggleEl = this.$('.c-datepicker__clock--pm');
|
||||
|
||||
if (!this.value) {
|
||||
// TODO hack
|
||||
// set/setDate/setTime need refactoring to have single concerns
|
||||
// (set: set the value; setDate/setTime rename to renderDate/renderTime
|
||||
// and deal with updating the view only).
|
||||
// For now this allows us to set the default time using the same quantize
|
||||
// rules as setting the date explicitly. Setting this.value meets setTime|Date's
|
||||
// expectation that we have a value, and `0` guarantees that we will detect
|
||||
this.value = moment(0);
|
||||
this.setDate(this.options.default);
|
||||
this.setTime(this.options.default);
|
||||
} else {
|
||||
this.setDate(this.value);
|
||||
this.setTime(this.value);
|
||||
}
|
||||
|
||||
this.initializeRome(this.$('.' + this.options.styles.container), this.options.dateValidator);
|
||||
this._listenForCloseEvents();
|
||||
|
||||
this._show();
|
||||
}
|
||||
}, {
|
||||
key: 'close',
|
||||
value: function close() {
|
||||
this._stopListeningForCloseEvents();
|
||||
this._hide();
|
||||
}
|
||||
}, {
|
||||
key: '_hide',
|
||||
value: function _hide() {
|
||||
var _this2 = this;
|
||||
|
||||
this.pickerEl.classList.remove('open');
|
||||
window.setTimeout(function () {
|
||||
_this2.options.container.removeChild(_this2.pickerEl);
|
||||
document.body.removeChild(_this2.scrimEl);
|
||||
_this2.trigger('close');
|
||||
}, 200);
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: '_show',
|
||||
value: function _show() {
|
||||
var _this3 = this;
|
||||
|
||||
this.delegateEvents();
|
||||
// add the animation classes on the next animation tick
|
||||
// so that they actually work
|
||||
window.requestAnimationFrame(function () {
|
||||
_this3.scrimEl.classList.add(_this3.options.styles.scrim + '--shown');
|
||||
_this3.pickerEl.classList.add(prefix + '--open');
|
||||
_this3.trigger('open');
|
||||
});
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: '_listenForCloseEvents',
|
||||
value: function _listenForCloseEvents() {
|
||||
var _this4 = this;
|
||||
|
||||
this._onWindowKeypress = function (e) {
|
||||
if (e.which === ESC_KEY) {
|
||||
_this4.close();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", this._onWindowKeypress);
|
||||
}
|
||||
}, {
|
||||
key: '_stopListeningForCloseEvents',
|
||||
value: function _stopListeningForCloseEvents() {
|
||||
window.removeEventListener("keydown", this._onWindowKeypress);
|
||||
this._closeHandler = null;
|
||||
}
|
||||
}, {
|
||||
key: 'delegateEvents',
|
||||
value: function delegateEvents() {
|
||||
var _this5 = this;
|
||||
|
||||
this.$('.js-cancel').addEventListener('click', function () {
|
||||
return _this5.clickCancel();
|
||||
}, false);
|
||||
this.$('.js-ok').addEventListener('click', function () {
|
||||
return _this5.clickSubmit();
|
||||
}, false);
|
||||
|
||||
this.$('.js-date-hours').addEventListener('click', function (e) {
|
||||
return _this5.showHourClock(e);
|
||||
}, false);
|
||||
this.$('.js-date-minutes').addEventListener('click', function (e) {
|
||||
return _this5.showMinuteClock(e);
|
||||
}, false);
|
||||
|
||||
this.$('.js-clock-hours').addEventListener('mouseleave', function (e) {
|
||||
return _this5.mouseOutHourClock(e);
|
||||
}, false);
|
||||
this.$('.js-clock-hours .' + this.options.styles.clockNum).forEach(function (el) {
|
||||
el.addEventListener('click', function (e) {
|
||||
return _this5.clickClickHour(e).showMinuteClock();
|
||||
}, false);
|
||||
el.addEventListener('mouseenter', function (e) {
|
||||
return _this5.mouseInHourClock(e);
|
||||
}, false);
|
||||
});
|
||||
|
||||
this.$('.js-clock-minutes').addEventListener('mouseleave', function (e) {
|
||||
return _this5.mouseOutMinuteClock(e);
|
||||
}, false);
|
||||
this.$('.js-clock-minutes .' + this.options.styles.clockNum).forEach(function (el) {
|
||||
el.addEventListener('click', function (e) {
|
||||
return _this5.clickClockMinute(e);
|
||||
}, false);
|
||||
el.addEventListener('mouseenter', function (e) {
|
||||
return _this5.mouseInMinuteClock(e);
|
||||
}, false);
|
||||
});
|
||||
|
||||
this.$('.c-datepicker__clock--am').addEventListener('click', function (e) {
|
||||
return _this5.clickAm(e);
|
||||
}, false);
|
||||
this.$('.c-datepicker__clock--pm').addEventListener('click', function (e) {
|
||||
return _this5.clickPm(e);
|
||||
}, false);
|
||||
|
||||
this.$('.js-show-calendar').addEventListener('click', function (e) {
|
||||
return _this5.clickShowCalendar(e);
|
||||
}, false);
|
||||
this.$('.js-date-day').addEventListener('click', function (e) {
|
||||
return _this5.clickShowCalendar(e);
|
||||
}, false);
|
||||
this.$('.js-date-month').addEventListener('click', function (e) {
|
||||
return _this5.clickShowCalendar(e);
|
||||
}, false);
|
||||
|
||||
this.$('.js-show-clock').addEventListener('click', function (e) {
|
||||
return _this5.clickShowClock(e);
|
||||
}, false);
|
||||
|
||||
this.scrimEl.addEventListener('click', function () {
|
||||
return _this5.close();
|
||||
}, false);
|
||||
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'clickSubmit',
|
||||
value: function clickSubmit() {
|
||||
this.close();
|
||||
this.trigger('submit', this.value, this);
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'clickCancel',
|
||||
value: function clickCancel() {
|
||||
this.close();
|
||||
this.trigger('cancel', this.value, this);
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'clickClickHour',
|
||||
value: function clickClickHour(e) {
|
||||
var newValue = moment(this.value);
|
||||
var number = parseInt(e.currentTarget.getAttribute('data-number'), 10);
|
||||
if (number === 0 && this.meridiem === 'pm') {
|
||||
number = 12;
|
||||
} else if (this.meridiem === 'pm') {
|
||||
number += 12;
|
||||
}
|
||||
|
||||
newValue.hour(number);
|
||||
this.set(newValue);
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'clickClockMinute',
|
||||
value: function clickClockMinute(e) {
|
||||
var newValue = moment(this.value);
|
||||
var number = parseInt(e.currentTarget.getAttribute('data-number'), 10);
|
||||
|
||||
newValue.minute(number);
|
||||
this.set(newValue);
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'onChangeDate',
|
||||
value: function onChangeDate(dateString) {
|
||||
var newValue = moment(this.value);
|
||||
|
||||
var _dateString$split = dateString.split('-'),
|
||||
_dateString$split2 = slicedToArray(_dateString$split, 3),
|
||||
year = _dateString$split2[0],
|
||||
month = _dateString$split2[1],
|
||||
date = _dateString$split2[2];
|
||||
|
||||
newValue.set({ year: year, month: month - 1, date: date });
|
||||
|
||||
this.set(newValue);
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'mouseInHourClock',
|
||||
value: function mouseInHourClock() {
|
||||
var active = this.$('.js-clock-hours .' + this.options.styles.clockNum + '--active');
|
||||
|
||||
if (active) {
|
||||
active.classList.add('hide-hand');
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'mouseInMinuteClock',
|
||||
value: function mouseInMinuteClock() {
|
||||
var active = this.$('.js-clock-minutes .' + this.options.styles.clockNum + '--active');
|
||||
|
||||
if (active) {
|
||||
active.classList.add('hide-hand');
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'mouseOutHourClock',
|
||||
value: function mouseOutHourClock() {
|
||||
var hideHand = this.$('.js-clock-hours .' + this.options.styles.clockNum + '--active.hide-hand');
|
||||
|
||||
if (hideHand) {
|
||||
hideHand.classList.remove('hide-hand');
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'mouseOutMinuteClock',
|
||||
value: function mouseOutMinuteClock() {
|
||||
var hideHand = this.$('.js-clock-minutes .' + this.options.styles.clockNum + '--active.hide-hand');
|
||||
|
||||
if (hideHand) {
|
||||
hideHand.classList.remove('hide-hand');
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'clickAm',
|
||||
value: function clickAm() {
|
||||
var newValue = moment(this.value);
|
||||
if (this.meridiem === 'pm') {
|
||||
this.meridiem = 'am';
|
||||
newValue.hour(newValue.hour() - 12);
|
||||
}
|
||||
this.set(newValue);
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'clickPm',
|
||||
value: function clickPm() {
|
||||
var newValue = moment(this.value);
|
||||
if (this.meridiem === 'am') {
|
||||
this.meridiem = 'pm';
|
||||
newValue.hour(newValue.hour() + 12);
|
||||
}
|
||||
this.set(newValue);
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: 'showHourClock',
|
||||
value: function showHourClock() {
|
||||
this.clickShowClock();
|
||||
this.$('.js-clock-hours').classList.add('active');
|
||||
this.$('.js-clock-minutes').classList.remove('active');
|
||||
this.$('.js-date-hours').classList.add('active');
|
||||
this.$('.js-date-minutes').classList.remove('active');
|
||||
}
|
||||
}, {
|
||||
key: 'showMinuteClock',
|
||||
value: function showMinuteClock() {
|
||||
this.clickShowClock();
|
||||
this.$('.js-clock-hours').classList.remove('active');
|
||||
this.$('.js-clock-minutes').classList.add('active');
|
||||
this.$('.js-date-hours').classList.remove('active');
|
||||
this.$('.js-date-minutes').classList.add('active');
|
||||
}
|
||||
}, {
|
||||
key: 'clickShowCalendar',
|
||||
value: function clickShowCalendar() {
|
||||
this.$('.js-show-calendar').classList.add('is-selected');
|
||||
this.$('.js-show-clock').classList.remove('is-selected');
|
||||
}
|
||||
}, {
|
||||
key: 'clickShowClock',
|
||||
value: function clickShowClock() {
|
||||
this.$('.js-show-clock').classList.add('is-selected');
|
||||
this.$('.js-show-calendar').classList.remove('is-selected');
|
||||
}
|
||||
}, {
|
||||
key: 'data',
|
||||
value: function data(val) {
|
||||
console.warn('MaterialDatetimePicker#data is deprecated and will be removed in a future release. Please use get or set.');
|
||||
return val ? this.set(val) : this.value;
|
||||
}
|
||||
}, {
|
||||
key: 'get',
|
||||
value: function get$$1() {
|
||||
return moment(this.value);
|
||||
}
|
||||
|
||||
// update the picker's date/time value
|
||||
// value: moment
|
||||
// silent: if true, do not fire any events on change
|
||||
|
||||
}, {
|
||||
key: 'set',
|
||||
value: function set$$1(value) {
|
||||
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
|
||||
_ref$silent = _ref.silent,
|
||||
silent = _ref$silent === undefined ? false : _ref$silent;
|
||||
|
||||
var m = moment(value);
|
||||
|
||||
// maintain a list of change events to fire all at once later
|
||||
var evts = [];
|
||||
if (m.date() !== this.value.date() || m.month() !== this.value.month() || m.year() !== this.value.year()) {
|
||||
this.setDate(m);
|
||||
evts.push('change:date');
|
||||
}
|
||||
|
||||
if (m.hour() !== this.value.hour() || m.minutes() !== this.value.minutes()) {
|
||||
this.setTime(m);
|
||||
evts.push('change:time');
|
||||
}
|
||||
|
||||
if (this.options.el) {
|
||||
// if there is an element to fire events on
|
||||
if (this.options.el.tagName === 'INPUT') {
|
||||
// and it is an input element then set the value
|
||||
this.options.el.value = m.format(this.options.format);
|
||||
} else {
|
||||
// or any other element set a data-value attribute
|
||||
this.options.el.setAttribute('data-value', m.format(this.options.format));
|
||||
}
|
||||
}
|
||||
if (evts.length > 0 && !silent) {
|
||||
// fire all the events we've collected
|
||||
this.trigger(['change'].concat(evts).join(' '), this.value, this);
|
||||
}
|
||||
}
|
||||
|
||||
// set the value and header elements to `date`
|
||||
// the calendar will be updated automatically
|
||||
// by rome when clicked
|
||||
|
||||
}, {
|
||||
key: 'setDate',
|
||||
value: function setDate(date) {
|
||||
var m = moment(date);
|
||||
var month = m.format('MMM');
|
||||
var day = m.format('Do');
|
||||
var dayOfWeek = m.format('dddd');
|
||||
var year = m.format('YYYY');
|
||||
|
||||
this.$('.js-day').innerText = dayOfWeek;
|
||||
this.$('.js-date-month').innerText = month + ' ' + year;
|
||||
this.$('.js-date-day').innerText = day;
|
||||
this.value.year(m.year());
|
||||
this.value.month(m.month());
|
||||
this.value.date(m.date());
|
||||
return this;
|
||||
}
|
||||
|
||||
// set the value and header elements to `time`
|
||||
// also update the hands of the clock
|
||||
|
||||
}, {
|
||||
key: 'setTime',
|
||||
value: function setTime(time) {
|
||||
var m = moment(time);
|
||||
var minuteAsInt = Math.round(parseInt(m.format('mm'), 10) / 5) * 5;
|
||||
m.minutes(minuteAsInt);
|
||||
|
||||
var hour = m.format('HH');
|
||||
var minutes = m.format('mm');
|
||||
var hourAsInt = parseInt(hour, 10) % 12;
|
||||
|
||||
var oldActiveHours = this.$('.js-clock-hours .' + this.options.styles.clockNum + '--active');
|
||||
var oldActiveMinutes = this.$('.js-clock-minutes .' + this.options.styles.clockNum + '--active');
|
||||
|
||||
this.$('.js-date-hours').innerText = hour;
|
||||
this.$('.js-date-minutes').innerText = minutes;
|
||||
|
||||
if (oldActiveHours) {
|
||||
oldActiveHours.classList.remove(this.options.styles.clockNum + '--active');
|
||||
}
|
||||
|
||||
if (oldActiveMinutes) {
|
||||
oldActiveMinutes.classList.remove(this.options.styles.clockNum + '--active');
|
||||
}
|
||||
|
||||
this.$('.js-clock-hours .' + this.options.styles.clockNum + '[data-number="' + hourAsInt + '"]').classList.add(this.options.styles.clockNum + '--active');
|
||||
this.$('.js-clock-minutes .' + this.options.styles.clockNum + '[data-number="' + minuteAsInt + '"]').classList.add(this.options.styles.clockNum + '--active');
|
||||
|
||||
this.value.hours(m.hours());
|
||||
this.value.minutes(m.minutes());
|
||||
this.meridiem = this.value.format('a');
|
||||
|
||||
if (this.meridiem === 'pm') {
|
||||
this.amToggleEl.removeAttribute('checked');
|
||||
this.pmToggleEl.setAttribute('checked', 'checked');
|
||||
this.amToggleEl.parentElement.classList.remove('c-datepicker__toggle--checked');
|
||||
this.pmToggleEl.parentElement.classList.add('c-datepicker__toggle--checked');
|
||||
} else {
|
||||
this.pmToggleEl.removeAttribute('checked');
|
||||
this.amToggleEl.setAttribute('checked', 'checked');
|
||||
this.pmToggleEl.parentElement.classList.remove('c-datepicker__toggle--checked');
|
||||
this.amToggleEl.parentElement.classList.add('c-datepicker__toggle--checked');
|
||||
}
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: '$',
|
||||
value: function $(selector) {
|
||||
var els = this.pickerEl.querySelectorAll(selector);
|
||||
return els.length > 1 ? [].concat(toConsumableArray(els)) : els[0];
|
||||
}
|
||||
}]);
|
||||
return DateTimePicker;
|
||||
}(Events);
|
||||
|
||||
function _appendTemplate(parent, template) {
|
||||
var tempEl = document.createElement('div');
|
||||
tempEl.innerHTML = template.trim();
|
||||
parent.appendChild(tempEl.firstChild);
|
||||
return this;
|
||||
}
|
||||
|
||||
return DateTimePicker;
|
||||
|
||||
})));
|
||||
//# sourceMappingURL=material-datetime-picker.js.map
|
||||
4
js/modernizr.custom.js
Executable file
4
js/modernizr.custom.js
Executable file
File diff suppressed because one or more lines are too long
220
js/nlform.js
Normal file
220
js/nlform.js
Normal file
@ -0,0 +1,220 @@
|
||||
/**
|
||||
* nlform.js v1.0.0
|
||||
* http://www.codrops.com
|
||||
*
|
||||
* Licensed under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* Copyright 2013, Codrops
|
||||
* http://www.codrops.com
|
||||
*/
|
||||
;( function( window ) {
|
||||
|
||||
'use strict';
|
||||
|
||||
var document = window.document;
|
||||
|
||||
if (!String.prototype.trim) {
|
||||
String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g, '');};
|
||||
}
|
||||
|
||||
function NLForm( el, elClass ) {
|
||||
this.el = el;
|
||||
this.overlay = this.el.querySelector( '.nl-overlay' );
|
||||
this.elClass = (elClass !== undefined) ? '.' + elClass : '';
|
||||
this.fields = [];
|
||||
this.fldOpen = -1;
|
||||
this._init();
|
||||
}
|
||||
|
||||
NLForm.prototype = {
|
||||
_init : function() {
|
||||
var self = this;
|
||||
Array.prototype.slice.call( this.el.querySelectorAll( 'select' + self.elClass ) ).forEach( function( el, i ) {
|
||||
self.fldOpen++;
|
||||
self.fields.push( new NLField( self, el, 'dropdown', self.fldOpen ) );
|
||||
} );
|
||||
Array.prototype.slice.call( this.el.querySelectorAll( 'input' + self.elClass + ':not([type="hidden"]):not([type="submit"])' ) ).forEach( function( el, i ) {
|
||||
self.fldOpen++;
|
||||
self.fields.push( new NLField( self, el, 'input', self.fldOpen ) );
|
||||
} );
|
||||
this.overlay.addEventListener( 'click', function(ev) { self._closeFlds(); } );
|
||||
this.overlay.addEventListener( 'touchstart', function(ev) { self._closeFlds(); } );
|
||||
},
|
||||
_closeFlds : function() {
|
||||
if( this.fldOpen !== -1 ) {
|
||||
this.fields[ this.fldOpen ].close();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function NLField( form, el, type, idx ) {
|
||||
var parsed = el.getAttribute('data-parsed');
|
||||
if (parsed != 1) {
|
||||
el.setAttribute('data-parsed', 1);
|
||||
this.form = form;
|
||||
this.elOriginal = el;
|
||||
this.pos = idx;
|
||||
this.type = type;
|
||||
this._create();
|
||||
this._initEvents();
|
||||
}
|
||||
}
|
||||
|
||||
NLField.prototype = {
|
||||
_create : function() {
|
||||
if( this.type === 'dropdown' ) {
|
||||
this._createDropDown();
|
||||
}
|
||||
else if( this.type === 'input' ) {
|
||||
this._createInput();
|
||||
}
|
||||
},
|
||||
_createDropDown : function() {
|
||||
var self = this;
|
||||
this.fld = document.createElement( 'div' );
|
||||
this.fld.className = 'nl-field nl-dd';
|
||||
this.toggle = document.createElement( 'a' );
|
||||
this.toggle.innerHTML = this.elOriginal.options[ this.elOriginal.selectedIndex ].innerHTML;
|
||||
this.toggle.className = 'nl-field-toggle';
|
||||
this.optionsList = document.createElement( 'ul' );
|
||||
var ihtml = '';
|
||||
Array.prototype.slice.call( this.elOriginal.querySelectorAll( 'option' ) ).forEach( function( el, i ) {
|
||||
ihtml += self.elOriginal.selectedIndex === i ? '<li class="nl-dd-checked">' + el.innerHTML + '</li>' : '<li>' + el.innerHTML + '</li>';
|
||||
// selected index value
|
||||
if( self.elOriginal.selectedIndex === i ) {
|
||||
self.selectedIdx = i;
|
||||
}
|
||||
} );
|
||||
this.optionsList.innerHTML = ihtml;
|
||||
this.fld.appendChild( this.toggle );
|
||||
this.fld.appendChild( this.optionsList );
|
||||
this.elOriginal.parentNode.insertBefore( this.fld, this.elOriginal );
|
||||
this.elOriginal.style.display = 'none';
|
||||
},
|
||||
_createInput : function() {
|
||||
var self = this;
|
||||
this.fld = document.createElement( 'div' );
|
||||
this.fld.className = 'nl-field nl-ti-text';
|
||||
this.toggle = document.createElement( 'a' );
|
||||
this.toggle.innerHTML = this.elOriginal.getAttribute('value')? this.elOriginal.getAttribute('value'): this.elOriginal.getAttribute('placeholder');
|
||||
this.toggle.className = 'nl-field-toggle';
|
||||
this.optionsList = document.createElement( 'ul' );
|
||||
this.getinput = document.createElement( 'input' );
|
||||
this.getinput.setAttribute( 'type', this.elOriginal.getAttribute('type')? this.elOriginal.getAttribute('type'): '');
|
||||
this.getinput.setAttribute( 'placeholder', this.elOriginal.getAttribute( 'placeholder' ) );
|
||||
this.getinput.setAttribute( 'value', this.elOriginal.getAttribute('value')? this.elOriginal.getAttribute('value'): '');
|
||||
this.getinputWrapper = document.createElement( 'li' );
|
||||
this.getinputWrapper.className = 'nl-ti-input';
|
||||
this.inputsubmit = document.createElement( 'button' );
|
||||
this.inputsubmit.className = 'nl-field-go';
|
||||
this.inputsubmit.innerHTML = 'Go';
|
||||
this.getinputWrapper.appendChild( this.getinput );
|
||||
this.getinputWrapper.appendChild( this.inputsubmit );
|
||||
this.example = document.createElement( 'li' );
|
||||
this.example.className = 'nl-ti-example';
|
||||
this.example.innerHTML = this.elOriginal.getAttribute( 'data-subline' );
|
||||
this.optionsList.appendChild( this.getinputWrapper );
|
||||
this.optionsList.appendChild( this.example );
|
||||
this.fld.appendChild( this.toggle );
|
||||
this.fld.appendChild( this.optionsList );
|
||||
this.elOriginal.parentNode.insertBefore( this.fld, this.elOriginal );
|
||||
this.elOriginal.style.display = 'none';
|
||||
},
|
||||
_initEvents : function() {
|
||||
var self = this;
|
||||
this.toggle.addEventListener( 'click', function( ev ) { ev.preventDefault(); ev.stopPropagation(); self._open(); } );
|
||||
this.toggle.addEventListener( 'touchstart', function( ev ) { ev.preventDefault(); ev.stopPropagation(); self._open(); } );
|
||||
|
||||
if( this.type === 'dropdown' ) {
|
||||
var opts = Array.prototype.slice.call( this.optionsList.querySelectorAll( 'li' ) );
|
||||
opts.forEach( function( el, i ) {
|
||||
el.addEventListener( 'click', function( ev ) { ev.preventDefault(); self.close( el, opts.indexOf( el ) ); } );
|
||||
el.addEventListener( 'hover', function( ev ) { ev.preventDefault(); self.close( el, opts.indexOf( el ), true ); } );
|
||||
el.addEventListener( 'touchstart', function( ev ) { ev.preventDefault(); self.close( el, opts.indexOf( el ) ); } );
|
||||
} );
|
||||
}
|
||||
else if( this.type === 'input' ) {
|
||||
this.getinput.addEventListener( 'keydown', function( ev ) {
|
||||
if ( ev.keyCode == 13 ) {
|
||||
self.close();
|
||||
}
|
||||
} );
|
||||
this.inputsubmit.addEventListener( 'click', function( ev ) { ev.preventDefault(); self.close(); } );
|
||||
this.inputsubmit.addEventListener( 'touchstart', function( ev ) { ev.preventDefault(); self.close(); } );
|
||||
}
|
||||
|
||||
},
|
||||
_open : function() {
|
||||
if( this.open ) {
|
||||
return false;
|
||||
}
|
||||
this.open = true;
|
||||
this.form.fldOpen = this.pos;
|
||||
var self = this;
|
||||
this.fld.className += ' nl-field-open';
|
||||
this._checkPosition()
|
||||
},
|
||||
_checkPosition: function() {
|
||||
var ul = this.fld.querySelector('ul');
|
||||
var left = this._getOffset(ul).left;
|
||||
|
||||
var windowWidth = document.documentElement.clientWidth
|
||||
|| document.body.clientWidth;
|
||||
|
||||
if (windowWidth < left + ul.scrollWidth) {
|
||||
var diff = windowWidth - (left + ul.scrollWidth);
|
||||
ul.style.left = diff+'px';
|
||||
}
|
||||
},
|
||||
_getOffset: function(el) {
|
||||
var _x = 0;
|
||||
var _y = 0;
|
||||
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
|
||||
_x += el.offsetLeft - el.scrollLeft;
|
||||
_y += el.offsetTop - el.scrollTop;
|
||||
el = el.offsetParent;
|
||||
}
|
||||
return { top: _y, left: _x };
|
||||
},
|
||||
close : function( opt, idx, flag ) {
|
||||
if( !this.open ) {
|
||||
return false;
|
||||
}
|
||||
if (!flag) {
|
||||
this.open = false;
|
||||
this.form.fldOpen = -1;
|
||||
this.fld.className = this.fld.className.replace(/\b nl-field-open\b/,'');
|
||||
}
|
||||
|
||||
if( this.type === 'dropdown' ) {
|
||||
if( opt ) {
|
||||
// remove class nl-dd-checked from previous option
|
||||
var selectedopt = this.optionsList.children[ this.selectedIdx ];
|
||||
selectedopt.className = '';
|
||||
opt.className = 'nl-dd-checked';
|
||||
this.toggle.innerHTML = opt.innerHTML;
|
||||
// update selected index value
|
||||
this.selectedIdx = idx;
|
||||
// update original select element´s value
|
||||
this.elOriginal.value = this.elOriginal.children[ this.selectedIdx ].value;
|
||||
if ("createEvent" in document) {
|
||||
var evt = document.createEvent("HTMLEvents");
|
||||
evt.initEvent("change", false, true);
|
||||
this.elOriginal.dispatchEvent(evt);
|
||||
}
|
||||
else
|
||||
this.elOriginal.fireEvent("change");
|
||||
}
|
||||
}
|
||||
else if( this.type === 'input' ) {
|
||||
this.getinput.blur();
|
||||
this.toggle.innerHTML = this.getinput.value.trim() !== '' ? this.getinput.value : this.getinput.getAttribute( 'placeholder' );
|
||||
this.elOriginal.value = this.getinput.value;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// add to global namespace
|
||||
window.NLForm = NLForm;
|
||||
} )( window );
|
||||
Loading…
Reference in New Issue
Block a user