commit aa15dd4de89c40e2b318ea31e1f14df86355fdc2 Author: Vivek Teega Date: Wed Apr 24 17:24:04 2019 +0530 Merged date-time widget and natural language form first diff --git a/README.md b/README.md new file mode 100755 index 0000000..7bcb172 --- /dev/null +++ b/README.md @@ -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/) \ No newline at end of file diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..a571be8 --- /dev/null +++ b/bower.json @@ -0,0 +1,9 @@ +{ + "name": "NaturalLanguageForm", + "homepage": "https://github.com/codrops/NaturalLanguageForm", + "main": [ + "css/component.css", + "js/nlform.js", + "js/modernizr.custom.js" + ] +} diff --git a/css/component.css b/css/component.css new file mode 100755 index 0000000..ce5d899 --- /dev/null +++ b/css/component.css @@ -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; + } +} \ No newline at end of file diff --git a/css/default.css b/css/default.css new file mode 100755 index 0000000..6142354 --- /dev/null +++ b/css/default.css @@ -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; + } + +} \ No newline at end of file diff --git a/css/material-datetime-picker.css b/css/material-datetime-picker.css new file mode 100644 index 0000000..0003780 --- /dev/null +++ b/css/material-datetime-picker.css @@ -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); } diff --git a/fonts/codropsicons/codropsicons.eot b/fonts/codropsicons/codropsicons.eot new file mode 100644 index 0000000..f46c7f4 Binary files /dev/null and b/fonts/codropsicons/codropsicons.eot differ diff --git a/fonts/codropsicons/codropsicons.svg b/fonts/codropsicons/codropsicons.svg new file mode 100644 index 0000000..d202d21 --- /dev/null +++ b/fonts/codropsicons/codropsicons.svg @@ -0,0 +1,24 @@ + + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/codropsicons/codropsicons.ttf b/fonts/codropsicons/codropsicons.ttf new file mode 100644 index 0000000..72bed1f Binary files /dev/null and b/fonts/codropsicons/codropsicons.ttf differ diff --git a/fonts/codropsicons/codropsicons.woff b/fonts/codropsicons/codropsicons.woff new file mode 100644 index 0000000..1003218 Binary files /dev/null and b/fonts/codropsicons/codropsicons.woff differ diff --git a/fonts/codropsicons/license.txt b/fonts/codropsicons/license.txt new file mode 100644 index 0000000..88a5cbc --- /dev/null +++ b/fonts/codropsicons/license.txt @@ -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/ \ No newline at end of file diff --git a/fonts/nlicons/license.txt b/fonts/nlicons/license.txt new file mode 100644 index 0000000..8527799 --- /dev/null +++ b/fonts/nlicons/license.txt @@ -0,0 +1,2 @@ +Icon Set: IcoMoon - Free -- http://keyamoon.com/icomoon/ +License: CC BY 3.0 -- http://creativecommons.org/licenses/by/3.0/ \ No newline at end of file diff --git a/fonts/nlicons/nlicons.dev.svg b/fonts/nlicons/nlicons.dev.svg new file mode 100644 index 0000000..eb74634 --- /dev/null +++ b/fonts/nlicons/nlicons.dev.svg @@ -0,0 +1,18 @@ + + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/nlicons/nlicons.eot b/fonts/nlicons/nlicons.eot new file mode 100644 index 0000000..6637eda Binary files /dev/null and b/fonts/nlicons/nlicons.eot differ diff --git a/fonts/nlicons/nlicons.svg b/fonts/nlicons/nlicons.svg new file mode 100644 index 0000000..e774493 --- /dev/null +++ b/fonts/nlicons/nlicons.svg @@ -0,0 +1,18 @@ + + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/nlicons/nlicons.ttf b/fonts/nlicons/nlicons.ttf new file mode 100644 index 0000000..fff70ab Binary files /dev/null and b/fonts/nlicons/nlicons.ttf differ diff --git a/fonts/nlicons/nlicons.woff b/fonts/nlicons/nlicons.woff new file mode 100644 index 0000000..d7c7600 Binary files /dev/null and b/fonts/nlicons/nlicons.woff differ diff --git a/index.html b/index.html new file mode 100755 index 0000000..3972301 --- /dev/null +++ b/index.html @@ -0,0 +1,163 @@ + + + + + + + Natural Language Form + + + + + + + + + + + + + + + + + + + + +
+ +
+ Previous Demo + Back to the Codrops Article +
+
+

Smart Contract Creatorwith custom input elements

+
+
+
+ I feel to eat + +
in a + + restaurant +
at + + in + + + differentiation text + + date-time + + + 

+					
+
+
+					

+						
+					

+
+					

+				

+			

+
+		

+
+		
+
+		
+		
+		
+		
+
+		
+
+		
+
+
+		
+		
+
+	
+
diff --git a/js/material-datetime-picker.js b/js/material-datetime-picker.js
new file mode 100644
index 0000000..e7f6460
--- /dev/null
+++ b/js/material-datetime-picker.js
@@ -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
\n  \n  \n\n  \n  \n\n  
\n    
\n      Monday\n    
\n    
\n      \n      \n      \n        09:00\n      \n    
\n  
\n\n  
\n  
\n    
\n      \n\n      \n    
\n    
\n    
\n      
3
\n      
4
\n      
5
\n      
6
\n      
7
\n      
8
\n      
9
\n      
10
\n      
11
\n      
12
\n      
1
\n      
2
\n      
\n        
\n      
\n    
\n    
\n      
15
\n      
20
\n      
25
\n      
30
\n      
35
\n      
40
\n      
45
\n      
50
\n      
55
\n      
0
\n      
5
\n      
10
\n      
\n        
\n      
\n    
\n  
\n  
\n    Cancel\n    OK\n  
\n
\n";
+});
+
+var scrimTemplate = (function (_ref) {
+  var styles = _ref.styles;
+  return "\n
\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
diff --git a/js/modernizr.custom.js b/js/modernizr.custom.js
new file mode 100755
index 0000000..824889d
--- /dev/null
+++ b/js/modernizr.custom.js
@@ -0,0 +1,4 @@
+/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
+ * Build: http://modernizr.com/download/#-touch-shiv-cssclasses-teststyles-prefixes-load
+ */
+;window.Modernizr=function(a,b,c){function w(a){j.cssText=a}function x(a,b){return w(m.join(a+";")+(b||""))}function y(a,b){return typeof a===b}function z(a,b){return!!~(""+a).indexOf(b)}function A(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:y(f,"function")?f.bind(d||b):f}return!1}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n={},o={},p={},q=[],r=q.slice,s,t=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},u={}.hasOwnProperty,v;!y(u,"undefined")&&!y(u.call,"undefined")?v=function(a,b){return u.call(a,b)}:v=function(a,b){return b in a&&y(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=r.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(r.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(r.call(arguments)))};return e}),n.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:t(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c};for(var B in n)v(n,B)&&(s=B.toLowerCase(),e[s]=n[B](),q.push((e[s]?"":"no-")+s));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)v(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},w(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e.testStyles=t,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+q.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f' + el.innerHTML + '' : '
  • ' + el.innerHTML + '
    • ';
+				// 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 );