cbvirtua 1.0.29 → 1.0.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.postcssrc.js +18 -0
- package/canvas.txt +204 -0
- package/p2.js +334 -0
- package/package.json +1 -1
package/.postcssrc.js
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
const p2 = require("./p2");
|
|
2
|
+
|
|
3
|
+
module.exports = ({ file }) => {
|
|
4
|
+
return {
|
|
5
|
+
plugins: [
|
|
6
|
+
p2({
|
|
7
|
+
unitToConvert: 'px',
|
|
8
|
+
viewportWidth: 320,
|
|
9
|
+
viewportHeight: 568, // not now used; TODO: need for different units and math for different properties
|
|
10
|
+
unitPrecision: 5,
|
|
11
|
+
viewportUnit: 'vw',
|
|
12
|
+
fontViewportUnit: 'vw', // vmin is more suitable.
|
|
13
|
+
selectorBlackList: [],
|
|
14
|
+
propList: ['*']
|
|
15
|
+
}),
|
|
16
|
+
],
|
|
17
|
+
};
|
|
18
|
+
};
|
package/canvas.txt
ADDED
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
8
|
+
<title>Document</title>
|
|
9
|
+
<style>
|
|
10
|
+
body {
|
|
11
|
+
text-align: center;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
canvas {
|
|
15
|
+
border: 1px solid;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.newcanvas {
|
|
19
|
+
width: 316px;
|
|
20
|
+
height: 316px;
|
|
21
|
+
margin: auto;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.newpohoto,
|
|
25
|
+
.download {
|
|
26
|
+
width: 300px;
|
|
27
|
+
height: 40px;
|
|
28
|
+
line-height: 40px;
|
|
29
|
+
margin: auto;
|
|
30
|
+
background-color: cornflowerblue;
|
|
31
|
+
border-radius: 5px;
|
|
32
|
+
cursor: pointer;
|
|
33
|
+
margin: 10px auto;
|
|
34
|
+
color: white;
|
|
35
|
+
}
|
|
36
|
+
</style>
|
|
37
|
+
</head>
|
|
38
|
+
|
|
39
|
+
<body>
|
|
40
|
+
<h3>使用canvas实现九宫格切图的效果</h3>
|
|
41
|
+
<div class="mycanvas">
|
|
42
|
+
<canvas width="300" height="300" id="mycnavas"></canvas>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="newpohoto">
|
|
45
|
+
开始切图
|
|
46
|
+
</div>
|
|
47
|
+
<div class="newcanvas">
|
|
48
|
+
<canvas width="100" height="100" id="img1"></canvas>
|
|
49
|
+
<canvas width="100" height="100" id="img2"></canvas>
|
|
50
|
+
<canvas width="100" height="100" id="img3"></canvas>
|
|
51
|
+
<canvas width="100" height="100" id="img4"></canvas>
|
|
52
|
+
<canvas width="100" height="100" id="img5"></canvas>
|
|
53
|
+
<canvas width="100" height="100" id="img6"></canvas>
|
|
54
|
+
<canvas width="100" height="100" id="img7"></canvas>
|
|
55
|
+
<canvas width="100" height="100" id="img8"></canvas>
|
|
56
|
+
<canvas width="100" height="100" id="img9"></canvas>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="download">
|
|
59
|
+
下载图片
|
|
60
|
+
</div>
|
|
61
|
+
<script>
|
|
62
|
+
var canvas = document.getElementById("mycnavas"); //现将图片放上去
|
|
63
|
+
var cxt = mycnavas.getContext("2d");
|
|
64
|
+
var img = new Image();
|
|
65
|
+
img.src = "../img/img10.jpg";
|
|
66
|
+
window.onload = function() {
|
|
67
|
+
cxt.drawImage(img, 0, 0, 400, 300); //画好图片的位置
|
|
68
|
+
}
|
|
69
|
+
var arr = []; //将切的图片存到数组里面
|
|
70
|
+
document.getElementsByClassName("newpohoto")[0].onclick = function() {
|
|
71
|
+
var q = 1;
|
|
72
|
+
for (var i = 0; i < 3; i++) {
|
|
73
|
+
for (var j = 0; j < 3; j++) {
|
|
74
|
+
var data = cxt.getImageData(j * 100, i * 100, 400, 100); //类似于“复制”功能
|
|
75
|
+
var img = document.getElementById("img" + q)
|
|
76
|
+
var newcxt = img.getContext("2d");
|
|
77
|
+
newcxt.putImageData(data, 0, 0); //类似“粘贴”功能
|
|
78
|
+
arr.push(console.log(img.toDataURL(q + ".png"))) //toDataURL()方法的两个参数：DataURL(type, encoderOptions) type指定转换为base64编码后图片的格式，如：image/png、image/jpeg、image/webp等等，默认为image/png格式；
|
|
79
|
+
q++;
|
|
80
|
+
console.log(arr)
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
}
|
|
85
|
+
//下载切的图片
|
|
86
|
+
var arr = [];
|
|
87
|
+
document.getElementsByClassName('download')[0].onclick = function() {
|
|
88
|
+
for (var i = 0; i < 9; i++) {
|
|
89
|
+
var a = document.createElement('a');
|
|
90
|
+
a.download = 'img' + (i + 1);
|
|
91
|
+
a.href = arr[i];
|
|
92
|
+
document.body.appendChild(a);
|
|
93
|
+
a.click();
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
</script>
|
|
97
|
+
|
|
98
|
+
</body>
|
|
99
|
+
|
|
100
|
+
</html>
|
|
101
|
+
————————————————
|
|
102
|
+
|
|
103
|
+
import { useState } from "react";
|
|
104
|
+
|
|
105
|
+
import _ from "lodash";
|
|
106
|
+
|
|
107
|
+
export const useCutImg = (url: string | undefined, points: number[][]) => {
|
|
108
|
+
const [result, setResult] = useState<string | undefined>();
|
|
109
|
+
if (points.length > 3 || points.length < 1) {
|
|
110
|
+
console.error("points's length should be 2");
|
|
111
|
+
return [""];
|
|
112
|
+
}
|
|
113
|
+
if (!url) {
|
|
114
|
+
console.error("can not find image url");
|
|
115
|
+
return [""];
|
|
116
|
+
}
|
|
117
|
+
let dx = 0;
|
|
118
|
+
let dy = 0;
|
|
119
|
+
let width = 0;
|
|
120
|
+
let height = 0;
|
|
121
|
+
|
|
122
|
+
dx = _.get(points, "[0][0]", 0);
|
|
123
|
+
dy = _.get(points, "[0][1]", 0);
|
|
124
|
+
const ex = _.get(points, "[1][0]", 0);
|
|
125
|
+
const ey = _.get(points, "[1][1]", 0);
|
|
126
|
+
width = ex - dx;
|
|
127
|
+
height = ey - dy;
|
|
128
|
+
|
|
129
|
+
const img = new Image();
|
|
130
|
+
// 本地环境下，带有域名的图片地址存在跨域，设置crossOrigin，允许跨域
|
|
131
|
+
img.setAttribute("crossOrigin", "Anonymous");
|
|
132
|
+
img.src = url;
|
|
133
|
+
img.onload = function () {
|
|
134
|
+
const canvas = document.createElement("canvas");
|
|
135
|
+
const ctx = canvas.getContext("2d");
|
|
136
|
+
if (!ctx) {
|
|
137
|
+
console.error("cannot init screenshot canvas");
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
canvas.width = width;
|
|
141
|
+
canvas.height = height;
|
|
142
|
+
ctx.drawImage(img, dx, dy, width, height, 0, 0, width, height);
|
|
143
|
+
const data = canvas.toDataURL("image/png");
|
|
144
|
+
setResult(data);
|
|
145
|
+
};
|
|
146
|
+
return [result];
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
const sliceImage = () => {
|
|
151
|
+
const canvas = document.createElement("canvas");
|
|
152
|
+
const context = canvas.getContext("2d");
|
|
153
|
+
if (!context || !imageRef.current) {
|
|
154
|
+
return;
|
|
155
|
+
}
|
|
156
|
+
const imageWidth = imageRef.current.naturalWidth;
|
|
157
|
+
const imageHeight = imageRef.current.naturalHeight;
|
|
158
|
+
|
|
159
|
+
const xLines = draggableListData
|
|
160
|
+
.filter((item) => item.axis === "x")
|
|
161
|
+
.map((item) =>
|
|
162
|
+
item.newPosition ? item.newPosition.x : item.defaultPosition.x
|
|
163
|
+
)
|
|
164
|
+
.map((item) => Math.round(item / scale))
|
|
165
|
+
.concat(imageWidth)
|
|
166
|
+
.sort((a, b) => a - b);
|
|
167
|
+
console.log(xLines);
|
|
168
|
+
const yLines = draggableListData
|
|
169
|
+
.filter((item) => item.axis === "y")
|
|
170
|
+
.map((item) =>
|
|
171
|
+
item.newPosition ? item.newPosition.y : item.defaultPosition.y
|
|
172
|
+
)
|
|
173
|
+
.map((item) => Math.round(item / scale))
|
|
174
|
+
.concat(imageHeight)
|
|
175
|
+
.sort((a, b) => a - b);
|
|
176
|
+
for (let y = 0; y < yLines.length; y++) {
|
|
177
|
+
for (let x = 0; x < xLines.length; x++) {
|
|
178
|
+
const sliceX = x === 0 ? 0 : xLines[x - 1];
|
|
179
|
+
const sliceY = y === 0 ? 0 : yLines[y - 1];
|
|
180
|
+
const sliceWidth =
|
|
181
|
+
x === xLines.length - 1 ? imageWidth - sliceX : xLines[x] - sliceX;
|
|
182
|
+
const sliceHeight =
|
|
183
|
+
y === yLines.length - 1 ? imageHeight - sliceY : yLines[y] - sliceY;
|
|
184
|
+
|
|
185
|
+
canvas.width = sliceWidth;
|
|
186
|
+
canvas.height = sliceHeight;
|
|
187
|
+
|
|
188
|
+
context.drawImage(
|
|
189
|
+
imageRef.current,
|
|
190
|
+
sliceX,
|
|
191
|
+
sliceY,
|
|
192
|
+
sliceWidth,
|
|
193
|
+
sliceHeight,
|
|
194
|
+
0,
|
|
195
|
+
0,
|
|
196
|
+
sliceWidth,
|
|
197
|
+
sliceHeight
|
|
198
|
+
);
|
|
199
|
+
|
|
200
|
+
const sliceData = canvas.toDataURL("image/png");
|
|
201
|
+
downloadSlice(sliceData, `slice_${x}_${y}.png`);
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
};
|
package/p2.js
ADDED
|
@@ -0,0 +1,334 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var postcss = require('postcss');
|
|
4
|
+
var objectAssign = require('object-assign');
|
|
5
|
+
function getUnitRegexp(unit) {
|
|
6
|
+
return new RegExp('"[^"]+"|\'[^\']+\'|url\\([^\\)]+\\)|(\\d*\\.?\\d+)' + unit, 'g');
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
var defaults = {
|
|
10
|
+
unitToConvert: 'px',
|
|
11
|
+
viewportWidth: 320,
|
|
12
|
+
viewportHeight: 568, // not now used; TODO: need for different units and math for different properties
|
|
13
|
+
unitPrecision: 5,
|
|
14
|
+
viewportUnit: 'vw',
|
|
15
|
+
fontViewportUnit: 'vw', // vmin is more suitable.
|
|
16
|
+
selectorBlackList: [],
|
|
17
|
+
propList: ['*'],
|
|
18
|
+
minPixelValue: 1,
|
|
19
|
+
mediaQuery: false,
|
|
20
|
+
replace: true,
|
|
21
|
+
landscape: false,
|
|
22
|
+
landscapeUnit: 'vw',
|
|
23
|
+
landscapeWidth: 568
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
var ignoreNextComment = 'px-to-viewport-ignore-next';
|
|
27
|
+
var ignorePrevComment = 'px-to-viewport-ignore';
|
|
28
|
+
|
|
29
|
+
module.exports = postcss.plugin('postcss-px-to-viewport', function (options) {
|
|
30
|
+
var opts = Object.assign({}, defaults, options);
|
|
31
|
+
|
|
32
|
+
checkRegExpOrArray(opts, 'exclude');
|
|
33
|
+
checkRegExpOrArray(opts, 'include');
|
|
34
|
+
|
|
35
|
+
var pxRegex = getUnitRegexp(opts.unitToConvert);
|
|
36
|
+
var nRule = [];
|
|
37
|
+
|
|
38
|
+
return function (css, result) {
|
|
39
|
+
console.log('css222222', css.source.input.file)
|
|
40
|
+
css.walkRules(function (rule) {
|
|
41
|
+
// Add exclude option to ignore some files like 'node_modules'
|
|
42
|
+
var file = rule.source && rule.source.input.file;
|
|
43
|
+
console.log('file-------', file)
|
|
44
|
+
const _rule = rule.clone()
|
|
45
|
+
_rule.selector = 'div'
|
|
46
|
+
_rule.walkDecls(function (decl, i) {
|
|
47
|
+
var unit;
|
|
48
|
+
var size;
|
|
49
|
+
unit = getUnit(decl.prop, opts);
|
|
50
|
+
size = opts.viewportWidth;
|
|
51
|
+
|
|
52
|
+
var value = decl.value.replace(pxRegex, createPxReplace(opts, unit, size));
|
|
53
|
+
|
|
54
|
+
if (declarationExists(decl.parent, decl.prop, value)) return;
|
|
55
|
+
|
|
56
|
+
if (opts.replace) {
|
|
57
|
+
decl.value = value;
|
|
58
|
+
} else {
|
|
59
|
+
decl.parent.insertAfter(i, decl.clone({ value: value }));
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
nRule.push(_rule)
|
|
63
|
+
|
|
64
|
+
});
|
|
65
|
+
nRule.forEach((rule) => {
|
|
66
|
+
css.append(rule)
|
|
67
|
+
})
|
|
68
|
+
};
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
function getUnit(prop, opts) {
|
|
72
|
+
return prop.indexOf('font') === -1 ? opts.viewportUnit : opts.fontViewportUnit;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
function createPxReplace(opts, viewportUnit, viewportSize) {
|
|
76
|
+
return function (m, $1) {
|
|
77
|
+
if (!$1) return m;
|
|
78
|
+
var pixels = parseFloat($1);
|
|
79
|
+
if (pixels <= opts.minPixelValue) return m;
|
|
80
|
+
var parsedVal = toFixed((pixels / viewportSize * 100), opts.unitPrecision);
|
|
81
|
+
return parsedVal === 0 ? '0' : parsedVal + viewportUnit;
|
|
82
|
+
};
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
function error(decl, message) {
|
|
86
|
+
throw decl.error(message, { plugin: 'postcss-px-to-viewport' });
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
function checkRegExpOrArray(options, optionName) {
|
|
90
|
+
var option = options[optionName];
|
|
91
|
+
if (!option) return;
|
|
92
|
+
if (Object.prototype.toString.call(option) === '[object RegExp]') return;
|
|
93
|
+
if (Object.prototype.toString.call(option) === '[object Array]') {
|
|
94
|
+
var bad = false;
|
|
95
|
+
for (var i = 0; i < option.length; i++) {
|
|
96
|
+
if (Object.prototype.toString.call(option[i]) !== '[object RegExp]') {
|
|
97
|
+
bad = true;
|
|
98
|
+
break;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
if (!bad) return;
|
|
102
|
+
}
|
|
103
|
+
throw new Error('options.' + optionName + ' should be RegExp or Array of RegExp.');
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
function toFixed(number, precision) {
|
|
107
|
+
var multiplier = Math.pow(10, precision + 1),
|
|
108
|
+
wholeNumber = Math.floor(number * multiplier);
|
|
109
|
+
return Math.round(wholeNumber / 10) * 10 / multiplier;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
function blacklistedSelector(blacklist, selector) {
|
|
113
|
+
if (typeof selector !== 'string') return;
|
|
114
|
+
return blacklist.some(function (regex) {
|
|
115
|
+
if (typeof regex === 'string') return selector.indexOf(regex) !== -1;
|
|
116
|
+
return selector.match(regex);
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
function declarationExists(decls, prop, value) {
|
|
121
|
+
return decls.some(function (decl) {
|
|
122
|
+
return (decl.prop === prop && decl.value === value);
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
function validateParams(params, mediaQuery) {
|
|
127
|
+
return !params || (params && mediaQuery);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
'use strict';
|
|
132
|
+
|
|
133
|
+
var postcss = require('postcss');
|
|
134
|
+
var objectAssign = require('object-assign');
|
|
135
|
+
var { createPropListMatcher } = require('./src/prop-list-matcher');
|
|
136
|
+
var { getUnitRegexp } = require('./src/pixel-unit-regexp');
|
|
137
|
+
|
|
138
|
+
var defaults = {
|
|
139
|
+
unitToConvert: 'px',
|
|
140
|
+
viewportWidth: 320,
|
|
141
|
+
viewportHeight: 568, // not now used; TODO: need for different units and math for different properties
|
|
142
|
+
unitPrecision: 5,
|
|
143
|
+
viewportUnit: 'vw',
|
|
144
|
+
fontViewportUnit: 'vw', // vmin is more suitable.
|
|
145
|
+
selectorBlackList: [],
|
|
146
|
+
propList: ['*'],
|
|
147
|
+
minPixelValue: 1,
|
|
148
|
+
mediaQuery: false,
|
|
149
|
+
replace: true,
|
|
150
|
+
landscape: false,
|
|
151
|
+
landscapeUnit: 'vw',
|
|
152
|
+
landscapeWidth: 568
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
var ignoreNextComment = 'px-to-viewport-ignore-next';
|
|
156
|
+
var ignorePrevComment = 'px-to-viewport-ignore';
|
|
157
|
+
|
|
158
|
+
module.exports = postcss.plugin('postcss-px-to-viewport', function (options) {
|
|
159
|
+
var opts = objectAssign({}, defaults, options);
|
|
160
|
+
|
|
161
|
+
checkRegExpOrArray(opts, 'exclude');
|
|
162
|
+
checkRegExpOrArray(opts, 'include');
|
|
163
|
+
|
|
164
|
+
var pxRegex = getUnitRegexp(opts.unitToConvert);
|
|
165
|
+
var satisfyPropList = createPropListMatcher(opts.propList);
|
|
166
|
+
var landscapeRules = [];
|
|
167
|
+
|
|
168
|
+
return function (css, result) {
|
|
169
|
+
css.walkRules(function (rule) {
|
|
170
|
+
// Add exclude option to ignore some files like 'node_modules'
|
|
171
|
+
var file = rule.source && rule.source.input.file;
|
|
172
|
+
|
|
173
|
+
if (opts.include && file) {
|
|
174
|
+
if (Object.prototype.toString.call(opts.include) === '[object RegExp]') {
|
|
175
|
+
if (!opts.include.test(file)) return;
|
|
176
|
+
} else if (Object.prototype.toString.call(opts.include) === '[object Array]') {
|
|
177
|
+
var flag = false;
|
|
178
|
+
for (var i = 0; i < opts.include.length; i++) {
|
|
179
|
+
if (opts.include[i].test(file)) {
|
|
180
|
+
flag = true;
|
|
181
|
+
break;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
if (!flag) return;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
if (opts.exclude && file) {
|
|
189
|
+
if (Object.prototype.toString.call(opts.exclude) === '[object RegExp]') {
|
|
190
|
+
if (opts.exclude.test(file)) return;
|
|
191
|
+
} else if (Object.prototype.toString.call(opts.exclude) === '[object Array]') {
|
|
192
|
+
for (var i = 0; i < opts.exclude.length; i++) {
|
|
193
|
+
if (opts.exclude[i].test(file)) return;
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
if (blacklistedSelector(opts.selectorBlackList, rule.selector)) return;
|
|
199
|
+
|
|
200
|
+
if (opts.landscape && !rule.parent.params) {
|
|
201
|
+
var landscapeRule = rule.clone().removeAll();
|
|
202
|
+
|
|
203
|
+
rule.walkDecls(function(decl) {
|
|
204
|
+
if (decl.value.indexOf(opts.unitToConvert) === -1) return;
|
|
205
|
+
if (!satisfyPropList(decl.prop)) return;
|
|
206
|
+
|
|
207
|
+
landscapeRule.append(decl.clone({
|
|
208
|
+
value: decl.value.replace(pxRegex, createPxReplace(opts, opts.landscapeUnit, opts.landscapeWidth))
|
|
209
|
+
}));
|
|
210
|
+
});
|
|
211
|
+
|
|
212
|
+
if (landscapeRule.nodes.length > 0) {
|
|
213
|
+
landscapeRules.push(landscapeRule);
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
if (!validateParams(rule.parent.params, opts.mediaQuery)) return;
|
|
218
|
+
|
|
219
|
+
rule.walkDecls(function(decl, i) {
|
|
220
|
+
if (decl.value.indexOf(opts.unitToConvert) === -1) return;
|
|
221
|
+
if (!satisfyPropList(decl.prop)) return;
|
|
222
|
+
|
|
223
|
+
var prev = decl.prev();
|
|
224
|
+
// prev declaration is ignore conversion comment at same line
|
|
225
|
+
if (prev && prev.type === 'comment' && prev.text === ignoreNextComment) {
|
|
226
|
+
// remove comment
|
|
227
|
+
prev.remove();
|
|
228
|
+
return;
|
|
229
|
+
}
|
|
230
|
+
var next = decl.next();
|
|
231
|
+
// next declaration is ignore conversion comment at same line
|
|
232
|
+
if (next && next.type === 'comment' && next.text === ignorePrevComment) {
|
|
233
|
+
if (/\n/.test(next.raws.before)) {
|
|
234
|
+
result.warn('Unexpected comment /* ' + ignorePrevComment + ' */ must be after declaration at same line.', { node: next });
|
|
235
|
+
} else {
|
|
236
|
+
// remove comment
|
|
237
|
+
next.remove();
|
|
238
|
+
return;
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
var unit;
|
|
243
|
+
var size;
|
|
244
|
+
var params = rule.parent.params;
|
|
245
|
+
|
|
246
|
+
if (opts.landscape && params && params.indexOf('landscape') !== -1) {
|
|
247
|
+
unit = opts.landscapeUnit;
|
|
248
|
+
size = opts.landscapeWidth;
|
|
249
|
+
} else {
|
|
250
|
+
unit = getUnit(decl.prop, opts);
|
|
251
|
+
size = opts.viewportWidth;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
var value = decl.value.replace(pxRegex, createPxReplace(opts, unit, size));
|
|
255
|
+
|
|
256
|
+
if (declarationExists(decl.parent, decl.prop, value)) return;
|
|
257
|
+
|
|
258
|
+
if (opts.replace) {
|
|
259
|
+
decl.value = value;
|
|
260
|
+
} else {
|
|
261
|
+
decl.parent.insertAfter(i, decl.clone({ value: value }));
|
|
262
|
+
}
|
|
263
|
+
});
|
|
264
|
+
});
|
|
265
|
+
|
|
266
|
+
if (landscapeRules.length > 0) {
|
|
267
|
+
var landscapeRoot = new postcss.atRule({ params: '(orientation: landscape)', name: 'media' });
|
|
268
|
+
|
|
269
|
+
landscapeRules.forEach(function(rule) {
|
|
270
|
+
landscapeRoot.append(rule);
|
|
271
|
+
});
|
|
272
|
+
css.append(landscapeRoot);
|
|
273
|
+
}
|
|
274
|
+
};
|
|
275
|
+
});
|
|
276
|
+
|
|
277
|
+
function getUnit(prop, opts) {
|
|
278
|
+
return prop.indexOf('font') === -1 ? opts.viewportUnit : opts.fontViewportUnit;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
function createPxReplace(opts, viewportUnit, viewportSize) {
|
|
282
|
+
return function (m, $1) {
|
|
283
|
+
if (!$1) return m;
|
|
284
|
+
var pixels = parseFloat($1);
|
|
285
|
+
if (pixels <= opts.minPixelValue) return m;
|
|
286
|
+
var parsedVal = toFixed((pixels / viewportSize * 100), opts.unitPrecision);
|
|
287
|
+
return parsedVal === 0 ? '0' : parsedVal + viewportUnit;
|
|
288
|
+
};
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
function error(decl, message) {
|
|
292
|
+
throw decl.error(message, { plugin: 'postcss-px-to-viewport' });
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
function checkRegExpOrArray(options, optionName) {
|
|
296
|
+
var option = options[optionName];
|
|
297
|
+
if (!option) return;
|
|
298
|
+
if (Object.prototype.toString.call(option) === '[object RegExp]') return;
|
|
299
|
+
if (Object.prototype.toString.call(option) === '[object Array]') {
|
|
300
|
+
var bad = false;
|
|
301
|
+
for (var i = 0; i < option.length; i++) {
|
|
302
|
+
if (Object.prototype.toString.call(option[i]) !== '[object RegExp]') {
|
|
303
|
+
bad = true;
|
|
304
|
+
break;
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
if (!bad) return;
|
|
308
|
+
}
|
|
309
|
+
throw new Error('options.' + optionName + ' should be RegExp or Array of RegExp.');
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
function toFixed(number, precision) {
|
|
313
|
+
var multiplier = Math.pow(10, precision + 1),
|
|
314
|
+
wholeNumber = Math.floor(number * multiplier);
|
|
315
|
+
return Math.round(wholeNumber / 10) * 10 / multiplier;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
function blacklistedSelector(blacklist, selector) {
|
|
319
|
+
if (typeof selector !== 'string') return;
|
|
320
|
+
return blacklist.some(function (regex) {
|
|
321
|
+
if (typeof regex === 'string') return selector.indexOf(regex) !== -1;
|
|
322
|
+
return selector.match(regex);
|
|
323
|
+
});
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
function declarationExists(decls, prop, value) {
|
|
327
|
+
return decls.some(function (decl) {
|
|
328
|
+
return (decl.prop === prop && decl.value === value);
|
|
329
|
+
});
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
function validateParams(params, mediaQuery) {
|
|
333
|
+
return !params || (params && mediaQuery);
|
|
334
|
+
}
|