-
Notifications
You must be signed in to change notification settings - Fork 303
/
grids.js
95 lines (79 loc) · 2.3 KB
/
grids.js
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
'use strict'
import md5 from 'blueimp-md5'
const CACHES = {}
const RESPONSIVE = {
'sm': '568',
'md': '768',
'lg': '992',
'xl': '1200'
}
const GridClassName = 's_' + md5('rctui-grid').substr(24)
const GridFullClassName = 's_' + md5('rctui-grid-full').substr(24)
const defaultResponsive = 'md'
export function getGrid (options) {
if (!options) {
return ''
}
if (typeof options === 'number') {
options = { width: options }
}
let { width, offset, responsive } = options
let gridClass = generate(width, 'grid', responsive)
let offsetClass = generate(offset, 'offset', responsive)
return `${GridClassName} ${GridFullClassName} ${gridClass} ${offsetClass}`
}
function generate (width, type, responsive) {
if (!width || width <= 0) {
return ''
}
if (width > 1) { width = 1 }
width = (width * 100).toFixed(4)
width = width.substr(0, width.length - 1)
responsive = responsive || defaultResponsive
let className = 'rctui-' + type + '-' + responsive + '-' + width.replace('.', '-')
className = 's_' + md5(className).substr(24)
if (!CACHES[className]) {
type === 'grid'
? generateGrid(width, className, responsive)
: generateOffset(width, className, responsive)
CACHES[className] = true
}
return className
}
function generateGrid (width, className, responsive) {
let minWidth = RESPONSIVE[responsive]
let text = `@media screen and (min-width: ${minWidth}px) { .${className}{width: ${width}%} }`
createStyle(text, className)
}
function generateOffset (width, className, responsive) {
let minWidth = RESPONSIVE[responsive]
let text = `@media screen and (min-width: ${minWidth}px) { .${className}{margin-left: ${width}%} }`
createStyle(text, className)
}
function createStyle (text, id) {
let style = document.head.querySelector('#' + id)
if (style) {
return
}
style = document.createElement('style')
style.type = 'text/css'
style.id = id
style.innerHTML = text
document.head.appendChild(style)
}
(function () {
let text = []
text.push(`
.${GridClassName} {
position: relative;
display: inline-block;
zoom: 1;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
box-sizing: border-box;
}`)
text.push(`.${GridFullClassName}{width:100%}`)
createStyle(text.join(''), GridClassName)
})()