node-ractify/test/Clock-component.ract-output at master · david-pershouse/node-ractify · 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
var component = module


    component.exports = {
        data: {
            minor: new Array( 60 ),
            major: new Array( 12 )
        },

        init: function () {
            var self = this, interval;

            this.set( 'date', new Date() );

            interval = setInterval( function () {
                self.set( 'date', new Date() );
            });

            this.on( 'teardown', function () {
                clearInterval( interval );
            });
        }
    };


component.exports.template = { v:1,
  t:[ { t:7,
      e:"div",
      a:{ "class":"rvc-clock-demo" },
      f:[ " ",
        { t:7,
          e:"svg",
          a:{ viewBox:"0 0 100 100" },
          f:[ " ",
            { t:7,
              e:"g",
              a:{ transform:"translate(50,50)" },
              f:[ { t:7,
                  e:"circle",
                  a:{ "class":"clock-face",
                    r:"48" } },
                " ",
                { t:4,
                  r:"minor",
                  i:"i",
                  f:[ { t:7,
                      e:"line",
                      a:{ "class":"minor",
                        y1:"42",
                        y2:"45",
                        transform:[ "rotate( ",
                          { t:2,
                            x:{ r:[ "i",
                                "minor.length" ],
                              s:"360*${0}/${1}" } },
                          " )" ] } } ] },
                " ",
                { t:4,
                  r:"major",
                  i:"i",
                  f:[ { t:7,
                      e:"line",
                      a:{ "class":"major",
                        y1:"35",
                        y2:"45",
                        transform:[ "rotate( ",
                          { t:2,
                            x:{ r:[ "i",
                                "major.length" ],
                              s:"360*${0}/${1}" } },
                          " )" ] } } ] },
                " ",
                { t:7,
                  e:"line",
                  a:{ "class":"hour",
                    y1:"2",
                    y2:"-20",
                    transform:[ "rotate( ",
                      { t:2,
                        x:{ r:[ "date" ],
                          s:"30*${0}.getHours()+${0}.getMinutes()/2" } },
                      " )" ] } },
                " ",
                { t:7,
                  e:"line",
                  a:{ "class":"minute",
                    y1:"4",
                    y2:"-30",
                    transform:[ "rotate( ",
                      { t:2,
                        x:{ r:[ "date" ],
                          s:"6*${0}.getMinutes()+${0}.getSeconds()/10" } },
                      " )" ] } },
                " ",
                { t:7,
                  e:"g",
                  a:{ transform:[ "rotate( ",
                      { t:2,
                        x:{ r:[ "date" ],
                          s:"6*${0}.getSeconds()" } },
                      " )" ] },
                  f:[ { t:7,
                      e:"line",
                      a:{ "class":"second",
                        y1:"10",
                        y2:"-38" } },
                    " ",
                    { t:7,
                      e:"line",
                      a:{ "class":"second-counterweight",
                        y1:"10",
                        y2:"2" } } ] } ] } ] } ] } ] }

component.exports.css = "\n    .rvc-clock-demo {\n        position: relative;\n        width: 100%;\n        height: 0;\n        padding-bottom: 100%;\n    }\n\n    .rvc-clock-demo svg {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n    }\n\n    .rvc-clock-demo .clock-face {\n        stroke: #333;\n        fill: white;\n    }\n\n    .rvc-clock-demo .minor {\n        stroke: #999;\n        stroke-width: 0.5;\n    }\n\n    .rvc-clock-demo .major {\n        stroke: #333;\n        stroke-width: 1;\n    }\n\n    .rvc-clock-demo .hour {\n        stroke: #333;\n    }\n\n    .rvc-clock-demo .minute {\n        stroke: #666;\n    }\n\n    .rvc-clock-demo .second, .second-counterweight {\n        stroke: rgb(180,0,0);\n    }\n\n    .rvc-clock-demo .second-counterweight {\n        stroke-width: 3;\n    }\n"