<commit_before>var E = foam.__context__.E.bind(foam.__context__);

foam.CLASS({
  name: 'SampleBorder',
  extends: 'foam.u2.Element',

  axioms: [
    foam.u2.CSS.create({
      code: function() {/*
        ^ { background: gray; padding: 10px; display: inline-block; }
        ^title { padding: 6px; align-content: center; background: aliceblue; }
        ^content { padding: 6px; width: 300px; height: 200px; background: white; }
      */}
    })
  ],

  properties: [
    'title'
  ],

  methods: [
    function init() {
      this.
          cssClass(this.myCls()).
          start('div').cssClass(this.myCls('title')).add(this.title$).end().
          start('div', null, this.content$).
            cssClass(this.myCls('content')).
          end();
    }
  ]
});

var sb = SampleBorder.create({title: 'Title'});
sb.add('content');
sb.write();


E('br').write();

foam.CLASS({
  name: 'SampleSplitContainer',
  extends: 'foam.u2.Element',

  axioms: [
    foam.u2.CSS.create({
      code: function() {/*
        ^ { background: gray; padding: 10px; display: inline-flex; }
        ^content { margin: 4px; padding: 6px; width: 300px; height: 200px; background: white; }
      */}
    })
  ],

  properties: [
    'leftPanel', 'rightPanel'
  ],

  methods: [
    function init() {
      this.
          cssClass(this.myCls()).
          start('div', null, this.leftPanel$).
            cssClass(this.myCls('content')).
          end().
          start('div', null, this.rightPanel$).
            cssClass(this.myCls('content')).
          end();
    }
  ]
});

var split = SampleSplitContainer.create();
split.write();
split.leftPanel.add('leftContent');
split.rightPanel.add('rightContent');

E('br').write();


foam.CLASS({
  name: 'Tab',
  extends: 'foam.u2.Element',

  properties: [ 'label' ]
});


foam.CLASS({
  name: 'Tabs',
  extends: 'foam.u2.Element',

  axioms: [
    foam.u2.CSS.create({
      code: function() {/*
        ^ { background: gray; width: 600px; height: 200px; padding: 10px; display: block; }
        ^handles { height: 30px; backround: pink; }
        ^tab {
          border: 1px solid black;
          border-bottom: none;
          padding: 5px;
        }
        ^content {
          margin: 4px;
          padding: 6px;
          background: white;
          border: 1px solid black;
          position: relative;
          top: -13px;
          left: -4px;
        }
      */}
    })
  ],

  properties: [
    {
      name: 'tabs',
      factory: function() { return []; }
    },
    'handles',
    'area'
  ],

  methods: [
    function init() {
      this.
          cssClass(this.myCls()).
          start('div', null, this.handles$).
            cssClass(this.myCls('handles')).
          end().
          start('div', null, this.content$).
            cssClass(this.myCls('content')).
          end();
    },

    function add(tab) {
//      this.assert(Tab.isInstance(tab), 'Can only add Tab elements to Tabs.');

      if ( Tab.isInstance(tab) ) {
        this.handles.start('span').cssClass(this.myCls('tab')).add(tab.label).end();
      }

      this.SUPER(tab);
    }
  ]
});

var tabs = Tabs.create().
  start(Tab, {label: 'Tab 1'}).add('tab 1 contents').end().
  start(Tab, {label: 'Tab 2'}).add('tab 2 contents').end();

tabs.write();<commit_msg>Tabs demo now works.<commit_after>var E = foam.__context__.E.bind(foam.__context__);

foam.CLASS({
  name: 'Tab',
  extends: 'foam.u2.Element',

  properties: [
    'label',
    {
      class: 'Boolean',
      name: 'selected'
    }
  ]
});


foam.CLASS({
  name: 'Tabs',
  extends: 'foam.u2.Element',

  axioms: [
    foam.u2.CSS.create({
      code: function() {/*
        ^ {
          background: gray;
          width: 600px;
          height: 200px;
          padding: 10px;
          display: block;
        }
        ^handles { height: 30px; }
        ^tab {
          border: 1px solid black;
          border-bottom: none;
          padding: 5px;
          background: lightgray;
        }
        ^tab.selected {
          background: white;
          position: relative;
          z-index: 1;
        }
        ^content {
          margin: 4px;
          padding: 6px;
          background: white;
          border: 1px solid black;
          position: relative;
          top: -13px;
          left: -4px;
        }
      */}
    })
  ],

  properties: [
    {
      name: 'tabs',
      factory: function() { return []; }
    },
    {
      name: 'selected',
      postSet: function(o, n) {
        if ( o ) o.selected = false;
        n.selected = true;
      }
    },
    'handles',
    'area'
  ],

  methods: [
    function init() {
      this.
          cssClass(this.myCls()).
          start('div', null, this.handles$).
            cssClass(this.myCls('handles')).
          end().
          start('div', null, this.content$).
            cssClass(this.myCls('content')).
          end();
    },

    function add(tab) {
      if ( Tab.isInstance(tab) ) {
        if ( ! this.selected ) this.selected = tab;
        this.handles.start('span').
            cssClass(this.myCls('tab')).
            on('click', function() { this.selected = tab;}.bind(this)).
            enableCls('selected', tab.selected$).
            add(tab.label).
        end();
        tab.shown$ = tab.selected$;
      }

      this.SUPER(tab);
    }
  ]
});

var tabs = Tabs.create().
  start(Tab, {label: 'Tab 1'}).add('tab 1 contents').end().
  start(Tab, {label: 'Tab 2'}).add('tab 2 contents').end().
  start(Tab, {label: 'Tab 3'}).add('Even more contents in tab 3').end();

tabs.write();


E('br').write();



foam.CLASS({
  name: 'SampleBorder',
  extends: 'foam.u2.Element',

  axioms: [
    foam.u2.CSS.create({
      code: function() {/*
        ^ { background: gray; padding: 10px; display: inline-block; }
        ^title { padding: 6px; align-content: center; background: aliceblue; }
        ^content { padding: 6px; width: 300px; height: 200px; background: white; }
      */}
    })
  ],

  properties: [
    'title'
  ],

  methods: [
    function init() {
      this.
          cssClass(this.myCls()).
          start('div').cssClass(this.myCls('title')).add(this.title$).end().
          start('div', null, this.content$).
            cssClass(this.myCls('content')).
          end();
    }
  ]
});

var sb = SampleBorder.create({title: 'Title'});
sb.add('content');
sb.write();


E('br').write();

foam.CLASS({
  name: 'SampleSplitContainer',
  extends: 'foam.u2.Element',

  axioms: [
    foam.u2.CSS.create({
      code: function() {/*
        ^ { background: gray; padding: 10px; display: inline-flex; }
        ^content { margin: 4px; padding: 6px; width: 300px; height: 200px; background: white; }
      */}
    })
  ],

  properties: [
    'leftPanel', 'rightPanel'
  ],

  methods: [
    function init() {
      this.
          cssClass(this.myCls()).
          start('div', null, this.leftPanel$).
            cssClass(this.myCls('content')).
          end().
          start('div', null, this.rightPanel$).
            cssClass(this.myCls('content')).
          end();
    }
  ]
});

var split = SampleSplitContainer.create();
split.write();
split.leftPanel.add('leftContent');
split.rightPanel.add('rightContent');
{'fraction_non_alphanumeric': 0.17704011065006917, 'fraction_numerical': 0.01396957123098202, 'mean_word_length': 1.9929635761589404, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '4539782', 'n_tokens_mistral': 2485, 'n_tokens_neox': 2396, 'n_words': 470}