Web Development

<rs-tabpanel>
	<tab>
		<header>01</header>
		<content>tab 01</content>
	</tab>
	<tab>
		<header>02 <i>hehe</i></header>
		<content>no worries!</content>
	</tab>
	<tab>
		<header>hah</header>
		<content><b>uit's alive</b></content>
	</tab>
	<tab>
		<header>foo</header>
		<content>snafu!</content>
	</tab>
</rs-tabpanel>

function guid(): string {
	var d = Date.now();
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
    return uuid;
}
function createHTML(name: string, attributes: any): HTMLElement {
	var res = document.createElement(name);
	for (var k in attributes) {
		res.setAttribute(k, attributes[k]);
	}
	return res;
}
module RSComponents {
	export class RSTabPanel extends Vue {
		constructor(options: any) {
			var init = {
				template: '#RSTabPanel',
			};
			$.extend(options, init);

			var el: HTMLElement = options.el;
			if (el.children.length > 0) {

				var panel = createHTML('div', { role: 'tabpanel', class: 'panel panel-default' });
				var headers = createHTML('ul', { role: 'tablist', class: 'nav nav-tabs' });
				var contents = createHTML('div', { class: 'tab-content panel-body' });

				for (var i = 0; i < el.children.length; i++) {
					var item: HTMLUnknownElement = <HTMLUnknownElement>el.children[i];
					var h: HTMLUnknownElement = <HTMLUnknownElement>item.children.item(0);
					var c: HTMLUnknownElement = <HTMLUnknownElement>item.children.item(1);
					var uid = guid();

					var attrs: any = { role: 'presentation' };
					if (i == 0) attrs['class'] = 'active';
					var he = createHTML('li', attrs);
					var heLink = createHTML('a', { href: '#' + uid, role: "tab", 'data-toggle': 'tab' });
					heLink.innerHTML = h.innerHTML;
					he.appendChild(heLink);

					attrs = { role: 'tabpanel', class: 'tab-pane', id: uid };
					if (i == 0) attrs['class'] += ' active';
					var ce = createHTML('li', attrs);
					ce.innerHTML = c.innerHTML;

					headers.appendChild(he);
					contents.appendChild(ce);
				}

				panel.appendChild(headers);
				panel.appendChild(contents);
				options.template = panel.outerHTML;
			}
			super(options);
		}

	}
	Vue.component('rs-tabpanel', RSTabPanel);
}

[{headerTemplate_i: '..', contentTemplate_i: '..', data_i: {..}}, ..]

<rs-tabpanel>
	<tab>
		<header>01</header>
		<content>tab 01</content>
	</tab>
	<tab>
		<header>02 hehe</header>
		<content>no worries!</content>
	</tab>
</rs-tabpanel>

Kornfeld Eliyahu Peter wrote:

Did you realized that you wrote like 50 lines of code to create a 10 line HTML?

<div role="tabpanel">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

Picaro2015 wrote:

how about having a shared code base