| 1 |
import * as GRID from "./constants"; |
| 2 |
import * as GRIDTypo from "./typographyPrefixConstants"; |
| 3 |
import { addProperty } from "../../../helpers/helper"; |
| 4 |
|
| 5 |
export default ({ blockId, layoutMode, layout }) => { |
| 6 |
const containerSectionWrapper = `.${blockId}.betterdocs-category-grid-wrapper`; |
| 7 |
const innerWrapperSelector = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper`; |
| 8 |
const singleGridWrapperSelector = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper.masonry > .betterdocs-single-category-wrapper`; |
| 9 |
const singleGridInnerSelector = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-single-category-inner`; |
| 10 |
const titleSelector = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-category-title, .${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-category-title a`; |
| 11 |
const titleHoverSelector = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-category-title:hover`; |
| 12 |
const titleSelector2 = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-category-header`; |
| 13 |
const titleSelector3 = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-category-header .betterdocs-category-header-inner`; |
| 14 |
const titleSelectorLayout2 = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-category-title`; |
| 15 |
const countSelector1 = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-category-items-counts`; |
| 16 |
const countSelector2 = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper.default .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-items-counts span, .${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper.layout-1 .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-items-counts span`; |
| 17 |
const countHoverSelector = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-items-counts:hover span`; |
| 18 |
const countSelector2Part2 = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper.layout-2 .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-items-counts span`; |
| 19 |
const countSelector2Layout2 = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper.layout-2 .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-items-counts`; |
| 20 |
const countSelector3 = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-category-items-counts`; |
| 21 |
const buttonSelector = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-footer a.betterdocs-category-link-btn`; |
| 22 |
const buttonSelector2 = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-footer`; |
| 23 |
const docListSelector1 = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-articles-list li:not(.betterdocs-nested-category-wrapper)`; |
| 24 |
const docListSelector2 = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-single-category-inner .betterdocs-articles-list li:not(.betterdocs-nested-category-wrapper) a`; |
| 25 |
const docListSelector3 = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-body`; |
| 26 |
const docListSelector4 = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-body .betterdocs-articles-list li i, .${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-body .betterdocs-articles-list .betterdocs-nested-category-wrapper i`; |
| 27 |
const docListSelector5 = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-body .betterdocs-articles-list li img, .${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper .betterdocs-body .betterdocs-articles-list .betterdocs-nested-category-wrapper img`; |
| 28 |
const tickerSelector = `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper .betterdocs-single-category-wrapper.layout-2 .betterdocs-category-items-counts:after`; |
| 29 |
|
| 30 |
return [ |
| 31 |
addProperty('dimension', GRID.CONTAINER_SECTION_MARGIN, { |
| 32 |
args: { styleFor: "margin" }, |
| 33 |
cssSelector: containerSectionWrapper |
| 34 |
}), |
| 35 |
addProperty('dimension', GRID.CONTAINER_SECTION_PADDING, { |
| 36 |
args: { styleFor: "padding" }, |
| 37 |
cssSelector: containerSectionWrapper |
| 38 |
}), |
| 39 |
addProperty('background', GRID.CONTAINER_SECTION_BACKGROUND, { |
| 40 |
args: { noOverlay: true }, |
| 41 |
cssSelector: containerSectionWrapper |
| 42 |
}), |
| 43 |
addProperty('responsive', GRID.COLUMNS, { |
| 44 |
defaultData: { |
| 45 |
desktop: 3, |
| 46 |
tab: 2, |
| 47 |
mobile: 1, |
| 48 |
}, |
| 49 |
args: { property: '' }, |
| 50 |
class: true, |
| 51 |
attr: true, |
| 52 |
attrPrefix: 'column', |
| 53 |
classPrefix: 'betterdocs-column-', |
| 54 |
filter: 'number', |
| 55 |
cssSelector: innerWrapperSelector |
| 56 |
}), |
| 57 |
addProperty('responsive', GRID.GRID_SPACE, { |
| 58 |
defaultData: { |
| 59 |
desktop: 10, |
| 60 |
tab: 10, |
| 61 |
mobile: 10, |
| 62 |
}, |
| 63 |
args: { property: '' }, |
| 64 |
attr: layoutMode !== 'grid', |
| 65 |
filter: 'number', |
| 66 |
attrPrefix: 'column_space' |
| 67 |
}), |
| 68 |
addProperty('responsive', 'gridSpaceMarginBottom', { |
| 69 |
defaultData: { |
| 70 |
desktop: 10, |
| 71 |
tab: 10, |
| 72 |
mobile: 10, |
| 73 |
}, |
| 74 |
args: { property: "margin-bottom", controlName: GRID.GRID_SPACE, customUnit: 'px' }, |
| 75 |
// filter: 'number', |
| 76 |
cssSelector: singleGridWrapperSelector, |
| 77 |
}), |
| 78 |
addProperty('dimension', GRID.GRID_PADDING, { |
| 79 |
args: { styleFor: "padding" }, |
| 80 |
cssSelector: singleGridInnerSelector |
| 81 |
}), |
| 82 |
addProperty('dimension', GRID.GRID_MARGIN, { |
| 83 |
args: { styleFor: "margin" }, |
| 84 |
cssSelector: singleGridInnerSelector |
| 85 |
}), |
| 86 |
addProperty('background', GRID.GRID_BACKGROUND, { |
| 87 |
args: { noOverlay: true }, |
| 88 |
cssSelector: singleGridInnerSelector |
| 89 |
}), |
| 90 |
addProperty('border', GRID.GRID_BORDER, { |
| 91 |
cssSelector: singleGridInnerSelector |
| 92 |
}), |
| 93 |
|
| 94 |
// TITLE |
| 95 |
addProperty('color', 'titleColor', { |
| 96 |
args: { hover: 'titleHoverColor' }, |
| 97 |
cssSelector: titleSelector, |
| 98 |
hoverSelector: titleHoverSelector, |
| 99 |
}), |
| 100 |
|
| 101 |
addProperty('typography', GRIDTypo.typoPrefix_title, { |
| 102 |
args: { |
| 103 |
defaultFontSize: 20, |
| 104 |
prefixConstant: GRIDTypo.typoPrefix_title, |
| 105 |
}, |
| 106 |
cssSelector: titleSelector |
| 107 |
}), |
| 108 |
addProperty('dimension', layout == 'default' ? GRID.TITLE_PADDING : GRID.TITLE_PADDING_LAYOUT_2, { |
| 109 |
args: { styleFor: "padding" }, |
| 110 |
cssSelector: layout == 'default' ? titleSelector3 : titleSelectorLayout2 |
| 111 |
}), |
| 112 |
addProperty('dimension', layout == 'default' ? GRID.TITLE_MARGIN : GRID.TITLE_MARGIN_LAYOUT_2, { |
| 113 |
args: { styleFor: "margin" }, |
| 114 |
cssSelector: layout == 'default' ? titleSelector2 : titleSelectorLayout2 |
| 115 |
}), |
| 116 |
addProperty('dimension', GRID.COUNT_PADDING_LAYOUT_2, { |
| 117 |
args: { styleFor: "padding" }, |
| 118 |
cssSelector: countSelector2Layout2 |
| 119 |
}), |
| 120 |
addProperty('dimension', GRID.COUNT_MARGIN_LAYOUT_2, { |
| 121 |
args: { styleFor: "margin" }, |
| 122 |
cssSelector: countSelector2Layout2 |
| 123 |
}), |
| 124 |
addProperty('background', GRID.TITLE_BACKGROUND, { |
| 125 |
args: { noOverlay: true, noMainBgi: true }, |
| 126 |
cssSelector: titleSelector2 |
| 127 |
}), |
| 128 |
addProperty('border', GRID.TITLE_BORDER, { |
| 129 |
args: { noShadow: true }, |
| 130 |
cssSelector: titleSelector3 |
| 131 |
}), |
| 132 |
|
| 133 |
// Count |
| 134 |
addProperty('typography', GRIDTypo.typoPrefix_count, { |
| 135 |
args: { |
| 136 |
defaultFontSize: 15, |
| 137 |
prefixConstant: GRIDTypo.typoPrefix_count, |
| 138 |
}, |
| 139 |
cssSelector: layout == 'default' ? countSelector2 : countSelector2Part2 |
| 140 |
}), |
| 141 |
addProperty('responsive', 'countSizeHeight', { |
| 142 |
args: { property: "min-height", controlName: GRID.COUNT_SIZE }, |
| 143 |
cssSelector: countSelector2 |
| 144 |
}), |
| 145 |
addProperty('responsive', 'countSizeWidth', { |
| 146 |
args: { property: "min-width", controlName: GRID.COUNT_SIZE }, |
| 147 |
cssSelector: countSelector2 |
| 148 |
}), |
| 149 |
addProperty('color', 'countColor', { |
| 150 |
args: { hover: 'countHoverColor' }, |
| 151 |
cssSelector: layout == 'default' ? countSelector2 : countSelector2Part2, |
| 152 |
hoverSelector: countHoverSelector, |
| 153 |
}), |
| 154 |
addProperty('background', layout == 'default' ? GRID.COUNT_BACKGROUND : GRID.COUNT_BACKGROUND_LAYOUT_2, { |
| 155 |
args: { noOverlay: true, noMainBgi: true }, |
| 156 |
cssSelector: layout == 'default' ? countSelector1 : countSelector3 |
| 157 |
}), |
| 158 |
addProperty('border-top-color', 'tickerBackgroundColor', { |
| 159 |
args: { hover: 'tickerBackgroundColor' }, |
| 160 |
cssSelector: tickerSelector |
| 161 |
}), |
| 162 |
addProperty('border', GRID.COUNT_BORDER, { |
| 163 |
args: { noShadow: true }, |
| 164 |
cssSelector: countSelector1 |
| 165 |
}), |
| 166 |
|
| 167 |
// Button |
| 168 |
|
| 169 |
addProperty('color', 'buttonColor', { |
| 170 |
args: { hover: 'buttonHoverColor' }, |
| 171 |
cssSelector: buttonSelector |
| 172 |
}), |
| 173 |
|
| 174 |
//Button Icon Position Missing |
| 175 |
addProperty('alignment', 'buttonPosition', { |
| 176 |
args: { property: "text-align" }, |
| 177 |
cssSelector:buttonSelector2 |
| 178 |
} ), |
| 179 |
|
| 180 |
addProperty('typography', GRIDTypo.typoPrefix_button, { |
| 181 |
args: { |
| 182 |
defaultFontSize: 16, |
| 183 |
prefixConstant: GRIDTypo.typoPrefix_button, |
| 184 |
}, |
| 185 |
cssSelector: buttonSelector |
| 186 |
}), |
| 187 |
addProperty('dimension', GRID.BTN_PADDING, { |
| 188 |
args: { styleFor: "padding" }, |
| 189 |
cssSelector: buttonSelector |
| 190 |
}), |
| 191 |
addProperty('dimension', GRID.BTN_MARGIN, { |
| 192 |
args: { styleFor: "margin" }, |
| 193 |
cssSelector: buttonSelector |
| 194 |
}), |
| 195 |
addProperty('background', GRID.BTN_BACKGROUND, { |
| 196 |
args: { noOverlay: true, noMainBgi: true }, |
| 197 |
cssSelector: buttonSelector |
| 198 |
}), |
| 199 |
addProperty('border', GRID.BTN_BORDER, { |
| 200 |
args: { noShadow: true }, |
| 201 |
cssSelector: buttonSelector |
| 202 |
}), |
| 203 |
|
| 204 |
// List |
| 205 |
addProperty('typography', GRIDTypo.typoPrefix_list, { |
| 206 |
args: { |
| 207 |
defaultFontSize: 15, |
| 208 |
prefixConstant: GRIDTypo.typoPrefix_list, |
| 209 |
}, |
| 210 |
cssSelector: docListSelector2 |
| 211 |
}), |
| 212 |
addProperty('color', 'listColor', { |
| 213 |
args: { hover: 'listHoverColor' }, |
| 214 |
cssSelector: docListSelector2 |
| 215 |
}), |
| 216 |
addProperty('dimension', GRID.LIST_PADDING, { |
| 217 |
args: { styleFor: "padding" }, |
| 218 |
cssSelector: docListSelector3 |
| 219 |
}), |
| 220 |
addProperty('dimension', GRID.LIST_MARGIN, { |
| 221 |
args: { styleFor: "margin" }, |
| 222 |
cssSelector: docListSelector1 |
| 223 |
}), |
| 224 |
addProperty('background', GRID.LIST_BACKGROUND, { |
| 225 |
args: { noOverlay: true, noMainBgi: true }, |
| 226 |
cssSelector: docListSelector3 |
| 227 |
}), |
| 228 |
|
| 229 |
// List Icon |
| 230 |
addProperty('responsive', GRID.ICON_SIZE, { |
| 231 |
args: { property: "font-size" }, |
| 232 |
cssSelector: docListSelector4 |
| 233 |
}), |
| 234 |
addProperty('responsive', GRID.ICON_HEIGHT, { |
| 235 |
args: { property: "height" }, |
| 236 |
cssSelector: docListSelector5 |
| 237 |
}), |
| 238 |
addProperty('responsive', GRID.ICON_WIDTH, { |
| 239 |
args: { property: "width" }, |
| 240 |
cssSelector: docListSelector5 |
| 241 |
}), |
| 242 |
addProperty('dimension', GRID.ICON_MARGIN, { |
| 243 |
args: { styleFor: "margin" }, |
| 244 |
cssSelector: docListSelector4 |
| 245 |
}), |
| 246 |
|
| 247 |
addProperty('color', 'iconColor', { |
| 248 |
cssSelector: docListSelector4 |
| 249 |
}), |
| 250 |
|
| 251 |
// Wrapper Margin |
| 252 |
addProperty('dimension', GRID.WRAPPER_MARGIN, { |
| 253 |
args: { styleFor: "margin" }, |
| 254 |
cssSelector: `.${blockId}.betterdocs-category-grid-wrapper .betterdocs-category-grid-inner-wrapper` |
| 255 |
}), |
| 256 |
] |
| 257 |
} |
| 258 |
|
