3 function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
5 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
7 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
9 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
11 var OldValue = require('../old-value');
12 var Value = require('../value');
13 var utils = require('../utils');
15 var parser = require('postcss-value-parser');
16 var range = require('normalize-range');
18 var isDirection = /top|left|right|bottom/gi;
20 var Gradient = function (_Value) {
21 _inherits(Gradient, _Value);
24 var _temp, _this, _ret;
26 _classCallCheck(this, Gradient);
28 for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
29 args[_key] = arguments[_key];
32 return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Value.call.apply(_Value, [this].concat(args))), _this), Object.defineProperty(_this, 'directions', {
41 }), Object.defineProperty(_this, 'oldDirections', {
45 'top': 'left bottom, left top',
46 'left': 'right top, left top',
47 'bottom': 'left top, left bottom',
48 'right': 'left top, right top',
50 'top right': 'left bottom, right top',
51 'top left': 'right bottom, left top',
52 'right top': 'left bottom, right top',
53 'right bottom': 'left top, right bottom',
54 'bottom right': 'left top, right bottom',
55 'bottom left': 'right top, left bottom',
56 'left top': 'right bottom, left top',
57 'left bottom': 'right top, left bottom'
59 }), _temp), _possibleConstructorReturn(_this, _ret);
62 // Direction to replace
65 // Direction to replace
69 * Change degrees for webkit prefix
71 Gradient.prototype.replace = function replace(string, prefix) {
72 var ast = parser(string);
73 for (var _iterator = ast.nodes, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
77 if (_i >= _iterator.length) break;
78 _ref = _iterator[_i++];
80 _i = _iterator.next();
87 if (node.type === 'function' && node.value === this.name) {
88 node.nodes = this.newDirection(node.nodes);
89 node.nodes = this.normalize(node.nodes);
90 if (prefix === '-webkit- old') {
91 var changes = this.oldWebkit(node);
96 node.nodes = this.convertDirection(node.nodes);
97 node.value = prefix + node.value;
101 return ast.toString();
105 * Replace first token
109 Gradient.prototype.replaceFirst = function replaceFirst(params) {
110 for (var _len2 = arguments.length, words = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
111 words[_key2 - 1] = arguments[_key2];
114 var prefix = words.map(function (i) {
116 return { type: 'space', value: i };
118 return { type: 'word', value: i };
121 return prefix.concat(params.slice(1));
125 * Convert angle unit to deg
129 Gradient.prototype.normalizeUnit = function normalizeUnit(str, full) {
130 var num = parseFloat(str);
131 var deg = num / full * 360;
140 Gradient.prototype.normalize = function normalize(nodes) {
141 if (!nodes[0]) return nodes;
143 if (/-?\d+(.\d+)?grad/.test(nodes[0].value)) {
144 nodes[0].value = this.normalizeUnit(nodes[0].value, 400);
145 } else if (/-?\d+(.\d+)?rad/.test(nodes[0].value)) {
146 nodes[0].value = this.normalizeUnit(nodes[0].value, 2 * Math.PI);
147 } else if (/-?\d+(.\d+)?turn/.test(nodes[0].value)) {
148 nodes[0].value = this.normalizeUnit(nodes[0].value, 1);
149 } else if (nodes[0].value.indexOf('deg') !== -1) {
150 var num = parseFloat(nodes[0].value);
151 num = range.wrap(0, 360, num);
152 nodes[0].value = num + 'deg';
155 if (nodes[0].value === '0deg') {
156 nodes = this.replaceFirst(nodes, 'to', ' ', 'top');
157 } else if (nodes[0].value === '90deg') {
158 nodes = this.replaceFirst(nodes, 'to', ' ', 'right');
159 } else if (nodes[0].value === '180deg') {
160 nodes = this.replaceFirst(nodes, 'to', ' ', 'bottom');
161 } else if (nodes[0].value === '270deg') {
162 nodes = this.replaceFirst(nodes, 'to', ' ', 'left');
169 * Replace old direction to new
173 Gradient.prototype.newDirection = function newDirection(params) {
174 if (params[0].value === 'to') {
177 isDirection.lastIndex = 0; // reset search index of global regexp
178 if (!isDirection.test(params[0].value)) {
190 for (var i = 2; i < params.length; i++) {
191 if (params[i].type === 'div') {
194 if (params[i].type === 'word') {
195 params[i].value = this.revertDirection(params[i].value);
203 * Change new direction to old
207 Gradient.prototype.convertDirection = function convertDirection(params) {
208 if (params.length > 0) {
209 if (params[0].value === 'to') {
210 this.fixDirection(params);
211 } else if (params[0].value.indexOf('deg') !== -1) {
212 this.fixAngle(params);
213 } else if (params[2] && params[2].value === 'at') {
214 this.fixRadial(params);
221 * Replace `to top left` to `bottom right`
225 Gradient.prototype.fixDirection = function fixDirection(params) {
228 for (var _iterator2 = params, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
232 if (_i2 >= _iterator2.length) break;
233 _ref2 = _iterator2[_i2++];
235 _i2 = _iterator2.next();
242 if (param.type === 'div') {
245 if (param.type === 'word') {
246 param.value = this.revertDirection(param.value);
256 Gradient.prototype.fixAngle = function fixAngle(params) {
257 var first = params[0].value;
258 first = parseFloat(first);
259 first = Math.abs(450 - first) % 360;
260 first = this.roundFloat(first, 3);
261 params[0].value = first + 'deg';
265 * Fix radial direction syntax
269 Gradient.prototype.fixRadial = function fixRadial(params) {
270 var first = params[0];
275 for (i = 4; i < params.length; i++) {
276 if (params[i].type === 'div') {
280 second.push(params[i]);
284 params.splice.apply(params, [0, i].concat(second, [div, first]));
287 Gradient.prototype.revertDirection = function revertDirection(word) {
288 return this.directions[word.toLowerCase()] || word;
292 * Round float and save digits under dot
296 Gradient.prototype.roundFloat = function roundFloat(float, digits) {
297 return parseFloat(float.toFixed(digits));
301 * Convert to old webkit syntax
305 Gradient.prototype.oldWebkit = function oldWebkit(node) {
306 var nodes = node.nodes;
308 var string = parser.stringify(node.nodes);
310 if (this.name !== 'linear-gradient') {
313 if (nodes[0] && nodes[0].value.indexOf('deg') !== -1) {
316 if (string.indexOf('px') !== -1 || string.indexOf('-corner') !== -1 || string.indexOf('-side') !== -1) {
321 for (var _iterator3 = nodes, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
325 if (_i3 >= _iterator3.length) break;
326 _ref3 = _iterator3[_i3++];
328 _i3 = _iterator3.next();
335 params[params.length - 1].push(i);
336 if (i.type === 'div' && i.value === ',') {
341 this.oldDirection(params);
342 this.colorStops(params);
345 for (var _iterator4 = params, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
349 if (_i4 >= _iterator4.length) break;
350 _ref4 = _iterator4[_i4++];
352 _i4 = _iterator4.next();
359 node.nodes = node.nodes.concat(param);
362 node.nodes.unshift({ type: 'word', value: 'linear' }, this.cloneDiv(node.nodes));
363 node.value = '-webkit-gradient';
369 * Change direction syntax to old webkit
373 Gradient.prototype.oldDirection = function oldDirection(params) {
374 var div = this.cloneDiv(params[0]);
376 if (params[0][0].value !== 'to') {
377 return params.unshift([{ type: 'word', value: this.oldDirections.bottom }, div]);
380 for (var _iterator5 = params[0].slice(2), _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
384 if (_i5 >= _iterator5.length) break;
385 _ref5 = _iterator5[_i5++];
387 _i5 = _iterator5.next();
394 if (node.type === 'word') {
395 _words.push(node.value.toLowerCase());
399 _words = _words.join(' ');
400 var old = this.oldDirections[_words] || _words;
402 params[0] = [{ type: 'word', value: old }, div];
408 * Get div token from exists parameters
412 Gradient.prototype.cloneDiv = function cloneDiv(params) {
413 for (var _iterator6 = params, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
417 if (_i6 >= _iterator6.length) break;
418 _ref6 = _iterator6[_i6++];
420 _i6 = _iterator6.next();
427 if (i.type === 'div' && i.value === ',') {
431 return { type: 'div', value: ',', after: ' ' };
435 * Change colors syntax to old webkit
439 Gradient.prototype.colorStops = function colorStops(params) {
441 for (var i = 0; i < params.length; i++) {
443 var param = params[i];
449 var color = parser.stringify(param[0]);
450 if (param[1] && param[1].type === 'word') {
451 pos = param[1].value;
452 } else if (param[2] && param[2].type === 'word') {
453 pos = param[2].value;
457 if (i === 1 && (!pos || pos === '0%')) {
458 stop = 'from(' + color + ')';
459 } else if (i === params.length - 1 && (!pos || pos === '100%')) {
460 stop = 'to(' + color + ')';
462 stop = 'color-stop(' + pos + ', ' + color + ')';
464 stop = 'color-stop(' + color + ')';
467 var div = param[param.length - 1];
468 params[i] = [{ type: 'word', value: stop }];
469 if (div.type === 'div' && div.value === ',') {
470 item = params[i].push(div);
478 * Remove old WebKit gradient too
482 Gradient.prototype.old = function old(prefix) {
483 if (prefix === '-webkit-') {
484 var type = this.name === 'linear-gradient' ? 'linear' : 'radial';
485 var string = '-gradient';
486 var regexp = utils.regexp('-webkit-(' + type + '-gradient|gradient\\(\\s*' + type + ')', false);
488 return new OldValue(this.name, prefix + this.name, string, regexp);
490 return _Value.prototype.old.call(this, prefix);
495 * Do not add non-webkit prefixes for list-style and object
499 Gradient.prototype.add = function add(decl, prefix) {
501 if (p.indexOf('mask') !== -1) {
502 if (prefix === '-webkit-' || prefix === '-webkit- old') {
503 return _Value.prototype.add.call(this, decl, prefix);
505 } else if (p === 'list-style' || p === 'list-style-image' || p === 'content') {
506 if (prefix === '-webkit-' || prefix === '-webkit- old') {
507 return _Value.prototype.add.call(this, decl, prefix);
510 return _Value.prototype.add.call(this, decl, prefix);
518 Object.defineProperty(Gradient, 'names', {
521 value: ['linear-gradient', 'repeating-linear-gradient', 'radial-gradient', 'repeating-radial-gradient']
525 module.exports = Gradient;