<commit_before><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="jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="acorn.js"></script>
  <script type="text/javascript" src="underscore.js"></script>
  <script type="text/javascript" src="layout.js"></script>
  <script type="text/javascript" src="coffee-script.js"></script>
</head>
<body>
  <view id="container" y="300" width="100" height="100" background-color="purple" border-radius="4px" overflow="hidden">
    <class name="simplelayout" extends="layout" type="coffee">
      <attribute name="attribute" type="string" value="x"></attribute>
      <attribute name="inset" type="number" value="0"></attribute>
      <attribute name="spacing" type="number" value="15"></attribute>
      <attribute name="axis" type="string" value="width"></attribute>
      <handler name="oninit">
        # console.log('oninit', this)
      </handler>
      <handler name="oninset" args="inset">
      	this.inset = inset
        # console.log('oninset', inset)
      </handler>
      <handler name="onsubview" args="subview">
        # console.log('onsubview', this.axis, this.update, subview, this)
        subview.bind(this.axis, this.update)
      </handler>
      <setter name="spacing" args="spacing">
        this.spacing = spacing
        # console.log('spacing setter', spacing, this)
        this.update()
      </setter>
      <setter name="attribute" args="attr">
        newaxis = switch attr
          when 'x' then 'width' 
          when 'y' then 'height'

        # console.log 'coffee', attr, arguments, @, @parent 
        unless @skip() 
          for subview in @parent.subviews
            subview.unbind(@axis, @update).bind(newaxis, @update)

        @axis = newaxis

        @attribute = attr
        # console.log('set_attribute', attr, typeof attr, @attribute, @axis, newaxis)
        @update()
      </setter>
      <method name="update" args="value, sender">
        # console.log('skip', @skip, @locked)
        return if @skip()
        pos = @inset
        skip = true if sender
        for subview in @parent.subviews
          if (skip and subview != sender)
            # console.log 'skipping', subview, sender
          else 
            # console.log 'updating', subview, @attribute, pos
            subview.setAttribute(@attribute, pos) unless subview[@attribute] == pos
            skip = false
          # console.log 'value', pos, @spacing, @inset, @attribute, @axis, subview, subview[@axis]
          pos += @spacing + subview[@axis] 
        return pos
      </method>
    </class>

    <!-- Set the parent's width/height to match its children -->
    <class name="boundslayout" extends="layout" type="coffee">
      <attribute name="width" type="number" value="0"></attribute>
      <attribute name="height" type="number" value="0"></attribute>
      <handler name="oninit">
        # console.log('oninit', this)
      </handler>
      <handler name="onsubview" args="subview">
        # console.log('onsubview bound', this.update, subview, this)
        subview.bind('x y width height', this.update)
      </handler>
      <method name="update" args="value, sender, attribute">
        # console.log('skip', @skip, @locked)
        return if @skip()
        if sender?
          # update based on sender attribute where available
          if (! attribute or attribute == 'x' or attribute == 'width')
            width = Math.max(@width, (sender.x || 0) + (sender.width || 0))
            @setAttribute('width', width)
            @parent.setAttribute('width', width)

          if (! attribute or attribute == 'y' or attribute == 'height')
            height = Math.max(@height, (sender.y || 0) + (sender.height || 0))
            @setAttribute('height', height)
            @parent.setAttribute('height', height)

          # console.log('sender', value, sender, attribute, width, height)
        else if @parent.subviews.length
          # console.log('brute update')
          # brute force
          width = 0
          height = 0
          for subview in @parent.subviews
            # console.log 'updating', subview, @attribute, pos
            width = Math.max(width, (subview.x || 0) + (subview.width || 0))
            height = Math.max(height, (subview.y || 0) + (subview.height || 0))
            # return if isNaN(width) or isNaN(height)
            console.log 'value', subview, width, height

          @setAttribute('width', width)
          @setAttribute('height', height)
          @parent.setAttribute('width', width)
          @parent.setAttribute('height', height)

        return
      </method>
    </class>

    <class name="text" type="coffee">
      <attribute name="multiline" value="false" type="boolean"></attribute>
      <method name="updateSize">
        el = @sprite.el
        style = el.style
        style.width = if @multiline then (@width + 'px') else 'auto'
        style.height = 'auto'
        style.whiteSpace = if @multiline then '' else 'nowrap'

        @setAttribute('width', el.clientWidth)
        @setAttribute('height', el.clientHeight)
      </method>
      <setter name="text" args="text">
        # console.log('set_text', text)
        @sprite.el.innerHTML = text
        @updateSize()
      </setter>
      <handler name="oninit">
        # console.log('oninit', @)
        @updateSize()
      </handler>
    </class>

    <simplelayout name="lay" spacing="42">
      <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></boundslayout>

    <view width="10" height="10" bgcolor="red"></view>
    <view width="10" height="10" bgcolor="yellow"></view>
    <view width="10" height="10" bgcolor="green" id="grn"></view>
    <view width="10" height="10" bgcolor="black"></view>
    <view width="10" height="10" bgcolor="blue" onclick="this.animate({width: 100, height: 100})"></view>
    <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>
  </view>
</body>
</html><commit_msg>Cleanup, demo destroy()<commit_after><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="jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="acorn.js"></script>
  <script type="text/javascript" src="underscore.js"></script>
  <script type="text/javascript" src="layout.js"></script>
  <script type="text/javascript" src="coffee-script.js"></script>
</head>
<body>
  <view id="container" y="300" width="100" height="100" background-color="purple" border-radius="4px" overflow="hidden">
    <class name="simplelayout" extends="layout" type="coffee">
      <attribute name="attribute" type="string" value="x"></attribute>
      <attribute name="inset" type="number" value="0"></attribute>
      <attribute name="spacing" type="number" value="15"></attribute>
      <attribute name="axis" type="string" value="width"></attribute>
      <handler name="oninit">
        # console.log('oninit', this)
      </handler>
      <handler name="oninset" args="inset">
      	@inset = inset
        # console.log('oninset', inset)
      </handler>
      <handler name="onsubview" args="subview">
        # console.log('onsubview', @axis, @update, subview, this)
        @listenTo(subview, @axis, @update)
      </handler>
      <setter name="spacing" args="spacing">
        @spacing = spacing
        # console.log('spacing setter', spacing, this)
        @update()
      </setter>
      <setter name="attribute" args="attr">
        newaxis = switch attr
          when 'x' then 'width' 
          when 'y' then 'height'

        # console.log 'coffee', attr, arguments, @, @parent 
        unless @skip() 
          for subview in @parent.subviews
            subview.unbind(@axis, @update).bind(newaxis, @update)

        @axis = newaxis

        @attribute = attr
        # console.log('set_attribute', attr, typeof attr, @attribute, @axis, newaxis)
        @update()
      </setter>
      <method name="update" args="value, sender">
        # console.log('skip', @skip, @locked)
        return if @skip()
        pos = @inset
        skip = true if sender
        for subview in @parent.subviews
          if (skip and subview != sender)
            # console.log 'skipping', subview, sender
          else 
            # console.log 'updating', subview, @attribute, pos
            subview.setAttribute(@attribute, pos) unless subview[@attribute] == pos
            skip = false
          # console.log 'value', pos, @spacing, @inset, @attribute, @axis, subview, subview[@axis]
          pos += @spacing + subview[@axis] 
        return pos
      </method>
    </class>

    <!-- Set the parent's width/height to match its children -->
    <class name="boundslayout" extends="layout" type="coffee">
      <attribute name="width" type="number" value="0"></attribute>
      <attribute name="height" type="number" value="0"></attribute>
      <handler name="oninit">
        # console.log('oninit', this)
      </handler>
      <handler name="onsubview" args="subview">
        # console.log('onsubview bound', @update, subview, this)
        @listenTo(subview, 'x y width height', @update)
      </handler>
      <method name="update" args="value, sender, attribute">
        # console.log('skip', @skip, @locked)
        return if @skip()
        if sender?
          # update based on sender attribute where available
          if (! attribute or attribute == 'x' or attribute == 'width')
            width = Math.max(@width, (sender.x || 0) + (sender.width || 0))
            @setAttribute('width', width)
            @parent.setAttribute('width', width)

          if (! attribute or attribute == 'y' or attribute == 'height')
            height = Math.max(@height, (sender.y || 0) + (sender.height || 0))
            @setAttribute('height', height)
            @parent.setAttribute('height', height)

          # console.log('sender', value, sender, attribute, width, height)
        else
          # console.log('brute update')
          # brute force
          width = 0
          height = 0
          for subview in @parent.subviews
            # console.log 'updating', subview, @attribute, pos
            width = Math.max(width, (subview.x || 0) + (subview.width || 0))
            height = Math.max(height, (subview.y || 0) + (subview.height || 0))
            # return if isNaN(width) or isNaN(height)
            # console.log 'value', subview, width, height

          @setAttribute('width', width)
          @setAttribute('height', height)
          @parent.setAttribute('width', width)
          @parent.setAttribute('height', height)

        return
      </method>
    </class>

    <class name="text" type="coffee">
      <attribute name="multiline" value="false" type="boolean"></attribute>
      <method name="updateSize">
        el = @sprite.el
        style = el.style
        style.width = if @multiline then (@width + 'px') else 'auto'
        style.height = 'auto'
        style.whiteSpace = if @multiline then '' else 'nowrap'

        @setAttribute('width', el.clientWidth)
        @setAttribute('height', el.clientHeight)
      </method>
      <setter name="text" args="text">
        # console.log('set_text', text)
        @sprite.el.innerHTML = text
        @updateSize()
      </setter>
      <handler name="oninit">
        # console.log('oninit', @)
        @updateSize()
      </handler>
    </class>

    <simplelayout name="lay" spacing="42">
      <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></boundslayout>

    <class name="clickresize" width="10" height="10" onclick="this.animate({width: 100, height: 100})"></class>

    <clickresize bgcolor="red"></clickresize>
    <clickresize bgcolor="yellow" onclick="this.destroy();"></clickresize>
    <clickresize bgcolor="green"></clickresize>
    <clickresize bgcolor="black"></clickresize>
    <clickresize bgcolor="blue"></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>
  </view>
</body>
</html>
{'fraction_non_alphanumeric': 0.161524626452684, 'fraction_numerical': 0.014941892639734366, 'mean_word_length': 2.6106393606393605, 'pattern_counts': {'":': 0, '<': 183, '<?xml version=': 0, '>': 183, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1936653', 'n_tokens_mistral': 4558, 'n_tokens_neox': 4292, 'n_words': 1023}