gradient.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. (function() {
  2. var Gradient, OldValue, Value, isDirection, list, utils,
  3. __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
  4. __hasProp = {}.hasOwnProperty;
  5. OldValue = require('../old-value');
  6. Value = require('../value');
  7. utils = require('../utils');
  8. list = require('postcss/lib/list');
  9. isDirection = /top|left|right|bottom/gi;
  10. Gradient = (function(_super) {
  11. __extends(Gradient, _super);
  12. function Gradient() {
  13. return Gradient.__super__.constructor.apply(this, arguments);
  14. }
  15. Gradient.names = ['linear-gradient', 'repeating-linear-gradient', 'radial-gradient', 'repeating-radial-gradient'];
  16. Gradient.prototype.replace = function(string, prefix) {
  17. return list.space(string).map((function(_this) {
  18. return function(value) {
  19. var after, args, close, params;
  20. if (value.slice(0, +_this.name.length + 1 || 9e9) !== _this.name + '(') {
  21. return value;
  22. }
  23. close = value.lastIndexOf(')');
  24. after = value.slice(close + 1);
  25. args = value.slice(_this.name.length + 1, +(close - 1) + 1 || 9e9);
  26. params = list.comma(args);
  27. params = _this.newDirection(params);
  28. if (prefix === '-webkit- old') {
  29. if (args.indexOf('px') === -1) {
  30. return _this.oldWebkit(value, args, params, after);
  31. }
  32. } else {
  33. _this.convertDirection(params);
  34. return prefix + _this.name + '(' + params.join(', ') + ')' + after;
  35. }
  36. };
  37. })(this)).join(' ');
  38. };
  39. Gradient.prototype.directions = {
  40. top: 'bottom',
  41. left: 'right',
  42. bottom: 'top',
  43. right: 'left'
  44. };
  45. Gradient.prototype.oldDirections = {
  46. 'top': 'left bottom, left top',
  47. 'left': 'right top, left top',
  48. 'bottom': 'left top, left bottom',
  49. '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'
  58. };
  59. Gradient.prototype.newDirection = function(params) {
  60. var first, value;
  61. first = params[0];
  62. if (first.indexOf('to ') === -1 && isDirection.test(first)) {
  63. first = first.split(' ');
  64. first = (function() {
  65. var _i, _len, _results;
  66. _results = [];
  67. for (_i = 0, _len = first.length; _i < _len; _i++) {
  68. value = first[_i];
  69. _results.push(this.directions[value.toLowerCase()] || value);
  70. }
  71. return _results;
  72. }).call(this);
  73. params[0] = 'to ' + first.join(' ');
  74. }
  75. return params;
  76. };
  77. Gradient.prototype.oldWebkit = function(value, args, params, after) {
  78. if (this.name !== 'linear-gradient') {
  79. return value;
  80. }
  81. if (params[0] && params[0].indexOf('deg') !== -1) {
  82. return value;
  83. }
  84. if (args.indexOf('-corner') !== -1) {
  85. return value;
  86. }
  87. if (args.indexOf('-side') !== -1) {
  88. return value;
  89. }
  90. params = this.oldDirection(params);
  91. params = this.colorStops(params);
  92. return '-webkit-gradient(linear, ' + params.join(', ') + ')' + after;
  93. };
  94. Gradient.prototype.convertDirection = function(params) {
  95. if (params.length > 0) {
  96. if (params[0].slice(0, 3) === 'to ') {
  97. return params[0] = this.fixDirection(params[0]);
  98. } else if (params[0].indexOf('deg') !== -1) {
  99. return params[0] = this.fixAngle(params[0]);
  100. } else if (params[0].indexOf(' at ') !== -1) {
  101. return this.fixRadial(params);
  102. }
  103. }
  104. };
  105. Gradient.prototype.fixDirection = function(param) {
  106. var value;
  107. param = param.split(' ');
  108. param.splice(0, 1);
  109. param = (function() {
  110. var _i, _len, _results;
  111. _results = [];
  112. for (_i = 0, _len = param.length; _i < _len; _i++) {
  113. value = param[_i];
  114. _results.push(this.directions[value.toLowerCase()] || value);
  115. }
  116. return _results;
  117. }).call(this);
  118. return param.join(' ');
  119. };
  120. Gradient.prototype.roundFloat = function(float, digits) {
  121. return parseFloat(float.toFixed(digits));
  122. };
  123. Gradient.prototype.fixAngle = function(param) {
  124. param = parseFloat(param);
  125. param = Math.abs(450 - param) % 360;
  126. param = this.roundFloat(param, 3);
  127. return param + "deg";
  128. };
  129. Gradient.prototype.oldDirection = function(params) {
  130. var direction;
  131. if (params.length === 0) {
  132. params;
  133. }
  134. if (params[0].indexOf('to ') !== -1) {
  135. direction = params[0].replace(/^to\s+/, '');
  136. direction = this.oldDirections[direction];
  137. params[0] = direction;
  138. return params;
  139. } else {
  140. direction = this.oldDirections.bottom;
  141. return [direction].concat(params);
  142. }
  143. };
  144. Gradient.prototype.colorStops = function(params) {
  145. return params.map(function(param, i) {
  146. var color, match, position, _ref;
  147. if (i === 0) {
  148. return param;
  149. }
  150. _ref = list.space(param), color = _ref[0], position = _ref[1];
  151. if (position == null) {
  152. match = param.match(/^(.*\))(\d.*)$/);
  153. if (match) {
  154. color = match[1];
  155. position = match[2];
  156. }
  157. }
  158. if (position && position.indexOf(')') !== -1) {
  159. color += ' ' + position;
  160. position = void 0;
  161. }
  162. if (i === 1 && (position === void 0 || position === '0%')) {
  163. return "from(" + color + ")";
  164. } else if (i === params.length - 1 && (position === void 0 || position === '100%')) {
  165. return "to(" + color + ")";
  166. } else if (position) {
  167. return "color-stop(" + position + ", " + color + ")";
  168. } else {
  169. return "color-stop(" + color + ")";
  170. }
  171. });
  172. };
  173. Gradient.prototype.fixRadial = function(params) {
  174. var first;
  175. first = params[0].split(/\s+at\s+/);
  176. return params.splice(0, 1, first[1], first[0]);
  177. };
  178. Gradient.prototype.old = function(prefix) {
  179. var regexp, string, type;
  180. if (prefix === '-webkit-') {
  181. type = this.name === 'linear-gradient' ? 'linear' : 'radial';
  182. string = '-gradient';
  183. regexp = utils.regexp("-webkit-(" + type + "-gradient|gradient\\(\\s*" + type + ")", false);
  184. return new OldValue(this.name, prefix + this.name, string, regexp);
  185. } else {
  186. return Gradient.__super__.old.apply(this, arguments);
  187. }
  188. };
  189. Gradient.prototype.add = function(decl, prefix) {
  190. var prop;
  191. prop = decl.prop;
  192. if (prop === 'list-style' || prop === 'list-style-image' || prop === 'content') {
  193. if (prefix === '-webkit-' || prefix === '-webkit- old') {
  194. return Gradient.__super__.add.apply(this, arguments);
  195. }
  196. } else {
  197. return Gradient.__super__.add.apply(this, arguments);
  198. }
  199. };
  200. return Gradient;
  201. })(Value);
  202. module.exports = Gradient;
  203. }).call(this);