-
Notifications
You must be signed in to change notification settings - Fork 45
/
tabsontop.html
68 lines (66 loc) · 3.93 KB
/
tabsontop.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!--/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~ Copyright 2022 Adobe
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/-->
<div data-sly-use.tabs="com.adobe.cq.wcm.core.components.models.Tabs"
data-sly-use.panel="com.adobe.cq.forms.core.components.models.form.Panel"
data-sly-use.formstructparser="com.adobe.cq.forms.core.components.models.form.FormStructureParser"
data-sly-use.renderer="${'tabs.js'}"
data-sly-use.label="${renderer.labelPath}"
data-sly-use.shortDescription="${renderer.shortDescriptionPath}"
data-sly-use.longDescription="${renderer.longDescriptionPath}"
data-sly-use.questionMark="${renderer.questionMarkPath}"
id="${panel.id}"
class="cmp-tabs"
data-panelcontainer="${wcmmode.edit && 'tabs'}"
data-cmp-is="adaptiveFormTabs"
data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"
data-placeholder-text="${wcmmode.edit && 'Please drag Tab components here' @ i18n}"
data-sly-test.widgetId="${'{0}-{1}' @ format=[panel.id, 'widget']}">
<div class="cmp-tabs__label-container">
<div data-sly-call="${label.label @componentId=widgetId, labelValue=panel.label.value, labelVisible=panel.label.visible, labelRichText=panel.label.richText, bemBlock='cmp-tabs'}" data-sly-unwrap></div>
<div data-sly-call="${questionMark.questionMark @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-tabs'}" data-sly-unwrap></div>
</div>
<div data-sly-call="${shortDescription.shortDescription @componentId=panel.id, shortDescriptionVisible=panel.tooltipVisible, shortDescription=panel.tooltip, bemBlock='cmp-tabs'}" data-sly-unwrap></div>
<div data-sly-call="${longDescription.longDescription @componentId=panel.id, longDescription=panel.description, bemBlock='cmp-tabs'}" data-sly-unwrap></div>
<ol data-sly-test="${tabs.items && tabs.items.size > 0}"
data-sly-list.tab="${panel.items}"
role="tablist"
class="cmp-tabs__tablist"
aria-label="${tabs.accessibilityLabel}"
aria-multiselectable="false"
id="${widgetId}">
<sly data-sly-test.isActive="${tab.name == tabs.activeItem}"/>
<li role="tab"
id="${tab.id}__tab"
class="cmp-tabs__tab${isActive ? ' cmp-tabs__tab--active' : ''}"
title="${panel.tooltipVisible ? '' : panel.tooltipText}"
aria-controls="${tab.id}__tabpanel"
tabindex="${isActive ? '0' : '-1'}"
data-cmp-hook-adaptiveFormTabs="tab">${tab.label.value @ context = tab.label.richText ? 'html' : 'text'}</li>
</ol>
<div data-sly-repeat.item="${tabs.items}"
data-sly-resource="${item.name @ decorationTagName='div'}"
id="${item.id}__tabpanel"
role="tabpanel"
aria-labelledby="${item.id}__tab"
tabindex="0"
class="cmp-tabs__tabpanel${item.name == tabs.activeItem ? ' cmp-tabs__tabpanel--active' : ''}"
data-cmp-hook-adaptiveFormTabs="tabpanel"></div>
<sly data-sly-resource="${resource.path @ resourceType='core/wcm/components/container/v1/container/new', appendPath='/*', decorationTagName='div', cssClassName='new section aem-Grid-newComponent'}"
data-sly-test="${(wcmmode.edit || wcmmode.preview)}"></sly>
</div>
<sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
<sly data-sly-test="${wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.tabs.v1.runtime'}"/>
</sly>