First commit of new Menu Bar plugin

editions/prerelease/tiddlywiki.info

@@ -14,7 +14,8 @@
 		"tiddlywiki/dynaview",
 		"tiddlywiki/codemirror",
 		"tiddlywiki/comments",
-		"tiddlywiki/browser-storage"
+		"tiddlywiki/browser-storage",
+		"tiddlywiki/menubar"
 	],
 	"themes": [
 		"tiddlywiki/vanilla",

editions/tw5.com/tiddlers/menubar/gettingstarted.tid

@@ -0,0 +1,6 @@
+title: $:/editions/tw5.com/menuitems/gettingstarted
+caption: ~GettingStarted
+description: Link to ~GettingStarted
+tags: $:/tags/MenuBar
+target: GettingStarted
+

editions/tw5.com/tiddlers/menubar/tagsMenuBar.tid

@@ -0,0 +1,2 @@
+title: $:/tags/MenuBar
+list:$:/plugins/tiddlywiki/menubar/items/hamburger $:/plugins/tiddlywiki/menubar/items/topleftbar $:/editions/tw5.com/menuitems/gettingstarted $:/plugins/tiddlywiki/menubar/items/contents $:/plugins/tiddlywiki/menubar/items/search $:/plugins/tiddlywiki/menubar/items/pagecontrols $:/plugins/tiddlywiki/menubar/items/server $:/plugins/tiddlywiki/menubar/items/toprightbar

editions/tw5.com/tiddlywiki.info

@@ -4,7 +4,8 @@
 		"tiddlywiki/nodewebkitsaver",
 		"tiddlywiki/browser-sniff",
 		"tiddlywiki/railroad",
-		"tiddlywiki/evernote"
+		"tiddlywiki/evernote",
+		"tiddlywiki/menubar"
 	],
 	"themes": [
 		"tiddlywiki/vanilla",

plugins/tiddlywiki/menubar/config-DefaultColourMappings.multids

@@ -0,0 +1,4 @@
+title: $:/config/DefaultColourMappings/
+
+menubar-foreground: #fff
+menubar-background: #5778d8

plugins/tiddlywiki/menubar/config-MenuItemsVisibility.multids

@@ -0,0 +1,4 @@
+title: $:/config/plugins/menubar/MenuItems/Visibility/$:/plugins/tiddlywiki/menubar/items/
+
+pagecontrols: hide
+server: hide

plugins/tiddlywiki/menubar/config-breakpoint.tid

@@ -0,0 +1,2 @@
+title: $:/config/plugins/menubar/breakpoint
+text: 620px

plugins/tiddlywiki/menubar/config.tid

@@ -0,0 +1,31 @@
+title: $:/plugins/tiddlywiki/menubar/config
+tags: $:/tags/ControlPanel/Toolbars
+caption: Top Menu Bar
+
+\define config-base() $:/config/plugins/menubar/MenuItems/Visibility/
+
+! Top Menu Configuration
+
+!! Menu Items
+
+Select which menu items will be shown. You can also drag items to reorder them.
+
+<$set name="tv-config-toolbar-icons" value="yes">
+
+<$set name="tv-config-toolbar-text" value="yes">
+
+<$macrocall $name="list-tagged-draggable" tag="$:/tags/MenuBar" itemTemplate="$:/core/ui/ControlPanel/Toolbars/ItemTemplate"/>
+
+</$set>
+
+</$set>
+
+!! Breakpoint Position
+
+The breakpoint position between narrow and wide screens. Should include CSS units (eg. `400px`).
+
+<$edit-text tiddler="$:/config/plugins/menubar/breakpoint" default="" tag="input"/>
+
+!! Menu Bar Colours
+
+To change the colour of the menu bar, define the colours `menubar-foreground` and `menubar-background` in the currently selected palette

plugins/tiddlywiki/menubar/items/contents.tid

@@ -0,0 +1,11 @@
+title: $:/plugins/tiddlywiki/menubar/items/contents
+caption: Contents
+description: Table of Contents
+is-dropdown: yes
+tags: $:/tags/MenuBar
+
+<div class="tc-table-of-contents">
+
+<<toc-selective-expandable 'TableOfContents'>>
+
+</div>

plugins/tiddlywiki/menubar/items/hamburger.tid

@@ -0,0 +1,17 @@
+title: $:/plugins/tiddlywiki/menubar/items/hamburger
+tags: $:/tags/MenuBar
+caption: Hamburger
+description: Show the full menu bar on a narrow screen
+custom-menu-content: {{$:/plugins/tiddlywiki/menubar/items/hamburger}}
+show-when: narrow
+
+<$list filter="[[$:/state/popup/menubar/hamburger]get[text]else[no]match[no]]">
+<$button set="$:/state/popup/menubar/hamburger" setTo="yes">
+{{$:/core/images/menu-button}}
+</$button>
+</$list>
+<$list filter="[[$:/state/popup/menubar/hamburger]get[text]else[no]match[yes]]">
+<$button set="$:/state/popup/menubar/hamburger" setTo="no">
+{{$:/core/images/close-button}}
+</$button>
+</$list>

plugins/tiddlywiki/menubar/items/pagecontrols.tid

@@ -0,0 +1,19 @@
+title: $:/plugins/tiddlywiki/menubar/items/pagecontrols
+tags: $:/tags/MenuBar
+description: Page controls from the sidebar
+caption: Page controls
+custom-menu-content: <$transclude tiddler="$:/plugins/tiddlywiki/menubar/items/pagecontrols" mode="inline"/>
+
+\whitespace trim
+\define config-title()
+$:/config/PageControlButtons/Visibility/$(listItem)$
+\end
+<$list filter="[all[shadows+tiddlers]tag[$:/tags/PageControls]!has[draft.of]]" variable="listItem">
+<$set name="hidden" value=<<config-title>>>
+<$list filter="[<hidden>!text[hide]]" storyview="pop" variable="ignore">
+<$set name="tv-config-toolbar-class" filter="[<tv-config-toolbar-class>] [<listItem>encodeuricomponent[]addprefix[tc-btn-]]">
+<$transclude tiddler=<<listItem>> mode="inline"/>
+</$set>
+</$list>
+</$set>
+</$list>

plugins/tiddlywiki/menubar/items/search.tid

@@ -0,0 +1,33 @@
+title: $:/plugins/tiddlywiki/menubar/items/search
+custom-menu-content: {{$:/plugins/tiddlywiki/menubar/items/search}}
+description: Search
+caption: Search
+tags: $:/tags/MenuBar
+
+<$set name="searchTiddler" value="$:/temp/topmenusearch">
+
+<span style="margin: 0 0.5em;">
+
+<$edit-text tiddler=<<searchTiddler>> tag="input" type="search" focusPopup="$:/state/popup/menubar-search-dropdown" class="tc-popup-handle tc-menu-show-when-wide" placeholder="Search..." default=""/>
+
+</span>
+
+<$reveal tag="div" class="tc-block-dropdown-wrapper" state="$:/state/popup/menubar-search-dropdown" type="nomatch" text="" default="">
+
+<div  class="tc-block-dropdown tc-search-drop-down">
+
+<$list filter="[<searchTiddler>get[text]minlength[1]]" emptyMessage="""<div class="tc-search-results">Type your search terms</div>""" variable="ignore">
+
+<$list filter="[<searchTiddler>get[text]minlength{$:/config/Search/MinLength}limit[1]]" emptyMessage="""<div class="tc-search-results">{{$:/language/Search/Search/TooShort}}</div>""" variable="listItem">
+
+{{$:/core/ui/SearchResults}}
+
+</$list>
+
+</$list>
+
+</div>
+
+</$reveal>
+
+</$set>

plugins/tiddlywiki/menubar/items/server.tid

@@ -0,0 +1,14 @@
+title: $:/plugins/tiddlywiki/menubar/items/server
+tags: $:/tags/MenuBar
+description: Server options
+caption: Server
+custom-menu-content: <$transclude tiddler="$:/plugins/tiddlywiki/menubar/items/server" mode="inline"/>
+
+<$list filter="[[$:/status/IsLoggedIn]get[text]else[no]match[yes]]" variable="ignore">
+<$transclude tiddler="$:/core/ui/Buttons/save-wiki" mode="inline"/>
+</$list>
+<$list filter="[[$:/status/IsLoggedIn]get[text]else[no]match[no]]" variable="ignore">
+<$button message="tm-login">
+Login
+</$button>
+</$list>

plugins/tiddlywiki/menubar/items/topleftbar.tid

@@ -0,0 +1,11 @@
+title: $:/plugins/tiddlywiki/menubar/items/topleftbar
+tags: $:/tags/MenuBar
+description: Items from $:/tags/TopLeftBar
+caption: Legacy Top Left Bar
+custom-menu-content: <$transclude tiddler="$:/plugins/tiddlywiki/menubar/items/topleftbar" mode="inline"/>
+
+<$list filter="[all[shadows+tiddlers]tag[$:/tags/TopLeftBar]!has[draft.of]]" variable="listItem" storyview="pop">
+
+<$transclude tiddler=<<listItem>> mode="inline"/>
+
+</$list>

plugins/tiddlywiki/menubar/items/toprightbar.tid

@@ -0,0 +1,11 @@
+title: $:/plugins/tiddlywiki/menubar/items/toprightbar
+tags: $:/tags/MenuBar
+description: Items from $:/tags/TopRightBar
+caption: Legacy Top Right Bar
+custom-menu-content: <$transclude tiddler="$:/plugins/tiddlywiki/menubar/items/toprightbar" mode="inline"/>
+
+<$list filter="[all[shadows+tiddlers]tag[$:/tags/TopRightBar]!has[draft.of]]" variable="listItem" storyview="pop">
+
+<$transclude tiddler=<<listItem>> mode="inline"/>
+
+</$list>

plugins/tiddlywiki/menubar/menu.tid

@@ -0,0 +1,67 @@
+title: $:/plugins/tiddlywiki/menubar/menu
+tags: $:/tags/PageTemplate
+
+\define menubar-inner(size)
+<ul class="tc-menubar-list">
+<$list filter="[all[shadows+tiddlers]tag[$:/tags/MenuBar]!has[draft.of]]">
+<$list filter="[<currentTiddler>addprefix[$:/config/plugins/menubar/MenuItems/Visibility/]get[text]] ~show +[match[show]]" variable="ignore">
+<$list filter="[[$size$]match[wide]] ~[<currentTiddler>get[show-when]match[$size$]] ~[{$:/state/popup/menubar/hamburger}match[yes]]" variable="ignore">
+<li style={{!!custom-menu-styles}} class={{{ [<currentTiddler>get[show-when]addprefix[tc-menubar-]] tc-menubar-item +[join[ ]] }}}>
+<$list filter="[<currentTiddler>!is-dropdown[yes]]" variable="listItem" emptyMessage="""
+	<!-- Dropdown -->
+	<$set name="dropdown-state" value=<<qualify "$:/state/popup/topmenu/dropdown/">>>
+	<$set name="dropdown-state" value={{{ [<dropdown-state>addsuffix<currentTiddler>] }}}>
+	<$button popup=<<dropdown-state>> selectedClass="tc-selected">
+	<$set name="tv-wikilinks" value="no">
+	<$transclude field="caption" mode="inline"/>
+	<$text text=" "/>
+	<span class="tc-menubar-dropdown-arrow">
+	<$transclude tiddler="$:/core/images/down-arrow" mode="inline"/>
+	</span>
+	</$set>
+	</$button>
+	</$set>
+	</$set>
+""">
+<$list filter="[<currentTiddler>has[custom-menu-content]]" variable="listItem" emptyMessage="""
+	<!-- Link -->
+	<$link to={{!!target}}>
+	<$set name="tv-wikilinks" value="no">
+	<$transclude field="caption" mode="inline"/>
+	</$set>
+	</$link>
+""">
+<!-- Custom content -->
+<$transclude field="custom-menu-content" mode="inline"/>
+</$list>
+</$list>
+</li>
+</$list>
+</$list>
+</$list>
+</ul>
+\end
+
+<$list filter="[all[shadows+tiddlers]tag[$:/tags/MenuBar]!has[draft.of]limit[1]]" variable="listItem">
+<nav class="tc-menubar tc-adjust-top-of-scroll">
+<div class="tc-menubar-narrow">
+<<menubar-inner narrow>>
+</div>
+<div class="tc-menubar-wide">
+<<menubar-inner wide>>
+</div>
+<$list filter="[all[shadows+tiddlers]tag[$:/tags/MenuBar]!has[draft.of]is-dropdown[yes]]">
+<$list filter="[<currentTiddler>addprefix[$:/config/plugins/menubar/MenuItems/Visibility/]get[text]] ~show +[match[show]]" variable="ignore">
+<$set name="dropdown-state" value=<<qualify "$:/state/popup/topmenu/dropdown/">>>
+<$set name="dropdown-state" value={{{ [<dropdown-state>addsuffix<currentTiddler>] }}}>
+<$reveal type="popup" state=<<dropdown-state>> class={{{ [<currentTiddler>get[dropdown]get[class]] }}} tag="div">
+<div class="tc-drop-down">
+<$transclude/>
+</div>
+</$reveal>
+</$set>
+</$set>
+</$list>
+</$list>
+</nav>
+</$list>

plugins/tiddlywiki/menubar/overrides/core-ui-PageTemplate-topleftbar.tid

@@ -0,0 +1,3 @@
+title: $:/core/ui/PageTemplate/topleftbar
+
+<!-- The menubar plugin overrides this tiddler to remove the core top left menu. The menu items that it would include are instead included in the menubar -->

plugins/tiddlywiki/menubar/overrides/core-ui-PageTemplate-toprightbar.tid

@@ -0,0 +1,3 @@
+title: $:/core/ui/PageTemplate/toprightbar
+
+<!-- The menubar plugin overrides this tiddler to remove the core top right menu. The menu items that it would include are instead included in the menubar -->

plugins/tiddlywiki/menubar/plugin.info

@@ -0,0 +1,6 @@
+{
+	"title": "$:/plugins/tiddlywiki/menubar",
+	"name": "Menu Bar",
+	"description": "Menu Bar",
+	"list": "readme config"
+}

plugins/tiddlywiki/menubar/readme.tid

@@ -0,0 +1,27 @@
+title: $:/plugins/tiddlywiki/menubar/readme
+
+!! Introduction
+
+This plugin provides a menu bar with the following features:
+
+* Menu items take the form of simple text links, dropdowns, or entirely custom content
+* Menu items can be individually enabled via the control panel
+* Responds to reduced screen width by abbreviating the menu items to a "hamburger" dropdown
+
+!! Menu Item Tiddlers
+
+Menu items are tagged <<tag $:/tags/MenuBar>>. The following fields are used by this plugin:
+
+|!Field Name |!Purpose |
+|title |Each menu item must have a unique title (not shown to the user) |
+|description |Description for use in listings |
+|tags |Must contain `$:/tags/MenuBar` |
+|caption |The text that is displayed for the menu item. Avoid links, using `~` to suppress CamelCase links if required |
+|target |For simple link menu items specifies a tiddler title as the target of the link |
+|is-dropdown |Set to `yes` to indicate a dropdown menu item |
+|text |For dropdown menu items, specifies the body of the dropdown |
+|custom-menu-content |Optional wikitext to be displayed in place of the caption |
+|custom-menu-styles |Optional string of styles to be applied to menu item |
+
+Custom menu items should make sure that the clickable link or button is an immediate child, and not wrapped in another element.
+

plugins/tiddlywiki/menubar/styles.tid

@@ -0,0 +1,155 @@
+title: $:/plugins/tiddlywiki/menubar/styles
+tags: [[$:/tags/Stylesheet]]
+
+\define breakpoint-plus-one()
+<$text text={{{ [{$:/config/plugins/menubar/breakpoint}removesuffix[px]add[1]addsuffix[px]] }}} />
+\end
+
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
+
+nav.tc-menubar {
+	position: fixed;
+	z-index: 1100;
+	display: inline-block;
+	top: 0;
+	right: 0;
+	left: 0;
+}
+
+nav.tc-menubar ul.tc-menubar-list {
+	position: relative;
+	list-style-type: none;
+	margin: 0;
+	padding: 0 0 0 42px;
+	background: <<colour background>>;
+	background: <<colour menubar-background>>;
+	<<box-shadow "1px 1px 5px rgba(0, 0, 0, 0.3)">>
+}
+
+nav.tc-menubar li.tc-menubar-item {
+	display: inline-block;
+	margin: 0;
+	padding: 0;
+}
+
+nav.tc-menubar .tc-menubar-narrow li.tc-menubar-item {
+	display: block;
+}
+
+nav.tc-menubar li.tc-menubar-item > a,
+nav.tc-menubar li.tc-menubar-item > button {
+	display: inline-block;
+/*	text-transform: uppercase; */
+	line-height: 1;
+	font-weight: 700;
+	color: <<colour foreground>>;
+	color: <<colour menubar-foreground>>;
+	fill: <<colour foreground>>;
+	fill: <<colour menubar-foreground>>;
+	text-decoration: none;
+	padding: 0.5em;
+	margin: 0;
+	background: none;
+	border: none;
+	cursor: pointer;
+	border-radius: 0;
+	text-decoration: none;
+}
+
+nav.tc-menubar li.tc-menubar-item > a.tc-selected,
+nav.tc-menubar li.tc-menubar-item > button.tc-selected {
+	background: <<colour foreground>>;
+	background: <<colour menubar-foreground>>;
+	color: <<colour background>>;
+	color: <<colour menubar-background>>;
+	fill: <<colour background>>;
+	fill: <<colour menubar-background>>;
+}
+
+nav.tc-menubar li.tc-menubar-item svg {
+	transition: none;
+	width: 1em;
+	height: 1em;
+	fill: <<colour foreground>>;
+	fill: <<colour menubar-foreground>>;
+}
+
+nav.tc-menubar li.tc-menubar-item .tc-menubar-dropdown-arrow svg {
+	width: 0.5em;
+	height: 0.5em;
+}
+
+nav.tc-menubar li.tc-menubar-item > a.tc-selected svg,
+nav.tc-menubar li.tc-menubar-item > button.tc-selected svg {
+	fill: <<colour background>>;
+	fill: <<colour menubar-background>>;
+}
+
+nav.tc-menubar li.tc-menubar-item > a:hover,
+nav.tc-menubar li.tc-menubar-item > button:hover svg,
+nav.tc-menubar li.tc-menubar-item > button:hover {
+	background: <<colour foreground>>;
+	background: <<colour menubar-foreground>>;
+	color: <<colour background>>;
+	color: <<colour menubar-background>>;
+	fill: <<colour background>>;
+	fill: <<colour menubar-background>>;
+	border-radius: 0;
+	text-decoration: none;
+}
+
+nav.tc-menubar li.tc-menubar-item > a:active,
+nav.tc-menubar li.tc-menubar-item > button:active svg,
+nav.tc-menubar li.tc-menubar-item > button:active {
+	background: <<colour foreground>>;
+	background: <<colour menubar-foreground>>;
+	color: <<colour background>>;
+	color: <<colour menubar-background>>;
+	fill: <<colour background>>;
+	fill: <<colour menubar-background>>;
+	border-radius: 0;
+	text-decoration: none;
+}
+
+nav.tc-menubar .tc-drop-down,
+nav.tc-menubar .tc-block-dropdown {
+	max-width: 70vw;
+	max-height: 70vh;
+	overflow: auto;
+}
+
+nav.tc-menubar .tc-drop-down a {
+	text-decoration: none;
+}
+
+nav.tc-menubar .tc-drop-down .tc-table-of-contents button {
+	display: inline-block;
+	width: auto;
+}
+
+nav.tc-menubar .tc-drop-down ol {
+	margin: 0;
+}
+
+@media (max-width: {{$:/config/plugins/menubar/breakpoint}}) {
+
+	.tc-menubar-wide {
+		display: none;
+	}
+
+	html nav.tc-menubar ul.tc-menubar-list {
+		padding: 0 0 0 8px;
+	}
+
+}
+
+@media (min-width: <<breakpoint-plus-one>>) {
+
+	nav.tc-menubar li.tc-menubar-item.tc-menubar-narrow,
+	.tc-menubar-narrow {
+		display: none;
+	}
+
+}
+
+

plugins/tiddlywiki/menubar/tags-MenuBar.tid

@@ -0,0 +1,2 @@
+title: $:/tags/MenuBar
+list: $:/plugins/tiddlywiki/menubar/items/hamburger $:/plugins/tiddlywiki/menubar/items/topleftbar $:/plugins/tiddlywiki/menubar/items/contents $:/plugins/tiddlywiki/menubar/items/search $:/plugins/tiddlywiki/menubar/items/pagecontrols $:/plugins/tiddlywiki/menubar/items/server $:/plugins/tiddlywiki/menubar/items/toprightbar