1+ ( function ( ) {
2+
3+ var JDBuilderElementIconList = function ( element ) {
4+ var html = [ ] ;
5+ var items = element . params . get ( 'list_items' , [ ] ) ;
6+ var layout = element . params . get ( 'list_layout' , 'list' ) ;
7+ var divider = element . params . get ( 'list_divider' , false ) ;
8+
9+ html = [ `<div class="jdb-iconlist jdb-iconlist-layout-${ layout } ${ divider ? ' jdb-iconlist-has-divider' : '' } ] ;
10+
11+ items . forEach ( function ( item ) {
12+ if ( item . text != '' || item . icon != '' ) {
13+ html . push ( `<li class="jdb-iconlist-item">${ item . icon ? `<span class="jdb-iconlist-icon"><i class="${ item . icon } : `` } ${ item . text } ) ;
14+ }
15+ } ) ;
16+
17+ html . push ( `</ul></div>` ) ;
18+
19+ listStyling ( element ) ;
20+ iconStyling ( element ) ;
21+ textStyling ( element ) ;
22+
23+ return html . join ( '' ) ;
24+ }
25+
26+ function listStyling ( element ) {
27+ var layout = element . params . get ( 'list_layout' , 'list' ) ;
28+
29+ var List = new JDBRenderer . ElementStyle ( ".jdb-iconlist" ) ;
30+ var ListContainer = new JDBRenderer . ElementStyle ( ".jdb-iconlist-layout-" + layout ) ;
31+ var ListItems = new JDBRenderer . ElementStyle ( ".jdb-iconlist-layout-" + layout + " .jdb-iconlist-items" ) ;
32+ var ListItem = new JDBRenderer . ElementStyle ( ".jdb-iconlist-layout-" + layout + " .jdb-iconlist-item" ) ;
33+ var ListItemNotLast = new JDBRenderer . ElementStyle ( ".jdb-iconlist-layout-" + layout + " .jdb-iconlist-item:not(:last-child)" ) ;
34+ var ListItemNotFirst = new JDBRenderer . ElementStyle ( ".jdb-iconlist-layout-" + layout + " .jdb-iconlist-item:not(:first-child)" ) ;
35+ var ListItemHover = new JDBRenderer . ElementStyle ( ".jdb-iconlist-item:hover" ) ;
36+ var ListDivider = new JDBRenderer . ElementStyle ( ".jdb-iconlist-layout-" + layout + ".jdb-iconlist-has-divider .jdb-iconlist-item:not(:last-child):after" ) ;
37+
38+ var alignment = element . params . get ( 'list_alignment' , null ) ;
39+
40+ JDBRenderer . DEVICES . forEach ( function ( _deviceObj ) {
41+ if ( _deviceObj . key in alignment ) {
42+ ListContainer . addCss ( 'text-align' , alignment [ _deviceObj . key ] , _deviceObj . type ) ;
43+ ListItem . addCss ( 'justify-content' , alignment [ _deviceObj . key ] == 'left' ? 'flex-start' : ( alignment [ _deviceObj . key ] == 'right' ? 'flex-end' : 'center' ) , _deviceObj . type ) ;
44+ }
45+ } ) ;
46+
47+
48+ var space_between = element . params . get ( 'list_space_between' , null ) ;
49+ if ( space_between != null ) {
50+ JDBRenderer . DEVICES . forEach ( function ( _deviceObj ) {
51+ if ( ( _deviceObj . key in space_between ) && JDBRenderer . Helper . checkSliderValue ( space_between [ _deviceObj . key ] ) ) {
52+ var marginSide = layout == 'list' ? 'bottom' : 'right' ;
53+ ListItemNotLast . addCss ( `margin-${ marginSide } , `${ space_between [ _deviceObj . key ] . value / 2 } , _deviceObj . type ) ;
54+ ListItemNotLast . addCss ( `padding-${ marginSide } , `${ space_between [ _deviceObj . key ] . value / 2 } , _deviceObj . type ) ;
55+ }
56+ } ) ;
57+ }
58+
59+ if ( element . params . get ( 'list_divider' , false ) ) {
60+ var borderSide = layout == 'list' ? 'top' : 'right' ;
61+ ListDivider . addCss ( `border-${ borderSide } , element . params . get ( 'list_divider_style' , 'solid' ) )
62+ ListDivider . addCss ( `border-${ borderSide } , element . params . get ( 'list_divider_color' , '' ) )
63+
64+ var weight = element . params . get ( 'list_divider_weight' , null ) ;
65+ if ( weight != null ) {
66+ JDBRenderer . DEVICES . forEach ( function ( _deviceObj ) {
67+ if ( ( _deviceObj . key in weight ) && JDBRenderer . Helper . checkSliderValue ( weight [ _deviceObj . key ] ) ) {
68+ ListDivider . addCss ( `border-${ borderSide } , `${ weight [ _deviceObj . key ] . value } , _deviceObj . type ) ;
69+ if ( layout == 'list' ) {
70+ ListItemNotLast . addCss ( `padding-bottom` , `${ weight [ _deviceObj . key ] . value } , _deviceObj . type ) ;
71+ } else {
72+ ListItemNotLast . addCss ( `padding-right` , `${ weight [ _deviceObj . key ] . value + 5 } , _deviceObj . type ) ;
73+ }
74+ }
75+ } ) ;
76+ }
77+
78+ if ( layout == 'list' ) {
79+ var width = element . params . get ( 'list_divider_width' , null ) ;
80+ if ( width != null ) {
81+ JDBRenderer . DEVICES . forEach ( function ( _deviceObj ) {
82+ if ( ( _deviceObj . key in width ) && JDBRenderer . Helper . checkSliderValue ( width [ _deviceObj . key ] ) ) {
83+ ListDivider . addCss ( `width` , `${ width [ _deviceObj . key ] . value } ${ width [ _deviceObj . key ] . unit } , _deviceObj . type ) ;
84+ }
85+ } ) ;
86+ }
87+ } else {
88+ var height = element . params . get ( 'list_divider_height' , null ) ;
89+ if ( height != null ) {
90+ JDBRenderer . DEVICES . forEach ( function ( _deviceObj ) {
91+ if ( ( _deviceObj . key in height ) && JDBRenderer . Helper . checkSliderValue ( height [ _deviceObj . key ] ) ) {
92+ ListDivider . addCss ( `height` , `${ height [ _deviceObj . key ] . value } ${ height [ _deviceObj . key ] . unit } , _deviceObj . type ) ;
93+ }
94+ } ) ;
95+ }
96+ }
97+
98+ element . addChildStyle ( ListDivider ) ;
99+ }
100+
101+
102+ element . addChildStyle ( List ) ;
103+ element . addChildStyle ( ListContainer ) ;
104+ element . addChildStyle ( ListItem ) ;
105+ element . addChildStyle ( ListItems ) ;
106+ element . addChildStyle ( ListItemNotLast ) ;
107+ element . addChildStyle ( ListItemNotFirst ) ;
108+ element . addChildStyle ( ListItemHover ) ;
109+ }
110+
111+ function iconStyling ( element ) {
112+ var Icon = new JDBRenderer . ElementStyle ( ".jdb-iconlist-icon" ) ;
113+ var IconHover = new JDBRenderer . ElementStyle ( ".jdb-iconlist-item:hover .jdb-iconlist-icon" ) ;
114+
115+ Icon . addCss ( 'color' , element . params . get ( 'icon_color' , '' ) ) ;
116+ Icon . addCss ( 'background-color' , element . params . get ( 'icon_bg_color' , '' ) ) ;
117+ IconHover . addCss ( 'color' , element . params . get ( 'icon_hover_color' , '' ) ) ;
118+ IconHover . addCss ( 'background-color' , element . params . get ( 'icon_bg_hover_color' , '' ) ) ;
119+
120+ JDBRenderer . Helper . applyBorderValue ( Icon , element . params , "iconBorder" ) ;
121+
122+ var icon_size = element . params . get ( 'icon_size' , null ) ;
123+ if ( icon_size != null ) {
124+ JDBRenderer . DEVICES . forEach ( function ( _deviceObj ) {
125+ if ( ( _deviceObj . key in icon_size ) && JDBRenderer . Helper . checkSliderValue ( icon_size [ _deviceObj . key ] ) ) {
126+ Icon . addCss ( `font-size` , `${ icon_size [ _deviceObj . key ] . value * 0.70 } , _deviceObj . type ) ;
127+ Icon . addCss ( `line-height` , `${ icon_size [ _deviceObj . key ] . value } , _deviceObj . type ) ;
128+ Icon . addCss ( `width` , `${ icon_size [ _deviceObj . key ] . value } , _deviceObj . type ) ;
129+ Icon . addCss ( `height` , `${ icon_size [ _deviceObj . key ] . value } , _deviceObj . type ) ;
130+ }
131+ } ) ;
132+ }
133+
134+ var padding = element . params . get ( 'icon_padding' , null ) ;
135+ if ( padding != null ) {
136+ JDBRenderer . DEVICES . forEach ( function ( _deviceObj ) {
137+ if ( _deviceObj . key in padding ) {
138+ Icon . addStyle ( JDBRenderer . Helper . spacingValue ( padding [ _deviceObj . key ] , "padding" ) , _deviceObj . type ) ;
139+ }
140+ } ) ;
141+ }
142+
143+ var space_between = element . params . get ( 'icon_space_between' , null ) ;
144+ if ( space_between != null ) {
145+ JDBRenderer . DEVICES . forEach ( function ( _deviceObj ) {
146+ if ( ( _deviceObj . key in space_between ) && JDBRenderer . Helper . checkSliderValue ( space_between [ _deviceObj . key ] ) ) {
147+ Icon . addCss ( `margin-right` , `${ space_between [ _deviceObj . key ] . value } , _deviceObj . type ) ;
148+ }
149+ } ) ;
150+ }
151+
152+ element . addChildStyle ( Icon ) ;
153+ element . addChildStyle ( IconHover ) ;
154+ }
155+
156+ function textStyling ( element ) {
157+ var Text = new JDBRenderer . ElementStyle ( ".jdb-iconlist-text" ) ;
158+ var TextHover = new JDBRenderer . ElementStyle ( ".jdb-iconlist-item:hover .jdb-iconlist-text" ) ;
159+
160+ Text . addCss ( 'color' , element . params . get ( 'text_color' , '' ) ) ;
161+ TextHover . addCss ( 'color' , element . params . get ( 'text_hover_color' , '' ) ) ;
162+
163+ var typography = element . params . get ( 'text_typography' , null ) ;
164+ if ( typography !== null ) {
165+ JDBRenderer . DEVICES . forEach ( function ( _deviceObj ) {
166+ if ( _deviceObj . key in typography ) {
167+ Text . addStyle ( JDBRenderer . Helper . typographyValue ( typography [ _deviceObj . key ] ) , _deviceObj . type ) ;
168+ }
169+ } ) ;
170+ }
171+
172+ element . addChildStyle ( Text ) ;
173+ element . addChildStyle ( TextHover ) ;
174+ }
175+
176+ window . JDBuilderElementIconList = JDBuilderElementIconList ;
177+
178+ } ) ( ) ;
0 commit comments