diff --git a/README.md b/README.md deleted file mode 100644 index 13f0f82..0000000 --- a/README.md +++ /dev/null @@ -1,14 +0,0 @@ -Fullscreen Form Interface -========= - -An experimental fullscreen form concept where the idea is to allow distraction-free form filling with some fancy animations when moving between form fields. - -[Article on Codrops](http://tympanus.net/codrops/?p=19520) - -[Demo](http://tympanus.net/Development/FullscreenForm/) - -Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". - -Read more here: [License](http://tympanus.net/codrops/licensing/) - -[© Codrops 2014](http://www.codrops.com) \ No newline at end of file diff --git a/css/component.css b/css/component.css index e998a2d..c434df0 100755 --- a/css/component.css +++ b/css/component.css @@ -24,6 +24,20 @@ margin: 0; } +/* Help */ +.fs-help { + position: absolute; + top: 0; + left: 100; + margin: 0; + padding: 40px; + width: 100%; +} + +.fs-help h1 { + margin: 0; +} + /* Form */ .fs-form { position: relative; @@ -828,6 +842,10 @@ input[type=text]::-ms-clear { padding: 20px; } + .fs-help { + padding: 20px; + } + .fs-numbers { margin: 20px; } @@ -845,6 +863,7 @@ input[type=text]::-ms-clear { height: 50px; border-radius: 50%; font-size: 2em; + } button.fs-continue::before { diff --git a/css/component1.css b/css/component1.css new file mode 100755 index 0000000..f4e133a --- /dev/null +++ b/css/component1.css @@ -0,0 +1,500 @@ +/* Morph Button: Default Styles */ + +.morph-button { + position: absolute; + display: block; + margin: 0 auto; + right: 0; +} + +.morph-button > button { + position: absolute; + padding: 0 1em; + border: none; + background-color: #535860; + color: #f9f6e5; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 700; + line-height: 80px; + overflow: hidden; + right: 0; +} + +.morph-button.open > button { + pointer-events: none; +} + +.morph-content { + pointer-events: none; +} + +.morph-button.open .morph-content { + pointer-events: auto; +} + +/* Common styles for overlay and modal type (fixed morph) */ +.morph-button-fixed, +.morph-button-fixed .morph-content { + width: 80px; + height: 80px; +} + +.morph-button-fixed > button { + z-index: 1000; + width: 100%; + height: 100%; + -webkit-transition: opacity 0.1s 0.5s; + transition: opacity 0.1s 0.5s; +} + +.morph-button-fixed.open > button { + opacity: 0; + -webkit-transition: opacity 0.1s; + transition: opacity 0.1s; +} + +.morph-button-fixed .morph-content { + position: fixed; + z-index: 900; + opacity: 0; + -webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; + transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; +} + +.morph-button-fixed.open .morph-content { + opacity: 1; +} + +.morph-button-fixed .morph-content > div { + visibility: hidden; + height: 0; + opacity: 0; + -webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s; + transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s; +} + +.morph-button-fixed.open .morph-content > div { + visibility: visible; + height: auto; + opacity: 1; + -webkit-transition: opacity 0.3s 0.5s; + transition: opacity 0.3s 0.5s; +} + +.morph-button-fixed.active > button { + z-index: 2000; +} + +.morph-button-fixed.active .morph-content { + z-index: 1900; +} + +/* Transitions for overlay button and sidebar button */ +.morph-button-overlay .morph-content, +.morph-button-sidebar .morph-content { + -webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; + transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; +} + +.morph-button-overlay.open .morph-content, +.morph-button-sidebar.open .morph-content { + -webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; + transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; +} + +/* Morph Button Style: Overlay */ +.morph-button.morph-button-overlay { + margin: 50zpx auto; +} + +.morph-button-overlay .morph-content { + overflow: hidden; + background: #e85657; +} + +.morph-button-overlay.open .morph-content { + top: 0 !important; + left: 0 !important; + width: 100%; + height: 100%; +} + +/* Morph Button Style: Modal */ +.morph-button-modal::before { + position: fixed; + top: 0; + left: 0; + z-index: 800; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.5); + content: ''; + opacity: 0; + -webkit-transition: opacity 0.5s; + transition: opacity 0.5s; + pointer-events: none; +} + +.morph-button-modal.open::before { + opacity: 1; + pointer-events: auto; +} + +.morph-button-modal.active::before { + z-index: 1800; +} + +.morph-button-modal .morph-content { + overflow: hidden; + -webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; + transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; +} + +.morph-button-modal.open .morph-content { + top: 50% !important; + left: 50% !important; + margin: -210px 0 0 -300px; + width: 600px; + height: 420px; + -webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; + transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s; +} + +/* Colors and sizes for individual modals */ +.morph-button.morph-button-modal-1 { + float: left; +} + +.morph-button.morph-button-modal-2, +.morph-button.morph-button-modal-3 { + display: inline-block; + margin: 10px 15px; +} + +.morph-button-modal-1 > button, +.morph-button-modal-1 .morph-content { + background-color: #553445; +} + +.morph-button-modal-2 > button, +.morph-button-modal-2 .morph-content, +.morph-button-modal-3 > button, +.morph-button-modal-3 .morph-content { + background-color: #fef0e3; + color: #e75854; +} + +.morph-button-modal-4 { + display: inline-block; +} + +.morph-button-modal-4 > button, +.morph-button-modal-4 .morph-content { + background-color: #faf1e0; + color: #553445; +} + +.morph-button-modal-4 > button span, +.morph-button-modal-4 .morph-clone { + padding-left: 10px; + color: #286f81; +} + +.morph-button-modal-4 .morph-clone { + position: absolute; + right: 34px; + bottom: 30px; + z-index: 100; + letter-spacing: 1px; + font-weight: 700; + -webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s; + transition: bottom 0.4s 0.1s, right 0.4s 0.1s; +} + +.morph-button-modal-4.open .morph-clone, +.no-js .morph-button-modal-4 .morph-clone { + right: 10px; + bottom: 10px; +} + +.morph-button-modal-1::before { + background: rgba(240,221,204,0.7); +} + +.morph-button-modal-2.open .morph-content { + margin: -210px 0 0 -170px; + width: 340px; + height: 420px; +} + +.morph-button-modal-3.open .morph-content { + margin: -255px 0 0 -210px; + width: 420px; + height: 510px; +} + +.morph-button-modal-3.open .morph-content > div { + height: 420px; +} + +.morph-button-modal-2.open .morph-content > div, +.morph-button-modal-3.open .morph-content > div { + -webkit-transition: opacity 0.3s 0.3s; + transition: opacity 0.3s 0.3s; +} + +.morph-button-modal-4.open .morph-content { + margin: -200px 0 0 -320px; + width: 640px; + height: 400px; +} + +/* Morph Button Style: In the content flow */ +.morph-button-inflow { + overflow: hidden; + max-width: 100%; + height: 70px; +} + +.morph-button-inflow > button { + width: 100%; + line-height: 70px; +} + +.morph-button-inflow .morph-content { + position: absolute; + top: 0; + left: 0; + width: 100%; +} + +.morph-button-inflow .morph-content .morph-clone { + padding: 0; + font-weight: 700; + font-size: 1.5em; + line-height: 70px; +} + +/* Colors and sizes for individual in flow buttons */ +.morph-button-inflow-1 { + width: 600px; + margin: 2em auto; + -webkit-transition: height 0.5s cubic-bezier(0.7,0,0.3,1); + transition: height 0.5s cubic-bezier(0.7,0,0.3,1); +} + +.morph-button-inflow-1 > button span { + visibility: hidden; +} + +.morph-button-inflow-1 .morph-content .morph-clone { + color: #f9f6e5; + background: #e85657; +} + +.morph-button-inflow-2 { + position: absolute; + top: 50%; + left: 50%; + width: 220px; + background-color: #fef0e3; + -webkit-transition: height 0.3s, width 0.3s, -webkit-transform 0.3s; + transition: height 0.3s, width 0.3s, transform 0.3s; + -webkit-transform: translateX(-50%) translateY(-50%); + transform: translateX(-50%) translateY(-50%); +} + +.morph-button-inflow-2 > button { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: transparent; + color: #e75854; + -webkit-transition: -webkit-transform 0.3s; + transition: transform 0.3s; +} + +.morph-button-inflow-2.open > button { + -webkit-transform: translateX(-100%); + transform: translateX(-100%); +} + +.morph-button-inflow-2 .morph-content { + width: 260px; + height: 200px; +} + +.morph-button-inflow-2.open { + width: 260px; +} + +/* Morph Button Style: Sidebar */ +.morph-button-sidebar, +.morph-button-sidebar .morph-content { + width: 60px; + height: 60px; +} + +.morph-button-sidebar { + position: fixed; + bottom: 50px; + left: 50px; +} + +.morph-button-sidebar > button { + line-height: 60px; + font-size: 1.6em; + padding: 0; +} + +.morph-button-sidebar .morph-content { + background: #e85657; +} + +.morph-button-sidebar.open .morph-content { + top: 0 !important; + left: 0 !important; + width: 300px; + height: 100%; + overflow: hidden; + -webkit-backface-visibility: hidden; +} + +/* Let's add some nice easing for all cases */ +.morph-button .morph-content, +.morph-button.open .morph-content, +.morph-button-modal-4 .morph-clone { + -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); + transition-timing-function: cubic-bezier(0.7,0,0.3,1); +} + +/* Helper classes */ +.noscroll { + overflow: hidden; +} + +.morph-button-overlay.scroll .morph-content { + overflow-y: scroll; +} + +.morph-button-sidebar.scroll .morph-content { + overflow: auto; +} + +/* No JS fallback: let's hide the button and show the content */ +.no-js .morph-button > button { + display: none; +} + +.no-js .morph-button { + margin: 10px 0; + float: none; +} + +.no-js .morph-button, +.no-js .morph-button .morph-content, +.no-js .morph-button .morph-content > div { + position: relative; + width: auto; + height: auto; + opacity: 1; + visibility: visible; + top: auto; + left: auto; + -webkit-transform: none; + transform: none; + pointer-events: auto; +} + +.no-js .morph-button .morph-content .icon-close { + display: none; +} + +.no-js .morph-button-sidebar { + width: 300px; + position: fixed; + top: 0; + left: 0; + margin: 0; + height: 100%; + background: #e85657; + overflow: auto; +} + +.no-transition { + -webkit-transition: none !important; + transition: none !important; +} + +/* Media Queries */ + +@media screen and (max-width: 600px) { + .morph-button-modal.open .morph-content { + top: 0% !important; + left: 0% !important; + margin: 0; + width: 100%; + height: 100%; + overflow-y: scroll; + -webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; + transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s; + } +} + +@media screen and (max-width: 400px) { + .morph-button-fixed, + .morph-button-fixed .morph-content { + width: 70px; + height: 70px; + } + + .morph-button-fixed > button { + font-size: 75%; + } + + .morph-button-sidebar > button { + font-size: 1.6em; + } + + .morph-button-inflow .morph-content .morph-clone { + font-size: 0.9em; + } + + .morph-button-modal-4, + .morph-button-modal-4 .morph-content { + width: 220px; + height: 120px; + } + + .morph-button-modal-4 > button { + font-size: 100%; + line-height: 50px; + } + + .morph-button-modal-4 > button span { + display: block; + } + + .morph-button-modal-4 .morph-clone { + right: 83px; + bottom: 26px; + } + + .morph-button-sidebar, + .morph-button-sidebar .morph-content { + width: 100% !important; + height: 60px !important; + } + + .morph-button-sidebar { + bottom: 0px; + left: 0px; + } + + .morph-button-sidebar.open .morph-content { + height: 100% !important; + } +} diff --git a/css/content1.css b/css/content1.css new file mode 100755 index 0000000..7f20a01 --- /dev/null +++ b/css/content1.css @@ -0,0 +1,555 @@ +/* Icons */ +@font-face { + font-weight: normal; + font-style: normal; + font-family: 'icomoon'; + src:url('../fonts/icomoon/icomoon.eot?i64fx9'); + src:url('../fonts/icomoon/icomoon.eot?#iefixi64fx9') format('embedded-opentype'), + url('../fonts/icomoon/icomoon.woff?i64fx9') format('woff'), + url('../fonts/icomoon/icomoon.ttf?i64fx9') format('truetype'), + url('../fonts/icomoon/icomoon.svg?i64fx9#icomoon') format('svg'); +} + +.icon-close { + z-index: 100; + display: block; + overflow: hidden; + width: 3em; + height: 3em; + text-align: center; + line-height: 3; + cursor: pointer; +} + +.icon:before { + position: relative; + display: block; + width: 100%; + height: 100%; + text-transform: none; + font-weight: normal; + font-style: normal; + font-variant: normal; + font-family: 'icomoon'; + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-camera:before { + content: "\e017"; +} + +.icon-server:before { + content: "\e022"; +} + +.icon-heart:before { + content: "\e024"; +} + +.icon-zoom-in:before { + content: "\e037"; +} + +.icon-microphone:before { + content: "\e048"; +} + +.icon-cloud:before { + content: "\e066"; +} + +.icon-user:before { + content: "\e074"; +} + +.icon-briefcase:before { + content: "\e075"; +} + +.icon-globe:before { + content: "\e078"; +} + +.icon-cog::before { + content: "\e600"; +} + +.icon-close::before { + content: "\e601"; +} + +.icon-play::before { + content: "\e602"; +} + +.icon-pause::before { + content: "\e603"; +} + +.icon-close { + position: absolute; + top: 20px; + right: 20px; +} + +.icon-close:hover { + color: #a50a05; +} + +/* Styles for dummy content */ + +/* Style for overlay */ + +.content-style-overlay { + padding: 100px 50px; + text-align: center; +} + +.content-style-overlay h2 { + margin: 0 0 1em 0; + padding: 0; + font-weight: 300; + font-size: 3em; +} + +.content-style-overlay p { + margin: 0 auto; + padding: 10px 0; + max-width: 700px; + text-align: justify; + font-weight: 300; + font-size: 1.5em; +} + +.content-style-overlay .icon-close { + border: 2px solid #f9e1c9; + border-radius: 50%; + line-height: 2.8; +} + +.content-style-overlay .icon-close:hover { + border-color: #a50a05; +} + +/* Style for text modal */ +.content-style-text { + padding: 60px; + text-align: left; +} + +.content-style-text h2 { + margin: 0 0 0.5em 0; + font-weight: 300; + font-size: 1.85em; +} + +.content-style-text p { + color: rgba(255,255,255,0.5); + font-weight: 300; + font-size: 1.15em; + line-height: 1.4; +} + +.content-style-text label { + padding: 10px; + color: #f9e1c9; + font-weight: bold; +} + +.content-style-text .icon-close { + top: 0; + right: 0; + color: rgba(0,0,0,0.2); +} + +.content-style-text .icon-close:hover { + color: #f9e1c9; +} + +/* Style for form modal */ +.content-style-form { + position: relative; + text-align: left; +} + +.content-style-form h2 { + margin: 0; + padding: 0.4em 0 0.3em; + text-align: center; + font-weight: 300; + font-size: 3.5em; +} + +.content-style-form form { + padding: 10px 30px; +} + +.content-style-form form p { + margin: 0 0 5px 0; + font-size: 0.7em; +} + +.content-style-form label { + display: block; + padding: 10px 0 0; + color: #d5bba4; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: bold; +} + +.content-style-form input[type="text"], +.content-style-form input[type="password"] { + padding: 10px; + width: 100%; + border: 2px solid #ebd3bd; + background: transparent; + color: #b09a86; + font-weight: 300; + font-size: 2.2em; +} + +.content-style-form input[type="text"]:focus, +.content-style-form input[type="password"]:focus { + border-color: #e75854; + color: #e75854; +} + +.content-style-form input:focus { + outline: 0; +} + +.content-style-form button { + display: block; + margin-top: 2.5em; + padding: 1.5em; + width: 100%; + border: none; + background: #e75854; + color: #f9f6e5; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 800; + font-size: 1.25em; +} + +.content-style-form .icon-close { + top: 0; + right: 0; + color: #ebd3bd; + font-size: 75%; +} + +.content-style-form .icon-close:hover { + color: #e75854; +} + +.js .content-style-form-1 h2, +.js .content-style-form-1 p, +.js .content-style-form-1 .icon-close { + opacity: 0; + -webkit-transition: opacity 0.2s 0.35s, -webkit-transform 0.2s 0.35s; + transition: opacity 0.2s 0.35s, transform 0.2s 0.35s; + -webkit-transform: scale(0.85); + transform: scale(0.85); +} + +.content-style-form-1 p:first-child { + -webkit-transition-delay: 0.4s; + transition-delay: 0.4s; +} + +.content-style-form-1 p:nth-child(2) { + -webkit-transition-delay: 0.45s; + transition-delay: 0.45s; +} + +.content-style-form-1 p:nth-child(3) { + -webkit-transition-delay: 0.5s; + transition-delay: 0.5s; +} + +.morph-button.open .content-style-form-1 h2, +.morph-button.open .content-style-form-1 p, +.morph-button.open .content-style-form-1 .icon-close { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); +} + +.js .content-style-form-2 h2, +.js .content-style-form-2 p, +.js .content-style-form-2 .icon-close { + opacity: 0; + -webkit-transition: opacity 0.2s 0.3s, -webkit-transform 0.2s 0.3s; + transition: opacity 0.2s 0.3s, transform 0.2s 0.3s; + -webkit-transform: translateY(50px); + transform: translateY(50px); +} + +.content-style-form-2 p:first-child { + -webkit-transition-delay: 0.35s; + transition-delay: 0.35s; +} + +.content-style-form-2 p:nth-child(2) { + -webkit-transition-delay: 0.4s; + transition-delay: 0.4s; +} + +.content-style-form-2 p:nth-child(3) { + -webkit-transition-delay: 0.45s; + transition-delay: 0.45s; +} + +.content-style-form-2 p:nth-child(4) { + -webkit-transition-delay: 0.5s; + transition-delay: 0.5s; +} + +.morph-button.open .content-style-form-2 h2, +.morph-button.open .content-style-form-2 p, +.morph-button.open .content-style-form-2 .icon-close { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); +} + +.content-style-form-4 form { + padding: 30px; + background: #fff; + color: #ccb096; + font-size: 1.5em; + -webkit-perspective: 1000px; + perspective: 1000px; +} + +.content-style-form-4 input[type="text"] { + border: none; + background-color: #f0f0f0; +} + +.content-style-form-4 form button { + background: #ba997b; +} + +.content-style-form-4 form button:focus, +.content-style-form-4 form button:hover { + background: #a9896d; +} + +.js .content-style-form-4 p { + opacity: 0; + -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; + transition: opacity 0.3s, transform 0.3s; + -webkit-transform: rotateX(-45deg); + transform: rotateX(-45deg); + -webkit-transform-origin: center top; + transform-origin: center top; +} + +.morph-button.open .content-style-form-4 p { + opacity: 1; + -webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.4s 0.2s; + transition: opacity 0.4s 0.2s, transform 0.4s 0.2s; + -webkit-transform: rotateY(0deg); + transform: rotateY(0deg); +} + +.morph-button.open .content-style-form-4 p:nth-child(2) { + -webkit-transition-delay: 0.35s; + transition-delay: 0.35s; +} + +.content-style-social { + padding: 30px; + text-align: left; +} + +.morph-button-inflow-2 > button svg { + display: inline-block; + padding-right: 10px; + width: 20px; + height: 20px; + vertical-align: -5%; +} + +.morph-button-inflow-2 > button svg path { + fill: #e75854; +} + +.content-style-social a { + display: block; + padding: 0.5em 0; + color: #67c2d4; + vertical-align: middle; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 700; + font-size: 0.8em; + line-height: 32px; +} + +.js .content-style-social a { + -webkit-transition: -webkit-transform 0.3s; + transition: transform 0.3s; + -webkit-transform: translateX(100%); + transform: translateX(100%); +} + +.content-style-social a:hover { + color: #e75854; +} + +.content-style-social a:hover svg path { + fill: #e75854; +} + +.content-style-social a svg { + display: inline-block; + padding-right: 10px; + vertical-align: middle; + -webkit-backface-visibility: hidden; +} + +.morph-button-inflow.open .content-style-social a { + -webkit-transform: translateX(0); + transform: translateX(0); +} + +.morph-button-inflow.open .content-style-social a:nth-child(2) { + -webkit-transition-delay: 0.05s; + transition-delay: 0.05s; +} + +.morph-button-inflow.open .content-style-social a:nth-child(3) { + -webkit-transition-delay: 0.1s; + transition-delay: 0.1s; +} + +.content-style-video { + text-align: left; +} + +.video-mockup { + width: 640px; + height: 360px; + max-width: 100%; + background: url(../img/rated.png) no-repeat center center; + background-size: 100%; +} + +.content-style-video .icon-close, +.content-style-video .icon-pause { + color: #286f81; +} + +.content-style-video .icon-close { + top: 0; + right: 0; +} + +.content-style-video .icon-close:hover { + color: rgba(0,0,0,0.4); +} + +.controls { + bottom: 0px; + left: 0px; + width: 100%; +} + +.js .controls { + position: absolute; +} + +.controls span { + display: inline-block; +} + +.content-style-video .icon-pause { + overflow: hidden; + width: 2.5em; + height: 2.5em; + text-align: center; + line-height: 2.5; + cursor: pointer; + vertical-align: bottom; +} + +.content-style-video span.time { + color: #286f81; + letter-spacing: 1px; + font-weight: 700; + line-height: 40px; +} + +.controls::after { + content: ''; + position: absolute; + height: 7px; + left: 100px; + right: 70px; + bottom: 16px; + background: #aaa; +} + +.content-style-sidebar h2 { + font-weight: 300; + font-size: 2em; + padding: 0.75em 0 0.75em 1em; + margin: 0; + color: #bb4445; +} + +.content-style-sidebar .icon-close { + top: 0; + right: 0; + font-size: 0.85em; +} + +.content-style-sidebar ul { + list-style: none; + margin: 0; + padding: 0; +} + +.content-style-sidebar ul li a { + display: block; + padding: 12px 20px; + color: #faf1e0; + font-weight: 400; + font-size: 1.05em; + box-shadow: inset 0 1px rgba(0,0,0,0.1); +} + +.content-style-sidebar ul li:last-child a { + box-shadow: inset 0 1px rgba(0,0,0,0.1), inset 0 -1px rgba(0,0,0,0.1); +} + +.content-style-sidebar ul li a:hover { + background: rgba(0,0,0,0.1); + box-shadow: none; +} + +.content-style-sidebar ul .icon::before { + display: inline-block; + width: auto; + margin-right: 20px; + font-size: 1.5em; + vertical-align: -10%; + color: rgba(0,0,0,0.2); +} + +@media screen and (max-width: 770px) { + .content-style-overlay { + font-size: 75%; + } + + .content-style-overlay .icon-close { + top: 5px; + right: 5px; + } +} diff --git a/css/demo1.css b/css/demo1.css new file mode 100755 index 0000000..d62e071 --- /dev/null +++ b/css/demo1.css @@ -0,0 +1,334 @@ +@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Merriweather+Sans:800); + +@font-face { + font-weight: normal; + font-style: normal; + 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-face { + font-family: 'Blokk'; + src: url('../fonts/blokk/BLOKKRegular.eot'); + src: url('../fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'), + url('../fonts/blokk/BLOKKRegular.woff') format('woff'), + url('../fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg'); + font-weight: normal; + font-style: normal; +} + +*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } +.clearfix:before, .clearfix:after { content: ''; display: table; } +.clearfix:after { clear: both; } + + + + +a, button { + color: #553445; + text-decoration: none; + outline: none; +} + +a:hover, a:focus { + color: #e75854; +} + +.codrops-header { + margin: 0 auto; + padding: 2em; + text-align: center; +} + +.codrops-header h1 { + margin: 0; + font-weight: 800; + font-size: 3em; + font-family: "Merriweather Sans", sans-serif; +} + +.codrops-header p { + padding: 0.35em 0 1.25em; + margin: 0; + font-size: 1.65em; + opacity: 0.7; +} + +/* Codrops Demos */ +.codrops-demos a { + font-family: "Merriweather Sans", sans-serif; + text-transform: uppercase; + display: inline-block; + margin: 0 10px; +} + +.codrops-demos a.current-demo { + color: #e75854; +} + +/* Top Navigation Style */ +.codrops-top { + width: 100%; + text-transform: uppercase; + font-weight: 700; + font-size: 0.69em; + line-height: 2.2; +} + +.codrops-top a { + display: inline-block; + padding: 0 1em; + text-decoration: none; + letter-spacing: 1px; +} + +.codrops-top span.right { + float: right; +} + +.codrops-top span.right a { + display: block; + float: left; +} + +.codrops-icon:before { + margin: 0 4px; + text-transform: none; + font-weight: normal; + font-style: normal; + font-variant: normal; + font-family: 'codropsicons'; + line-height: 1; + speak: none; + -webkit-font-smoothing: antialiased; +} + +.codrops-icon-drop:before { + content: "\e001"; +} + +.codrops-icon-prev:before { + content: "\e004"; +} + +section { + padding: 2em; + text-align: justify; + max-width: 800px; + margin: 0 auto; + clear: both; +} + +section p { + font-size: 1.5em; + line-height: 1.75; +} + +section > p:first-child { + text-align: center; +} + +section.related { + text-align: center; +} + +.related p { + font-weight: 700; +} + +.related > a { + border: 2px solid #faf1e0; + color: #faf1e0; + display: inline-block; + text-align: center; + margin: 20px 10px; + padding: 20px; + -webkit-transition: color 0.3s, border-color 0.3s; + transition: color 0.3s, border-color 0.3s; +} + +.related a:hover { + color: rgba(0,0,0,0.2); + border-color: rgba(0,0,0,0.2); +} + +.related a img { + max-width: 100%; + opacity: 0.8; + -webkit-transition: opacity 0.3s; + transition: opacity 0.3s; +} + +.related a:hover img, +.related a:active img { + opacity: 1; +} + +.related a h3 { + margin: 0; + padding: 0.5em 0 0.3em; + max-width: 300px; + text-transform: uppercase; + letter-spacing: 1px; + font-size: 1em; + text-align: left; + font-family: "Merriweather Sans", sans-serif; +} + +/* Demo mockups */ +.mockup-content { + text-align: center; +} + +.demo-4 .mockup-content { + padding: 1em 0 3em; +} + +.demo-5 .mockup-content { + padding: 1em 0 6em; +} + +.mockup-content > span { + display: block; + background: rgba(0,0,0,0.1); + height: 50px; + width: 100%; + margin: 0 0 10px; + clear: both; +} + +.mockup-content > span:nth-child(2), +.mockup-content > span:nth-child(3), +.mockup-content > span:nth-last-child(2) { + width: calc(50% - 5px); + float: left; + clear: none; + height: 80px; +} + +.mockup-content > span:nth-child(3), +.mockup-content > span:nth-last-child(2) { + float: right; +} + +.mockup-content > span:nth-last-child(2) { + width: calc(100% - 310px); +} + +.no-js .mockup-content > span:nth-last-child(2) { + width: 100%; +} + +.mockup-content h2 { + font-size: 2em; + margin: 0; +} + +.mockup-content > p { + font-family: 'Blokk', sans-serif; + font-size: 0.85em; + text-align: center; + opacity: 0.5; + margin: 0; + overflow: hidden; +} + +.no-js .joiner { + display: block; +} + +.demo-5 .mockup-content > p { + font-size: 1.4em; + margin: 0; + padding: 0.5em 0; + text-align: justify; + font-family: 'Lato', Arial, sans-serif; +} + +.js .fixed-block { + min-height: 300px; + position: relative; +} + +.mockup-left { + float: left; + max-width: 100%; + overflow: hidden; + width: 300px; + margin: 0 40px 50px 0; + background: rgba(0,0,0,0.1); + height: 400px; + position: relative; +} + +.mockup-left::after { + content:'\2234'; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + color: rgba(0,0,0,0.05); + font-size: 15em; +} + +.mockup-right { + text-align: left; +} + +html.demo-7, .demo-7 body { + overflow-x: hidden; + height: 100%; +} + +.demo-7 .container { + width: 100%; + position: absolute; + -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0.1s; + transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0.1s; +} + +.no-js.demo-7 .container { + width: calc(100% - 300px); + right: 0; +} + +.pushed.container { + -webkit-transition-duration: 0.5s; + transition-duration: 0.5s; + -webkit-transform: translateX(300px); + transform: translateX(300px); +} + +@media screen and (max-width: 770px) { + .mockup-left { + float: none; + margin: 0 auto 20px; + } + + .mockup-right { + text-align: center; + } + + .joiner { + display: block; + } +} + +@media screen and (max-width: 400px) { + .mockup-content > span:nth-last-child(2) { + width: calc(100% - 210px); + } +} + +@media screen and (max-width: 25em) { + + .codrops-icon span { + display: none; + } + +} diff --git a/css/normalize1.css b/css/normalize1.css new file mode 100755 index 0000000..77feb20 --- /dev/null +++ b/css/normalize1.css @@ -0,0 +1 @@ +article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} \ No newline at end of file diff --git a/fonts/blokk/BLOKKRegular.eot b/fonts/blokk/BLOKKRegular.eot new file mode 100755 index 0000000..4ef2eda Binary files /dev/null and b/fonts/blokk/BLOKKRegular.eot differ diff --git a/fonts/blokk/BLOKKRegular.svg b/fonts/blokk/BLOKKRegular.svg new file mode 100755 index 0000000..f7800d1 --- /dev/null +++ b/fonts/blokk/BLOKKRegular.svg @@ -0,0 +1,233 @@ + + + + +Created by FontXChange 20110222 at Fri Feb 1 20:10:43 2013 + By Bjørn Kvamme +Copyright tomma 2013 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/fonts/blokk/BLOKKRegular.ttf b/fonts/blokk/BLOKKRegular.ttf new file mode 100755 index 0000000..2ef45e8 Binary files /dev/null and b/fonts/blokk/BLOKKRegular.ttf differ diff --git a/fonts/blokk/BLOKKRegular.woff b/fonts/blokk/BLOKKRegular.woff new file mode 100755 index 0000000..4f89389 Binary files /dev/null and b/fonts/blokk/BLOKKRegular.woff differ diff --git a/fonts/icomoon/icomoon.eot b/fonts/icomoon/icomoon.eot new file mode 100755 index 0000000..8903592 Binary files /dev/null and b/fonts/icomoon/icomoon.eot differ diff --git a/fonts/icomoon/icomoon.svg b/fonts/icomoon/icomoon.svg new file mode 100755 index 0000000..e0fb96c --- /dev/null +++ b/fonts/icomoon/icomoon.svg @@ -0,0 +1,23 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/icomoon/icomoon.ttf b/fonts/icomoon/icomoon.ttf new file mode 100755 index 0000000..99e1a58 Binary files /dev/null and b/fonts/icomoon/icomoon.ttf differ diff --git a/fonts/icomoon/icomoon.woff b/fonts/icomoon/icomoon.woff new file mode 100755 index 0000000..5ff9e18 Binary files /dev/null and b/fonts/icomoon/icomoon.woff differ diff --git a/img/relatedposts/FLO-webwallet-360x162.png b/img/relatedposts/FLO-webwallet-360x162.png new file mode 100644 index 0000000..33dbe9a Binary files /dev/null and b/img/relatedposts/FLO-webwallet-360x162.png differ diff --git a/img/relatedposts/FLO-webwallet.png b/img/relatedposts/FLO-webwallet.png new file mode 100644 index 0000000..e37fd7e Binary files /dev/null and b/img/relatedposts/FLO-webwallet.png differ diff --git a/img/relatedposts/token-explorer-300x162.png b/img/relatedposts/token-explorer-300x162.png new file mode 100644 index 0000000..8b8a97e Binary files /dev/null and b/img/relatedposts/token-explorer-300x162.png differ diff --git a/img/relatedposts/token-explorer.png b/img/relatedposts/token-explorer.png new file mode 100644 index 0000000..362a70e Binary files /dev/null and b/img/relatedposts/token-explorer.png differ diff --git a/index.html b/index.html index 3fc7b40..522f55c 100755 --- a/index.html +++ b/index.html @@ -1,80 +1,239 @@ - - - - - FLOdata tester - - - - - - - - - - - - -
-
-
-

FLOdata tester

-
- Previous Demo - Back to the Codrops Article - This is a demo for a fullscreen form -
-
-
-
    -
  1. - - -
    2. -
- -
-
+ + + + + FLOdata tester + + + + + + + + + + + + + + + + + + -
- - - - + + + - - \ No newline at end of file + new FForm(formWrap, { + onReview: function() { + classie.add(document.body, 'overview'); // for demo purposes only + } + }); + })(); + + + + + + + diff --git a/js/fullscreenForm.js b/js/fullscreenForm.js index d013a95..c2525a5 100644 --- a/js/fullscreenForm.js +++ b/js/fullscreenForm.js @@ -11,698 +11,699 @@ ; (function(window) { - 'use strict'; + 'use strict'; - var support = { animations: Modernizr.cssanimations }, - animEndEventNames = { 'WebkitAnimation': 'webkitAnimationEnd', 'OAnimation': 'oAnimationEnd', 'msAnimation': 'MSAnimationEnd', 'animation': 'animationend' }, - // animation end event name - animEndEventName = animEndEventNames[Modernizr.prefixed('animation')]; + var support = { animations: Modernizr.cssanimations }, + animEndEventNames = { 'WebkitAnimation': 'webkitAnimationEnd', 'OAnimation': 'oAnimationEnd', 'msAnimation': 'MSAnimationEnd', 'animation': 'animationend' }, + // animation end event name + animEndEventName = animEndEventNames[Modernizr.prefixed('animation')]; - /** - * extend obj function - */ - function extend(a, b) { - for (var key in b) { - if (b.hasOwnProperty(key)) { - a[key] = b[key]; - } + /** + * extend obj function + */ + function extend(a, b) { + for (var key in b) { + if (b.hasOwnProperty(key)) { + a[key] = b[key]; } - return a; } + return a; + } - /** - * createElement function - * creates an element with tag = tag, className = opt.cName, innerHTML = opt.inner and appends it to opt.appendTo - */ - function createElement(tag, opt) { - var el = document.createElement(tag) - if (opt) { - if (opt.cName) { - el.className = opt.cName; - } - if (opt.inner) { - el.innerHTML = opt.inner; - } - if (opt.appendTo) { - opt.appendTo.appendChild(el); - } + /** + * createElement function + * creates an element with tag = tag, className = opt.cName, innerHTML = opt.inner and appends it to opt.appendTo + */ + function createElement(tag, opt) { + var el = document.createElement(tag) + if (opt) { + if (opt.cName) { + el.className = opt.cName; + } + if (opt.inner) { + el.innerHTML = opt.inner; + } + if (opt.appendTo) { + opt.appendTo.appendChild(el); } - return el; } + return el; + } - // finds no of occurances of substring - function occurrences(string, subString, allowOverlapping) { - string += ""; - subString += ""; - if (subString.length <= 0) return (string.length + 1); + // finds no of occurances of substring + function occurrences(string, subString, allowOverlapping) { + string += ""; + subString += ""; + if (subString.length <= 0) return (string.length + 1); - var n = 0, - pos = 0, - step = allowOverlapping ? 1 : subString.length; + var n = 0, + pos = 0, + step = allowOverlapping ? 1 : subString.length; - while (true) { - pos = string.indexOf(subString, pos); - if (pos >= 0) { - ++n; - pos += step; - } else break; - } - return n; + while (true) { + pos = string.indexOf(subString, pos); + if (pos >= 0) { + ++n; + pos += step; + } else break; } + return n; + } - function isTransfer(text) { - var wordlist = ['transfer', 'send', 'give']; // keep list's content lowercase - var textList = text.split(' '); - for (var i = 0; i < wordlist.length; i++) { - if (textList.includes(wordlist[i])) { - return true; - } + function isTransfer(text) { + var wordlist = ['transfer', 'send', 'give']; // keep list's content lowercase + var textList = text.split(' '); + for (var i = 0; i < wordlist.length; i++) { + if (textList.includes(wordlist[i])) { + return true; } - return false; } + return false; + } - function isIncorp(text) { - var wordlist = ['incorporate', 'create', 'start', 'begin']; // keep list's content lowercase - var textList = text.split(' '); - for (var i = 0; i < wordlist.length; i++) { - if (textList.includes(wordlist[i])) { - return true; - } + function isIncorp(text) { + var wordlist = ['incorporate', 'create', 'start', 'begin']; // keep list's content lowercase + var textList = text.split(' '); + for (var i = 0; i < wordlist.length; i++) { + if (textList.includes(wordlist[i])) { + return true; } - return false; } + return false; + } - function extractAmount(text) { - var count = 0; - var returnval; - var splitText = text.split(/\W+/); + function extractAmount(text) { + var count = 0; + var returnval; + var splitText = text.split(/\W+/); - for (var i = 0; i < splitText.length; i++) { - if (parseFloat(splitText[i])) { - count += 1; - returnval = parseFloat(splitText[i]); - } - if (count > 1) { - return 0; - } + for (var i = 0; i < splitText.length; i++) { + if (parseFloat(splitText[i])) { + count += 1; + returnval = parseFloat(splitText[i]); } - return returnval; - } - - function extractAddress(text) { - var textList = text.split(' ') - for (var i = 0; i < textList.length; i++) { - if (textList[i] == '') { - continue; - } - if (textList[i].endsWith('$') && textList[i].length != 1) { - return textList[i]; - } - } - return 0; - } - - - function extractInitTokens(text) { - var base_units = { 'thousand': 10 ** 3, 'million': 10 ** 6, 'billion': 10 ** 9, 'trillion': 10 ** 12 }; - var textList = text.split(' '); - var counter = 0; - var value; - for (var i = 0; i < textList.length; i++) { - if (!isNaN(textList[i])) { - if (base_units.hasOwnProperty(textList[i + 1])) { - value = textList[i] * base_units[textList[i + 1]]; - counter += 1; - } - } else { - for (var j = 0; j < Object.keys(base_units).length; j++) { - var result = textList[i].split(Object.keys(base_units)[j]); - if (result.length == 2 && result[1] == '' && result[0] != '') { - if (!isNaN(result[0])) { - value = parseFloat(result[0]) * base_units[Object.keys(base_units)[j]]; - counter = counter + 1; - } - } - } - } - } - - if (counter == 1) { - return value; - } else { + if (count > 1) { return 0; } } + return returnval; + } - - - function parse_flodata(flodata) { - if (flodata.slice(0, 5) == 'text') { - flodata = flodata.split('text:')[1]; + function extractAddress(text) { + var textList = text.split(' ') + for (var i = 0; i < textList.length; i++) { + if (textList[i] == '') { + continue; } - - var nospacestring = flodata.replace(/ +/g, ' '); - var cleanstring = nospacestring.toLowerCase(); - - var parsed_data; - - var atList = []; - var hashList = []; - - var cleanstringList = cleanstring.split(' ') - - for (var i = 0; i < cleanstringList.length; i++) { - if (cleanstringList[i].endsWith('@') && cleanstringList[i].length != 1) { - atList.push(cleanstringList[i]); - } - if (cleanstringList[i].endsWith('#') && cleanstringList[i].length != 1) { - hashList.push(cleanstringList[i]); - } + if (textList[i].endsWith('$') && textList[i].length != 1) { + return textList[i]; } + } + return 0; + } - if (atList.length == 0 && hashList.length == 0 || atList.length > 1 || hashList.length > 1) { - parsed_data = { 'type': 'noise' }; - } else if (hashList.length == 1 && atList.length == 0) { - // Passing the above check means token creation or transfer - var incorporation = isIncorp(cleanstring); - var transfer = isTransfer(cleanstring); - //todo Rule 27 - if (neither token incorporation and token transfer) OR both token incorporation and token transfer, reject - if ((!incorporation && !transfer) || (incorporation && transfer)) { - parsed_data = { 'type': 'noise' }; - } else if (incorporation && !transfer) { - var initTokens = extractInitTokens(cleanstring); - if (initTokens != 0) { - parsed_data = { - 'type': 'tokenIncorporation', - 'flodata': cleanstring, - 'tokenIdentification': hashList[0].slice(0, hashList[0].length - 1), - 'tokenAmount': initTokens - }; - } else { - parsed_data = { 'type': 'noise' }; - } + function extractInitTokens(text) { + var base_units = { 'thousand': 10 ** 3, 'million': 10 ** 6, 'billion': 10 ** 9, 'trillion': 10 ** 12 }; + var textList = text.split(' '); + var counter = 0; + var value; + for (var i = 0; i < textList.length; i++) { + if (!isNaN(textList[i])) { + if (base_units.hasOwnProperty(textList[i + 1])) { + value = textList[i] * base_units[textList[i + 1]]; + counter += 1; } - // todo Rule 30 - if not token creation and is token transfer then then process it for token transfer rules - // todo Rule 31 - Extract number of tokens to be sent and the address to which to be sent, both data is mandatory - else if (!incorporation && transfer) { - var amount = extractAmount(cleanstring, hashList[0].slice(0, hashList[0].length - 1)); - var address = extractAddress(nospacestring); - if (amount != 0 && address != 0) { - parsed_data = { - 'type': 'transfer', - 'transferType': 'token', - 'flodata': cleanstring, - 'tokenIdentification': hashList[0].slice(0, hashList[0].length - 1), - 'tokenAmount': amount, - 'address': address.slice(0, address.length - 1) - }; - } - else { - parsed_data = { 'type': 'noise' }; + } else { + for (var j = 0; j < Object.keys(base_units).length; j++) { + var result = textList[i].split(Object.keys(base_units)[j]); + if (result.length == 2 && result[1] == '' && result[0] != '') { + if (!isNaN(result[0])) { + value = parseFloat(result[0]) * base_units[Object.keys(base_units)[j]]; + counter = counter + 1; } } + } + } + } + if (counter == 1) { + return value; + } else { + return 0; + } + } + + + + function parse_flodata(flodata) { + if (flodata.slice(0, 5) == 'text') { + flodata = flodata.split('text:')[1]; + } + + var nospacestring = flodata.replace(/ +/g, ' '); + var cleanstring = nospacestring.toLowerCase(); + + var parsed_data; + + var atList = []; + var hashList = []; + + var cleanstringList = cleanstring.split(' ') + + for (var i = 0; i < cleanstringList.length; i++) { + if (cleanstringList[i].endsWith('@') && cleanstringList[i].length != 1) { + atList.push(cleanstringList[i]); + } + if (cleanstringList[i].endsWith('#') && cleanstringList[i].length != 1) { + hashList.push(cleanstringList[i]); + } + } + + if (atList.length == 0 && hashList.length == 0 || atList.length > 1 || hashList.length > 1) { + parsed_data = { 'type': 'noise', 'flodata': nospacestring }; + } else if (hashList.length == 1 && atList.length == 0) { + // Passing the above check means token creation or transfer + var incorporation = isIncorp(cleanstring); + var transfer = isTransfer(cleanstring); + + //todo Rule 27 - if (neither token incorporation and token transfer) OR both token incorporation and token transfer, reject + if ((!incorporation && !transfer) || (incorporation && transfer)) { + parsed_data = { 'type': 'noise', 'flodata': nospacestring }; + } else if (incorporation && !transfer) { + var initTokens = extractInitTokens(cleanstring); + var address = extractAddress(nospacestring); + if (initTokens != 0 && address != 0) { + parsed_data = { + 'type': 'tokenIncorporation', + 'flodata': cleanstring, + 'tokenIdentification': hashList[0].slice(0, hashList[0].length - 1), + 'tokenAmount': initTokens, + 'address': address.slice(0, address.length - 1) + }; } else { - parsed_data = { 'type': 'noise' }; + parsed_data = { 'type': 'noise', 'flodata': nospacestring }; } - - return parsed_data; } - - - /** - * FForm function - */ - function FForm(el, options) { - this.el = el; - this.options = extend({}, this.options); - extend(this.options, options); - this._init(); - } - - /** - * FForm options - */ - FForm.prototype.options = { - // show progress bar - ctrlProgress: true, - // show navigation dots - ctrlNavDots: true, - // show [current field]/[total fields] status - ctrlNavPosition: true, - // reached the review and submit step - onReview: function() { return false; } - }; - - /** - * init function - * initialize and cache some vars - */ - FForm.prototype._init = function() { - // the form element - this.formEl = this.el.querySelector('form'); - - // list of fields - this.fieldsList = this.formEl.querySelector('ol.fs-fields'); - - // current field position - this.current = 0; - - // all fields - this.fields = [].slice.call(this.fieldsList.children); - - // total fields - this.fieldsCount = this.fields.length; - - // show first field - classie.add(this.fields[this.current], 'fs-current'); - - // create/add controls - this._addControls(); - - // create/add messages - this._addErrorMsg(); - - // init events - this._initEvents(); - }; - - /** - * addControls function - * create and insert the structure for the controls - */ - FForm.prototype._addControls = function() { - // main controls wrapper - this.ctrls = createElement('div', { cName: 'fs-controls', appendTo: this.el }); - - // continue button (jump to next field) - this.ctrlContinue = createElement('button', { cName: 'fs-continue', inner: 'Continue', appendTo: this.ctrls }); - this._showCtrl(this.ctrlContinue); - - // navigation dots - if (this.options.ctrlNavDots) { - this.ctrlNav = createElement('nav', { cName: 'fs-nav-dots', appendTo: this.ctrls }); - var dots = ''; - for (var i = 0; i < this.fieldsCount; ++i) { - dots += i === this.current ? '' : ''; - } - this.ctrlNav.innerHTML = dots; - this._showCtrl(this.ctrlNav); - this.ctrlNavDots = [].slice.call(this.ctrlNav.children); - } - - // field number status - if (this.options.ctrlNavPosition) { - this.ctrlFldStatus = createElement('span', { cName: 'fs-numbers', appendTo: this.ctrls }); - - // current field placeholder - this.ctrlFldStatusCurr = createElement('span', { cName: 'fs-number-current', inner: Number(this.current + 1) }); - this.ctrlFldStatus.appendChild(this.ctrlFldStatusCurr); - - // total fields placeholder - this.ctrlFldStatusTotal = createElement('span', { cName: 'fs-number-total', inner: this.fieldsCount }); - this.ctrlFldStatus.appendChild(this.ctrlFldStatusTotal); - //this._showCtrl(this.ctrlFldStatus); - } - - // progress bar - if (this.options.ctrlProgress) { - this.ctrlProgress = createElement('div', { cName: 'fs-progress', appendTo: this.ctrls }); - this._showCtrl(this.ctrlProgress); + // todo Rule 30 - if not token creation and is token transfer then then process it for token transfer rules + // todo Rule 31 - Extract number of tokens to be sent and the address to which to be sent, both data is mandatory + else if (!incorporation && transfer) { + var amount = extractAmount(cleanstring, hashList[0].slice(0, hashList[0].length - 1)); + var address = extractAddress(nospacestring); + if (amount != 0 && address != 0) { + parsed_data = { + 'type': 'transfer', + 'transferType': 'token', + 'flodata': cleanstring, + 'tokenIdentification': hashList[0].slice(0, hashList[0].length - 1), + 'tokenAmount': amount, + 'address': address.slice(0, address.length - 1) + }; + } else { + parsed_data = { 'type': 'noise', 'flodata': nospacestring }; } } - /** - * addErrorMsg function - * create and insert the structure for the error message - */ - FForm.prototype._addErrorMsg = function() { - // error message - this.msgError = createElement('span', { cName: 'fs-message-error', appendTo: this.el }); + } else { + parsed_data = { 'type': 'noise', 'flodata': nospacestring }; + } + + return parsed_data; + } + + + /** + * FForm function + */ + function FForm(el, options) { + this.el = el; + this.options = extend({}, this.options); + extend(this.options, options); + this._init(); + } + + /** + * FForm options + */ + FForm.prototype.options = { + // show progress bar + ctrlProgress: true, + // show navigation dots + ctrlNavDots: true, + // show [current field]/[total fields] status + ctrlNavPosition: true, + // reached the review and submit step + onReview: function() { return false; } + }; + + /** + * init function + * initialize and cache some vars + */ + FForm.prototype._init = function() { + // the form element + this.formEl = this.el.querySelector('form'); + + // list of fields + this.fieldsList = this.formEl.querySelector('ol.fs-fields'); + + // current field position + this.current = 0; + + // all fields + this.fields = [].slice.call(this.fieldsList.children); + + // total fields + this.fieldsCount = this.fields.length; + + // show first field + classie.add(this.fields[this.current], 'fs-current'); + + // create/add controls + this._addControls(); + + // create/add messages + this._addErrorMsg(); + + // init events + this._initEvents(); + }; + + /** + * addControls function + * create and insert the structure for the controls + */ + FForm.prototype._addControls = function() { + // main controls wrapper + this.ctrls = createElement('div', { cName: 'fs-controls', appendTo: this.el }); + + // continue button (jump to next field) + this.ctrlContinue = createElement('button', { cName: 'fs-continue', inner: 'Continue', appendTo: this.ctrls }); + this._showCtrl(this.ctrlContinue); + + // navigation dots + if (this.options.ctrlNavDots) { + this.ctrlNav = createElement('nav', { cName: 'fs-nav-dots', appendTo: this.ctrls }); + var dots = ''; + for (var i = 0; i < this.fieldsCount; ++i) { + dots += i === this.current ? '' : ''; } + this.ctrlNav.innerHTML = dots; + this._showCtrl(this.ctrlNav); + this.ctrlNavDots = [].slice.call(this.ctrlNav.children); + } - /** - * init events - */ - FForm.prototype._initEvents = function() { - var self = this; + // field number status + if (this.options.ctrlNavPosition) { + this.ctrlFldStatus = createElement('span', { cName: 'fs-numbers', appendTo: this.ctrls }); - // show next field - this.ctrlContinue.addEventListener('click', function() { + // current field placeholder + this.ctrlFldStatusCurr = createElement('span', { cName: 'fs-number-current', inner: Number(this.current + 1) }); + this.ctrlFldStatus.appendChild(this.ctrlFldStatusCurr); + + // total fields placeholder + this.ctrlFldStatusTotal = createElement('span', { cName: 'fs-number-total', inner: this.fieldsCount }); + this.ctrlFldStatus.appendChild(this.ctrlFldStatusTotal); + //this._showCtrl(this.ctrlFldStatus); + } + + // progress bar + if (this.options.ctrlProgress) { + this.ctrlProgress = createElement('div', { cName: 'fs-progress', appendTo: this.ctrls }); + this._showCtrl(this.ctrlProgress); + } + } + + /** + * addErrorMsg function + * create and insert the structure for the error message + */ + FForm.prototype._addErrorMsg = function() { + // error message + this.msgError = createElement('span', { cName: 'fs-message-error', appendTo: this.el }); + } + + /** + * init events + */ + FForm.prototype._initEvents = function() { + var self = this; + + // show next field + this.ctrlContinue.addEventListener('click', function() { + var flodata = document.getElementById('q1'); + var result = parse_flodata(flodata.value); + console.log(result); + self._nextField(undefined, result); + }); + + // navigation dots + if (this.options.ctrlNavDots) { + this.ctrlNavDots.forEach(function(dot, pos) { + dot.addEventListener('click', function() { + self._showField(pos); + }); + }); + } + + // jump to next field without clicking the continue button (for fields/list items with the attribute "data-input-trigger") + this.fields.forEach(function(fld) { + if (fld.hasAttribute('data-input-trigger')) { + var input = fld.querySelector('input[type="radio"]') || /*fld.querySelector( '.cs-select' ) ||*/ fld.querySelector('select'); // assuming only radio and select elements (TODO: exclude multiple selects) + if (!input) return; + + switch (input.tagName.toLowerCase()) { + case 'select': + input.addEventListener('change', function() { self._nextField(); }); + break; + + case 'input': + [].slice.call(fld.querySelectorAll('input[type="radio"]')).forEach(function(inp) { + inp.addEventListener('change', function(ev) { self._nextField(); }); + }); + break; + + /* + // for our custom select we would do something like: + case 'div' : + [].slice.call( fld.querySelectorAll( 'ul > li' ) ).forEach( function( inp ) { + inp.addEventListener( 'click', function(ev) { self._nextField(); } ); + } ); + break; + */ + } + } + }); + + // keyboard navigation events - jump to next field when pressing enter + document.addEventListener('keydown', function(ev) { + if (!self.isLastStep && ev.target.tagName.toLowerCase() !== 'textarea') { + var keyCode = ev.keyCode || ev.which; + if (keyCode === 13) { + ev.preventDefault(); var flodata = document.getElementById('q1'); var result = parse_flodata(flodata.value); console.log(result); self._nextField(undefined, result); - }); + } + } + }); + }; - // navigation dots - if (this.options.ctrlNavDots) { - this.ctrlNavDots.forEach(function(dot, pos) { - dot.addEventListener('click', function() { - self._showField(pos); - }); - }); + /** + * nextField function + * jumps to the next field + */ + FForm.prototype._nextField = function(backto, result) { + if (this.isLastStep || !this._validade() || this.isAnimating) { + return false; + } + this.isAnimating = true; + + // check if on last step + this.isLastStep = this.current === this.fieldsCount - 1 && backto === undefined ? true : false; + + // clear any previous error messages + this._clearError(); + + // current field + var currentFld = this.fields[this.current]; + + // save the navigation direction + this.navdir = backto !== undefined ? backto < this.current ? 'prev' : 'next' : 'next'; + + // update current field + this.current = backto !== undefined ? backto : this.current + 1; + + if (backto === undefined) { + // update progress bar (unless we navigate backwards) + this._progress(); + + // save farthest position so far + this.farthest = this.current; + } + + // add class "fs-display-next" or "fs-display-prev" to the list of fields + classie.add(this.fieldsList, 'fs-display-' + this.navdir); + + // remove class "fs-current" from current field and add it to the next one + // also add class "fs-show" to the next field and the class "fs-hide" to the current one + classie.remove(currentFld, 'fs-current'); + classie.add(currentFld, 'fs-hide'); + + if (!this.isLastStep) { + // update nav + this._updateNav(); + + // change the current field number/status + this._updateFieldNumber(); + + var nextField = this.fields[this.current]; + classie.add(nextField, 'fs-current'); + classie.add(nextField, 'fs-show'); + } + + // after animation ends remove added classes from fields + var self = this, + onEndAnimationFn = function(ev) { + if (support.animations) { + this.removeEventListener(animEndEventName, onEndAnimationFn); } - // jump to next field without clicking the continue button (for fields/list items with the attribute "data-input-trigger") - this.fields.forEach(function(fld) { - if (fld.hasAttribute('data-input-trigger')) { - var input = fld.querySelector('input[type="radio"]') || /*fld.querySelector( '.cs-select' ) ||*/ fld.querySelector('select'); // assuming only radio and select elements (TODO: exclude multiple selects) - if (!input) return; + classie.remove(self.fieldsList, 'fs-display-' + self.navdir); + classie.remove(currentFld, 'fs-hide'); - switch (input.tagName.toLowerCase()) { - case 'select': - input.addEventListener('change', function() { self._nextField(); }); - break; + if (self.isLastStep) { + // show the complete form and hide the controls + self._hideCtrl(self.ctrlNav); + self._hideCtrl(self.ctrlProgress); + self._hideCtrl(self.ctrlContinue); + self._hideCtrl(self.ctrlFldStatus); + // replace class fs-form-full with fs-form-overview + classie.remove(self.formEl, 'fs-form-full'); + classie.add(self.formEl, 'fs-form-overview'); + classie.add(self.formEl, 'fs-show'); + classie.add(self.formEl, 'hideElement'); - case 'input': - [].slice.call(fld.querySelectorAll('input[type="radio"]')).forEach(function(inp) { - inp.addEventListener('change', function(ev) { self._nextField(); }); - }); - break; + // Result display page + var div = document.createElement("div"); + div.setAttribute("id", "resultPage"); + div.setAttribute("class", "fs-form fs-form-overview fs-show"); - /* - // for our custom select we would do something like: - case 'div' : - [].slice.call( fld.querySelectorAll( 'ul > li' ) ).forEach( function( inp ) { - inp.addEventListener( 'click', function(ev) { self._nextField(); } ); - } ); - break; - */ - } + var ol = document.createElement('ol'); + ol.setAttribute("class", "fs-fields"); + + if (result['type'] == 'transfer') { + var fieldnames = [ { 'Type': 'Transfer' }, { 'Token name': result['tokenIdentification'] }, { 'Transfer amount': result['tokenAmount'] }, { 'Receiver\'s FLO Address': result['address'] }, {'Original FLO data': result['flodata'] }] + } else if (result['type'] == 'tokenIncorporation') { + var fieldnames = [{ 'Type': 'Incorporation' }, { 'Token name': result['tokenIdentification'] }, { 'Transfer amount': result['tokenAmount'] }, {'Original FLO data': result['flodata'] }] + } else { + var fieldnames = [{ 'Type': 'Noise' }, {'Original FLO data': result['flodata'] }] } - }); - // keyboard navigation events - jump to next field when pressing enter - document.addEventListener('keydown', function(ev) { - if (!self.isLastStep && ev.target.tagName.toLowerCase() !== 'textarea') { - var keyCode = ev.keyCode || ev.which; - if (keyCode === 13) { - ev.preventDefault(); - var flodata = document.getElementById('q1'); - var result = parse_flodata(flodata.value); - console.log(result); - self._nextField(undefined, result); - } + for (var i = 0; i < fieldnames.length; i++) { + var item = document.createElement('li'); + var label = document.createElement('label'); + label.setAttribute('class', 'fs-field-label fs-anim-upper'); + label.setAttribute('for', 'q' + i.toString()); + label.innerHTML = Object.keys(fieldnames[i])[0] + var input = document.createElement('input'); + input.setAttribute('class', 'fs-anim-lower'); + input.setAttribute("id", 'q' + i.toString()); + input.setAttribute("name", 'q' + i.toString()); + input.setAttribute("readonly", "readonly"); + input.setAttribute("type", "text"); + input.setAttribute("value", fieldnames[i][label.innerHTML]); + item.appendChild(label); + item.appendChild(input); + ol.appendChild(item); } - }); - }; - /** - * nextField function - * jumps to the next field - */ - FForm.prototype._nextField = function(backto, result) { - if (this.isLastStep || !this._validade() || this.isAnimating) { - return false; - } - this.isAnimating = true; - - // check if on last step - this.isLastStep = this.current === this.fieldsCount - 1 && backto === undefined ? true : false; - - // clear any previous error messages - this._clearError(); - - // current field - var currentFld = this.fields[this.current]; - - // save the navigation direction - this.navdir = backto !== undefined ? backto < this.current ? 'prev' : 'next' : 'next'; - - // update current field - this.current = backto !== undefined ? backto : this.current + 1; - - if (backto === undefined) { - // update progress bar (unless we navigate backwards) - this._progress(); - - // save farthest position so far - this.farthest = this.current; - } - - // add class "fs-display-next" or "fs-display-prev" to the list of fields - classie.add(this.fieldsList, 'fs-display-' + this.navdir); - - // remove class "fs-current" from current field and add it to the next one - // also add class "fs-show" to the next field and the class "fs-hide" to the current one - classie.remove(currentFld, 'fs-current'); - classie.add(currentFld, 'fs-hide'); - - if (!this.isLastStep) { - // update nav - this._updateNav(); - - // change the current field number/status - this._updateFieldNumber(); - - var nextField = this.fields[this.current]; - classie.add(nextField, 'fs-current'); - classie.add(nextField, 'fs-show'); - } - - // after animation ends remove added classes from fields - var self = this, - onEndAnimationFn = function(ev) { - if (support.animations) { - this.removeEventListener(animEndEventName, onEndAnimationFn); - } - - classie.remove(self.fieldsList, 'fs-display-' + self.navdir); - classie.remove(currentFld, 'fs-hide'); - - if (self.isLastStep) { - // show the complete form and hide the controls - self._hideCtrl(self.ctrlNav); - self._hideCtrl(self.ctrlProgress); - self._hideCtrl(self.ctrlContinue); - self._hideCtrl(self.ctrlFldStatus); - // replace class fs-form-full with fs-form-overview - classie.remove(self.formEl, 'fs-form-full'); - classie.add(self.formEl, 'fs-form-overview'); - classie.add(self.formEl, 'fs-show'); - classie.add(self.formEl, 'hideElement'); - - // Result display page - var div = document.createElement("div"); - div.setAttribute("id", "resultPage"); - div.setAttribute("class", "fs-form fs-form-overview fs-show"); - - var ol = document.createElement('ol'); - ol.setAttribute("class", "fs-fields"); - - if (result['type'] == 'transfer') { - var fieldnames = [{ 'FLO data': result['flodata'] }, { 'Type': 'Transfer' }, { 'Identification': result['tokenIdentification'] }, { 'Amount': result['tokenAmount'] }, { 'FLO Address': result['address'] }] - } else if (result['type'] == 'incorporation') { - var fieldnames = [{ 'FLO data': result['flodata'] }, { 'Type': 'Incorporation' }, { 'Identification': result['tokenIdentification'] }, { 'Amount': result['tokenAmount'] }] - } else { - var fieldnames = [{ 'FLO data': result['flodata'] }, { 'Type': 'Noise' }] - } - - for (var i = 0; i < fieldnames.length; i++) { - var item = document.createElement('li'); - var label = document.createElement('label'); - label.setAttribute('class', 'fs-field-label fs-anim-upper'); - label.setAttribute('for', 'q' + i.toString()); - label.innerHTML = Object.keys(fieldnames[i])[0] - var input = document.createElement('input'); - input.setAttribute('class', 'fs-anim-lower'); - input.setAttribute("id", 'q' + i.toString()); - input.setAttribute("name", 'q' + i.toString()); - input.setAttribute("readonly", "readonly"); - input.setAttribute("type", "text"); - input.setAttribute("value", fieldnames[i][label.innerHTML]); - item.appendChild(label); - item.appendChild(input); - ol.appendChild(item); - } - - var returnButton = document.createElement('button'); - returnButton.setAttribute('class', 'fs-submit'); - returnButton.setAttribute('type', 'submit'); - returnButton.innerHTML = 'Go Back'; - returnButton.onclick = function() { - location.href = "index.html"; - }; - - div.appendChild(ol); - div.appendChild(returnButton); - var formElement = document.getElementById('myform'); - formElement.insertAdjacentElement('afterend', div); - - // callback - self.options.onReview(); - } else { - classie.remove(nextField, 'fs-show'); - - if (self.options.ctrlNavPosition) { - self.ctrlFldStatusCurr.innerHTML = self.ctrlFldStatusNew.innerHTML; - self.ctrlFldStatus.removeChild(self.ctrlFldStatusNew); - classie.remove(self.ctrlFldStatus, 'fs-show-' + self.navdir); - } - } - self.isAnimating = false; + var returnButton = document.createElement('button'); + returnButton.setAttribute('class', 'fs-submit'); + returnButton.setAttribute('type', 'submit'); + returnButton.innerHTML = 'Go Back'; + returnButton.onclick = function() { + location.href = "index.html"; }; - if (support.animations) { - if (this.navdir === 'next') { - if (this.isLastStep) { - currentFld.querySelector('.fs-anim-upper').addEventListener(animEndEventName, onEndAnimationFn); - } else { - nextField.querySelector('.fs-anim-lower').addEventListener(animEndEventName, onEndAnimationFn); - } - } else { - nextField.querySelector('.fs-anim-upper').addEventListener(animEndEventName, onEndAnimationFn); - } + div.appendChild(ol); + div.appendChild(returnButton); + var formElement = document.getElementById('myform'); + formElement.insertAdjacentElement('afterend', div); + + // callback + self.options.onReview(); } else { - onEndAnimationFn(); + classie.remove(nextField, 'fs-show'); + + if (self.options.ctrlNavPosition) { + self.ctrlFldStatusCurr.innerHTML = self.ctrlFldStatusNew.innerHTML; + self.ctrlFldStatus.removeChild(self.ctrlFldStatusNew); + classie.remove(self.ctrlFldStatus, 'fs-show-' + self.navdir); + } } - } + self.isAnimating = false; + }; - /** - * showField function - * jumps to the field at position pos - */ - FForm.prototype._showField = function(pos) { - if (pos === this.current || pos < 0 || pos > this.fieldsCount - 1) { - return false; + if (support.animations) { + if (this.navdir === 'next') { + if (this.isLastStep) { + currentFld.querySelector('.fs-anim-upper').addEventListener(animEndEventName, onEndAnimationFn); + } else { + nextField.querySelector('.fs-anim-lower').addEventListener(animEndEventName, onEndAnimationFn); } - this._nextField(pos); + } else { + nextField.querySelector('.fs-anim-upper').addEventListener(animEndEventName, onEndAnimationFn); } + } else { + onEndAnimationFn(); + } + } - /** - * updateFieldNumber function - * changes the current field number - */ - FForm.prototype._updateFieldNumber = function() { - if (this.options.ctrlNavPosition) { - // first, create next field number placeholder - this.ctrlFldStatusNew = document.createElement('span'); - this.ctrlFldStatusNew.className = 'fs-number-new'; - this.ctrlFldStatusNew.innerHTML = Number(this.current + 1); + /** + * showField function + * jumps to the field at position pos + */ + FForm.prototype._showField = function(pos) { + if (pos === this.current || pos < 0 || pos > this.fieldsCount - 1) { + return false; + } + this._nextField(pos); + } - // insert it in the DOM - this.ctrlFldStatus.appendChild(this.ctrlFldStatusNew); + /** + * updateFieldNumber function + * changes the current field number + */ + FForm.prototype._updateFieldNumber = function() { + if (this.options.ctrlNavPosition) { + // first, create next field number placeholder + this.ctrlFldStatusNew = document.createElement('span'); + this.ctrlFldStatusNew.className = 'fs-number-new'; + this.ctrlFldStatusNew.innerHTML = Number(this.current + 1); - // add class "fs-show-next" or "fs-show-prev" depending on the navigation direction - var self = this; - setTimeout(function() { - classie.add(self.ctrlFldStatus, self.navdir === 'next' ? 'fs-show-next' : 'fs-show-prev'); - }, 25); - } - } + // insert it in the DOM + this.ctrlFldStatus.appendChild(this.ctrlFldStatusNew); - /** - * progress function - * updates the progress bar by setting its width - */ - FForm.prototype._progress = function() { - if (this.options.ctrlProgress) { - this.ctrlProgress.style.width = this.current * (100 / this.fieldsCount) + '%'; - } - } + // add class "fs-show-next" or "fs-show-prev" depending on the navigation direction + var self = this; + setTimeout(function() { + classie.add(self.ctrlFldStatus, self.navdir === 'next' ? 'fs-show-next' : 'fs-show-prev'); + }, 25); + } + } - /** - * updateNav function - * updates the navigation dots - */ - FForm.prototype._updateNav = function() { - if (this.options.ctrlNavDots) { - classie.remove(this.ctrlNav.querySelector('button.fs-dot-current'), 'fs-dot-current'); - classie.add(this.ctrlNavDots[this.current], 'fs-dot-current'); - this.ctrlNavDots[this.current].disabled = false; - } - } + /** + * progress function + * updates the progress bar by setting its width + */ + FForm.prototype._progress = function() { + if (this.options.ctrlProgress) { + this.ctrlProgress.style.width = this.current * (100 / this.fieldsCount) + '%'; + } + } - /** - * showCtrl function - * shows a control - */ - FForm.prototype._showCtrl = function(ctrl) { - classie.add(ctrl, 'fs-show'); - } + /** + * updateNav function + * updates the navigation dots + */ + FForm.prototype._updateNav = function() { + if (this.options.ctrlNavDots) { + classie.remove(this.ctrlNav.querySelector('button.fs-dot-current'), 'fs-dot-current'); + classie.add(this.ctrlNavDots[this.current], 'fs-dot-current'); + this.ctrlNavDots[this.current].disabled = false; + } + } - /** - * hideCtrl function - * hides a control - */ - FForm.prototype._hideCtrl = function(ctrl) { - classie.remove(ctrl, 'fs-show'); - } + /** + * showCtrl function + * shows a control + */ + FForm.prototype._showCtrl = function(ctrl) { + classie.add(ctrl, 'fs-show'); + } - // TODO: this is a very basic validation function. Only checks for required fields.. - FForm.prototype._validade = function() { - var fld = this.fields[this.current], - input = fld.querySelector('input[required]') || fld.querySelector('textarea[required]') || fld.querySelector('select[required]'), - error; + /** + * hideCtrl function + * hides a control + */ + FForm.prototype._hideCtrl = function(ctrl) { + classie.remove(ctrl, 'fs-show'); + } - if (!input) return true; + // TODO: this is a very basic validation function. Only checks for required fields.. + FForm.prototype._validade = function() { + var fld = this.fields[this.current], + input = fld.querySelector('input[required]') || fld.querySelector('textarea[required]') || fld.querySelector('select[required]'), + error; - switch (input.tagName.toLowerCase()) { - case 'input': - if (input.type === 'radio' || input.type === 'checkbox') { - var checked = 0; - [].slice.call(fld.querySelectorAll('input[type="' + input.type + '"]')).forEach(function(inp) { - if (inp.checked) { - ++checked; - } - }); - if (!checked) { - error = 'NOVAL'; - } - } else if (input.value === '') { - error = 'NOVAL'; + if (!input) return true; + + switch (input.tagName.toLowerCase()) { + case 'input': + if (input.type === 'radio' || input.type === 'checkbox') { + var checked = 0; + [].slice.call(fld.querySelectorAll('input[type="' + input.type + '"]')).forEach(function(inp) { + if (inp.checked) { + ++checked; } - break; - - case 'select': - // assuming here '' or '-1' only - if (input.value === '' || input.value === '-1') { - error = 'NOVAL'; - } - break; - - case 'textarea': - if (input.value === '') { - error = 'NOVAL'; - } - break; + }); + if (!checked) { + error = 'NOVAL'; + } + } else if (input.value === '') { + error = 'NOVAL'; } + break; - if (error != undefined) { - this._showError(error); - return false; + case 'select': + // assuming here '' or '-1' only + if (input.value === '' || input.value === '-1') { + error = 'NOVAL'; } + break; - return true; - } + case 'textarea': + if (input.value === '') { + error = 'NOVAL'; + } + break; + } - // TODO - FForm.prototype._showError = function(err) { - var message = ''; - switch (err) { - case 'NOVAL': - message = 'Please fill the field before continuing'; - break; - case 'INVALIDEMAIL': - message = 'Please fill a valid email address'; - break; - // ... - }; - this.msgError.innerHTML = message; - this._showCtrl(this.msgError); - } + if (error != undefined) { + this._showError(error); + return false; + } - // clears/hides the current error message - FForm.prototype._clearError = function() { - this._hideCtrl(this.msgError); - } + return true; + } - // add to global namespace - window.FForm = FForm; + // TODO + FForm.prototype._showError = function(err) { + var message = ''; + switch (err) { + case 'NOVAL': + message = 'Please fill the field before continuing'; + break; + case 'INVALIDEMAIL': + message = 'Please fill a valid email address'; + break; + // ... + }; + this.msgError.innerHTML = message; + this._showCtrl(this.msgError); + } + + // clears/hides the current error message + FForm.prototype._clearError = function() { + this._hideCtrl(this.msgError); + } + + // add to global namespace + window.FForm = FForm; - })(window); \ No newline at end of file +})(window); diff --git a/js/modernizr1.custom.js b/js/modernizr1.custom.js new file mode 100644 index 0000000..f348fee --- /dev/null +++ b/js/modernizr1.custom.js @@ -0,0 +1,4 @@ +/* Modernizr 2.8.1 (Custom Build) | MIT & BSD + * Build: http://modernizr.com/download/#-csstransitions-shiv-cssclasses-prefixed-testprop-testallprops-domprefixes-load + */ +;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a){var e=a[d];if(!A(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.8.0",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(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=t.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(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.csstransitions=function(){return D("transition")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)w(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},x(""),i=k=null,function(a,b){function l(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 m(){var a=s.elements;return typeof a=="string"?a.split(" "):a}function n(a){var b=j[a[h]];return b||(b={},i++,a[h]=i,j[i]=b),b}function o(a,c,d){c||(c=b);if(k)return c.createElement(a);d||(d=n(c));var g;return d.cache[a]?g=d.cache[a].cloneNode():f.test(a)?g=(d.cache[a]=d.createElem(a)).cloneNode():g=d.createElem(a),g.canHaveChildren&&!e.test(a)&&!g.tagUrn?d.frag.appendChild(g):g}function p(a,c){a||(a=b);if(k)return a.createDocumentFragment();c=c||n(a);var d=c.frag.cloneNode(),e=0,f=m(),g=f.length;for(;e",g="hidden"in a,k=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){g=!0,k=!0}})();var s={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:c,shivCSS:d.shivCSS!==!1,supportsUnknownElements:k,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:r,createElement:o,createDocumentFragment:p};a.html5=s,r(b)}(this,b),e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,e.prefixed=function(a,b,c){return b?D(a,b,c):D(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.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 - - Testing css priority - - - -

- From now on I am not going to be in denial of my feelings. -

- - \ No newline at end of file diff --git a/test-js.html b/test-js.html deleted file mode 100644 index 3e49f21..0000000 --- a/test-js.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - Fullscreen Form Interface - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/test.html b/test.html index 922cc66..6aa3c9d 100644 --- a/test.html +++ b/test.html @@ -1,107 +1,206 @@ - - - - - Fullscreen Form Interface - - - - - - - - - - - - -
- + + + + + FLOdata tester + + + + + + + + + + + + + + + + + + -
-
    -
  1. - - -
    2. -
  2. - - -
    3. -
  3. - - -
    4. -
  4. - - -
    5. -
- -
+ +
+ +
+ +
+
+
+ Close the overlay +

What is token tester

+

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

+

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.

+

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

+

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.

+

Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.

+

Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.

+
+
+
+
+
+ + + + - - - + + - - \ No newline at end of file + function noScroll() { + window.removeEventListener('scroll', scrollHandler); + window.addEventListener('scroll', noScrollFn); + } + + function scrollFn() { + window.addEventListener('scroll', scrollHandler); + } + + function canScroll() { + window.removeEventListener('scroll', noScrollFn); + scrollFn(); + } + + function scrollHandler() { + if (!didScroll) { + didScroll = true; + setTimeout(function() { scrollPage(); }, 60); + } + }; + + function scrollPage() { + scrollPosition = { x: window.pageXOffset || docElem.scrollLeft, y: window.pageYOffset || docElem.scrollTop }; + didScroll = false; + }; + + scrollFn(); + + var el = document.querySelector('.morph-button'); + + new UIMorphingButton(el, { + closeEl: '.icon-close', + onBeforeOpen: function() { + // don't allow to scroll + noScroll(); + }, + onAfterOpen: function() { + // can scroll again + canScroll(); + // add class "noscroll" to body + classie.addClass(document.body, 'noscroll'); + // add scroll class to main el + classie.addClass(el, 'scroll'); + }, + onBeforeClose: function() { + // remove class "noscroll" to body + classie.removeClass(document.body, 'noscroll'); + // remove scroll class from main el + classie.removeClass(el, 'scroll'); + // don't allow to scroll + noScroll(); + }, + onAfterClose: function() { + // can scroll again + canScroll(); + } + }); + })(); + + + + +