+ Checklist examples
+
+ Example 1
+ To qualify, you must meet all of the following conditions: (checklist, large box)
+
+ -
+
+ You have lost or will lose your employment or self-employment income for at least half of the 4-week period for which you are applying
+
+
+ -
+
+ You are a resident of Canada
+
+
+ -
+
+ You are 15 years of age or older when you apply
+
+
+ -
+
+ You are eligible and ready to proceed
+
+
+
+
+
+ Example 2
+ To qualify, you must meet all of the following conditions: (checklist, small box)
+
+ -
+
+ You have lost or will lose your employment or self-employment income for at least half of the 4-week period for which you are applying
+
+
+ -
+
+ You are a resident of Canada
+
+
+ -
+
+ You are 15 years of age or older when you apply
+
+
+
+
+ You are eligible and ready to proceed
+
+
+
+ Example 3
+ To qualify, you must meet all of the following conditions: (checklist + label, small box)
+
+ -
+
+ You have lost or will lose your employment or self-employment income for at least half of the 4-week period for which you are applying
+
+
+ -
+
+ You are a resident of Canada
+
+
+ -
+
+ You are 15 years of age or older when you apply
+
+
+
+
+
+ Example 4
+
+
+
+ Example 5
+
+
+
+ Example 6
+
+
+
+ Example 7
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/working-on/checklist/wb-checklist.js b/working-on/checklist/wb-checklist.js
new file mode 100644
index 000000000..0bb3a9a10
--- /dev/null
+++ b/working-on/checklist/wb-checklist.js
@@ -0,0 +1,101 @@
+/**
+ * @title WET-BOEW Checklist plugin
+ * @overview Plugin contained to show an example of a custom WET checklist plugin
+ * @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
+ * @author @delisma
+ */
+( function( $, window, wb ) {
+ "use strict";
+ /*
+ * Variable and function definitions.
+ * These are global to the plugin - meaning that they will be initialized once per page,
+ * not once per instance of plugin on the page. So, this is a good place to define
+ * variables that are common to all instances of the plugin on a page.
+ */
+ var componentName = "wb-checklist",
+ selector = "." + componentName,
+ initEvent = "wb-init" + selector,
+ $document = wb.doc,
+ defaults = {
+ toggle: {
+ stateOn: true,
+ stateOff: false
+ },
+ },
+
+ /**
+ * @method init
+ * @param {jQuery Event} event Event that triggered the function call
+ */
+ init = function( event ) {
+ var elm = wb.init( event, componentName, selector ),
+ $elm,
+ settings;
+
+ if ( elm ) {
+ $elm = $( elm );
+ settings = $.extend(
+ true,
+ {},
+ defaults,
+ window[ componentName ],
+ wb.getData( $elm.find( $( ".group_checkbox" ) ) )
+ );
+
+ var $elms = $elm.find( $( "[role='checkbox']" ) );
+
+ for ( let i = 0; i < $elms.length; i++ ) {
+ this.domNode = $elms.get( i );
+ this.domNode.tabIndex = 0;
+ if ( !$( this.domNode ).attr( "aria-checked" ) ) {
+ $( this.domNode ).attr( "aria-checked", "false" );
+ }
+ }
+ }
+
+ $elm.trigger( "click" );
+ $elm.trigger( "keydown" );
+
+ wb.ready( $elm, componentName );
+ };
+ // Add your plugin event handler
+ $document.on( "click", selector, function( event ) {
+ var elm = event.target,
+ $elm = $( elm );
+ if( $elm.attr( "aria-checked" ) === "true" ) {
+ $elm.attr( "aria-checked", "false" );
+ } else {
+ $elm.attr( "aria-checked", "true" );
+ }
+ } );
+
+ $document.on( "keydown", selector, function( event ) {
+ var elm = event.target,
+ which = event.which,
+ $elm = $( elm ),
+ flag = false;
+ switch ( which ) {
+ case 32:
+ case 13:
+ if( $elm.attr( "aria-checked" ) === "true" ) {
+ $elm.attr( "aria-checked", "false" );
+ } else {
+ $elm.attr( "aria-checked", "true" );
+ }
+ flag = true;
+ break;
+
+ default:
+ break;
+ }
+
+ if ( flag ) {
+ event.stopPropagation();
+ event.preventDefault();
+ }
+ });
+ // Bind the init event of the plugin
+ $document.on( "timerpoke.wb " + initEvent, selector, init );
+ // Add the timer poke to initialize the plugin
+ wb.add( selector );
+ } )( jQuery, window, wb );
\ No newline at end of file