@oat-sa/tao-core-ui 1.58.1 → 1.58.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/actionbar.js +386 -395
- package/dist/adder.js +21 -19
- package/dist/animable/absorbable/absorbable.js +204 -213
- package/dist/animable/absorbable/css/absorb.css +1 -0
- package/dist/animable/absorbable/css/absorb.css.map +1 -1
- package/dist/animable/pulsable/pulsable.js +168 -177
- package/dist/autocomplete/css/autocomplete.css +1 -0
- package/dist/autocomplete/css/autocomplete.css.map +1 -1
- package/dist/autocomplete.js +68 -66
- package/dist/badge/badge.js +188 -197
- package/dist/badge/css/badge.css +1 -0
- package/dist/badge/css/badge.css.map +1 -1
- package/dist/breadcrumbs.js +275 -284
- package/dist/btngrouper.js +5 -5
- package/dist/bulkActionPopup.js +490 -495
- package/dist/button.js +283 -291
- package/dist/cascadingComboBox.js +249 -258
- package/dist/ckeditor/ckConfigurator.js +26 -19
- package/dist/ckeditor/dtdHandler.js +11 -9
- package/dist/class/selector.js +441 -450
- package/dist/component/resizable.js +1 -1
- package/dist/component/windowed.js +285 -294
- package/dist/component.js +419 -428
- package/dist/contextualPopup.js +417 -426
- package/dist/dashboard.js +300 -309
- package/dist/datalist.js +753 -762
- package/dist/datatable/filterStrategy/multiple.js +1 -1
- package/dist/datatable/filterStrategy/single.js +1 -1
- package/dist/datatable.js +1527 -1550
- package/dist/dateRange/dateRange.js +393 -402
- package/dist/datetime/picker.js +665 -672
- package/dist/deleter.js +368 -377
- package/dist/destination/selector.js +286 -295
- package/dist/dialog/alert.js +3 -3
- package/dist/dialog/confirm.js +1 -1
- package/dist/dialog/confirmDelete.js +216 -225
- package/dist/dialog.js +650 -654
- package/dist/disabler.js +8 -8
- package/dist/documentViewer/providers/pdfViewer/fallback/viewer.js +166 -175
- package/dist/documentViewer/providers/pdfViewer/pdfjs/findBar.js +518 -527
- package/dist/documentViewer/providers/pdfViewer/pdfjs/pageView.js +380 -389
- package/dist/documentViewer/providers/pdfViewer/pdfjs/searchEngine.js +539 -548
- package/dist/documentViewer/providers/pdfViewer/pdfjs/viewer.js +369 -378
- package/dist/documentViewer/providers/pdfViewer.js +184 -193
- package/dist/documentViewer.js +292 -301
- package/dist/dropdown.js +383 -392
- package/dist/durationer.js +5 -5
- package/dist/dynamicComponent.js +597 -598
- package/dist/feedback.js +356 -362
- package/dist/figure/FigureStateActive.js +117 -108
- package/dist/filesender.js +2 -2
- package/dist/filter.js +230 -239
- package/dist/form/dropdownForm.js +355 -357
- package/dist/form/form.js +919 -690
- package/dist/form/simpleForm.js +1 -1
- package/dist/form/validator/renderer.js +233 -235
- package/dist/form/validator/validator.js +257 -189
- package/dist/form/widget/definitions.js +1 -1
- package/dist/form/widget/providers/checkBox.js +254 -259
- package/dist/form/widget/providers/comboBox.js +187 -192
- package/dist/form/widget/providers/default.js +8 -9
- package/dist/form/widget/providers/hidden.js +170 -179
- package/dist/form/widget/providers/hiddenBox.js +262 -267
- package/dist/form/widget/providers/radioBox.js +216 -225
- package/dist/form/widget/providers/textArea.js +187 -196
- package/dist/form/widget/providers/textBox.js +2 -3
- package/dist/form/widget/widget.js +473 -475
- package/dist/formValidator/formValidator.js +1 -1
- package/dist/formValidator/highlighters/message.js +1 -1
- package/dist/generis/form/form.js +314 -323
- package/dist/generis/validator/validator.js +209 -218
- package/dist/generis/widget/checkBox/checkBox.js +218 -227
- package/dist/generis/widget/comboBox/comboBox.js +179 -188
- package/dist/generis/widget/hiddenBox/hiddenBox.js +220 -229
- package/dist/generis/widget/textBox/textBox.js +169 -178
- package/dist/generis/widget/widget.js +246 -255
- package/dist/groupedComboBox.js +222 -231
- package/dist/groupvalidator.js +2 -2
- package/dist/highlighter.js +967 -958
- package/dist/image/ImgStateActive/helper.js +7 -5
- package/dist/image/ImgStateActive/initHelper.js +49 -43
- package/dist/image/ImgStateActive/initMediaEditor.js +24 -20
- package/dist/image/ImgStateActive/mediaSizer.js +14 -12
- package/dist/image/ImgStateActive.js +72 -70
- package/dist/incrementer.js +6 -6
- package/dist/inplacer.js +6 -6
- package/dist/itemButtonList/css/item-button-list.css +1 -0
- package/dist/itemButtonList/css/item-button-list.css.map +1 -1
- package/dist/itemButtonList.js +439 -435
- package/dist/keyNavigation/navigableDomElement.js +51 -38
- package/dist/keyNavigation/navigator.js +85 -70
- package/dist/listbox.js +460 -469
- package/dist/liststyler.js +8 -8
- package/dist/loadingButton/loadingButton.js +209 -218
- package/dist/lock.js +476 -485
- package/dist/login/login.js +475 -484
- package/dist/maths/calculator/basicCalculator.js +235 -244
- package/dist/maths/calculator/calculatorComponent.js +3 -3
- package/dist/maths/calculator/core/board.js +772 -781
- package/dist/maths/calculator/core/expression.js +476 -485
- package/dist/maths/calculator/core/labels.js +228 -237
- package/dist/maths/calculator/core/tokenizer.js +1 -1
- package/dist/maths/calculator/core/tokens.js +163 -170
- package/dist/maths/calculator/plugins/keyboard/templateKeyboard/templateKeyboard.js +244 -253
- package/dist/maths/calculator/plugins/screen/simpleScreen/simpleScreen.js +279 -288
- package/dist/maths/calculator/scientificCalculator.js +327 -336
- package/dist/mediaEditor/mediaEditorComponent.js +238 -245
- package/dist/mediaEditor/plugins/mediaAlignment/helper.js +7 -7
- package/dist/mediaEditor/plugins/mediaAlignment/mediaAlignmentComponent.js +229 -235
- package/dist/mediaEditor/plugins/mediaDimension/mediaDimensionComponent.js +580 -589
- package/dist/mediaplayer/players/html5.js +666 -675
- package/dist/mediaplayer/players/youtube.js +419 -424
- package/dist/mediaplayer/support.js +11 -10
- package/dist/mediaplayer/utils/reminder.js +14 -13
- package/dist/mediaplayer/utils/timeObserver.js +10 -11
- package/dist/mediaplayer/youtubeManager.js +164 -145
- package/dist/mediaplayer.js +1565 -1520
- package/dist/mediasizer.js +669 -678
- package/dist/modal.js +10 -17
- package/dist/pageSizeSelector.js +219 -228
- package/dist/pagination/providers/pages.js +280 -289
- package/dist/pagination/providers/simple.js +192 -201
- package/dist/previewer.js +30 -30
- package/dist/progressbar.js +4 -4
- package/dist/report.js +347 -356
- package/dist/resource/filters.js +271 -280
- package/dist/resource/list.js +1264 -1273
- package/dist/resource/selector.js +865 -874
- package/dist/resource/tree.js +1483 -1492
- package/dist/resourcemgr/fileBrowser.js +564 -569
- package/dist/resourcemgr/filePreview.js +16 -16
- package/dist/resourcemgr/fileSelector.js +515 -524
- package/dist/resourcemgr/util/updatePermissions.js +2 -2
- package/dist/resourcemgr.js +306 -315
- package/dist/searchModal/advancedSearch.js +796 -767
- package/dist/searchModal.js +114 -91
- package/dist/switch/switch.js +298 -307
- package/dist/tabs.js +598 -575
- package/dist/taskQueue/status.js +312 -321
- package/dist/taskQueue/table.js +375 -384
- package/dist/taskQueue/taskQueueModel.js +488 -472
- package/dist/taskQueueButton/taskable.js +264 -273
- package/dist/taskQueueButton/treeButton.js +189 -198
- package/dist/themeLoader.js +24 -23
- package/dist/themes.js +1 -1
- package/dist/toggler.js +3 -3
- package/dist/tooltip.js +295 -304
- package/dist/transformer.js +2 -2
- package/dist/tristateCheckboxGroup.js +311 -320
- package/dist/uploader.js +687 -696
- package/dist/validator/Report.js +1 -1
- package/dist/validator/Validator.js +3 -3
- package/dist/validator/validators.js +9 -9
- package/dist/validator.js +240 -230
- package/dist/waitForMedia.js +1 -1
- package/package.json +3 -3
- package/src/animable/absorbable/css/absorb.css +1 -0
- package/src/animable/absorbable/css/absorb.css.map +1 -1
- package/src/autocomplete/css/autocomplete.css +1 -0
- package/src/autocomplete/css/autocomplete.css.map +1 -1
- package/src/badge/css/badge.css +1 -0
- package/src/badge/css/badge.css.map +1 -1
- package/src/ckeditor/ckConfigurator.js +4 -0
- package/src/itemButtonList/css/item-button-list.css +1 -0
- package/src/itemButtonList/css/item-button-list.css.map +1 -1
- package/src/.DS_Store +0 -0
- package/src/css/basic.css +0 -7826
- package/src/css/basic.css.map +0 -1
- package/src/css/ckeditor/skins/tao/css/dialog.css +0 -950
- package/src/css/ckeditor/skins/tao/css/dialog.css.map +0 -1
- package/src/css/ckeditor/skins/tao/css/editor.css +0 -1850
- package/src/css/ckeditor/skins/tao/css/editor.css.map +0 -1
- package/src/scss/.DS_Store +0 -0
- package/src/scss/basic.scss +0 -16
- package/src/scss/ckeditor/skins/tao/scss/dialog.scss +0 -763
- package/src/scss/ckeditor/skins/tao/scss/editor.scss +0 -111
- package/src/scss/ckeditor/skins/tao/scss/inc/_ck-icons.scss +0 -59
- package/src/scss/ckeditor/skins/tao/scss/inc/_colorpanel.scss +0 -118
- package/src/scss/ckeditor/skins/tao/scss/inc/_elementspath.scss +0 -69
- package/src/scss/ckeditor/skins/tao/scss/inc/_mainui.scss +0 -194
- package/src/scss/ckeditor/skins/tao/scss/inc/_menu.scss +0 -181
- package/src/scss/ckeditor/skins/tao/scss/inc/_panel.scss +0 -200
- package/src/scss/ckeditor/skins/tao/scss/inc/_presets.scss +0 -32
- package/src/scss/ckeditor/skins/tao/scss/inc/_reset.scss +0 -101
- package/src/scss/ckeditor/skins/tao/scss/inc/_richcombo.scss +0 -213
- package/src/scss/ckeditor/skins/tao/scss/inc/_tao.scss +0 -59
- package/src/scss/ckeditor/skins/tao/scss/inc/_toolbar.scss +0 -301
- package/src/scss/font/source-sans-pro/source-sans-pro-italic.eot +0 -0
- package/src/scss/font/source-sans-pro/source-sans-pro-italic.eot.b64 +0 -1
- package/src/scss/font/source-sans-pro/source-sans-pro-italic.woff +0 -0
- package/src/scss/font/source-sans-pro/source-sans-pro-italic.woff.b64 +0 -1
- package/src/scss/font/source-sans-pro/source-sans-pro-regular.eot +0 -0
- package/src/scss/font/source-sans-pro/source-sans-pro-regular.eot.b64 +0 -1
- package/src/scss/font/source-sans-pro/source-sans-pro-regular.woff +0 -0
- package/src/scss/font/source-sans-pro/source-sans-pro-regular.woff.b64 +0 -1
- package/src/scss/font/source-sans-pro/source-sans-pro-semibold-italic.eot +0 -0
- package/src/scss/font/source-sans-pro/source-sans-pro-semibold-italic.eot.b64 +0 -1
- package/src/scss/font/source-sans-pro/source-sans-pro-semibold-italic.woff +0 -0
- package/src/scss/font/source-sans-pro/source-sans-pro-semibold-italic.woff.b64 +0 -1
- package/src/scss/font/source-sans-pro/source-sans-pro-semibold.eot +0 -0
- package/src/scss/font/source-sans-pro/source-sans-pro-semibold.eot.b64 +0 -1
- package/src/scss/font/source-sans-pro/source-sans-pro-semibold.woff +0 -0
- package/src/scss/font/source-sans-pro/source-sans-pro-semibold.woff.b64 +0 -1
- package/src/scss/font/tao/tao.eot +0 -0
- package/src/scss/font/tao/tao.svg +0 -235
- package/src/scss/font/tao/tao.ttf +0 -0
- package/src/scss/font/tao/tao.woff +0 -0
- package/src/scss/inc/_base.scss +0 -496
- package/src/scss/inc/_bootstrap.scss +0 -6
- package/src/scss/inc/_buttons.scss +0 -114
- package/src/scss/inc/_colors.scss +0 -88
- package/src/scss/inc/_feedback.scss +0 -150
- package/src/scss/inc/_flex-grid.scss +0 -15
- package/src/scss/inc/_fonts.scss +0 -4
- package/src/scss/inc/_forms.scss +0 -827
- package/src/scss/inc/_functions.scss +0 -283
- package/src/scss/inc/_grid.scss +0 -66
- package/src/scss/inc/_jquery.nouislider.scss +0 -254
- package/src/scss/inc/_normalize.scss +0 -528
- package/src/scss/inc/_report.scss +0 -68
- package/src/scss/inc/_secondary-properties.scss +0 -89
- package/src/scss/inc/_select2.scss +0 -634
- package/src/scss/inc/_toolbars.scss +0 -155
- package/src/scss/inc/_tooltip.scss +0 -312
- package/src/scss/inc/_variables.scss +0 -21
- package/src/scss/inc/base/_highlight.scss +0 -5
- package/src/scss/inc/base/_list-style.scss +0 -59
- package/src/scss/inc/base/_svg.scss +0 -3
- package/src/scss/inc/base/_table.scss +0 -63
- package/src/scss/inc/fonts/_source-sans-pro.scss +0 -29
- package/src/scss/inc/fonts/_tao-icon-classes.scss +0 -226
- package/src/scss/inc/fonts/_tao-icon-def.scss +0 -12
- package/src/scss/inc/fonts/_tao-icon-vars.scss +0 -240
package/dist/itemButtonList.js
CHANGED
|
@@ -1,519 +1,523 @@
|
|
|
1
1
|
define(['jquery', 'ui/autoscroll', 'ui/component', 'handlebars', 'i18n', 'lodash', 'lib/dompurify/purify', 'css!ui/itemButtonList/css/item-button-list.css'], function ($$1, autoscroll, componentFactory, Handlebars, __, _, DOMPurify, itemButtonList_css) { 'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
3
|
+
$$1 = $$1 && Object.prototype.hasOwnProperty.call($$1, 'default') ? $$1['default'] : $$1;
|
|
4
|
+
autoscroll = autoscroll && Object.prototype.hasOwnProperty.call(autoscroll, 'default') ? autoscroll['default'] : autoscroll;
|
|
5
|
+
componentFactory = componentFactory && Object.prototype.hasOwnProperty.call(componentFactory, 'default') ? componentFactory['default'] : componentFactory;
|
|
6
|
+
Handlebars = Handlebars && Object.prototype.hasOwnProperty.call(Handlebars, 'default') ? Handlebars['default'] : Handlebars;
|
|
7
|
+
__ = __ && Object.prototype.hasOwnProperty.call(__, 'default') ? __['default'] : __;
|
|
8
|
+
_ = _ && Object.prototype.hasOwnProperty.call(_, 'default') ? _['default'] : _;
|
|
9
|
+
DOMPurify = DOMPurify && Object.prototype.hasOwnProperty.call(DOMPurify, 'default') ? DOMPurify['default'] : DOMPurify;
|
|
10
|
+
|
|
11
|
+
function _typeof(obj) {
|
|
12
|
+
"@babel/helpers - typeof";
|
|
13
|
+
|
|
14
|
+
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
|
|
15
|
+
return typeof obj;
|
|
16
|
+
} : function (obj) {
|
|
17
|
+
return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
|
|
18
|
+
}, _typeof(obj);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
function Helpers0 (hb) {
|
|
22
|
+
//register a i18n helper
|
|
23
|
+
hb.registerHelper('__', function (key) {
|
|
24
|
+
return __(key);
|
|
25
|
+
});
|
|
11
26
|
/**
|
|
12
|
-
*
|
|
13
|
-
* modify it under the terms of the GNU General Public License
|
|
14
|
-
* as published by the Free Software Foundation; under version 2
|
|
15
|
-
* of the License (non-upgradable).
|
|
16
|
-
*
|
|
17
|
-
* This program is distributed in the hope that it will be useful,
|
|
18
|
-
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
19
|
-
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
20
|
-
* GNU General Public License for more details.
|
|
21
|
-
*
|
|
22
|
-
* You should have received a copy of the GNU General Public License
|
|
23
|
-
* along with this program; if not, write to the Free Software
|
|
24
|
-
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
|
25
|
-
*
|
|
26
|
-
* Copyright (c) 2013-2019 (original work) Open Assessment Technologies SA (under the project TAO-PRODUCT);
|
|
27
|
-
*
|
|
27
|
+
* Register dompurify helper
|
|
28
28
|
*
|
|
29
|
+
* https://github.com/cure53/DOMPurify
|
|
30
|
+
* with config SAFE_FOR_TEMPLATES: true
|
|
31
|
+
* to make output safe for template systems
|
|
29
32
|
*/
|
|
30
|
-
function Helpers0 (hb) {
|
|
31
|
-
//register a i18n helper
|
|
32
|
-
hb.registerHelper('__', function (key) {
|
|
33
|
-
return __(key);
|
|
34
|
-
});
|
|
35
|
-
/**
|
|
36
|
-
* Register dompurify helper
|
|
37
|
-
*
|
|
38
|
-
* https://github.com/cure53/DOMPurify
|
|
39
|
-
* with config SAFE_FOR_TEMPLATES: true
|
|
40
|
-
* to make output safe for template systems
|
|
41
|
-
*/
|
|
42
|
-
|
|
43
|
-
hb.registerHelper('dompurify', function (context) {
|
|
44
|
-
return DOMPurify.sanitize(context);
|
|
45
|
-
});
|
|
46
|
-
/**
|
|
47
|
-
* Register join helper
|
|
48
|
-
*
|
|
49
|
-
* Example :
|
|
50
|
-
* var values = {a:v1, b:v2, c:v3};
|
|
51
|
-
* Using {{{join attributes '=' ' ' '"'}}} will return : a="v1" b="v2" c="v3"
|
|
52
|
-
* Using {{{join values null ' or ' '*'}}} will return : *v1* or *v2* or *v3*
|
|
53
|
-
*/
|
|
54
33
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
34
|
+
hb.registerHelper('dompurify', function (context) {
|
|
35
|
+
return DOMPurify.sanitize(context);
|
|
36
|
+
});
|
|
37
|
+
/**
|
|
38
|
+
* Register join helper
|
|
39
|
+
*
|
|
40
|
+
* Example :
|
|
41
|
+
* var values = {a:v1, b:v2, c:v3};
|
|
42
|
+
* Using {{{join attributes '=' ' ' '"'}}} will return : a="v1" b="v2" c="v3"
|
|
43
|
+
* Using {{{join values null ' or ' '*'}}} will return : *v1* or *v2* or *v3*
|
|
44
|
+
*/
|
|
60
45
|
|
|
61
|
-
|
|
62
|
-
|
|
46
|
+
hb.registerHelper('join', function (arr, keyValueGlue, fragmentGlue, wrapper) {
|
|
47
|
+
var fragments = [];
|
|
48
|
+
keyValueGlue = typeof keyValueGlue === 'string' ? keyValueGlue : undefined;
|
|
49
|
+
fragmentGlue = typeof fragmentGlue === 'string' ? fragmentGlue : ' ';
|
|
50
|
+
wrapper = typeof wrapper === 'string' ? wrapper : '"';
|
|
63
51
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
value = value ? 'true' : 'false';
|
|
67
|
-
} else if (typeof value === 'object') {
|
|
68
|
-
value = _.values(value).join(' ');
|
|
69
|
-
}
|
|
70
|
-
} else {
|
|
71
|
-
value = '';
|
|
72
|
-
}
|
|
52
|
+
_.forIn(arr, function (value, key) {
|
|
53
|
+
var fragment = '';
|
|
73
54
|
|
|
74
|
-
|
|
75
|
-
|
|
55
|
+
if (value !== null || value !== undefined) {
|
|
56
|
+
if (typeof value === 'boolean') {
|
|
57
|
+
value = value ? 'true' : 'false';
|
|
58
|
+
} else if (_typeof(value) === 'object') {
|
|
59
|
+
value = _.values(value).join(' ');
|
|
76
60
|
}
|
|
61
|
+
} else {
|
|
62
|
+
value = '';
|
|
63
|
+
}
|
|
77
64
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
});
|
|
81
|
-
|
|
82
|
-
return fragments.join(fragmentGlue);
|
|
83
|
-
}); //register a classic "for loop" helper
|
|
84
|
-
//it also adds a local variable "i" as the index in each iteration loop
|
|
85
|
-
|
|
86
|
-
hb.registerHelper('for', function (startIndex, stopIndex, increment, options) {
|
|
87
|
-
var ret = '';
|
|
88
|
-
startIndex = parseInt(startIndex);
|
|
89
|
-
stopIndex = parseInt(stopIndex);
|
|
90
|
-
increment = parseInt(increment);
|
|
91
|
-
|
|
92
|
-
for (var i = startIndex; i < stopIndex; i += increment) {
|
|
93
|
-
ret += options.fn(_.extend({}, this, {
|
|
94
|
-
i: i
|
|
95
|
-
}));
|
|
65
|
+
if (keyValueGlue !== undefined) {
|
|
66
|
+
fragment += key + keyValueGlue;
|
|
96
67
|
}
|
|
97
68
|
|
|
98
|
-
|
|
69
|
+
fragment += wrapper + value + wrapper;
|
|
70
|
+
fragments.push(fragment);
|
|
99
71
|
});
|
|
100
|
-
hb.registerHelper('equal', function (var1, var2, options) {
|
|
101
|
-
if (var1 == var2) {
|
|
102
|
-
return options.fn(this);
|
|
103
|
-
} else {
|
|
104
|
-
return options.inverse(this);
|
|
105
|
-
}
|
|
106
|
-
}); // register a "get property" helper
|
|
107
|
-
// it gets the named property from the provided context
|
|
108
72
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
// it checks if value is in array
|
|
73
|
+
return fragments.join(fragmentGlue);
|
|
74
|
+
}); //register a classic "for loop" helper
|
|
75
|
+
//it also adds a local variable "i" as the index in each iteration loop
|
|
113
76
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
}
|
|
77
|
+
hb.registerHelper('for', function (startIndex, stopIndex, increment, options) {
|
|
78
|
+
var ret = '';
|
|
79
|
+
startIndex = parseInt(startIndex);
|
|
80
|
+
stopIndex = parseInt(stopIndex);
|
|
81
|
+
increment = parseInt(increment);
|
|
120
82
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
var Template = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
|
|
126
|
-
this.compilerInfo = [4,'>= 1.0.0'];
|
|
127
|
-
helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
|
|
128
|
-
var buffer = "", stack1, functionType="function", escapeExpression=this.escapeExpression, self=this;
|
|
129
|
-
|
|
130
|
-
function program1(depth0,data) {
|
|
131
|
-
|
|
132
|
-
var buffer = "", stack1, helper;
|
|
133
|
-
buffer += "\n <li class=\"buttonlist-item ";
|
|
134
|
-
if (helper = helpers.status) { stack1 = helper.call(depth0, {hash:{},data:data}); }
|
|
135
|
-
else { helper = (depth0 && depth0.status); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
|
|
136
|
-
buffer += escapeExpression(stack1);
|
|
137
|
-
stack1 = helpers['if'].call(depth0, (depth0 && depth0.scoreType), {hash:{},inverse:self.noop,fn:self.program(2, program2, data),data:data});
|
|
138
|
-
if(stack1 || stack1 === 0) { buffer += stack1; }
|
|
139
|
-
stack1 = helpers['if'].call(depth0, (depth0 && depth0.disabled), {hash:{},inverse:self.noop,fn:self.program(4, program4, data),data:data});
|
|
140
|
-
if(stack1 || stack1 === 0) { buffer += stack1; }
|
|
141
|
-
buffer += "\" data-id=\"";
|
|
142
|
-
if (helper = helpers.id) { stack1 = helper.call(depth0, {hash:{},data:data}); }
|
|
143
|
-
else { helper = (depth0 && depth0.id); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
|
|
144
|
-
buffer += escapeExpression(stack1)
|
|
145
|
-
+ "\">\n <button class=\"buttonlist-btn\"\n role=\"link\"\n ";
|
|
146
|
-
stack1 = helpers['if'].call(depth0, (depth0 && depth0.title), {hash:{},inverse:self.noop,fn:self.program(6, program6, data),data:data});
|
|
147
|
-
if(stack1 || stack1 === 0) { buffer += stack1; }
|
|
148
|
-
buffer += "\n aria-label=\"";
|
|
149
|
-
if (helper = helpers.ariaLabel) { stack1 = helper.call(depth0, {hash:{},data:data}); }
|
|
150
|
-
else { helper = (depth0 && depth0.ariaLabel); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
|
|
151
|
-
buffer += escapeExpression(stack1)
|
|
152
|
-
+ "\"\n ";
|
|
153
|
-
stack1 = helpers['if'].call(depth0, (depth0 && depth0.disabled), {hash:{},inverse:self.noop,fn:self.program(8, program8, data),data:data});
|
|
154
|
-
if(stack1 || stack1 === 0) { buffer += stack1; }
|
|
155
|
-
buffer += "\n data-id=\"";
|
|
156
|
-
if (helper = helpers.id) { stack1 = helper.call(depth0, {hash:{},data:data}); }
|
|
157
|
-
else { helper = (depth0 && depth0.id); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
|
|
158
|
-
buffer += escapeExpression(stack1)
|
|
159
|
-
+ "\">\n <span class=\"icon-indicator indicator\" aria-hidden=\"true\"></span>\n ";
|
|
160
|
-
stack1 = helpers['if'].call(depth0, (depth0 && depth0.scoreType), {hash:{},inverse:self.noop,fn:self.program(10, program10, data),data:data});
|
|
161
|
-
if(stack1 || stack1 === 0) { buffer += stack1; }
|
|
162
|
-
buffer += "\n <span class=\"buttonlist-icon";
|
|
163
|
-
stack1 = helpers['if'].call(depth0, (depth0 && depth0.icon), {hash:{},inverse:self.noop,fn:self.program(12, program12, data),data:data});
|
|
164
|
-
if(stack1 || stack1 === 0) { buffer += stack1; }
|
|
165
|
-
buffer += "\" aria-hidden=\"true\"></span>\n <span class=\"buttonlist-label\" aria-hidden=\"true\">";
|
|
166
|
-
stack1 = helpers['if'].call(depth0, (depth0 && depth0.numericLabel), {hash:{},inverse:self.noop,fn:self.program(14, program14, data),data:data});
|
|
167
|
-
if(stack1 || stack1 === 0) { buffer += stack1; }
|
|
168
|
-
buffer += "</span>\n </button>\n </li>\n ";
|
|
169
|
-
return buffer;
|
|
170
|
-
}
|
|
171
|
-
function program2(depth0,data) {
|
|
172
|
-
|
|
173
|
-
var buffer = "", stack1, helper;
|
|
174
|
-
buffer += " ";
|
|
175
|
-
if (helper = helpers.scoreType) { stack1 = helper.call(depth0, {hash:{},data:data}); }
|
|
176
|
-
else { helper = (depth0 && depth0.scoreType); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
|
|
177
|
-
buffer += escapeExpression(stack1);
|
|
178
|
-
return buffer;
|
|
83
|
+
for (var i = startIndex; i < stopIndex; i += increment) {
|
|
84
|
+
ret += options.fn(_.extend({}, this, {
|
|
85
|
+
i: i
|
|
86
|
+
}));
|
|
179
87
|
}
|
|
180
88
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
89
|
+
return ret;
|
|
90
|
+
});
|
|
91
|
+
hb.registerHelper('equal', function (var1, var2, options) {
|
|
92
|
+
if (var1 == var2) {
|
|
93
|
+
return options.fn(this);
|
|
94
|
+
} else {
|
|
95
|
+
return options.inverse(this);
|
|
185
96
|
}
|
|
97
|
+
}); // register a "get property" helper
|
|
98
|
+
// it gets the named property from the provided context
|
|
186
99
|
|
|
187
|
-
function
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
if (helper = helpers.title) { stack1 = helper.call(depth0, {hash:{},data:data}); }
|
|
192
|
-
else { helper = (depth0 && depth0.title); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
|
|
193
|
-
buffer += escapeExpression(stack1)
|
|
194
|
-
+ "\"";
|
|
195
|
-
return buffer;
|
|
196
|
-
}
|
|
100
|
+
hb.registerHelper('property', function (name, context) {
|
|
101
|
+
return context[name] || '';
|
|
102
|
+
}); // register an 'includes' helper
|
|
103
|
+
// it checks if value is in array
|
|
197
104
|
|
|
198
|
-
function
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
return "aria-disabled=\"true\"";
|
|
105
|
+
hb.registerHelper('includes', function (haystack, needle, options) {
|
|
106
|
+
if (_.contains(haystack, needle)) {
|
|
107
|
+
return options.fn(this);
|
|
202
108
|
}
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
if (!Helpers0.__initialized) {
|
|
113
|
+
Helpers0(Handlebars);
|
|
114
|
+
Helpers0.__initialized = true;
|
|
115
|
+
}
|
|
116
|
+
var Template = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
|
|
117
|
+
this.compilerInfo = [4,'>= 1.0.0'];
|
|
118
|
+
helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
|
|
119
|
+
var buffer = "", stack1, functionType="function", escapeExpression=this.escapeExpression, self=this;
|
|
120
|
+
|
|
121
|
+
function program1(depth0,data) {
|
|
122
|
+
|
|
123
|
+
var buffer = "", stack1, helper;
|
|
124
|
+
buffer += "\n <li class=\"buttonlist-item ";
|
|
125
|
+
if (helper = helpers.status) { stack1 = helper.call(depth0, {hash:{},data:data}); }
|
|
126
|
+
else { helper = (depth0 && depth0.status); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
|
|
127
|
+
buffer += escapeExpression(stack1);
|
|
128
|
+
stack1 = helpers['if'].call(depth0, (depth0 && depth0.scoreType), {hash:{},inverse:self.noop,fn:self.program(2, program2, data),data:data});
|
|
129
|
+
if(stack1 || stack1 === 0) { buffer += stack1; }
|
|
130
|
+
stack1 = helpers['if'].call(depth0, (depth0 && depth0.disabled), {hash:{},inverse:self.noop,fn:self.program(4, program4, data),data:data});
|
|
131
|
+
if(stack1 || stack1 === 0) { buffer += stack1; }
|
|
132
|
+
buffer += "\" data-id=\"";
|
|
133
|
+
if (helper = helpers.id) { stack1 = helper.call(depth0, {hash:{},data:data}); }
|
|
134
|
+
else { helper = (depth0 && depth0.id); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
|
|
135
|
+
buffer += escapeExpression(stack1)
|
|
136
|
+
+ "\">\n <button class=\"buttonlist-btn\"\n role=\"link\"\n ";
|
|
137
|
+
stack1 = helpers['if'].call(depth0, (depth0 && depth0.title), {hash:{},inverse:self.noop,fn:self.program(6, program6, data),data:data});
|
|
138
|
+
if(stack1 || stack1 === 0) { buffer += stack1; }
|
|
139
|
+
buffer += "\n aria-label=\"";
|
|
140
|
+
if (helper = helpers.ariaLabel) { stack1 = helper.call(depth0, {hash:{},data:data}); }
|
|
141
|
+
else { helper = (depth0 && depth0.ariaLabel); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
|
|
142
|
+
buffer += escapeExpression(stack1)
|
|
143
|
+
+ "\"\n ";
|
|
144
|
+
stack1 = helpers['if'].call(depth0, (depth0 && depth0.disabled), {hash:{},inverse:self.noop,fn:self.program(8, program8, data),data:data});
|
|
145
|
+
if(stack1 || stack1 === 0) { buffer += stack1; }
|
|
146
|
+
buffer += "\n data-id=\"";
|
|
147
|
+
if (helper = helpers.id) { stack1 = helper.call(depth0, {hash:{},data:data}); }
|
|
148
|
+
else { helper = (depth0 && depth0.id); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
|
|
149
|
+
buffer += escapeExpression(stack1)
|
|
150
|
+
+ "\">\n <span class=\"icon-indicator indicator\" aria-hidden=\"true\"></span>\n ";
|
|
151
|
+
stack1 = helpers['if'].call(depth0, (depth0 && depth0.scoreType), {hash:{},inverse:self.noop,fn:self.program(10, program10, data),data:data});
|
|
152
|
+
if(stack1 || stack1 === 0) { buffer += stack1; }
|
|
153
|
+
buffer += "\n <span class=\"buttonlist-icon";
|
|
154
|
+
stack1 = helpers['if'].call(depth0, (depth0 && depth0.icon), {hash:{},inverse:self.noop,fn:self.program(12, program12, data),data:data});
|
|
155
|
+
if(stack1 || stack1 === 0) { buffer += stack1; }
|
|
156
|
+
buffer += "\" aria-hidden=\"true\"></span>\n <span class=\"buttonlist-label\" aria-hidden=\"true\">";
|
|
157
|
+
stack1 = helpers['if'].call(depth0, (depth0 && depth0.numericLabel), {hash:{},inverse:self.noop,fn:self.program(14, program14, data),data:data});
|
|
158
|
+
if(stack1 || stack1 === 0) { buffer += stack1; }
|
|
159
|
+
buffer += "</span>\n </button>\n </li>\n ";
|
|
160
|
+
return buffer;
|
|
161
|
+
}
|
|
162
|
+
function program2(depth0,data) {
|
|
163
|
+
|
|
164
|
+
var buffer = "", stack1, helper;
|
|
165
|
+
buffer += " ";
|
|
166
|
+
if (helper = helpers.scoreType) { stack1 = helper.call(depth0, {hash:{},data:data}); }
|
|
167
|
+
else { helper = (depth0 && depth0.scoreType); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
|
|
168
|
+
buffer += escapeExpression(stack1);
|
|
169
|
+
return buffer;
|
|
170
|
+
}
|
|
203
171
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
else { helper = (depth0 && depth0.scoreType); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
|
|
210
|
-
buffer += escapeExpression(stack1)
|
|
211
|
-
+ "\" aria-hidden=\"true\"></span>\n </span>\n ";
|
|
212
|
-
return buffer;
|
|
213
|
-
}
|
|
172
|
+
function program4(depth0,data) {
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
return " disabled";
|
|
176
|
+
}
|
|
214
177
|
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
178
|
+
function program6(depth0,data) {
|
|
179
|
+
|
|
180
|
+
var buffer = "", stack1, helper;
|
|
181
|
+
buffer += "title=\"";
|
|
182
|
+
if (helper = helpers.title) { stack1 = helper.call(depth0, {hash:{},data:data}); }
|
|
183
|
+
else { helper = (depth0 && depth0.title); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
|
|
184
|
+
buffer += escapeExpression(stack1)
|
|
185
|
+
+ "\"";
|
|
186
|
+
return buffer;
|
|
187
|
+
}
|
|
224
188
|
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
return escapeExpression(stack1);
|
|
231
|
-
}
|
|
189
|
+
function program8(depth0,data) {
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
return "aria-disabled=\"true\"";
|
|
193
|
+
}
|
|
232
194
|
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
195
|
+
function program10(depth0,data) {
|
|
196
|
+
|
|
197
|
+
var buffer = "", stack1, helper;
|
|
198
|
+
buffer += "\n <span class=\"buttonlist-score-badge\">\n <span class=\"buttonlist-score-icon icon-";
|
|
199
|
+
if (helper = helpers.scoreType) { stack1 = helper.call(depth0, {hash:{},data:data}); }
|
|
200
|
+
else { helper = (depth0 && depth0.scoreType); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
|
|
201
|
+
buffer += escapeExpression(stack1)
|
|
202
|
+
+ "\" aria-hidden=\"true\"></span>\n </span>\n ";
|
|
203
|
+
return buffer;
|
|
242
204
|
}
|
|
243
205
|
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
206
|
+
function program12(depth0,data) {
|
|
207
|
+
|
|
208
|
+
var buffer = "", stack1, helper;
|
|
209
|
+
buffer += " icon-";
|
|
210
|
+
if (helper = helpers.icon) { stack1 = helper.call(depth0, {hash:{},data:data}); }
|
|
211
|
+
else { helper = (depth0 && depth0.icon); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
|
|
212
|
+
buffer += escapeExpression(stack1);
|
|
213
|
+
return buffer;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
function program14(depth0,data) {
|
|
217
|
+
|
|
218
|
+
var stack1, helper;
|
|
219
|
+
if (helper = helpers.numericLabel) { stack1 = helper.call(depth0, {hash:{},data:data}); }
|
|
220
|
+
else { helper = (depth0 && depth0.numericLabel); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
|
|
221
|
+
return escapeExpression(stack1);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
buffer += "<ol class=\"buttonlist-items\">\n ";
|
|
225
|
+
stack1 = helpers.each.call(depth0, (depth0 && depth0.items), {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
|
|
226
|
+
if(stack1 || stack1 === 0) { buffer += stack1; }
|
|
227
|
+
buffer += "\n</ol>\n";
|
|
228
|
+
return buffer;
|
|
229
|
+
});
|
|
230
|
+
function itemButtonListTpl(data, options, asString) {
|
|
231
|
+
var html = Template(data, options);
|
|
232
|
+
return (asString || true) ? html : $(html);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
/**
|
|
236
|
+
* This program is free software; you can redistribute it and/or
|
|
237
|
+
* modify it under the terms of the GNU General Public License
|
|
238
|
+
* as published by the Free Software Foundation; under version 2
|
|
239
|
+
* of the License (non-upgradable).
|
|
240
|
+
*
|
|
241
|
+
* This program is distributed in the hope that it will be useful,
|
|
242
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
243
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
244
|
+
* GNU General Public License for more details.
|
|
245
|
+
*
|
|
246
|
+
* You should have received a copy of the GNU General Public License
|
|
247
|
+
* along with this program; if not, write to the Free Software
|
|
248
|
+
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
|
|
249
|
+
*
|
|
250
|
+
* Copyright (c) 2022 Open Assessment Technologies SA ;
|
|
251
|
+
*/
|
|
252
|
+
/**
|
|
253
|
+
* CSS classes involved in the component
|
|
254
|
+
* @type {Object}
|
|
255
|
+
*/
|
|
256
|
+
|
|
257
|
+
var cssClasses = {
|
|
258
|
+
active: 'buttonlist-item-active',
|
|
259
|
+
keyfocused: 'buttonlist-btn-focus'
|
|
260
|
+
};
|
|
261
|
+
/**
|
|
262
|
+
* CSS selectors that match some particular elements
|
|
263
|
+
* @type {Object}
|
|
264
|
+
*/
|
|
265
|
+
|
|
266
|
+
var cssSelectors = {
|
|
267
|
+
active: ".".concat(cssClasses.active),
|
|
268
|
+
keyfocused: ".".concat(cssClasses.keyfocused),
|
|
269
|
+
navigable: '.buttonlist-btn',
|
|
270
|
+
itemById: function itemById(id) {
|
|
271
|
+
return ".buttonlist-item[data-id=\"".concat(id, "\"]");
|
|
272
|
+
},
|
|
273
|
+
navigableById: function navigableById(id) {
|
|
274
|
+
return ".buttonlist-btn[data-id=\"".concat(id, "\"]");
|
|
275
|
+
}
|
|
276
|
+
};
|
|
277
|
+
/**
|
|
278
|
+
* @typedef {Object} ItemButton
|
|
279
|
+
* @property {String} id - item id
|
|
280
|
+
* @property {Number} position - 0-based list index
|
|
281
|
+
* @property {String} numericLabel - displayed number
|
|
282
|
+
* @property {String} ariaLabel
|
|
283
|
+
* @property {String} status - 'answered'/'viewed'/'unseen'
|
|
284
|
+
* @property {String} scoreType - 'correct'/'incorrect'/null
|
|
285
|
+
* @property {String} icon - 'info'/'flagged'/null
|
|
286
|
+
* @property {Boolean} disabled
|
|
287
|
+
* @property {String} [title] - optional tooltip
|
|
288
|
+
*/
|
|
289
|
+
|
|
290
|
+
/**
|
|
291
|
+
* Item Button List
|
|
292
|
+
* Ordered list of buttons representing items from a testMap section
|
|
293
|
+
* Mostly presentational component
|
|
294
|
+
*
|
|
295
|
+
* @param {Object} config
|
|
296
|
+
* @param {ItemButton[]} [config.items] - The list of entries to display
|
|
297
|
+
* @param {String|jQuery|HTMLElement} [scrollContainer] - scroll container element, for autoscroll
|
|
298
|
+
* @returns {component}
|
|
299
|
+
* @fires ready - When the component is ready to work
|
|
300
|
+
* @fires click When an item is selected by the user
|
|
301
|
+
*/
|
|
302
|
+
|
|
303
|
+
function itemButtonListFactory() {
|
|
304
|
+
var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
305
|
+
var component;
|
|
306
|
+
var activeItemId = null; //jQuery or HTMLElement!
|
|
265
307
|
|
|
266
|
-
const cssClasses = {
|
|
267
|
-
active: 'buttonlist-item-active',
|
|
268
|
-
keyfocused: 'buttonlist-btn-focus'
|
|
269
|
-
};
|
|
270
308
|
/**
|
|
271
|
-
*
|
|
272
|
-
* @
|
|
309
|
+
* Get scroll container element
|
|
310
|
+
* @returns {HTMLElement}
|
|
273
311
|
*/
|
|
274
312
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
keyfocused: `.${cssClasses.keyfocused}`,
|
|
278
|
-
navigable: '.buttonlist-btn',
|
|
279
|
-
itemById: id => `.buttonlist-item[data-id="${id}"]`,
|
|
280
|
-
navigableById: id => `.buttonlist-btn[data-id="${id}"]`
|
|
313
|
+
var getScrollContainer = function getScrollContainer() {
|
|
314
|
+
return config.scrollContainer || component.getElement();
|
|
281
315
|
};
|
|
282
316
|
/**
|
|
283
|
-
*
|
|
284
|
-
* @
|
|
285
|
-
* @property {Number} position - 0-based list index
|
|
286
|
-
* @property {String} numericLabel - displayed number
|
|
287
|
-
* @property {String} ariaLabel
|
|
288
|
-
* @property {String} status - 'answered'/'viewed'/'unseen'
|
|
289
|
-
* @property {String} scoreType - 'correct'/'incorrect'/null
|
|
290
|
-
* @property {String} icon - 'info'/'flagged'/null
|
|
291
|
-
* @property {Boolean} disabled
|
|
292
|
-
* @property {String} [title] - optional tooltip
|
|
317
|
+
* Selects the active item
|
|
318
|
+
* @param {String|null} itemId
|
|
293
319
|
*/
|
|
294
320
|
|
|
295
|
-
/**
|
|
296
|
-
* Item Button List
|
|
297
|
-
* Ordered list of buttons representing items from a testMap section
|
|
298
|
-
* Mostly presentational component
|
|
299
|
-
*
|
|
300
|
-
* @param {Object} config
|
|
301
|
-
* @param {ItemButton[]} [config.items] - The list of entries to display
|
|
302
|
-
* @param {String|jQuery|HTMLElement} [scrollContainer] - scroll container element, for autoscroll
|
|
303
|
-
* @returns {component}
|
|
304
|
-
* @fires ready - When the component is ready to work
|
|
305
|
-
* @fires click When an item is selected by the user
|
|
306
|
-
*/
|
|
307
321
|
|
|
308
|
-
function
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
322
|
+
var selectItem = function selectItem(itemId) {
|
|
323
|
+
// first deactivate already active elements
|
|
324
|
+
component.getElement().find(cssSelectors.active).removeClass(cssClasses.active);
|
|
325
|
+
component.getElement().find("".concat(cssSelectors.navigable, "[aria-current]")).removeAttr('aria-current'); // activate element
|
|
312
326
|
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
* @returns {HTMLElement}
|
|
316
|
-
*/
|
|
327
|
+
if (itemId) {
|
|
328
|
+
var $target = component.getElement().find(cssSelectors.itemById(itemId));
|
|
317
329
|
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
};
|
|
321
|
-
/**
|
|
322
|
-
* Selects the active item
|
|
323
|
-
* @param {String|null} itemId
|
|
324
|
-
*/
|
|
330
|
+
if ($target.length) {
|
|
331
|
+
$target.addClass(cssClasses.active); // finally make sure the item is visible
|
|
325
332
|
|
|
333
|
+
autoscroll($target, getScrollContainer());
|
|
334
|
+
var $ariaTarget = component.getElement().find(cssSelectors.navigableById(itemId));
|
|
335
|
+
$ariaTarget.attr('aria-current', 'location');
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
};
|
|
339
|
+
/**
|
|
340
|
+
* Update single item properties:
|
|
341
|
+
* Only `icon`, `numericLabel`, `ariaLabel` are supported
|
|
342
|
+
* @param {String} itemId
|
|
343
|
+
* @param {Object} itemData
|
|
344
|
+
*/
|
|
326
345
|
|
|
327
|
-
const selectItem = itemId => {
|
|
328
|
-
// first deactivate already active elements
|
|
329
|
-
component.getElement().find(cssSelectors.active).removeClass(cssClasses.active);
|
|
330
|
-
component.getElement().find(`${cssSelectors.navigable}[aria-current]`).removeAttr('aria-current'); // activate element
|
|
331
346
|
|
|
332
|
-
|
|
333
|
-
|
|
347
|
+
var updateItemData = function updateItemData(itemId, itemData) {
|
|
348
|
+
var $target = component.getElement().find(cssSelectors.itemById(itemId));
|
|
334
349
|
|
|
335
|
-
|
|
336
|
-
|
|
350
|
+
if ($target.length) {
|
|
351
|
+
if (typeof itemData.icon !== 'undefined') {
|
|
352
|
+
var iconElem = $target.find('.buttonlist-icon').get(0);
|
|
337
353
|
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
354
|
+
for (var i = 0; i < iconElem.classList.length; i++) {
|
|
355
|
+
if (iconElem.classList[i].startsWith('icon-')) {
|
|
356
|
+
iconElem.classList.remove(iconElem.classList[i]);
|
|
357
|
+
}
|
|
341
358
|
}
|
|
342
|
-
}
|
|
343
|
-
};
|
|
344
|
-
/**
|
|
345
|
-
* Update single item properties:
|
|
346
|
-
* Only `icon`, `numericLabel`, `ariaLabel` are supported
|
|
347
|
-
* @param {String} itemId
|
|
348
|
-
* @param {Object} itemData
|
|
349
|
-
*/
|
|
350
359
|
|
|
360
|
+
if (itemData.icon) {
|
|
361
|
+
iconElem.classList.add("icon-".concat(itemData.icon));
|
|
362
|
+
}
|
|
363
|
+
}
|
|
351
364
|
|
|
352
|
-
|
|
353
|
-
|
|
365
|
+
if (typeof itemData.numericLabel !== 'undefined') {
|
|
366
|
+
$target.find('.buttonlist-label').text(itemData.numericLabel !== null ? itemData.numericLabel : '');
|
|
367
|
+
}
|
|
354
368
|
|
|
355
|
-
if (
|
|
356
|
-
|
|
357
|
-
|
|
369
|
+
if (typeof itemData.ariaLabel !== 'undefined') {
|
|
370
|
+
$target.find('.buttonlist-btn').attr('aria-label', itemData.ariaLabel);
|
|
371
|
+
}
|
|
372
|
+
}
|
|
373
|
+
};
|
|
374
|
+
/**
|
|
375
|
+
* 'tabfocus' styling, for Safari until :focus-visible supported
|
|
376
|
+
* @param {jQuery|null} $target
|
|
377
|
+
*/
|
|
358
378
|
|
|
359
|
-
for (let i = 0; i < iconElem.classList.length; i++) {
|
|
360
|
-
if (iconElem.classList[i].startsWith('icon-')) {
|
|
361
|
-
iconElem.classList.remove(iconElem.classList[i]);
|
|
362
|
-
}
|
|
363
|
-
}
|
|
364
379
|
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
}
|
|
368
|
-
}
|
|
380
|
+
var setFocusStyle = function setFocusStyle($target) {
|
|
381
|
+
component.getElement().find(cssSelectors.keyfocused).removeClass(cssClasses.keyfocused);
|
|
369
382
|
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
383
|
+
if ($target && $target.length) {
|
|
384
|
+
$target.addClass(cssClasses.keyfocused);
|
|
385
|
+
}
|
|
386
|
+
};
|
|
387
|
+
/**
|
|
388
|
+
* Apply a callback on each navigable element
|
|
389
|
+
* @param {*} callback
|
|
390
|
+
*/
|
|
373
391
|
|
|
374
|
-
if (typeof itemData.ariaLabel !== 'undefined') {
|
|
375
|
-
$target.find('.buttonlist-btn').attr('aria-label', itemData.ariaLabel);
|
|
376
|
-
}
|
|
377
|
-
}
|
|
378
|
-
};
|
|
379
|
-
/**
|
|
380
|
-
* 'tabfocus' styling, for Safari until :focus-visible supported
|
|
381
|
-
* @param {jQuery|null} $target
|
|
382
|
-
*/
|
|
383
392
|
|
|
393
|
+
var eachNavigable = function eachNavigable(callback) {
|
|
394
|
+
component.getElement().find(cssSelectors.navigable).each(callback);
|
|
395
|
+
};
|
|
396
|
+
/**
|
|
397
|
+
* Enables the keyboard navigation using 'tab' keys
|
|
398
|
+
*/
|
|
384
399
|
|
|
385
|
-
const setFocusStyle = $target => {
|
|
386
|
-
component.getElement().find(cssSelectors.keyfocused).removeClass(cssClasses.keyfocused);
|
|
387
400
|
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
};
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
401
|
+
var enableKeyboard = function enableKeyboard() {
|
|
402
|
+
eachNavigable(function (index, el) {
|
|
403
|
+
return el.removeAttribute('tabindex');
|
|
404
|
+
});
|
|
405
|
+
};
|
|
406
|
+
/**
|
|
407
|
+
* Disables the keyboard navigation using 'tab' keys
|
|
408
|
+
*/
|
|
396
409
|
|
|
397
410
|
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
411
|
+
var disableKeyboard = function disableKeyboard() {
|
|
412
|
+
eachNavigable(function (index, el) {
|
|
413
|
+
return el.setAttribute('tabindex', -1);
|
|
414
|
+
});
|
|
415
|
+
setFocusStyle(null);
|
|
416
|
+
};
|
|
417
|
+
/**
|
|
418
|
+
* Emits the click event detailing the clicked item
|
|
419
|
+
* The active item change should be handled by the consumer through the API, in case it is conditional or asynchronous
|
|
420
|
+
* @param {String} itemId
|
|
421
|
+
*/
|
|
404
422
|
|
|
405
423
|
|
|
406
|
-
|
|
407
|
-
eachNavigable((index, el) => el.removeAttribute('tabindex'));
|
|
408
|
-
};
|
|
424
|
+
var onClick = function onClick(itemId) {
|
|
409
425
|
/**
|
|
410
|
-
*
|
|
426
|
+
* @event click
|
|
427
|
+
* @param {String} itemId
|
|
411
428
|
*/
|
|
429
|
+
component.trigger('click', {
|
|
430
|
+
id: itemId
|
|
431
|
+
});
|
|
432
|
+
};
|
|
433
|
+
/**
|
|
434
|
+
* Defines the buttonList API
|
|
435
|
+
* @type {buttonList}
|
|
436
|
+
*/
|
|
412
437
|
|
|
413
438
|
|
|
414
|
-
|
|
415
|
-
eachNavigable((index, el) => el.setAttribute('tabindex', -1));
|
|
416
|
-
setFocusStyle(null);
|
|
417
|
-
};
|
|
439
|
+
var api = {
|
|
418
440
|
/**
|
|
419
|
-
*
|
|
420
|
-
* The active item change should be handled by the consumer through the API, in case it is conditional or asynchronous
|
|
441
|
+
* Sets the active item
|
|
421
442
|
* @param {String} itemId
|
|
443
|
+
* @returns {buttonList}
|
|
422
444
|
*/
|
|
445
|
+
setActiveItem: function setActiveItem(itemId) {
|
|
446
|
+
activeItemId = itemId;
|
|
447
|
+
|
|
448
|
+
if (this.is('rendered')) {
|
|
449
|
+
selectItem(itemId);
|
|
450
|
+
}
|
|
423
451
|
|
|
452
|
+
return this;
|
|
453
|
+
},
|
|
424
454
|
|
|
425
|
-
const onClick = itemId => {
|
|
426
|
-
/**
|
|
427
|
-
* @event click
|
|
428
|
-
* @param {String} itemId
|
|
429
|
-
*/
|
|
430
|
-
component.trigger('click', {
|
|
431
|
-
id: itemId
|
|
432
|
-
});
|
|
433
|
-
};
|
|
434
455
|
/**
|
|
435
|
-
*
|
|
436
|
-
*
|
|
456
|
+
* Update single item properties:
|
|
457
|
+
* Only `icon`, `numericLabel`, `ariaLabel` are supported
|
|
458
|
+
* @param {String} itemId
|
|
459
|
+
* @param {Object} itemData
|
|
460
|
+
* @returns {buttonList}
|
|
437
461
|
*/
|
|
462
|
+
updateItem: function updateItem(itemId, itemData) {
|
|
463
|
+
if (this.is('rendered')) {
|
|
464
|
+
updateItemData(itemId, itemData);
|
|
465
|
+
}
|
|
438
466
|
|
|
467
|
+
return this;
|
|
468
|
+
}
|
|
469
|
+
};
|
|
470
|
+
/**
|
|
471
|
+
* @typedef {component} buttonList
|
|
472
|
+
*/
|
|
439
473
|
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
* @returns {buttonList}
|
|
445
|
-
*/
|
|
446
|
-
setActiveItem(itemId) {
|
|
447
|
-
activeItemId = itemId;
|
|
448
|
-
|
|
449
|
-
if (this.is('rendered')) {
|
|
450
|
-
selectItem(itemId);
|
|
451
|
-
}
|
|
452
|
-
|
|
453
|
-
return this;
|
|
454
|
-
},
|
|
455
|
-
|
|
456
|
-
/**
|
|
457
|
-
* Update single item properties:
|
|
458
|
-
* Only `icon`, `numericLabel`, `ariaLabel` are supported
|
|
459
|
-
* @param {String} itemId
|
|
460
|
-
* @param {Object} itemData
|
|
461
|
-
* @returns {buttonList}
|
|
462
|
-
*/
|
|
463
|
-
updateItem(itemId, itemData) {
|
|
464
|
-
if (this.is('rendered')) {
|
|
465
|
-
updateItemData(itemId, itemData);
|
|
466
|
-
}
|
|
474
|
+
component = componentFactory(api, {}) // set the component's layout
|
|
475
|
+
.setTemplate(itemButtonListTpl) // renders the component
|
|
476
|
+
.on('render', function onItemButtonListRender() {
|
|
477
|
+
var _this = this;
|
|
467
478
|
|
|
468
|
-
|
|
479
|
+
// 'tabfocus' detection, for Safari until :focus-visible supported
|
|
480
|
+
this.getElement().on('keydown', cssSelectors.navigable, function (e) {
|
|
481
|
+
if (e.key === 'Tab') {
|
|
482
|
+
setFocusStyle(null);
|
|
469
483
|
}
|
|
484
|
+
});
|
|
485
|
+
this.getElement().on('keyup', cssSelectors.navigable, function (e) {
|
|
486
|
+
if (e.key === 'Tab') {
|
|
487
|
+
setFocusStyle($$1(e.target));
|
|
488
|
+
}
|
|
489
|
+
});
|
|
490
|
+
component.getElement().on('click', cssSelectors.navigable, function (e) {
|
|
491
|
+
//does not check `disabled` property of clicked item, should be checked by consumer
|
|
492
|
+
if (!_this.is('disabled')) {
|
|
493
|
+
onClick(e.currentTarget.dataset.id);
|
|
494
|
+
}
|
|
495
|
+
});
|
|
496
|
+
selectItem(activeItemId);
|
|
470
497
|
|
|
471
|
-
|
|
498
|
+
if (!this.is('disabled')) {
|
|
499
|
+
enableKeyboard();
|
|
500
|
+
} else {
|
|
501
|
+
disableKeyboard();
|
|
502
|
+
}
|
|
472
503
|
/**
|
|
473
|
-
* @
|
|
504
|
+
* @event ready
|
|
474
505
|
*/
|
|
475
506
|
|
|
476
|
-
component = componentFactory(api, {}) // set the component's layout
|
|
477
|
-
.setTemplate(itemButtonListTpl) // renders the component
|
|
478
|
-
.on('render', function onItemButtonListRender() {
|
|
479
|
-
// 'tabfocus' detection, for Safari until :focus-visible supported
|
|
480
|
-
this.getElement().on('keydown', cssSelectors.navigable, e => {
|
|
481
|
-
if (e.key === 'Tab') {
|
|
482
|
-
setFocusStyle(null);
|
|
483
|
-
}
|
|
484
|
-
});
|
|
485
|
-
this.getElement().on('keyup', cssSelectors.navigable, e => {
|
|
486
|
-
if (e.key === 'Tab') {
|
|
487
|
-
setFocusStyle($$1(e.target));
|
|
488
|
-
}
|
|
489
|
-
});
|
|
490
|
-
component.getElement().on('click', cssSelectors.navigable, e => {
|
|
491
|
-
//does not check `disabled` property of clicked item, should be checked by consumer
|
|
492
|
-
if (!this.is('disabled')) {
|
|
493
|
-
onClick(e.currentTarget.dataset.id);
|
|
494
|
-
}
|
|
495
|
-
});
|
|
496
|
-
selectItem(activeItemId);
|
|
497
|
-
|
|
498
|
-
if (!this.is('disabled')) {
|
|
499
|
-
enableKeyboard();
|
|
500
|
-
} else {
|
|
501
|
-
disableKeyboard();
|
|
502
|
-
}
|
|
503
|
-
/**
|
|
504
|
-
* @event ready
|
|
505
|
-
*/
|
|
506
507
|
|
|
508
|
+
this.setState('ready', true).trigger('ready');
|
|
509
|
+
}) // reflect enable/disabled state
|
|
510
|
+
.on('enable', function () {
|
|
511
|
+
return enableKeyboard;
|
|
512
|
+
}).on('disable', function () {
|
|
513
|
+
return disableKeyboard;
|
|
514
|
+
}); // initialize the component with the provided config:
|
|
515
|
+
// config also contains data passed to template when rendering
|
|
507
516
|
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
// config also contains data passed to template when rendering
|
|
512
|
-
|
|
513
|
-
component.init(config);
|
|
514
|
-
return component;
|
|
515
|
-
}
|
|
517
|
+
component.init(config);
|
|
518
|
+
return component;
|
|
519
|
+
}
|
|
516
520
|
|
|
517
|
-
|
|
521
|
+
return itemButtonListFactory;
|
|
518
522
|
|
|
519
523
|
});
|