-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
170 changed files
with
763 additions
and
463 deletions.
There are no files selected for viewing
59 changes: 59 additions & 0 deletions
59
_prototypes/individual-response--your-household-v15/assets/modules/character-check.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| const inputClassLimitReached = 'input--limit-reached'; | ||
| const remainingClassLimitReached = 'input__limit--reached'; | ||
| const attrCharCheckRef = 'data-char-check-ref'; | ||
| const attrCharCheckVal = 'data-char-check-num'; | ||
|
|
||
| class CharCheck { | ||
| constructor(context) { | ||
| this.context = context; | ||
| this.input = this.context.querySelector('input'); | ||
| this.checkElement = document.getElementById(this.input.getAttribute(attrCharCheckRef)); | ||
| this.checkVal = this.input.getAttribute(attrCharCheckVal); | ||
|
|
||
| this.charLimitSingularMessage = this.checkElement.getAttribute('data-charcount-limit-singular'); | ||
| this.charLimitPluralMessage = this.checkElement.getAttribute('data-charcount-limit-plural'); | ||
|
|
||
| this.updateCheckReadout(null, true); | ||
| this.input.addEventListener('input', this.updateCheckReadout.bind(this)); | ||
| } | ||
|
|
||
| updateCheckReadout(event, firstRun) { | ||
| const value = this.input.value; | ||
| const remaining = this.checkVal - value.length; | ||
| // Prevent aria live announcement when component initialises | ||
| if (!firstRun && event.inputType) { | ||
| this.checkElement.setAttribute('aria-live', 'polite'); | ||
| } else { | ||
| this.checkElement.removeAttribute('aria-live'); | ||
| } | ||
|
|
||
| this.checkRemaining(remaining); | ||
| this.setCheckClass(remaining, this.input, inputClassLimitReached); | ||
| this.setCheckClass(remaining, this.checkElement, remainingClassLimitReached); | ||
| } | ||
|
|
||
| checkRemaining(remaining) { | ||
| let message; | ||
| if (remaining === -1) { | ||
| message = this.charLimitSingularMessage; | ||
| this.checkElement.innerText = message.replace('{x}', Math.abs(remaining)); | ||
| } else if (remaining < -1) { | ||
| message = this.charLimitPluralMessage; | ||
| this.checkElement.innerText = message.replace('{x}', Math.abs(remaining)); | ||
| } | ||
| this.setShowMessage(remaining); | ||
| } | ||
|
|
||
| setShowMessage(remaining) { | ||
| this.checkElement.classList[remaining < 0 ? 'remove' : 'add']('u-d-no'); | ||
| } | ||
|
|
||
| setCheckClass(remaining, element, setClass) { | ||
| element.classList[remaining < 0 ? 'add' : 'remove'](setClass); | ||
| } | ||
| } | ||
|
|
||
| const checkedWrapper = [...document.querySelectorAll('.js-char-check')]; | ||
| if (checkedWrapper.length) { | ||
| checkedWrapper.forEach(input => new CharCheck(input)); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
116 changes: 116 additions & 0 deletions
116
_prototypes/individual-response--your-household-v15/complete copy.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| --- | ||
| title: IR - Household prototype v15 | ||
| project: Individual Response | ||
| globalcss: false | ||
| layout: eq-default-extras | ||
| assetPrefixUrl: https://sdc-global-design-patterns.netlify.com | ||
| hideSaveLater: true | ||
| --- | ||
|
|
||
| <style type="text/css"> | ||
|
|
||
| .page_line { | ||
| margin-top: 0.5em; | ||
| border: 0.02em solid #999; | ||
| width: 100%; | ||
| margin-bottom: 1.6em; | ||
| } | ||
|
|
||
| .title { | ||
| font-size: 1.5em; | ||
| font-weight: bold; | ||
| margin-bottom: 1em; | ||
| } | ||
|
|
||
| .person-count { | ||
| font-size: 3em; | ||
| font-weight: bold; | ||
| margin-bottom: -0.2em; | ||
| margin-top: -0.3em; | ||
| } | ||
|
|
||
| .smalltext { | ||
| font-size: 0.4em; | ||
| font-weight: normal; | ||
| margin-left: -0.2em; | ||
| } | ||
|
|
||
| .tick-spacing { | ||
| margin-left: 1.3em; | ||
| margin-bottom: 0.8em; | ||
| } | ||
|
|
||
| </style> | ||
| <div id="fb-root"></div> | ||
| <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v5.0"></script> | ||
| <link rel="stylesheet" href="../style.css"/> | ||
| <div class="page__subheader"> | ||
| <div class="container"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="page__container container"> | ||
| <div class="grid grid--reverse"> | ||
| <div class="grid__col col-4@m"> | ||
| </div> | ||
| <div class="grid__col col-8@m"> | ||
| <main role="main" id="main" class="page__main"> | ||
| <div class="panel panel--simple panel--success u-mb-m"> | ||
| <div class="panel__body"> | ||
| <h1 class="u-mb-xs"> | ||
| Your census has been submitted | ||
| </h1> | ||
| <p>Thank you for completing the census. | ||
| We have received your answers and you do not need to do anything else.</p> | ||
| <h2 class="u-fs-r--b u-mb-no">Your confirmation number</h2> | ||
| <code class="u-fs-xl">1098 5379 24</code> | ||
| </div> | ||
| </div> | ||
| <p class="lock u-mb-l">Your personal information is protected by law and will be kept confidential.</p> | ||
| <h2>Send this confirmation to an email address</h2> | ||
| <p>If you would like confirmation of your completed census please provide a valid email address.</p> | ||
| <form action="../complete--confirmation-sent/"> | ||
| <div class="field"> | ||
| <label class="label" for="email-address"> | ||
| Email address | ||
| </label> | ||
| <input autocomplete="new-password" class="input input--text js-email-address" | ||
| id="email-address" | ||
| value="" /> | ||
| </div> | ||
| <button type="submit" class="btn btn--small u-mb-l u-mt-s qa-btn-submit"> | ||
| <span class="btn__inner">Send confirmation</span> | ||
| </button> | ||
| </form> | ||
| <hr class="u-mb-m u-mt-m"> | ||
| <h2 class="u-fs-m u-mb-xs">Share</h2> | ||
| <p class="u-mb-xs">Let others know you've completed the census</p> | ||
|
|
||
| <div class="share-buttons"> | ||
| <div class="fb-share-button u-mt-no u-pt-no u-mr-s u-fl" data-href="https://census.gov.uk/about-the-census/about-census-2021/" data-layout="button" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fcensus.gov.uk%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div> | ||
| <div style="display:inline-block; margin-top:.4rem; margin-right:1rem;"> | ||
| <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="I've just completed my Census 2021 questionnaire! Start yours at:" data-url="https://census.gov.uk/" data-hashtags="census2021" data-dnt="true" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script src='/js/compiled/individual-response--your-household-v15/bundle.js'></script> | ||
|
|
||
| <script> | ||
| $('.qa-btn-submit').on('click', function (e) { | ||
| e.preventDefault(); | ||
| if( !validateEmail($('#email-address').val()) || !$('#email-address').val()) { | ||
| window.location.href = '../complete--confirmation-email-failed/?email=' + encodeURI($('#email-address').val()); | ||
| } else { | ||
| window.location.href = '../complete--confirmation-sent/?email=' + encodeURI($('#email-address').val()); | ||
| } | ||
| }); | ||
|
|
||
| function validateEmail($email) { | ||
| var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; | ||
| return emailReg.test( $email ); | ||
| } | ||
| </script> |
134 changes: 134 additions & 0 deletions
134
_prototypes/individual-response--your-household-v15/complete--confirmation-resend.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| --- | ||
| title: IR - Household prototype v15 | ||
| project: Individual Response | ||
| globalcss: false | ||
| layout: eq-default-extras | ||
| assetPrefixUrl: https://sdc-global-design-patterns.netlify.com | ||
| hideSaveLater: true | ||
| --- | ||
|
|
||
| <style type="text/css"> | ||
|
|
||
| .page_line { | ||
| margin-top: 0.5em; | ||
| border: 0.02em solid #999; | ||
| width: 100%; | ||
| margin-bottom: 1.6em; | ||
| } | ||
|
|
||
| .title { | ||
| font-size: 1.5em; | ||
| font-weight: bold; | ||
| margin-bottom: 1em; | ||
| } | ||
|
|
||
| .person-count { | ||
| font-size: 3em; | ||
| font-weight: bold; | ||
| margin-bottom: -0.2em; | ||
| margin-top: -0.3em; | ||
| } | ||
|
|
||
| .smalltext { | ||
| font-size: 0.4em; | ||
| font-weight: normal; | ||
| margin-left: -0.2em; | ||
| } | ||
|
|
||
| .tick-spacing { | ||
| margin-left: 1.3em; | ||
| margin-bottom: 0.8em; | ||
| } | ||
|
|
||
| </style> | ||
| <div id="fb-root"></div> | ||
| <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v5.0"></script> | ||
| <link rel="stylesheet" href="../style.css"/> | ||
| <div class="page__subheader"> | ||
| <div class="container"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="page__container container"> | ||
| <div class="grid grid--reverse"> | ||
| <div class="grid__col col-4@m"> | ||
| </div> | ||
| <div class="grid__col col-8@m"> | ||
| <main role="main" id="main" class="page__main"> | ||
| <div class="panel panel--error js-error-box u-mb-m u-d-no"> | ||
| <div class="panel__header"> | ||
| <div class="panel__title u-fs-r--b">This page has an error</div> | ||
| </div> | ||
| <div class="panel__body"> | ||
| <p class="u-fs-r">This must be corrected to continue</p> | ||
| <ul class="list list--bare"> | ||
| <li class="list__item u-fs-r"> | ||
| 1. <a class="js-inpagelink" href="#panel-error">Enter a valid email address, such as [email protected]</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| <h2>Send another confirmation email</h2> | ||
|
|
||
| <form action="../complete--confirmation-sent/"> | ||
| <div id="email-field" class="field"> | ||
| <label class="label" for="email-address"> | ||
| Email address | ||
| </label> | ||
| <input autocomplete="new-password" class="input input--text js-email-address" | ||
| id="email-address" | ||
| value="" /> | ||
| </div> | ||
| <button type="submit" class="btn btn--small u-mb-l u-mt-s qa-btn-submit"> | ||
| <span class="btn__inner">Send confirmation</span> | ||
| </button> | ||
| </form> | ||
| <!-- | ||
| <hr class="u-mb-m u-mt-m"> | ||
| <h2 class="u-fs-m u-mb-xs">Share</h2> | ||
| <p class="u-mb-xs">Let others know you've completed the census</p> | ||
| <div class="share-buttons"> | ||
| <div class="fb-share-button u-mt-no u-pt-no u-mr-s u-fl" data-href="https://census.gov.uk/about-the-census/about-census-2021/" data-layout="button" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fcensus.gov.uk%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div> | ||
| <div style="display:inline-block; margin-top:.4rem; margin-right:1rem;"> | ||
| <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="I've just completed my Census 2021 questionnaire! Start yours at:" data-url="https://census.gov.uk/" data-hashtags="census2021" data-dnt="true" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> | ||
| </div> | ||
| </div> | ||
| --> | ||
| </main> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script src='/js/compiled/individual-response--your-household-v15/bundle.js'></script> | ||
|
|
||
| <script> | ||
| var queryString = window.location.search; | ||
| var searchParams = new URLSearchParams(queryString); | ||
|
|
||
|
|
||
| $('.qa-btn-submit').on('click', function (e) { | ||
| e.preventDefault(); | ||
| if( !validateEmail($('#email-address').val()) || !$('#email-address').val()) { | ||
| window.location.href = '../complete--confirmation-resend/?invalid=true'; | ||
| } else { | ||
| window.location.href = '../complete--confirmation-sent/?email=' + encodeURI($('#email-address').val()); | ||
| } | ||
| }); | ||
|
|
||
| function validateEmail($email) { | ||
| var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; | ||
| return emailReg.test( $email ); | ||
| } | ||
|
|
||
| function checkErrors() { | ||
| if(searchParams.get('invalid')) { | ||
| let param = searchParams.get('true'); | ||
| $('.js-error-box').removeClass('u-d-no'); | ||
| $('#email-field').wrap( '<div class="panel panel--simple panel--error"><div class="panel__body"></div></div>' ); | ||
| $('#email-field').before('<p id="panel-error" class="panel__error u-fs-r--b">Enter a valid email address, such as [email protected]</p>'); | ||
| }; | ||
| } | ||
|
|
||
| $(checkErrors); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.