mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-24 00:50:28 +00:00
Code Issues Releases Wiki Activity

Basic first implementation of tabs for the sidebar

Browse Source
This commit is contained in:
Jeremy Ruston 2013-03-18 22:18:54 +00:00
parent 2a4294dc27
commit a1260dc57d
5 changed files with 89 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
core/modules/widgets/button.js
View File

@ -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,

30
core/styles/base.tid
View File

@ -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;

9
core/templates/PageTemplate.tid
View File

@ -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>

21
core/templates/SideBar.tid Normal file
View File

@ -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>

3
core/wiki/myTabset.tid Normal file
View File

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