Basic first implementation of tabs for the sidebar

core/modules/widgets/button.js

@@ -29,6 +29,7 @@ ButtonWidget.prototype.generate = function() {
 	this.hover = this.renderer.getAttribute("hover");
 	this.qualifyTiddlerTitles = this.renderer.getAttribute("qualifyTiddlerTitles");
 	this["class"] = this.renderer.getAttribute("class");
+	this.selectedClass = this.renderer.getAttribute("selectedClass");
 	// Compose the button
 	var classes = ["tw-button"];
 	if(this["class"]) {
@@ -39,6 +40,11 @@ ButtonWidget.prototype.generate = function() {
 		events.push({name: "mouseover", handlerObject: this, handlerMethod: "handleMouseOverOrOutEvent"});
 		events.push({name: "mouseout", handlerObject: this, handlerMethod: "handleMouseOverOrOutEvent"});
 	}
+	if(this.set && this.setTo && this.selectedClass) {
+		if(this.isSelected()) {
+			classes.push(this.selectedClass);
+		}
+	}
 	// Set the return element
 	this.tag = "button";
 	this.attributes ={"class": classes.join(" ")};
@@ -65,9 +71,22 @@ ButtonWidget.prototype.triggerPopup = function(event) {
 	});
 };
 
+ButtonWidget.prototype.isSelected = function() {
+	var title = this.set;
+	if(this.qualifyTiddlerTitles) {
+		title =  title + "-" + this.renderer.getContextScopeId();
+	}
+	var tiddler = this.renderer.renderTree.wiki.getTiddler(title);
+	return tiddler ? tiddler.fields.text === this.setTo : false;
+};
+
 ButtonWidget.prototype.setTiddler = function() {
-	var tiddler = this.renderer.renderTree.wiki.getTiddler(this.set);
+	var title = this.set;
-	this.renderer.renderTree.wiki.addTiddler(new $tw.Tiddler(tiddler,{title: this.set, text: this.setTo}));
+	if(this.qualifyTiddlerTitles) {
+		title =  title + "-" + this.renderer.getContextScopeId();
+	}
+	var tiddler = this.renderer.renderTree.wiki.getTiddler(title);
+	this.renderer.renderTree.wiki.addTiddler(new $tw.Tiddler(tiddler,{title: title, text: this.setTo}));
 };
 
 ButtonWidget.prototype.handleClickEvent = function(event) {
@@ -93,8 +112,19 @@ ButtonWidget.prototype.handleMouseOverOrOutEvent = function(event) {
 };
 
 ButtonWidget.prototype.refreshInDom = function(changedAttributes,changedTiddlers) {
+	var setTitle = this.set,
+		popupTitle = this.popup;
+	if(this.qualifyTiddlerTitles) {
+		var scopeId = this.renderer.getContextScopeId();
+		if(setTitle) {
+			setTitle =  setTitle + "-" + scopeId;
+		}
+		if(popupTitle) {
+			popupTitle =  popupTitle + "-" + scopeId;
+		}
+	}
 	// Check if any of our attributes have changed, or if a tiddler we're interested in has changed
- 	if(changedAttributes.message || changedAttributes.param || changedAttributes.set || changedAttributes.setTo || changedAttributes.popup || changedAttributes.hover || changedAttributes.qualifyTiddlerTitles || changedAttributes["class"] || (this.set && changedTiddlers[this.set]) || (this.popup && changedTiddlers[this.popup])) {
+ 	if(changedAttributes.message || changedAttributes.param || changedAttributes.set || changedAttributes.setTo || changedAttributes.popup || changedAttributes.hover || changedAttributes.qualifyTiddlerTitles || changedAttributes["class"] || (setTitle && changedTiddlers[setTitle]) || (popupTitle && changedTiddlers[popupTitle])) {
 		// Regenerate and rerender the widget and replace the existing DOM node
 		this.generate();
 		var oldDomNode = this.renderer.domNode,

core/styles/base.tid

@@ -231,6 +231,36 @@ a.tw-tiddlylink-missing {
 	<<box-shadow "inset 0 1px 0 #fff">>;
 }
 
+.tw-tab-set {
+}
+
+.tw-tab-buttons {
+	font-size: 0.7em;
+	line-height: 100%;
+	margin-bottom: -1px;
+}
+
+.tw-tab-buttons button {
+	color: #666;
+	background-color: #ccc;
+	border-left: 1px solid #aaa;
+	border-top: 1px solid #aaa;
+	border-right: 1px solid #aaa;
+	border-bottom: 1px solid #aaa;
+	margin-left: 0.25em;
+	margin-right: 0.25em;
+}
+
+.tw-tab-buttons button.tw-tab-selected {
+	background-color: #ececec;
+	border-bottom: 1px solid #ececec;
+}
+
+.tw-tab-contents {
+	border-top: 1px solid #aaa;
+	padding: 1em;
+}
+
 .config-area {
 	max-width: 50em;
 	padding: 1em 3em 3em 3em;

core/templates/PageTemplate.tid

@@ -6,14 +6,9 @@ title: $:/templates/PageTemplate
 <!-- The sidebar header -->
 <header class="sidebar-header">
 
-{{SiteTitle}}.title <br><small>{{SiteSubtitle}}</small>
+{{SiteTitle}}.title <br><small>{{SiteSubtitle}}</small><br>
 
-<$list filter="[list[$:/StoryList]]" history="$:/HistoryList" itemClass="tw-menu-list-item"/>
+{{$:/templates/SideBar}}
-
-<div class="edit-controls">
-<$button message="tw-new-tiddler" class="btn btn-mini btn-success">New</$button>
-<$button message="tw-save-wiki" class="btn btn-mini btn-primary">Save</$button>
-</div>
 
 </header>
 

core/templates/SideBar.tid

@@ -0,0 +1,21 @@
+title: $:/templates/SideBar
+
+<!-- The implementation of tabs here is currently a bit unreadable -->
+<div class="tw-tab-set">
+<div class="tw-tab-buttons"><$button type="set" set="myTabset" setTo="openTab" qualifyTiddlerTitles="yes" selectedClass="tw-tab-selected">Open</$button><$button type="set" set="myTabset" setTo="allTab" qualifyTiddlerTitles="yes" selectedClass="tw-tab-selected">All</$button><$button type="set" set="myTabset" setTo="systemTab" qualifyTiddlerTitles="yes" selectedClass="tw-tab-selected">System</$button></div>
+<div class="tw-tab-contents">
+<$reveal type="match" state="myTabset" text="openTab" qualifyTiddlerTitles="yes">
+<$list filter="[list[$:/StoryList]]" history="$:/HistoryList" itemClass="tw-menu-list-item"/>
+</$reveal>
+<$reveal type="match" state="myTabset" text="allTab" qualifyTiddlerTitles="yes">
+<$list filter="[!is[system]sort[title]]" itemClass="tw-menu-list-item"/>
+</$reveal>
+<$reveal type="match" state="myTabset" text="systemTab" qualifyTiddlerTitles="yes">
+<$list filter="[is[system]sort[title]]" itemClass="tw-menu-list-item"/>
+</$reveal>
+</div>
+
+<div class="edit-controls">
+<$button message="tw-new-tiddler" class="btn btn-mini btn-success">New</$button>
+<$button message="tw-save-wiki" class="btn btn-mini btn-primary">Save</$button>
+</div>

core/wiki/myTabset.tid

@@ -0,0 +1,3 @@
+title: myTabset-tiddlerTitle:$:/templates/SideBar;templateTitle:$:/templates/SideBar;-tiddlerTitle:$:/templates/PageTemplate;-
+
+openTab