| [2058e5c] | 1 | let Declaration = require('../declaration')
|
|---|
| 2 | let Processor = require('../processor')
|
|---|
| 3 | let {
|
|---|
| 4 | autoplaceGridItems,
|
|---|
| 5 | getGridGap,
|
|---|
| 6 | inheritGridGap,
|
|---|
| 7 | prefixTrackProp,
|
|---|
| 8 | prefixTrackValue
|
|---|
| 9 | } = require('./grid-utils')
|
|---|
| 10 |
|
|---|
| 11 | class GridRowsColumns extends Declaration {
|
|---|
| 12 | insert(decl, prefix, prefixes, result) {
|
|---|
| 13 | if (prefix !== '-ms-') return super.insert(decl, prefix, prefixes)
|
|---|
| 14 |
|
|---|
| 15 | let { parent, prop, value } = decl
|
|---|
| 16 | let isRowProp = prop.includes('rows')
|
|---|
| 17 | let isColumnProp = prop.includes('columns')
|
|---|
| 18 |
|
|---|
| 19 | let hasGridTemplate = parent.some(
|
|---|
| 20 | i => i.prop === 'grid-template' || i.prop === 'grid-template-areas'
|
|---|
| 21 | )
|
|---|
| 22 |
|
|---|
| 23 | /**
|
|---|
| 24 | * Not to prefix rows declaration if grid-template(-areas) is present
|
|---|
| 25 | */
|
|---|
| 26 | if (hasGridTemplate && isRowProp) {
|
|---|
| 27 | return false
|
|---|
| 28 | }
|
|---|
| 29 |
|
|---|
| 30 | let processor = new Processor({ options: {} })
|
|---|
| 31 | let status = processor.gridStatus(parent, result)
|
|---|
| 32 | let gap = getGridGap(decl)
|
|---|
| 33 | gap = inheritGridGap(decl, gap) || gap
|
|---|
| 34 |
|
|---|
| 35 | let gapValue = isRowProp ? gap.row : gap.column
|
|---|
| 36 |
|
|---|
| 37 | if ((status === 'no-autoplace' || status === true) && !hasGridTemplate) {
|
|---|
| 38 | gapValue = null
|
|---|
| 39 | }
|
|---|
| 40 |
|
|---|
| 41 | let prefixValue = prefixTrackValue({
|
|---|
| 42 | gap: gapValue,
|
|---|
| 43 | value
|
|---|
| 44 | })
|
|---|
| 45 |
|
|---|
| 46 | /**
|
|---|
| 47 | * Insert prefixes
|
|---|
| 48 | */
|
|---|
| 49 | decl.cloneBefore({
|
|---|
| 50 | prop: prefixTrackProp({ prefix, prop }),
|
|---|
| 51 | value: prefixValue
|
|---|
| 52 | })
|
|---|
| 53 |
|
|---|
| 54 | let autoflow = parent.nodes.find(i => i.prop === 'grid-auto-flow')
|
|---|
| 55 | let autoflowValue = 'row'
|
|---|
| 56 |
|
|---|
| 57 | if (autoflow && !processor.disabled(autoflow, result)) {
|
|---|
| 58 | autoflowValue = autoflow.value.trim()
|
|---|
| 59 | }
|
|---|
| 60 | if (status === 'autoplace') {
|
|---|
| 61 | /**
|
|---|
| 62 | * Show warning if grid-template-rows decl is not found
|
|---|
| 63 | */
|
|---|
| 64 | let rowDecl = parent.nodes.find(i => i.prop === 'grid-template-rows')
|
|---|
| 65 |
|
|---|
| 66 | if (!rowDecl && hasGridTemplate) {
|
|---|
| 67 | return undefined
|
|---|
| 68 | } else if (!rowDecl && !hasGridTemplate) {
|
|---|
| 69 | decl.warn(
|
|---|
| 70 | result,
|
|---|
| 71 | 'Autoplacement does not work without grid-template-rows property'
|
|---|
| 72 | )
|
|---|
| 73 | return undefined
|
|---|
| 74 | }
|
|---|
| 75 |
|
|---|
| 76 | /**
|
|---|
| 77 | * Show warning if grid-template-columns decl is not found
|
|---|
| 78 | */
|
|---|
| 79 | let columnDecl = parent.nodes.find(i => {
|
|---|
| 80 | return i.prop === 'grid-template-columns'
|
|---|
| 81 | })
|
|---|
| 82 | if (!columnDecl && !hasGridTemplate) {
|
|---|
| 83 | decl.warn(
|
|---|
| 84 | result,
|
|---|
| 85 | 'Autoplacement does not work without grid-template-columns property'
|
|---|
| 86 | )
|
|---|
| 87 | }
|
|---|
| 88 |
|
|---|
| 89 | /**
|
|---|
| 90 | * Autoplace grid items
|
|---|
| 91 | */
|
|---|
| 92 | if (isColumnProp && !hasGridTemplate) {
|
|---|
| 93 | autoplaceGridItems(decl, result, gap, autoflowValue)
|
|---|
| 94 | }
|
|---|
| 95 | }
|
|---|
| 96 |
|
|---|
| 97 | return undefined
|
|---|
| 98 | }
|
|---|
| 99 |
|
|---|
| 100 | /**
|
|---|
| 101 | * Change IE property back
|
|---|
| 102 | */
|
|---|
| 103 | normalize(prop) {
|
|---|
| 104 | return prop.replace(/^grid-(rows|columns)/, 'grid-template-$1')
|
|---|
| 105 | }
|
|---|
| 106 |
|
|---|
| 107 | /**
|
|---|
| 108 | * Change property name for IE
|
|---|
| 109 | */
|
|---|
| 110 | prefixed(prop, prefix) {
|
|---|
| 111 | if (prefix === '-ms-') {
|
|---|
| 112 | return prefixTrackProp({ prefix, prop })
|
|---|
| 113 | }
|
|---|
| 114 | return super.prefixed(prop, prefix)
|
|---|
| 115 | }
|
|---|
| 116 | }
|
|---|
| 117 |
|
|---|
| 118 | GridRowsColumns.names = [
|
|---|
| 119 | 'grid-template-rows',
|
|---|
| 120 | 'grid-template-columns',
|
|---|
| 121 | 'grid-rows',
|
|---|
| 122 | 'grid-columns'
|
|---|
| 123 | ]
|
|---|
| 124 |
|
|---|
| 125 | module.exports = GridRowsColumns
|
|---|