├── fonts ├── nlicons │ ├── nlicons.eot │ ├── nlicons.ttf │ ├── nlicons.woff │ ├── license.txt │ ├── nlicons.svg │ └── nlicons.dev.svg └── codropsicons │ ├── codropsicons.eot │ ├── codropsicons.ttf │ ├── codropsicons.woff │ ├── license.txt │ └── codropsicons.svg ├── bower.json ├── README.md ├── index.html ├── css ├── default.css └── component.css └── js ├── modernizr.custom.js └── nlform.js /fonts/nlicons/nlicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/NaturalLanguageForm/HEAD/fonts/nlicons/nlicons.eot -------------------------------------------------------------------------------- /fonts/nlicons/nlicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/NaturalLanguageForm/HEAD/fonts/nlicons/nlicons.ttf -------------------------------------------------------------------------------- /fonts/nlicons/nlicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/NaturalLanguageForm/HEAD/fonts/nlicons/nlicons.woff -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/NaturalLanguageForm/HEAD/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/NaturalLanguageForm/HEAD/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/NaturalLanguageForm/HEAD/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /fonts/nlicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: IcoMoon - Free -- http://keyamoon.com/icomoon/ 2 | License: CC BY 3.0 -- http://creativecommons.org/licenses/by/3.0/ -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "NaturalLanguageForm", 3 | "homepage": "https://github.com/codrops/NaturalLanguageForm", 4 | "main": [ 5 | "css/component.css", 6 | "js/nlform.js", 7 | "js/modernizr.custom.js" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /fonts/codropsicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | NaturalLanguageForm 3 | ========= 4 | 5 | An experimental form that uses natural language instead of the usual form layout. Values are entered using custom input elements. 6 | 7 | [article on Codrops](http://tympanus.net/codrops/?p=15139) 8 | 9 | [demo](http://tympanus.net/Tutorials/NaturalLanguageForm/) 10 | 11 | [LICENSING & TERMS OF USE](http://tympanus.net/codrops/licensing/) -------------------------------------------------------------------------------- /fonts/nlicons/nlicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /fonts/nlicons/nlicons.dev.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Natural Language Form 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | Previous Demo 21 | Back to the Codrops Article 22 |
23 |
24 |

Natural Language Form with custom input elements

25 |
26 |
27 |
28 | I feel to eat 29 | 36 |
in a 37 | 44 | restaurant 45 |
at 46 | 52 | in 53 |
54 | 55 |
56 |
57 |
58 |
59 |
60 | 61 | 64 | 65 | -------------------------------------------------------------------------------- /css/default.css: -------------------------------------------------------------------------------- 1 | /* General Demo Style */ 2 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); 3 | 4 | @font-face { 5 | font-family: 'codropsicons'; 6 | src:url('../fonts/codropsicons/codropsicons.eot'); 7 | src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), 8 | url('../fonts/codropsicons/codropsicons.woff') format('woff'), 9 | url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), 10 | url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | 15 | *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 16 | body, html { font-size: 100%; padding: 0; margin: 0;} 17 | 18 | /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ 19 | .clearfix:before, .clearfix:after { content: " "; display: table; } 20 | .clearfix:after { clear: both; } 21 | 22 | body { 23 | font-family: 'Lato', Calibri, Arial, sans-serif; 24 | color: #ffe8e7; 25 | background: #E96D65; 26 | font-weight: 300; 27 | overflow-x: hidden; 28 | } 29 | 30 | a { 31 | color: #888; 32 | text-decoration: none; 33 | } 34 | 35 | a:hover, 36 | a:active { 37 | color: #333; 38 | } 39 | 40 | /* Header Style */ 41 | .main, 42 | .container > header { 43 | margin: 0 auto; 44 | padding: 2em; 45 | } 46 | 47 | .container > header { 48 | text-align: center; 49 | background: rgba(0,0,0,0.01); 50 | } 51 | 52 | .container > header h1 { 53 | font-size: 2.625em; 54 | line-height: 1.3; 55 | margin: 0; 56 | font-weight: 300; 57 | } 58 | 59 | .container > header span { 60 | display: block; 61 | font-size: 60%; 62 | color: #b14943; 63 | padding: 0 0 0.6em 0.1em; 64 | } 65 | 66 | /* Main Content */ 67 | .main { 68 | max-width: 50em; 69 | } 70 | 71 | /* To Navigation Style */ 72 | .codrops-top { 73 | background: #fff; 74 | background: rgba(255, 255, 255, 0.4); 75 | text-transform: uppercase; 76 | width: 100%; 77 | font-size: 0.69em; 78 | line-height: 2.2; 79 | } 80 | 81 | .codrops-top a { 82 | padding: 0 1em; 83 | letter-spacing: 0.1em; 84 | color: #E96D65; 85 | font-weight: 700; 86 | display: inline-block; 87 | } 88 | 89 | .codrops-top a:hover { 90 | background: rgba(255,255,255,0.5); 91 | color: #bd4a43; 92 | } 93 | 94 | .codrops-top span.right { 95 | float: right; 96 | } 97 | 98 | .codrops-top span.right a { 99 | float: left; 100 | display: block; 101 | } 102 | 103 | .codrops-icon:before { 104 | font-family: 'codropsicons'; 105 | margin: 0 4px; 106 | speak: none; 107 | font-style: normal; 108 | font-weight: normal; 109 | font-variant: normal; 110 | text-transform: none; 111 | line-height: 1; 112 | -webkit-font-smoothing: antialiased; 113 | } 114 | 115 | .codrops-icon-drop:before { 116 | content: "\e001"; 117 | } 118 | 119 | .codrops-icon-prev:before { 120 | content: "\e004"; 121 | } 122 | 123 | .codrops-icon-archive:before { 124 | content: "\e002"; 125 | } 126 | 127 | .codrops-icon-next:before { 128 | content: "\e000"; 129 | } 130 | 131 | .codrops-icon-about:before { 132 | content: "\e003"; 133 | } 134 | 135 | @media screen and (max-width: 25em) { 136 | 137 | .codrops-icon span { 138 | display: none; 139 | } 140 | 141 | } -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'nlicons'; 3 | src:url('../fonts/nlicons/nlicons.eot'); 4 | src:url('../fonts/nlicons/nlicons.eot?#iefix') format('embedded-opentype'), 5 | url('../fonts/nlicons/nlicons.woff') format('woff'), 6 | url('../fonts/nlicons/nlicons.ttf') format('truetype'), 7 | url('../fonts/nlicons/nlicons.svg#nlicons') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | /* general style for the form */ 13 | .nl-form { 14 | width: 100%; 15 | margin: 0.3em auto 0 auto; 16 | font-size: 4em; 17 | line-height: 1.5; 18 | } 19 | 20 | .nl-form ul { 21 | list-style: none; 22 | margin: 0; 23 | padding: 0; 24 | } 25 | 26 | /* normalize the input elements, make them look like everything else */ 27 | .nl-form input, 28 | .nl-form select, 29 | .nl-form button { 30 | border: none; 31 | background: transparent; 32 | font-family: inherit; 33 | font-size: inherit; 34 | color: inherit; 35 | font-weight: inherit; 36 | line-height: inherit; 37 | display: inline-block; 38 | padding: 0; 39 | margin: 0; 40 | -webkit-appearance: none; 41 | -moz-appearance: none; 42 | } 43 | 44 | .nl-form input:focus { 45 | outline: none; 46 | } 47 | 48 | /* custom field (drop-down, text element) styling */ 49 | .nl-field { 50 | display: inline-block; 51 | position: relative; 52 | } 53 | 54 | .nl-field.nl-field-open { 55 | z-index: 10000; 56 | } 57 | 58 | /* the toggle is the visible part in the form */ 59 | .nl-field-toggle, 60 | .nl-form input, 61 | .nl-form select { 62 | line-height: inherit; 63 | display: inline-block; 64 | color: #b14943; 65 | cursor: pointer; 66 | border-bottom: 1px dashed #b14943; 67 | } 68 | 69 | /* drop-down list / text element */ 70 | .nl-field ul { 71 | position: absolute; 72 | visibility: hidden; 73 | background: #76C3BD; 74 | left: -0.5em; 75 | top: 50%; 76 | font-size: 80%; 77 | opacity: 0; 78 | -webkit-transform: translateY(-40%) scale(0.9); 79 | -moz-transform: translateY(-40%) scale(0.9); 80 | transform: translateY(-40%) scale(0.9); 81 | -webkit-transition: visibility 0s 0.3s, opacity 0.3s, -webkit-transform 0.3s; 82 | -moz-transition: visibility 0s 0.3s, opacity 0.3s, -moz-transform 0.3s; 83 | transition: visibility 0s 0.3s, opacity 0.3s, transform 0.3s; 84 | } 85 | 86 | .nl-field.nl-field-open ul { 87 | visibility: visible; 88 | opacity: 1; 89 | -webkit-transform: translateY(-50%) scale(1); 90 | -moz-transform: translateY(-50%) scale(1); 91 | transform: translateY(-50%) scale(1); 92 | -webkit-transition: visibility 0s 0s, opacity 0.3s, -webkit-transform 0.3s; 93 | -moz-transition: visibility 0s 0s, opacity 0.3s, -moz-transform 0.3s; 94 | transition: visibility 0s 0s, opacity 0.3s, transform 0.3s; 95 | } 96 | 97 | .nl-field ul li { 98 | color: #fff; 99 | position: relative; 100 | } 101 | 102 | .nl-dd ul li { 103 | padding: 0 1.5em 0 0.5em; 104 | cursor: pointer; 105 | white-space: nowrap; 106 | } 107 | 108 | .nl-dd ul li.nl-dd-checked { 109 | color: #478982; 110 | } 111 | 112 | .no-touch .nl-dd ul li:hover { 113 | background: rgba(0,0,0,0.05); 114 | } 115 | 116 | .no-touch .nl-dd ul li:hover:active { 117 | color: #478982; 118 | } 119 | 120 | /* icons for some elements */ 121 | .nl-dd ul li.nl-dd-checked:before, 122 | .nl-submit:before, 123 | .nl-field-go:before { 124 | font-family: 'nlicons'; 125 | speak: none; 126 | font-style: normal; 127 | font-weight: normal; 128 | font-variant: normal; 129 | text-transform: none; 130 | -webkit-font-smoothing: antialiased; 131 | } 132 | 133 | .nl-dd ul li.nl-dd-checked:before { 134 | content: "\e000"; 135 | position: absolute; 136 | right: 1em; 137 | font-size: 50%; 138 | line-height: 3; 139 | } 140 | 141 | .nl-ti-text ul { 142 | min-width: 8em; 143 | } 144 | 145 | .nl-ti-text ul li.nl-ti-input input { 146 | width: 100%; 147 | padding: 0.2em 2em 0.2em 0.5em; 148 | border-bottom: none; 149 | color: #fff; 150 | } 151 | 152 | .nl-form .nl-field-go { 153 | position: absolute; 154 | right: 0; 155 | top: 0; 156 | height: 100%; 157 | cursor: pointer; 158 | background: rgba(0,0,0,0.1); 159 | width: 1.8em; 160 | text-align: center; 161 | color: transparent; 162 | } 163 | 164 | .nl-field-go:before { 165 | content: "\e001"; 166 | font-size: 75%; 167 | color: #fff; 168 | width: 100%; 169 | line-height: 2.5; 170 | display: block; 171 | } 172 | 173 | /* custom placeholder color */ 174 | input::-webkit-input-placeholder { 175 | color: rgba(255,255,255,0.8); 176 | } 177 | 178 | input:active::-webkit-input-placeholder , 179 | input:focus::-webkit-input-placeholder { 180 | color: rgba(255,255,255,0.2); 181 | } 182 | 183 | input::-moz-placeholder { 184 | color: rgba(255,255,255,0.8); 185 | } 186 | 187 | input:active::-moz-placeholder, 188 | input:focus::-moz-placeholder { 189 | color: rgba(255,255,255,0.2); 190 | } 191 | 192 | input:-ms-input-placeholder { 193 | color: rgba(255,255,255,0.8); 194 | } 195 | 196 | input:active::-ms-input-placeholder , 197 | input:focus::-ms-input-placeholder { 198 | color: rgba(255,255,255,0.2); 199 | } 200 | 201 | /* example field below text input */ 202 | .nl-ti-text ul li.nl-ti-example { 203 | font-size: 40%; 204 | font-style: italic; 205 | font-weight: 400; 206 | padding: 0.4em 1em; 207 | color: rgba(0,0,0,0.2); 208 | border-top: 1px dashed rgba(255,255,255,0.7); 209 | } 210 | 211 | .nl-ti-text ul li.nl-ti-example em { 212 | color: #fff 213 | } 214 | 215 | /* submit button */ 216 | .nl-submit-wrap { 217 | margin-top: 0.4em; 218 | } 219 | 220 | .nl-form .nl-submit { 221 | line-height: 3; 222 | text-transform: uppercase; 223 | cursor: pointer; 224 | position: relative; 225 | background: #76C3BD; 226 | color: #fff; 227 | padding: 0 1em 0 0; 228 | font-size: 40%; 229 | font-weight: bold; 230 | letter-spacing: 3px; 231 | } 232 | 233 | .nl-submit:before { 234 | content: "\e001"; 235 | color: #fff; 236 | float: left; 237 | padding: 0 0.7em; 238 | margin: 0 0.8em 0 0; 239 | background: #69B1A9; 240 | } 241 | 242 | .no-touch .nl-form .nl-submit:hover, 243 | .no-touch .nl-form .nl-submit:active { 244 | background: #69B1A9; 245 | } 246 | 247 | .no-touch .nl-form .nl-submit:hover:before { 248 | background: #58a199; 249 | } 250 | 251 | /* overlay becomes visible when a field is opened */ 252 | .nl-overlay { 253 | position: fixed; 254 | top: 0; 255 | left: 0; 256 | width: 100%; 257 | height: 100%; 258 | background: rgba(0,0,0,0.5); 259 | opacity: 0; 260 | z-index: 9999; 261 | visibility: hidden; 262 | -webkit-transition: visibility 0s 0.3s, opacity 0.3s; 263 | -moz-transition: visibility 0s 0.3s, opacity 0.3s; 264 | transition: visibility 0s 0.3s, opacity 0.3s; 265 | } 266 | 267 | .nl-field.nl-field-open ~ .nl-overlay { 268 | opacity: 1; 269 | visibility: visible; 270 | -webkit-transition-delay: 0s; 271 | -moz-transition-delay: 0s; 272 | transition-delay: 0s; 273 | } 274 | 275 | @media screen and (max-width: 45em) { 276 | .nl-form { 277 | font-size: 3em; 278 | } 279 | } 280 | 281 | @media screen and (max-width: 25em) { 282 | .nl-form { 283 | font-size: 2em; 284 | } 285 | } -------------------------------------------------------------------------------- /js/modernizr.custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.6.2 (Custom Build) | MIT & BSD 2 | * Build: http://modernizr.com/download/#-touch-shiv-cssclasses-teststyles-prefixes-load 3 | */ 4 | ;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 + '
    • '; 84 | // selected index value 85 | if( self.elOriginal.selectedIndex === i ) { 86 | self.selectedIdx = i; 87 | } 88 | } ); 89 | this.optionsList.innerHTML = ihtml; 90 | this.fld.appendChild( this.toggle ); 91 | this.fld.appendChild( this.optionsList ); 92 | this.elOriginal.parentNode.insertBefore( this.fld, this.elOriginal ); 93 | this.elOriginal.style.display = 'none'; 94 | }, 95 | _createInput : function() { 96 | var self = this; 97 | this.fld = document.createElement( 'div' ); 98 | this.fld.className = 'nl-field nl-ti-text'; 99 | this.toggle = document.createElement( 'a' ); 100 | this.toggle.innerHTML = this.elOriginal.getAttribute('value')? this.elOriginal.getAttribute('value'): this.elOriginal.getAttribute('placeholder'); 101 | this.toggle.className = 'nl-field-toggle'; 102 | this.optionsList = document.createElement( 'ul' ); 103 | this.getinput = document.createElement( 'input' ); 104 | this.getinput.setAttribute( 'type', this.elOriginal.getAttribute('type')? this.elOriginal.getAttribute('type'): ''); 105 | this.getinput.setAttribute( 'placeholder', this.elOriginal.getAttribute( 'placeholder' ) ); 106 | this.getinput.setAttribute( 'value', this.elOriginal.getAttribute('value')? this.elOriginal.getAttribute('value'): ''); 107 | this.getinputWrapper = document.createElement( 'li' ); 108 | this.getinputWrapper.className = 'nl-ti-input'; 109 | this.inputsubmit = document.createElement( 'button' ); 110 | this.inputsubmit.className = 'nl-field-go'; 111 | this.inputsubmit.innerHTML = 'Go'; 112 | this.getinputWrapper.appendChild( this.getinput ); 113 | this.getinputWrapper.appendChild( this.inputsubmit ); 114 | this.example = document.createElement( 'li' ); 115 | this.example.className = 'nl-ti-example'; 116 | this.example.innerHTML = this.elOriginal.getAttribute( 'data-subline' ); 117 | this.optionsList.appendChild( this.getinputWrapper ); 118 | this.optionsList.appendChild( this.example ); 119 | this.fld.appendChild( this.toggle ); 120 | this.fld.appendChild( this.optionsList ); 121 | this.elOriginal.parentNode.insertBefore( this.fld, this.elOriginal ); 122 | this.elOriginal.style.display = 'none'; 123 | }, 124 | _initEvents : function() { 125 | var self = this; 126 | this.toggle.addEventListener( 'click', function( ev ) { ev.preventDefault(); ev.stopPropagation(); self._open(); } ); 127 | this.toggle.addEventListener( 'touchstart', function( ev ) { ev.preventDefault(); ev.stopPropagation(); self._open(); } ); 128 | 129 | if( this.type === 'dropdown' ) { 130 | var opts = Array.prototype.slice.call( this.optionsList.querySelectorAll( 'li' ) ); 131 | opts.forEach( function( el, i ) { 132 | el.addEventListener( 'click', function( ev ) { ev.preventDefault(); self.close( el, opts.indexOf( el ) ); } ); 133 | el.addEventListener( 'hover', function( ev ) { ev.preventDefault(); self.close( el, opts.indexOf( el ), true ); } ); 134 | el.addEventListener( 'touchstart', function( ev ) { ev.preventDefault(); self.close( el, opts.indexOf( el ) ); } ); 135 | } ); 136 | } 137 | else if( this.type === 'input' ) { 138 | this.getinput.addEventListener( 'keydown', function( ev ) { 139 | if ( ev.keyCode == 13 ) { 140 | self.close(); 141 | } 142 | } ); 143 | this.inputsubmit.addEventListener( 'click', function( ev ) { ev.preventDefault(); self.close(); } ); 144 | this.inputsubmit.addEventListener( 'touchstart', function( ev ) { ev.preventDefault(); self.close(); } ); 145 | } 146 | 147 | }, 148 | _open : function() { 149 | if( this.open ) { 150 | return false; 151 | } 152 | this.open = true; 153 | this.form.fldOpen = this.pos; 154 | var self = this; 155 | this.fld.className += ' nl-field-open'; 156 | this._checkPosition() 157 | }, 158 | _checkPosition: function() { 159 | var ul = this.fld.querySelector('ul'); 160 | var left = this._getOffset(ul).left; 161 | 162 | var windowWidth = document.documentElement.clientWidth 163 | || document.body.clientWidth; 164 | 165 | if (windowWidth < left + ul.scrollWidth) { 166 | var diff = windowWidth - (left + ul.scrollWidth); 167 | ul.style.left = diff+'px'; 168 | } 169 | }, 170 | _getOffset: function(el) { 171 | var _x = 0; 172 | var _y = 0; 173 | while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) { 174 | _x += el.offsetLeft - el.scrollLeft; 175 | _y += el.offsetTop - el.scrollTop; 176 | el = el.offsetParent; 177 | } 178 | return { top: _y, left: _x }; 179 | }, 180 | close : function( opt, idx, flag ) { 181 | if( !this.open ) { 182 | return false; 183 | } 184 | if (!flag) { 185 | this.open = false; 186 | this.form.fldOpen = -1; 187 | this.fld.className = this.fld.className.replace(/\b nl-field-open\b/,''); 188 | } 189 | 190 | if( this.type === 'dropdown' ) { 191 | if( opt ) { 192 | // remove class nl-dd-checked from previous option 193 | var selectedopt = this.optionsList.children[ this.selectedIdx ]; 194 | selectedopt.className = ''; 195 | opt.className = 'nl-dd-checked'; 196 | this.toggle.innerHTML = opt.innerHTML; 197 | // update selected index value 198 | this.selectedIdx = idx; 199 | // update original select element´s value 200 | this.elOriginal.value = this.elOriginal.children[ this.selectedIdx ].value; 201 | if ("createEvent" in document) { 202 | var evt = document.createEvent("HTMLEvents"); 203 | evt.initEvent("change", false, true); 204 | this.elOriginal.dispatchEvent(evt); 205 | } 206 | else 207 | this.elOriginal.fireEvent("change"); 208 | } 209 | } 210 | else if( this.type === 'input' ) { 211 | this.getinput.blur(); 212 | this.toggle.innerHTML = this.getinput.value.trim() !== '' ? this.getinput.value : this.getinput.getAttribute( 'placeholder' ); 213 | this.elOriginal.value = this.getinput.value; 214 | } 215 | } 216 | }; 217 | 218 | // add to global namespace 219 | window.NLForm = NLForm; 220 | } )( window ); 221 | --------------------------------------------------------------------------------