rheses/class.html at master · mcarlson/rheses · 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
<html>
<head>
  <title>rhes.es</title>
  <style type="text/css">
    body {
      background-color: rgb(46,36,30);
      background-image: url(img/x2/background-r.png);
      background-size: 259px 259px;
    }
    @font-face {
      font-family: 'wildride';
      src: url('fonts/WildRide.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    .trans {
      background-color: rgba(255,255,255,.5);
      width: 80%;
      height: 80%;
      display:none;
    }
    #logo {
      background-repeat: no-repeat;
      width:171;
      height:64;
      position: absolute;
      background-image: url(img/x2/rheses-color.png);
      background-repeat: no-repeat;
      background-size: 171px 64px;
    }
    #slogan {
      font-family: wildride;
      white-space: nowrap;
      color: rgb(154,123,75);
      font-size: 72px;
      position: absolute;
      text-shadow: 0px 0px 4px rgb(46,36,30);
    }
  </style>
  <script type="text/javascript" src="lib/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="lib/acorn.js"></script>
  <script type="text/javascript" src="lib/coffee-script.js"></script>
  <script type="text/javascript" src="layout.js"></script>
</head>
<body>
  <view id="container" y="300" width="100" height="100" background-color="purple" border-radius="4px" clip="true">
    <handler name="onclick">
      if (this.bnd) this.bnd.destroy()
      this.setAttribute('clip', false)
      // console.log('onclick', this)
    </handler>

    <simplelayout name="lay" spacing="42" type="coffee">
      <handler name="oninit">
        # console.log('oninit instance', this)
        this.hello('a', 'b', 'c')
      </handler>
      <method name="hello" args="a,b,c">
        # console.log('hello instance', a,b,c, this)
      </method>
    </simplelayout>
    <boundslayout name="bnd"></boundslayout>

    <class name="clickresize" width="10" height="10" bgcolor="red">
      <attribute name="data" value="null"></attribute>
      <handler name="onclick">
        this.animate({width: 100, height: 100})
      </handler>
    </class>

    <clickresize bgcolor="red"></clickresize>
    <clickresize bgcolor="yellow" onclick="this.destroy()"></clickresize>
    <clickresize bgcolor="green"></clickresize>
    <clickresize bgcolor="black"></clickresize>
    <clickresize bgcolor="blue">
      <handler name="onclick" type="coffee">
        if (@subviews.length)
          #console.log('destroy', @, @destroy)
          @destroy()
        else
          lay = new lz.simplelayout(null, {parent: @, locked: true, inset: 15})
          for i of ([0..1000])
            #console.log('creating', i)
            new lz.clickresize(null, {parent: @})
          lay.setAttribute('locked', false)
      </handler>
    </clickresize>
    <text onclick="this.setAttribute('text', 'Hi mum this is a lot wider!')" bgcolor="yellow">Hello</text>
    <text width="100" multiline="true" bgcolor="orange">This text should wrap at my width</text>
    <text text="${this.parent.inp.text}" bgcolor="red"></text>
    <inputtext bgcolor="green" name="inp" onclick="this.setAttribute('text', 'Yooyoyo')">Text</inputtext>

    <view width="10" height="10" bgcolor="cyan" x="${lz.mouse.x - this.parent.getAbsolute().x - (this.width * .5)}" y="${lz.mouse.y - this.parent.getAbsolute().y - (this.width * .5)}" clickable="false" ignorelayout="true">
      <handler name="onclick" reference="lz.mouse" args="scope">
        if (this.width !== 100)
          this.animate({width: 100, height: 100, opacity: .2}, 1000)
      </handler>
    </view>

    <class name="clickrepl" extends="clickresize" bgcolor="${this.data}" onclick="this.replicator.applyData()"></class>
    <replicator data="['red','green','blue','yellow', 'orange', 'black']" classname="clickrepl" type="coffee"></replicator>
  </view>

</body>
</html>