Basic first implementation of tabs for the sidebar
This commit is contained in:
Jeremy Ruston
parent
2a4294dc27
commit
a1260dc57d
|
|
@ -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);
|
||||
this.renderer.renderTree.wiki.addTiddler(new $tw.Tiddler(tiddler,{title: this.set, text: this.setTo}));
|
||||
var title = this.set;
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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"/>
|
||||
|
||||
<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>
|
||||
{{$:/templates/SideBar}}
|
||||
|
||||
</header>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
title: myTabset-tiddlerTitle:$:/templates/SideBar;templateTitle:$:/templates/SideBar;-tiddlerTitle:$:/templates/PageTemplate;-
|
||||
|
||||
openTab
|
||||
Loading…
Reference in New Issue