<form class="js-auto-save" action="action.php" method="POST">
<div class="form-heading">
<h3>What type of Coversheet would you like to create?</h3>
<h4>Chief Investigator</h4>
</div>
<!-- data table ("excel style") -->
<div class="form-group -full-width">
<div class="form-field">
<label>Spreadsheet</label>
<table class="spreadsheet">
<tr class="table-header table-row">
<th class="table-cell ">
<span class="text">Description</span>
</th>
<th class="table-cell -align-right">
<span class="text">Year 1</span>
<span class="unit">$</span>
</th>
<th class="table-cell -align-right">
<span class="text">Year 2</span>
<span class="unit">$</span>
</th>
<th class="table-cell -align-right">
<span class="text">Year 3</span>
<span class="unit">$</span>
</th>
<th class="table-cell -align-right">
<span class="text">Year 4</span>
<span class="unit">$</span>
</th>
<th class="table-cell -align-right">
<span class="text">Year 5</span>
<span class="unit">$</span>
</th>
<th class="table-cell -align-right">
<span class="text">Total</span>
<span class="unit">$</span>
</th>
</tr>
<tr class="table-row">
<td class="table-cell ">
<input aria-label="Description for row 1" value="Grant ABC">
</td>
<td class="table-cell -align-right">
<input aria-label="Year 1 for row 1" value="99999999.99">
</td>
<td class="table-cell -align-right">
<input aria-label="Year 2 for row 1" value="99999999.99">
</td>
<td class="table-cell -align-right">
<input aria-label="Year 3 for row 1" value="99999999.99">
</td>
<td class="table-cell -align-right">
<input aria-label="Year 4 for row 1" value="99999999.99">
</td>
<td class="table-cell -align-right">
<input aria-label="Year 5 for row 1" value="99999999.99">
</td>
<td class="table-cell -align-right">
<input aria-label="Total for row 1" value="99999999.99">
</td>
</tr>
</table>
</div>
</div>
<!-- basic fields -->
<div class="form-group">
<div class="form-field">
<label for="chrFieldName">Basic field</label>
<input type="text" name="chrFieldName">
</div>
</div>
<div class="form-group">
<div class="form-field">
<label for="chrFieldName">Text area</label>
<textarea name="chrText" rows="6"></textarea>
</div>
</div>
<!-- use data-col (max 12) on form-group and data-flex on form-field to adjust width of field -->
<div class="form-group" data-col="2">
<div class="form-field" data-flex="1">
<label for="chrFieldName">Short field</label>
<input type="text" name="chrFieldName">
</div>
</div>
<!-- valid field -->
<div class="form-group">
<div class="form-field -valid">
<label for="chrValid">Valid field</label>
<input type="text" name="chrValid">
</div>
</div>
<!-- invalid field -->
<div class="form-group">
<div class="form-field -invalid">
<label for="chrInvalid">
<span class="message">Please follow the rules</span>
<span>Invalid field<span>
</label>
<input type="text" name="chrInvalid">
</div>
</div>
<!-- dropdown -->
<div class="form-group">
<div class="form-field">
<label for="chrFormType">Dropdown</label>
<div type="button" class="btn dropdown js-dropdown " data-role="form" role="menu" tabindex="0" aria-haspopup="true" aria-label="">
<div class="dropdown-label">
<label class="-hidden" for="chrFormType"></label>
<input type="hidden" name="chrFormType" value="Amend an application">
<span class="text">Amend an application</span>
</div>
<ul class="dropdown-options" aria-hidden="true">
<li class="dropdown-item" data-value="Amend an application" role="menuitem">Amend an application</li>
<li class="dropdown-item" data-value="Start an application" role="menuitem">Start an application</li>
</ul>
</div>
</div>
</div>
<!-- use data-col (max 12) on form-group and data-flex on form-field to place inputs side-by-side -->
<div class="form-group" data-col="8">
<div class="form-field" data-flex="5">
<label for="chrFormType">Dropdown</label>
<div type="button" class="btn dropdown js-dropdown " data-role="form" role="menu" tabindex="0" aria-haspopup="true" aria-label="">
<div class="dropdown-label">
<label class="-hidden" for="chrFormType"></label>
<input type="hidden" name="chrFormType" value="Amend an application">
<span class="text">Amend an application</span>
</div>
<ul class="dropdown-options" aria-hidden="true">
<li class="dropdown-item" data-value="Amend an application" role="menuitem">Amend an application</li>
<li class="dropdown-item" data-value="Start an application" role="menuitem">Start an application</li>
</ul>
</div>
</div>
<div class="form-field" data-flex="3">
<label for="chrFormType">Dropdown</label>
<div type="button" class="btn dropdown js-dropdown " data-role="form" role="menu" tabindex="0" aria-haspopup="true" aria-label="">
<div class="dropdown-label">
<label class="-hidden" for="chrFormType"></label>
<input type="hidden" name="chrFormType" value="Amend an application">
<span class="text">Amend an application</span>
</div>
<ul class="dropdown-options" aria-hidden="true">
<li class="dropdown-item" data-value="Amend an application" role="menuitem">Amend an application</li>
<li class="dropdown-item" data-value="Start an application" role="menuitem">Start an application</li>
</ul>
</div>
</div>
</div>
<div class="form-subheading">
<h4>Form subheading</h4>
</div>
<!-- advanced lookup -->
<div class="form-group">
<div class="form-field search-box" data-name="chrProject" data-advanced="people" data-advanced-crit="Surname" data-return="chrStaffNumber" data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [ { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" } ] }]'
data-actions='[ { "name": "details", "icon": "details" }]'>
<label for="chrProject">Advanced Lookup</label>
<div class="input-group">
<input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="…" data-modal="advanced-search">
<ul class="search-tags"></ul>
<div class="search-advanced">
<button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
<span class="fa fa-search"></span>
<span class="link link-strong">Lookup</span>
</button>
</div>
</div>
</div>
</div>
<!-- advanced lookup with createMyRecord action -->
<div class="form-group">
<div class="form-field search-box" data-name="chrNewRecord" data-advanced="people" data-advanced-crit="Surname" data-parent="parentIDxyz" data-module="grants" data-return="chrStaffNumber" data-row-class="js-create-record" data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [ { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" } ] }]'
data-actions='[ { "name": "details", "icon": "details" }]'>
<label for="chrProject">Advanced Lookup (CreateMyRecord)</label>
<div class="input-group">
<input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="…" data-modal="advanced-search">
<ul class="search-tags"></ul>
<div class="search-advanced">
<button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
<span class="fa fa-search"></span>
<span class="link link-strong">Lookup</span>
</button>
</div>
</div>
</div>
</div>
<!-- advanced lookup with createMyRecord action -->
<div class="form-group">
<div class="form-field search-box" data-name="chrNewRecord" data-advanced="people" data-advanced-crit="Surname" data-parent="parentIDxyz" data-create="2309849" data-module="grants" data-return="chrStaffNumber" data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [ { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" } ] }]'
data-actions='[ { "name": "details", "icon": "details" }]'>
<label for="chrProject">Advanced Lookup (Create New Record)</label>
<div class="input-group">
<input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="…" data-modal="advanced-search">
<ul class="search-tags"></ul>
<div class="search-advanced">
<button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
<span class="fa fa-search"></span>
<span class="link link-strong">Lookup</span>
</button>
</div>
</div>
</div>
</div>
<!-- date picker -->
<div class="form-group">
<div class="form-field date-field">
<label>Start Date</label>
<div class="input-group date-input-container">
<input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY" data-initial-value="03/04/1990">
<!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
<input type="text" name="chrDate" hidden>
<button type="button" class="btn btn-date-picker js-date-picker"></button>
</div>
</div>
</div>
<!-- two date fields of equal width -->
<div class="form-group" data-col="2">
<div class="form-field date-field" data-flex="1">
<label>Start Date</label>
<div class="input-group date-input-container">
<input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY">
<!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
<input type="text" name="chrStartDate" hidden>
<button type="button" class="btn btn-date-picker js-date-picker"></button>
</div>
</div>
<div class="form-field date-field" data-flex="1">
<label>End Date</label>
<div class="input-group date-input-container">
<input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY">
<!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
<input type="text" name="chrEndDate" hidden>
<button type="button" class="btn btn-date-picker js-date-picker"></button>
</div>
</div>
</div>
<!-- checkbox group (select multiple) -->
<div class="form-group">
<div class="form-field">
<label>Checkbox Group</label>
<div class="input-group checkbox-group">
<label for="option1">
<input name="option1" id="option1" type="checkbox" >
<div class="label">
<span class="text">Option 1</span>
</div>
</label>
</div>
<div class="input-group checkbox-group">
<label for="option2">
<input name="option2" id="option2" type="checkbox" >
<div class="label">
<span class="text">Option 2</span>
</div>
</label>
</div>
</div>
</div>
<!-- radio group (select one) -->
<div class="form-group">
<div class="form-field">
<label for="radioGroup">Radio Button Group</label>
<div class="input-group radio-group">
<label for="radio1">
<input id="radio1" name="radioGroup" value="option1" type="radio" >
<div class="label">
<span class="text">First choice</span>
</div>
</label>
<label for="radio2">
<input id="radio2" name="radioGroup" value="option2" type="radio" >
<div class="label">
<span class="text">Second choice</span>
</div>
</label>
</div>
</div>
</div>
<!-- single checkbox with check -->
<div class="form-group">
<div class="form-field">
<label>
<span class="text">Single checkbox</span>
<div class="form-help">
<button type="button" class="btn btn-help -to-right js-tooltip-help">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<div class="help-text">A small amount of info about this.</div>
</button>
<span class="help-text">Visible by default</span>
</div>
</label>
<div class="input-group checkbox-group -with-check">
<label for="singleCheck">
<input name="singleCheck" id="singleCheck" type="checkbox">
<div class="label">
<span class="text">Hide status</span>
</div>
</label>
</div>
</div>
</div>
<!-- WYSIWYG -->
<div class="form-group">
<div class="form-field">
<label for="editor-1">WYSIWYG</label>
<textarea class="js-wysiwyg" name="editor-1" id="editor-1" rows="10">
<p><span class="math-tex">\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</span> </p>
</textarea>
</div>
</div>
<!-- toggle with multiple fields -->
<div class="form-group -full-width">
<label>Toggle field group</label>
<div class="compound-field">
<div class="form-field -fixed-width">
<div class="input-group toggle-group">
<label for="toggle1">
<input id="toggle1" type="checkbox" >
<div class="label"></div>
</label>
</div>
</div>
<label>by</label>
<div class="form-field search-box" data-name="chrCompound1" data-advanced="people" data-advanced-crit="Surname" data-return="chrStaffNumber" data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [ { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" } ] }]'
data-actions='[ { "name": "details", "icon": "details" }]'>
<div class="input-group">
<input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="…" data-modal="advanced-search">
<ul class="search-tags"></ul>
<div class="search-advanced">
<button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
<span class="fa fa-search"></span>
<span class="link link-strong">Lookup</span>
</button>
</div>
</div>
</div>
<label>on</label>
<div class="date-field form-field">
<div class="input-group date-input-container">
<input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY">
<!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
<input type="text" name="chrCompound2" hidden>
<button type="button" class="btn btn-date-picker js-date-picker"></button>
</div>
</div>
</div>
</div>
<!-- accordion -->
<div class="form-subheading">
<h4>Accordions</h4>
<div class="heading-links">
<div class="label">Accordions:</div>
<button type="button" class="btn link js-accordion-expand" data-accordion="group-name">Expand all</button>
<button type="button" class="btn link js-accordion-collapse" data-accordion="group-name">Collapse all</button>
</div>
</div>
<div class="accordion-group" data-accordion="group-name">
<div class="accordion">
<button type="button" class="btn accordion-header js-accordion">
<h4 class="accordion-title">
<span class="text">Accordion</span>
</h4>
</button>
<div class="accordion-content">
<div class="form-group">
<div class="form-field">
<label for="chrFieldName">Basic field</label>
<input type="text" name="chrFieldName">
</div>
</div>
</div>
</div>
<div class="accordion -collapsed">
<button type="button" class="btn accordion-header js-accordion">
<h4 class="accordion-title">
<span class="text">Accordion Collapsed</span>
</h4>
</button>
<div class="accordion-content">
<div class="form-group">
<div class="form-field">
<label for="chrFieldName">Basic field</label>
<input type="text" name="chrFieldName">
</div>
</div>
</div>
</div>
</div>
<!-- submit button -->
<div class="submit-group">
<div class="form-field">
<div class="input-group checkbox-group -with-check">
<label for="complete">
<input name="complete" id="complete" type="checkbox">
<div class="label">
<span class="text">Mark this section as complete</span>
</div>
</label>
</div>
</div>
<div class="dropdown-button">
<button type="submit" class="btn btn-default" formaction="/submit-and-redirect">Save and continue</button>
<div role="button" class="btn dropdown js-dropdown" data-role="button" role="menu" aria-haspopup="true" tabindex="0" aria-label="Select an action" tabindex="0">
<div class="icon"></div>
<ul class="dropdown-options" aria-hidden="true">
<li class="btn dropdown-item" data-action="" role="menuitem">
<button type="submit" class="btn link link-strong" formaction="/submit-and-stay">Save</button>
</li>
<li class="btn dropdown-item" data-action="" role="menuitem">
<button type="submit" class="btn link link-strong" formaction="/submit-and-redirect">Save and continue</button>
</li>
<li class="btn dropdown-item" data-action="" role="menuitem">
<button type="submit" class="btn link link-strong" formaction="/submit-and-exit">Save and exit</button>
</li>
<li class="btn dropdown-item" data-action="" role="menuitem">
<a href="/preview" title="Preview" class="link link-strong">Preview</a>
</li>
<li class="btn dropdown-item" data-action="" role="menuitem">
<a href="/restore" title="Restore" class="link link-strong">Restore</a>
</li>
<li class="btn dropdown-item" data-action="" role="menuitem">
<a href="/exit" title="Discard changes" class="link link-strong">Discard changes</a>
</li>
</ul>
</div>
</div>
</div>
<div class="autosave-label">
<span class="timestamp"></span>
</div>
<div class="modal modal-advanced-search js-modal js-modal-exit -nav-padded -with-overlay" data-modal="advanced-search">
<div class="modal-inner inner">
<div class="modal-panel advanced-search-container">
<div class="modal-header">
<button type="button" class="btn btn-default btn-modal-exit js-modal-exit svg-wrap" aria-label="Exit Modal">
<span class="fa fa-times"></span>
</button>
<h3 class="modal-title">
<span class="text">Advanced Lookup</span>
</h3>
</div>
<div class="modal-section advanced-search-form modal-advanced-form">
<div data-col="6">
<div class="form-field advanced-search-field" data-flex="4" data-col="4" data-required="true" data-min-length="2">
<label class="advanced-search-label" data-flex="1" for="SearchValue"></label>
<input data-flex="3" name="SearchValue" class="advanced-search-input"></input>
</div>
<div class="criteria-text form-field advanced-search-field" data-col="6" data-flex="2">
<div data-flex="2"></div>
<label class="advanced-search-label" data-flex="2" for="SearchValue"></label>
<input data-flex="2" name="SearchValue" class="advanced-search-input"></input>
</div>
</div>
<div class="advanced-search-criteria" data-col="6">
<div class="criteria-dropdown form-field advanced-search-field" data-col="6" data-flex="6"></div>
<div class="criteria-checkbox form-field advanced-search-field" data-col="3" data-flex="3"></div>
<div class="btn-container" data-flex="3">
<a class="btn btn-create-record js-parent-create-record">
<span class="fa fa-plus-circle"></span>
<span class="link link-strong">Create a new record</span>
</a>
<button type="button" class="btn btn-default btn-update-advanced js-btn-update-advanced">
<div class="text">Show Records</div>
</button>
</div>
</div>
</div>
<div class="modal-section modal-results advanced-search-results">
</div>
</div>
</div>
</div>
</form>
<form class="js-auto-save" action="action.php" method="POST">
<div class="form-heading">
<h3>What type of Coversheet would you like to create?</h3>
<h4>Chief Investigator</h4>
</div>
<!-- data table ("excel style") -->
<div class="form-group -full-width">
<div class="form-field">
<label>Spreadsheet</label>
{{#with form.table }}
{{> @table--spreadsheet }}
{{/with}}
</div>
</div>
<!-- basic fields -->
<div class="form-group">
<div class="form-field">
<label for="chrFieldName">Basic field</label>
<input type="text" name="chrFieldName">
</div>
</div>
<div class="form-group">
<div class="form-field">
<label for="chrFieldName">Text area</label>
<textarea name="chrText" rows="6"></textarea>
</div>
</div>
<!-- use data-col (max 12) on form-group and data-flex on form-field to adjust width of field -->
<div class="form-group" data-col="2">
<div class="form-field" data-flex="1">
<label for="chrFieldName">Short field</label>
<input type="text" name="chrFieldName">
</div>
</div>
<!-- valid field -->
<div class="form-group">
<div class="form-field -valid">
<label for="chrValid">Valid field</label>
<input type="text" name="chrValid">
</div>
</div>
<!-- invalid field -->
<div class="form-group">
<div class="form-field -invalid">
<label for="chrInvalid">
<span class="message">Please follow the rules</span>
<span>Invalid field<span>
</label>
<input type="text" name="chrInvalid">
</div>
</div>
<!-- dropdown -->
<div class="form-group">
<div class="form-field">
<label for="chrFormType">Dropdown</label>
{{#with form.dropdownType }}
{{> @dropdown }}
{{/with}}
</div>
</div>
<!-- use data-col (max 12) on form-group and data-flex on form-field to place inputs side-by-side -->
<div class="form-group" data-col="8">
<div class="form-field" data-flex="5">
<label for="chrFormType">Dropdown</label>
{{#with form.dropdownType }}
{{> @dropdown }}
{{/with}}
</div>
<div class="form-field" data-flex="3">
<label for="chrFormType">Dropdown</label>
{{#with form.dropdownType }}
{{> @dropdown }}
{{/with}}
</div>
</div>
<div class="form-subheading">
<h4>Form subheading</h4>
</div>
<!-- advanced lookup -->
<div class="form-group">
<div class="form-field search-box"
data-name="chrProject"
data-advanced="people"
data-advanced-crit="Surname"
data-return="chrStaffNumber"
data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [ { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" } ] }]'
data-actions='[ { "name": "details", "icon": "details" }]'>
<label for="chrProject">Advanced Lookup</label>
<div class="input-group">
<input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="…" data-modal="advanced-search">
<ul class="search-tags"></ul>
<div class="search-advanced">
<button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
<span class="fa fa-search"></span>
<span class="link link-strong">Lookup</span>
</button>
</div>
</div>
</div>
</div>
<!-- advanced lookup with createMyRecord action -->
<div class="form-group">
<div class="form-field search-box"
data-name="chrNewRecord"
data-advanced="people"
data-advanced-crit="Surname"
data-parent="parentIDxyz"
data-module="grants"
data-return="chrStaffNumber"
data-row-class="js-create-record"
data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [ { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" } ] }]'
data-actions='[ { "name": "details", "icon": "details" }]'>
<label for="chrProject">Advanced Lookup (CreateMyRecord)</label>
<div class="input-group">
<input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="…" data-modal="advanced-search">
<ul class="search-tags"></ul>
<div class="search-advanced">
<button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
<span class="fa fa-search"></span>
<span class="link link-strong">Lookup</span>
</button>
</div>
</div>
</div>
</div>
<!-- advanced lookup with createMyRecord action -->
<div class="form-group">
<div class="form-field search-box"
data-name="chrNewRecord"
data-advanced="people"
data-advanced-crit="Surname"
data-parent="parentIDxyz"
data-create="2309849"
data-module="grants"
data-return="chrStaffNumber"
data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [ { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" } ] }]'
data-actions='[ { "name": "details", "icon": "details" }]'>
<label for="chrProject">Advanced Lookup (Create New Record)</label>
<div class="input-group">
<input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="…" data-modal="advanced-search">
<ul class="search-tags"></ul>
<div class="search-advanced">
<button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
<span class="fa fa-search"></span>
<span class="link link-strong">Lookup</span>
</button>
</div>
</div>
</div>
</div>
<!-- date picker -->
<div class="form-group">
<div class="form-field date-field">
<label>Start Date</label>
<div class="input-group date-input-container">
<input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY" data-initial-value="03/04/1990">
<!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
<input type="text" name="chrDate" hidden>
<button type="button" class="btn btn-date-picker js-date-picker"></button>
</div>
</div>
</div>
<!-- two date fields of equal width -->
<div class="form-group" data-col="2">
<div class="form-field date-field" data-flex="1">
<label>Start Date</label>
<div class="input-group date-input-container">
<input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY">
<!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
<input type="text" name="chrStartDate" hidden>
<button type="button" class="btn btn-date-picker js-date-picker"></button>
</div>
</div>
<div class="form-field date-field" data-flex="1">
<label>End Date</label>
<div class="input-group date-input-container">
<input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY">
<!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
<input type="text" name="chrEndDate" hidden>
<button type="button" class="btn btn-date-picker js-date-picker"></button>
</div>
</div>
</div>
<!-- checkbox group (select multiple) -->
<div class="form-group">
<div class="form-field">
<label>Checkbox Group</label>
<div class="input-group checkbox-group">
<label for="option1">
<input name="option1" id="option1" type="checkbox" >
<div class="label">
<span class="text">Option 1</span>
</div>
</label>
</div>
<div class="input-group checkbox-group">
<label for="option2">
<input name="option2" id="option2" type="checkbox" >
<div class="label">
<span class="text">Option 2</span>
</div>
</label>
</div>
</div>
</div>
<!-- radio group (select one) -->
<div class="form-group">
<div class="form-field">
<label for="radioGroup">Radio Button Group</label>
<div class="input-group radio-group">
<label for="radio1">
<input id="radio1" name="radioGroup" value="option1" type="radio" >
<div class="label">
<span class="text">First choice</span>
</div>
</label>
<label for="radio2">
<input id="radio2" name="radioGroup" value="option2" type="radio" >
<div class="label">
<span class="text">Second choice</span>
</div>
</label>
</div>
</div>
</div>
<!-- single checkbox with check -->
<div class="form-group">
<div class="form-field">
<label>
<span class="text">Single checkbox</span>
<div class="form-help">
<button type="button" class="btn btn-help -to-right js-tooltip-help">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<div class="help-text">A small amount of info about this.</div>
</button>
<span class="help-text">Visible by default</span>
</div>
</label>
<div class="input-group checkbox-group -with-check">
<label for="singleCheck">
<input name="singleCheck" id="singleCheck" type="checkbox">
<div class="label">
<span class="text">Hide status</span>
</div>
</label>
</div>
</div>
</div>
<!-- WYSIWYG -->
<div class="form-group">
<div class="form-field">
<label for="editor-1">WYSIWYG</label>
<textarea class="js-wysiwyg" name="editor-1" id="editor-1" rows="10">
<p><span class="math-tex">\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</span> </p>
</textarea>
</div>
</div>
<!-- toggle with multiple fields -->
<div class="form-group -full-width">
<label>Toggle field group</label>
<div class="compound-field">
<div class="form-field -fixed-width">
<div class="input-group toggle-group">
<label for="toggle1">
<input id="toggle1" type="checkbox" >
<div class="label"></div>
</label>
</div>
</div>
<label>by</label>
<div class="form-field search-box"
data-name="chrCompound1"
data-advanced="people"
data-advanced-crit="Surname"
data-return="chrStaffNumber"
data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [ { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" } ] }]'
data-actions='[ { "name": "details", "icon": "details" }]'>
<div class="input-group">
<input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="…" data-modal="advanced-search">
<ul class="search-tags"></ul>
<div class="search-advanced">
<button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
<span class="fa fa-search"></span>
<span class="link link-strong">Lookup</span>
</button>
</div>
</div>
</div>
<label>on</label>
<div class="date-field form-field">
<div class="input-group date-input-container">
<input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY">
<!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
<input type="text" name="chrCompound2" hidden>
<button type="button" class="btn btn-date-picker js-date-picker"></button>
</div>
</div>
</div>
</div>
<!-- accordion -->
<div class="form-subheading">
<h4>Accordions</h4>
<div class="heading-links">
<div class="label">Accordions:</div>
<button type="button" class="btn link js-accordion-expand" data-accordion="group-name">Expand all</button>
<button type="button" class="btn link js-accordion-collapse" data-accordion="group-name">Collapse all</button>
</div>
</div>
<div class="accordion-group" data-accordion="group-name">
<div class="accordion">
<button type="button" class="btn accordion-header js-accordion">
<h4 class="accordion-title">
<span class="text">Accordion</span>
</h4>
</button>
<div class="accordion-content">
<div class="form-group">
<div class="form-field">
<label for="chrFieldName">Basic field</label>
<input type="text" name="chrFieldName">
</div>
</div>
</div>
</div>
<div class="accordion -collapsed">
<button type="button" class="btn accordion-header js-accordion">
<h4 class="accordion-title">
<span class="text">Accordion Collapsed</span>
</h4>
</button>
<div class="accordion-content">
<div class="form-group">
<div class="form-field">
<label for="chrFieldName">Basic field</label>
<input type="text" name="chrFieldName">
</div>
</div>
</div>
</div>
</div>
<!-- submit button -->
<div class="submit-group">
<div class="form-field">
<div class="input-group checkbox-group -with-check">
<label for="complete">
<input name="complete" id="complete" type="checkbox">
<div class="label">
<span class="text">Mark this section as complete</span>
</div>
</label>
</div>
</div>
<div class="dropdown-button">
<button type="submit" class="btn btn-default" formaction="/submit-and-redirect">Save and continue</button>
<div role="button" class="btn dropdown js-dropdown" data-role="button" role="menu" aria-haspopup="true" tabindex="0" aria-label="Select an action" tabindex="0">
<div class="icon"></div>
<ul class="dropdown-options" aria-hidden="true">
<li class="btn dropdown-item" data-action="" role="menuitem">
<button type="submit" class="btn link link-strong" formaction="/submit-and-stay">Save</button>
</li>
<li class="btn dropdown-item" data-action="" role="menuitem">
<button type="submit" class="btn link link-strong" formaction="/submit-and-redirect">Save and continue</button>
</li>
<li class="btn dropdown-item" data-action="" role="menuitem">
<button type="submit" class="btn link link-strong" formaction="/submit-and-exit">Save and exit</button>
</li>
<li class="btn dropdown-item" data-action="" role="menuitem">
<a href="/preview" title="Preview" class="link link-strong">Preview</a>
</li>
<li class="btn dropdown-item" data-action="" role="menuitem">
<a href="/restore" title="Restore" class="link link-strong">Restore</a>
</li>
<li class="btn dropdown-item" data-action="" role="menuitem">
<a href="/exit" title="Discard changes" class="link link-strong">Discard changes</a>
</li>
</ul>
</div>
</div>
</div>
<div class="autosave-label">
<span class="timestamp"></span>
</div>
{{> '@modal--search' }}
</form>
{
"form": {
"dropdownType": {
"name": "chrFormType",
"options": [
{
"title": "Amend an application",
"value": "Amend an application"
},
{
"title": "Start an application",
"value": "Start an application"
}
]
},
"table": {
"columns": [
{
"title": "Description"
},
{
"title": "Year 1",
"unit": "$",
"columnClass": "-align-right"
},
{
"title": "Year 2",
"unit": "$",
"columnClass": "-align-right"
},
{
"title": "Year 3",
"unit": "$",
"columnClass": "-align-right"
},
{
"title": "Year 4",
"unit": "$",
"columnClass": "-align-right"
},
{
"title": "Year 5",
"unit": "$",
"columnClass": "-align-right"
},
{
"title": "Total",
"unit": "$",
"columnClass": "-align-right"
}
],
"rows": [
{
"data": [
{
"value": "Grant ABC",
"label": "Description for row 1"
},
{
"value": 99999999.99,
"label": "Year 1 for row 1",
"columnClass": "-align-right"
},
{
"value": 99999999.99,
"label": "Year 2 for row 1",
"columnClass": "-align-right"
},
{
"value": 99999999.99,
"label": "Year 3 for row 1",
"columnClass": "-align-right"
},
{
"value": 99999999.99,
"label": "Year 4 for row 1",
"columnClass": "-align-right"
},
{
"value": 99999999.99,
"label": "Year 5 for row 1",
"columnClass": "-align-right"
},
{
"value": 99999999.99,
"label": "Total for row 1",
"columnClass": "-align-right"
}
]
}
]
}
}
}
.ui-datepicker {
position: absolute;
right: 0;
bottom: 0;
transform: translateY(100%);
z-index: 20;
padding: 0;
width: auto;
background: $color-irma-white;
border-radius: 0;
border: 0 !important;
box-shadow: 0 1rem 3.5rem 0.5rem rgba(black, 0.05);
@include font-primary-medium;
@include font-size-other(14px);
* {
border: 0 !important;
color: $color-irma-navy;
}
.ui-datepicker-header {
display: flex;
justify-content: center;
align-items: center;
height: calc(10rem + 5px);
padding: 0;
background: $color-irma-navy;
border: 0;
border-radius: 0;
color: white;
@include font-primary-bold;
text-transform: uppercase;
@include font-size;
* {
color: inherit;
}
.ui-corner-all {
top: 50%;
transform: translateY(-50%);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 0;
width: 10rem;
overflow: hidden;
border-radius: 0;
transition: all $transition;
&:hover, &:focus {
background: $color-irma-slate;
border: 0 !important;
outline: 0;
}
}
.ui-datepicker-prev {
left: 0 !important;
.ui-icon {
background: {
image: url('../img/arrow-left-white.svg');
size: 2rem auto;
repeat: no-repeat;
position: center;
}
}
}
.ui-datepicker-next {
right: 0 !important;
.ui-icon {
background: {
image: url('../img/arrow-right-white.svg');
size: 2rem auto;
repeat: no-repeat;
position: center;
}
}
}
}
.ui-datepicker-calendar {
display: block;
padding: 4rem 5rem 6rem;
margin-bottom: 0;
width: auto;
box-shadow: 0 0 0 1px $color-irma-silver inset;
thead {
text-transform: uppercase;
@include font-size;
}
td {
padding: 1rem 2rem;
}
.ui-state-default {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
width: 6rem;
height: 6rem;
border-radius: 0.5rem;
background: transparent;
color: $color-irma-slate;
&.ui-state-highlight {
box-shadow: 0 0 0 1px $color-irma-gray;
background: transparent;
color: $color-irma-navy;
}
&:hover, &:focus {
background: $color-irma-mint;
color: $color-irma-navy;
@include font-primary-bold;
}
}
}
}
.ui-datepicker-trigger {
display: none !important;
}
input, select, textarea {
box-shadow: 0 0 0 1px $color-irma-border;
border: 0;
outline: 0;
&:focus {
box-shadow: 0 0 0 1px $color-irma-focus;
}
&[disabled] {
background: $color-irma-silver;
}
&.-disabled {
padding: 0;
pointer-events: none;
}
&[readonly] {
background: $color-irma-readonly;
color: rgba($color-irma-slate, 0.7);
}
}
input, select {
height: 10rem;
padding: 0 4rem;
line-height: 10rem;
}
textarea {
padding: 4rem;
}
label, input {
&.-hidden {
display: none;
}
}
label {
// line-height: 10rem;
}
.form-help {
display: inline-block;
&:not(:first-child) {
margin-left: 1rem;
}
.help-text {
margin-left: 0.5rem;
opacity: 0.5;
font-style: italic;
text-transform: none;
}
}
input {
border-radius: 0.5rem;
}
select {
appearance: none;
border-radius: 0.5rem;
background: {
color: transparent;
image: url('../img/svg/arrow.svg');
size: 3rem 1.75rem;
repeat: no-repeat;
position: calc(100% - 5.5rem) 4rem;
}
&::-ms-expand {
display: none;
}
// &:focus {
// filter: drop-shadow(0 4px 4px rgba(black, 0.05));
// }
}
input[type='checkbox'], input[type='radio'] {
position: relative;
height: 5rem;
width: 5rem;
appearance: none;
background: white;
vertical-align: middle;
border-radius: 2px;
opacity: 0;
&:checked {
& + label, & + .label {
&::after {
opacity: 1;
}
&::before {
box-shadow: 0 0 0 1px $color-irma-navy;
}
}
}
&:focus {
& + label, & + .label {
&::before {
box-shadow: 0 0 0 1px $color-irma-focus;
}
}
}
& + label, & + .label {
position: relative;
display: inline-block;
margin-left: 2rem;
vertical-align: middle;
&::before, &::after {
pointer-events: none;
}
&::before {
content: '';
position: absolute;
left: -2rem;
top: 50%;
transform: translate(-100%, -50%);
display: block;
width: 5rem;
height: 5rem;
box-shadow: 0 0 0 1px $color-irma-border;
border-radius: 2px;
}
&::after {
content: '';
position: absolute;
left: -3rem;
top: 50%;
transform: translate(-100%, -50%);
display: block;
width: 3rem;
height: 3rem;
opacity: 0;
background: $color-irma-blue;
border-radius: 2px;
transition: opacity ($transition / 2);
}
}
}
input[type='radio'] {
& + label, & + .label {
&::before, &::after {
border-radius: 50%;
}
}
}
.checkbox-group {
* {
&:hover {
cursor: pointer;
}
}
&.-with-check {
input {
&:hover, &:focus {
& + label, & + .label {
&::after {
opacity: 0.5;
}
&::before {
box-shadow: 0 0 0 1px $color-irma-navy !important;
}
}
}
&:checked {
& + label, & + .label {
&::before {
box-shadow: 0 0 0 1px $color-irma-navy !important;
}
}
}
& + label, & + .label {
&::after {
content: '\f00c';
left: -2.5rem;
display: flex;
justify-content: center;
align-items: center;
width: 4rem;
height: 4rem;
background: transparent !important;
color: $color-irma-slate;
@include font-icon;
@include font-size-other(16px);
}
.text {
&::before {
display: none !important;
}
}
}
}
}
}
$validation-position: -4rem;
.form-group {
max-width: 155rem;
flex-wrap: nowrap;
align-items: flex-end;
&.-full-width {
max-width: none;
}
&.-with-button {
display: flex;
.form-field {
flex: 1 1 auto;
}
.button-group {
margin-top: 0 !important;
padding-left: 4rem;
.btn {
min-height: 10rem;
}
}
}
&:not(:first-child) {
margin-top: 7.5rem;
}
&[data-col] {
$field-gutter: 4rem;
width: calc(100% + #{$field-gutter * 2});
max-width: 163rem;
.form-field {
padding: 0 $field-gutter;
&:first-child {
margin-left: -#{$field-gutter};
}
&.-valid, &.-invalid {
&::after {
right: $validation-position + $field-gutter;
}
}
.ui-datepicker {
right: $field-gutter;
}
}
}
label {
color: rgba($color-irma-slate, 0.7);
text-transform: uppercase;
@include font-primary-bold;
@include font-size;
& + input, & + .input-group, & + .dropdown, & + textarea, & + .compound-field, & + textarea + .cke, & + .form-note, & + .body, & + .table, & + table {
margin-top: 3rem;
}
.message {
padding-bottom: 2rem;
@include font-primary-light;
font-style: italic;
text-transform: none;
}
}
.compound-field {
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
& > * {
margin-top: 0 !important;
}
& > :not(:first-child) {
margin-left: 4rem;
}
.form-field:not(.-fixed-width) {
min-width: 50rem;
flex: 1 1 auto;
}
.search-box {
min-width: 90rem;
}
.toggle-group, .checkbox-group, .radio-group {
width: auto;
}
.toggle-group {
label {
width: 10rem !important;
padding: 0 !important;
}
}
.checkbox-group, .radio-group {
label {
width: 5rem !important;
padding: 0 !important;
}
}
}
.form-field {
position: relative;
&.-invalid, &.-valid {
&::after {
position: absolute;
bottom: 5rem;
right: $validation-position;
transform: translate(50%, 50%);
display: flex;
justify-content: center;
align-items: center;
width: 4rem;
height: 4rem;
border-radius: 50%;
color: white;
@include font-size-other(10px);
@include font-icon;
}
& > label {
.message {
display: block;
}
}
}
&.-invalid {
&::after {
content: '\f00d';
background-color: $color-irma-danger;
}
input, textarea, select, .dropdown .dropdown-label, .cke {
box-shadow: 0 0 0 1px $color-irma-danger;
color: $color-irma-danger;
}
& > label {
.message {
color: $color-irma-danger;
}
}
}
&.-valid {
&::after {
content: '\f00c';
background-color: $color-irma-spearmint;
}
input, textarea, select, .dropdown .dropdown-label, .cke {
box-shadow: 0 0 0 1px $color-irma-spearmint;
color: $color-irma-spearmint;
}
& > label {
.message {
color: $color-irma-spearmint;
}
}
}
&.-readonly {
pointer-events: none;
.dropdown {
.dropdown-label {
background: $color-irma-readonly;
}
}
input {
&[type='radio'], &[type='checkbox'] {
&:checked {
& + .label {
.text {
&::before {
background: $color-irma-readonly;
}
}
}
}
}
}
}
input:not([hidden]):not([type='checkbox']):not([type='radio']) {
display: inline-block;
width: 100%;
}
textarea {
width: 100%;
resize: vertical;
}
.input-group {
position: relative;
}
.checkbox-group, .radio-group, .toggle-group {
z-index: 1;
label {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 2.5rem;
}
& + .checkbox-group {
margin-top: 1px;
}
}
.radio-group {
}
.toggle-group {
input[type='checkbox'] {
& + .label {
&::before {
width: 9rem;
border-radius: 4.5rem;
transition: all $transition;
}
&::after {
left: 3rem;
border-radius: 50%;
background: $color-irma-gray;
opacity: 1;
transition: all $transition;
}
}
&:focus, &:hover {
cursor: pointer;
& + .label {
&::before {
background: $color-irma-mint;
opacity: 0.5;
}
&::after {
opacity: 1;
background: white;
}
}
}
&:checked {
& + .label {
&::before {
background: $color-irma-mint;
box-shadow: 0 0 0 1px $color-irma-mint;
}
&::after {
left: 7rem;
background: white;
}
.text {
&::before {
background: transparent;
}
}
}
}
}
}
input[type='checkbox'], input[type='radio'] {
& + .label {
position: initial;
&::before {
background: white;
}
&::after {
background: $color-irma-mint;
}
&::before, &::after {
left: 5rem;
transform: translate(-50%, -50%);
}
.text {
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
width: 100%;
height: 100%;
border-radius: 0.5rem;
}
}
}
&:focus, &:hover {
& + .label {
&::before {
box-shadow: 0 0 0 1px $color-irma-mint;
opacity: 0.5;
}
&::after {
background: $color-irma-mint;
opacity: 0.5;
}
.text {
&::before {
box-shadow: 0 0 0 1px rgba($color-irma-mint, 0.33) inset;
}
}
}
}
&:checked {
& + .label {
&::before {
box-shadow: 0 0 0 1px $color-irma-mint;
}
.text {
&::before {
background: rgba($color-irma-mint, 0.15);
}
}
}
}
}
}
}
.form-field {
.search-advanced {
top: 50%;
right: 4rem;
transform: translateY(-50%);
}
.search-tags {
left: 4rem;
}
}
.date-field {
position: relative;
.date-input {
&::placeholder {
opacity: 0.7;
font-style: italic;
}
}
.btn-date-picker {
position: absolute;
right: 0;
top: 0;
width: 10rem;
height: 10rem;
border: {
top-right-radius: 0.5rem;
bottom-right-radius: 0.5rem;
}
border-left: 1px solid $color-irma-border;
color: $color-irma-navy;
text-align: center;
&::after {
content: '\f073';
line-height: 10rem;
@include font-size-other(14px);
@include font-icon;
}
&:hover, &:focus, &.-active {
background: $color-irma-navy;
color: white;
}
}
}
.submit-group {
display: flex;
width: 100%;
justify-content: flex-end;
align-items: center;
padding-top: 6rem;
border-top: 1px solid $color-irma-silver;
&:not(:first-child) {
margin-top: 10rem;
}
&.-align-left {
justify-content: flex-start;
}
& > * {
&:not(:first-child) {
margin-left: 4rem;
}
}
}
.form-heading {
min-height: 12rem;
padding-bottom: 2.5rem;
border-bottom: 1px solid $color-irma-silver;
h3 {
& + h4 {
margin-top: 7.5rem;
}
}
h4 {
text-transform: uppercase;
}
}
.form-subheading {
display: flex;
width: 100%;
justify-content: space-between;
padding-bottom: 2rem;
border-bottom: 1px solid $color-irma-silver;
text-transform: uppercase;
&:not(:first-child) {
margin-top: 10rem;
}
}
.heading-links {
display: flex;
align-items: center;
* {
&:not(:first-child) {
margin-left: 4rem;
}
}
.label {
color: rgba($color-irma-slate, 0.7);
@include font-primary-bold;
}
.link {
&:not(:last-child) {
margin-right: 4rem;
&::before {
content: '';
position: absolute;
right: -4rem;
top: 50%;
transform: translateY(-50%);
display: block;
width: 1px;
height: 5rem;
background: $color-irma-silver;
}
}
}
}
.file-field {
&.-with-file {
border: 0;
background: rgba($color-irma-mint, 0.15);
pointer-events: none;
&::before {
content: '\f15b';
color: $color-irma-navy;
}
.link {
color: $color-irma-navy;
}
}
}
// .form-note {
// &.alert {
// margin-top: 0;
// }
// }
/*
* _code-lookup.js
*/
irma.codeLookup = (function () {
'use strict';
var advancedPageLength = 25,
lookupSource,
codeTree,
$currentRow;
var openLookup = function ($btn) {
lookupSource = $btn.closest('.table').data().lookupSource;
var tree = irma.storage.get('codeTree') || {};
codeTree = tree[lookupSource];
$('.advanced-search-results').empty().addClass('-loading')
.closest('.modal-slider').removeClass('-slid')
.find('.code-lookup-input').val('');
$('.browse-tree').scrollTop(0);
if (typeof(codeTree) !== 'undefined' && codeTree !== null && typeof(codeTree.codes) !== 'undefined') {
initLookup($btn);
}
else {
getTree($btn);
}
};
var browseTo = function ($btn) {
var code = $btn.data().code.toString(),
$modal = $btn.closest('.modal'),
$browseCode = $('#browse-code-' + code),
scrollTop;
$modal.find('.modal-browse .accordion').addClass('-collapsed');
$browseCode.removeClass('-collapsed');
$browseCode.parents('.accordion').removeClass('-collapsed');
$('.browse-tree').scrollTop(0);
setTimeout(function () {
scrollTop = $browseCode.position().top;
$('.browse-tree').animate({
'scrollTop': '' + scrollTop + 'px'
}, 300);
}, 500);
};
var getTree = function ($btn) {
var url = irma.baseURL + 'getMyCode.asp?' + irma.urlParams + '&lookupSource=' + lookupSource + '&lookupCode=tree';
$('.browse-tree').addClass('-loading');
$.ajax({
url: url
}).done(function (results) {
sortTree(results.codes, $btn);
}).fail(function (jqXHR, textStatus) {
irma.logger.postLog(textStatus, url);
});
};
var sortTree = function (res, $btn) {
var codes = {},
categories = {};
_.forEach(res, function (code, i) {
var levelName = "level";
levelName += code.level == 1 ? "One" : code.level == 2 ? "Two" : "Three";
levelName += "Code";
var c = {
level: code.level,
code: code[levelName],
description: code[[levelName + "Description"]].toTitleCase()
};
codes[code[levelName]] = c;
if (c.level == 1) {
if (categories[c.code]) {
categories[c.code].level = c.level;
categories[c.code].code = c.code;
categories[c.code].description = c.description;
}
else {
categories[c.code] = c;
categories[c.code].subcategories = {};
}
}
else if (c.level == 2) {
if (categories[code.levelOneCode]) {
if (categories[code.levelOneCode].subcategories[c.code]) {
categories[code.levelOneCode].subcategories[c.code].level = c.level;
categories[code.levelOneCode].subcategories[c.code].code = c.code;
categories[code.levelOneCode].subcategories[c.code].description = c.description;
}
else {
categories[code.levelOneCode].subcategories[c.code] = c;
categories[code.levelOneCode].subcategories[c.code].codes = {};
}
}
else {
categories[code.levelOneCode] = {
subcategories: {}
};
categories[code.levelOneCode].subcategories[c.code] = c;
categories[code.levelOneCode].subcategories[c.code].codes = {};
}
}
else {
if (categories[code.levelOneCode]) {
if (categories[code.levelOneCode].subcategories[code.levelTwoCode]) {
categories[code.levelOneCode].subcategories[code.levelTwoCode].codes[c.code] = c;
}
else {
categories[code.levelOneCode].subcategories[code.levelTwoCode] = {
codes: {}
};
categories[code.levelOneCode].subcategories[code.levelTwoCode].codes[c.code] = c;
}
}
else {
categories[code.levelOneCode] = {
subcategories: {}
};
categories[code.levelOneCode].subcategories[code.levelTwoCode] = {
codes: {}
};
categories[code.levelOneCode].subcategories[code.levelTwoCode].codes[c.code] = c;
}
}
});
codeTree = {
codes: codes,
categories: _.sortBy(categories, 'code')
};
var tree = irma.storage.get('codeTree') || {};
tree[lookupSource] = codeTree;
irma.storage.set('codeTree', tree);
initLookup($btn);
};
var renderTree = function () {
$.get(irma.assetPath + '/templates/search-results/search-results--browse.hbs?v=' + irma.templateVersion, function (template) {
var templateScript = Handlebars.compile(template);
var html = templateScript({ categories: codeTree.categories });
$('.modal-code-lookup .modal-browse .browse-tree').removeClass('-loading').html(html);
});
};
var initLookup = function ($btn) {
renderTree();
$currentRow = $btn.closest('.table-row');
var $row = $btn.closest('.table-row'),
data = {
code: $row.find('[data-lookup=\'code\']').val(),
description: $row.find('[data-lookup=\'description\']').val(),
level: $row.find('[data-lookup=\'level\']').val()
},
name = 'code';
if (data.code.length === 0) {
if (data.description.length > 0) {
name = 'description';
}
else {
name = '';
}
}
var $dropdown = $('.modal-code-lookup .code-lookup-select'),
$input = $('.modal-code-lookup .code-lookup-input'),
$dropdownItem = $dropdown.find('.dropdown-item').filter(function () {
var value = name.length > 0 ? name : 'code';
return $(this).data().value == value;
});
$dropdownItem.trigger('click');
$dropdown.data('open', false)
.removeClass('-active')
.find('.dropdown-options').attr('aria-hidden', true);
$dropdown.find('.dropdown-item').removeClass('-selected');
var placeholder = name == 'code' || name === '' ? 'Enter 2, 4, or 6 digits' : 'Enter keyword(s)';
$input.attr('placeholder', placeholder);
var level = $currentRow.find('[data-lookup=\'level\']').val();
$('.code-level-select .dropdown-label .text').text(level);
if (name.length > 0) {
$('.code-lookup-input').val(data[name]);
runLookup(name, data[name], data.level);
}
else {
$('.advanced-search-results').removeClass('-loading');
}
};
var runLookup = function (name, value, level) {
var lookupName = name.replace(/^./, function ($1) {
return $1.toUpperCase();
}),
url = irma.baseURL + 'getMyCode.asp?' + irma.urlParams + '&lookupSource=' + lookupSource + '&lookup' + lookupName + '=' + value;
if (name == 'description') {
url += '&lookupDescriptionLevel=' + level;
}
$.ajax({
url: url
}).done(function (results) {
sortCodes(results.codes, { name: name, value: value }, results.status);
}).fail(function (jqXHR, textStatus) {
irma.logger.postLog(textStatus, url);
sortCodes([], data, 'failed');
});
};
var sortCodes = function (codes, data, status) {
var results = [],
noResults = false,
columns = [
{
name: "levelThreeCode",
title: "Code",
width: "10"
},
{
name: "levelThreeCodeDescription",
title: "Description",
width: "30"
},
{
name: "levelOneDescription",
title: "Category",
width: "30",
action: {
name: "browse",
icon: "list"
}
},
{
name: "levelTwoDescription",
title: "Subcategory",
width: "30",
action: {
name: "browse",
icon: "list"
}
}
];
if (status == 'failed' || status == 'no matching records') {
noResults = true;
}
else {
_.forEach(codes, function (result, i) {
var r = { columns: [] },
code = '';
_.forEach(columns, function (column, j) {
var value = 'n/a';
if (result[column.name]) {
value = result[column.name].toTitleCase();
}
if (column.name.indexOf('levelOne') > -1 && result.levelOneCode) {
code = result.levelOneCode;
}
else if (column.name.indexOf('levelTwo') > -1 && result.levelTwoCode) {
code = result.levelTwoCode;
}
r.columns[j] = {
value: value
};
_.forEach(column, function (value, key) {
r.columns[j][key] = value;
});
if (code.length) {
r.columns[j].code = code;
}
});
r.data = {
code: result.levelThreeCode,
description: result.levelThreeCodeDescription.toTitleCase()
};
if (result.levelThreeCodeDescription == result.levelOneDescription) {
for (var k = 2; k <= 3; k++) {
r.columns[k].value = '';
r.columns[k].action = null;
}
}
else if (result.levelThreeCodeDescription == result.levelTwoDescription) {
r.columns[3].value = '';
r.columns[3].action = null;
}
results.push(r);
});
}
var context = {
columns: columns,
rowClass: "table-link js-use-code js-modal-exit",
results: results,
noResults: noResults,
data: {
scope: data.advanced,
filter: data.name,
"search-type": "advanced",
parent: data.parent,
module: data.module
}
};
showRecords(context);
};
var showRecords = function (context) {
$.get(irma.assetPath + '/templates/search-results/search-results--code.hbs?v=' + irma.templateVersion, function (template) {
var templateScript = Handlebars.compile(template);
var html = templateScript(context);
$('.advanced-search-results').removeClass('-loading').html(html);
});
};
// ******* INIT ******* //
var init = function () {
$(document).on('click', '.js-run-code-lookup', function () {
openLookup($(this));
}).on('keypress', '[data-lookup]', function (e) {
if (e.which == 13) {
$(this).closest('.table-row').find('.js-run-code-lookup').trigger('click');
}
}).on('click', '.js-update-code-lookup', function () {
var $form = $(this).closest('.modal-advanced-form'),
name = $form.find('.code-lookup-select .dropdown-label .text').text().toLowerCase(),
value = $form.find('.code-lookup-input').val(),
level = $form.find('.code-level-select .dropdown-label .text').text();
$('.advanced-search-results').addClass('-loading');
runLookup(name, value, level);
}).on('keypress', '.js-code-lookup-input', function (e) {
if (e.which == 13) {
var $form = $(this).closest('.modal-advanced-form'),
name = $form.find('.code-lookup-select .dropdown-label .text').text().toLowerCase(),
value = $form.find('.code-lookup-input').val(),
level = $form.find('.code-level-select .dropdown-label .text').text();
$('.advanced-search-results').addClass('-loading');
runLookup(name, value, level);
}
}).on('click', '.js-toggle-browse-code, .js-action-browse', function () {
$(this).closest('.modal-slider').toggleClass('-slid');
}).on('click', '.js-action-browse', function () {
browseTo($(this));
}).on('click', '.js-use-code', function () {
var data = $(this).data();
$currentRow.find('[data-lookup=\'code\']').val(data.code);
$currentRow.find('[data-lookup=\'description\']').val(data.description);
}).on('click', '.code-lookup-select .dropdown-item', function () {
var name = $(this).text().toLowerCase(),
placeholder = name == 'code' || name === '' ? 'Enter 2, 4, or 6 digits' : 'Enter keyword(s)',
$level = $('.code-level-group');
$('.code-lookup-input').attr('placeholder', placeholder);
if (name == 'description') {
$level.show();
}
else {
$level.hide();
}
});
};
return {
init: init
};
}());
/*
* _form.js
*/
irma.form = (function () {
'use strict';
var dayNames = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ],
advancedPageLength = 25,
currentData;
var getRecentSearch = function () {
var recentSearches = irma.storage.get('recentSearches') || {},
page = recentSearches[irma.pageId] || {};
return page;
};
var setRecentSearch = function (search) {
var recentSearches = irma.storage.get('recentSearches') || {},
page = recentSearches[irma.pageId] || {};
_.forEach(search, function (value, key) {
page[key] = value;
});
recentSearches[irma.pageId] = page;
irma.storage.set('recentSearches', recentSearches);
};
var setDate = function ($field) {
$field.closest('.js-auto-save').data({ changed: true });
$field.find('.js-date-picker').removeClass('-active');
var date = moment($field.find('.date-input').val(), "DD/MM/YYYY").format('YYYY-MM-DDT00:00:00100:00');
date = date == "Invalid date" ? "" : date;
$field.find('input[hidden]').val(date);
};
var showRecords = function (context) {
setRecentSearch({ index: context.index });
$.get(irma.assetPath + '/templates/search-results/' + context.template + '.hbs?v=' + irma.templateVersion, function (template) {
var templateScript = Handlebars.compile(template);
var html = templateScript(context);
var $scope = $(context.scope);
$scope.removeClass('-loading').html(html);
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
paginate(context);
if (irma.newSearch) {
irma.newSearch = false;
if (context.toggle) {
irma.searchPanel.toggleSearch(true);
}
}
});
};
// ******* ADVANCED LOOKUP RESULTS ******* //
var validateInput = function ($input) {
var $field = $input.closest('.form-field'),
invalid = false;
var minLength = $field.attr('data-min-length') ? parseInt($field.attr('data-min-length')) : 1;
if ($input.val().length < minLength) {
$field.addClass('-invalid');
invalid = true;
}
else {
$field.removeClass('-invalid');
}
return invalid;
};
var advancedLookup = function (data, term) {
buildCriteria(data, term);
currentData = data;
var $required = $('.advanced-search-field[data-required]'),
invalid = false;
$required.each(function () {
invalid = validateInput($(this).find('input'));
});
if (invalid) {
}
else {
$('.modal-advanced-search .advanced-search-results').empty().addClass('-loading');
runAdvancedLookup(data, "&SearchName=" + data.advanced + "&SearchValue=" + term);
}
setTimeout(function () {
$('.modal-advanced-search').find('input').eq(0).focus();
}, 100);
};
var updateAdvancedLookup = function ($input) {
var $form = $input.closest('.advanced-search-form'),
$inputs = $form.find("input").filter(function (i) {
return $(this).val().length > 0;
});
var $required = $form.find('.advanced-search-field[data-required]'),
invalid = false;
$required.each(function () {
invalid = validateInput($(this).find('input'));
});
if (invalid) {
}
else {
var searchString = "&SearchName=" + currentData.advanced + "&" + $inputs.serialize();
runAdvancedLookup(currentData, searchString);
}
};
var runAdvancedLookup = function (data, searchString) {
var url = irma.baseURL + "getSearchResults.asp?" + irma.urlParams + searchString;
var $results = $('.modal.-active .advanced-search-results');
$results.empty().addClass('-loading');
$.ajax({
url: url
}).done(function (results) {
sortAdvancedRecords(results.data, data, results.status);
}).fail(function (jqXHR, textStatus) {
irma.logger.postLog(textStatus, url);
sortAdvancedRecords([], data, 'failed');
}).always(function () {
$results.removeClass('-loading');
});
};
var sortAdvancedRecords = function (res, data, status) {
var results = [], pages = [],
noResults = false;
if (status == 'failed' || status == 'no matching records') {
noResults = true;
}
else {
_.forEach(res, function (result, i) {
var r = { columns: [] };
_.forEach(data.columns, function (column, j) {
var value = result[column.name] ? result[column.name] : "n/a";
r.columns[j] = {
value: value
};
_.forEach(column, function (value, key) {
r.columns[j][key] = value;
});
});
var display = data.returnDisplay || '$chrSurname, $chrFirstName';
var returnDisplay = display.replace(/\$(\w+)/g, function (match, p1) {
return result[p1];
});
r.data = {
return: result[data.return],
"return-display": returnDisplay,
"custom-modal-search-value": data.customModalSearchValue
};
results.push(r);
});
for (var i = 0; i < Math.ceil(results.length / advancedPageLength); i++) {
pages[i] = results.slice(i * advancedPageLength, (i + 1) * advancedPageLength);
pages[i].number = i + 1;
}
}
var totalResults = results.length,
totalColumns = data.columns.length * 2,
range;
if (totalResults > 0) {
range = "1 - " + (pages[0].length).toString();
}
if (data.actions) {
totalColumns++;
}
var context = {
totalColumns: totalColumns,
columns: data.columns,
rowClass: "table-link " + data.rowClass,
actions: data.actions,
actionsTitle: "Info",
pages: pages,
range: range,
index: 0,
noResults: noResults,
currentPage: pages[0],
totalResults: totalResults,
title: data.title,
pageLength: advancedPageLength,
data: {
scope: data.advanced,
filter: data.name,
"search-type": "advanced",
parent: data.parent,
create: data.create,
module: data.module
},
template: "search-results--lookup",
scope: '.advanced-search-results'
};
irma.records.advanced = context;
showRecords(irma.records.advanced);
};
// ******* ADVANCED SEARCH FORM ******* //
var buildCriteria = function (data, term) {
var $form = $('.modal-advanced-search .advanced-search-form'),
$criteria = {
checkbox: $form.find('.advanced-search-criteria .criteria-checkbox'),
text: $form.find('.criteria-text'),
dropdown: $form.find('.advanced-search-criteria .criteria-dropdown')
};
_.forEach($criteria, function ($crit, i) {
$crit.empty();
});
$form.find('.advanced-search-field label').attr('for', 'searchValue').text(data.advancedCrit).addClass('advanced-search-label');
$form.find('.advanced-search-field input').val(term);
if (_.find(data.options, ['type', 'checkbox'])) {
var additional = $('<label>Other Criteria</label>').attr({
'data-flex': '1'
}).addClass('advanced-search-label');
var checkboxes = $('<div></div>').addClass('checkbox-list').attr({
'data-flex': '6',
'data-col': '5'
});
$criteria.checkbox.append(additional).append(checkboxes);
}
if (_.find(data.options, ['type', 'text'])) {
$criteria.text.show();
}
else {
$criteria.text.hide();
}
if (_.find(data.options, ['type', 'dropdown'])) {
$criteria.dropdown.show();
}
else {
$criteria.dropdown.hide();
}
_.forEach(data.options, function (option, i) {
var label = $('<label>' + option.title + '</label>').attr({
'data-flex': '1'
}),
criterion;
if (option.type == 'checkbox') {
var checkbox = $('<input>').attr({
type: 'checkbox',
name: option.name
}).val('true').addClass('advanced-search-input');
criterion = $('<div>').attr({
// 'data-flex': '1'
}).addClass('checkbox-item');
criterion.append(checkbox).append(label);
$criteria.checkbox.find('.checkbox-list').append(criterion);
}
else if (option.type == 'dropdown') {
$.get(irma.assetPath + '/templates/dropdown/dropdown.hbs?v=' + irma.templateVersion, function (template) {
var templateScript = Handlebars.compile(template),
context = {
title: option.title,
name: option.name,
options: option.list
};
var html = templateScript(context);
$criteria.dropdown.html(html)
.prepend(label.addClass('advanced-search-label'))
.find('.dropdown').attr('data-flex', '5')
.find('input').addClass('advanced-search-input');
});
}
else if (option.type == 'text') {
criterion = $('<input>').attr({
'name': option.name,
'data-flex': '2'
}).addClass('advanced-search-input');
$criteria.text.append(label.attr('data-flex', '2').addClass('advanced-search-label')).append(criterion).prepend($('<div />').attr('data-flex', '2'));
}
});
$form.find('.btn-create-record')
.toggle(data.hasOwnProperty('create') && (data.create > 0 || data.create.length > 0))
.data({
create: data.create,
parent: data.parent,
module: data.module
});
};
// ******* ADVANCED SEARCH TAG ******* //
var addTag = function (label, display, input) {
var $searchBox = $('.search-box').filter(function () {
return $(this).attr('data-name') == label;
});
$.get(irma.assetPath + '/templates/search-tag/search-tag.hbs?v=' + irma.templateVersion, function (template) {
var templateScript = Handlebars.compile(template),
context = {
label: label,
display: display,
input: input
};
var html = templateScript(context);
$searchBox.addClass('-tagged')
.find('.search-box-input').val('');
$searchBox.find('.search-tags').html(html);
});
};
var removeTag = function ($tag) {
if ($tag.closest('.search-tags').find('.tag-item').length == 1) {
$tag.closest('.search-box').removeClass('-tagged');
}
$tag.closest('.tag-item').remove();
};
// ******* PAGINATION ******* //
var paginate = function (context) {
var $scope = $(context.scope),
$pagination = $scope.find('.results-pagination li'),
$nav = $scope.find('.results-pagination .pagination-item');
$pagination.removeClass('-active').find('.btn').removeAttr('tabindex');
$pagination.eq(context.index).addClass('-active').removeClass('-ellipsis')
.find('.btn').attr('tabindex', '-1');
if (context.index === 0) {
$nav.eq(0).hide();
}
else {
$nav.eq(0).show();
}
if (context.index === context.pages.length - 1) {
$nav.eq(1).hide();
}
else {
$nav.eq(1).show();
}
if (context.pages.length > 10) {
if (context.index < 4) {
$pagination.addClass('-hidden')
.find('.btn').attr('tabindex', -1);
$pagination.slice(0, 9).removeClass('-hidden')
.find('.btn').removeAttr('tabindex');
}
else if (context.index >= context.pages.length - 4) {
$pagination.addClass('-hidden').attr('tabindex', -1)
.find('.btn').attr('tabindex', -1);
$pagination.slice(context.pages.length - 9, context.pages.length).removeClass('-hidden')
.find('.btn').removeAttr('tabindex');
}
else {
$pagination.addClass('-hidden')
.find('.btn').attr('tabindex', -1);
$pagination.slice(context.index - 4, context.index + 5).removeClass('-hidden')
.find('.btn').removeAttr('tabindex');
}
if (context.index >= 5) {
$pagination.eq(0).removeClass('-hidden')
.find('.btn').removeAttr('tabindex');
if (context.index >= 6) {
$pagination.eq(0).addClass('-ellipsis');
}
}
if (context.index < context.pages.length - 5) {
$pagination.eq(context.pages.length - 1).removeClass('-hidden')
.find('.btn').removeAttr('tabindex');
if (context.index < context.pages.length - 6) {
$pagination.eq(context.pages.length - 1).addClass('-ellipsis');
}
}
}
};
var pageNav = function ($scope, recordName, callback) {
if (recordName == 'main') {
if ($scope.is('.pagination-item')) {
irma.records.main.index += ($scope.index() * 2 - 1);
}
else {
irma.records.main.index = $scope.closest('li').index();
}
var currentSearch = irma.searchPanel.getCurrentSearch();
irma.searchPanel.submitSearch(currentSearch.$inputs, currentSearch.data);
}
else {
var page,
context = irma.records[recordName];
if ($scope.is('.pagination-item')) {
page = context.index + ($scope.index() * 2 - 1);
}
else {
page = $scope.closest('li').index();
}
context.index = page;
context.currentPage = context.pages[page];
var range = [
page * context.pageLength + 1,
(page + 1) * context.pageLength
];
if (context.currentPage.length < context.pageLength) {
range[1] = range[0] + context.currentPage.length - 1;
}
context.range = "" + range[0] + " - " + range[1] + "";
callback(context);
}
};
// ******* INIT ******* //
var init = function () {
$('.date-input').each(function () {
$(this).datepicker({
showOn: "button"
});
});
$('.form-field.-readonly')
.find(':input, button, .btn, a, [tabindex]')
.attr('tabindex', '-1');
// ck editor
$('.js-wysiwyg').each(function () {
var options = {};
if ($(this).data().toolbar) {
options.toolbar = $(this).data().toolbar;
}
CKEDITOR.timestamp = irma.templateVersion;
CKEDITOR.replace($(this).attr('id'), options);
});
// date picker
$('.date-input').each(function () {
$(this)
.datepicker('option', 'dayNamesMin', dayNames)
.datepicker('option', 'defaultDate', $(this).attr('data-initial-value'))
.datepicker('option', 'dateFormat', 'dd/mm/yy')
.datepicker('option', 'showOtherMonths', true);
$(this).val($(this).attr('data-initial-value'))
.removeAttr('data-initial-value');
setDate($(this).closest('.date-field'));
});
$(document).on('keyup change paste', 'input.date-input', function (e) {
var value = $(this).val();
if (e.which != 8) {
var digits = value.replace(/\D+/g, ''),
date = digits.substr(0, 2);
if (digits.length > 1) date += '/';
if (digits.length > 2) date += digits.substr(2, 2);
if (digits.length > 3) date += '/';
if (digits.length > 4) date += digits.substr(4, 4);
$(this).val(date);
setDate($(this).closest('.date-field'));
}
if (/^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/.test(value)) {
setDate($(this).closest('.date-field'));
}
}).on('click', '.js-date-picker', function (e) {
e.stopPropagation();
var $input = $(this).siblings('.date-input');
var $field = $(this).closest('.date-field');
$(this).toggleClass('-active').blur();
if ($(this).is('.-active')) {
$input.datepicker();
$input
.datepicker('option', 'dayNamesMin', dayNames)
.datepicker('option', 'defaultDate', $input.attr('data-initial-value'))
.datepicker('option', 'dateFormat', 'dd/mm/yy')
.datepicker('option', 'showOtherMonths', true)
.datepicker('option', 'onClose', function () {
setDate($field);
})
.datepicker('option', 'showOn', 'button')
.datepicker('show');
$('.ui-datepicker').appendTo($field).removeAttr('style').show();
}
else {
$(this).siblings('.date-input').datepicker('hide');
}
}).on('click', '.site-container', function () {
$('.date-input').datepicker('hide');
$('.js-date-picker').removeClass('-active');
});
// advanced lookup
// add pre-defined search tags
$('.search-box[data-prefill-value]').each(function () {
var data = $(this).data();
var value = data.prefillValue;
var display = data.prefillDisplay;
var name = data.name;
addTag(name, display, value);
});
// ---------
$(document).on('click', '.js-advanced-search', function () {
var term = $(this).closest('.search-box').find('.search-box-input').val(),
$searchBox = $(this).closest('.search-box'),
data = $searchBox.data();
if (!data.name) {
data.name = $searchBox.find('input').attr('name');
}
if (term.length === 0) {
term = $(this).closest('.search-box').find('.tag-item .text').text().split(', ')[0];
}
data.rowClass = data.hasOwnProperty('rowClass') ? data.rowClass : "js-add-tag";
advancedLookup(data, term);
}).on('keypress', '.js-advanced-search-input', function (e) {
if (e.which == 13) {
e.preventDefault();
var term = $(this).val(),
$searchBox = $(this).closest('.search-box'),
data = $searchBox.data();
if (!data.name) {
data.name = $searchBox.find('input').attr('name');
}
data.rowClass = data.hasOwnProperty('rowClass') ? data.rowClass : "js-add-tag";
advancedLookup(data, term);
}
}).on('click', '.js-table-lookup', function () {
var $row = $(this).closest('.table-row'),
$table = $(this).closest('.table');
currentData = $row.data();
currentData.columns = $table.data().columns;
currentData.title = $table.data().title;
if ($table.data().actions) {
currentData.actions = $table.data().actions;
}
currentData.rowClass = "js-update-row";
$table.find('.table-row').removeClass('-active');
$row.addClass('-active');
setTimeout(function () {
$('.modal-advanced-search').find('input').eq(0).focus();
}, 100);
}).on('click', ".advanced-search-form input[type='checkbox'], .js-btn-update-advanced", function () {
updateAdvancedLookup($(this));
}).on('keypress', '.advanced-search-form input', function (e) {
if (e.which == 13) {
e.preventDefault();
updateAdvancedLookup($(this));
}
}).on('change keyup', '.modal .form-field input', function () {
if ($(this).closest('.form-field').is('[data-required]')) {
var invalid = validateInput($(this));
}
}).on('click', '.results-pagination .btn', function () {
pageNav($(this), $(this).closest('.search-results').attr('data-search-type'), showRecords);
}).on('click', '.js-add-tag', function () {
var id = $(this).attr('data-return'),
name = $(this).attr('data-return-display'),
label = $(this).closest('.search-results').attr('data-filter');
if (id && id.length) {
addTag(label, name, id);
$(this).closest('.js-modal').find('.js-modal-exit').eq(0).trigger('click');
}
}).on('click', '.js-remove-tag', function () {
removeTag($(this));
}).on('click', '.js-update-row', function () {
var $dataCells = $(this).find('.table-cell'),
$tableCells = $('.table-row.-active .table-cell');
$dataCells.each(function (i) {
var data = {
name: $(this).attr('data-search-attr'),
value: $(this).find('.text').text()
};
$tableCells.each(function () {
if (data.name == $(this).attr('data-name')) {
$(this).find('input').val(data.value);
}
});
});
irma.modal.closeModal();
});
$(document).on('keydown', '.btn, [role=\'button\']', function (e) {
if (e.which == 13 || e.which == 32) {
e.preventDefault();
e.stopPropagation();
$(this).trigger('click');
}
}).on('click', '.btn:not(.js-dropdown), [role=\'button\']:not(.js-dropdown)', function (e) {
if (!$(this).is('.js-tooltip-help')) {
$(this).blur();
}
}).on('click', "input[type='checkbox']", function () {
$(this).blur();
}).on('keyup', "input[type='radio']", function (e) {
e.preventDefault();
if (e.which == 13 || e.which == 32) {
$(this).trigger('click');
}
});
// compound field
var $forms = $('form').filter(function () {
return $(this).find('.compound-field').length;
});
$forms.on('submit', function (e) {
var $form = $(this);
var $inputs = $form.find('input[name]').filter(function () {
var $field = $(this).closest('.compound-field');
return $field.length & $field.find("input[type='checkbox']").length;
});
$inputs.each(function () {
var $checkbox = $(this).closest('.compound-field').find("input[type='checkbox']");
if ($checkbox[0].checked) {
$(this).attr('name', $(this).data().name);
}
else {
$(this).data({ name: $(this).attr('name') })
.removeAttr('name');
}
});
});
// ckeditor
$(document).on('click', '.cke_dialog_background_cover', function () {
CKEDITOR.dialog.getCurrent().hide();
});
// modal input
var updateInput = function (id, value) {
console.log('#' + id, $('#' + id));
$('#' + id).val(value);
};
$(document).on('click', '.js-edit-input', function () {
var $modal = $('.modal-input');
var data = $(this).data();
var text = $('#' + data.id).val();
$modal.data(data);
$modal.find('.js-label').text(data.label);
$modal.find('.js-update-input-textarea')
.val(text)
.attr('maxlength', data.maxlength);
}).on('keypress', '.js-update-input-textarea', function (e) {
if (e.which === 13) {
var $modal = $(this).closest('.modal');
var id = $modal.data().id;
updateInput(id, $(this).val());
irma.modal.closeModal($modal);
}
}).on('click', '.js-update-input', function () {
var $modal = $(this).closest('.modal');
var value = $modal.find('.js-update-input-textarea').val();
var id = $modal.data().id;
updateInput(id, value);
irma.modal.closeModal($modal);
});
};
return {
init: init,
showRecords: showRecords,
validateInput: validateInput,
addTag: addTag,
setRecentSearch: setRecentSearch,
getRecentSearch: getRecentSearch
};
}());
There are no notes for this item.