core-js-101/test.js at master · surface74/core-js-101 · GitHub

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
/*  const builder = cssSelectorBuilder;
*
*  builder.id('main').class('container').class('editable').stringify()
*    => '#main.container.editable'
*
*  builder.element('a').attr('href$=".png"').pseudoClass('focus').stringify()
*    => 'a[href$=".png"]:focus'
*
*  builder.combine(
*      builder.element('div').id('main').class('container').class('draggable'),
*      '+',
*      builder.combine(
*          builder.element('table').id('data'),
*          '~',
*           builder.combine(
*               builder.element('tr').pseudoClass('nth-of-type(even)'),
*               ' ',
*               builder.element('td').pseudoClass('nth-of-type(even)')
*           )
*      )
*  ).stringify()
*    => 'div#main.container.draggable + table#data ~ tr:nth-of-type(even)   td:nth-of-type(even)'
*
*  For more examples see unit tests.
*/
function CssElement(value) {
  this.value = value;
  this.stringify = () => this.value;
}

function CssId(value) {
  this.value = value;
  this.stringify = () => `#${this.value}`;
}

function CssClass(value) {
  this.value = value;
  this.stringify = () => `.${this.value}`;
}

function CssAttr(value) {
  this.value = value;
  this.stringify = () => `[${this.value}]`;
}

function CssPseudoClass(value) {
  this.value = value;
  this.stringify = () => `:${this.value}`;
}

function CssPseudoElement(value) {
  this.value = value;
  this.stringify = () => `::${this.value}`;
}

const cssSelectorBuilder = {
  cssSelector: '',

  element(value) {
    this.cssSelector = ((new CssElement(value)).stringify());
    return { ...this };
  },

  id(value) {
    this.cssSelector += ((new CssId(value)).stringify());
    return { ...this };
  },

  class(value) {
    this.cssSelector += ((new CssClass(value)).stringify());
    return { ...this };
  },

  attr(value) {
    this.cssSelector += ((new CssAttr(value)).stringify());
    return { ...this };
  },

  pseudoClass(value) {
    this.cssSelector += ((new CssPseudoClass(value)).stringify());
    return { ...this };
  },

  pseudoElement(value) {
    this.cssSelector += ((new CssPseudoElement(value)).stringify());
    return { ...this };
  },

  combine(selector1, combinator, selector2) {
    const selector = `${selector1.stringify()} ${combinator} ${selector2.stringify()}`;

    this.cssSelector = selector;
    return { ...this };
  },

  stringify() {
    return this.cssSelector;
  },
};

const builder = cssSelectorBuilder;
console.log(builder.element('div').stringify());
console.log(builder.id('nav-bar').stringify());
// console.log(builder.element('div').id('main').stringify());
// console.log(builder.combine(
//   builder.element('div').id('main').class('container').class('draggable'),
//   '+',
//   builder.element('table').id('data')
// ).stringify());
// console.log(builder.combine(
//   builder.element('div').id('main').class('container').class('draggable'),
//   '+',
//   builder.combine(
//     builder.element('table').id('data'),
//     '~',
//     builder.combine(
//       builder.element('tr').pseudoClass('nth-of-type(even)'),
//       ' ',
//       builder.element('td').pseudoClass('nth-of-type(even)'),
//     ),
//   ),
// ).stringify());

// => 'div#main.container.draggable + table#data ~ tr:nth-of-type(even)   td:nth-of-type(even)'