Commit 03e9004a by Insira Walisundara

Create Role wizard - done

Put on Hold
parent 13a23339
#header_wrap{
background-image: url('../images/companyLogo.png');
}
@media (min-width: 768px) {
.container-fluid{
padding-left: 75px;
padding-right: 75px;
}
div.pagetitle_inner{
padding: 0px 75px;
}
#header_wrap{
background-position-x: 75px;
}
}
/* some specific Styles */
/* workflow table */
.workflowTable thead{
display: none;
}
/* Email Template Editor */
textarea.emailTemplateEditor + div.classyedit .editor{
min-height: 300px;
}
/* Customise Apollo Tests */
.custom-personality-scale-table .slider-range{
margin: 0px 20px;
}
.custom-personality-scale-table .slider-range .ui-slider-handle{
border-color: #9a9a9a;
}
.custom-personality-scale-table .slider-range-1point.ui-widget.ui-widget-content{
background: lightgreen;
}
.custom-personality-scale-table .slider-range-1point .ui-slider-range{
background: indianred;
}
.custom-personality-scale-table .slider-range-2point.ui-widget.ui-widget-content{
background: #ffff78;
}
.custom-personality-scale-table .slider-range-2point .ui-slider-range{
background: lightgreen;
}
.custom-personality-scale-table .slider-range-3point.noUi-horizontal{
height: .9em;
}
.custom-personality-scale-table .slider-range-3point.noUi-horizontal .noUi-handle{
width: 1.2em;
height: 1.2em;
left: -7px;
top: -3px;
border-color: #9a9a9a;
font-size: 8pt;
}
.custom-personality-scale-table .slider-range-3point.noUi-horizontal .noUi-handle:BEFORE,
.custom-personality-scale-table .slider-range-3point.noUi-horizontal .noUi-handle:AFTER{
background: none;
}
.custom-personality-scale-table .slider-range-3point .veryLowColor{
background: indianred;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.custom-personality-scale-table .slider-range-3point .lowColor{
background: #ffff78;
}
.custom-personality-scale-table .slider-range-3point .perfectColor{
background: lightgreen;
}
.custom-personality-scale-table .slider-range-3point .overColor{
background: darkgreen;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.custom-personality-scale-table .slider-range-3point .noUi-marker-horizontal.noUi-marker-large{
height: 7px;
}
.custom-personality-scale-table .slider-range-3point{
font-size: 0.8em;
}
.custom-personality-scale-table .slider-range-3point .noUi-pips-horizontal{
padding: 5px 0px;
}
.custom-personality-scale-table .slider-range-3point .noUi-tooltip{
font-size: 12px;
}
/* questions table */
.customise-questions-table .slider-range{
margin: 0px 42px 0px 20px;
}
.customise-questions-table .slider-range .ui-slider-handle{
border-color: #9a9a9a;
}
.customise-questions-table .slider-range-1point.ui-widget.ui-widget-content{
background: lightgreen;
}
.customise-questions-table .slider-range-1point .ui-slider-range{
background: indianred;
}
/* breadcrumb styles */
.btn-breadcrumb .btn:not(:last-child):after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-bottom: 17px solid transparent;
border-left: 10px solid white;
position: absolute;
top: 50%;
margin-top: -17px;
left: 100%;
z-index: 3;
}
.btn-breadcrumb .btn:not(:last-child):before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-bottom: 17px solid transparent;
border-left: 10px solid rgb(173, 173, 173);
position: absolute;
top: 50%;
margin-top: -17px;
margin-left: 1px;
left: 100%;
z-index: 3;
}
.btn-breadcrumb.btn-group-radio input[type=radio]:checked + .btn{
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
.btn-breadcrumb.btn-group-radio input[type=radio]:checked + .btn:not(:last-child):after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-bottom: 17px solid transparent;
border-left: 10px solid #e6e6e6;
position: absolute;
top: 50%;
margin-top: -17px;
left: 100%;
z-index: 3;
}
/** The Spacing **/
.btn-breadcrumb .btn {
padding:6px 12px 6px 24px;
}
.btn-breadcrumb .btn:first-child {
padding:6px 6px 6px 10px;
margin-right:1px;
}
.btn-breadcrumb .btn:last-child {
padding:6px 18px 6px 24px;
margin-left:0px;
}
/** Default button **/
.btn-breadcrumb .btn:not(:last-child):after {
border-left: 10px solid #fff;
}
.btn-breadcrumb .btn:not(:last-child):before {
border-left: 10px solid #ccc;
}
.btn-breadcrumb .btn:hover:not(:last-child):after {
border-left: 10px solid #ebebeb;
}
.btn-breadcrumb .btn:hover:not(:last-child):before {
border-left: 10px solid #adadad;
}
.btn-group.btn-breadcrumb .btn:HOVER{
background-color: #e6e6e6;
}
\ No newline at end of file
.oneit-vertical-tab{
width: 5%;
/* width: 16.66666667%; */
}
.oneit-vertical-tab-right-content{
width: 95%;
/* width: 83.33333333%; */
}
.oneit-vertical-tab span.tabIcon{
font-size: 1.7em;
/* padding-right: 1%; */
}
.oneit-vertical-tab span.tabLink{
display: none;
}
.oneit-vertical-tab .nav > li > a > span.glyphicon,
.oneit-vertical-tab .nav > li > a > span.fa{
color: #000;
}
.oneit-vertical-tab .nav > li.active > a > span.glyphicon,
.oneit-vertical-tab .nav > li.active > a > span.fa{
color: #fff;
}
\ No newline at end of file
/*! jQuery-ui-Slider-Pips - v1.11.4 - 2016-09-04
* Copyright (c) 2016 Simon Goellner <simey.me@gmail.com>; Licensed MIT */
/* HORIZONTAL */
/* increase bottom margin to fit the pips */
.ui-slider-horizontal.ui-slider-pips {
margin-bottom: 1.4em;
}
/* default hide the labels and pips that arnt visible */
/* we just use css to hide incase we want to show certain */
/* labels/pips individually later */
.ui-slider-pips .ui-slider-label,
.ui-slider-pips .ui-slider-pip-hide {
display: none;
}
/* now we show any labels that we've set to show in the options */
.ui-slider-pips .ui-slider-pip-label .ui-slider-label {
display: block;
}
/* PIP/LABEL WRAPPER */
/* position each pip absolutely just below the default slider */
/* and also prevent accidental selection */
.ui-slider-pips .ui-slider-pip {
width: 2em;
height: 1em;
line-height: 1em;
position: absolute;
font-size: 0.8em;
color: #999;
overflow: visible;
text-align: center;
top: 20px;
left: 20px;
margin-left: -1em;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ui-state-disabled.ui-slider-pips .ui-slider-pip {
cursor: default;
}
/* little pip/line position & size */
.ui-slider-pips .ui-slider-line {
background: #999;
width: 1px;
height: 3px;
position: absolute;
left: 50%;
}
/* the text label postion & size */
/* it overflows so no need for width to be accurate */
.ui-slider-pips .ui-slider-label {
position: absolute;
top: 5px;
left: 50%;
margin-left: -1em;
width: 2em;
}
/* make it easy to see when we hover a label */
.ui-slider-pips:not(.ui-slider-disabled) .ui-slider-pip:hover .ui-slider-label {
color: black;
font-weight: bold;
}
/* VERTICAL */
/* vertical slider needs right-margin, not bottom */
.ui-slider-vertical.ui-slider-pips {
margin-bottom: 1em;
margin-right: 2em;
}
/* align vertical pips left and to right of the slider */
.ui-slider-vertical.ui-slider-pips .ui-slider-pip {
text-align: left;
top: auto;
left: 20px;
margin-left: 0;
margin-bottom: -0.5em;
}
/* vertical line/pip should be horizontal instead */
.ui-slider-vertical.ui-slider-pips .ui-slider-line {
width: 3px;
height: 1px;
position: absolute;
top: 50%;
left: 0;
}
.ui-slider-vertical.ui-slider-pips .ui-slider-label {
top: 50%;
left: 0.5em;
margin-left: 0;
margin-top: -0.5em;
width: 2em;
}
/* FLOATING HORIZTONAL TOOLTIPS */
/* remove the godawful looking focus outline on handle and float */
.ui-slider-float .ui-slider-handle:focus,
.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label,
.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label,
.ui-slider-float .ui-slider-handle:focus .ui-slider-tip-label
.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip-label {
outline: none;
}
/* style tooltips on handles and on labels */
/* also has a nice transition */
.ui-slider-float .ui-slider-tip,
.ui-slider-float .ui-slider-tip-label {
position: absolute;
visibility: hidden;
top: -40px;
display: block;
width: 34px;
margin-left: -18px;
left: 50%;
height: 20px;
line-height: 20px;
background: white;
border-radius: 3px;
border: 1px solid #888;
text-align: center;
font-size: 12px;
opacity: 0;
color: #333;
-webkit-transition-property: opacity, top, visibility;
transition-property: opacity, top, visibility;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-transition-duration: 200ms, 200ms, 0ms;
transition-duration: 200ms, 200ms, 0ms;
-webkit-transition-delay: 0ms, 0ms, 200ms;
transition-delay: 0ms, 0ms, 200ms;
}
/* show the tooltip on hover or focus */
/* also switch transition delay around */
.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,
.ui-slider-float .ui-slider-handle.ui-state-hover .ui-slider-tip,
.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip,
.ui-slider-float .ui-slider-handle.ui-state-active .ui-slider-tip,
.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
opacity: 1;
top: -30px;
visibility: visible;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 200ms, 200ms, 0ms;
transition-delay: 200ms, 200ms, 0ms;
}
/* put label tooltips below slider */
.ui-slider-float .ui-slider-pip .ui-slider-tip-label {
top: 42px;
}
.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
top: 32px;
font-weight: normal;
}
/* give the tooltip a css triangle arrow */
.ui-slider-float .ui-slider-tip:after,
.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
content: " ";
width: 0;
height: 0;
border: 5px solid rgba(255, 255, 255, 0);
border-top-color: white;
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -5px;
}
/* put a 1px border on the tooltip arrow to match tooltip border */
.ui-slider-float .ui-slider-tip:before,
.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
content: " ";
width: 0;
height: 0;
border: 5px solid rgba(255, 255, 255, 0);
border-top-color: #888;
position: absolute;
bottom: -11px;
left: 50%;
margin-left: -5px;
}
/* switch the arrow to top on labels */
.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
border: 5px solid rgba(255, 255, 255, 0);
border-bottom-color: white;
top: -10px;
}
.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
border: 5px solid rgba(255, 255, 255, 0);
border-bottom-color: #888;
top: -11px;
}
/* FLOATING VERTICAL TOOLTIPS */
/* tooltip floats to left of handle */
.ui-slider-vertical.ui-slider-float .ui-slider-tip,
.ui-slider-vertical.ui-slider-float .ui-slider-tip-label {
top: 50%;
margin-top: -11px;
width: 34px;
margin-left: 0px;
left: -60px;
color: #333;
-webkit-transition-duration: 200ms, 200ms, 0;
transition-duration: 200ms, 200ms, 0;
-webkit-transition-property: opacity, left, visibility;
transition-property: opacity, left, visibility;
-webkit-transition-delay: 0, 0, 200ms;
transition-delay: 0, 0, 200ms;
}
.ui-slider-vertical.ui-slider-float .ui-slider-handle:hover .ui-slider-tip,
.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-hover .ui-slider-tip,
.ui-slider-vertical.ui-slider-float .ui-slider-handle:focus .ui-slider-tip,
.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-focus .ui-slider-tip,
.ui-slider-vertical.ui-slider-float .ui-slider-handle.ui-state-active .ui-slider-tip,
.ui-slider-vertical.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
top: 50%;
margin-top: -11px;
left: -50px;
}
/* put label tooltips to right of slider */
.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label {
left: 47px;
}
.ui-slider-vertical.ui-slider-float .ui-slider-pip:hover .ui-slider-tip-label {
left: 37px;
}
/* give the tooltip a css triangle arrow */
.ui-slider-vertical.ui-slider-float .ui-slider-tip:after,
.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
border: 5px solid rgba(255, 255, 255, 0);
border-left-color: white;
border-top-color: transparent;
position: absolute;
bottom: 50%;
margin-bottom: -5px;
right: -10px;
margin-left: 0;
top: auto;
left: auto;
}
.ui-slider-vertical.ui-slider-float .ui-slider-tip:before,
.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
border: 5px solid rgba(255, 255, 255, 0);
border-left-color: #888;
border-top-color: transparent;
position: absolute;
bottom: 50%;
margin-bottom: -5px;
right: -11px;
margin-left: 0;
top: auto;
left: auto;
}
.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:after {
border: 5px solid rgba(255, 255, 255, 0);
border-right-color: white;
right: auto;
left: -10px;
}
.ui-slider-vertical.ui-slider-float .ui-slider-pip .ui-slider-tip-label:before {
border: 5px solid rgba(255, 255, 255, 0);
border-right-color: #888;
right: auto;
left: -11px;
}
/* SELECTED STATES */
/* Comment out this chuck of code if you don't want to have
the new label colours shown */
.ui-slider-pips [class*=ui-slider-pip-initial] {
font-weight: bold;
color: #14CA82;
}
.ui-slider-pips .ui-slider-pip-initial-2 {
color: #1897C9;
}
.ui-slider-pips [class*=ui-slider-pip-selected] {
font-weight: bold;
color: #FF7A00;
}
.ui-slider-pips .ui-slider-pip-inrange {
color: black;
}
.ui-slider-pips .ui-slider-pip-selected-2 {
color: #E70081;
}
.ui-slider-pips [class*=ui-slider-pip-selected] .ui-slider-line,
.ui-slider-pips .ui-slider-pip-inrange .ui-slider-line {
background: black;
}
.switch-button-label {
float: left;
font-size: 10pt;
cursor: pointer;
}
.switch-button-label.off {
color: #adadad;
}
.switch-button-label.on {
color: #0088CC;
}
.switch-button-background {
float: left;
position: relative;
background: #ccc;
border: 1px solid #aaa;
margin: 1px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
}
.switch-button-button {
position: absolute;
left: -1px;
top : -1px;
background: #FAFAFA;
border: 1px solid #aaa;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
......@@ -261,16 +261,18 @@ table {
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
content: "\2a";
content: "\002a";
}
.glyphicon-plus:before {
content: "\2b";
content: "\002b";
}
.glyphicon-euro:before {
.glyphicon-euro:before,
.glyphicon-eur:before {
content: "\20ac";
}
.glyphicon-minus:before {
......@@ -864,6 +866,192 @@ table {
.glyphicon-tree-deciduous:before {
content: "\e200";
}
.glyphicon-cd:before {
content: "\e201";
}
.glyphicon-save-file:before {
content: "\e202";
}
.glyphicon-open-file:before {
content: "\e203";
}
.glyphicon-level-up:before {
content: "\e204";
}
.glyphicon-copy:before {
content: "\e205";
}
.glyphicon-paste:before {
content: "\e206";
}
.glyphicon-alert:before {
content: "\e209";
}
.glyphicon-equalizer:before {
content: "\e210";
}
.glyphicon-king:before {
content: "\e211";
}
.glyphicon-queen:before {
content: "\e212";
}
.glyphicon-pawn:before {
content: "\e213";
}
.glyphicon-bishop:before {
content: "\e214";
}
.glyphicon-knight:before {
content: "\e215";
}
.glyphicon-baby-formula:before {
content: "\e216";
}
.glyphicon-tent:before {
content: "\26fa";
}
.glyphicon-blackboard:before {
content: "\e218";
}
.glyphicon-bed:before {
content: "\e219";
}
.glyphicon-apple:before {
content: "\f8ff";
}
.glyphicon-erase:before {
content: "\e221";
}
.glyphicon-hourglass:before {
content: "\231b";
}
.glyphicon-lamp:before {
content: "\e223";
}
.glyphicon-duplicate:before {
content: "\e224";
}
.glyphicon-piggy-bank:before {
content: "\e225";
}
.glyphicon-scissors:before {
content: "\e226";
}
.glyphicon-bitcoin:before {
content: "\e227";
}
.glyphicon-btc:before {
content: "\e227";
}
.glyphicon-xbt:before {
content: "\e227";
}
.glyphicon-yen:before {
content: "\00a5";
}
.glyphicon-jpy:before {
content: "\00a5";
}
.glyphicon-ruble:before {
content: "\20bd";
}
.glyphicon-rub:before {
content: "\20bd";
}
.glyphicon-scale:before {
content: "\e230";
}
.glyphicon-ice-lolly:before {
content: "\e231";
}
.glyphicon-ice-lolly-tasted:before {
content: "\e232";
}
.glyphicon-education:before {
content: "\e233";
}
.glyphicon-option-horizontal:before {
content: "\e234";
}
.glyphicon-option-vertical:before {
content: "\e235";
}
.glyphicon-menu-hamburger:before {
content: "\e236";
}
.glyphicon-modal-window:before {
content: "\e237";
}
.glyphicon-oil:before {
content: "\e238";
}
.glyphicon-grain:before {
content: "\e239";
}
.glyphicon-sunglasses:before {
content: "\e240";
}
.glyphicon-text-size:before {
content: "\e241";
}
.glyphicon-text-color:before {
content: "\e242";
}
.glyphicon-text-background:before {
content: "\e243";
}
.glyphicon-object-align-top:before {
content: "\e244";
}
.glyphicon-object-align-bottom:before {
content: "\e245";
}
.glyphicon-object-align-horizontal:before {
content: "\e246";
}
.glyphicon-object-align-left:before {
content: "\e247";
}
.glyphicon-object-align-vertical:before {
content: "\e248";
}
.glyphicon-object-align-right:before {
content: "\e249";
}
.glyphicon-triangle-right:before {
content: "\e250";
}
.glyphicon-triangle-left:before {
content: "\e251";
}
.glyphicon-triangle-bottom:before {
content: "\e252";
}
.glyphicon-triangle-top:before {
content: "\e253";
}
.glyphicon-console:before {
content: "\e254";
}
.glyphicon-superscript:before {
content: "\e255";
}
.glyphicon-subscript:before {
content: "\e256";
}
.glyphicon-menu-left:before {
content: "\e257";
}
.glyphicon-menu-right:before {
content: "\e258";
}
.glyphicon-menu-down:before {
content: "\e259";
}
.glyphicon-menu-up:before {
content: "\e260";
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
......
/*! nouislider - 9.2.0 - 2017-01-11 10:35:35 */
/* Functional styling;
* These styles are required for noUiSlider to function.
* You don't need to change these rules to apply your design.
*/
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-ms-touch-action: none;
touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-target {
position: relative;
direction: ltr;
}
.noUi-base {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
/* Fix 401 */
}
.noUi-connect {
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
}
.noUi-origin {
position: absolute;
height: 0;
width: 0;
}
.noUi-handle {
position: relative;
z-index: 1;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
-webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
.noUi-state-drag * {
cursor: inherit !important;
}
/* Painting and performance;
* Browsers can paint handles in their own layer.
*/
.noUi-base,
.noUi-handle {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Slider size and handle placement;
*/
.noUi-horizontal {
height: 18px;
}
.noUi-horizontal .noUi-handle {
width: 34px;
height: 28px;
left: -17px;
top: -6px;
}
.noUi-vertical {
width: 18px;
}
.noUi-vertical .noUi-handle {
width: 28px;
height: 34px;
left: -6px;
top: -17px;
}
/* Styling;
*/
.noUi-target {
background: #FAFAFA;
border-radius: 4px;
border: 1px solid #D3D3D3;
box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
}
.noUi-connect {
background: #3FB8AF;
box-shadow: inset 0 0 3px rgba(51, 51, 51, 0.45);
-webkit-transition: background 450ms;
transition: background 450ms;
}
/* Handles and cursors;
*/
.noUi-draggable {
cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
cursor: ns-resize;
}
.noUi-handle {
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #FFF;
cursor: default;
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
}
.noUi-active {
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
}
/* Handle stripes;
*/
.noUi-handle:before,
.noUi-handle:after {
content: "";
display: block;
position: absolute;
height: 14px;
width: 1px;
background: #E8E7E6;
left: 14px;
top: 6px;
}
.noUi-handle:after {
left: 17px;
}
.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
width: 14px;
height: 1px;
left: 6px;
top: 14px;
}
.noUi-vertical .noUi-handle:after {
top: 17px;
}
/* Disabled state;
*/
[disabled] .noUi-connect {
background: #B8B8B8;
}
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
cursor: not-allowed;
}
/* Base;
*
*/
.noUi-pips,
.noUi-pips * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-pips {
position: absolute;
color: #999;
}
/* Values;
*
*/
.noUi-value {
position: absolute;
text-align: center;
}
.noUi-value-sub {
color: #ccc;
font-size: 10px;
}
/* Markings;
*
*/
.noUi-marker {
position: absolute;
background: #CCC;
}
.noUi-marker-sub {
background: #AAA;
}
.noUi-marker-large {
background: #AAA;
}
/* Horizontal layout;
*
*/
.noUi-pips-horizontal {
padding: 10px 0;
height: 80px;
top: 100%;
left: 0;
width: 100%;
}
.noUi-value-horizontal {
-webkit-transform: translate3d(-50%, 50%, 0);
transform: translate3d(-50%, 50%, 0);
}
.noUi-marker-horizontal.noUi-marker {
margin-left: -1px;
width: 2px;
height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
height: 15px;
}
/* Vertical layout;
*
*/
.noUi-pips-vertical {
padding: 0 10px;
height: 100%;
top: 0;
left: 100%;
}
.noUi-value-vertical {
-webkit-transform: translate3d(0, 50%, 0);
transform: translate3d(0, 50%, 0);
padding-left: 25px;
}
.noUi-marker-vertical.noUi-marker {
width: 5px;
height: 2px;
margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
width: 15px;
}
.noUi-tooltip {
display: block;
position: absolute;
border: 1px solid #D9D9D9;
border-radius: 3px;
background: #fff;
color: #000;
padding: 5px;
text-align: center;
}
.noUi-horizontal .noUi-tooltip {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
left: 50%;
bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
top: 50%;
right: 120%;
}
......@@ -771,30 +771,33 @@ input[type="file"]{
}
/* glyphicon related css */
.glyphicon{
font-size: 1em;
}
.icon-stack {
display: inline-block;
height: 2em;
line-height: 2em;
height: 1em;
line-height: 1em;
position: relative;
vertical-align: -35%;
width: 2em;
}
.icon-stack .icon-stack-base {
font-size: 2em;
width: 1em;
}
/* .icon-stack .icon-stack-base { */
/* font-size: 2em; */
/* } */
.icon-stack [class^="icon-"], .icon-stack [class*=" icon-"] {
display: block;
font-size: 1em;
/* font-size: 1em; */
height: 100%;
line-height: inherit;
position: absolute;
text-align: center;
width: 100%;
}
.icon-stack .glyphicon{
font-size: 2em;
}
glyphicon-lg{
/* .icon-stack .glyphicon{ */
/* font-size: 1em; */
/* } */
.glyphicon-lg{
font-size:1.33333333em;
line-height:.75em;
vertical-align:-15%
......@@ -811,5 +814,53 @@ glyphicon-lg{
.glyphicon-5x{
font-size:5em
}
.icon-stack.glyphicon-lg{
font-size:1em;
font-size:1.33333333em;
line-height:.75em;
height:1.33333333em;
width:1.33333333em;
vertical-align:-15%
}
.icon-stack.glyphicon-2x{
font-size:1em;
line-height:2em;
height:2em;
width:2em;
}
.icon-stack.glyphicon-3x{
font-size:1em;
line-height:3em;
height:3em;
width:3em;
}
.icon-stack.glyphicon-4x{
font-size:1em;
line-height:4em;
height:4em;
width:4em;
}
.icon-stack.glyphicon-5x{
font-size:1em;
line-height:5em;
height:5em;
width:5em;
}
.icon-stack .glyphicon-lg,
.icon-stack .glyphicon-2x,
.icon-stack .glyphicon-3x,
.icon-stack .glyphicon-4x,
.icon-stack .glyphicon-5x{
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
/* Site Styles */
table.table-noheader thead{
display: none;
}
td div.layout_label{
font-size: 8pt;
}
/home.jsp
/GeneralConfig_PROJECT.xml
/editUser.jsp
/companyHomePage.jsp
/listCompanyRole.jsp
/searchCompanyRole.jsp
/createCompanyRoleWizard-BasicDetails.jsp
/createCompanyRoleWizard-CustomiseWorkflow.jsp
/createCompanyRoleWizard-CustomiseSkillsSelfAssessment.jsp
/createCompanyRoleWizard-CustomiseCandidateCompetitionEmail.jsp
/createCompanyRoleWizard-CustomiseApolloTests.jsp
/createCompanyRoleWizard-Finish.jsp
/createCompanyRoleWizard-CustomisePhoneInPersonMeetings.jsp
/editCompanyRole.jsp
/viewCandidateResults.jsp
/viewCandidateResult.jsp
/editCompanyRole_tab1100Candidates.jsp
/editCompanyRole_tab1200RoleSummary.jsp
/viewCandidateResult_tab1100Profile.jsp
/viewCandidateResult_tab1200.jsp
/viewCandidateResult_tab1200SkillsAssessment.jsp
/viewCandidateResult_tab1300SkillsAssessment.jsp
/viewCandidateResult_tab1200Assessments.jsp
<%@ page extends="oneit.servlets.jsp.JSPInclude"%>
<%@ include file="/setuprequest.jsp"%>
<%@ include file="stdimports.jsp"%>
<%@include file="/editor/stdimports.jsp"%>
<%
ORMProcessState process = (ORMProcessState)ProcessDecorator.getDefaultProcess(request);
ObjectTransaction objTran = process.getTransaction ();
User user = (User) process.getAttribute("User");
%>
<oneit:dynIncluded>
<oneit:tab name="UserDetails" tabText="User Details">
<oneit:skin tagName="layout_fieldset" legend="User Details">
<oneit:layout_total widths="<%= new double[] {2, 5} %>" skin="bootstrap">
<oneit:skin tagName="layout_row">
<oneit:layout_label width="1"><oneit:ormlabel obj="<%= user %>" field="Username"/></oneit:layout_label>
<oneit:layout_field width="1">
<oneit:ormInput obj="<%= user %>" attributeName="Username" />
</oneit:layout_field>
</oneit:skin>
<oneit:skin tagName="layout_row">
<oneit:layout_label width="1"><oneit:ormlabel obj="<%= user %>" field="Password"/></oneit:layout_label>
<oneit:layout_field width="1">
<oneit:input type='password' name="<%= Password%>"/>
</oneit:layout_field>
</oneit:skin>
<oneit:skin tagName="layout_row">
<oneit:layout_label width="1"><oneit:ormlabel obj="<%= user %>" field="VerifyPassword"/></oneit:layout_label>
<oneit:layout_field width="1">
<oneit:input type='password' name="<%= Verify Password%>"/>
</oneit:layout_field>
</oneit:skin>
<oneit:skin tagName="layout_row">
<oneit:layout_label width="1"><oneit:ormlabel obj="<%= user %>" field="FirstName"/></oneit:layout_label>
<oneit:layout_field width="1">
<oneit:ormInput obj="<%= user %>" attributeName="FirstName" />
</oneit:layout_field>
</oneit:skin>
<oneit:skin tagName="layout_row">
<oneit:layout_label width="1"><oneit:ormlabel obj="<%= user %>" field="LastName"/></oneit:layout_label>
<oneit:layout_field width="1">
<oneit:ormInput obj="<%= user %>" attributeName="LastName" />
</oneit:layout_field>
</oneit:skin>
<oneit:skin tagName="layout_row">
<oneit:layout_label width="1"><oneit:ormlabel obj="<%= user %>" field="CompanyName"/></oneit:layout_label>
<oneit:layout_field width="1">
<oneit:ormInput obj="<%= user %>" attributeName="CompanyName" />
</oneit:layout_field>
</oneit:skin>
<oneit:skin tagName="layout_row">
<oneit:layout_label width="1"><oneit:ormlabel obj="<%= user %>" field="Logo"/></oneit:layout_label>
<oneit:layout_field width="1">
<oneit:ormInput obj="<%= user %>" attributeName="Logo" />
</oneit:layout_field>
</oneit:skin>
</oneit:layout_total>
</oneit:skin>
</oneit:tab>
</oneit:dynIncluded>
\ No newline at end of file
$(function(){
//Slider 1 Point
$(".custom-personality-scale-table .slider-range-1point" ).each(function(){
var slider = $(this);
slider.slider({
orientation: "horizontal",
range: "min",
max: 100,
value: slider.data("slider-value")
})
.slider("pips", {
labels: {
"first": slider.data("slider-firstpip"),
"last": slider.data("slider-lastpip")
},
step: 10,
rest: "label"
})
.slider("float");
});
//Slider 2 Point
$(".custom-personality-scale-table .slider-range-2point" ).slider({
range: true,
orientation: "horizontal",
min: 0,
max: 100,
values: [30, 70]
})
.slider("pips", {
labels: {
"first": "Socially distant",
"last": "High need to be liked"
},
step: 10,
rest: "label"
})
.slider("float");
//Slider 3 Point
/* https://refreshless.com/nouislider/ */
var slider3Point = $(".custom-personality-scale-table .slider-range-3point" );
slider3Point.each(function(){
var slider = $(this);
noUiSlider.create(this, {
start: [50,70, 80],
step: 1,
connect: [true, true, true, true],
range: {
'min': [ 0 ],
'max': [ 100 ]
},
tooltips: true,
format: wNumb({
decimals: 0
}),
pips: { // Show a scale with the slider
mode: 'positions',
values: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
density: 10
// filter: function(value, type){
// return value % 10 ? 1 : 0;
// }
}
});
});
slider3Point.find(".noUi-handle").on({
mouseenter: function () {
$(this).find('.noUi-tooltip').show();
},
click: function () {
$(this).find('.noUi-tooltip').show();
},
mouseleave: function () {
$(this).find('.noUi-tooltip').hide();
},
}).find('.noUi-tooltip').hide();
slider3Point.find(".noUi-connect").each(function(index){
var item = $(this);
if(index == 0){
item.addClass('veryLowColor');
}else if(index == 1){
item.addClass('lowColor');
}else if(index == 2){
item.addClass('perfectColor');
}else if(index == 3){
item.addClass('overColor');
}
});
slider3Point.find(".noUi-pips > div:nth-child(2)").text('Unwilling to take responsibility');
slider3Point.find(".noUi-pips > div:nth-child(2)").css('width','14%');
slider3Point.find(".noUi-pips > div:nth-child(22)").text('Over responsible');
slider3Point.find(".noUi-pips > div:nth-child(22)").css('width','14%');
// slider3Point.find(".noUi-pips > div.noUi-marker:nth-child(11)").text('Over resposible');
});
\ No newline at end of file
$(function(){
$('#datePicker').datepicker({
numberOfMonths: 2
});
//Slider 1 Point
$(".customise-questions-table .slider-range-1point" ).each(function(){
var slider = $(this);
slider.slider({
orientation: "horizontal",
range: "min",
max: 10,
value: slider.data("slider-value")
})
.slider("pips", {
labels: {
"first": "Poor",
"last": "Exceptional"
},
step: 1,
rest: "label"
})
.slider("float");
});
});
\ No newline at end of file
$(function(){
// Switch Button
$('.switchCheckbox').wrap('<div style=\"display:inline-block;\"></div>');
$('.switchCheckbox').switchButton({
on_label: 'Open',
off_label: 'Close',
width:40,
height:20,
button_width:20,
labels_placement: 'right'
});
// Add Tab Heading Icons
$('.oneit-vertical-tab .nav > li > a').wrapInner("<span class='tabLink'>")
$('.oneit-vertical-tab .nav > li:NTH-CHILD(2) > a').prepend("<span title='Candidate' class='glyphicon glyphicon-user tabIcon'></span>")
$('.oneit-vertical-tab .nav > li:NTH-CHILD(3) > a').prepend("<span title='Role Summary' class='glyphicon glyphicon-list-alt tabIcon'></span>")
// Tab Menu Animate
$('.oneit-vertical-tab').mouseenter(function(){
$('.oneit-vertical-tab').animate({
width: "16%"
},{
duration: 500,
specialEasing: {
width: "easeOutExpo"
},
queue: false
});
$('.oneit-vertical-tab-right-content').animate({
width: "83%"
},{
duration: 500,
specialEasing: {
width: "easeOutExpo"
},
queue: false
});
$('.oneit-vertical-tab .nav > li > a .tabLink').fadeIn({
duration: 200,
specialEasing: {
width: "easeOutExpo"
},
queue:true
});
}).mouseleave(function(){
$('.oneit-vertical-tab .nav > li > a .tabLink').fadeOut({
duration: 200,
specialEasing: {
width: "easeOutExpo"
},
queue:true
});
$('.oneit-vertical-tab').animate({
width: "5%"
},{
duration: 500,
specialEasing: {
width: "easeInExpo"
},
queue: false
});
$('.oneit-vertical-tab-right-content').animate({
width: "95%"
},{
duration: 500,
specialEasing: {
width: "easeInExpo"
},
queue: false
});
});
});
\ No newline at end of file
/*! jQuery-ui-Slider-Pips - v1.11.4 - 2016-09-04
* Copyright (c) 2016 Simon Goellner <simey.me@gmail.com>; Licensed MIT */
(function($) {
"use strict";
var extensionMethods = {
// pips
pips: function( settings ) {
var slider = this,
i, j, p,
collection = "",
mousedownHandlers,
min = slider._valueMin(),
max = slider._valueMax(),
pips = ( max - min ) / slider.options.step,
$handles = slider.element.find(".ui-slider-handle"),
$pips;
var options = {
first: "label",
/* "label", "pip", false */
last: "label",
/* "label", "pip", false */
rest: "pip",
/* "label", "pip", false */
labels: false,
/* [array], { first: "string", rest: [array], last: "string" }, false */
prefix: "",
/* "", string */
suffix: "",
/* "", string */
step: ( pips > 100 ) ? Math.floor( pips * 0.05 ) : 1,
/* number */
formatLabel: function(value) {
return this.prefix + value + this.suffix;
}
/* function
must return a value to display in the pip labels */
};
if ( $.type( settings ) === "object" || $.type( settings ) === "undefined" ) {
$.extend( options, settings );
slider.element.data("pips-options", options );
} else {
if ( settings === "destroy" ) {
destroy();
} else if ( settings === "refresh" ) {
slider.element.slider( "pips", slider.element.data("pips-options") );
}
return;
}
// we don't want the step ever to be a floating point or negative
// (or 0 actually, so we'll set it to 1 in that case).
slider.options.pipStep = Math.abs( Math.round( options.step ) ) || 1;
// get rid of all pips that might already exist.
slider.element
.off( ".selectPip" )
.addClass("ui-slider-pips")
.find(".ui-slider-pip")
.remove();
// small object with functions for marking pips as selected.
var selectPip = {
single: function(value) {
this.resetClasses();
$pips
.filter(".ui-slider-pip-" + this.classLabel(value) )
.addClass("ui-slider-pip-selected");
if ( slider.options.range ) {
$pips.each(function(k, v) {
var pipVal = $(v).children(".ui-slider-label").data("value");
if (( slider.options.range === "min" && pipVal < value ) ||
( slider.options.range === "max" && pipVal > value )) {
$(v).addClass("ui-slider-pip-inrange");
}
});
}
},
range: function(values) {
this.resetClasses();
for ( i = 0; i < values.length; i++ ) {
$pips
.filter(".ui-slider-pip-" + this.classLabel(values[i]) )
.addClass("ui-slider-pip-selected-" + ( i + 1 ) );
}
if ( slider.options.range ) {
$pips.each(function(k, v) {
var pipVal = $(v).children(".ui-slider-label").data("value");
if ( pipVal > values[0] && pipVal < values[1] ) {
$(v).addClass("ui-slider-pip-inrange");
}
});
}
},
classLabel: function(value) {
return value.toString().replace(".", "-");
},
resetClasses: function() {
var regex = /(^|\s*)(ui-slider-pip-selected|ui-slider-pip-inrange)(-{1,2}\d+|\s|$)/gi;
$pips.removeClass( function(index, css) {
return ( css.match(regex) || [] ).join(" ");
});
}
};
function getClosestHandle( val ) {
var h, k,
sliderVals,
comparedVals,
closestVal,
tempHandles = [],
closestHandle = 0;
if ( slider.values() && slider.values().length ) {
// get the current values of the slider handles
sliderVals = slider.values();
// find the offset value from the `val` for each
// handle, and store it in a new array
comparedVals = $.map( sliderVals, function(v) {
return Math.abs( v - val );
});
// figure out the closest handles to the value
closestVal = Math.min.apply( Math, comparedVals );
// if a comparedVal is the closestVal, then
// set the value accordingly, and set the closest handle.
for ( h = 0; h < comparedVals.length; h++ ) {
if ( comparedVals[h] === closestVal ) {
tempHandles.push(h);
}
}
// set the closest handle to the first handle in array,
// just incase we have no _lastChangedValue to compare to.
closestHandle = tempHandles[0];
// now we want to find out if any of the closest handles were
// the last changed handle, if so we specify that handle to change
for ( k = 0; k < tempHandles.length; k++ ) {
if ( slider._lastChangedValue === tempHandles[k] ) {
closestHandle = tempHandles[k];
}
}
if ( slider.options.range && tempHandles.length === 2 ) {
if ( val > sliderVals[1] ) {
closestHandle = tempHandles[1];
} else if ( val < sliderVals[0] ) {
closestHandle = tempHandles[0];
}
}
}
return closestHandle;
}
function destroy() {
slider.element
.off(".selectPip")
.on("mousedown.slider", slider.element.data("mousedown-original") )
.removeClass("ui-slider-pips")
.find(".ui-slider-pip")
.remove();
}
// when we click on a label, we want to make sure the
// slider's handle actually goes to that label!
// so we check all the handles and see which one is closest
// to the label we clicked. If 2 handles are equidistant then
// we move both of them. We also want to trigger focus on the
// handle.
// without this method the label is just treated like a part
// of the slider and there's no accuracy in the selected value
function labelClick( label, e ) {
if (slider.option("disabled")) {
return;
}
var val = $(label).data("value"),
indexToChange = getClosestHandle( val );
if ( slider.values() && slider.values().length ) {
slider.options.values[ indexToChange ] = slider._trimAlignValue( val );
} else {
slider.options.value = slider._trimAlignValue( val );
}
slider._refreshValue();
slider._change( e, indexToChange );
}
// method for creating a pip. We loop this for creating all
// the pips.
function createPip( which ) {
var label,
percent,
number = which,
classes = "ui-slider-pip",
css = "",
value = slider.value(),
values = slider.values(),
labelValue,
classLabel,
labelIndex;
if ( which === "first" ) {
number = 0;
} else if ( which === "last" ) {
number = pips;
}
// labelValue is the actual value of the pip based on the min/step
labelValue = min + ( slider.options.step * number );
// classLabel replaces any decimals with hyphens
classLabel = labelValue.toString().replace(".", "-");
// get the index needed for selecting labels out of the array
labelIndex = ( number + min ) - min;
// we need to set the human-readable label to either the
// corresponding element in the array, or the appropriate
// item in the object... or an empty string.
if ( $.type(options.labels) === "array" ) {
label = options.labels[ labelIndex ] || "";
} else if ( $.type( options.labels ) === "object" ) {
if ( which === "first" ) {
// set first label
label = options.labels.first || "";
} else if ( which === "last" ) {
// set last label
label = options.labels.last || "";
} else if ( $.type( options.labels.rest ) === "array" ) {
// set other labels, but our index should start at -1
// because of the first pip.
label = options.labels.rest[ labelIndex - 1 ] || "";
} else {
// urrggh, the options must be f**ked, just show nothing.
label = labelValue;
}
} else {
label = labelValue;
}
if ( which === "first" ) {
// first Pip on the Slider
percent = "0%";
classes += " ui-slider-pip-first";
classes += ( options.first === "label" ) ? " ui-slider-pip-label" : "";
classes += ( options.first === false ) ? " ui-slider-pip-hide" : "";
} else if ( which === "last" ) {
// last Pip on the Slider
percent = "100%";
classes += " ui-slider-pip-last";
classes += ( options.last === "label" ) ? " ui-slider-pip-label" : "";
classes += ( options.last === false ) ? " ui-slider-pip-hide" : "";
} else {
// all other Pips
percent = (( 100 / pips ) * which ).toFixed(4) + "%";
classes += ( options.rest === "label" ) ? " ui-slider-pip-label" : "";
classes += ( options.rest === false ) ? " ui-slider-pip-hide" : "";
}
classes += " ui-slider-pip-" + classLabel;
// add classes for the initial-selected values.
if ( values && values.length ) {
for ( i = 0; i < values.length; i++ ) {
if ( labelValue === values[i] ) {
classes += " ui-slider-pip-initial-" + ( i + 1 );
classes += " ui-slider-pip-selected-" + ( i + 1 );
}
}
if ( slider.options.range ) {
if ( labelValue > values[0] &&
labelValue < values[1] ) {
classes += " ui-slider-pip-inrange";
}
}
} else {
if ( labelValue === value ) {
classes += " ui-slider-pip-initial";
classes += " ui-slider-pip-selected";
}
if ( slider.options.range ) {
if (( slider.options.range === "min" && labelValue < value ) ||
( slider.options.range === "max" && labelValue > value )) {
classes += " ui-slider-pip-inrange";
}
}
}
css = ( slider.options.orientation === "horizontal" ) ?
"left: " + percent :
"bottom: " + percent;
// add this current pip to the collection
return "<span class=\"" + classes + "\" style=\"" + css + "\">" +
"<span class=\"ui-slider-line\"></span>" +
"<span class=\"ui-slider-label\" data-value=\"" +
labelValue + "\">" + options.formatLabel(label) + "</span>" +
"</span>";
}
// create our first pip
collection += createPip("first");
// for every stop in the slider where we need a pip; create one.
for ( p = slider.options.pipStep; p < pips; p += slider.options.pipStep ) {
collection += createPip( p );
}
// create our last pip
collection += createPip("last");
// append the collection of pips.
slider.element.append( collection );
// store the pips for setting classes later.
$pips = slider.element.find(".ui-slider-pip");
// store the mousedown handlers for later, just in case we reset
// the slider, the handler would be lost!
if ( $._data( slider.element.get(0), "events").mousedown &&
$._data( slider.element.get(0), "events").mousedown.length ) {
mousedownHandlers = $._data( slider.element.get(0), "events").mousedown;
} else {
mousedownHandlers = slider.element.data("mousedown-handlers");
}
slider.element.data("mousedown-handlers", mousedownHandlers.slice() );
// loop through all the mousedown handlers on the slider,
// and store the original namespaced (.slider) event handler so
// we can trigger it later.
for ( j = 0; j < mousedownHandlers.length; j++ ) {
if ( mousedownHandlers[j].namespace === "slider" ) {
slider.element.data("mousedown-original", mousedownHandlers[j].handler );
}
}
// unbind the mousedown.slider event, because it interferes with
// the labelClick() method (stops smooth animation), and decide
// if we want to trigger the original event based on which element
// was clicked.
slider.element
.off("mousedown.slider")
.on("mousedown.selectPip", function(e) {
var $target = $(e.target),
closest = getClosestHandle( $target.data("value") ),
$handle = $handles.eq( closest );
$handle.addClass("ui-state-active");
if ( $target.is(".ui-slider-label") ) {
labelClick( $target, e );
slider.element
.one("mouseup.selectPip", function() {
$handle
.removeClass("ui-state-active")
.focus();
});
} else {
var originalMousedown = slider.element.data("mousedown-original");
originalMousedown(e);
}
});
slider.element.on( "slide.selectPip slidechange.selectPip", function(e, ui) {
var $slider = $(this),
value = $slider.slider("value"),
values = $slider.slider("values");
if ( ui ) {
value = ui.value;
values = ui.values;
}
if ( slider.values() && slider.values().length ) {
selectPip.range( values );
} else {
selectPip.single( value );
}
});
},
// floats
float: function( settings ) {
var i,
slider = this,
min = slider._valueMin(),
max = slider._valueMax(),
value = slider._value(),
values = slider._values(),
tipValues = [],
$handles = slider.element.find(".ui-slider-handle");
var options = {
handle: true,
/* false */
pips: false,
/* true */
labels: false,
/* [array], { first: "string", rest: [array], last: "string" }, false */
prefix: "",
/* "", string */
suffix: "",
/* "", string */
event: "slidechange slide",
/* "slidechange", "slide", "slidechange slide" */
formatLabel: function(value) {
return this.prefix + value + this.suffix;
}
/* function
must return a value to display in the floats */
};
if ( $.type( settings ) === "object" || $.type( settings ) === "undefined" ) {
$.extend( options, settings );
slider.element.data("float-options", options );
} else {
if ( settings === "destroy" ) {
destroy();
} else if ( settings === "refresh" ) {
slider.element.slider( "float", slider.element.data("float-options") );
}
return;
}
if ( value < min ) {
value = min;
}
if ( value > max ) {
value = max;
}
if ( values && values.length ) {
for ( i = 0; i < values.length; i++ ) {
if ( values[i] < min ) {
values[i] = min;
}
if ( values[i] > max ) {
values[i] = max;
}
}
}
// add a class for the CSS
slider.element
.addClass("ui-slider-float")
.find(".ui-slider-tip, .ui-slider-tip-label")
.remove();
function destroy() {
slider.element
.off(".sliderFloat")
.removeClass("ui-slider-float")
.find(".ui-slider-tip, .ui-slider-tip-label")
.remove();
}
function getPipLabels( values ) {
// when checking the array we need to divide
// by the step option, so we store those values here.
var vals = [],
steppedVals = $.map( values, function(v) {
return Math.ceil(( v - min ) / slider.options.step);
});
// now we just get the values we need to return
// by looping through the values array and assigning the
// label if it exists.
if ( $.type( options.labels ) === "array" ) {
for ( i = 0; i < values.length; i++ ) {
vals[i] = options.labels[ steppedVals[i] ] || values[i];
}
} else if ( $.type( options.labels ) === "object" ) {
for ( i = 0; i < values.length; i++ ) {
if ( values[i] === min ) {
vals[i] = options.labels.first || min;
} else if ( values[i] === max ) {
vals[i] = options.labels.last || max;
} else if ( $.type( options.labels.rest ) === "array" ) {
vals[i] = options.labels.rest[ steppedVals[i] - 1 ] || values[i];
} else {
vals[i] = values[i];
}
}
} else {
for ( i = 0; i < values.length; i++ ) {
vals[i] = values[i];
}
}
return vals;
}
// apply handle tip if settings allows.
if ( options.handle ) {
// we need to set the human-readable label to either the
// corresponding element in the array, or the appropriate
// item in the object... or an empty string.
tipValues = ( slider.values() && slider.values().length ) ?
getPipLabels( values ) :
getPipLabels( [ value ] );
for ( i = 0; i < tipValues.length; i++ ) {
$handles
.eq( i )
.append( $("<span class=\"ui-slider-tip\">"+ options.formatLabel(tipValues[i]) +"</span>") );
}
}
if ( options.pips ) {
// if this slider also has pip-labels, we make those into tips, too.
slider.element.find(".ui-slider-label").each(function(k, v) {
var $this = $(v),
val = [ $this.data("value") ],
label,
$tip;
label = options.formatLabel( getPipLabels( val )[0] );
// create a tip element
$tip =
$("<span class=\"ui-slider-tip-label\">" + label + "</span>")
.insertAfter( $this );
});
}
// check that the event option is actually valid against our
// own list of the slider's events.
if ( options.event !== "slide" &&
options.event !== "slidechange" &&
options.event !== "slide slidechange" &&
options.event !== "slidechange slide" ) {
options.event = "slidechange slide";
}
// when slider changes, update handle tip label.
slider.element
.off(".sliderFloat")
.on( options.event + ".sliderFloat", function( e, ui ) {
var uiValue = ( $.type( ui.value ) === "array" ) ? ui.value : [ ui.value ],
val = options.formatLabel( getPipLabels( uiValue )[0] );
$(ui.handle)
.find(".ui-slider-tip")
.html( val );
});
}
};
$.extend(true, $.ui.slider.prototype, extensionMethods);
})(jQuery);
/*
* MultiDatesPicker v1.6.3
* http://multidatespickr.sourceforge.net/
*
* Copyright 2014, Luca Lauretta
* Dual licensed under the MIT or GPL version 2 licenses.
*/
(function( $ ){
$.extend($.ui, { multiDatesPicker: { version: "1.6.3" } });
$.fn.multiDatesPicker = function(method) {
var mdp_arguments = arguments;
var ret = this;
var today_date = new Date();
var day_zero = new Date(0);
var mdp_events = {};
function removeDate(date, type) {
if(!type) type = 'picked';
date = dateConvert.call(this, date);
for(var i = 0; i < this.multiDatesPicker.dates[type].length; i++)
if(!methods.compareDates(this.multiDatesPicker.dates[type][i], date))
return this.multiDatesPicker.dates[type].splice(i, 1).pop();
}
function removeIndex(index, type) {
if(!type) type = 'picked';
return this.multiDatesPicker.dates[type].splice(index, 1).pop();
}
function addDate(date, type, no_sort) {
if(!type) type = 'picked';
date = dateConvert.call(this, date);
// @todo: use jQuery UI datepicker method instead
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
date.setMilliseconds(0);
if (methods.gotDate.call(this, date, type) === false) {
this.multiDatesPicker.dates[type].push(date);
if(!no_sort) this.multiDatesPicker.dates[type].sort(methods.compareDates);
}
}
function sortDates(type) {
if(!type) type = 'picked';
this.multiDatesPicker.dates[type].sort(methods.compareDates);
}
function dateConvert(date, desired_type, date_format) {
if(!desired_type) desired_type = 'object';/*
if(!date_format && (typeof date == 'string')) {
date_format = $(this).datepicker('option', 'dateFormat');
if(!date_format) date_format = $.datepicker._defaults.dateFormat;
}
*/
return methods.dateConvert.call(this, date, desired_type, date_format);
}
var methods = {
init : function( options ) {
var $this = $(this);
this.multiDatesPicker.changed = false;
var mdp_events = {
beforeShow: function(input, inst) {
this.multiDatesPicker.changed = false;
if(this.multiDatesPicker.originalBeforeShow)
this.multiDatesPicker.originalBeforeShow.call(this, input, inst);
},
onSelect : function(dateText, inst) {
var $this = $(this);
this.multiDatesPicker.changed = true;
if (dateText) {
$this.multiDatesPicker('toggleDate', dateText);
this.multiDatesPicker.changed = true;
// @todo: this will be optimized when I'll move methods to the singleton.
}
if (this.multiDatesPicker.mode == 'normal' && this.multiDatesPicker.pickableRange) {
if(this.multiDatesPicker.dates.picked.length > 0) {
var min_date = this.multiDatesPicker.dates.picked[0],
max_date = new Date(min_date.getTime());
methods.sumDays(max_date, this.multiDatesPicker.pickableRange-1);
// counts the number of disabled dates in the range
if(this.multiDatesPicker.adjustRangeToDisabled) {
var c_disabled,
disabled = this.multiDatesPicker.dates.disabled.slice(0);
do {
c_disabled = 0;
for(var i = 0; i < disabled.length; i++) {
if(disabled[i].getTime() <= max_date.getTime()) {
if((min_date.getTime() <= disabled[i].getTime()) && (disabled[i].getTime() <= max_date.getTime()) ) {
c_disabled++;
}
disabled.splice(i, 1);
i--;
}
}
max_date.setDate(max_date.getDate() + c_disabled);
} while(c_disabled != 0);
}
if(this.multiDatesPicker.maxDate && (max_date > this.multiDatesPicker.maxDate))
max_date = this.multiDatesPicker.maxDate;
$this
.datepicker("option", "minDate", min_date)
.datepicker("option", "maxDate", max_date);
} else {
$this
.datepicker("option", "minDate", this.multiDatesPicker.minDate)
.datepicker("option", "maxDate", this.multiDatesPicker.maxDate);
}
}
if(this.multiDatesPicker.originalOnSelect && dateText)
this.multiDatesPicker.originalOnSelect.call(this, dateText, inst);
},
beforeShowDay : function(date) {
var $this = $(this),
gotThisDate = $this.multiDatesPicker('gotDate', date) !== false,
isDisabledCalendar = $this.datepicker('option', 'disabled'),
isDisabledDate = $this.multiDatesPicker('gotDate', date, 'disabled') !== false,
areAllSelected = this.multiDatesPicker.maxPicks <= this.multiDatesPicker.dates.picked.length;
var bsdReturn = [true, '', null];
if(this.multiDatesPicker.originalBeforeShowDay)
bsdReturn = this.multiDatesPicker.originalBeforeShowDay.call(this, date);
bsdReturn[1] = gotThisDate ? 'ui-state-highlight' : bsdReturn[1];
bsdReturn[0] = bsdReturn[0] && !(isDisabledCalendar || isDisabledDate || (areAllSelected && !bsdReturn[1]));
return bsdReturn;
}
};
// value have to be extracted before datepicker is initiated
if($this.val()) var inputDates = $this.val()
this.multiDatesPicker.separator = ', ';
if(options) {
// value have to be extracted before datepicker is initiated
//if(options.altField) var inputDates = $(options.altField).val();
if(options.separator) this.multiDatesPicker.separator = options.separator;
this.multiDatesPicker.originalBeforeShow = options.beforeShow;
this.multiDatesPicker.originalOnSelect = options.onSelect;
this.multiDatesPicker.originalBeforeShowDay = options.beforeShowDay;
this.multiDatesPicker.originalOnClose = options.onClose;
// datepicker init
$this.datepicker(options);
this.multiDatesPicker.minDate = $.datepicker._determineDate(this, options.minDate, null);
this.multiDatesPicker.maxDate = $.datepicker._determineDate(this, options.maxDate, null);
if(options.addDates) methods.addDates.call(this, options.addDates);
if(options.addDisabledDates)
methods.addDates.call(this, options.addDisabledDates, 'disabled');
methods.setMode.call(this, options);
} else {
$this.datepicker();
}
$this.datepicker('option', mdp_events);
// adds any dates found in the input or alt field
if(inputDates) $this.multiDatesPicker('value', inputDates);
// generates the new string of added dates
var inputs_values = $this.multiDatesPicker('value');
// fills the input field back with all the dates in the calendar
if(this.tagName == 'INPUT') $this.val(inputs_values);
// Fixes the altField filled with defaultDate by default
var altFieldOption = $this.datepicker('option', 'altField');
if (altFieldOption) $(altFieldOption).val(inputs_values);
// Updates the calendar view
$this.datepicker('refresh');
},
compareDates : function(date1, date2) {
date1 = dateConvert.call(this, date1);
date2 = dateConvert.call(this, date2);
// return > 0 means date1 is later than date2
// return == 0 means date1 is the same day as date2
// return < 0 means date1 is earlier than date2
var diff = date1.getFullYear() - date2.getFullYear();
if(!diff) {
diff = date1.getMonth() - date2.getMonth();
if(!diff)
diff = date1.getDate() - date2.getDate();
}
return diff;
},
sumDays : function( date, n_days ) {
var origDateType = typeof date;
obj_date = dateConvert.call(this, date);
obj_date.setDate(obj_date.getDate() + n_days);
return dateConvert.call(this, obj_date, origDateType);
},
dateConvert : function( date, desired_format, dateFormat ) {
var from_format = typeof date;
if(from_format == desired_format) {
if(from_format == 'object') {
try {
date.getTime();
} catch (e) {
$.error('Received date is in a non supported format!');
return false;
}
}
return date;
}
var $this = $(this);
if(typeof date == 'undefined') date = new Date(0);
if(desired_format != 'string' && desired_format != 'object' && desired_format != 'number')
$.error('Date format "'+ desired_format +'" not supported!');
if(!dateFormat) {
dateFormat = $.datepicker._defaults.dateFormat;
// thanks to bibendus83 -> http://sourceforge.net/tracker/index.php?func=detail&aid=3213174&group_id=358205&atid=1495382
var dp_dateFormat = $this.datepicker('option', 'dateFormat');
if (dp_dateFormat) {
dateFormat = dp_dateFormat;
}
}
// converts to object as a neutral format
switch(from_format) {
case 'object': break;
case 'string': date = $.datepicker.parseDate(dateFormat, date); break;
case 'number': date = new Date(date); break;
default: $.error('Conversion from "'+ desired_format +'" format not allowed on jQuery.multiDatesPicker');
}
// then converts to the desired format
switch(desired_format) {
case 'object': return date;
case 'string': return $.datepicker.formatDate(dateFormat, date);
case 'number': return date.getTime();
default: $.error('Conversion to "'+ desired_format +'" format not allowed on jQuery.multiDatesPicker');
}
return false;
},
gotDate : function( date, type ) {
if(!type) type = 'picked';
for(var i = 0; i < this.multiDatesPicker.dates[type].length; i++) {
if(methods.compareDates.call(this, this.multiDatesPicker.dates[type][i], date) === 0) {
return i;
}
}
return false;
},
value : function( value ) {
if(value && typeof value == 'string') {
methods.addDates.call(this, value.split(this.multiDatesPicker.separator));
} else {
var dates = methods.getDates.call(this, 'string');
return dates.length
? dates.join(this.multiDatesPicker.separator)
: "";
}
},
getDates : function( format, type ) {
if(!format) format = 'string';
if(!type) type = 'picked';
switch (format) {
case 'object':
return this.multiDatesPicker.dates[type];
case 'string':
case 'number':
var o_dates = new Array();
for(var i in this.multiDatesPicker.dates[type])
o_dates.push(
dateConvert.call(
this,
this.multiDatesPicker.dates[type][i],
format
)
);
return o_dates;
default: $.error('Format "'+format+'" not supported!');
}
},
addDates : function( dates, type ) {
if(dates.length > 0) {
if(!type) type = 'picked';
switch(typeof dates) {
case 'object':
case 'array':
if(dates.length) {
for(var i = 0; i < dates.length; i++)
addDate.call(this, dates[i], type, true);
sortDates.call(this, type);
break;
} // else does the same as 'string'
case 'string':
case 'number':
addDate.call(this, dates, type);
break;
default:
$.error('Date format "'+ typeof dates +'" not allowed on jQuery.multiDatesPicker');
}
//$(this).datepicker('refresh');
} else {
$.error('Empty array of dates received.');
}
},
removeDates : function( dates, type ) {
if(!type) type = 'picked';
var removed = [];
if (Object.prototype.toString.call(dates) === '[object Array]') {
for(var i in dates.sort(function(a,b){return b-a})) {
removed.push(removeDate.call(this, dates[i], type));
}
} else {
removed.push(removeDate.call(this, dates, type));
}
return removed;
},
removeIndexes : function( indexes, type ) {
if(!type) type = 'picked';
var removed = [];
if (Object.prototype.toString.call(indexes) === '[object Array]') {
for(var i in indexes.sort(function(a,b){return b-a})) {
removed.push(removeIndex.call(this, indexes[i], type));
}
} else {
removed.push(removeIndex.call(this, indexes, type));
}
return removed;
},
resetDates : function ( type ) {
if(!type) type = 'picked';
this.multiDatesPicker.dates[type] = [];
},
toggleDate : function( date, type ) {
if(!type) type = 'picked';
switch(this.multiDatesPicker.mode) {
case 'daysRange':
this.multiDatesPicker.dates[type] = []; // deletes all picked/disabled dates
var end = this.multiDatesPicker.autoselectRange[1];
var begin = this.multiDatesPicker.autoselectRange[0];
if(end < begin) { // switch
end = this.multiDatesPicker.autoselectRange[0];
begin = this.multiDatesPicker.autoselectRange[1];
}
for(var i = begin; i < end; i++)
methods.addDates.call(this, methods.sumDays(date, i), type);
break;
default:
if(methods.gotDate.call(this, date) === false) // adds dates
methods.addDates.call(this, date, type);
else // removes dates
methods.removeDates.call(this, date, type);
break;
}
},
setMode : function( options ) {
var $this = $(this);
if(options.mode) this.multiDatesPicker.mode = options.mode;
switch(this.multiDatesPicker.mode) {
case 'normal':
for(option in options)
switch(option) {
case 'maxPicks':
case 'minPicks':
case 'pickableRange':
case 'adjustRangeToDisabled':
this.multiDatesPicker[option] = options[option];
break;
//default: $.error('Option ' + option + ' ignored for mode "'.options.mode.'".');
}
break;
case 'daysRange':
case 'weeksRange':
var mandatory = 1;
for(option in options)
switch(option) {
case 'autoselectRange':
mandatory--;
case 'pickableRange':
case 'adjustRangeToDisabled':
this.multiDatesPicker[option] = options[option];
break;
//default: $.error('Option ' + option + ' does not exist for setMode on jQuery.multiDatesPicker');
}
if(mandatory > 0) $.error('Some mandatory options not specified!');
break;
}
/*
if(options.pickableRange) {
$this.datepicker("option", "maxDate", options.pickableRange);
$this.datepicker("option", "minDate", this.multiDatesPicker.minDate);
}
*/
if(mdp_events.onSelect)
mdp_events.onSelect();
},
destroy: function(){
this.multiDatesPicker = null;
$(this).datepicker('destroy');
}
};
this.each(function() {
var $this = $(this);
if (!this.multiDatesPicker) {
this.multiDatesPicker = {
dates: {
picked: [],
disabled: []
},
mode: 'normal',
adjustRangeToDisabled: true
};
}
if(methods[method]) {
var exec_result = methods[method].apply(this, Array.prototype.slice.call(mdp_arguments, 1));
switch(method) {
case 'removeDates':
case 'removeIndexes':
case 'resetDates':
case 'toggleDate':
case 'addDates':
var altField = $this.datepicker('option', 'altField');
// @todo: should use altFormat for altField
var dates_string = methods.value.call(this);
if (altField !== undefined && altField != "") {
$(altField).val(dates_string);
}
if(this.tagName == 'INPUT') { // for inputs
$this.val(dates_string);
}
$.datepicker._refreshDatepicker(this);
}
switch(method) {
case 'removeDates':
case 'getDates':
case 'gotDate':
case 'sumDays':
case 'compareDates':
case 'dateConvert':
case 'value':
ret = exec_result;
}
return exec_result;
} else if( typeof method === 'object' || ! method ) {
return methods.init.apply(this, mdp_arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.multiDatesPicker');
}
return false;
});
return ret;
};
var PROP_NAME = 'multiDatesPicker';
var dpuuid = new Date().getTime();
var instActive;
$.multiDatesPicker = {version: false};
//$.multiDatesPicker = new MultiDatesPicker(); // singleton instance
$.multiDatesPicker.initialized = false;
$.multiDatesPicker.uuid = new Date().getTime();
$.multiDatesPicker.version = $.ui.multiDatesPicker.version;
// allows MDP not to hide everytime a date is picked
$.multiDatesPicker._hideDatepicker = $.datepicker._hideDatepicker;
$.datepicker._hideDatepicker = function(){
var target = this._curInst.input[0];
var mdp = target.multiDatesPicker;
if(!mdp || (this._curInst.inline === false && !mdp.changed)) {
return $.multiDatesPicker._hideDatepicker.apply(this, arguments);
} else {
mdp.changed = false;
$.datepicker._refreshDatepicker(target);
return;
}
};
// Workaround for #4055
// Add another global to avoid noConflict issues with inline event handlers
window['DP_jQuery_' + dpuuid] = $;
})( jQuery );
\ No newline at end of file
/**
* jquery.switchButton.js v1.0
* jQuery iPhone-like switch button
* @author Olivier Lance <olivier.lance@sylights.com>
*
* Copyright (c) Olivier Lance - released under MIT License {{{
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
* }}}
*/
/*
* Meant to be used on a <input type="checkbox">, this widget will replace the receiver element with an iPhone-style
* switch button with two states: "on" and "off".
* Labels of the states are customizable, as are their presence and position. The receiver element's "checked" attribute
* is updated according to the state of the switch, so that it can be used in a <form>.
*
*/
(function($) {
$.widget("sylightsUI.switchButton", {
options: {
checked: undefined, // State of the switch
show_labels: true, // Should we show the on and off labels?
labels_placement: "both", // Position of the labels: "both", "left" or "right"
on_label: "ON", // Text to be displayed when checked
off_label: "OFF", // Text to be displayed when unchecked
width: 25, // Width of the button in pixels
height: 11, // Height of the button in pixels
button_width: 12, // Width of the sliding part in pixels
clear: true, // Should we insert a div with style="clear: both;" after the switch button?
clear_after: null, // Override the element after which the clearing div should be inserted (null > right after the button)
on_callback: undefined, //callback function that will be executed after going to on state
off_callback: undefined //callback function that will be executed after going to off state
},
_create: function() {
// Init the switch from the checkbox if no state was specified on creation
if (this.options.checked === undefined) {
this.options.checked = this.element.prop("checked");
}
this._initLayout();
this._initEvents();
},
_initLayout: function() {
// Hide the receiver element
this.element.hide();
// Create our objects: two labels and the button
this.off_label = $("<span>").addClass("switch-button-label");
this.on_label = $("<span>").addClass("switch-button-label");
this.button_bg = $("<div>").addClass("switch-button-background");
this.button = $("<div>").addClass("switch-button-button");
// Insert the objects into the DOM
this.off_label.insertAfter(this.element);
this.button_bg.insertAfter(this.off_label);
this.on_label.insertAfter(this.button_bg);
this.button_bg.append(this.button);
// Insert a clearing element after the specified element if needed
if(this.options.clear)
{
if (this.options.clear_after === null) {
this.options.clear_after = this.on_label;
}
$("<div>").css({
clear: "left"
}).insertAfter(this.options.clear_after);
}
// Call refresh to update labels text and visibility
this._refresh();
// Init labels and switch state
// This will animate all checked switches to the ON position when
// loading... this is intentional!
this.options.checked = !this.options.checked;
this._toggleSwitch(true);
},
_refresh: function() {
// Refresh labels display
if (this.options.show_labels) {
this.off_label.show();
this.on_label.show();
}
else {
this.off_label.hide();
this.on_label.hide();
}
// Move labels around depending on labels_placement option
switch(this.options.labels_placement) {
case "both":
{
// Don't move anything if labels are already in place
if(this.button_bg.prev() !== this.off_label || this.button_bg.next() !== this.on_label)
{
// Detach labels form DOM and place them correctly
this.off_label.detach();
this.on_label.detach();
this.off_label.insertBefore(this.button_bg);
this.on_label.insertAfter(this.button_bg);
// Update label classes
this.on_label.addClass(this.options.checked ? "on" : "off").removeClass(this.options.checked ? "off" : "on");
this.off_label.addClass(this.options.checked ? "off" : "on").removeClass(this.options.checked ? "on" : "off");
}
break;
}
case "left":
{
// Don't move anything if labels are already in place
if(this.button_bg.prev() !== this.on_label || this.on_label.prev() !== this.off_label)
{
// Detach labels form DOM and place them correctly
this.off_label.detach();
this.on_label.detach();
this.off_label.insertBefore(this.button_bg);
this.on_label.insertBefore(this.button_bg);
// update label classes
this.on_label.addClass("on").removeClass("off");
this.off_label.addClass("off").removeClass("on");
}
break;
}
case "right":
{
// Don't move anything if labels are already in place
if(this.button_bg.next() !== this.off_label || this.off_label.next() !== this.on_label)
{
// Detach labels form DOM and place them correctly
this.off_label.detach();
this.on_label.detach();
this.off_label.insertAfter(this.button_bg);
this.on_label.insertAfter(this.off_label);
// update label classes
this.on_label.addClass("on").removeClass("off");
this.off_label.addClass("off").removeClass("on");
}
break;
}
}
// Refresh labels texts
this.on_label.html(this.options.on_label);
this.off_label.html(this.options.off_label);
// Refresh button's dimensions
this.button_bg.width(this.options.width);
this.button_bg.height(this.options.height);
this.button.width(this.options.button_width);
this.button.height(this.options.height);
},
_initEvents: function() {
var self = this;
// Toggle switch when the switch is clicked
this.button_bg.click(function(e) {
e.preventDefault();
e.stopPropagation();
self._toggleSwitch(false);
return false;
});
this.button.click(function(e) {
e.preventDefault();
e.stopPropagation();
self._toggleSwitch(false);
return false;
});
// Set switch value when clicking labels
this.on_label.click(function(e) {
if (self.options.checked && self.options.labels_placement === "both") {
return false;
}
self._toggleSwitch(false);
return false;
});
this.off_label.click(function(e) {
if (!self.options.checked && self.options.labels_placement === "both") {
return false;
}
self._toggleSwitch(false);
return false;
});
},
_setOption: function(key, value) {
if (key === "checked") {
this._setChecked(value);
return;
}
this.options[key] = value;
this._refresh();
},
_setChecked: function(value) {
if (value === this.options.checked) {
return;
}
this.options.checked = !value;
this._toggleSwitch(false);
},
_toggleSwitch: function(isInitializing) {
// Don't toggle the switch if it is set to readonly or disabled, unless it is initializing and animating itself
if( !isInitializing && (this.element.attr('readonly') == 'readonly' || this.element.prop('disabled')) )
return;
this.options.checked = !this.options.checked;
var newLeft = "";
if (this.options.checked) {
// Update the underlying checkbox state
this.element.prop("checked", true);
this.element.change();
var dLeft = this.options.width - this.options.button_width;
newLeft = "+=" + dLeft;
// Update labels states
if(this.options.labels_placement == "both")
{
this.off_label.removeClass("on").addClass("off");
this.on_label.removeClass("off").addClass("on");
}
else
{
this.off_label.hide();
this.on_label.show();
}
this.button_bg.addClass("checked");
//execute on state callback if its supplied
if(typeof this.options.on_callback === 'function') this.options.on_callback.call(this);
}
else {
// Update the underlying checkbox state
this.element.prop("checked", false);
this.element.change();
newLeft = "-1px";
// Update labels states
if(this.options.labels_placement == "both")
{
this.off_label.removeClass("off").addClass("on");
this.on_label.removeClass("on").addClass("off");
}
else
{
this.off_label.show();
this.on_label.hide();
}
this.button_bg.removeClass("checked");
//execute off state callback if its supplied
if(typeof this.options.off_callback === 'function') this.options.off_callback.call(this);
}
// Animate the switch
this.button.animate({ left: newLeft }, 250, "easeInOutCubic");
}
});
})(jQuery);
/*! nouislider - 9.2.0 - 2017-01-11 10:35:34 */
(function (factory) {
if ( typeof define === 'function' && define.amd ) {
// AMD. Register as an anonymous module.
define([], factory);
} else if ( typeof exports === 'object' ) {
// Node/CommonJS
module.exports = factory();
} else {
// Browser globals
window.noUiSlider = factory();
}
}(function( ){
'use strict';
var VERSION = '9.2.0';
// Creates a node, adds it to target, returns the new node.
function addNodeTo ( target, className ) {
var div = document.createElement('div');
addClass(div, className);
target.appendChild(div);
return div;
}
// Removes duplicates from an array.
function unique ( array ) {
return array.filter(function(a){
return !this[a] ? this[a] = true : false;
}, {});
}
// Round a value to the closest 'to'.
function closest ( value, to ) {
return Math.round(value / to) * to;
}
// Current position of an element relative to the document.
function offset ( elem, orientation ) {
var rect = elem.getBoundingClientRect(),
doc = elem.ownerDocument,
docElem = doc.documentElement,
pageOffset = getPageOffset();
// getBoundingClientRect contains left scroll in Chrome on Android.
// I haven't found a feature detection that proves this. Worst case
// scenario on mis-match: the 'tap' feature on horizontal sliders breaks.
if ( /webkit.*Chrome.*Mobile/i.test(navigator.userAgent) ) {
pageOffset.x = 0;
}
return orientation ? (rect.top + pageOffset.y - docElem.clientTop) : (rect.left + pageOffset.x - docElem.clientLeft);
}
// Checks whether a value is numerical.
function isNumeric ( a ) {
return typeof a === 'number' && !isNaN( a ) && isFinite( a );
}
// Sets a class and removes it after [duration] ms.
function addClassFor ( element, className, duration ) {
if (duration > 0) {
addClass(element, className);
setTimeout(function(){
removeClass(element, className);
}, duration);
}
}
// Limits a value to 0 - 100
function limit ( a ) {
return Math.max(Math.min(a, 100), 0);
}
// Wraps a variable as an array, if it isn't one yet.
// Note that an input array is returned by reference!
function asArray ( a ) {
return Array.isArray(a) ? a : [a];
}
// Counts decimals
function countDecimals ( numStr ) {
numStr = String(numStr);
var pieces = numStr.split(".");
return pieces.length > 1 ? pieces[1].length : 0;
}
// http://youmightnotneedjquery.com/#add_class
function addClass ( el, className ) {
if ( el.classList ) {
el.classList.add(className);
} else {
el.className += ' ' + className;
}
}
// http://youmightnotneedjquery.com/#remove_class
function removeClass ( el, className ) {
if ( el.classList ) {
el.classList.remove(className);
} else {
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
// https://plainjs.com/javascript/attributes/adding-removing-and-testing-for-classes-9/
function hasClass ( el, className ) {
return el.classList ? el.classList.contains(className) : new RegExp('\\b' + className + '\\b').test(el.className);
}
// https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY#Notes
function getPageOffset ( ) {
var supportPageOffset = window.pageXOffset !== undefined,
isCSS1Compat = ((document.compatMode || "") === "CSS1Compat"),
x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft,
y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
return {
x: x,
y: y
};
}
// we provide a function to compute constants instead
// of accessing window.* as soon as the module needs it
// so that we do not compute anything if not needed
function getActions ( ) {
// Determine the events to bind. IE11 implements pointerEvents without
// a prefix, which breaks compatibility with the IE10 implementation.
return window.navigator.pointerEnabled ? {
start: 'pointerdown',
move: 'pointermove',
end: 'pointerup'
} : window.navigator.msPointerEnabled ? {
start: 'MSPointerDown',
move: 'MSPointerMove',
end: 'MSPointerUp'
} : {
start: 'mousedown touchstart',
move: 'mousemove touchmove',
end: 'mouseup touchend'
};
}
// Value calculation
// Determine the size of a sub-range in relation to a full range.
function subRangeRatio ( pa, pb ) {
return (100 / (pb - pa));
}
// (percentage) How many percent is this value of this range?
function fromPercentage ( range, value ) {
return (value * 100) / ( range[1] - range[0] );
}
// (percentage) Where is this value on this range?
function toPercentage ( range, value ) {
return fromPercentage( range, range[0] < 0 ?
value + Math.abs(range[0]) :
value - range[0] );
}
// (value) How much is this percentage on this range?
function isPercentage ( range, value ) {
return ((value * ( range[1] - range[0] )) / 100) + range[0];
}
// Range conversion
function getJ ( value, arr ) {
var j = 1;
while ( value >= arr[j] ){
j += 1;
}
return j;
}
// (percentage) Input a value, find where, on a scale of 0-100, it applies.
function toStepping ( xVal, xPct, value ) {
if ( value >= xVal.slice(-1)[0] ){
return 100;
}
var j = getJ( value, xVal ), va, vb, pa, pb;
va = xVal[j-1];
vb = xVal[j];
pa = xPct[j-1];
pb = xPct[j];
return pa + (toPercentage([va, vb], value) / subRangeRatio (pa, pb));
}
// (value) Input a percentage, find where it is on the specified range.
function fromStepping ( xVal, xPct, value ) {
// There is no range group that fits 100
if ( value >= 100 ){
return xVal.slice(-1)[0];
}
var j = getJ( value, xPct ), va, vb, pa, pb;
va = xVal[j-1];
vb = xVal[j];
pa = xPct[j-1];
pb = xPct[j];
return isPercentage([va, vb], (value - pa) * subRangeRatio (pa, pb));
}
// (percentage) Get the step that applies at a certain value.
function getStep ( xPct, xSteps, snap, value ) {
if ( value === 100 ) {
return value;
}
var j = getJ( value, xPct ), a, b;
// If 'snap' is set, steps are used as fixed points on the slider.
if ( snap ) {
a = xPct[j-1];
b = xPct[j];
// Find the closest position, a or b.
if ((value - a) > ((b-a)/2)){
return b;
}
return a;
}
if ( !xSteps[j-1] ){
return value;
}
return xPct[j-1] + closest(
value - xPct[j-1],
xSteps[j-1]
);
}
// Entry parsing
function handleEntryPoint ( index, value, that ) {
var percentage;
// Wrap numerical input in an array.
if ( typeof value === "number" ) {
value = [value];
}
// Reject any invalid input, by testing whether value is an array.
if ( Object.prototype.toString.call( value ) !== '[object Array]' ){
throw new Error("noUiSlider (" + VERSION + "): 'range' contains invalid value.");
}
// Covert min/max syntax to 0 and 100.
if ( index === 'min' ) {
percentage = 0;
} else if ( index === 'max' ) {
percentage = 100;
} else {
percentage = parseFloat( index );
}
// Check for correct input.
if ( !isNumeric( percentage ) || !isNumeric( value[0] ) ) {
throw new Error("noUiSlider (" + VERSION + "): 'range' value isn't numeric.");
}
// Store values.
that.xPct.push( percentage );
that.xVal.push( value[0] );
// NaN will evaluate to false too, but to keep
// logging clear, set step explicitly. Make sure
// not to override the 'step' setting with false.
if ( !percentage ) {
if ( !isNaN( value[1] ) ) {
that.xSteps[0] = value[1];
}
} else {
that.xSteps.push( isNaN(value[1]) ? false : value[1] );
}
that.xHighestCompleteStep.push(0);
}
function handleStepPoint ( i, n, that ) {
// Ignore 'false' stepping.
if ( !n ) {
return true;
}
// Factor to range ratio
that.xSteps[i] = fromPercentage([
that.xVal[i]
,that.xVal[i+1]
], n) / subRangeRatio (
that.xPct[i],
that.xPct[i+1] );
var totalSteps = (that.xVal[i+1] - that.xVal[i]) / that.xNumSteps[i];
var highestStep = Math.ceil(Number(totalSteps.toFixed(3)) - 1);
var step = that.xVal[i] + (that.xNumSteps[i] * highestStep);
that.xHighestCompleteStep[i] = step;
}
// Interface
// The interface to Spectrum handles all direction-based
// conversions, so the above values are unaware.
function Spectrum ( entry, snap, direction, singleStep ) {
this.xPct = [];
this.xVal = [];
this.xSteps = [ singleStep || false ];
this.xNumSteps = [ false ];
this.xHighestCompleteStep = [];
this.snap = snap;
this.direction = direction;
var index, ordered = [ /* [0, 'min'], [1, '50%'], [2, 'max'] */ ];
// Map the object keys to an array.
for ( index in entry ) {
if ( entry.hasOwnProperty(index) ) {
ordered.push([entry[index], index]);
}
}
// Sort all entries by value (numeric sort).
if ( ordered.length && typeof ordered[0][0] === "object" ) {
ordered.sort(function(a, b) { return a[0][0] - b[0][0]; });
} else {
ordered.sort(function(a, b) { return a[0] - b[0]; });
}
// Convert all entries to subranges.
for ( index = 0; index < ordered.length; index++ ) {
handleEntryPoint(ordered[index][1], ordered[index][0], this);
}
// Store the actual step values.
// xSteps is sorted in the same order as xPct and xVal.
this.xNumSteps = this.xSteps.slice(0);
// Convert all numeric steps to the percentage of the subrange they represent.
for ( index = 0; index < this.xNumSteps.length; index++ ) {
handleStepPoint(index, this.xNumSteps[index], this);
}
}
Spectrum.prototype.getMargin = function ( value ) {
var step = this.xNumSteps[0];
if ( step && ((value / step) % 1) !== 0 ) {
throw new Error("noUiSlider (" + VERSION + "): 'limit', 'margin' and 'padding' must be divisible by step.");
}
return this.xPct.length === 2 ? fromPercentage(this.xVal, value) : false;
};
Spectrum.prototype.toStepping = function ( value ) {
value = toStepping( this.xVal, this.xPct, value );
return value;
};
Spectrum.prototype.fromStepping = function ( value ) {
return fromStepping( this.xVal, this.xPct, value );
};
Spectrum.prototype.getStep = function ( value ) {
value = getStep(this.xPct, this.xSteps, this.snap, value );
return value;
};
Spectrum.prototype.getNearbySteps = function ( value ) {
var j = getJ(value, this.xPct);
return {
stepBefore: { startValue: this.xVal[j-2], step: this.xNumSteps[j-2], highestStep: this.xHighestCompleteStep[j-2] },
thisStep: { startValue: this.xVal[j-1], step: this.xNumSteps[j-1], highestStep: this.xHighestCompleteStep[j-1] },
stepAfter: { startValue: this.xVal[j-0], step: this.xNumSteps[j-0], highestStep: this.xHighestCompleteStep[j-0] }
};
};
Spectrum.prototype.countStepDecimals = function () {
var stepDecimals = this.xNumSteps.map(countDecimals);
return Math.max.apply(null, stepDecimals);
};
// Outside testing
Spectrum.prototype.convert = function ( value ) {
return this.getStep(this.toStepping(value));
};
/* Every input option is tested and parsed. This'll prevent
endless validation in internal methods. These tests are
structured with an item for every option available. An
option can be marked as required by setting the 'r' flag.
The testing function is provided with three arguments:
- The provided value for the option;
- A reference to the options object;
- The name for the option;
The testing function returns false when an error is detected,
or true when everything is OK. It can also modify the option
object, to make sure all values can be correctly looped elsewhere. */
var defaultFormatter = { 'to': function( value ){
return value !== undefined && value.toFixed(2);
}, 'from': Number };
function testStep ( parsed, entry ) {
if ( !isNumeric( entry ) ) {
throw new Error("noUiSlider (" + VERSION + "): 'step' is not numeric.");
}
// The step option can still be used to set stepping
// for linear sliders. Overwritten if set in 'range'.
parsed.singleStep = entry;
}
function testRange ( parsed, entry ) {
// Filter incorrect input.
if ( typeof entry !== 'object' || Array.isArray(entry) ) {
throw new Error("noUiSlider (" + VERSION + "): 'range' is not an object.");
}
// Catch missing start or end.
if ( entry.min === undefined || entry.max === undefined ) {
throw new Error("noUiSlider (" + VERSION + "): Missing 'min' or 'max' in 'range'.");
}
// Catch equal start or end.
if ( entry.min === entry.max ) {
throw new Error("noUiSlider (" + VERSION + "): 'range' 'min' and 'max' cannot be equal.");
}
parsed.spectrum = new Spectrum(entry, parsed.snap, parsed.dir, parsed.singleStep);
}
function testStart ( parsed, entry ) {
entry = asArray(entry);
// Validate input. Values aren't tested, as the public .val method
// will always provide a valid location.
if ( !Array.isArray( entry ) || !entry.length ) {
throw new Error("noUiSlider (" + VERSION + "): 'start' option is incorrect.");
}
// Store the number of handles.
parsed.handles = entry.length;
// When the slider is initialized, the .val method will
// be called with the start options.
parsed.start = entry;
}
function testSnap ( parsed, entry ) {
// Enforce 100% stepping within subranges.
parsed.snap = entry;
if ( typeof entry !== 'boolean' ){
throw new Error("noUiSlider (" + VERSION + "): 'snap' option must be a boolean.");
}
}
function testAnimate ( parsed, entry ) {
// Enforce 100% stepping within subranges.
parsed.animate = entry;
if ( typeof entry !== 'boolean' ){
throw new Error("noUiSlider (" + VERSION + "): 'animate' option must be a boolean.");
}
}
function testAnimationDuration ( parsed, entry ) {
parsed.animationDuration = entry;
if ( typeof entry !== 'number' ){
throw new Error("noUiSlider (" + VERSION + "): 'animationDuration' option must be a number.");
}
}
function testConnect ( parsed, entry ) {
var connect = [false];
var i;
// Map legacy options
if ( entry === 'lower' ) {
entry = [true, false];
}
else if ( entry === 'upper' ) {
entry = [false, true];
}
// Handle boolean options
if ( entry === true || entry === false ) {
for ( i = 1; i < parsed.handles; i++ ) {
connect.push(entry);
}
connect.push(false);
}
// Reject invalid input
else if ( !Array.isArray( entry ) || !entry.length || entry.length !== parsed.handles + 1 ) {
throw new Error("noUiSlider (" + VERSION + "): 'connect' option doesn't match handle count.");
}
else {
connect = entry;
}
parsed.connect = connect;
}
function testOrientation ( parsed, entry ) {
// Set orientation to an a numerical value for easy
// array selection.
switch ( entry ){
case 'horizontal':
parsed.ort = 0;
break;
case 'vertical':
parsed.ort = 1;
break;
default:
throw new Error("noUiSlider (" + VERSION + "): 'orientation' option is invalid.");
}
}
function testMargin ( parsed, entry ) {
if ( !isNumeric(entry) ){
throw new Error("noUiSlider (" + VERSION + "): 'margin' option must be numeric.");
}
// Issue #582
if ( entry === 0 ) {
return;
}
parsed.margin = parsed.spectrum.getMargin(entry);
if ( !parsed.margin ) {
throw new Error("noUiSlider (" + VERSION + "): 'margin' option is only supported on linear sliders.");
}
}
function testLimit ( parsed, entry ) {
if ( !isNumeric(entry) ){
throw new Error("noUiSlider (" + VERSION + "): 'limit' option must be numeric.");
}
parsed.limit = parsed.spectrum.getMargin(entry);
if ( !parsed.limit || parsed.handles < 2 ) {
throw new Error("noUiSlider (" + VERSION + "): 'limit' option is only supported on linear sliders with 2 or more handles.");
}
}
function testPadding ( parsed, entry ) {
if ( !isNumeric(entry) ){
throw new Error("noUiSlider (" + VERSION + "): 'padding' option must be numeric.");
}
if ( entry === 0 ) {
return;
}
parsed.padding = parsed.spectrum.getMargin(entry);
if ( !parsed.padding ) {
throw new Error("noUiSlider (" + VERSION + "): 'padding' option is only supported on linear sliders.");
}
if ( parsed.padding < 0 ) {
throw new Error("noUiSlider (" + VERSION + "): 'padding' option must be a positive number.");
}
if ( parsed.padding >= 50 ) {
throw new Error("noUiSlider (" + VERSION + "): 'padding' option must be less than half the range.");
}
}
function testDirection ( parsed, entry ) {
// Set direction as a numerical value for easy parsing.
// Invert connection for RTL sliders, so that the proper
// handles get the connect/background classes.
switch ( entry ) {
case 'ltr':
parsed.dir = 0;
break;
case 'rtl':
parsed.dir = 1;
break;
default:
throw new Error("noUiSlider (" + VERSION + "): 'direction' option was not recognized.");
}
}
function testBehaviour ( parsed, entry ) {
// Make sure the input is a string.
if ( typeof entry !== 'string' ) {
throw new Error("noUiSlider (" + VERSION + "): 'behaviour' must be a string containing options.");
}
// Check if the string contains any keywords.
// None are required.
var tap = entry.indexOf('tap') >= 0;
var drag = entry.indexOf('drag') >= 0;
var fixed = entry.indexOf('fixed') >= 0;
var snap = entry.indexOf('snap') >= 0;
var hover = entry.indexOf('hover') >= 0;
if ( fixed ) {
if ( parsed.handles !== 2 ) {
throw new Error("noUiSlider (" + VERSION + "): 'fixed' behaviour must be used with 2 handles");
}
// Use margin to enforce fixed state
testMargin(parsed, parsed.start[1] - parsed.start[0]);
}
parsed.events = {
tap: tap || snap,
drag: drag,
fixed: fixed,
snap: snap,
hover: hover
};
}
function testTooltips ( parsed, entry ) {
if ( entry === false ) {
return;
}
else if ( entry === true ) {
parsed.tooltips = [];
for ( var i = 0; i < parsed.handles; i++ ) {
parsed.tooltips.push(true);
}
}
else {
parsed.tooltips = asArray(entry);
if ( parsed.tooltips.length !== parsed.handles ) {
throw new Error("noUiSlider (" + VERSION + "): must pass a formatter for all handles.");
}
parsed.tooltips.forEach(function(formatter){
if ( typeof formatter !== 'boolean' && (typeof formatter !== 'object' || typeof formatter.to !== 'function') ) {
throw new Error("noUiSlider (" + VERSION + "): 'tooltips' must be passed a formatter or 'false'.");
}
});
}
}
function testFormat ( parsed, entry ) {
parsed.format = entry;
// Any object with a to and from method is supported.
if ( typeof entry.to === 'function' && typeof entry.from === 'function' ) {
return true;
}
throw new Error("noUiSlider (" + VERSION + "): 'format' requires 'to' and 'from' methods.");
}
function testCssPrefix ( parsed, entry ) {
if ( entry !== undefined && typeof entry !== 'string' && entry !== false ) {
throw new Error("noUiSlider (" + VERSION + "): 'cssPrefix' must be a string or `false`.");
}
parsed.cssPrefix = entry;
}
function testCssClasses ( parsed, entry ) {
if ( entry !== undefined && typeof entry !== 'object' ) {
throw new Error("noUiSlider (" + VERSION + "): 'cssClasses' must be an object.");
}
if ( typeof parsed.cssPrefix === 'string' ) {
parsed.cssClasses = {};
for ( var key in entry ) {
if ( !entry.hasOwnProperty(key) ) { continue; }
parsed.cssClasses[key] = parsed.cssPrefix + entry[key];
}
} else {
parsed.cssClasses = entry;
}
}
function testUseRaf ( parsed, entry ) {
if ( entry === true || entry === false ) {
parsed.useRequestAnimationFrame = entry;
} else {
throw new Error("noUiSlider (" + VERSION + "): 'useRequestAnimationFrame' option should be true (default) or false.");
}
}
// Test all developer settings and parse to assumption-safe values.
function testOptions ( options ) {
// To prove a fix for #537, freeze options here.
// If the object is modified, an error will be thrown.
// Object.freeze(options);
var parsed = {
margin: 0,
limit: 0,
padding: 0,
animate: true,
animationDuration: 300,
format: defaultFormatter
};
// Tests are executed in the order they are presented here.
var tests = {
'step': { r: false, t: testStep },
'start': { r: true, t: testStart },
'connect': { r: true, t: testConnect },
'direction': { r: true, t: testDirection },
'snap': { r: false, t: testSnap },
'animate': { r: false, t: testAnimate },
'animationDuration': { r: false, t: testAnimationDuration },
'range': { r: true, t: testRange },
'orientation': { r: false, t: testOrientation },
'margin': { r: false, t: testMargin },
'limit': { r: false, t: testLimit },
'padding': { r: false, t: testPadding },
'behaviour': { r: true, t: testBehaviour },
'format': { r: false, t: testFormat },
'tooltips': { r: false, t: testTooltips },
'cssPrefix': { r: false, t: testCssPrefix },
'cssClasses': { r: false, t: testCssClasses },
'useRequestAnimationFrame': { r: false, t: testUseRaf }
};
var defaults = {
'connect': false,
'direction': 'ltr',
'behaviour': 'tap',
'orientation': 'horizontal',
'cssPrefix' : 'noUi-',
'cssClasses': {
target: 'target',
base: 'base',
origin: 'origin',
handle: 'handle',
handleLower: 'handle-lower',
handleUpper: 'handle-upper',
horizontal: 'horizontal',
vertical: 'vertical',
background: 'background',
connect: 'connect',
ltr: 'ltr',
rtl: 'rtl',
draggable: 'draggable',
drag: 'state-drag',
tap: 'state-tap',
active: 'active',
tooltip: 'tooltip',
pips: 'pips',
pipsHorizontal: 'pips-horizontal',
pipsVertical: 'pips-vertical',
marker: 'marker',
markerHorizontal: 'marker-horizontal',
markerVertical: 'marker-vertical',
markerNormal: 'marker-normal',
markerLarge: 'marker-large',
markerSub: 'marker-sub',
value: 'value',
valueHorizontal: 'value-horizontal',
valueVertical: 'value-vertical',
valueNormal: 'value-normal',
valueLarge: 'value-large',
valueSub: 'value-sub'
},
'useRequestAnimationFrame': true
};
// Run all options through a testing mechanism to ensure correct
// input. It should be noted that options might get modified to
// be handled properly. E.g. wrapping integers in arrays.
Object.keys(tests).forEach(function( name ){
// If the option isn't set, but it is required, throw an error.
if ( options[name] === undefined && defaults[name] === undefined ) {
if ( tests[name].r ) {
throw new Error("noUiSlider (" + VERSION + "): '" + name + "' is required.");
}
return true;
}
tests[name].t( parsed, options[name] === undefined ? defaults[name] : options[name] );
});
// Forward pips options
parsed.pips = options.pips;
var styles = [['left', 'top'], ['right', 'bottom']];
// Pre-define the styles.
parsed.style = styles[parsed.dir][parsed.ort];
parsed.styleOposite = styles[parsed.dir?0:1][parsed.ort];
return parsed;
}
function closure ( target, options, originalOptions ){
var actions = getActions( );
// All variables local to 'closure' are prefixed with 'scope_'
var scope_Target = target;
var scope_Locations = [];
var scope_Base;
var scope_Handles;
var scope_HandleNumbers = [];
var scope_ActiveHandle = false;
var scope_Connects;
var scope_Spectrum = options.spectrum;
var scope_Values = [];
var scope_Events = {};
var scope_Self;
// Append a origin to the base
function addOrigin ( base, handleNumber ) {
var origin = addNodeTo(base, options.cssClasses.origin);
var handle = addNodeTo(origin, options.cssClasses.handle);
handle.setAttribute('data-handle', handleNumber);
if ( handleNumber === 0 ) {
addClass(handle, options.cssClasses.handleLower);
}
else if ( handleNumber === options.handles - 1 ) {
addClass(handle, options.cssClasses.handleUpper);
}
return origin;
}
// Insert nodes for connect elements
function addConnect ( base, add ) {
if ( !add ) {
return false;
}
return addNodeTo(base, options.cssClasses.connect);
}
// Add handles to the slider base.
function addElements ( connectOptions, base ) {
scope_Handles = [];
scope_Connects = [];
scope_Connects.push(addConnect(base, connectOptions[0]));
// [::::O====O====O====]
// connectOptions = [0, 1, 1, 1]
for ( var i = 0; i < options.handles; i++ ) {
// Keep a list of all added handles.
scope_Handles.push(addOrigin(base, i));
scope_HandleNumbers[i] = i;
scope_Connects.push(addConnect(base, connectOptions[i + 1]));
}
}
// Initialize a single slider.
function addSlider ( target ) {
// Apply classes and data to the target.
addClass(target, options.cssClasses.target);
if ( options.dir === 0 ) {
addClass(target, options.cssClasses.ltr);
} else {
addClass(target, options.cssClasses.rtl);
}
if ( options.ort === 0 ) {
addClass(target, options.cssClasses.horizontal);
} else {
addClass(target, options.cssClasses.vertical);
}
scope_Base = addNodeTo(target, options.cssClasses.base);
}
function addTooltip ( handle, handleNumber ) {
if ( !options.tooltips[handleNumber] ) {
return false;
}
return addNodeTo(handle.firstChild, options.cssClasses.tooltip);
}
// The tooltips option is a shorthand for using the 'update' event.
function tooltips ( ) {
// Tooltips are added with options.tooltips in original order.
var tips = scope_Handles.map(addTooltip);
bindEvent('update', function(values, handleNumber, unencoded) {
if ( !tips[handleNumber] ) {
return;
}
var formattedValue = values[handleNumber];
if ( options.tooltips[handleNumber] !== true ) {
formattedValue = options.tooltips[handleNumber].to(unencoded[handleNumber]);
}
tips[handleNumber].innerHTML = formattedValue;
});
}
function getGroup ( mode, values, stepped ) {
// Use the range.
if ( mode === 'range' || mode === 'steps' ) {
return scope_Spectrum.xVal;
}
if ( mode === 'count' ) {
if ( !values ) {
throw new Error("noUiSlider (" + VERSION + "): 'values' required for mode 'count'.");
}
// Divide 0 - 100 in 'count' parts.
var spread = ( 100 / (values - 1) );
var v;
var i = 0;
values = [];
// List these parts and have them handled as 'positions'.
while ( (v = i++ * spread) <= 100 ) {
values.push(v);
}
mode = 'positions';
}
if ( mode === 'positions' ) {
// Map all percentages to on-range values.
return values.map(function( value ){
return scope_Spectrum.fromStepping( stepped ? scope_Spectrum.getStep( value ) : value );
});
}
if ( mode === 'values' ) {
// If the value must be stepped, it needs to be converted to a percentage first.
if ( stepped ) {
return values.map(function( value ){
// Convert to percentage, apply step, return to value.
return scope_Spectrum.fromStepping( scope_Spectrum.getStep( scope_Spectrum.toStepping( value ) ) );
});
}
// Otherwise, we can simply use the values.
return values;
}
}
function generateSpread ( density, mode, group ) {
function safeIncrement(value, increment) {
// Avoid floating point variance by dropping the smallest decimal places.
return (value + increment).toFixed(7) / 1;
}
var indexes = {};
var firstInRange = scope_Spectrum.xVal[0];
var lastInRange = scope_Spectrum.xVal[scope_Spectrum.xVal.length-1];
var ignoreFirst = false;
var ignoreLast = false;
var prevPct = 0;
// Create a copy of the group, sort it and filter away all duplicates.
group = unique(group.slice().sort(function(a, b){ return a - b; }));
// Make sure the range starts with the first element.
if ( group[0] !== firstInRange ) {
group.unshift(firstInRange);
ignoreFirst = true;
}
// Likewise for the last one.
if ( group[group.length - 1] !== lastInRange ) {
group.push(lastInRange);
ignoreLast = true;
}
group.forEach(function ( current, index ) {
// Get the current step and the lower + upper positions.
var step;
var i;
var q;
var low = current;
var high = group[index+1];
var newPct;
var pctDifference;
var pctPos;
var type;
var steps;
var realSteps;
var stepsize;
// When using 'steps' mode, use the provided steps.
// Otherwise, we'll step on to the next subrange.
if ( mode === 'steps' ) {
step = scope_Spectrum.xNumSteps[ index ];
}
// Default to a 'full' step.
if ( !step ) {
step = high-low;
}
// Low can be 0, so test for false. If high is undefined,
// we are at the last subrange. Index 0 is already handled.
if ( low === false || high === undefined ) {
return;
}
// Make sure step isn't 0, which would cause an infinite loop (#654)
step = Math.max(step, 0.0000001);
// Find all steps in the subrange.
for ( i = low; i <= high; i = safeIncrement(i, step) ) {
// Get the percentage value for the current step,
// calculate the size for the subrange.
newPct = scope_Spectrum.toStepping( i );
pctDifference = newPct - prevPct;
steps = pctDifference / density;
realSteps = Math.round(steps);
// This ratio represents the ammount of percentage-space a point indicates.
// For a density 1 the points/percentage = 1. For density 2, that percentage needs to be re-devided.
// Round the percentage offset to an even number, then divide by two
// to spread the offset on both sides of the range.
stepsize = pctDifference/realSteps;
// Divide all points evenly, adding the correct number to this subrange.
// Run up to <= so that 100% gets a point, event if ignoreLast is set.
for ( q = 1; q <= realSteps; q += 1 ) {
// The ratio between the rounded value and the actual size might be ~1% off.
// Correct the percentage offset by the number of points
// per subrange. density = 1 will result in 100 points on the
// full range, 2 for 50, 4 for 25, etc.
pctPos = prevPct + ( q * stepsize );
indexes[pctPos.toFixed(5)] = ['x', 0];
}
// Determine the point type.
type = (group.indexOf(i) > -1) ? 1 : ( mode === 'steps' ? 2 : 0 );
// Enforce the 'ignoreFirst' option by overwriting the type for 0.
if ( !index && ignoreFirst ) {
type = 0;
}
if ( !(i === high && ignoreLast)) {
// Mark the 'type' of this point. 0 = plain, 1 = real value, 2 = step value.
indexes[newPct.toFixed(5)] = [i, type];
}
// Update the percentage count.
prevPct = newPct;
}
});
return indexes;
}
function addMarking ( spread, filterFunc, formatter ) {
var element = document.createElement('div');
var out = '';
var valueSizeClasses = [
options.cssClasses.valueNormal,
options.cssClasses.valueLarge,
options.cssClasses.valueSub
];
var markerSizeClasses = [
options.cssClasses.markerNormal,
options.cssClasses.markerLarge,
options.cssClasses.markerSub
];
var valueOrientationClasses = [
options.cssClasses.valueHorizontal,
options.cssClasses.valueVertical
];
var markerOrientationClasses = [
options.cssClasses.markerHorizontal,
options.cssClasses.markerVertical
];
addClass(element, options.cssClasses.pips);
addClass(element, options.ort === 0 ? options.cssClasses.pipsHorizontal : options.cssClasses.pipsVertical);
function getClasses( type, source ){
var a = source === options.cssClasses.value;
var orientationClasses = a ? valueOrientationClasses : markerOrientationClasses;
var sizeClasses = a ? valueSizeClasses : markerSizeClasses;
return source + ' ' + orientationClasses[options.ort] + ' ' + sizeClasses[type];
}
function getTags( offset, source, values ) {
return 'class="' + getClasses(values[1], source) + '" style="' + options.style + ': ' + offset + '%"';
}
function addSpread ( offset, values ){
// Apply the filter function, if it is set.
values[1] = (values[1] && filterFunc) ? filterFunc(values[0], values[1]) : values[1];
// Add a marker for every point
out += '<div ' + getTags(offset, options.cssClasses.marker, values) + '></div>';
// Values are only appended for points marked '1' or '2'.
if ( values[1] ) {
out += '<div ' + getTags(offset, options.cssClasses.value, values) + '>' + formatter.to(values[0]) + '</div>';
}
}
// Append all points.
Object.keys(spread).forEach(function(a){
addSpread(a, spread[a]);
});
element.innerHTML = out;
return element;
}
function pips ( grid ) {
var mode = grid.mode;
var density = grid.density || 1;
var filter = grid.filter || false;
var values = grid.values || false;
var stepped = grid.stepped || false;
var group = getGroup( mode, values, stepped );
var spread = generateSpread( density, mode, group );
var format = grid.format || {
to: Math.round
};
return scope_Target.appendChild(addMarking(
spread,
filter,
format
));
}
// Shorthand for base dimensions.
function baseSize ( ) {
var rect = scope_Base.getBoundingClientRect(), alt = 'offset' + ['Width', 'Height'][options.ort];
return options.ort === 0 ? (rect.width||scope_Base[alt]) : (rect.height||scope_Base[alt]);
}
// Handler for attaching events trough a proxy.
function attachEvent ( events, element, callback, data ) {
// This function can be used to 'filter' events to the slider.
// element is a node, not a nodeList
var method = function ( e ){
if ( scope_Target.hasAttribute('disabled') ) {
return false;
}
// Stop if an active 'tap' transition is taking place.
if ( hasClass(scope_Target, options.cssClasses.tap) ) {
return false;
}
e = fixEvent(e, data.pageOffset);
// Handle reject of multitouch
if ( !e ) {
return false;
}
// Ignore right or middle clicks on start #454
if ( events === actions.start && e.buttons !== undefined && e.buttons > 1 ) {
return false;
}
// Ignore right or middle clicks on start #454
if ( data.hover && e.buttons ) {
return false;
}
e.calcPoint = e.points[ options.ort ];
// Call the event handler with the event [ and additional data ].
callback ( e, data );
};
var methods = [];
// Bind a closure on the target for every event type.
events.split(' ').forEach(function( eventName ){
element.addEventListener(eventName, method, false);
methods.push([eventName, method]);
});
return methods;
}
// Provide a clean event with standardized offset values.
function fixEvent ( e, pageOffset ) {
// Prevent scrolling and panning on touch events, while
// attempting to slide. The tap event also depends on this.
e.preventDefault();
// Filter the event to register the type, which can be
// touch, mouse or pointer. Offset changes need to be
// made on an event specific basis.
var touch = e.type.indexOf('touch') === 0;
var mouse = e.type.indexOf('mouse') === 0;
var pointer = e.type.indexOf('pointer') === 0;
var x;
var y;
// IE10 implemented pointer events with a prefix;
if ( e.type.indexOf('MSPointer') === 0 ) {
pointer = true;
}
if ( touch ) {
// Fix bug when user touches with two or more fingers on mobile devices.
// It's useful when you have two or more sliders on one page,
// that can be touched simultaneously.
// #649, #663, #668
if ( e.touches.length > 1 ) {
return false;
}
// noUiSlider supports one movement at a time,
// so we can select the first 'changedTouch'.
x = e.changedTouches[0].pageX;
y = e.changedTouches[0].pageY;
}
pageOffset = pageOffset || getPageOffset();
if ( mouse || pointer ) {
x = e.clientX + pageOffset.x;
y = e.clientY + pageOffset.y;
}
e.pageOffset = pageOffset;
e.points = [x, y];
e.cursor = mouse || pointer; // Fix #435
return e;
}
// Translate a coordinate in the document to a percentage on the slider
function calcPointToPercentage ( calcPoint ) {
var location = calcPoint - offset(scope_Base, options.ort);
var proposal = ( location * 100 ) / baseSize();
return options.dir ? 100 - proposal : proposal;
}
// Find handle closest to a certain percentage on the slider
function getClosestHandle ( proposal ) {
var closest = 100;
var handleNumber = false;
scope_Handles.forEach(function(handle, index){
// Disabled handles are ignored
if ( handle.hasAttribute('disabled') ) {
return;
}
var pos = Math.abs(scope_Locations[index] - proposal);
if ( pos < closest ) {
handleNumber = index;
closest = pos;
}
});
return handleNumber;
}
// Moves handle(s) by a percentage
// (bool, % to move, [% where handle started, ...], [index in scope_Handles, ...])
function moveHandles ( upward, proposal, locations, handleNumbers ) {
var proposals = locations.slice();
var b = [!upward, upward];
var f = [upward, !upward];
// Copy handleNumbers so we don't change the dataset
handleNumbers = handleNumbers.slice();
// Check to see which handle is 'leading'.
// If that one can't move the second can't either.
if ( upward ) {
handleNumbers.reverse();
}
// Step 1: get the maximum percentage that any of the handles can move
if ( handleNumbers.length > 1 ) {
handleNumbers.forEach(function(handleNumber, o) {
var to = checkHandlePosition(proposals, handleNumber, proposals[handleNumber] + proposal, b[o], f[o]);
// Stop if one of the handles can't move.
if ( to === false ) {
proposal = 0;
} else {
proposal = to - proposals[handleNumber];
proposals[handleNumber] = to;
}
});
}
// If using one handle, check backward AND forward
else {
b = f = [true];
}
var state = false;
// Step 2: Try to set the handles with the found percentage
handleNumbers.forEach(function(handleNumber, o) {
state = setHandle(handleNumber, locations[handleNumber] + proposal, b[o], f[o]) || state;
});
// Step 3: If a handle moved, fire events
if ( state ) {
handleNumbers.forEach(function(handleNumber){
fireEvent('update', handleNumber);
fireEvent('slide', handleNumber);
});
}
}
// External event handling
function fireEvent ( eventName, handleNumber, tap ) {
Object.keys(scope_Events).forEach(function( targetEvent ) {
var eventType = targetEvent.split('.')[0];
if ( eventName === eventType ) {
scope_Events[targetEvent].forEach(function( callback ) {
callback.call(
// Use the slider public API as the scope ('this')
scope_Self,
// Return values as array, so arg_1[arg_2] is always valid.
scope_Values.map(options.format.to),
// Handle index, 0 or 1
handleNumber,
// Unformatted slider values
scope_Values.slice(),
// Event is fired by tap, true or false
tap || false,
// Left offset of the handle, in relation to the slider
scope_Locations.slice()
);
});
}
});
}
// Fire 'end' when a mouse or pen leaves the document.
function documentLeave ( event, data ) {
if ( event.type === "mouseout" && event.target.nodeName === "HTML" && event.relatedTarget === null ){
eventEnd (event, data);
}
}
// Handle movement on document for handle and range drag.
function eventMove ( event, data ) {
// Fix #498
// Check value of .buttons in 'start' to work around a bug in IE10 mobile (data.buttonsProperty).
// https://connect.microsoft.com/IE/feedback/details/927005/mobile-ie10-windows-phone-buttons-property-of-pointermove-event-always-zero
// IE9 has .buttons and .which zero on mousemove.
// Firefox breaks the spec MDN defines.
if ( navigator.appVersion.indexOf("MSIE 9") === -1 && event.buttons === 0 && data.buttonsProperty !== 0 ) {
return eventEnd(event, data);
}
// Check if we are moving up or down
var movement = (options.dir ? -1 : 1) * (event.calcPoint - data.startCalcPoint);
// Convert the movement into a percentage of the slider width/height
var proposal = (movement * 100) / data.baseSize;
moveHandles(movement > 0, proposal, data.locations, data.handleNumbers);
}
// Unbind move events on document, call callbacks.
function eventEnd ( event, data ) {
// The handle is no longer active, so remove the class.
if ( scope_ActiveHandle ) {
removeClass(scope_ActiveHandle, options.cssClasses.active);
scope_ActiveHandle = false;
}
// Remove cursor styles and text-selection events bound to the body.
if ( event.cursor ) {
document.body.style.cursor = '';
document.body.removeEventListener('selectstart', document.body.noUiListener);
}
// Unbind the move and end events, which are added on 'start'.
document.documentElement.noUiListeners.forEach(function( c ) {
document.documentElement.removeEventListener(c[0], c[1]);
});
// Remove dragging class.
removeClass(scope_Target, options.cssClasses.drag);
setZindex();
data.handleNumbers.forEach(function(handleNumber){
fireEvent('set', handleNumber);
fireEvent('change', handleNumber);
fireEvent('end', handleNumber);
});
}
// Bind move events on document.
function eventStart ( event, data ) {
if ( data.handleNumbers.length === 1 ) {
var handle = scope_Handles[data.handleNumbers[0]];
// Ignore 'disabled' handles
if ( handle.hasAttribute('disabled') ) {
return false;
}
// Mark the handle as 'active' so it can be styled.
scope_ActiveHandle = handle.children[0];
addClass(scope_ActiveHandle, options.cssClasses.active);
}
// Fix #551, where a handle gets selected instead of dragged.
event.preventDefault();
// A drag should never propagate up to the 'tap' event.
event.stopPropagation();
// Attach the move and end events.
var moveEvent = attachEvent(actions.move, document.documentElement, eventMove, {
startCalcPoint: event.calcPoint,
baseSize: baseSize(),
pageOffset: event.pageOffset,
handleNumbers: data.handleNumbers,
buttonsProperty: event.buttons,
locations: scope_Locations.slice()
});
var endEvent = attachEvent(actions.end, document.documentElement, eventEnd, {
handleNumbers: data.handleNumbers
});
var outEvent = attachEvent("mouseout", document.documentElement, documentLeave, {
handleNumbers: data.handleNumbers
});
document.documentElement.noUiListeners = moveEvent.concat(endEvent, outEvent);
// Text selection isn't an issue on touch devices,
// so adding cursor styles can be skipped.
if ( event.cursor ) {
// Prevent the 'I' cursor and extend the range-drag cursor.
document.body.style.cursor = getComputedStyle(event.target).cursor;
// Mark the target with a dragging state.
if ( scope_Handles.length > 1 ) {
addClass(scope_Target, options.cssClasses.drag);
}
var f = function(){
return false;
};
document.body.noUiListener = f;
// Prevent text selection when dragging the handles.
document.body.addEventListener('selectstart', f, false);
}
data.handleNumbers.forEach(function(handleNumber){
fireEvent('start', handleNumber);
});
}
// Move closest handle to tapped location.
function eventTap ( event ) {
// The tap event shouldn't propagate up
event.stopPropagation();
var proposal = calcPointToPercentage(event.calcPoint);
var handleNumber = getClosestHandle(proposal);
// Tackle the case that all handles are 'disabled'.
if ( handleNumber === false ) {
return false;
}
// Flag the slider as it is now in a transitional state.
// Transition takes a configurable amount of ms (default 300). Re-enable the slider after that.
if ( !options.events.snap ) {
addClassFor(scope_Target, options.cssClasses.tap, options.animationDuration);
}
setHandle(handleNumber, proposal, true, true);
setZindex();
fireEvent('slide', handleNumber, true);
fireEvent('set', handleNumber, true);
fireEvent('change', handleNumber, true);
fireEvent('update', handleNumber, true);
if ( options.events.snap ) {
eventStart(event, { handleNumbers: [handleNumber] });
}
}
// Fires a 'hover' event for a hovered mouse/pen position.
function eventHover ( event ) {
var proposal = calcPointToPercentage(event.calcPoint);
var to = scope_Spectrum.getStep(proposal);
var value = scope_Spectrum.fromStepping(to);
Object.keys(scope_Events).forEach(function( targetEvent ) {
if ( 'hover' === targetEvent.split('.')[0] ) {
scope_Events[targetEvent].forEach(function( callback ) {
callback.call( scope_Self, value );
});
}
});
}
// Attach events to several slider parts.
function bindSliderEvents ( behaviour ) {
// Attach the standard drag event to the handles.
if ( !behaviour.fixed ) {
scope_Handles.forEach(function( handle, index ){
// These events are only bound to the visual handle
// element, not the 'real' origin element.
attachEvent ( actions.start, handle.children[0], eventStart, {
handleNumbers: [index]
});
});
}
// Attach the tap event to the slider base.
if ( behaviour.tap ) {
attachEvent (actions.start, scope_Base, eventTap, {});
}
// Fire hover events
if ( behaviour.hover ) {
attachEvent (actions.move, scope_Base, eventHover, { hover: true });
}
// Make the range draggable.
if ( behaviour.drag ){
scope_Connects.forEach(function( connect, index ){
if ( connect === false || index === 0 || index === scope_Connects.length - 1 ) {
return;
}
var handleBefore = scope_Handles[index - 1];
var handleAfter = scope_Handles[index];
var eventHolders = [connect];
addClass(connect, options.cssClasses.draggable);
// When the range is fixed, the entire range can
// be dragged by the handles. The handle in the first
// origin will propagate the start event upward,
// but it needs to be bound manually on the other.
if ( behaviour.fixed ) {
eventHolders.push(handleBefore.children[0]);
eventHolders.push(handleAfter.children[0]);
}
eventHolders.forEach(function( eventHolder ) {
attachEvent ( actions.start, eventHolder, eventStart, {
handles: [handleBefore, handleAfter],
handleNumbers: [index - 1, index]
});
});
});
}
}
// Split out the handle positioning logic so the Move event can use it, too
function checkHandlePosition ( reference, handleNumber, to, lookBackward, lookForward ) {
// For sliders with multiple handles, limit movement to the other handle.
// Apply the margin option by adding it to the handle positions.
if ( scope_Handles.length > 1 ) {
if ( lookBackward && handleNumber > 0 ) {
to = Math.max(to, reference[handleNumber - 1] + options.margin);
}
if ( lookForward && handleNumber < scope_Handles.length - 1 ) {
to = Math.min(to, reference[handleNumber + 1] - options.margin);
}
}
// The limit option has the opposite effect, limiting handles to a
// maximum distance from another. Limit must be > 0, as otherwise
// handles would be unmoveable.
if ( scope_Handles.length > 1 && options.limit ) {
if ( lookBackward && handleNumber > 0 ) {
to = Math.min(to, reference[handleNumber - 1] + options.limit);
}
if ( lookForward && handleNumber < scope_Handles.length - 1 ) {
to = Math.max(to, reference[handleNumber + 1] - options.limit);
}
}
// The padding option keeps the handles a certain distance from the
// edges of the slider. Padding must be > 0.
if ( options.padding ) {
if ( handleNumber === 0 ) {
to = Math.max(to, options.padding);
}
if ( handleNumber === scope_Handles.length - 1 ) {
to = Math.min(to, 100 - options.padding);
}
}
to = scope_Spectrum.getStep(to);
// Limit percentage to the 0 - 100 range
to = limit(to);
// Return false if handle can't move
if ( to === reference[handleNumber] ) {
return false;
}
return to;
}
function toPct ( pct ) {
return pct + '%';
}
// Updates scope_Locations and scope_Values, updates visual state
function updateHandlePosition ( handleNumber, to ) {
// Update locations.
scope_Locations[handleNumber] = to;
// Convert the value to the slider stepping/range.
scope_Values[handleNumber] = scope_Spectrum.fromStepping(to);
// Called synchronously or on the next animationFrame
var stateUpdate = function() {
scope_Handles[handleNumber].style[options.style] = toPct(to);
updateConnect(handleNumber);
updateConnect(handleNumber + 1);
};
// Set the handle to the new position.
// Use requestAnimationFrame for efficient painting.
// No significant effect in Chrome, Edge sees dramatic performace improvements.
// Option to disable is useful for unit tests, and single-step debugging.
if ( window.requestAnimationFrame && options.useRequestAnimationFrame ) {
window.requestAnimationFrame(stateUpdate);
} else {
stateUpdate();
}
}
function setZindex ( ) {
scope_HandleNumbers.forEach(function(handleNumber){
// Handles before the slider middle are stacked later = higher,
// Handles after the middle later is lower
// [[7] [8] .......... | .......... [5] [4]
var dir = (scope_Locations[handleNumber] > 50 ? -1 : 1);
var zIndex = 3 + (scope_Handles.length + (dir * handleNumber));
scope_Handles[handleNumber].childNodes[0].style.zIndex = zIndex;
});
}
// Test suggested values and apply margin, step.
function setHandle ( handleNumber, to, lookBackward, lookForward ) {
to = checkHandlePosition(scope_Locations, handleNumber, to, lookBackward, lookForward);
if ( to === false ) {
return false;
}
updateHandlePosition(handleNumber, to);
return true;
}
// Updates style attribute for connect nodes
function updateConnect ( index ) {
// Skip connects set to false
if ( !scope_Connects[index] ) {
return;
}
var l = 0;
var h = 100;
if ( index !== 0 ) {
l = scope_Locations[index - 1];
}
if ( index !== scope_Connects.length - 1 ) {
h = scope_Locations[index];
}
scope_Connects[index].style[options.style] = toPct(l);
scope_Connects[index].style[options.styleOposite] = toPct(100 - h);
}
// ...
function setValue ( to, handleNumber ) {
// Setting with null indicates an 'ignore'.
// Inputting 'false' is invalid.
if ( to === null || to === false ) {
return;
}
// If a formatted number was passed, attemt to decode it.
if ( typeof to === 'number' ) {
to = String(to);
}
to = options.format.from(to);
// Request an update for all links if the value was invalid.
// Do so too if setting the handle fails.
if ( to !== false && !isNaN(to) ) {
setHandle(handleNumber, scope_Spectrum.toStepping(to), false, false);
}
}
// Set the slider value.
function valueSet ( input, fireSetEvent ) {
var values = asArray(input);
var isInit = scope_Locations[0] === undefined;
// Event fires by default
fireSetEvent = (fireSetEvent === undefined ? true : !!fireSetEvent);
values.forEach(setValue);
// Animation is optional.
// Make sure the initial values were set before using animated placement.
if ( options.animate && !isInit ) {
addClassFor(scope_Target, options.cssClasses.tap, options.animationDuration);
}
// Now that all base values are set, apply constraints
scope_HandleNumbers.forEach(function(handleNumber){
setHandle(handleNumber, scope_Locations[handleNumber], true, false);
});
setZindex();
scope_HandleNumbers.forEach(function(handleNumber){
fireEvent('update', handleNumber);
// Fire the event only for handles that received a new value, as per #579
if ( values[handleNumber] !== null && fireSetEvent ) {
fireEvent('set', handleNumber);
}
});
}
// Reset slider to initial values
function valueReset ( fireSetEvent ) {
valueSet(options.start, fireSetEvent);
}
// Get the slider value.
function valueGet ( ) {
var values = scope_Values.map(options.format.to);
// If only one handle is used, return a single value.
if ( values.length === 1 ){
return values[0];
}
return values;
}
// Removes classes from the root and empties it.
function destroy ( ) {
for ( var key in options.cssClasses ) {
if ( !options.cssClasses.hasOwnProperty(key) ) { continue; }
removeClass(scope_Target, options.cssClasses[key]);
}
while (scope_Target.firstChild) {
scope_Target.removeChild(scope_Target.firstChild);
}
delete scope_Target.noUiSlider;
}
// Get the current step size for the slider.
function getCurrentStep ( ) {
// Check all locations, map them to their stepping point.
// Get the step point, then find it in the input list.
return scope_Locations.map(function( location, index ){
var nearbySteps = scope_Spectrum.getNearbySteps( location );
var value = scope_Values[index];
var increment = nearbySteps.thisStep.step;
var decrement = null;
// If the next value in this step moves into the next step,
// the increment is the start of the next step - the current value
if ( increment !== false ) {
if ( value + increment > nearbySteps.stepAfter.startValue ) {
increment = nearbySteps.stepAfter.startValue - value;
}
}
// If the value is beyond the starting point
if ( value > nearbySteps.thisStep.startValue ) {
decrement = nearbySteps.thisStep.step;
}
else if ( nearbySteps.stepBefore.step === false ) {
decrement = false;
}
// If a handle is at the start of a step, it always steps back into the previous step first
else {
decrement = value - nearbySteps.stepBefore.highestStep;
}
// Now, if at the slider edges, there is not in/decrement
if ( location === 100 ) {
increment = null;
}
else if ( location === 0 ) {
decrement = null;
}
// As per #391, the comparison for the decrement step can have some rounding issues.
var stepDecimals = scope_Spectrum.countStepDecimals();
// Round per #391
if ( increment !== null && increment !== false ) {
increment = Number(increment.toFixed(stepDecimals));
}
if ( decrement !== null && decrement !== false ) {
decrement = Number(decrement.toFixed(stepDecimals));
}
return [decrement, increment];
});
}
// Attach an event to this slider, possibly including a namespace
function bindEvent ( namespacedEvent, callback ) {
scope_Events[namespacedEvent] = scope_Events[namespacedEvent] || [];
scope_Events[namespacedEvent].push(callback);
// If the event bound is 'update,' fire it immediately for all handles.
if ( namespacedEvent.split('.')[0] === 'update' ) {
scope_Handles.forEach(function(a, index){
fireEvent('update', index);
});
}
}
// Undo attachment of event
function removeEvent ( namespacedEvent ) {
var event = namespacedEvent && namespacedEvent.split('.')[0];
var namespace = event && namespacedEvent.substring(event.length);
Object.keys(scope_Events).forEach(function( bind ){
var tEvent = bind.split('.')[0],
tNamespace = bind.substring(tEvent.length);
if ( (!event || event === tEvent) && (!namespace || namespace === tNamespace) ) {
delete scope_Events[bind];
}
});
}
// Updateable: margin, limit, padding, step, range, animate, snap
function updateOptions ( optionsToUpdate, fireSetEvent ) {
// Spectrum is created using the range, snap, direction and step options.
// 'snap' and 'step' can be updated, 'direction' cannot, due to event binding.
// If 'snap' and 'step' are not passed, they should remain unchanged.
var v = valueGet();
var updateAble = ['margin', 'limit', 'padding', 'range', 'animate', 'snap', 'step', 'format'];
// Only change options that we're actually passed to update.
updateAble.forEach(function(name){
if ( optionsToUpdate[name] !== undefined ) {
originalOptions[name] = optionsToUpdate[name];
}
});
var newOptions = testOptions(originalOptions);
// Load new options into the slider state
updateAble.forEach(function(name){
if ( optionsToUpdate[name] !== undefined ) {
options[name] = newOptions[name];
}
});
// Save current spectrum direction as testOptions in testRange call
// doesn't rely on current direction
newOptions.spectrum.direction = scope_Spectrum.direction;
scope_Spectrum = newOptions.spectrum;
// Limit, margin and padding depend on the spectrum but are stored outside of it. (#677)
options.margin = newOptions.margin;
options.limit = newOptions.limit;
options.padding = newOptions.padding;
// Invalidate the current positioning so valueSet forces an update.
scope_Locations = [];
valueSet(optionsToUpdate.start || v, fireSetEvent);
}
// Throw an error if the slider was already initialized.
if ( scope_Target.noUiSlider ) {
throw new Error("noUiSlider (" + VERSION + "): Slider was already initialized.");
}
// Create the base element, initialise HTML and set classes.
// Add handles and connect elements.
addSlider(scope_Target);
addElements(options.connect, scope_Base);
scope_Self = {
destroy: destroy,
steps: getCurrentStep,
on: bindEvent,
off: removeEvent,
get: valueGet,
set: valueSet,
reset: valueReset,
// Exposed for unit testing, don't use this in your application.
__moveHandles: function(a, b, c) { moveHandles(a, b, scope_Locations, c); },
options: originalOptions, // Issue #600, #678
updateOptions: updateOptions,
target: scope_Target, // Issue #597
pips: pips // Issue #594
};
// Attach user events.
bindSliderEvents(options.events);
// Use the public value method to set the start values.
valueSet(options.start);
if ( options.pips ) {
pips(options.pips);
}
if ( options.tooltips ) {
tooltips();
}
return scope_Self;
}
// Run the standard initializer
function initialize ( target, originalOptions ) {
if ( !target.nodeName ) {
throw new Error("noUiSlider (" + VERSION + "): create requires a single element.");
}
// Test the options and create the slider environment;
var options = testOptions( originalOptions, target );
var api = closure( target, options, originalOptions );
target.noUiSlider = api;
return api;
}
// Use an object instead of a function for future expansibility;
return {
version: VERSION,
create: initialize
};
}));
\ No newline at end of file
(function(){
'use strict';
var
/** @const */ FormatOptions = [
'decimals',
'thousand',
'mark',
'prefix',
'postfix',
'encoder',
'decoder',
'negativeBefore',
'negative',
'edit',
'undo'
];
// General
// Reverse a string
function strReverse ( a ) {
return a.split('').reverse().join('');
}
// Check if a string starts with a specified prefix.
function strStartsWith ( input, match ) {
return input.substring(0, match.length) === match;
}
// Check is a string ends in a specified postfix.
function strEndsWith ( input, match ) {
return input.slice(-1 * match.length) === match;
}
// Throw an error if formatting options are incompatible.
function throwEqualError( F, a, b ) {
if ( (F[a] || F[b]) && (F[a] === F[b]) ) {
throw new Error(a);
}
}
// Check if a number is finite and not NaN
function isValidNumber ( input ) {
return typeof input === 'number' && isFinite( input );
}
// Provide rounding-accurate toFixed method.
function toFixed ( value, decimals ) {
var scale = Math.pow(10, decimals);
return ( Math.round(value * scale) / scale).toFixed( decimals );
}
// Formatting
// Accept a number as input, output formatted string.
function formatTo ( decimals, thousand, mark, prefix, postfix, encoder, decoder, negativeBefore, negative, edit, undo, input ) {
var originalInput = input, inputIsNegative, inputPieces, inputBase, inputDecimals = '', output = '';
// Apply user encoder to the input.
// Expected outcome: number.
if ( encoder ) {
input = encoder(input);
}
// Stop if no valid number was provided, the number is infinite or NaN.
if ( !isValidNumber(input) ) {
return false;
}
// Rounding away decimals might cause a value of -0
// when using very small ranges. Remove those cases.
if ( decimals !== false && parseFloat(input.toFixed(decimals)) === 0 ) {
input = 0;
}
// Formatting is done on absolute numbers,
// decorated by an optional negative symbol.
if ( input < 0 ) {
inputIsNegative = true;
input = Math.abs(input);
}
// Reduce the number of decimals to the specified option.
if ( decimals !== false ) {
input = toFixed( input, decimals );
}
// Transform the number into a string, so it can be split.
input = input.toString();
// Break the number on the decimal separator.
if ( input.indexOf('.') !== -1 ) {
inputPieces = input.split('.');
inputBase = inputPieces[0];
if ( mark ) {
inputDecimals = mark + inputPieces[1];
}
} else {
// If it isn't split, the entire number will do.
inputBase = input;
}
// Group numbers in sets of three.
if ( thousand ) {
inputBase = strReverse(inputBase).match(/.{1,3}/g);
inputBase = strReverse(inputBase.join( strReverse( thousand ) ));
}
// If the number is negative, prefix with negation symbol.
if ( inputIsNegative && negativeBefore ) {
output += negativeBefore;
}
// Prefix the number
if ( prefix ) {
output += prefix;
}
// Normal negative option comes after the prefix. Defaults to '-'.
if ( inputIsNegative && negative ) {
output += negative;
}
// Append the actual number.
output += inputBase;
output += inputDecimals;
// Apply the postfix.
if ( postfix ) {
output += postfix;
}
// Run the output through a user-specified post-formatter.
if ( edit ) {
output = edit ( output, originalInput );
}
// All done.
return output;
}
// Accept a sting as input, output decoded number.
function formatFrom ( decimals, thousand, mark, prefix, postfix, encoder, decoder, negativeBefore, negative, edit, undo, input ) {
var originalInput = input, inputIsNegative, output = '';
// User defined pre-decoder. Result must be a non empty string.
if ( undo ) {
input = undo(input);
}
// Test the input. Can't be empty.
if ( !input || typeof input !== 'string' ) {
return false;
}
// If the string starts with the negativeBefore value: remove it.
// Remember is was there, the number is negative.
if ( negativeBefore && strStartsWith(input, negativeBefore) ) {
input = input.replace(negativeBefore, '');
inputIsNegative = true;
}
// Repeat the same procedure for the prefix.
if ( prefix && strStartsWith(input, prefix) ) {
input = input.replace(prefix, '');
}
// And again for negative.
if ( negative && strStartsWith(input, negative) ) {
input = input.replace(negative, '');
inputIsNegative = true;
}
// Remove the postfix.
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice
if ( postfix && strEndsWith(input, postfix) ) {
input = input.slice(0, -1 * postfix.length);
}
// Remove the thousand grouping.
if ( thousand ) {
input = input.split(thousand).join('');
}
// Set the decimal separator back to period.
if ( mark ) {
input = input.replace(mark, '.');
}
// Prepend the negative symbol.
if ( inputIsNegative ) {
output += '-';
}
// Add the number
output += input;
// Trim all non-numeric characters (allow '.' and '-');
output = output.replace(/[^0-9\.\-.]/g, '');
// The value contains no parse-able number.
if ( output === '' ) {
return false;
}
// Covert to number.
output = Number(output);
// Run the user-specified post-decoder.
if ( decoder ) {
output = decoder(output);
}
// Check is the output is valid, otherwise: return false.
if ( !isValidNumber(output) ) {
return false;
}
return output;
}
// Framework
// Validate formatting options
function validate ( inputOptions ) {
var i, optionName, optionValue,
filteredOptions = {};
for ( i = 0; i < FormatOptions.length; i+=1 ) {
optionName = FormatOptions[i];
optionValue = inputOptions[optionName];
if ( optionValue === undefined ) {
// Only default if negativeBefore isn't set.
if ( optionName === 'negative' && !filteredOptions.negativeBefore ) {
filteredOptions[optionName] = '-';
// Don't set a default for mark when 'thousand' is set.
} else if ( optionName === 'mark' && filteredOptions.thousand !== '.' ) {
filteredOptions[optionName] = '.';
} else {
filteredOptions[optionName] = false;
}
// Floating points in JS are stable up to 7 decimals.
} else if ( optionName === 'decimals' ) {
if ( optionValue >= 0 && optionValue < 8 ) {
filteredOptions[optionName] = optionValue;
} else {
throw new Error(optionName);
}
// These options, when provided, must be functions.
} else if ( optionName === 'encoder' || optionName === 'decoder' || optionName === 'edit' || optionName === 'undo' ) {
if ( typeof optionValue === 'function' ) {
filteredOptions[optionName] = optionValue;
} else {
throw new Error(optionName);
}
// Other options are strings.
} else {
if ( typeof optionValue === 'string' ) {
filteredOptions[optionName] = optionValue;
} else {
throw new Error(optionName);
}
}
}
// Some values can't be extracted from a
// string if certain combinations are present.
throwEqualError(filteredOptions, 'mark', 'thousand');
throwEqualError(filteredOptions, 'prefix', 'negative');
throwEqualError(filteredOptions, 'prefix', 'negativeBefore');
return filteredOptions;
}
// Pass all options as function arguments
function passAll ( options, method, input ) {
var i, args = [];
// Add all options in order of FormatOptions
for ( i = 0; i < FormatOptions.length; i+=1 ) {
args.push(options[FormatOptions[i]]);
}
// Append the input, then call the method, presenting all
// options as arguments.
args.push(input);
return method.apply('', args);
}
/** @constructor */
function wNumb ( options ) {
if ( !(this instanceof wNumb) ) {
return new wNumb ( options );
}
if ( typeof options !== "object" ) {
return;
}
options = validate(options);
// Call 'formatTo' with proper arguments.
this.to = function ( input ) {
return passAll(options, formatTo, input);
};
// Call 'formatFrom' with proper arguments.
this.from = function ( input ) {
return passAll(options, formatFrom, input);
};
}
/** @export */
window.wNumb = wNumb;
}());
Screen{"Create Company Role Wizard - Basic Details": cssIncludes => ["css/companyStyles.css"]
Panel{"": Columns[1,3,1,3,1,3]
PanelRow{
Label{"Name":},
PanelCell{colspan => 3
Field{"": value => "Senior Project Manager", style => "width:90%;"}
}
}
PanelRow{
LabelSelect{"Profile": options => ["Executive Management", "General Management", "Sales Personal", "General Workforce", "Call Centre sales", "Call centre Sales and support", "Developer"],
dataNotes => "Show the Standard Profiles of the system and any custom Profiles created by the company", CssClass => "selProfile"
}
}
PanelRow{
Label{"Description":},
PanelCell{colspan => 3
TextArea{"": style => "width:90%;height:80px;"}
}
}
PanelRow{
PanelCell{colspan => 6}
}
}
Panel{"": Columns[1,1,10]
PanelRow{
PanelCell{colspan => 1},
Button{"Create": nextPage => "Create Company Role Wizard - Customise Workflow", buttonStyle => Default},
PanelCell{colspan => 1}
}
}
RawHTML{"":
scriptContent => "
$(function(){
var select = $('.selProfile');
var LastOption = select.find('option').last();
LastOption.wrap('<optGroup label=\"Custom Profiles\"></optGroup>');
});
"
}
}
Screen{"Create Company Role Wizard - Customise Workflow": cssIncludes => ["css/companyStyles.css"]
Button{"Save": nextPage => "Search Company Role"}
Panel{"": Columns[1,3,1,3,1,3]
PanelRow{
LabelToString{"Role": value => "Senior Project Manager"},
LabelToString{"Profile": value => "Executive Management"}
}
PanelRow{
LabelToString{"Duration": value => "1.58 Hrs (95 mins)", recalc => true}
}
PanelRow{
PanelCell{colspan => 6}
}
}
Table{"": showTitle => false, CssClass => "workflowTable"
Col{"": filter => false, sorting => false, width => 1}
Col{"": filter => false, sorting => false, width => 15}
Col{"": filter => false, sorting => false, width => 10}
Col{"": filter => false, sorting => false, width => 5}
Col{"": filter => false, sorting => false, width => 5}
TableRow{
Label{"": CssClass => "dragRow"}
Label{"Skills Self Assessment":}
Label{"Duration: 15mins":}
Button{"Customise": iconSize => glyphiconLg, nextPage => "Create Company Role Wizard - Customise Skills Self Assessment", buttonStyle => Default,
icons=> [
{"glyphicon-cog":}
]
}
Button{"Remove": iconSize => glyphiconLg, buttonStyle => Default, requirement => "Remove the Assessment from the workflow",
icons=> [
{"glyphicon-remove":}
]
}
}
TableRow{
Label{"": CssClass => "dragRow"}
Label{"Apollo Full":}
Label{"Duration: 30mins":}
Button{"Customise": iconSize => glyphiconLg, buttonStyle => Default, nextPage => "Create Company Role Wizard - Customise Apollo Tests",
requirement => "Customisations of Full Apollo test and the Short Apollo test are maintained separately",
icons=> [
{"glyphicon-cog":}
]
}
Button{"Remove": iconSize => glyphiconLg, buttonStyle => Default,
icons=> [
{"glyphicon-remove":}
]
}
}
TableRow{
Label{"": CssClass => "dragRow"}
Label{"Apollo Culture":}
Label{"Duration: 15mins":}
Button{"Customise": iconSize => glyphiconLg, buttonStyle => Default, nextPage => "Create Company Role Wizard - Customise Apollo Tests",
icons=> [
{"glyphicon-cog":}
]
}
Button{"Remove": iconSize => glyphiconLg, buttonStyle => Default,
icons=> [
{"glyphicon-remove":}
]
}
}
TableRow{
Label{"": CssClass => "dragRow"}
Label{"Phone Interview":}
Label{"Duration: 20mins":}
Button{"Customise": iconSize => glyphiconLg, buttonStyle => Default, nextPage => "Create Company Role Wizard - Customise Phone In Person Meetings",
icons=> [
{"glyphicon-cog":}
]
}
Button{"Remove": iconSize => glyphiconLg, buttonStyle => Default,
icons=> [
{"glyphicon-remove":}
]
}
}
TableRow{
Label{"": CssClass => "dragRow"}
Label{"In Person Interview":}
Label{"Duration: 15mins":}
Button{"Customise": iconSize => glyphiconLg, buttonStyle => Default, nextPage => "Create Company Role Wizard - Customise Phone In Person Meetings",
icons=> [
{"glyphicon-cog":}
]
}
Button{"Remove": iconSize => glyphiconLg, buttonStyle => Default,
icons=> [
{"glyphicon-remove":}
]
}
}
}
Panel{"": Columns[1,3,1,3,1,3]
PanelRow{
RawHTML{"":
scriptContent => "
$(function(){
$('.workflowTable tbody tr').each(function(index){
var row = $(this);
if(row.find('.dragRow').length > 0){
row.children('td:first').addClass('sortHandle');
}
});
$('tbody',$('.workflowTable')).sortable({
handle: 'td.sortHandle',
cursor:'move'
});
});
"
}
}
PanelRow{
ButtonDropdown{"Add": dataNotes => "List the Assessments which are not included in the Workflow"
Button{"Apollo Short":}
}
}
PanelRow{
PanelCell{colspan => 6}
}
}
Panel{"": Columns[1,1,8,1,1]
PanelRow{
PanelCell{colspan => 1},
Button{"Next": nextPage => "Create Company Role Wizard - Customise Skills Self Assessment", buttonStyle => Default,
requirement => "The following Pages should navigate to customise each assessment in the workflow, in the order they are defined.<br/>
Navigating between Pages should save the details"
},
PanelCell{colspan => 1},
Button{"Finish": nextPage => "Create Company Role Wizard - Finish", buttonStyle => Default},
PanelCell{colspan => 1}
}
}
}
Screen{"Create Company Role Wizard - Customise Skills Self Assessment":
cssIncludes => ["css/companyStyles.css"]
Button{"Save": nextPage => "Search Company Role"}
Panel{"": Columns[1,3,1,3,1,3]
PanelRow{
LabelToString{"Role": value => "Senior Project Manager"},
LabelToString{"Profile": value => "Executive Management"}
}
PanelRow{
LabelToString{"Duration": value => "30 min", recalc => true,
requirement => "The estimated time take to complete the assessment<br/>
we will have predefined time span which will be spent to answer a single question in the assessment; that time is then multiplied by the no of questions in the assessment"
}
}
PanelRow{
PanelCell{colspan => 2
Label{"Skills": style => "font-size:16px;font-weight:bold;"}
}
}
}
Table{"": showTitle => false
Col{"Skill": filter => false, sorting => false, width => 6}
Col{"Level": filter => false, sorting => false, width => 4}
Col{"Importance": filter => false, sorting => false, width => 3}
Col{"": filter => false, sorting => false, width => 2}
TableRow{
TableCell{colspan => 3, style => "vertical-align: middle;"
Label{"Essential Skills": style => "font-weight:bold;"}
}
Button{"Add": iconSize => glyphiconLg, buttonStyle => Default,
icons=> [
{"glyphicon-plus":}
]
}
}
TableRow{
Field{"": value => "Knowledge in Project Management Tools such as MS Project", style => "width:85%;",
validationNotes => "Required"
}
ButtonGroupRadio{"msproject": value => "Proficient", validationNotes => "Required",
options => ["Beginner", "Proficient", "Expert"]
}
ButtonGroupRadio{"msprojectImp": options => ["Primary", "Secondary"],
value => "Primary", validationNotes => "Required"
}
Button{"Remove": iconSize => glyphiconLg, buttonStyle => Default,
icons=> [
{"glyphicon-remove":}
]
}
}
TableRow{
TableCell{colspan => 3, style => "vertical-align: middle;"
Label{"Desired Skills": style => "font-weight:bold;"}
}
Button{"Add": iconSize => glyphiconLg, buttonStyle => Default,
icons=> [
{"glyphicon-plus":}
]
}
}
TableRow{
Field{"": value => "Wireframing Tools", style => "width:85%;"}
ButtonGroupRadio{"wireframe": value => "Proficient", options => ["Beginner", "Proficient", "Expert"]}
ButtonGroupRadio{"wireframeImp": options => ["Primary", "Secondary"],
value => "Secondary"
}
Button{"Remove": iconSize => glyphiconLg, buttonStyle => Default,
icons=> [
{"glyphicon-remove":}
]
}
}
}
Panel{"": Columns[1,3,1,3,1,3]
PanelRow{
PanelCell{colspan => 6}
}
PanelRow{
PanelCell{colspan => 2
Label{"Qualifications": style => "font-size:16px;font-weight:bold;"}
}
}
}
Table{"": showTitle => false
Col{"Qualifications": filter => false, sorting => false, width => 10}
Col{"Importance": filter => false, sorting => false, width => 3}
Col{"": filter => false, sorting => false, width => 2}
TableRow{
TableCell{colspan => 2, style => "vertical-align: middle;"
Label{"Essential Qualifications": style => "font-weight:bold;"}
}
Button{"Add": iconSize => glyphiconLg, buttonStyle => Default,
icons=> [
{"glyphicon-plus":}
]
}
}
TableRow{
Field{"": value => "Bachelor Degree in Information Technology", style => "width:85%;",
validationNotes => "Required"
}
ButtonGroupRadio{"degreeImp": options => ["Primary", "Secondary"],
value => "Primary", validationNotes => "Required"
}
Button{"Remove": iconSize => glyphiconLg, buttonStyle => Default,
icons=> [
{"glyphicon-remove":}
]
}
}
TableRow{
TableCell{colspan => 2, style => "vertical-align: middle;"
Label{"Desired Qualification": style => "font-weight:bold;"}
}
Button{"Add": iconSize => glyphiconLg, buttonStyle => Default,
icons=> [
{"glyphicon-plus":}
]
}
}
TableRow{
Field{"": value => "Microsoft Certification: Managing Projects with Microsoft Project", style => "width:85%;"}
ButtonGroupRadio{"mscImp": options => ["Primary", "Secondary"],
value => "Primary"
}
Button{"Remove": iconSize => glyphiconLg, buttonStyle => Default,
icons=> [
{"glyphicon-remove":}
]
}
}
}
Panel{"": Columns[1,3,1,3,1,3]
PanelRow{
PanelCell{colspan => 6}
}
PanelRow{
PanelCell{colspan => 6
Button{"Customise the email sent to candidates once they complete the assessment": buttonStyle => Link, style => "float:left;",
nextPage => "Create Company Role Wizard - Customise Candidate Competition Email"
}
}
}
PanelRow{
PanelCell{colspan => 5}
}
}
Panel{"": Columns[1,1,10]
PanelRow{
Button{"Back": buttonStyle => Default, nextPage => "Create Company Role Wizard - Customise Workflow"},
Button{"Next": buttonStyle => Default, nextPage => "Create Company Role Wizard - Customise Apollo Tests"},
PanelCell{colspan => 1}
}
}
}
Screen{"Create Company Role Wizard - Customise Candidate Competition Email":
cssIncludes => ["css/companyStyles.css"]
Panel{"": Columns[1,4,1,4,1]
PanelRow{
LabelToString{"Role": value => "Senior Project Manager"},
LabelToString{"Profile": value => "Executive Management"}
}
PanelRow{
LabelToString{"Assessment": value => "Skills Self Assessment"}
}
}
Panel{"": Columns[10,2]
PanelRow{
Panel{"": Columns[2,10]
PanelRow{
Label{"Email Body":}
}
PanelRow{
PanelCell{colspan => 2
RichTextArea{"": CssClass => "emailTemplateEditor",
style => "width:90%;",
value => "Dear {CandidateFirstName},<br/>
<br/>
You have completed Skills Self Assessment for the role of Project Manager.<br/>
You can proceed to the next assessment by clicking the link below;<br/>
<br/>
Thanks you for Participation
"
}
}
}
},
Panel{"": Columns[12]
PanelRow{
Label{"Symbols": style => "font-weight:bold;"}
}
PanelRow{
Link{"{CandidateFirstName}": requirement => "Clicking on the symbol should add the symbol to the position in the detail area"}
}
PanelRow{
Link{"{CandidateSurName}":}
}
}
}
}
Panel{"": Columns[1,1,10]
PanelRow{
PanelCell{colspan => 3}
}
PanelRow{
Button{"Back": buttonStyle => Default, nextPage => "Create Company Role Wizard - Customise Skills Self Assessment"},
Button{"Done": buttonStyle => Default, nextPage => "Create Company Role Wizard - Customise Skills Self Assessment"},
PanelCell{colspan => 1}
}
}
}
Screen{"Create Company Role Wizard - Customise Apollo Tests":
cssIncludes => ["css/nouislider.css", "css/jquery-ui-slider-pips.css", "css/companyStyles.css"],
scriptIncludes => ["scripts/nouislider.js", "scripts/jquery-ui-slider-pips.js", "scripts/wNumb.js", "scripts/customiseApolloTestsPage.js"]
Button{"Save": nextPage => "Search Company Role"}
Panel{"": Columns[1,3,1,3,1,3]
PanelRow{
LabelToString{"Role": value => "Senior Project Manager"},
LabelToString{"Profile": value => "Executive Management"}
}
PanelRow{
LabelToString{"Duration": value => "5 min", recalc => true,
requirement => "The estimated time take to complete the assessment<br/>
we will have predefined time span which will be spent to answer a single question in the assessment; that time is then multiplied by the no of questions in the assessment"
}
}
PanelRow{
PanelCell{colspan => 6}
}
}
Table{"": showTitle => false, CssClass => "custom-personality-scale-table"
Col{"Personality Scales": filter => false, sorting => false, width => 6}
Col{"Importance": filter => false, sorting => false, width => 8}
Col{"Score": filter => false, sorting => false, width => 16}
TableRow{
TableCell{colspan => 3
Label{"Career Drives": style => "font-weight:bold;font-size:14px;display:inline-block;"}
GlyphsIcon{"": iconSize => glyphiconLg,
icons=> [
{"glyphicon-chevron-right": style => "float:right;padding-top: 4px;"}
]
}
}
}
TableRow{
TableCell{colspan => 3
Label{"Coping": style => "font-weight:bold;font-size:14px;display:inline-block;",
requirement => "Collapsable Panes<br/>
Only one Panel can be expanded at a time"
}
GlyphsIcon{"": iconSize => glyphiconLg,
icons=> [
{"glyphicon-chevron-down": style => "float:right;padding-top: 4px;"}
]
}
}
}
TableRow{
Label{"Responsibility":}
ButtonGroupRadio{"responsibility": options => ["Primary", "Secondary", "Not Used"],
value => "Primary"
}
RawHTML{"": style => "height:70px;",
htmlContent => "<div class='slider-range slider-range-3point'></div>"
}
}
TableRow{
Label{"Security":}
ButtonGroupRadio{"security": options => ["Primary", "Secondary", "Not Used"],
value => "Not Used"
}
TableCell{colspan => 1}
// RawHTML{"": style => "height:40px;",
// htmlContent => "<div class='slider-range slider-range-1point' data-slider-value='85' data-slider-firstpip='Insecure' data-slider-lastpip='Secure'></div>"
// }
}
TableRow{
TableCell{colspan => 3
Label{"People Orientation": style => "font-weight:bold;font-size:14px;display:inline-block;"}
GlyphsIcon{"": iconSize => glyphiconLg,
icons=> [
{"glyphicon-chevron-down": style => "float:right;padding-top: 4px;"}
]
}
}
}
TableRow{
Label{"Agreeable":}
ButtonGroupRadio{"agreeable": options => ["Primary", "Secondary", "Not Used"],
value => "Secondary"
}
RawHTML{"": style => "height: 70px;",
htmlContent => "<div class='slider-range slider-range-2point'></div>"
}
}
TableRow{
TableCell{colspan => 3
Label{"Workplace Management": style => "font-weight:bold;font-size:14px;display:inline-block;"}
GlyphsIcon{"": iconSize => glyphiconLg,
icons=> [
{"glyphicon-chevron-down": style => "float:right;padding-top: 4px;"}
]
}
}
}
TableRow{
Label{"Self Organised":}
ButtonGroupRadio{"selfOrganised": options => ["Primary", "Secondary", "Not Used"],
value => "Primary"
}
RawHTML{"": style => "height: 50px;",
htmlContent => "<div class='slider-range slider-range-1point' data-slider-value='60' data-slider-firstpip='Disorganised' data-slider-lastpip='Highly Organised'></div>"
}
}
}
Panel{"": Columns[1,3,1,3,1,3]
PanelRow{
PanelCell{colspan => 3}
}
PanelRow{
PanelCell{colspan => 6
Button{"Customise the email sent to candidates once they complete the assessment": buttonStyle => Link, style => "float:left;",
nextPage => "Create Company Role Wizard - Customise Candidate Competition Email"
}
}
}
PanelRow{
PanelCell{colspan => 6}
}
}
Panel{"": Columns[1,1,10]
PanelRow{
Button{"Back": buttonStyle => Default, nextPage => "Create Company Role Wizard - Customise Skills Self Assessment"},
Button{"Next": buttonStyle => Default, nextPage => "Create Company Role Wizard - Customise Phone In Person Meetings"},
PanelCell{colspan => 1}
}
}
}
Screen{"Create Company Role Wizard - Customise Phone In Person Meetings":
cssIncludes => ["css/jquery-ui-slider-pips.css", "css/companyStyles.css"],
scriptIncludes => ["scripts/jquery-ui-slider-pips.js", "scripts/jquery-ui.multidatespicker.js", "scripts/customisePhoneInPersonMeetings.js"]
//customisePhoneInPersonMeetings.js
Button{"Save": nextPage => "Search Company Role"}
Panel{"": Columns[1,3,1,3,1,3]
PanelRow{
LabelToString{"Role": value => "Senior Project Manager"},
LabelToString{"Profile": value => "Executive Management"}
}
PanelRow{
LabelField{"Duration": value => "30", style => "width: 20%;", suffix => " min"}
}
PanelRow{
PanelCell{colspan => 2
Label{"Questions": style => "font-size:16px;font-weight:bold;"}
}
}
}
Table{"": showTitle => false, CssClass => "customise-questions-table"
Col{"Question": filter => false, sorting => false, width => 6}
Col{"Importance": filter => false, sorting => false, width => 4}
Col{"Score": filter => false, sorting => false, width => 6}
Col{"": filter => false, sorting => false, width => 2}
TableRow{
TextArea{"": value => "What software have you used to manage projects in the past?", style => "width:85%;height:60px;",
validationNotes => "Required"
}
ButtonGroupRadio{"imp": options => ["Primary", "Secondary"],
value => "Secondary", validationNotes => "Required"
}
RawHTML{"": style => "height: 50px;",
htmlContent => "<div class='slider-range slider-range-1point' data-slider-value='6'></div>"
}
Button{"Remove": iconSize => glyphiconLg, buttonStyle => Default,
icons=> [
{"glyphicon-remove":}
]
}
}
TableRow{
TextArea{"": value => "Tell me about a time when you had two key stakeholders with opposing views. How did you manage that?", style => "width:95%;height:60px;"}
ButtonGroupRadio{"imp": options => ["Primary", "Secondary"],
value => "Primary"
}
RawHTML{"": style => "height: 50px;",
htmlContent => "<div class='slider-range slider-range-1point' data-slider-value='7'></div>"
}
Button{"Remove": iconSize => glyphiconLg, buttonStyle => Default,
icons=> [
{"glyphicon-remove":}
]
}
}
TableRow{
TextArea{"": value => "Are you responsible for delivery and financials or just the administration of the project? Tell me about your recent projects goals and results.", style => "width:95%;height:60px;"}
ButtonGroupRadio{"imp": options => ["Primary", "Secondary"],
value => "Secondary"
}
RawHTML{"": style => "height: 50px;",
htmlContent => "<div class='slider-range slider-range-1point' data-slider-value='5'></div>"
}
Button{"Remove": iconSize => glyphiconLg, buttonStyle => Default,
icons=> [
{"glyphicon-remove":}
]
}
}
}
Panel{"": Columns[1,3,1,3,1,3]
PanelRow{
PanelCell{colspan => 6}
}
PanelRow{
PanelCell{colspan => 1},
Button{"Add": iconSize => glyphiconLg, buttonStyle => Default, style => "float:left;",
icons=> [
{"glyphicon-plus":}
]
}
}
PanelRow{
PanelCell{colspan => 6}
}
PanelRow{
PanelCell{colspan => 2
Label{"Availability": style => "font-size:16px;font-weight:bold;"}
}
}
PanelRow{
PanelCell{colspan => 3
RawHTML{"datePicker":,
requirement => "This calendar is used to pick a date range by marking the start and the end of the session.",
developerNotes => "Should be similar to http://preview.codecanyon.net/item/jalendar-2-calendar-pack-event-range-and-more/full_screen_preview/12662442?ref=jqueryrain<br/>
or http://tamble.github.io/jquery-ui-daterangepicker/"
}
},
PanelCell{colspan => 2
Table{"": CssClass => "table-noheader", showTitle => false
Col{"": filter => false, sorting => false, width => 5}
Col{"": filter => false, sorting => false, width => 4}
Col{"": filter => false, sorting => false, width => 4}
Col{"": filter => false, sorting => false, width => 5}
TableRow{
Checkbox{"": suffix => " Monday", checked => true}
TimePicker{"": value => "09:00"}
TimePicker{"": value => "11:00"}
Button{"Copy Times": requirement => "Copy the times to the dates which are selected"}
}
TableRow{
Checkbox{"": suffix => " Tuesday", checked => true}
TimePicker{"": value => "09:00"}
TimePicker{"": value => "11:00"}
TableCell{colspan => 1}
}
TableRow{
Checkbox{"": suffix => " Wednesday", checked => true}
TimePicker{"": value => "09:00"}
TimePicker{"": value => "11:00"}
TableCell{colspan => 1}
}
TableRow{
Checkbox{"": suffix => " Thursday"}
TableCell{colspan => 1}
TableCell{colspan => 1}
TableCell{colspan => 1}
}
TableRow{
Checkbox{"": suffix => " Friday"}
TableCell{colspan => 1}
TableCell{colspan => 1}
TableCell{colspan => 1}
}
TableRow{
Checkbox{"": suffix => " Saturday"}
TableCell{colspan => 1}
TableCell{colspan => 1}
TableCell{colspan => 1}
}
TableRow{
Checkbox{"": suffix => " Sunday"}
TableCell{colspan => 1}
TableCell{colspan => 1}
TableCell{colspan => 1}
}
}
}
}
PanelRow{
PanelCell{colspan => 6
Button{"Customise the email sent to candidates once they complete the assessment": buttonStyle => Link, style => "float:left;",
nextPage => "Create Company Role Wizard - Customise Candidate Competition Email"
}
}
}
PanelRow{
PanelCell{colspan => 6}
}
}
Panel{"": Columns[1,1,10]
PanelRow{
Button{"Back": buttonStyle => Default, nextPage => "Create Company Role Wizard - Customise Apollo Tests"},
Button{"Next": buttonStyle => Default, nextPage => "Create Company Role Wizard - Finish"},
PanelCell{colspan => 1}
}
}
}
Screen{"Create Company Role Wizard - Finish":
cssIncludes => ["css/companyStyles.css"]
Panel{"": Columns[2,4,2,4]
PanelRow{
PanelCell{colspan => 4
Label{"Summary": style => "font-size:16px;font-weight:bold;"}
}
}
PanelRow{
LabelToString{"Role": value => "Senior Project Manager"},
LabelToString{"Profile": value => "Executive Management"}
}
PanelRow{
LabelToString{"Duration": value => "1.58 Hrs (90 mins)"}
}
}
Table{"": showTitle => false, CssClass => "table table-condensed table-noheader"
Col{"": filter => false, sorting => false, width => 1}
Col{"": filter => false, sorting => false, width => 30}
Col{"": filter => false, sorting => false, width => 10}
Col{"": filter => false, sorting => false, width => 1}
TableRow{
TableCell{colspan => 2
Label{"Skills Self Assessment":}
}
Label{"Duration: 15 mins":}
GlyphsIcon{"": iconSize => glyphiconLg,
requirement => "Expand / collapse the panel below<br/>
Only one panel can be expanded at a time",
icons=> [
{"glyphicon-chevron-down": style => "padding-top: 4px;"}
]
}
}
TableRow{
TableCell{colspan => 1}
TableCell{colspan => 3
Panel{"": Columns[2,3,1,2,3,1]
PanelRow{
Label{"Essential Skills": style => "font-weight:bold;"},
Label{"Knowledge in Project Management Tools such as MS Project":},
Label{"Expert": requirement => "Show the Essential Skills recorded and their Level"},
Label{"Desired Skills": style => "font-weight:bold;"},
Label{"Wireframing Tools":},
Label{"Proficient": requirement => "Show the Desired Skills recorded and their Level"}
}
PanelRow{
Label{"Essential Qualifications": style => "font-weight:bold;"},
PanelCell{colspan => 2
Label{"Bachelor Degree in Information Technology": requirement => "Show the Essential Qualifications recorded"}
},
Label{"Desired Qualifications": style => "font-weight:bold;"},
PanelCell{colspan => 2
Label{"Microsoft Certification: Managing Projects with Microsoft Project": requirement => "Show the Essential Qualifications recorded"}
}
}
}
}
}
TableRow{
TableCell{colspan => 2
Label{"Apollo Full":}
}
Label{"Duration: 30 mins":}
GlyphsIcon{"": iconSize => glyphiconLg,
icons=> [
{"glyphicon-chevron-down": style => "padding-top: 4px;"}
]
}
}
TableRow{
TableCell{colspan => 1}
TableCell{colspan => 3
Panel{"": Columns[2,3,1,2,3,1]
PanelRow{
Label{"Career Drives": style => "font-weight:bold;"},
Label{"Archivement":},
Label{"Primary":},
Label{"Coping": style => "font-weight:bold;"},
Label{"Responsibility":},
Label{"Primary":}
}
PanelRow{
PanelCell{colspan => 1},
Label{"Remuneration":},
Label{"Secondary":},
PanelCell{colspan => 1},
Label{"Security":},
Label{"Secondary":}
}
PanelRow{
Label{"People Orientation": style => "font-weight:bold;"},
Label{"Agreeable":},
Label{"Secondary":},
Label{"Workplace Management": style => "font-weight:bold;"},
Label{"Self Organised":},
Label{"Primary":}
}
}
}
}
TableRow{
TableCell{colspan => 2
Label{"Apollo Culture":}
}
Label{"Duration: 15 mins":}
GlyphsIcon{"": iconSize => glyphiconLg,
icons=> [
{"glyphicon-chevron-right": style => "padding-top: 4px;"}
]
}
}
TableRow{
TableCell{colspan => 2
Label{"Phone Interview":}
}
Label{"Duration: 20 mins":}
GlyphsIcon{"": iconSize => glyphiconLg,
icons=> [
{"glyphicon-chevron-right": style => "padding-top: 4px;"}
]
}
}
TableRow{
TableCell{colspan => 2
Label{"In Person Interview":}
}
Label{"Duration: 15 mins":}
GlyphsIcon{"": iconSize => glyphiconLg,
icons=> [
{"glyphicon-chevron-right": style => "padding-top: 4px;"}
]
}
}
}
Panel{"": Columns[1,1,8,1,1]
PanelRow{
Button{"Back": buttonStyle => Default, nextPage => "Create Company Role Wizard - Customise Phone In Person Meetings"},
PanelCell{colspan => 1},
PanelCell{colspan => 1},
Button{"Create Role": buttonStyle => Default, nextPage => "Edit Company Role"},
PanelCell{colspan => 1}
}
}
}
\ No newline at end of file
Screen{"Edit Company Role": screenType => Edit, showCancel => {true: nextPage => "Search Company Role"}, showSave => {true: nextPage => "Search Company Role"},
cssIncludes => ["css/jquery.switchButton.css", "css/companyStyles.css", "css/editCompanyRole.css"], scriptIncludes => ["scripts/jquery.switchButton.js", "scripts/editCompanyRole.js"]
Panel{"": Columns[1,3,1,3,1,3]
PanelRow{
LabelToString{"Role": value => "Senior Project Manager"},
LabelToString{"Profile": value => "Executive Management"},
LabelCheckbox{"Status": CssClass => "switchCheckbox", staticEnumDataNote => "Open, Close", checked => true}
}
PanelRow{
LabelToString{"Duration": value => "1.58 Hrs (90 mins)"}
}
}
Tab{"Candidates":
Panel{"": Columns[2,4,2,4]
PanelRow{
PanelCell{colspan => 4
ButtonGroupRadio{"CandidateStage": CssClass => "btn-breadcrumb", value => "All: 135",
dataNotes => "These are the workflow stages of the role<br/>
Show no of candidates at each stage",
options => ["All: 135", "Skills Self Assessment: 70", "Apollo Full: 30", "Apollo Culture: 20", "Phone Interview: 10", "In Person Interview: 5"]
}
}
}
PanelRow{
Button{"Advanced ": buttonStyle => Link, style => "float:left;",
icons=> [
{"glyphicon glyphicon-menu-down":}
], requirement => "when clicked show the advanced filter field below"
}
}
PanelRow{
Select{"": options => ["Candidate Enrolled", "Last Active"]},
Date{"":},
LabelDate{"To":}
}
PanelRow{
LabelField{"Candidate Name": style => "width:80%;", requirement => "Search for Candidate Firstname, Middle Name, Last name and Preferred name"},
PanelCell{colspan => 1},
Button{"Filter": buttonStyle => Default}
}
PanelRow{
PanelCell{colspan => 4}
}
}
Table{"": showTitle => false
Col{"": filter => false, sorting => false, width => 1, requirement => "Provide a select all check box"}
Col{"Candidate Name": width => 16}
Col{"Enrolled Date": width => 8}
Col{"Skills Self Assessment": width => 8}
Col{"Apollo Full": width => 8}
Col{"Apollo Culture": width => 8}
Col{"Phone Interview": width => 8}
Col{"In Person Interview": width => 8}
Col{"Last Active": width => 8}
TableRow{
Label{"": requirement => "The checkbox is not shown, because the candidate has not qualified for the phone / in person interview"}
Link{"AngusNGeorge": nextPage => "View Candidate Result"}
Date{"": value => "10/03/2017", readOnly => true}
TableCell{colspan => 1, style => "background-color:lightgreen;"
Label{"76": requirement => "The overall suitability score earned by the candidate<br/>
use the traffic light colours to indicate suitability"}
}
TableCell{colspan => 1, style => "background-color:#ffff78;"
Label{"52":}
}
TableCell{colspan => 1, style => "background-color:indianred;"
Label{"40":}
}
Label{"": requirement => "This candidate has not been selected because he has not scored adequately to be selected for the next stage, so the Phone Interview status is not shown"}
TableCell{colspan => 1}
Date{"": value => "12/03/2017", readOnly => true}
}
TableRow{
Checkbox{"":}
Link{"ElizabethHPraed": nextPage => "View Candidate Result"}
Date{"": value => "09/03/2017", readOnly => true}
TableCell{colspan => 1, style => "background-color:lightgreen;"
Label{"90":}
}
TableCell{colspan => 1, style => "background-color:lightgreen;"
Label{"80":}
}
TableCell{colspan => 1, style => "background-color:lightgreen;"
Label{"87":}
}
TableCell{colspan => 1, style => "background-color:lightgreen;"
Label{"74":}
}
Label{"Not Invited yet":}
Date{"": value => "13/03/2017", readOnly => true}
}
}
}
Tab{"Role Summary":
Table{"": showTitle => false, CssClass => "table table-condensed table-noheader"
Col{"": filter => false, sorting => false, width => 1}
Col{"": filter => false, sorting => false, width => 30}
Col{"": filter => false, sorting => false, width => 10}
Col{"": filter => false, sorting => false, width => 1}
TableRow{
TableCell{colspan => 2
Label{"Skills Self Assessment":}
}
Label{"Duration: 15 mins":}
GlyphsIcon{"": iconSize => glyphiconLg,
requirement => "Expand / collapse the panel below<br/>
Only one panel can be expanded at a time",
icons=> [
{"glyphicon-chevron-down": style => "padding-top: 4px;"}
]
}
}
TableRow{
TableCell{colspan => 1}
TableCell{colspan => 3
Panel{"": Columns[2,3,1,2,3,1]
PanelRow{
Label{"Essential Skills": style => "font-weight:bold;"},
Label{"Knowledge in Project Management Tools such as MS Project":},
Label{"Expert": requirement => "Show the Essential Skills recorded and their Level"},
Label{"Desired Skills": style => "font-weight:bold;"},
Label{"Wireframing Tools":},
Label{"Proficient": requirement => "Show the Desired Skills recorded and their Level"}
}
PanelRow{
Label{"Essential Qualifications": style => "font-weight:bold;"},
PanelCell{colspan => 2
Label{"Bachelor Degree in Information Technology": requirement => "Show the Essential Qualifications recorded"}
},
Label{"Desired Qualifications": style => "font-weight:bold;"},
PanelCell{colspan => 2
Label{"Microsoft Certification: Managing Projects with Microsoft Project": requirement => "Show the Essential Qualifications recorded"}
}
}
}
}
}
TableRow{
TableCell{colspan => 2
Label{"Apollo Full":}
}
Label{"Duration: 30 mins":}
GlyphsIcon{"": iconSize => glyphiconLg,
icons=> [
{"glyphicon-chevron-down": style => "padding-top: 4px;"}
]
}
}
TableRow{
TableCell{colspan => 1}
TableCell{colspan => 3
Panel{"": Columns[2,3,1,2,3,1]
PanelRow{
Label{"Career Drives": style => "font-weight:bold;"},
Label{"Archivement":},
Label{"Primary":},
Label{"Coping": style => "font-weight:bold;"},
Label{"Responsibility":},
Label{"Primary":}
}
PanelRow{
PanelCell{colspan => 1},
Label{"Remuneration":},
Label{"Secondary":},
PanelCell{colspan => 1},
Label{"Security":},
Label{"Secondary":}
}
PanelRow{
Label{"People Orientation": style => "font-weight:bold;"},
Label{"Agreeable":},
Label{"Secondary":},
Label{"Workplace Management": style => "font-weight:bold;"},
Label{"Self Organised":},
Label{"Primary":}
}
}
}
}
TableRow{
TableCell{colspan => 2
Label{"Apollo Culture":}
}
Label{"Duration: 15 mins":}
GlyphsIcon{"": iconSize => glyphiconLg,
icons=> [
{"glyphicon-chevron-right": style => "padding-top: 4px;"}
]
}
}
TableRow{
TableCell{colspan => 2
Label{"Phone Interview":}
}
Label{"Duration: 20 mins":}
GlyphsIcon{"": iconSize => glyphiconLg,
icons=> [
{"glyphicon-chevron-right": style => "padding-top: 4px;"}
]
}
}
TableRow{
TableCell{colspan => 2
Label{"In Person Interview":}
}
Label{"Duration: 15 mins":}
GlyphsIcon{"": iconSize => glyphiconLg,
icons=> [
{"glyphicon-chevron-right": style => "padding-top: 4px;"}
]
}
}
}
}
}
Screen{"View Candidate Result":
cssIncludes => ["css/companyStyles.css"]
Button{"Close": nextPage => "Edit Company Role"}
Panel{"": Columns[1,3,1,3,1,3]
PanelRow{
LabelToString{"Candidate": value => "Ms. ElizabethHarriet Praed (Liz)", formattingNotes => "{Salutation} {firstname} {middle name} {Lastname ({Preferred Name})"},
LabelToString{"Current Stage": value => "Phone Interview (74)", style => "color:green;",
formattingNotes => "{Last Completed Stage} ({score of the state})", requirement => "the colour of the text should match the traffic light colour based on the performance of the candidate at the current stage"
},
LabelDate{"Enrolled Date": value => "10/03/2017", readOnly => true}
}
PanelRow{
LabelToString{"Mobile": value => "0404 877 522"},
Label{"Email":},
Link{"elizabeth@bigpond.com.au": requirement => "This is an Email to Link"},
LabelDate{"Last Active": value => "13/03/2017", readOnly => true}
}
}
Tab{"Profile":
Panel{"": Columns[2,4,2,4]
PanelRow{
LabelToString{"Address": value => "39 Loris Way"},
LabelToString{"Suburb": value => "Arthur River, WA 6315"}
}
}
Table{"Progress": showTitle => true
Col{"Skills Self Assessment": filter => false, sorting => false, width => 6}
Col{"Apollo Full": filter => false, sorting => false, width => 6}
Col{"Apollo Culture": filter => false, sorting => false, width => 6}
Col{"Phone Interview": filter => false, sorting => false, width => 6}
Col{"In Person Interview": filter => false, sorting => false, width => 6}
TableRow{
TableCell{colspan => 1, style => "background-color:lightgreen;"
Label{"90":}
}
TableCell{colspan => 1, style => "background-color:lightgreen;"
Label{"80":}
}
TableCell{colspan => 1, style => "background-color:lightgreen;"
Label{"87":}
}
TableCell{colspan => 1, style => "background-color:lightgreen;"
Label{"74":}
}
Label{"Not Invited yet": style => "font-style:italic;",
requirement => "This appears for Phone & In person Interviews only<br/>
It indicates the different status of Phone / Interview<br/>
The statuses are as follows<br/>
- Not Invited yet - This indicates that the invitation has not been sent to the candidate.<br/>
- Invitation Sent - This indicates that the invitation has been sent to the candidate but has not scheduled the session yet<br/>
- Session Scheduled - This indicates that the candidate has scheduled the session, Show the scheduled date time within brackets<br/>
When the session is scored, the score with appear with the traffic light colours<br/>
"
}
}
}
}
TabGroup{"Assessments":
Tab{"Skills Assessment":
Table{"": showTitle => false
Col{"": filter => false, sorting => false, width => 20}
Col{"": filter => false, sorting => false, width => 20}
}
}
}
}
\ No newline at end of file
Screen{"Edit User": showSave => {true:nextPage => "Home"}, showCancel => {true:nextPage => "Home"}
Tab{"User Details": developerNotes => "Standard Edit User Screen (only Manager field is additional)"
Panel{"":Columns[2,5]
PanelRow{
LabelField{"Username": value => "dave"}
}
PanelRow{
LabelPassword{"Password":}
}
PanelRow{
LabelPassword{"Verify Password":}
}
PanelRow{
LabelField{"First Name": value => "David"}
}
PanelRow{
LabelField{"Last Name": value => "Barton"}
}
PanelRow{
LabelField{"Company Name":}
}
PanelRow{
LabelField{"Logo":}
}
}
}
}
\ No newline at end of file
Screen{"Home": isHomeScreen => true, screenType => Home
Screen{"Home": isHomeScreen => true screenType => Home
menu => "Company Home Page": nextPage => "Company Home Page",
menu => "Roles": nextPage => "Search Company Role",
menu => "Admin":[
{"Users": nextPage => "Edit User"}
]
Panel{"":Columns[12],showBackground => true
PanelRow{
Label{"Notes":style => "font-weight:bold;"}
}
PanelRow{
Label{"- Roles in the System":}
}
PanelRow{
Label{"<b>Performa_CompanyAdminRole</b> - The Admin of a Company": style => "margin-left:20px;"}
}
PanelRow{
Label{"<i>Performa_AllowCreatingRoles</i> - Allow to enter Crushing Report": style => "margin-left:40px;"}
}
}
}
Screen{"Company Home Page": cssIncludes => ["css/companyStyles.css"],
requirement => "Show the logo of the Company the User belongs to",
securityNotes => "Home page of the users in Performa_CompanyAdminRole Role"
Panel{"": Columns[1,3,1,3,1,3]
PanelRow{
PanelCell{colspan => 6
Label{"Open Roles": style => "font-size:16px;font-weight:bold;",
dataNotes => "Show Roles which are open",
requirement => "When there are no open Roles, hide the table and show a text saying 'You do not have any open roles at the moment'"
}
}
}
PanelRow{
PanelCell{colspan => 6
Table{"": showTitle => false
Col{"Role": filter => false, sorting => false, width => 15}
Col{"Profile": filter => false, sorting => false, width => 6}
Col{"Date Opened": filter => false, sorting => false, width => 6}
Col{"Candidates": filter => false, sorting => false, width => 4}
Col{"": filter => false, sorting => false, width => 1}
TableRow{
Label{"Senior Project Manager":}
Label{"Executive Management":}
Date{"": value => "07/02/2016", readOnly => true,
requirement => "When was the role opened"
}
Label{"20":
requirement => "The candidates who started questionnaires in this role."
}
Link{">>": nextPage => "Edit Company Role"}
}
TableRow{
Label{"Developer":}
Label{"Developer Profile":}
Date{"": value => "01/02/2016", readOnly => true}
Label{"67":}
Link{">>": nextPage => "Edit Company Role"}
}
}
}
}
PanelRow{
PanelCell{colspan => 6}
}
PanelRow{
PanelCell{colspan => 6
Button{"<br/>Create Role": iconSize => glyphicon3x, buttonStyle => Default, style => "font-size: 15px;padding: 6px 15px;",
nextPage => "Create Company Role Wizard - Basic Details",
icons=> [
{"glyphicon-user":}
]
}
}
// },
// PanelCell{colspan => 3
// Button{"<br/>Profiles": iconSize => glyphicon3x, buttonStyle => Default, style => "font-size: 15px;padding: 6px 15px;",
// icons=> [
// {"glyphicon-list-alt":}
// ]
// }
// }
}
}
}
\ No newline at end of file
Screen{"Search Company Role": cssIncludes => ["css/companyStyles.css"],
screenType => Search
Button{"Create Role": nextPage => "Create Company Role Wizard - Basic Details"}
Table{"": showTitle => false
Col{"Role": width => 15}
Col{"Profile": width => 6}
Col{"Date Opened": width => 6}
Col{"Candidates": width => 4}
Col{"Open / Close": width => 4}
Col{"": filter => false, sorting => false, width => 1}
TableRow{
Label{"Senior Project Manager":}
Label{"Executive Management":}
Date{"": value => "07/02/2016", readOnly => true,
requirement => "When was the role opened"
}
Label{"20":
requirement => "The candidates who started questionnaires in this role."
}
Label{"Open":}
Link{">>": nextPage => "Edit Company Role"}
}
TableRow{
Label{"Developer":}
Label{"Developer Profile":}
Label{"":}
Label{"67":}
Label{"Close":}
Link{">>": nextPage => "Edit Company Role"}
}
TableRow{
Label{"Sales Person": style => "font-style:italic;color: #666;"}
Label{"Sales Personal": style => "font-style:italic;color: #666;"}
TableCell{colspan => 2
Label{"Draft": style => "font-style:italic;color: #666;"}
}
TableCell{colspan => 2
Button{"Edit": buttonStyle => Default, nextPage => "Create Company Role Wizard - Customise Workflow",
icons=> [
{"glyphicon-edit":}
]
}
}
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment