Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Remove backstage redundancy in TiddlyWiki

These changes get rid of the redundant iframes that contain
_space and _account from the tiddlywiki backstage, and replace
the tiddlyspace circle thing in the middle with standard
backstage as dropdowns.

This is done for several different reasons:

* Get rid of redundancy
* Make way for the tiddlyspace bar (which will ride above
  the tiddlywik bar, presumably)
* Fix issues with behaviors in the backstage when logged in,
  not logged in or unplugged.
* Begin a process of making tiddlywiki more lightweight.

Still to do:

* move some code to TiddlySpaceConfig
* update tests

A lot of code which is now apparently dead has been removed,
including quite a bit of CSS.
  • Loading branch information...
commit f8d1e6fab45bd048fa0e4054476c63418ab9d657 1 parent 07dba5e
@cdent cdent authored
Showing with 87 additions and 297 deletions.
  1. +13 −13 src/backstage/Backstage.tid
  2. +74 −284 src/plugins/TiddlySpaceBackstage.js
View
26 src/backstage/Backstage.tid
@@ -1,10 +1,7 @@
-modifier: osmosoft
-tags: excludeLists excludeSearch excludeMissing
-
!SpaceUnplugged
{{unpluggedSpaceTab{
{{wizard{
-<<image unsyncedIcon width:48>> <<message messages.syncExplanation>>
+<<image unsyncedIcon width:48>> If you are unplugged, from here you can sync your offline version with the online version.
}}}
{{wizard syncKey{
{{keyHeading{
@@ -17,23 +14,16 @@ Key}}}
<<message messages.memberStatus>> <<homeLink>>
{{unsyncedList{<<message messages.syncListHeading>> <<list filter [is[unsynced]]>>}}}
-<<tabs txtTiddlySpaceTab
-search "search across TiddlySpace" Backstage##Search
-tiddlers "tiddlers control panel" Backstage##BackstageTiddlers
-plugins "Manage installed plugins" PluginManager
-batch "Perform batch operations on public/private tiddlers" Backstage##BatchOps
-tweaks "Tweak the appearance and behaviour of TiddlyWiki" AdvancedOptions
-"import/export" "Import/export tiddlers from/to a TiddlyWiki" Backstage##ImportExport
->>
running TiddlySpace@glossary version <<message extensions.tiddlyweb.status.tiddlyspace_version>>
{{autotable{
<<tiddler Backstage##Resources>>
}}}
!Resources
-[[blog|@@blog]] [[documentation|@@docs]] [[featured spaces|@@featured]]
+[[blog|@@blog]] [[documentation|@@docs]] [[featured spaces|@@featured]]
!Search
+Search across the entire TiddlySpace service.
<<tsSearch>>
!ImportExport
@@ -73,3 +63,13 @@ You can download this TiddlySpace as an offline TiddlyWiki:
!BatchPublic
<<TiddlySpacePublisher type:public>>
+
+!Plugins
+''Note:'' Many of these plugins are core TiddlySpace plugins and cannot be changed unless first cloned.
+
+<<tiddler PluginManager>>
+
+!Tweaks
+These options change behavior in TiddlyWiki //only// and may be ineffective in TiddlySpace.
+
+<<tiddler AdvancedOptions>>
View
358 src/plugins/TiddlySpaceBackstage.js
@@ -7,45 +7,10 @@
|''Source''|http://github.com/TiddlySpace/tiddlyspace/raw/master/src/plugins/TiddlySpaceBackstage.js|
|''Requires''|TiddlySpaceConfig ImageMacroPlugin TiddlySpaceViewTypes|
!StyleSheet
-.publicLightText {
- color: #C0E5FC;
-}
-
-.privateLightText {
- color: #E2C1D6;
-}
-
.tiddler .error.annotation .button{
display: inline-block;
}
-#backstageArea #backstageToolbar a.task_tiddlyspace {
- margin: 0px auto auto -75px;
- font-weight: bold;
- width: 150px;
- line-height:24px;
- font-size: 1.2em;
- padding: 0;
- top: 0;
- position: absolute;
- left: 50%;
-}
-
-.task_tiddlyspace .image,
-.task_tiddlyspace .svgIcon {
- display: inline;
-}
-
-.task_tiddlyspace .svgIconText {
- display: none;
-}
-
-.task_tiddlyspace .logoText {
- position: absolute;
- top: 0px;
- margin-left: 5px;
-}
-
#backstageArea {
z-index: 49;
color: white;
@@ -58,10 +23,6 @@
padding: 0;
}
-.backstageBackground {
- fill: black;
-}
-
#backstageButton {
overflow: hidden;
}
@@ -103,8 +64,8 @@
background-color: white;
}
-#backstage .tabContents ol,
-#backstage .tabContents ul {
+#backstage ol,
+#backstage ul {
padding: auto;
}
@@ -112,7 +73,7 @@
margin: 0;
}
-.backstagePanelBody .tabContents ul {
+.backstagePanelBody ul {
padding: 5px;
margin: 5px;
}
@@ -121,7 +82,6 @@
margin-left: 5%;
padding: 0em;
margin-right: 5%;
- text-align: center;
}
#backstageToolbar a {
@@ -139,108 +99,25 @@
display: inline;
}
-.backstageTask .txtUserName,
-.backstageTask .spaceName {
- color: #fff;
-}
-
-.backstageSelTab .txtUserName,
-.backstageSelTab .spaceName,
-a:hover .txtUserName,
-a:hover .spaceName {
- color: #000;
-}
-
-.spaceSiteIcon {
- margin-right: 10px;
-}
-
-.userSiteIcon {
- margin-left: 10px;
-}
-
-#backstageToolbar .task_space {
- position: absolute;
- top: 0px;
- left: 0%;
-}
-
-#backstageToolbar .task_user,
-#backstageToolbar .task_login {
- display: block;
- position: absolute;
- top: 0px;
- right: 5%;
-}
-
-#backstageToolbar .task_login img {
- position: relative;
- display: inline;
-}
-
-#backstageToolbar .task_login img,
-#backstageToolbar .task_user img {
- float: right;
-}
-
-#backstageToolbar .task_space .svgIcon {
- float: left;
- position: relative;
- z-index: 2;
-}
-
#backstageToolbar a span {
z-index: 2;
}
-#backstageToolbar .spaceSiteIcon {
- float: left;
-}
-
a.backstageTask {
- display: block;
-}
-
-#backstageToolbar a span.txtUserName,
-#backstageToolbar a .txtUserName span {
- display: inline;
- float: none;
-}
-
-#backstage .deleteButton {
- margin-left: 0.3em;
- font-weight: bold;
- color: red;
- font-size: 1.6em;
-}
-
-#backstage .deleteButton:hover {
- background: none;
-}
-
-#backstageArea .siteIcon {
- display: inline;
-}
-
-#backstagePanel .TiddlySpaceLogin {
display: inline;
+ margin-left: 1em !important;
}
-.backstagePanelBody .tabContents .button {
+.backstagePanelBody .button {
display: inline-block;
margin-right: 10px;
}
-.backstagePanelBody .tab {
+.backstagePanelBody {
margin: 0 0 0 0.6em;
padding: 0.4em 0.5em 1px 0.5em;
}
-#backstage .tabContents {
- padding: 1.5em;
- text-align: left;
-}
-
#backstage table {
margin: auto;
}
@@ -250,19 +127,6 @@ a.backstageTask {
margin: 0;
}
-#backstage .txtSpaceTab li {
- border: 1px solid #ddd;
- background: #eee;
- list-style: none;
- margin: 0.5em;
- padding: 0.5em;
- width: 80%;
-}
-
-#backstage .txtSpaceTab li.annotation {
- border: 2px solid [[ColorPalette::SecondaryMid]];
-}
-
#backstage div li.listLink {
border: 0px;
width: 78%;
@@ -277,10 +141,6 @@ a.backstageTask {
width: 100%;
}
-#backstage div.txtSpaceTab li .deleteButton {
- float: right;
-}
-
#backstage fieldset {
border: solid 1px [[ColorPalette::Background]];
}
@@ -352,18 +212,6 @@ span.chunkyButton a.button:hover {
color: #fff;
}
-a.baskstageTask.task_login,
-a.baskstageTask.task_user {
- _width: 200px;
- _text-align: right;
-}
-
-#backstageArea #backstageToolbar .task_login img,
-#backstageArea #backstageToolbar .task_user img {
- _display: inline;
- _float: none;
-}
-
#backstage .unpluggedSpaceTab .wizard,
.unpluggedSpaceTab .wizard {
background: white;
@@ -405,12 +253,6 @@ a.baskstageTask.task_user {
.unsyncedList {
display: none;
}
-
-#backstage iframe {
- height: 600px;
- width: 100%;
- border: none;
-}
!Code
***/
//{{{
@@ -425,44 +267,66 @@ if(!config.extensions.tiddlyweb.status.tiddlyspace_version) { // unplugged
config.extensions.tiddlyweb.status.server_host = {
url: config.extensions.tiddlyweb.host }; // TiddlySpaceLinkPlugin expects this
}
-var disabled_tabs_for_nonmembers = ["PluginManager", "Backstage##FileImport",
- "Backstage##BatchOps", "Backstage##SpaceMembers",
- "TiddlySpaceTabs##Private", "TiddlySpaceTabs##Drafts"];
+var disabled_tasks_for_nonmembers = ["tiddlers", "plugins", "batch", "sync"];
+
var tweb = config.extensions.tiddlyweb;
var tiddlyspace = config.extensions.tiddlyspace;
var currentSpace = tiddlyspace.currentSpace.name;
var imageMacro = config.macros.image;
if(config.options.chkBackstage === undefined) {
- config.options.chkBackstage = true;
+ config.options.chkBackstage = false;
}
-config.tasks.user = {
- text: "user: ",
- tooltip: "user control panel",
- unpluggedText: "unplugged user",
- content: "<html><iframe frameBorder='0' src='" + config.extensions.tiddlyweb.host + "/_account'></iframe></html>"
+// Set up Backstage
+config.tasks = {};
+config.tasks.status = {
+ text: "status",
+ tooltip: "TiddlySpace Info",
+ content: "<<tiddler Backstage##Menu>>"
};
-
-config.tasks.space = {
- text: "space: ",
- tooltip: "space control panel",
- className: "right"
+config.tasks.search = {
+ text: "search",
+ tooltip: "Search TiddlySpace",
+ content: "<<tiddler Backstage##Search>>"
};
-
-config.tasks.tiddlyspace = {
- text: "",
- tooltip: "",
- content: "<<tiddler Backstage##Menu>>"
+config.tasks.tiddlers = {
+ text: "tiddlers",
+ tooltip: "tiddlers control panel",
+ content: "<<tiddler Backstage##BackstageTiddlers>>"
+};
+config.tasks.plugins = {
+ text: "plugins",
+ tooltip: "Manage installed plugins",
+ content: "<<tiddler Backstage##Plugins>>",
+};
+config.tasks.batch = {
+ text: "batch",
+ tooltip: "Batch manage public/private tiddlers",
+ content: "<<tiddler Backstage##BatchOps>>",
+};
+config.tasks.tweaks = {
+ text: "tweaks",
+ tooltip: "Tweak TiddlyWiki behaviors",
+ content: "<<tiddler Backstage##Tweaks>>"
+};
+config.tasks.export = {
+ text: "import/export",
+ tooltip: "Import/export tiddlers from/to a TiddlyWiki",
+ content: "<<tiddler Backstage##ImportExport>>"
+};
+config.tasks.sync = {
+ text: "sync",
+ tooltip: "Check Sync status",
+ content: "<<tiddler Backstage##SpaceUnplugged>>"
};
-if(window.location.protocol == "file:") {
- config.unplugged = true; // TODO: move into extensions.tiddly{web/space} namespace!?
- config.tasks.space.content = "<<tiddler Backstage##SpaceUnplugged>>";
-} else {
- config.tasks.space.content = "<html><iframe frameBorder='0' src='/_space'></iframe></html>";
+if (window.location.protocol == "file:") {
+ config.unplugged = true;
}
-config.backstageTasks = ["tiddlyspace", "user", "space"];
+
+config.backstageTasks = ["status", "search", "tiddlers", "plugins",
+ "batch", "tweaks", "export", "sync"];
config.messages.backstage.prompt = "";
// initialize state
@@ -470,29 +334,41 @@ var _show = backstage.show;
backstage.show = function() {
// selectively hide backstage tasks and tabs based on user status
var tasks = $("#backstageToolbar .backstageTask").show();
+ var bs = backstage.tiddlyspace;
if(!config.unplugged) {
tweb.getUserInfo(function(user) {
if(user.anon) {
- $(".task_user", tasks).hide();
- tiddlyspace.disableTab(disabled_tabs_for_nonmembers);
+ jQuery.each(disabled_tasks_for_nonmembers, function(i, task) {
+ var taskIndex = config.backstageTasks.indexOf(task);
+ if (taskIndex !== -1) {
+ config.backstageTasks.splice(taskIndex, 1);
+ }
+ });
+ config.messages.memberStatus = bs.locale.loggedout;
} else {
- $(".task_login", tasks).hide();
+ config.messages.memberStatus = readOnly ?
+ bs.locale.nonmember : bs.locale.member;
}
});
+ } else {
+ config.messages.memberStatus = bs.locale.unplugged;
}
+
// display backstage
return _show.apply(this, arguments);
};
if(readOnly) {
- tiddlyspace.disableTab(disabled_tabs_for_nonmembers);
+ jQuery.each(disabled_tasks_for_nonmembers, function(i, task) {
+ var taskIndex = config.backstageTasks.indexOf(task);
+ if (taskIndex !== -1) {
+ config.backstageTasks.splice(taskIndex, 1);
+ }
+ });
}
var tasks = config.tasks;
var commonUrl = "/bags/common/tiddlers/%0";
-// mock out renderAvatar if unavailable -- XXX: temporary hotfix, not a permanent solution!
-tiddlyspace.renderAvatar = tiddlyspace.renderAvatar || function() {};
-
backstage.tiddlyspace = {
locale: {
member: "You are a member of this space.",
@@ -500,18 +376,8 @@ backstage.tiddlyspace = {
loggedout: "You are currently logged out of TiddlySpace.",
unplugged: "You are unplugged."
},
- checkSyncStatus: function(tiddler) {
- var bs = backstage.tiddlyspace;
- var t = store.filterTiddlers("[is[unsynced]]");
- var unsyncedList = $("#backstage .tiddlyspaceMenu .unsyncedList");
- if(t.length > 0 && !readOnly) {
- bs.tweakMiddleButton("unsyncedIcon");
- $("#backstage").addClass("unsyncedChanges");
- } else {
- bs.tweakMiddleButton();
- $("#backstage").removeClass("unsyncedChanges");
- }
- refreshElements($("#backstage")[0]);
+ // XXX: This should be TiddlySpaceConfig, not in backstage.
+ checkSyncStatus: function(tiddler) {
if(tiddler) {
var title = typeof(tiddler) === "string" ? tiddler : tiddler.title;
var el = story.getTiddler(title) || false;
@@ -520,22 +386,6 @@ backstage.tiddlyspace = {
}
}
},
- userButton: function(backstageArea, user) {
- // override user button (logged in) to show username
- var userBtn = $("[task=user]", backstageArea).empty();
- if(config.unplugged && user.anon) {
- $("<span />").text(tasks.user.unpluggedText).appendTo(userBtn);
- } else if(!config.unplugged && user.anon) {
- userBtn.remove();
- } else {
- $("<span />").text(tasks.user.text).appendTo(userBtn);
- $("<span />").addClass("txtUserName").text(user.name).appendTo(userBtn);
- var container = $("<span />").appendTo(userBtn)[0];
- tiddlyspace.renderAvatar(container, user.name,
- { imageOptions: { imageClass:"userSiteIcon", height: 24, width: 24 },
- labelOptions: { include: false } });
- }
- },
showButton: function() {
var showBtn = $("#backstageShow")[0];
var altText = $(showBtn).text();
@@ -550,71 +400,15 @@ backstage.tiddlyspace = {
imageMacro.renderImage(hideBtn, "close.svg",
{ altImage: commonUrl.format("close.png"), alt: altText, width: 24, height: 24 });
},
@FND
FND added a note

As reported by @jayfresh, this trailing comma breaks compatibilty with legacy browsers.

Needs moar JSLint.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
- middleButton: function(backstageArea, user) {
- var bs = backstage.tiddlyspace;
- var backstageToolbar = $("#backstageToolbar", backstageArea)[0];
- if(config.unplugged) {
- config.messages.memberStatus = bs.locale.unplugged;
- } else if(!user.anon) {
- config.messages.memberStatus = readOnly ? bs.locale.nonmember : bs.locale.member;
- } else {
- config.messages.memberStatus = bs.locale.loggedout;
- }
- // construct the tiddlyspace logo
- var backstageLogo = $("#[task=tiddlyspace]").empty()[0];
- $("<span />").addClass("iconContainer").appendTo(backstageLogo);
- $('<span class="logoText"><span class="privateLightText">tiddly</span>' +
- '<span class="publicLightText">space</span></span>').
- appendTo(backstageLogo);
- bs.tweakMiddleButton();
- },
- tweakMiddleButton: function(iconName) {
- var backstageLogo = $("#[task=tiddlyspace] .iconContainer").empty()[0];
- var backstageToolbar = $("#backstageToolbar");
- var plugin = backstage.tiddlyspace;
- if(!iconName) {
- iconName = readOnly ? "publicIcon" : "privateAndPublicIcon";
- }
- config.macros.image.renderImage(backstageLogo, iconName, { width: 24, height: 24 });
- },
- spaceButton: function(backstageArea, user) {
- // override space button to show SiteIcon
- var btn = $("[task=space]", backstageArea).show();
- if(user && user.anon && config.unplugged) {
- btn.hide();
- return;
- }
- btn.empty();
- tiddlyspace.renderAvatar(btn[0], currentSpace,
- { imageOptions: { imageClass:"spaceSiteIcon", height: 24, width: 24 },
- labelOptions: { include: false } });
- $("<span />").text(tasks.space.text).appendTo(btn);
- $("<span />").addClass("spaceName").text(currentSpace).appendTo(btn);
- },
- addClasses: function(backstageArea) {
- var tasks = $(".backstageTask", backstageArea);
- for(var i = 0; i < tasks.length; i++) {
- var btn = $(tasks[i]);
- var taskName = btn.attr("task");
- btn.addClass("task_%0".format(taskName));
- }
- }
};
var _init = backstage.init;
backstage.init = function() {
_init.apply(this, arguments);
var init = function(user) {
- var backstageArea = $("#backstageArea")[0];
var bs = backstage.tiddlyspace;
- store.addNotification(null, bs.checkSyncStatus);
- bs.userButton(backstageArea, user);
bs.showButton();
bs.hideButton();
- bs.middleButton(backstageArea, user);
- bs.spaceButton(backstageArea, user);
- bs.addClasses(backstageArea); // for IE styling purposes
- bs.checkSyncStatus();
};
tweb.getUserInfo(init);
};
@@ -642,10 +436,6 @@ config.macros.exportSpace = {
}
};
-$.extend(config.messages, {
- syncExplanation: "You are currently viewing an offline version of this TiddlySpace. From here you can sync your offline copy with the online version.",
- syncListHeading: "Unsaved tiddlers listed below"});
-
config.extensions.ServerSideSavingPlugin.reportSuccess = function(msg, tiddler) {
backstage.tiddlyspace.checkSyncStatus(tiddler);
msg = config.extensions.ServerSideSavingPlugin.locale[msg];
Please sign in to comment.
Something went wrong with that request. Please try again.